/* =============================================
   ADNOC DBC Admin Portal
   Responsive Stylesheet — Zoom-Based Scaling
   ============================================= */

/* ── Desktop Large (1400px+) ── */
@media (min-width:1400px) {
    .page { padding:var(--sp-8) var(--sp-10); }
}

/* ── 1600px ── */
@media (max-width:1600px) {
    :root { --sidebar-w: 210px; }
    body.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
    .header, .page { zoom: 0.92; }
}

/* ── 1440px ── */
@media (max-width:1440px) {
    :root { --sidebar-w: 185px; }
    body.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
    .header, .page { zoom: 0.86; }
}

/* ── 1366px ── */
@media (max-width:1366px) {
    :root { --sidebar-w: 195px; }
    body.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
    .header, .page { zoom: 0.82; }
}

/* ── 1200px ── */
@media (max-width:1200px) {
    :root { --sidebar-w: 185px; }
    body.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
    .header, .page { zoom: 0.76; }
    .kpi-grid { grid-template-columns:repeat(2,1fr); }
    .grid.cols-3 { grid-template-columns:1fr 1fr; }
    .form-grid-3 { grid-template-columns:1fr 1fr; }
    .detail-hero-body { flex-direction:column; align-items:stretch; }
    .detail-hero-actions { justify-content:flex-start; }
}

/* ── 1024px ── */
@media (max-width:1024px) {
    :root { --sidebar-w: 175px; }
    body.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
    .header, .page { zoom: 0.7; }
    .grid.cols-2 { grid-template-columns:1fr; }
    .grid.cols-2-equal { grid-template-columns:1fr; }
    .form-grid { grid-template-columns:1fr; }
    .donut-wrap { flex-direction:column; align-items:flex-start; }
    .stepper { flex-wrap:wrap; gap:var(--sp-2); }
    .id-top-right { flex-wrap:wrap; }
    .id-top-right .btn { font-size:var(--text-xs); padding:6px 10px; }
    .company-card-grid { grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); }
    .module-header-left { flex:1 1 100%; }
    .module-header-right { flex:1 1 100%; justify-content:flex-start; }
}

/* ═══════════════════════════════════════════════
   MOBILE (max 768px)
   ═══════════════════════════════════════════════ */
@media (max-width:768px) {
    /* ─── ZOOM RESET ─── */
    .header, .page { zoom: 1; }

    /* ─── ROOT OVERRIDES ─── */
    :root {
        --sidebar-w: 0px;
        --header-h: 54px;
    }

    /* ─── SIDEBAR DRAWER ─── */
    .sidebar {
        width:280px;
        transform:translateX(-100%);
        transition:transform var(--dur) var(--ease);
        z-index:1100;
    }
    .sidebar.open { transform:translateX(0); }
    .sidebar-overlay { z-index:1050; }

    /* Neutralize collapsed state on mobile */
    body.sidebar-collapsed .main { margin-left:0; }
    body.sidebar-collapsed .header { border-top-left-radius:0; }
    body.sidebar-collapsed .sidebar { width:280px; }
    body.sidebar-collapsed .sidebar-logo-text { display:block; }
    body.sidebar-collapsed .sidebar-section-label {
        opacity:1; height:auto;
        padding:var(--sp-4) var(--sp-4) var(--sp-2);
        width:auto; border-bottom:none; margin:0;
    }
    body.sidebar-collapsed .sidebar-nav { padding:0 var(--sp-3); align-items:stretch; }
    body.sidebar-collapsed .nav-link {
        width:100%; height:auto;
        padding:10px 12px;
        justify-content:flex-start;
    }
    body.sidebar-collapsed .nav-text { display:inline; }
    body.sidebar-collapsed .nav-badge {
        position:static; padding:2px 8px;
        font-size:10px; min-width:auto;
    }
    body.sidebar-collapsed .sidebar-bottom { padding:var(--sp-3) var(--sp-3) 0; }
    body.sidebar-collapsed .sidebar-user {
        justify-content:flex-start; padding:var(--sp-2);
    }
    body.sidebar-collapsed .sidebar-user-info { display:block; }
    body.sidebar-collapsed .sidebar-logo { gap:var(--sp-3); }

    /* ─── MAIN & HEADER ─── */
    .main { margin-left:0 !important; }
    .header { border-top-left-radius:0 !important; }
    .mobile-menu-btn { display:flex; }
    .sidebar-toggle-btn { display:none !important; }
    .header { padding:0 var(--sp-3); }
    .greeting-sub { display:none; }
    .greeting-text { font-size:var(--text-sm); }
    .notif-panel { width:calc(100vw - 32px); right:-60px; }
    .user-panel { right:0; min-width:200px; }
    .org-panel { right:-20px; min-width:180px; }
    .header-org span#orgLabel { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .header-icon-btn { width:34px; height:34px; font-size:14px; }
    .header-avatar { width:30px; height:30px; font-size:10px; }

    /* ─── PAGE LAYOUT ─── */
    .page { padding:var(--sp-4); padding-bottom:84px; }
    .page-title { font-size:var(--text-xl); }
    .page-subtitle { font-size:var(--text-xs); }
    .page-header { flex-direction:column; gap:var(--sp-3); align-items:stretch; }
    .page-header-actions { width:100%; display:flex; gap:var(--sp-2); }
    .page-header-actions .btn { flex:1; font-size:var(--text-xs); padding:8px 10px; justify-content:center; }

    /* ─── CARD STRIPPING FOR TABLE WRAPPERS ─── */
    .card:has(.data-table):not(#filterCard),
    .card:has(.table-wrap):not(#filterCard) {
        border:none;
        box-shadow:none;
        border-radius:0;
        background:transparent;
        overflow:visible;
    }
    .card:has(.data-table):not(#filterCard) > .card-body,
    .card:has(.table-wrap):not(#filterCard) > .card-body {
        padding:0;
    }
    .card:has(.data-table):not(#filterCard):hover,
    .card:has(.table-wrap):not(#filterCard):hover {
        box-shadow:none;
    }
    .card:has(.data-table) > .card-footer {
        padding:var(--sp-3) 0;
        border-top:none;
    }

    /* Filter Card Special Styling */
    #filterCard {
        border-radius:12px;
        border:1px solid var(--n-200);
        background:var(--n-50, #f5f6f8);
        box-shadow:none;
        margin-bottom:var(--sp-3);
    }
    #filterCard > .card-body { padding:var(--sp-3); }

    /* ─── TABS (horizontal scroll) ─── */
    .tabs {
        overflow-x:auto; overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;
        gap:0; flex-wrap:nowrap;
        margin:0 calc(-1 * var(--sp-4));
        padding:0 var(--sp-4);
        border-bottom:2px solid var(--n-100);
        margin-bottom:var(--sp-4);
    }
    .tabs::-webkit-scrollbar { display:none; }
    .tab-item {
        flex-shrink:0; white-space:nowrap;
        font-size:var(--text-sm);
        padding:12px 16px;
    }

    /* ─── KPI CARDS ─── */
    .kpi-grid { grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
    .kpi-card { padding:var(--sp-3) var(--sp-4); }
    .kpi-card-value { font-size:var(--text-2xl); }
    .kpi-card-icon { width:40px; height:40px; font-size:16px; }

    /* ─── CARDS ─── */
    .card-header { padding:var(--sp-3) var(--sp-4) 0; flex-wrap:wrap; gap:var(--sp-2); }
    .card-body { padding:var(--sp-4); }
    .card-footer { padding:var(--sp-3) var(--sp-4); flex-direction:column; gap:var(--sp-3); }
    .card-title { font-size:var(--text-base); }

    /* ─── FILTER BARS ─── */
    .emp-filter-bar,
    .incidents-filter-bar,
    .def-filter-bar {
        flex-direction:column;
        gap:var(--sp-3);
    }
    .filter-search-wrap,
    .def-filter-bar .filter-search-wrap,
    .emp-filter-bar .filter-search-wrap,
    .incidents-filter-bar .filter-search-wrap {
        width:100%;
        flex:0 0 auto !important;
        min-width:0 !important;
    }
    .def-filter-bar .filter-selects,
    .emp-filter-bar .filter-selects,
    .incidents-filter-bar .filter-selects {
        flex:0 0 auto !important;
    }
    .filter-search-wrap .form-input {
        font-size:var(--text-sm);
        padding:10px 10px 10px 36px;
    }
    .filter-selects {
        width:100%;
        display:grid !important;
        grid-template-columns:1fr 1fr;
        gap:var(--sp-2);
    }
    .filter-selects .filter-select,
    .filter-selects .select-wrap { min-width:0; }
    .filter-selects .form-select {
        font-size:var(--text-xs);
        padding:8px 28px 8px 10px;
        background-color:#ffffff;
    }
    .filter-selects .btn { font-size:var(--text-xs); }
    .active-filters { flex-wrap:wrap; }
    .advanced-filters-grid { grid-template-columns:1fr 1fr; }

    /* Old table filter bar */
    .table-filter-bar { flex-direction:column; align-items:stretch; padding:var(--sp-3); }
    .table-filter-left { flex-direction:column; }
    .table-filter-right { justify-content:stretch; }
    .table-filter-right .btn { flex:1; font-size:var(--text-sm); padding:8px 12px; }
    .table-search { max-width:100%; min-width:0; }
    .table-quick-filters { flex-wrap:wrap; }
    .filter-select .form-select { min-width:90px; font-size:var(--text-xs); height:36px; }
    .advance-filter-grid { grid-template-columns:1fr 1fr; }
    .active-filter-tags { padding:var(--sp-2) var(--sp-3); flex-wrap:wrap; }

    /* ─── DATA-TABLE (mobile card view) ─── */
    .data-table { font-size:var(--text-sm); }
    .data-table thead { display:none; }
    .data-table tbody tr {
        display:block;
        background:var(--n-0);
        border:1px solid var(--n-200);
        border-radius:12px;
        margin:0 0 var(--sp-3);
        padding:var(--sp-4);
        box-shadow:0 1px 4px rgba(0,0,0,0.04);
    }
    .data-table tbody tr:last-child { margin-bottom:0; }
    .data-table td {
        display:flex;
        align-items:flex-start;
        padding:6px 0;
        border-bottom:1px solid var(--n-50);
    }
    .data-table td:last-child { border-bottom:none; }
    .data-table td::before {
        content:attr(data-label);
        font-weight:600;
        color:var(--n-400);
        font-size:10px;
        text-transform:uppercase;
        letter-spacing:0.05em;
        min-width:110px;
        flex-shrink:0;
        padding-top:2px;
        line-height:1.6;
    }
    .data-table td:not([data-label])::before,
    .data-table td[data-label=""]::before { display:none; }
    .data-table td:first-child:has(.checkbox) { display:none; }
    .data-table td:last-child {
        padding-top:var(--sp-3);
        margin-top:var(--sp-2);
        border-top:1px solid var(--n-100);
        border-bottom:none;
        justify-content:flex-end;
        gap:var(--sp-2);
    }
    .data-table td:last-child::before { display:none; }
    .table-actions { justify-content:flex-end; }

    /* Old .table card view */
    .table-wrap { margin:0; border:none; overflow:visible; }
    .table, .table thead, .table tbody, .table tr, .table th, .table td {
        display:block; width:100%;
    }
    .table thead { display:none; }
    .table tbody tr {
        background:var(--n-0);
        border:1px solid var(--n-200);
        border-radius:12px;
        margin-bottom:var(--sp-3);
        padding:var(--sp-4);
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:var(--sp-2) var(--sp-4);
        box-shadow:0 1px 4px rgba(0,0,0,0.04);
    }
    .table td {
        padding:var(--sp-1) 0;
        border-bottom:none;
        font-size:var(--text-sm);
        display:flex;
        flex-direction:column;
        gap:2px;
    }
    .table td::before {
        content:attr(data-label);
        font-size:10px;
        font-weight:600;
        color:var(--n-400);
        text-transform:uppercase;
        letter-spacing:0.05em;
    }
    .table td:not([data-label])::before,
    .table td[data-label=""]::before { display:none; }
    .table tbody tr td:first-child {
        grid-column:1 / -1;
        padding-bottom:var(--sp-2);
        border-bottom:1px solid var(--n-100);
    }
    .table tbody tr td:last-child {
        grid-column:1 / -1;
        padding-top:var(--sp-2);
        border-top:1px solid var(--n-100);
        flex-direction:row;
        justify-content:flex-end;
    }

    /* ─── MODAL (bottom sheet) ─── */
    .modal-overlay { padding:0; align-items:flex-end; }
    .modal {
        max-height:92vh;
        max-width:100% !important;
        width:100% !important;
        border-radius:16px 16px 0 0;
        margin:0;
    }
    .modal-header { padding:var(--sp-4); }
    .modal-body { padding:var(--sp-4); }
    .modal-footer { padding:var(--sp-3) var(--sp-4); flex-wrap:wrap; gap:var(--sp-2); }
    .modal-footer .btn { flex:1; min-width:100px; justify-content:center; }
    .modal-title { font-size:var(--text-base); }

    /* ─── GRIDS ─── */
    .grid.cols-2, .grid.cols-2-equal { grid-template-columns:1fr; }
    .grid.cols-3 { grid-template-columns:1fr; }
    .grid.cols-4 { grid-template-columns:1fr 1fr; }

    /* ─── FORMS ─── */
    .form-grid-3, .modal-form-grid { grid-template-columns:1fr; }

    /* ─── PAGINATION ─── */
    .pagination { flex-wrap:wrap; justify-content:center; gap:var(--sp-1); }
    .pagination-btn, .page-btn { width:32px; height:32px; font-size:var(--text-xs); }
    .pagination-info { font-size:var(--text-xs); text-align:center; }

    /* ─── BULK ACTIONS ─── */
    .bulk-actions-bar { flex-wrap:wrap; padding:var(--sp-3); gap:var(--sp-2); }

    /* ─── NOTIFICATIONS ─── */
    .nc-item { padding:var(--sp-3) var(--sp-4); gap:var(--sp-3); flex-wrap:wrap; }
    .nc-icon { width:36px; height:36px; font-size:15px; }
    .nc-meta { flex-direction:row; width:100%; justify-content:space-between; }
    .nc-actions { opacity:1; }

    /* ─── SETTINGS ─── */
    .settings-row { flex-direction:column; gap:var(--sp-2); padding:var(--sp-3) var(--sp-4); }

    /* ─── STEPPER ─── */
    .stepper { flex-direction:column; gap:0; }
    .step { flex-direction:row; gap:var(--sp-3); align-items:center; }
    .step-line { display:none; }
    .step-label { margin-top:0; text-align:left; }

    /* ─── TOAST ─── */
    .toast-container { top:var(--sp-4); right:var(--sp-4); left:var(--sp-4); }
    .toast { min-width:auto; max-width:100%; }

    /* ─── LOGIN ─── */
    .login-wrap { padding:var(--sp-4); }
    .login-card { padding:var(--sp-6) var(--sp-5) var(--sp-5); }

    /* ─── BREADCRUMB ─── */
    .breadcrumb { font-size:var(--text-xs); flex-wrap:wrap; }

    /* ─── CHARTS ─── */
    .donut-wrap { flex-direction:column; align-items:center; }
    .donut-chart { width:140px; height:140px; }

    /* ─── MISC ─── */
    .ms-select-trigger { min-height:40px; }
    .policy-kpi-grid { grid-template-columns:1fr 1fr; }
    .col-customizer-bar { padding:6px var(--sp-3); }

    /* ─── MOBILE BOTTOM NAV ─── */
    .mobile-bottom-nav {
        display:flex;
        position:fixed; bottom:0; left:0; right:0;
        height:64px; background:#ffffff;
        border-top:1px solid var(--n-200);
        z-index:1000; align-items:center; justify-content:space-around;
        padding:0 var(--sp-2);
        box-shadow:0 -2px 10px rgba(0,0,0,0.06);
    }
    .mobile-bottom-nav-item {
        display:flex; flex-direction:column; align-items:center;
        gap:3px; padding:6px 10px; border-radius:8px;
        color:var(--n-400); font-size:18px;
        text-decoration:none;
    }
    .mobile-bottom-nav-item span { font-size:10px; font-weight:500; }
    .mobile-bottom-nav-item.active { color:var(--brand-600); }

    /* ─── INCIDENT DETAIL ─── */
    .id-top-row { flex-direction:column; align-items:flex-start; gap:var(--sp-3); }
    .id-top-left { flex-wrap:wrap; gap:var(--sp-2); width:100%; }
    .id-tracking { font-size:var(--text-base); }
    .id-top-right { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2); }
    .id-top-right .btn { font-size:var(--text-sm); padding:10px 14px; justify-content:center; border-radius:10px; }
    .id-title { font-size:var(--text-lg); line-height:1.4; }
    .id-meta { font-size:var(--text-xs); }
    .id-timeline-card .card-body { padding:var(--sp-3) var(--sp-4); overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .id-workflow-timeline { min-width:max-content; }
    .wf-num { width:30px; height:30px; font-size:12px; }
    .wf-label { font-size:10px; }
    .wf-status { font-size:10px; }
    .wf-arrow { font-size:10px; }
    .detail-grid { gap:var(--sp-1); }
    .detail-row { flex-direction:column; gap:2px; padding:var(--sp-2) 0; }
    .evidence-card { flex-direction:column; }
    .evidence-preview { height:120px !important; }

    /* ─── PREVENT HORIZONTAL SCROLL ─── */
    html, body, .main, .page { overflow-x:hidden; }

    /* ─── DROPDOWNS ─── */
    .dropdown-menu { min-width:180px; }
    .table-action-dropdown-menu { min-width:150px; }

    /* ─── DBC-SPECIFIC MOBILE ─── */
    .portal-tabs {
        margin:0 calc(-1 * var(--sp-4)) var(--sp-4);
        padding:0 var(--sp-4);
        border-radius:0;
    }
    .portal-tab { padding:var(--sp-3) var(--sp-3); font-size:var(--text-xs); }
    .company-card-grid { grid-template-columns:1fr; }
    .module-header { flex-direction:column; align-items:stretch; gap:var(--sp-2); }
    .module-search { max-width:100%; }
    .active-filter-tags { overflow-x:auto; flex-wrap:nowrap; padding-bottom:var(--sp-1); }
    .active-filter-tags::-webkit-scrollbar { display:none; }
    .sticky-save-bar { flex-direction:column; gap:var(--sp-2); align-items:stretch; }
    .sticky-save-bar-actions .btn { flex:1; }
    .dbc-card-body { padding:var(--sp-8) var(--sp-3) var(--sp-3); }
    .wallet-card { min-height:128px; padding:var(--sp-3); }
    .detail-hero-banner { height:100px; }
    .detail-hero-logo { width:56px; height:56px; bottom:-20px; }
    .detail-hero-body { padding:var(--sp-6) var(--sp-4) var(--sp-4); }
    .detail-hero-title { font-size:var(--text-xl); }
    .preview-avatar { width:68px; height:68px; font-size:var(--text-xl); }
    .preview-banner { height:110px; }
    .preview-name { font-size:var(--text-xl); }
    .widget-card { min-height:220px; }
    .country-bar-row .country-code { width:34px; }
    .country-bar-row .country-value { width:56px; }
    .portal-footer { flex-direction:column; gap:var(--sp-2); text-align:center; }
}

/* ═══════════════════════════════════════════════
   SMALL MOBILE (max 480px)
   ═══════════════════════════════════════════════ */
@media (max-width:480px) {
    .page { padding:var(--sp-3); padding-bottom:80px; }
    .page-title { font-size:var(--text-lg); }
    .kpi-grid { grid-template-columns:1fr 1fr; gap:var(--sp-2); }
    .kpi-card { padding:var(--sp-3); }
    .kpi-card-value { font-size:var(--text-xl); }
    .kpi-card-icon { width:34px; height:34px; font-size:14px; }
    .header { padding:0 var(--sp-3); }
    .header-icon-btn { width:32px; height:32px; font-size:13px; }
    .header-avatar { width:28px; height:28px; font-size:10px; }
    .greeting-text { font-size:var(--text-xs); }
    .card-header { padding:var(--sp-3) var(--sp-3) 0; }
    .card-body { padding:var(--sp-3); }
    .filter-selects { grid-template-columns:1fr !important; }
    .advanced-filters-grid { grid-template-columns:1fr; }
    .tab-item { font-size:var(--text-xs); padding:10px 14px; }
    .btn-md { font-size:var(--text-xs); padding:7px 12px; }
    .btn-sm { font-size:11px; padding:5px 10px; }
    .data-table tbody tr { padding:var(--sp-3); }
    .data-table td::before { min-width:90px; font-size:9px; }
    .id-top-right { grid-template-columns:1fr; }
    .id-title { font-size:var(--text-base); }
    .wf-num { width:26px; height:26px; font-size:10px; }
    .wf-label, .wf-status { font-size:9px; }
    .table tbody tr { grid-template-columns:1fr; }
    .login-card { padding:var(--sp-5) var(--sp-4) var(--sp-4); }
    .login-logo-text { font-size:16px; }
    .portal-tab { padding:var(--sp-2) var(--sp-3); }
    .dbc-card-banner { height:72px; }
    .dbc-card-avatar { width:52px; height:52px; bottom:-22px; font-size:var(--text-base); }
    .assignment-card { padding:var(--sp-2); }
    .color-swatch { width:24px; height:24px; }
}

/* ═══════════════════════════════════════════════
   TINY SCREEN (max 360px)
   ═══════════════════════════════════════════════ */
@media (max-width:360px) {
    .kpi-grid { grid-template-columns:1fr; }
    .header-org { display:none; }
    .grid.cols-4 { grid-template-columns:1fr; }
    .page-header-actions { flex-direction:column; }
    .page-header-actions .btn { width:100%; }
}

/* ═══════════════════════════════════════════════
   VISIBILITY HELPERS
   ═══════════════════════════════════════════════ */
.mobile-bottom-nav { display:none; }

@media (min-width:769px) {
    .mobile-only { display:none !important; }
}
@media (max-width:768px) {
    .desktop-only { display:none !important; }
}

/* ═══════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════ */
@media print {
    .sidebar, .mobile-bottom-nav, .header, .toast-container { display:none !important; }
    .main { margin-left:0 !important; border-radius:0 !important; }
    .header, .page { zoom:1 !important; }
    .page { padding:0; }
    .card { box-shadow:none; border:1px solid var(--n-200); break-inside:avoid; }
}