/* Import view-specific styles */
@import url("./views/common-view.css");
@import url("./views/customers-view.css");
@import url("./views/brands-view.css");
@import url("./views/countries-view.css");
@import url("./views/states-view.css");
@import url("./views/stores-view.css");
@import url("./views/stores-management-view.css");
@import url("./views/promotions-view.css");
@import url("./views/store-staff-view.css");
@import url("./views/transaction-management-view.css");
@import url("./views/template-configuration-view.css");
@import url("./views/user-management-view.css");
@import url("./views/role-management-view.css");
@import url("./views/screen-management-view.css");
@import url("./views/dashboard-view.css");
@import url("./views/analytics-view.css");
@import url("./views/reports-view.css");
@import url("./views/user-screen-authorization-view.css");
@import url("./views/admin-theme.css");

/* Import Lato font from The Collective's CDN */
@font-face {
    font-family: "LatoLight";
    src: url("/fonts/Lato-Light.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "LatoBold";
    src: url("/fonts/Lato-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Global font configuration */
html {
    --lumo-font-family:
        "LatoRegular", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial,
        sans-serif;
    font-family: var(--lumo-font-family);
}

/* Apply to all text elements */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
div,
button,
input,
textarea,
select {
    font-family: var(--lumo-font-family);
}

/* Heading styles - using LatoBold */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "LatoBold", "Lato", sans-serif;
    font-weight: 700;
    letter-spacing: 0.2px;
}

/* Body text - using LatoRegular */
/* body {
  font-family: 'Inter';
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.2px;
} */

body {
    font-family: "Inter";
    font-weight: 400;
    line-height: 1.6;
}

/* Button text - using LatoBold */
button {
    font-family: "LatoBold", "Lato", sans-serif;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: uppercase;
}

/* Input fields - using LatoRegular */
input,
textarea,
select {
    font-family: "LatoRegular", "Lato", sans-serif;
    font-weight: 400;
}

/* Font size utilities (from The Collective) */
.fs-49 {
    font-size: 49px;
}
.fs-42 {
    font-size: 42px;
}
.fs-35 {
    font-size: 35px;
}
.fs-28 {
    font-size: 28px;
}
.fs-21 {
    font-size: 21px;
}
.fs-18 {
    font-size: 18px;
}
.fs-16 {
    font-size: 16px;
}
.fs-14 {
    font-size: 14px;
}
.fs-12 {
    font-size: 12px;
}

/* Smooth font rendering */
* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Body background color */
body {
    background-color: #f5f7fa !important;
}

/* Main content area background */
vaadin-app-layout [slot="drawer"],
vaadin-app-layout::part(content) {
    background-color: #f5f7fa;
}

/* Dropdown menu positioning - appear below header */
vaadin-context-menu-overlay {
    /* Force positioning relative to button, not cursor */
    --vaadin-overlay-viewport-bottom: auto !important;
}

vaadin-context-menu-overlay::part(overlay) {
    background-color: white;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    min-width: 200px;
    /* Force left alignment */
    left: 0 !important;
    right: auto !important;
}

/* Ensure dropdown appears below the menu button */
vaadin-context-menu-overlay[opening] {
    animation: dropdown-appear 0.2s ease-out;
}

@keyframes dropdown-appear {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

vaadin-context-menu-item {
    padding: 12px 16px;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

vaadin-context-menu-item:hover {
    background-color: #f3f4f6;
}

vaadin-context-menu-item:active {
    background-color: #e5e7eb;
}

vaadin-text-field.text-error::part(input-field) {
    box-shadow: 0 0 0 1px red;
}