/* =============================================
   ADNOC Incident Management — Admin Portal
   Responsive Stylesheet (Comprehensive Mobile-First)
   ============================================= */

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

/* ── Tablet (max 1200px) ── */
@media (max-width:1200px) {
    .kpi-grid { grid-template-columns:repeat(2,1fr); }
    .grid.cols-3 { grid-template-columns:1fr; }
    .form-grid-3 { grid-template-columns:1fr 1fr; }
}

/* ── Tablet / Small (max 1024px) ── */
@media (max-width:1024px) {
    .grid.cols-2 { 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); }

    /* Incident detail header buttons stack */
    .id-top-right { flex-wrap:wrap; }
    .id-top-right .btn { font-size:var(--text-xs); padding:6px 10px; }
}

/* ── Mobile Breakpoint (max 768px) ── */
@media (max-width:768px) {
    :root {
        --sidebar-w: 0px;
        --header-h: 58px;
    }

    /* ─── CORE LAYOUT ─── */
    .sidebar {
        width:280px;
        transform:translateX(-100%);
        transition:transform var(--dur) var(--ease);
    }
    .sidebar.open { transform:translateX(0); }

    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:11px; 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 { margin-left:0 !important; }
    .header { border-top-left-radius:0 !important; }
    .mobile-menu-btn { display:flex; }
    .sidebar-toggle-btn { display:none !important; }

    /* ─── HEADER ─── */
    .header { padding:0 var(--sp-4); }
    .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:220px; }
    .org-panel { right:-20px; min-width:200px; }
    .header-org span#orgLabel { max-width:80px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

    /* ─── 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-left { text-align:left; }
    .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; }

    /* ─── TABS (horizontal scroll, big touch targets) ─── */
    .tabs-wrapper { margin-top:var(--sp-3); }
    .tabs {
        overflow-x:auto; overflow-y:hidden;
        -webkit-overflow-scrolling:touch;
        scroll-snap-type:x mandatory;
        scrollbar-width:none;
        gap:0; flex-wrap:nowrap;
        margin-left:calc(-1 * var(--sp-4));
        margin-right: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;
        scroll-snap-align:start;
        font-size:var(--text-sm);
        padding:12px 16px;
        gap:6px;
    }
    .tab-item i { font-size:13px; }
    .tab-item .badge { font-size:10px !important; padding:0 6px !important; }
    .tab-content { padding:0; }

    /* ─── KPI CARDS ─── */
    .kpi-grid { grid-template-columns:repeat(2,1fr); gap:var(--sp-3); }
    .kpi-card { padding: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); align-items:center; }
    .card-title { font-size:var(--text-base); }

    /* ─── FILTER BARS (all types) ─── */
    .emp-filter-bar,
    .incidents-filter-bar,
    .def-filter-bar {
        flex-direction:column;
        gap:var(--sp-3);
    }
    .filter-search-wrap { width:100%; }
    .filter-selects {
        width:100%;
        flex-wrap:wrap;
        gap:var(--sp-2);
    }
    .filter-selects .filter-select,
    .filter-selects .select-wrap {
        flex:1 1 calc(50% - var(--sp-1));
        min-width:0;
    }
    .filter-selects .filter-select .form-select {
        font-size:var(--text-xs);
        height:38px;
    }
    .filter-selects .btn { flex-shrink:0; }
    .active-filters { flex-wrap:wrap; gap:var(--sp-2); }
    .filter-tag { font-size:var(--text-xs); }

    /* 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; }

    /* Advanced filters */
    .advanced-filters-grid { grid-template-columns:1fr 1fr; }

    /* ─── DATA-TABLE (card view on mobile) ─── */
    .data-table { font-size:var(--text-xs); }
    .data-table thead { display:none; }
    .data-table tbody tr {
        display:flex;
        flex-direction:column;
        border-bottom:1px solid var(--n-100);
        padding:var(--sp-3) var(--sp-4);
    }
    .data-table tbody tr:last-child { border-bottom:none; }
    .data-table td {
        display:flex;
        justify-content:space-between;
        align-items:center;
        padding:4px 0;
        border-bottom:none;
    }
    .data-table td::before {
        content:attr(data-label);
        font-weight:600;
        color:var(--n-400);
        font-size:var(--text-xs);
        text-transform:uppercase;
        letter-spacing:0.03em;
        flex-shrink:0;
        margin-right:var(--sp-3);
    }
    .data-table td:not([data-label])::before,
    .data-table td[data-label=""]::before { display:none; }

    /* Hide checkbox column on mobile */
    .data-table td:first-child:has(.checkbox) { display:none; }

    /* Actions cell full width */
    .data-table td:last-child {
        padding-top:var(--sp-2);
        margin-top:var(--sp-2);
        border-top:1px solid var(--n-50);
        justify-content:flex-end;
    }
    .data-table td:last-child::before { display:none; }

    .table-actions { justify-content:flex-end; }

    /* Old table card view */
    .table-wrap { margin:0; border:none; border-radius:0; 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:var(--r-lg);
        margin-bottom:var(--sp-3);
        padding:var(--sp-3) var(--sp-4);
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:var(--sp-2) var(--sp-4);
        align-items:center;
        box-shadow:var(--sh-xs);
    }
    .table tbody tr:hover { background:var(--n-25); }
    .table tbody tr:last-child { margin-bottom:0; }
    .table tbody tr:last-child td { border-bottom:none; }
    .table td {
        padding:var(--sp-1) 0;
        border-bottom:none;
        font-size:var(--text-sm);
        display:flex;
        flex-direction:column;
        gap:2px;
        min-width:0;
        word-break:break-word;
    }
    .table td::before {
        content:attr(data-label);
        font-size:var(--text-xs);
        font-weight:600;
        color:var(--n-400);
        text-transform:uppercase;
        letter-spacing:0.04em;
    }
    .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);
        margin-bottom:var(--sp-1);
    }
    .table tbody tr td:last-child {
        grid-column:1 / -1;
        padding-top:var(--sp-2);
        border-top:1px solid var(--n-100);
        margin-top:var(--sp-1);
        flex-direction:row;
        justify-content:space-between;
        align-items:center;
    }
    .table td .d-flex { justify-content:flex-end; }
    .table-user { gap:var(--sp-2); }

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

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

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

    /* ─── MODALS ─── */
    .modal-overlay { padding:var(--sp-3); align-items:flex-end; }
    .modal { max-height:90vh; max-width:100% !important; border-radius:var(--r-xl) var(--r-xl) 0 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-equal { grid-template-columns:1fr; }
    .grid.cols-4 { grid-template-columns:1fr 1fr; }

    /* ─── INCIDENT DETAIL ─── */
    .id-header-card .card-body { padding:var(--sp-4); }
    .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:flex; flex-direction:column; gap:var(--sp-2); }
    .id-top-right .btn { font-size:var(--text-sm); padding:10px 14px; justify-content:center; width:100%; border-radius:var(--r-lg); }
    .id-title { font-size:var(--text-lg); line-height:1.4; word-break:break-word; margin-top:var(--sp-2); }
    .id-title .btn-icon-inline { vertical-align:middle; }
    .id-meta { font-size:var(--text-xs); line-height:1.7; color:var(--n-500); word-break:break-word; }

    /* Workflow Timeline — horizontal scroll with labels */
    .id-timeline-card .card-body { padding:var(--sp-3) var(--sp-4); overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .id-workflow-timeline { overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:var(--sp-2); min-width:max-content; }
    .wf-step { flex-shrink:0; }
    .wf-num { width:30px; height:30px; font-size:12px; }
    .wf-info { display:flex; }
    .wf-label { font-size:10px; }
    .wf-status { font-size:10px; }
    .wf-arrow { font-size:10px; margin:0 var(--sp-2); }

    /* Evidence grid */
    .evidence-card { flex-direction:column; }
    .evidence-preview { height:120px !important; }
    .btn-icon-inline { width:24px; height:24px; font-size:12px; }

    /* Detail grid */
    .detail-grid { gap:var(--sp-1); }
    .detail-row { flex-direction:column; gap:2px; padding:var(--sp-2) 0; }
    .detail-label { font-size:var(--text-xs); color:var(--n-400); }
    .detail-value { font-size:var(--text-sm); word-break:break-word; }

    /* Grid cols-2 inside incident detail */
    .grid.cols-2 { grid-template-columns:1fr; gap:var(--sp-3); }

    /* ─── BREADCRUMB ─── */
    .breadcrumb { font-size:var(--text-xs); gap:var(--sp-1); flex-wrap:wrap; }
    .breadcrumb-item { font-size:var(--text-xs); }
    .breadcrumb-sep { font-size:8px; }

    /* ─── STATUS / SEVERITY BADGES ─── */
    .status { font-size:var(--text-xs); padding:3px 10px; }
    .sev { font-size:var(--text-xs); padding:3px 10px; }

    /* ─── NOTIFICATION CENTER ─── */
    .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-body { min-width:0; flex-basis:calc(100% - 52px); }
    .nc-title { font-size:var(--text-xs); }
    .nc-desc { font-size:var(--text-xs); }
    .nc-meta { flex-direction:row; align-items:center; width:100%; justify-content:space-between; min-width:auto; }
    .nc-actions { opacity:1; }

    /* ─── SETTINGS PAGE ─── */
    .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; padding-bottom:var(--sp-4); }
    .step-line { display:none; }
    .step-label { margin-top:0; text-align:left; }

    /* ─── MULTI-SELECT ─── */
    .ms-select-trigger { min-height:40px; font-size:var(--text-sm); }
    .ms-select-tag { font-size:11px; padding:1px 6px; }

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

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

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

    /* ─── COMPONENT LIBRARY ─── */
    .comp-row { gap:var(--sp-2); flex-wrap:wrap; }
    .comp-row.gap-lg { gap:var(--sp-2); }
    .comp-section-title { font-size:var(--text-lg); }

    /* ─── LOGIN PAGE ─── */
    .login-wrap { padding:var(--sp-4); }
    .login-card { padding:var(--sp-6) var(--sp-5) var(--sp-5); }
    .login-logo-text { font-size:18px; }

    /* ─── MOBILE BOTTOM NAV ─── */
    .mobile-bottom-nav {
        display:flex;
        position:fixed; bottom:0; left:0; right:0;
        height:64px; background:var(--n-0);
        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;
        justify-content:center; gap:3px;
        padding:6px 10px; border-radius:var(--r-md);
        color:var(--n-400); font-size:18px;
        transition:all var(--dur-fast); cursor:pointer;
        text-decoration:none;
    }
    .mobile-bottom-nav-item span { font-size:10px; font-weight:500; }
    .mobile-bottom-nav-item.active { color:var(--brand-600); }
    .mobile-bottom-nav-item:active { background:var(--n-50); }

    /* ─── SECURITY / LOGS TABLES ─── */
    .data-table td .badge { font-size:10px; }
    .data-table td .status { font-size:var(--text-xs); }

    /* ─── POLICIES ─── */
    .policy-kpi-grid { grid-template-columns:1fr 1fr; }

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

/* ── Small Mobile (max 480px) ── */
@media (max-width:480px) {
    .page-title { font-size:var(--text-lg); }
    .page-subtitle { font-size:11px; }

    /* KPI */
    .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-label { font-size:11px; }
    .kpi-card-icon { width:34px; height:34px; font-size:14px; }
    .kpi-card-trend { font-size:10px; }

    /* Header */
    .header { padding:0 var(--sp-3); gap:var(--sp-2); }
    .header-icon-btn { width:34px; height:34px; font-size:15px; }
    .header-avatar { width:30px; height:30px; font-size:11px; }
    .notif-panel { right:-100px; }
    .greeting-text { font-size:var(--text-xs); }

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

    /* Page */
    .page { padding:var(--sp-3); padding-bottom:80px; }
    .page-header-actions .btn { font-size:11px; padding:6px 8px; }
    .page-header-actions .btn i { font-size:11px; }

    /* Filter */
    .filter-selects .filter-select,
    .filter-selects .select-wrap { flex:1 1 100%; }
    .advance-filter-grid { grid-template-columns:1fr; }
    .advanced-filters-grid { grid-template-columns:1fr; }

    /* Forms */
    .form-input, .form-select, .form-textarea { font-size:var(--text-sm); }
    .form-textarea { min-height:90px; }
    .form-label { font-size:var(--text-xs); }

    /* Tabs */
    .tab-item { font-size:var(--text-xs); padding:10px 14px; }
    .tab-item i { font-size:12px; }

    /* Buttons */
    .btn-xl { padding:11px 20px; font-size:var(--text-base); }
    .btn-md { font-size:var(--text-xs); padding:7px 12px; }
    .btn-sm { font-size:11px; padding:5px 10px; }

    /* Old table */
    .table tbody tr { grid-template-columns:1fr; }
    .table tbody tr td:first-child { border-bottom:1px solid var(--n-100); }
    .table tbody tr td:last-child { border-top:1px solid var(--n-100); }

    /* Incident detail */
    .id-top-right .btn { font-size:var(--text-xs); padding:9px 12px; }
    .id-title { font-size:var(--text-base); }
    .id-tracking { font-size:var(--text-sm); }
    .wf-num { width:26px; height:26px; font-size:10px; }
    .wf-label { font-size:9px; }
    .wf-status { font-size:9px; }

    /* Notification center */
    .nc-item { padding:var(--sp-3); }
    .nc-icon { width:32px; height:32px; font-size:13px; }

    /* Alerts */
    .alert { padding:var(--sp-3) var(--sp-4); }
    .alert-text { font-size:var(--text-xs); }

    /* Timeline */
    .timeline { padding-left:24px; }
    .timeline-dot { left:-24px; width:18px; height:18px; }
    .timeline-dot i { font-size:7px; }

    /* Charts */
    .donut-chart { width:110px; height:110px; }
    .donut-center-val { font-size:var(--text-xl); }
    .legend-row { min-width:auto; }

    /* Component lib */
    .comp-section-title { font-size:var(--text-md); gap:var(--sp-2); }

    /* Login */
    .login-card { padding:var(--sp-5) var(--sp-4) var(--sp-4); }
    .login-logo-text { font-size:16px; }
    .login-logo img { width:36px; height:36px; }
}

/* ── 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%; }
    .id-top-right { grid-template-columns:1fr; }
}

/* ── Visibility ── */
.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; }
    .page { padding:0; }
    .card { box-shadow:none; border:1px solid var(--n-200); break-inside:avoid; }
}