/* ================================================================
   Expenditure — Responsive core  (responsive.css)
   Loaded LAST on every app page, after app.css. Pairs with:
     • responsive-pages.css  — page / component specific layers
     • responsive.js         — behaviour (drawer, table cards, scroll lock, device classes)

   Device ranges (the same names responsive.js puts on <html>)
     phone    ≤ 576      (≤ 380 small phone · ≤ 480 compact)
     tablet   577–992    (the sidebar becomes a slide-in drawer at ≤ 992)
     laptop   993–1400
     desktop  ≥ 1401     (≥ 1800 large screens: content is capped and centred)
   Mobile-first where it matters: sizes use clamp() so they scale smoothly between ranges instead
   of jumping. Many views use inline `grid-template-columns` — those are re-flowed with attribute
   selectors (!important is needed to beat inline styles).
================================================================ */

/* ── 0. tokens ─────────────────────────────────────────────────── */
:root {
    --rs-gutter:   clamp(10px, 2.4vw, 28px);   /* page side padding */
    --rs-gap:      clamp(10px, 1.6vw, 20px);   /* gap between cards */
    --rs-touch:    44px;                       /* comfortable tap target */
    --rs-sheet-r:  18px;                       /* bottom-sheet corner radius */
    --rs-vh:       1vh;                        /* set by responsive.js (real viewport height) */
}

/* ── 1. safety nets (every size) ───────────────────────────────── */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body { overflow-x: clip; }
img, svg, canvas, video, iframe { max-width: 100%; }
img, video { height: auto; }
.main-wrapper { max-width: 100%; min-width: 0; }
.app-content { min-width: 0; padding: var(--rs-gutter); }
.app-content > * { min-width: 0; }
h1, h2, h3, h4, .page-title, .card-title, .stat-value { overflow-wrap: anywhere; }
pre, code { max-width: 100%; overflow-x: auto; }
.rs-hide  { display: none !important; }
html.rs-locked, html.rs-locked body { overflow: hidden !important; }       /* drawer / modal open */

/* tables: every table scrolls inside its own box; edge shadows show there is more (responsive.js adds the classes) */
.rs-scroll, .table-wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; position: relative; }
.rs-scroll-host.rs-can-scroll { background:
    linear-gradient(to right, var(--surface, #fff) 30%, transparent) left center / 24px 100% no-repeat local,
    linear-gradient(to left,  var(--surface, #fff) 30%, transparent) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,   rgba(2,6,23,.28), transparent) left center / 10px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(2,6,23,.28), transparent) right center / 10px 100% no-repeat scroll; }
.table { max-width: none; }
.table td, .table th { vertical-align: middle; }

/* grids that responsive.js found too squeezed on a narrow screen */
.rs-grid-1 { grid-template-columns: minmax(0, 1fr) !important; }
.rs-grid-1 > * { min-width: 0; }

/* Bootstrap rows: their negative gutter margin must never be wider than the page padding (it clipped 2–4px at the edges) */
@media (max-width: 992px) {
    .app-content .row { --bs-gutter-x: var(--rs-gutter); --bs-gutter-y: var(--rs-gap); }
}

/* ── 2. large screens: cap the content so lines stay readable ──── */
@media (min-width: 1800px) {
    .app-content { max-width: 1760px; margin-inline: auto; width: 100%; }
    .stats-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ── 3. ≤ 1200  small laptop ───────────────────────────────────── */
@media (max-width: 1200px) {
    .content-grid { gap: var(--rs-gap); }
    .stats-grid { gap: var(--rs-gap); }
    .page-title { font-size: clamp(19px, 2.2vw, 22px); }
}

/* ── 4. ≤ 992  tablet: sidebar → drawer ────────────────────────── */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        width: min(var(--sidebar-width), 86vw) !important;
        box-shadow: none; z-index: 1000;
        height: 100vh; height: calc(var(--rs-vh, 1vh) * 100);
        padding-bottom: env(safe-area-inset-bottom);
        overscroll-behavior: contain;
        transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s;
    }
    .sidebar.mobile-open { transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,.5); }
    .sidebar-overlay { z-index: 990; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
    .sidebar-overlay.active { display: block; }
    .main-wrapper, .sidebar-collapsed .main-wrapper { margin-left: 0 !important; }
    .sidebar-flyout, #sidebar-tooltip { display: none !important; }           /* hover flyouts are desktop-only */
    .sidebar-item, .sidebar-subitem { min-height: 42px; }

    .col-8, .col-7, .col-6, .col-5, .col-4 { grid-column: span 12; }
    .content-grid { grid-template-columns: 1fr; }
    .content-grid > *, [style*="grid-template-columns"] > * { min-width: 0; }

    /* sidebar-style two-column layouts → single column */
    [style*="grid-template-columns:1fr 300px"], [style*="grid-template-columns: 1fr 300px"],
    [style*="grid-template-columns:1fr 320px"], [style*="grid-template-columns: 1fr 320px"],
    [style*="grid-template-columns:1fr 340px"], [style*="grid-template-columns: 1fr 340px"],
    [style*="grid-template-columns:1fr 360px"], [style*="grid-template-columns: 1fr 360px"],
    [style*="grid-template-columns:1fr 380px"], [style*="grid-template-columns: 1fr 380px"],
    [style*="grid-template-columns:2fr 1fr"],   [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:3fr 2fr"],   [style*="grid-template-columns: 3fr 2fr"] {
        grid-template-columns: 1fr !important;
    }
    /* wide KPI rows → 3 / 2 columns */
    [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns: repeat(6, 1fr)"],
    [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns: repeat(5, 1fr)"] {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .dropdown-panel { max-width: calc(100vw - 16px); }
    #nav-panel-notif { width: min(380px, calc(100vw - 16px)) !important; }
}

/* tablet & below: wide tables keep a readable width and scroll inside their box (stacked phone cards are excluded) */
@media (max-width: 992px) {
    .rs-scroll-host > table.table:not(.rs-stack), .table-wrapper > table.table:not(.rs-stack) { min-width: 720px; }
}

/* ── 5. ≤ 768  large phone / portrait tablet ───────────────────── */
@media (max-width: 768px) {
    /* navbar: compact, nothing wraps */
    .app-navbar { padding: 0 10px; gap: 6px; height: 56px; }
    .navbar-page-title { font-size: 14px; min-width: 0; }
    .navbar-right { gap: 4px; }
    #nav-back-btn { display: none; }
    .ws-selector { display: flex !important; padding: 5px 8px; font-size: 12px; max-width: 120px; gap: 5px; }
    .ws-selector-name { max-width: 76px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ws-selector > i:last-child { display: none; }
    .user-menu-trigger > div:not(.user-avatar-sm), .user-menu-trigger > span { display: none; }
    .net-badge .net-label { display: none; }                                   /* dot only */
    .navbar-right .lang-switcher .lang-label, #lang-switcher .lang-name { display: none; }

    /* Bootstrap-utility headers (admin pages): title + buttons wrap instead of squeezing */
    .app-content .d-flex.justify-content-between, .app-content .d-flex.justify-content-md-between { flex-wrap: wrap; gap: 10px; }
    .app-content .d-flex.gap-2, .app-content .d-flex.gap-3 { flex-wrap: wrap; }
    .app-content .btn-sm { min-height: 34px; }

    /* page header: title on top, actions as a tidy full-width row */
    .page-header { flex-direction: column; align-items: stretch; margin-bottom: 14px; gap: 10px; }
    .page-title { font-size: 18px; }
    .page-subtitle { font-size: 12px; }
    .page-actions { width: 100%; gap: 8px; }
    .page-actions > a, .page-actions > button, .page-actions > form { flex: 1 1 auto; }
    .page-actions > form > button, .page-actions > form > a { width: 100%; }
    .page-actions .btn-primary, .page-actions .btn-secondary,
    .page-actions .btn-ghost, .page-actions .btn-danger { justify-content: center; min-height: 40px; }

    /* cards / stats */
    .card-header { padding: 12px 14px; flex-wrap: wrap; gap: 8px; }
    .card-body { padding: 14px; }
    .card-footer { padding: 10px 14px; }
    .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
    .stat-card { padding: 12px; gap: 10px; min-width: 0; }
    .stat-icon { width: 36px; height: 36px; font-size: 15px; }
    .stat-value { font-size: clamp(15px, 4.4vw, 19px); }
    .stat-label { font-size: 10px; }

    /* tables */
    .table th { padding: 8px 10px; font-size: 10px; white-space: nowrap; }
    .table td { padding: 8px 10px; font-size: 12px; }

    /* forms */
    .form-label { font-size: 12px; margin-bottom: 4px; }
    .form-control, .form-select { padding: 9px 11px; font-size: 16px; max-width: 100%; min-height: 40px; }   /* 16px: iOS does not zoom */
    .form-group { margin-bottom: 12px; }
    .btn-primary, .btn-secondary, .btn-ghost, .btn-danger { padding: 9px 14px; font-size: 13px; min-height: 38px; }
    .app-content input:not([type=checkbox]):not([type=radio]), .app-content select, .app-content textarea { max-width: 100%; }
    .input-group { flex-wrap: nowrap; }

    /* inline multi-column grids */
    [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(4,1fr)"], [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns:repeat(5,1fr)"], [style*="grid-template-columns: repeat(5, 1fr)"],
    [style*="grid-template-columns:repeat(6,1fr)"], [style*="grid-template-columns: repeat(6, 1fr)"],
    [style*="grid-template-columns:1fr 1fr 1fr"],   [style*="grid-template-columns: 1fr 1fr 1fr"] {
        grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important;
    }
    [style*="grid-template-columns:repeat(auto-fit,minmax(240px,1fr))"],
    [style*="grid-template-columns:repeat(auto-fill,minmax(320px,1fr))"] {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)) !important;
    }

    /* popups: always fit the screen */
    [style*="position:fixed"][style*="inset:0"] > div, .rs-overlay > * { max-width: 96vw !important; }
    .modal-dialog { margin: 8px; }
    .modal-header, .modal-footer { padding: 12px 14px; }
    .modal-body { padding: 14px; }
    .wh-toast-container { top: 10px; right: 10px; left: 10px; max-width: none; width: auto; }
}

/* ── 6. ≤ 576  phone ───────────────────────────────────────────── */
@media (max-width: 576px) {
    body { font-size: 13.5px; }
    .app-navbar { height: 54px; }
    .ws-selector { max-width: 42px; padding: 6px 9px; justify-content: center; }
    .ws-selector-name { display: none; }
    .icon-btn, .navbar-toggle { width: 38px; height: 38px; }

    .page-title { font-size: 17px; }
    .card-body { padding: 12px; }
    .card-header { padding: 10px 12px; }
    .card-title { font-size: 13px; }
    .stats-grid { gap: 8px; }
    .stat-card { padding: 10px; }

    .page-actions > a, .page-actions > button, .page-actions > form { flex: 1 1 calc(50% - 8px); }
    .page-actions > * { min-width: 0; max-width: 100%; }
    .page-actions .btn-primary, .page-actions .btn-secondary, .page-actions .btn-ghost, .page-actions .btn-danger { white-space: normal; text-align: center; max-width: 100%; }
    .page-actions > .btn-primary:only-child, .page-actions > a:only-child { flex-basis: 100%; }

    /* two-field rows stack on phones … */
    [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:repeat(2,1fr)"][style*="gap:16px"],
    [style*="grid-template-columns:1fr 1fr 1fr auto"] { grid-template-columns: 1fr !important; }
    /* … but KPI-style pairs stay two-up */
    .stats-grid, [style*="repeat(2,1fr)"][style*="margin-bottom"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

    /* popups become bottom sheets */
    .modal-overlay, .rs-overlay, [style*="position:fixed"][style*="inset:0"] { align-items: flex-end !important; padding: 0 !important; }
    .modal-overlay > .modal, .modal-overlay > .modal-content, .modal-overlay > .card,
    .rs-overlay > *, [style*="position:fixed"][style*="inset:0"] > div {
        width: 100% !important; max-width: 100vw !important; margin: 0 !important;
        max-height: calc(var(--rs-vh, 1vh) * 94); overflow-y: auto;
        border-radius: var(--rs-sheet-r) var(--rs-sheet-r) 0 0 !important;
        padding-bottom: env(safe-area-inset-bottom);
        animation: rs-sheet-in .24s cubic-bezier(.2,.8,.2,1);
    }
    .modal-footer { position: sticky; bottom: 0; background: inherit; flex-wrap: wrap; }
    .modal-footer > button, .modal-footer > a { flex: 1 1 calc(50% - 8px); justify-content: center; }
    .wh-toast { width: 100%; }

    /* table cards (responsive.js adds .rs-stack + data-label to simple tables) */
    .rs-scroll:has(> table.rs-stack), .table-wrapper:has(> table.rs-stack) { overflow-x: visible; background: none !important; }
    /* !important on display: datatable.js writes inline `display: table-row` on rows it shows/hides */
    table.rs-stack, table.rs-stack tbody, table.rs-stack tfoot, table.rs-stack tr, table.rs-stack td { display: block !important; width: 100% !important; max-width: 100%; }
    table.rs-stack { border: 0 !important; background: transparent !important; }
    table.rs-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.rs-stack tr { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin: 0 0 10px; padding: 6px 2px;
                        box-shadow: 0 1px 2px rgba(2,6,23,.06); }
    table.rs-stack tfoot tr { background: var(--surface-2, var(--surface)); }
    table.rs-stack td { padding: 6px 12px !important; border: 0 !important; text-align: left !important; font-size: 13px !important; white-space: normal !important; }
    table.rs-stack td::before { content: attr(data-label); display: block; margin-bottom: 1px; font-size: 10px; font-weight: 700;
                                letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
    table.rs-stack td[data-label=""]::before, table.rs-stack td:not([data-label])::before { display: none; }
    table.rs-stack td:empty, table.rs-stack td[data-empty] { display: none !important; }
    table.rs-stack tr { position: relative; }
    table.rs-stack td.dt-serial-td { display: none !important; }                       /* row numbers are noise in a card */
    table.rs-stack td:has(> input[type="checkbox"]:only-child) { position: absolute; top: 8px; right: 10px; width: auto !important; padding: 0 !important; z-index: 1; }
    table.rs-stack td:has(> input[type="checkbox"]:only-child)::before { display: none; }
    table.rs-stack td:first-child { padding-top: 10px !important; font-weight: 600; }
    table.rs-stack td:last-child { padding-bottom: 10px !important; }
    table.rs-stack td:last-child .dt-actions, table.rs-stack td:last-child .row-actions { justify-content: flex-start; }
}
@keyframes rs-sheet-in { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }

/* ── 7. ≤ 380  small phone ─────────────────────────────────────── */
@media (max-width: 380px) {
    .app-content { padding: 8px; }
    .page-title { font-size: 16px; }
    .stat-value { font-size: 15px; }
    .navbar-page-title { font-size: 13px; }
    .app-navbar { gap: 3px; padding: 0 6px; }
    .icon-btn, .navbar-toggle { width: 34px; height: 34px; }
}
@media (max-width: 400px) {
    .app-content > div[style*="display:flex"] { flex-wrap: wrap; }              /* e.g. month navigators: wrap instead of clipping */
}
@media (max-width: 340px) {
    .stats-grid { grid-template-columns: 1fr !important; }
}

/* ── 8. landscape phones (short screens) ───────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .app-navbar { height: 46px; }
    .sidebar-brand { padding-block: 8px; }
    .modal-overlay > .modal, .modal-overlay > .modal-content, .rs-overlay > *, [style*="position:fixed"][style*="inset:0"] > div { max-height: calc(var(--rs-vh, 1vh) * 96); overflow-y: auto; }
    .app-content { padding-top: 10px; }
}

/* ── 9. touch devices: comfortable targets, no hover-only affordances ── */
@media (hover: none) and (pointer: coarse) {
    .sidebar-item, .sidebar-subitem, .dropdown-item { min-height: var(--rs-touch); }
    .icon-btn, .navbar-toggle, .row-act, .dt-btn-icon { min-width: 38px; min-height: 38px; }
    .stat-card:hover, .row-act:hover, .db-btn:hover { transform: none; }
    input[type="checkbox"], input[type="radio"] { min-width: 18px; min-height: 18px; }
}

/* ── 10. notches / home indicator ──────────────────────────────── */
@supports (padding: env(safe-area-inset-bottom)) {
    .app-content { padding-bottom: calc(var(--rs-gutter) + env(safe-area-inset-bottom)); }
    .app-navbar { padding-left: max(10px, env(safe-area-inset-left)); padding-right: max(10px, env(safe-area-inset-right)); }
}

/* ── 11. reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .sidebar, .sidebar-overlay { transition: none !important; }
    .modal-overlay > *, .rs-overlay > *, [style*="position:fixed"][style*="inset:0"] > div { animation: none !important; }
}

/* ── 12. print ─────────────────────────────────────────────────── */
@media print {
    .sidebar, .sidebar-overlay, .app-navbar, .page-actions, .net-bar, .wh-toast-container { display: none !important; }
    .main-wrapper { margin: 0 !important; }
    .app-content { padding: 0; max-width: none; }
}