/* =====================================================================
   Livia Safety - mobile / tablet responsive layer
   ---------------------------------------------------------------------
   Pairs with js/mobile.js. Integration: see ../MOBILE-NOTES.md.

   EVERY rule lives inside a max-width media query, so desktop
   (>= 1024px) renders exactly as before.

     <= 1023px  tablet + phone : off-canvas drawer, 2-row topbar, ...
     <=  860px  narrow tablet  : live-shift pill shows its icon only
     <=  640px  phone          : stacked filters, 1-col cards, ...
     <=  400px  small phone    : user avatar hidden in the topbar

   Notes
   - !important is used only to beat inline style="" attributes (or
     existing !important rules in index.html).
   - The drawer rules are gated by html.lv-drawer, a class mobile.js
     sets once it has injected the hamburger. Without JS the sidebar
     simply stays a narrow static column (navigation still reachable).
   - Selectors carry an extra id/class (e.g. .content-area, #monFolders-
     Container) so they win over index.html's <style> blocks no matter
     where the <link> is placed.
   - Colours: only values from index.html's palette (slate/blue); each
     new background (hamburger press, backdrop) has a body.dark variant.
   ===================================================================== */


/* =====================================================================
   1. TABLET + PHONE  (<= 1023px)
   ===================================================================== */
@media (max-width: 1023px) {

    /* 1.1 Viewport ------------------------------------------------------ */
    html {
        -webkit-text-size-adjust: 100%;   /* stop iOS landscape text inflation */
        text-size-adjust: 100%;
    }
    /* 100vh on mobile includes the area under the browser toolbars, which
       cut off the bottom of the (non-scrolling) page. dvh = visible height. */
    html:root,
    html body {
        height: 100vh;
        height: 100dvh;
    }
    html #dashboardPage,
    html #loginPage {
        height: 100vh;
        height: 100dvh;
    }

    /* 1.2 Sidebar -> off-canvas drawer (html.lv-drawer is set by mobile.js) */
    html.lv-drawer .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 9999;               /* above content, FAB (9998), below modals (10000+) */
        width: 80vw;
        max-width: 300px;
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        transform: translateX(-100%);
        visibility: hidden;          /* hidden from tab order / screen readers when closed */
        transition: transform .25s ease, visibility 0s linear .25s, background-color .3s;
    }
    html.lv-drawer body.sidebar-open .sidebar {
        transform: none;
        visibility: visible;
        transition: transform .25s ease, visibility 0s linear 0s, background-color .3s;
        box-shadow: 6px 0 24px rgba(0, 0, 0, .35);
    }
    /* No-JS fallback: keep a narrower static sidebar so navigation still works */
    html:not(.lv-drawer) .sidebar {
        width: 200px;
    }

    /* 1.3 Hamburger button (injected by mobile.js as first child of .topbar).
       It carries the `hidden` attribute; this rule is what makes it visible. */
    html.lv-drawer .topbar > .lv-menu-btn {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        order: 0;
        flex: 0 0 auto;
        width: 38px;
        height: 38px;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: inherit;              /* topbar text colour: #334155 light / #f8fafc dark */
        cursor: pointer;
        touch-action: manipulation;
        -webkit-tap-highlight-color: transparent;
    }
    html.lv-drawer .topbar > .lv-menu-btn > span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 2px;
        background: currentColor;
    }
    html.lv-drawer .topbar > .lv-menu-btn:active {
        background: #e2e8f0;
    }
    body.dark .topbar > .lv-menu-btn:active {
        background: #334155;
    }
    html.lv-drawer .topbar > .lv-menu-btn:focus-visible {
        outline: 2px solid #3b82f6;
        outline-offset: 2px;
    }

    /* 1.4 Backdrop behind the open drawer (injected by mobile.js) */
    html.lv-drawer .lv-sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9998;
        background: rgba(15, 23, 42, .5);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility 0s linear .25s;
        cursor: pointer;
        touch-action: none;
        -webkit-tap-highlight-color: transparent;
    }
    html.lv-drawer body.sidebar-open .lv-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity .25s ease, visibility 0s linear 0s;
    }
    html.lv-drawer body.dark .lv-sidebar-backdrop {
        background: rgba(2, 6, 23, .6);
    }

    /* 1.5 Topbar -> 2 rows:  [menu] [title ......] [actions]
                              [search ........................]          */
    #dashboardPage .topbar {
        flex-wrap: wrap;
        justify-content: flex-start;
        column-gap: 8px;
        row-gap: 8px;
        padding: 10px 16px;
    }
    /* The title+search wrapper dissolves so both become topbar flex items */
    #dashboardPage .topbar > div:first-of-type {
        display: contents !important;
    }
    #dashboardPage .topbar #topbarTitle {
        order: 1;
        flex: 1 1 0;
        min-width: 0 !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 17px !important;
    }
    #dashboardPage .topbar > div:last-of-type {       /* shift pill + .user-info */
        order: 2;
        flex: 0 0 auto;
        margin-left: auto;
        gap: 8px !important;
    }
    #dashboardPage .topbar .user-info {
        gap: 8px !important;
    }
    #dashboardPage .topbar .global-search-wrapper {
        order: 3;
        flex: 1 1 100%;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
    }
    #dashboardPage .topbar .global-search-input {   /* app's generic input rule caps it at 26px */
        min-height: 38px;
    }
    .topbar #liveShiftIndicator {
        padding: 5px 10px !important;
        font-size: 12px !important;
        gap: 6px !important;
    }
    /* #currentUserDisplay: keep the avatar, collapse name + role text.
       font-size:0 also hides the plain "<b>Name</b> (ROLE)" variant. */
    .topbar #currentUserDisplay {
        display: inline-flex;
        align-items: center;
        font-size: 0;
    }
    .topbar #currentUserDisplay > div {
        gap: 0 !important;
    }
    .topbar #currentUserDisplay > div > div {
        display: none !important;
    }
    /* Logout + "Yangilash" update button: icon only */
    .topbar .logout-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        padding: 0;
        border-radius: 8px;
        font-size: 0;
    }
    .topbar .logout-btn i {
        font-size: 15px;
    }
    .topbar #appUpdateBtn {          /* display is still toggled inline by the app */
        justify-content: center;
        flex: 0 0 auto;
        width: 36px;
        height: 36px;
        padding: 0 !important;
        gap: 0 !important;
        border-radius: 50% !important;
        font-size: 0 !important;
    }
    .topbar #appUpdateBtn i {
        font-size: 15px;
    }

    /* 1.6 Content area */
    .main-content > .content-area {
        padding: 16px 16px 80px;
        -webkit-overflow-scrolling: touch;
    }
    /* #rulesSection sits outside .content-area, so it gets its own gutter */
    .main-content > #rulesSection {
        padding-top: 16px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* 1.7 Stat cards: 2 per row on tablet (1 per row on phone, see 3.x) */
    .content-area .stat-card {
        flex: 1 1 40% !important;
        min-width: 0 !important;
    }

    /* 1.8 Scroll containers: momentum scrolling, no swipe-back while panning */
    .content-area .table-container,
    #monFoldersContainer .mon-scroll-wrapper,
    .content-area .solved-leaderboard-wrap {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }

    /* 1.9 Monitoring board: sticky name column 500px -> 280px */
    #monFoldersContainer .mon-table .mon-sticky-col {
        min-width: 280px;
        max-width: 280px;
    }

    /* 1.10 Analytics pie chart never wider than its card (Chart.js sizes it
            and honours max-width; this guards the moment before it renders).
            Deliberately NOT a generic `canvas` rule: Leaflet's canvas renderer
            (used by js/weather.js) lives in a 0-width pane and would collapse. */
    #analyticsSection #analyticsPieChart {
        max-width: 100%;
    }
}

/* Hover feedback only where a real hover exists (avoids sticky hover on touch) */
@media (max-width: 1023px) and (hover: hover) {
    html.lv-drawer .topbar > .lv-menu-btn:hover {
        background: #e2e8f0;
    }
    body.dark .topbar > .lv-menu-btn:hover {
        background: #334155;
    }
}


/* =====================================================================
   2. NARROW TABLET  (<= 860px): live-shift pill -> icon only
      (the shift colour stays as the pill background)
   ===================================================================== */
@media (max-width: 860px) {
    .topbar #liveShiftIndicator {
        flex: 0 0 auto;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0 !important;
        gap: 0 !important;
    }
    .topbar #currentLiveShift {
        display: none;
    }
}


/* =====================================================================
   3. PHONE  (<= 640px)
   ===================================================================== */
@media (max-width: 640px) {

    /* 3.1 Topbar: compact controls ------------------------------------- */
    #dashboardPage .topbar {
        column-gap: 6px;
        row-gap: 6px;
        padding: 8px 10px;
    }
    html.lv-drawer .topbar > .lv-menu-btn {
        width: 36px;
        height: 36px;
    }
    #dashboardPage .topbar #topbarTitle {
        font-size: 15px !important;
    }
    #dashboardPage .topbar > div:last-of-type,
    #dashboardPage .topbar .user-info {
        gap: 3px !important;
    }
    .topbar #devEditModeBtn {        /* developer-only text editor: desktop tool */
        display: none !important;
    }
    .topbar .mute-btn,
    .topbar #themeToggleBtn {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
    .topbar .notif-bell-btn {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }
    .topbar .notif-badge {
        height: 18px;
        min-width: 18px;
        padding: 0 4px;
        font-size: 10px;
    }
    .topbar #liveShiftIndicator {
        width: 32px;
        height: 32px;
    }
    .topbar .logout-btn,
    .topbar #appUpdateBtn {
        width: 34px;
        height: 34px;
    }
    .topbar #currentUserDisplay img {
        width: 26px !important;
        height: 26px !important;
    }
    .topbar #currentUserDisplay i {
        font-size: 22px !important;
    }
    /* Notification dropdown: full width under the first topbar row */
    .topbar #notifMenu {
        position: fixed !important;
        top: 50px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-height: 70vh !important;
    }
    .topbar #notifList {
        max-height: none !important;
    }

    /* 3.2 Form controls -------------------------------------------------
       >= 16px text stops iOS Safari from zooming the page on focus.
       Inputs inside table cells keep their compact desktop size (see
       MOBILE-NOTES.md, "Known limitations").                            */
    input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not(.dyn-hotkey):not(td *):not(.global-voice-widget *),
    select:not(td *):not(.global-voice-widget *),
    textarea:not(td *) {
        font-size: 16px !important;
    }
    .content-area .filter-bar > input:not([type="checkbox"]),
    .content-area .filter-bar > select,
    .content-area .filter-bar > div > input:not([type="checkbox"]),
    .content-area .filter-bar > div select,
    .content-area .company-form-inline > input[type="text"],
    .content-area .company-form-inline > select,
    .content-area .settings-card input[type="text"]:not(.dyn-hotkey),
    .content-area .settings-card input[type="password"],
    .content-area .settings-card select,
    #feedbackSection input[type="text"],
    [id$="Modal"] input:not([type="checkbox"]):not([type="radio"]):not([type="color"]):not([type="file"]),
    [id$="Modal"] select {
        min-height: 40px;
    }

    /* 3.3 Content area + section headers ------------------------------ */
    .main-content > .content-area {
        padding: 12px 10px 88px;     /* bottom room for the AI button */
    }
    .main-content > #rulesSection {
        padding-top: 12px;
        padding-left: 10px;
        padding-right: 10px;
    }
    .main-content .section-title {
        flex-wrap: wrap;
        gap: 6px 10px;
        margin-bottom: 12px;
        font-size: 18px;
    }
    .main-content .section-title .count-badge {
        padding: 3px 10px;
        font-size: 12px;
    }
    #dotSection > div:first-child,                    /* DOT title + violation pills */
    #daysOffSection > div:not(.table-container),      /* "Extra Off" row */
    #rulesSection .settings-card > div:last-child {   /* rules footer */
        flex-wrap: wrap;
        gap: 10px;
    }
    #rulesSection .settings-card {
        padding: 16px !important;
    }

    /* 3.4 Kill desktop min-widths that force horizontal overflow -------
       (dashboard/analytics/company/settings/feedback/device columns)    */
    .content-area div[style*="min-width: 250px"],
    .content-area div[style*="min-width:250px"],
    .content-area div[style*="min-width: 300px"],
    .content-area div[style*="min-width:300px"],
    .content-area div[style*="min-width: 350px"],
    .content-area div[style*="min-width:350px"],
    .content-area div[style*="min-width: 400px"],
    .content-area div[style*="min-width:400px"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }
    .content-area .settings-card,
    #rulesSection .settings-card {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 16px;               /* inline paddings (e.g. map card) still win */
    }
    /* Stat cards: one per row */
    .content-area .stat-card {
        flex: 1 1 100% !important;
    }
    /* New Driver onboarding links: two per row */
    #newDriverSection .settings-card button {
        flex: 1 1 40% !important;
        min-width: 0 !important;
        padding: 10px 12px !important;
    }
    /* Device map: shorter, so one-finger page scrolling is not trapped */
    #deviceSection #deviceMap,
    #deviceSection #realDeviceMap {
        height: 260px !important;
        min-height: 260px !important;
    }

    /* 3.5 Filter bars: stack vertically, full-width controls ---------- */
    .content-area .filter-bar {
        flex-direction: column;
        align-items: stretch !important;
        gap: 8px !important;
        padding: 10px !important;
    }
    .content-area .filter-bar > i {   /* decorative icons would sit on rows of their own */
        display: none;
    }
    .content-area .filter-bar > * {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100%;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .content-area .filter-bar > label {   /* date-range and checkbox chips */
        min-height: 40px;
    }
    .content-area .filter-bar > label > input:not([type="checkbox"]) {
        flex: 1 1 auto;
        width: auto !important;
        min-width: 0 !important;
    }
    .content-area .filter-bar > label > input.flatpickr-mobile {   /* native picker, if flatpickr uses one */
        border: 0;
        background: transparent;
        color: inherit;
    }
    .content-area .filter-bar > div {     /* Names role/status group, Dashboard date row */
        flex-wrap: wrap;
    }
    .content-area .filter-bar > div select {
        flex: 1 1 140px;
        min-width: 0 !important;
    }
    .content-area .filter-bar > div > input {
        flex: 1 1 120px;
        width: auto !important;
        min-width: 0 !important;
    }
    .content-area .filter-bar > div:not(.quick-date-pills) > button {   /* Dashboard "Yuklab olish" */
        flex: 1 1 100%;
        margin-left: 0 !important;
    }
    .content-area .filter-bar > label > input[type="checkbox"] {   /* checkbox at the chip's start */
        flex: 0 0 auto;
        min-width: 0;
    }
    .content-area .filter-bar button {
        min-height: 40px;
    }

    /* 3.6 Inline forms (Company, Requested types, Add Company & Driver) */
    .content-area .company-form-inline {
        flex-wrap: wrap;
        gap: 8px !important;
        padding: 10px !important;
    }
    .content-area .company-form-inline > input[type="text"],
    .content-area .company-form-inline > select,
    .content-area .company-form-inline > textarea,
    .content-area .company-form-inline > div {
        flex: 1 1 100% !important;
        width: 100%;
        min-width: 0 !important;
    }
    .content-area .company-form-inline > div {
        flex-direction: row !important;
    }
    .content-area .company-form-inline button {
        flex: 1 1 auto;
        margin-left: 0 !important;
    }

    /* 3.7 Buttons under tables + pagination --------------------------- */
    .content-area .action-buttons-bottom {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .content-area .action-buttons-bottom > div,
    .content-area #editArchiveButtonsContainer {
        flex-wrap: wrap;
    }
    .content-area .action-buttons-bottom button {
        flex: 1 1 auto;
    }
    .content-area .pagination-container {
        gap: 4px;
    }

    /* 3.8 Monitoring board: folders, company rows, narrow sticky column */
    #monFoldersContainer .mon-folder-header {
        padding: 12px;
        border-radius: 12px;
        font-size: 14px;
    }
    #monFoldersContainer .mon-folder-left {
        flex-wrap: wrap;
        gap: 6px 10px;
        min-width: 0;
    }
    #monFoldersContainer .mon-folder-badge {
        margin-left: 0;
    }
    #monFoldersContainer .mon-folder-content {
        padding: 6px;
    }
    #monFoldersContainer .mon-comp-row {
        padding: 8px 10px;
        font-size: 13px;
    }
    /* company row: icons + long name + count flow like a sentence */
    #monFoldersContainer .mon-comp-row .mon-comp-row-left {
        display: block;
        min-width: 0;
        line-height: 1.8;
        overflow-wrap: anywhere;
    }
    #monFoldersContainer .mon-comp-row .mon-comp-row-left > span {
        vertical-align: middle;
    }
    #monFoldersContainer .mon-comp-block .mon-scroll-wrapper {
        margin-left: 0;
    }
    /* 500px name column -> 150px with wrapping, so the date columns are
       reachable by horizontal scroll (the board auto-scrolls to today). */
    #monFoldersContainer .mon-table .mon-sticky-col {
        width: 150px;
        min-width: 150px;
        max-width: 150px;
        padding: 6px;
    }
    #monFoldersContainer .mon-table td.mon-sticky-col > div {
        flex-wrap: wrap;
        row-gap: 2px;
    }
    #monFoldersContainer .mon-table td.mon-sticky-col > div > div:first-child {
        display: block !important;   /* "2. Name [BADGE]" wraps as text, number stays with the name */
        flex: 1 1 auto;
        min-width: 0;
    }
    #monFoldersContainer .mon-table td.mon-sticky-col .drv-name-text ~ span {   /* TERMINATED / CHANGED badges */
        display: inline-block;
        white-space: nowrap;
    }
    #monFoldersContainer .mon-table td.mon-sticky-col > div > div:last-child {
        margin-left: auto;
    }

    /* 3.9 Modals: near full-screen, internal scroll ------------------- */
    div.modal-overlay {
        padding: 8px;
    }
    .modal-overlay > .modal-content {
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        padding: 16px !important;
        border-radius: 12px !important;
    }
    .modal-overlay .modal-btns {
        flex-wrap: wrap;
    }
    .modal-overlay .modal-btns button {
        flex: 1 1 auto;
        min-height: 40px;
    }
    #urgentAlertModal h2,
    #rollbackModal h2,
    #loginRulesModal h2 {
        font-size: 24px !important;
    }
    /* Global search: fill the screen, results list scrolls */
    #globalSearchModal > .modal-content {
        height: calc(100vh - 16px);
        height: calc(100dvh - 16px);
    }
    #globalSearchModal h2 {
        font-size: 18px !important;
    }
    /* Driver X-Ray: the whole sheet scrolls; 2-column block -> 1 column */
    #driverXrayModal > .modal-content > * {
        flex-shrink: 0;
    }
    #driverXrayModal #xrayDriverName {
        font-size: 20px !important;
    }
    #driverXrayModal #xrayDateFilter {
        flex: 1 1 180px;
        min-width: 0 !important;
    }
    #driverXrayModal .modal-content > div[style*="grid-template-columns: 1fr 1fr"],
    #driverXrayModal .modal-content > div[style*="grid-template-columns:1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #driverXrayModal table {
        min-width: 560px;            /* scroll sideways instead of crushing 6 columns */
    }

    /* 3.10 Floating UI ------------------------------------------------- */
    /* Toasts: full width at the top */
    #toastBox {
        top: 8px !important;
        right: 8px !important;
        left: 8px !important;
    }
    #toastBox .toast-notification {
        width: 100%;
        min-width: 0;
        padding: 12px 14px;
        font-size: 13px;
    }
    /* Voice recording widget: full-width bar above the AI button */
    #globalVoiceWidget {
        top: auto;
        bottom: 72px;
        left: 8px;
        right: 8px;
        justify-content: space-between;
        gap: 8px;
        padding: 6px 10px 6px 6px;
    }
    /* Smart-search dropdown never wider than the screen
       (mobile.js also keeps it from running off the right edge) */
    #smartSearchPanel {
        max-width: calc(100vw - 16px);
    }

    /* 3.11 Login + loading screens ------------------------------------ */
    #loginPage .login-container {
        width: calc(100% - 32px);
        padding: 32px 20px;
        border-radius: 20px;
    }
    #loginPage .logo {
        margin-bottom: 22px;
        font-size: 28px;
    }
    #loginPage .login-input-group {
        margin-bottom: 14px;
    }
    #loginPage .login-input-group input {
        padding: 15px 10px;
    }
    #loginPage .login-btn {
        padding: 15px;
    }
    #loginPage .orb {                 /* smaller + cheaper blur on phones */
        filter: blur(60px);
    }
    #loginPage .orb-1 {
        width: 260px;
        height: 260px;
    }
    #loginPage .orb-2 {
        width: 320px;
        height: 320px;
    }
    #loginPage .orb-3 {
        width: 200px;
        height: 200px;
    }
    #loadingScreen .loader-logo {
        font-size: 34px;
    }
}


/* =====================================================================
   4. SMALL PHONE  (<= 400px): give the page title room in the topbar
   ===================================================================== */
@media (max-width: 400px) {
    .topbar #currentUserDisplay {
        display: none;
    }
    #dashboardPage .topbar {
        padding-left: 8px;
        padding-right: 8px;
    }
}


/* =====================================================================
   5. TAP TARGETS  (phones, and touch tablets <= 1023px)
   ===================================================================== */
@media (max-width: 640px), (max-width: 1023px) and (pointer: coarse) {
    .content-area .table-container td input[type="text"],
    .content-area .table-container td input[type="number"],
    .content-area .table-container td input[type="password"],
    .content-area .table-container td select,
    .content-area .table-container .date-wrapper input,
    .content-area .table-container .time-btn,
    #monFoldersContainer .mon-table td select {
        min-height: 34px;
    }
    .content-area .table-container td input[type="checkbox"],
    .content-area .table-container th input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }
    .content-area .table-container .del-btn {
        min-width: 32px;
        min-height: 32px;
    }
    .content-area .page-btn {
        min-width: 36px;
        min-height: 36px;
    }
    .content-area .add-row-btn,
    .content-area .bulk-del-btn,
    .content-area .quick-pill,
    .content-area .board-pill,
    .content-area .filter-bar button,
    .modal-overlay .btn-cancel,
    .modal-overlay .btn-export,
    .modal-overlay .add-row-btn {
        min-height: 36px;
    }
}


/* =====================================================================
   6. SHORT SCREENS (landscape phones): compact login card so it fits
   ===================================================================== */
@media (max-width: 1023px) and (max-height: 520px) {
    #loginPage .login-container {
        padding: 20px 24px;
    }
    #loginPage .logo {
        margin-bottom: 12px;
        font-size: 24px;
    }
    #loginPage .login-input-group {
        margin-bottom: 10px;
    }
    #loginPage .login-input-group input {
        padding: 11px 10px;
    }
    #loginPage .login-btn {
        margin-top: 6px;
        padding: 12px;
    }
    #loginPage .error-message {
        margin-bottom: 12px;
        padding: 8px;
    }
}


/* =====================================================================
   7. REDUCED MOTION
   ===================================================================== */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    html.lv-drawer .sidebar,
    html.lv-drawer .lv-sidebar-backdrop {
        transition: none !important;
    }
}