/* =============================================
   ADNOC Incident Management — Admin Portal
   Professional SaaS Design System
   ============================================= */

/* ── Font Face (with vertical metric overrides) ── */
@font-face {
    font-family: 'ADNOC Sans';
    src: url('../fonts/ADNOCSans-Light.woff2') format('woff2'),
         url('../fonts/ADNOCSans-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'ADNOC Sans';
    src: url('../fonts/ADNOCSans-Regular.woff2') format('woff2'),
         url('../fonts/ADNOCSans-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'ADNOC Sans';
    src: url('../fonts/ADNOCSans-Medium.woff2') format('woff2'),
         url('../fonts/ADNOCSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'ADNOC Sans';
    src: url('../fonts/ADNOCSans-Bold.woff2') format('woff2'),
         url('../fonts/ADNOCSans-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
}

/* ── Design Tokens ── */
:root {
    --font: 'ADNOC Sans', system-ui, -apple-system, sans-serif;
    /* Font vertical offset — ADNOC Sans sits slightly high, nudge down */
    --font-vfix: 0.06em;

    /* Brand */
    --brand-50:  #EEF4FF;
    --brand-100: #DBEAFE;
    --brand-200: #BFDBFE;
    --brand-300: #93C5FD;
    --brand-400: #60A5FA;
    --brand-500: #3B82F6;
    --brand-600: #2563EB;
    --brand-700: #1D4ED8;
    --brand-800: #1E40AF;
    --brand-900: #1E3A8A;

    /* ADNOC Blue (sidebar / primary brand) */
    --adnoc-500: #1E5BB8;
    --adnoc-600: #1A53A4;
    --adnoc-700: #174A94;
    --adnoc-800: #143F82;

    /* Sidebar — collapsible */
    --sidebar-w: 250px;
    --sidebar-w-collapsed: 78px;
    --sidebar-bg: var(--adnoc-600);
    --sidebar-active: rgba(255,255,255,0.12);
    --sidebar-hover: rgba(255,255,255,0.07);
    --sidebar-text: rgba(255,255,255,0.6);
    --sidebar-text-hover: rgba(255,255,255,0.9);
    --sidebar-text-active: #FFFFFF;
    --sidebar-section-text: rgba(255,255,255,0.35);
    --sidebar-border: rgba(255,255,255,0.08);
    --sidebar-border-collapsed: rgba(255,255,255,0.1);
    --sidebar-user-avatar-bg: rgba(255,255,255,0.15);
    --sidebar-user-avatar-border: rgba(255,255,255,0.2);
    --sidebar-user-name: rgba(255,255,255,0.9);
    --sidebar-user-role: rgba(255,255,255,0.4);
    --sidebar-btn-bg: rgba(255,255,255,0.1);
    --sidebar-btn-hover: rgba(255,255,255,0.2);
    --sidebar-collapsed-active-bg: rgba(255,255,255,0.95);
    --sidebar-collapsed-active-shadow: 0 2px 8px rgba(0,0,0,0.12);

    /* Overlay */
    --overlay-bg: rgba(15,23,42,0.5);

    /* Semantic — extended palette */
    --success-50:  #F0FDF4; --success-100: #DCFCE7; --success-200: #BBF7D0;
    --success-400: #4ADE80; --success-500: #22C55E; --success-600: #16A34A;
    --success-700: #15803D; --success-800: #166534;

    --warning-50:  #FFFBEB; --warning-100: #FEF3C7; --warning-200: #FDE68A;
    --warning-400: #FBBF24; --warning-500: #F59E0B; --warning-600: #D97706;
    --warning-700: #B45309; --warning-800: #92400E;

    --danger-50:   #FEF2F2; --danger-100:  #FEE2E2; --danger-200: #FECACA;
    --danger-400:  #F87171; --danger-500:  #EF4444; --danger-600:  #DC2626;
    --danger-700:  #B91C1C; --danger-800:  #991B1B;

    --info-50:     #EFF6FF; --info-100:    #DBEAFE; --info-500:    #3B82F6; --info-600:    #2563EB;

    --violet-50:   #F5F3FF; --violet-100:  #EDE9FE; --violet-200: #DDD6FE;
    --violet-400:  #A78BFA; --violet-500:  #8B5CF6; --violet-600:  #7C3AED; --violet-700: #6D28D9;

    --teal-50:     #F0FDFA; --teal-100:    #CCFBF1; --teal-200: #99F6E4;
    --teal-400:    #2DD4BF; --teal-500:    #14B8A6; --teal-600:    #0D9488;

    --orange-50:   #FFF7ED; --orange-100:  #FFEDD5; --orange-200: #FED7AA;
    --orange-500:  #F97316; --orange-600:  #EA580C;

    --pink-50:     #FDF2F8; --pink-100:    #FCE7F3; --pink-200: #FBCFE8;
    --pink-500:    #EC4899; --pink-600:    #DB2777;

    --cyan-50:     #ECFEFF; --cyan-100:    #CFFAFE; --cyan-200: #A5F3FC;
    --cyan-500:    #06B6D4; --cyan-600:    #0891B2;

    /* Sky (light blue) */
    --sky-50:  #F0F9FF; --sky-100: #E0F2FE; --sky-200: #BAE6FD; --sky-700: #0369A1;

    /* Indigo */
    --indigo-100: #E0E7FF; --indigo-800: #3730A3;

    /* Emerald */
    --emerald-100: #D1FAE5; --emerald-200: #A7F3D0; --emerald-700: #047857;

    /* Rose */
    --rose-100: #FFE4E6; --rose-200: #FECDD3; --rose-700: #BE123C;

    /* Neutrals */
    --n-0:   #FFFFFF;
    --n-25:  #FCFCFD;
    --n-50:  #F8FAFC;
    --n-100: #F1F5F9;
    --n-200: #E2E8F0;
    --n-300: #CBD5E1;
    --n-400: #94A3B8;
    --n-500: #64748B;
    --n-600: #475569;
    --n-700: #334155;
    --n-800: #1E293B;
    --n-900: #0F172A;

    /* Surfaces */
    --bg:      #F1F5F9;
    --surface: #FFFFFF;
    --surface-raised: #FFFFFF;
    --surface-overlay: #FFFFFF;

    /* Text */
    --text-primary: var(--n-800);
    --text-heading: var(--n-900);
    --text-secondary: var(--n-500);
    --text-tertiary: var(--n-400);
    --text-on-brand: #FFFFFF;
    --text-on-dark: #FFFFFF;

    /* Typography — base 15px */
    --text-xs:  11px;
    --text-sm:  13px;
    --text-base: 15px;
    --text-md:  16px;
    --text-lg:  17px;
    --text-xl:  19px;
    --text-2xl: 23px;
    --text-3xl: 28px;
    --text-4xl: 38px;

    /* Spacing */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
    --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;

    /* Radius */
    --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
    --r-xl: 16px; --r-2xl: 20px; --r-full: 9999px;

    /* Shadows */
    --sh-xs:  0 1px 2px rgba(0,0,0,0.04);
    --sh-sm:  0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --sh-md:  0 4px 6px -1px rgba(0,0,0,0.06), 0 2px 4px -2px rgba(0,0,0,0.04);
    --sh-lg:  0 10px 15px -3px rgba(0,0,0,0.07), 0 4px 6px -4px rgba(0,0,0,0.04);
    --sh-xl:  0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --sh-glow: 0 0 0 3px rgba(59,130,246,0.15);
    --sh-danger-glow: 0 0 0 3px rgba(239,68,68,0.12);
    --sh-success-glow: 0 0 0 3px rgba(34,197,94,0.12);
    --sh-brand-hover: 0 4px 12px rgba(37,99,235,0.3);
    --sh-danger-hover: 0 4px 12px rgba(220,38,38,0.3);
    --sh-success-hover: 0 4px 12px rgba(22,163,74,0.3);

    /* Nav badge */
    --nav-badge-bg: rgba(239,68,68,0.9);

    /* Loading spinner */
    --spinner-track: rgba(255,255,255,0.3);
    --spinner-head: #FFFFFF;

    /* Transition */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 150ms;
    --dur: 250ms;
    --dur-slow: 350ms;

    /* Header */
    --header-h: 68px;
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
    font-size: 15px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    -webkit-text-size-adjust: 100%;
    font-feature-settings: 'kern' 1, 'liga' 1;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font);
    font-weight: 400;
    color: var(--n-800);
    background: var(--adnoc-600);
    line-height: 1.55;
    min-height: 100vh;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

a { text-decoration:none; color:inherit; }
ul, ol { list-style:none; }
img { max-width:100%; display:block; }
button, input, select, textarea { font-family:var(--font); outline:none; border:none; }
button { cursor:pointer; background:none; }

/* ── Layout Shell ── */
.app { display:flex; min-height:100vh; }
.main {
    flex:1; display:flex; flex-direction:column; min-height:100vh;
    transition:margin-left var(--dur) var(--ease);
    background:transparent;
    position:relative;
    z-index:1;
    margin-left:var(--sidebar-w);
}
.page { flex:1; padding:var(--sp-6); overflow-y:auto; background:var(--n-0); }

/* ═══════════════════════════════════════════════
   SIDEBAR — Collapsible (expanded + collapsed)
   ═══════════════════════════════════════════════ */
.sidebar {
    position:fixed; top:0; left:0;
    width:var(--sidebar-w); height:100vh;
    background:var(--sidebar-bg);
    display:flex; flex-direction:column;
    padding:var(--sp-4) 0 var(--sp-4);
    z-index:1000;
    transition:width var(--dur) var(--ease);
    overflow-x:hidden;
    overflow-y:auto;
}
.sidebar::-webkit-scrollbar { width:0; }

/* Sidebar top row — logo + collapse btn */
.sidebar-top-row {
    display:flex; align-items:center; justify-content:space-between;
    padding:0 var(--sp-4); margin-bottom:var(--sp-5);
    flex-shrink:0; min-height:44px;
}
.sidebar-logo {
    display:flex; align-items:center; gap:var(--sp-3);
    flex-shrink:0; overflow:hidden;
}
.sidebar-logo-img {
    width:38px; height:38px; flex-shrink:0;
    object-fit:contain; border-radius:var(--r-md);
}
.sidebar-logo-text {
    font-size:var(--text-lg); font-weight:700; color:var(--text-on-dark);
    white-space:nowrap; transition:opacity var(--dur-fast);
    letter-spacing:0.02em;
}
.sidebar-logo-text span { font-weight:400; opacity:0.6; margin-left:2px; }

/* Section labels */
.sidebar-section-label {
    padding:var(--sp-4) var(--sp-4) var(--sp-2);
    font-size:11px; text-transform:uppercase; letter-spacing:0.08em;
    color:var(--sidebar-section-text); font-weight:600;
    white-space:nowrap; overflow:hidden; transition:opacity var(--dur-fast);
}

/* Nav */
.sidebar-nav {
    display:flex; flex-direction:column;
    gap:var(--sp-1); flex:1; width:100%;
    padding:0 var(--sp-3);
}

.nav-link {
    display:flex; align-items:center; gap:var(--sp-3);
    padding:10px 12px; border-radius:var(--r-lg);
    color:var(--sidebar-text); font-size:var(--text-base); font-weight:400;
    transition:all var(--dur-fast) var(--ease);
    position:relative; cursor:pointer;
    white-space:nowrap; overflow:hidden;
}
.nav-link:hover { background:var(--sidebar-hover); color:var(--sidebar-text-hover); }
.nav-link.active {
    background:var(--sidebar-active); color:var(--sidebar-text-active); font-weight:500;
}

.nav-icon { width:22px; text-align:center; font-size:18px; flex-shrink:0; }
.nav-text {
    font-size:var(--text-base); white-space:nowrap;
    transition:opacity var(--dur-fast); overflow:hidden;
}
.nav-badge {
    margin-left:auto; padding:2px 8px;
    background:var(--nav-badge-bg); color:var(--text-on-dark);
    font-size:11px; font-weight:600; border-radius:var(--r-full);
    text-align:center; line-height:1.4;
    transition:opacity var(--dur-fast);
}

/* Sidebar Bottom */
.sidebar-bottom {
    margin-top:auto; padding:var(--sp-3) var(--sp-3) 0;
    border-top:1px solid var(--sidebar-border); flex-shrink:0;
}
.sidebar-user {
    display:flex; align-items:center; gap:var(--sp-3);
    padding:var(--sp-2) var(--sp-2); border-radius:var(--r-lg);
    cursor:pointer; transition:background var(--dur-fast);
    overflow:hidden;
}
.sidebar-user:hover { background:var(--sidebar-hover); }
.sidebar-user-avatar {
    width:36px; height:36px; border-radius:var(--r-full);
    background:var(--sidebar-user-avatar-bg);
    display:flex; align-items:center; justify-content:center;
    padding-top:1px;
    color:var(--text-on-dark); font-size:13px; font-weight:600; flex-shrink:0;
    border:2px solid var(--sidebar-user-avatar-border);
}
.sidebar-user-info { min-width:0; overflow:hidden; transition:opacity var(--dur-fast); }
.sidebar-user-name { font-size:var(--text-sm); font-weight:500; color:var(--sidebar-user-name); white-space:nowrap; }
.sidebar-user-role { font-size:11px; color:var(--sidebar-user-role); white-space:nowrap; }

/* ─── Collapsed State ─── */
body.sidebar-collapsed { --sidebar-w: var(--sidebar-w-collapsed); }
body.sidebar-collapsed .sidebar { width:var(--sidebar-w-collapsed); align-items:center; }
body.sidebar-collapsed .sidebar-top-row { justify-content:center; padding:0; }
body.sidebar-collapsed .sidebar-logo-text { display:none; }
body.sidebar-collapsed .sidebar-section-label {
    opacity:0; height:0; padding:0; margin:var(--sp-1) auto; overflow:hidden;
    width:32px; border-bottom:1px solid var(--sidebar-border-collapsed);
}
body.sidebar-collapsed .sidebar-nav { padding:0; align-items:center; gap:var(--sp-2); }
body.sidebar-collapsed .nav-link {
    width:46px; height:46px; padding:0;
    justify-content:center; border-radius:var(--r-lg);
}
body.sidebar-collapsed .nav-link.active {
    background:var(--sidebar-collapsed-active-bg); color:var(--adnoc-600);
    box-shadow:var(--sidebar-collapsed-active-shadow);
}
body.sidebar-collapsed .nav-text { display:none; }
body.sidebar-collapsed .nav-badge {
    position:absolute; top:4px; right:4px;
    padding:1px 5px; min-width:14px;
    font-size:9px; margin:0;
}
body.sidebar-collapsed .sidebar-bottom { padding:var(--sp-2) 0 0; border-top:none; }
body.sidebar-collapsed .sidebar-user { justify-content:center; padding:0; }
body.sidebar-collapsed .sidebar-user-info { display:none; }
body.sidebar-collapsed .sidebar-logo { gap:0; }
body.sidebar-collapsed .sidebar-logo-img { width:34px; height:34px; }

/* Mobile menu button (hidden on desktop, shown on mobile) */
.sidebar-menu-btn {
    display:none; width:36px; height:36px;
    align-items:center; justify-content:center;
    font-size:18px; color:var(--sidebar-text-hover);
    border-radius:var(--r-md); cursor:pointer;
    background:var(--sidebar-btn-bg);
    border:none; transition:all var(--dur-fast);
}
.sidebar-menu-btn:hover { background:var(--sidebar-btn-hover); }

/* Sidebar overlay */
.sidebar-overlay {
    display:none; position:fixed; inset:0;
    background:var(--overlay-bg); backdrop-filter:blur(2px);
    z-index:999; opacity:0; transition:opacity var(--dur);
}
.sidebar-overlay.show { display:block; opacity:1; }

/* ═══════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════ */
.header {
    height:var(--header-h); background:var(--n-0);
    border-bottom:none;
    display:flex; align-items:center; justify-content:space-between;
    padding:0 var(--sp-6); position:sticky; top:0; z-index:100;
    border-top-left-radius:30px;
}

.header-left { display:flex; align-items:center; gap:var(--sp-4); flex:1; }

/* Sidebar toggle — always in header, before search */
.sidebar-toggle-btn {
    width:38px; height:38px; display:flex; align-items:center; justify-content:center;
    font-size:18px; color:var(--n-600); border-radius:var(--r-md);
    cursor:pointer; background:none; border:none;
    transition:all var(--dur-fast); flex-shrink:0;
}
.sidebar-toggle-btn:hover { background:var(--n-100); color:var(--n-800); }

/* Mobile menu button — visible only on mobile */
.mobile-menu-btn {
    display:none; width:40px; height:40px;
    align-items:center; justify-content:center;
    font-size:20px; color:var(--n-700); border-radius:var(--r-md);
    cursor:pointer; background:none; border:none;
    transition:background var(--dur-fast);
}
.mobile-menu-btn:hover { background:var(--n-100); }

/* Header Greeting */
.header-greeting { min-width:0; }
.greeting-text { font-size:var(--text-base); font-weight:500; color:var(--n-800); }
.greeting-text strong { font-weight:700; color:var(--n-900); }
.greeting-sub { font-size:var(--text-xs); color:var(--n-400); margin-top:1px; }

.header-center { display:flex; align-items:center; gap:var(--sp-2); }

/* Breadcrumbs (header) */
.breadcrumb { display:flex; align-items:center; gap:var(--sp-2); }
.breadcrumb-item { font-size:var(--text-sm); color:var(--n-400); }
.breadcrumb-item a:hover { color:var(--brand-600); }
.breadcrumb-sep { font-size:10px; color:var(--n-300); }
.breadcrumb-item.current { color:var(--n-700); font-weight:500; }

.header-right { display:flex; align-items:center; gap:var(--sp-3); }

.header-icon-btn {
    width:40px; height:40px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--r-lg); color:var(--n-500); font-size:18px;
    position:relative; transition:all var(--dur-fast); cursor:pointer;
}
.header-icon-btn:hover { background:var(--n-100); color:var(--n-700); }
.header-icon-btn .dot {
    position:absolute; top:8px; right:9px; width:8px; height:8px;
    background:var(--danger-500); border-radius:var(--r-full); border:2px solid var(--n-0);
}

.header-org {
    display:flex; align-items:center; gap:var(--sp-2);
    padding:7px 14px 6px 6px; background:var(--n-50);
    border:1.5px solid var(--n-200); border-radius:var(--r-lg);
    font-size:var(--text-sm); font-weight:500; color:var(--n-700);
    cursor:pointer; transition:all var(--dur-fast);
}
.header-org:hover { background:var(--n-100); border-color:var(--n-300); }
.header-org-badge {
    width:28px; height:28px; background:linear-gradient(135deg, var(--brand-500), var(--brand-700));
    border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
    padding-top:1px;
    color:var(--text-on-dark); font-size:11px; font-weight:700;
}

.header-avatar {
    width:36px; height:36px; border-radius:var(--r-full);
    background:linear-gradient(135deg, var(--brand-400), var(--brand-600));
    display:flex; align-items:center; justify-content:center;
    padding-top:1px;
    color:var(--text-on-dark); font-size:13px; font-weight:600; cursor:pointer;
    border:2px solid var(--n-200); transition:border-color var(--dur-fast);
}
.header-avatar:hover { border-color:var(--brand-300); }

/* ── Header Dropdown System ── */
.header-dropdown { position:relative; }
.header-dropdown-panel {
    display:none; position:absolute; top:calc(100% + 8px); right:0;
    background:var(--n-0); border:1px solid var(--n-200);
    border-radius:var(--r-xl); box-shadow:var(--sh-lg);
    z-index:200; overflow:hidden;
    animation:headerDropIn 0.15s var(--ease);
}
.header-dropdown-panel.show { display:block; }
@keyframes headerDropIn {
    from { opacity:0; transform:translateY(-6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* ── Notification Panel ── */
.notif-panel { width:380px; max-height:480px; display:none; flex-direction:column; }
.notif-panel.show { display:flex; }
.notif-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--sp-4) var(--sp-4) var(--sp-3);
    border-bottom:1px solid var(--n-100);
}
.notif-header h4 { font-size:var(--text-base); font-weight:600; color:var(--n-800); margin:0; }
.notif-mark-read {
    font-size:var(--text-xs); color:var(--brand-600); font-weight:500;
    cursor:pointer; background:none; border:none; padding:4px 8px;
    border-radius:var(--r-sm); transition:background var(--dur-fast);
}
.notif-mark-read:hover { background:var(--brand-50); }

.notif-list { flex:1; overflow-y:auto; }
.notif-item {
    display:flex; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4);
    border-bottom:1px solid var(--n-50); transition:background var(--dur-fast);
    cursor:pointer;
}
.notif-item:hover { background:var(--n-50); }
.notif-item:last-child { border-bottom:none; }
.notif-item.unread { background:var(--brand-50); }
.notif-item.unread:hover { background:var(--info-100); }

.notif-icon {
    width:36px; height:36px; border-radius:var(--r-full);
    display:flex; align-items:center; justify-content:center;
    font-size:14px; flex-shrink:0;
}
.notif-icon.danger  { background:var(--danger-100);  color:var(--danger-600); }
.notif-icon.warning { background:var(--warning-100); color:var(--warning-600); }
.notif-icon.success { background:var(--success-100); color:var(--success-600); }
.notif-icon.info    { background:var(--info-100);    color:var(--info-600); }

.notif-body { min-width:0; flex:1; }
.notif-title { font-size:var(--text-sm); font-weight:500; color:var(--n-800); margin-bottom:2px; }
.notif-desc { font-size:var(--text-xs); color:var(--n-500); line-height:1.4; margin-bottom:3px; }
.notif-time { font-size:var(--text-xs); color:var(--n-400); }

.notif-footer {
    display:flex; align-items:center; justify-content:center; gap:6px;
    padding:var(--sp-3); border-top:1px solid var(--n-100);
    font-size:var(--text-sm); font-weight:500; color:var(--brand-600);
    transition:background var(--dur-fast);
}
.notif-footer:hover { background:var(--brand-50); }
.notif-footer i { font-size:11px; }

/* ── Org Selector Panel ── */
.org-panel { width:240px; padding:var(--sp-2) 0; }
.org-panel-title {
    padding:var(--sp-2) var(--sp-4) var(--sp-3);
    font-size:var(--text-xs); font-weight:600; color:var(--n-400);
    text-transform:uppercase; letter-spacing:0.05em;
}
.org-item {
    display:flex; align-items:center; gap:var(--sp-3);
    padding:var(--sp-2) var(--sp-4); font-size:var(--text-sm); color:var(--n-700);
    transition:background var(--dur-fast); cursor:pointer;
}
.org-item:hover { background:var(--n-50); }
.org-item.active { color:var(--brand-600); font-weight:500; }
.org-item .org-check { margin-left:auto; font-size:12px; color:var(--brand-600); }
.org-item i:first-child { font-size:14px; color:var(--n-400); width:16px; text-align:center; }
.org-item.active i:first-child { color:var(--brand-500); }

/* ── User Panel ── */
.user-panel { width:250px; padding:var(--sp-2) 0; }
.user-panel-info {
    display:flex; align-items:center; gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);
}
.user-panel-avatar {
    width:40px; height:40px; border-radius:var(--r-full);
    background:linear-gradient(135deg, var(--brand-400), var(--brand-600));
    display:flex; align-items:center; justify-content:center;
    color:var(--text-on-dark); font-size:14px; font-weight:600; flex-shrink:0;
}
.user-panel-name { font-size:var(--text-sm); font-weight:600; color:var(--n-800); }
.user-panel-email { font-size:var(--text-xs); color:var(--n-400); }
.user-panel-divider { height:1px; background:var(--n-100); margin:var(--sp-1) 0; }
.user-panel-item {
    display:flex; align-items:center; gap:var(--sp-3);
    padding:var(--sp-2) var(--sp-4); font-size:var(--text-sm); color:var(--n-700);
    transition:background var(--dur-fast); cursor:pointer;
}
.user-panel-item:hover { background:var(--n-50); }
.user-panel-item i { width:16px; text-align:center; font-size:14px; color:var(--n-400); }
.user-panel-item.logout { color:var(--danger-600); }
.user-panel-item.logout i { color:var(--danger-500); }
.user-panel-item.logout:hover { background:var(--danger-50); }

/* ═══════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════ */
.page-header {
    display:flex; align-items:flex-start; justify-content:space-between;
    margin-bottom:var(--sp-6); flex-wrap:wrap; gap:var(--sp-4);
}
.page-header-left {}
.page-title { font-size:var(--text-3xl); font-weight:700; color:var(--n-900); line-height:1.2; }
.page-subtitle { font-size:var(--text-sm); color:var(--n-500); margin-top:4px; }
.page-subtitle strong { font-weight:600; color:var(--n-700); }
.page-header-actions { display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; }

/* ═══════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════ */
.card {
    background:var(--surface); border-radius:var(--r-xl);
    border:1px solid var(--n-200); box-shadow:var(--sh-xs);
    overflow:hidden; transition:box-shadow var(--dur-fast);
}
.page > .card { margin-bottom:var(--sp-5); }
.page > .card:last-child { margin-bottom:0; }
.card:hover { box-shadow:var(--sh-sm); }

.card-header {
    padding:var(--sp-5) var(--sp-5) 0;
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:var(--sp-4);
}
.card-title { font-size:var(--text-md); font-weight:700; color:var(--n-900); }
.card-desc { font-size:var(--text-xs); color:var(--n-400); margin-top:2px; }
.card-body { padding:var(--sp-5); }
.card-footer {
    padding:var(--sp-4) var(--sp-5);
    border-top:1px solid var(--n-100);
    display:flex; align-items:center; justify-content:space-between;
}

/* ═══════════════════════════════════════════════
   KPI STAT CARDS
   ═══════════════════════════════════════════════ */
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin-bottom:var(--sp-6); }

.kpi-card {
    background:var(--n-0); border-radius:var(--r-xl); padding:var(--sp-5);
    border:1px solid var(--n-200); border-top:3.5px solid var(--n-300);
    position:relative; overflow:hidden;
    transition:all var(--dur-fast); cursor:default;
    display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
}
.kpi-card:hover { box-shadow:var(--sh-md); transform:translateY(-1px); }

.kpi-card-content { flex:1; min-width:0; }
.kpi-card-label { font-size:var(--text-sm); color:var(--n-500); font-weight:400; margin-bottom:var(--sp-1); letter-spacing:0.01em; }
.kpi-card-value { font-size:var(--text-4xl); font-weight:700; line-height:1; margin-bottom:var(--sp-2); color:var(--n-900); }
.kpi-card-value small { font-size:var(--text-xl); font-weight:500; }
.kpi-card-trend { font-size:var(--text-xs); display:flex; align-items:center; gap:4px; font-weight:500; }
.kpi-card-trend.up { color:var(--success-600); }
.kpi-card-trend.down { color:var(--danger-600); }

.kpi-card-icon {
    width:52px; height:52px; border-radius:var(--r-xl);
    display:flex; align-items:center; justify-content:center;
    font-size:20px; flex-shrink:0;
}

/* Themed KPI cards */
.kpi-card.blue { border-top-color:var(--brand-500); background:linear-gradient(135deg, var(--info-50) 0%, var(--n-0) 100%); }
.kpi-card.blue .kpi-card-icon { background:var(--brand-100); color:var(--brand-600); }
.kpi-card.blue .kpi-card-value { color:var(--brand-700); }

.kpi-card.green { border-top-color:var(--success-500); background:linear-gradient(135deg, var(--success-50) 0%, var(--n-0) 100%); }
.kpi-card.green .kpi-card-icon { background:var(--success-100); color:var(--success-600); }
.kpi-card.green .kpi-card-value { color:var(--success-700); }

.kpi-card.red { border-top-color:var(--danger-500); background:linear-gradient(135deg, var(--danger-50) 0%, var(--n-0) 100%); }
.kpi-card.red .kpi-card-icon { background:var(--danger-100); color:var(--danger-600); }
.kpi-card.red .kpi-card-value { color:var(--danger-700); }

.kpi-card.amber { border-top-color:var(--warning-500); background:linear-gradient(135deg, var(--warning-50) 0%, var(--n-0) 100%); }
.kpi-card.amber .kpi-card-icon { background:var(--warning-100); color:var(--warning-600); }
.kpi-card.amber .kpi-card-value { color:var(--warning-700); }

/* ═══════════════════════════════════════════════
   GRID LAYOUTS
   ═══════════════════════════════════════════════ */
.grid { display:grid; gap:var(--sp-4); margin-bottom:var(--sp-4); }
.grid.cols-2 { grid-template-columns:2fr 1fr; }
.grid.cols-3 { grid-template-columns:1fr 1fr 1fr; }
.grid.cols-2-equal { grid-template-columns:1fr 1fr; }
.grid.cols-4 { grid-template-columns:repeat(4,1fr); }

/* ═══════════════════════════════════════════════
   TAB TOGGLE
   ═══════════════════════════════════════════════ */
.tab-toggle {
    display:inline-flex; background:var(--n-100); border-radius:var(--r-md); padding:3px;
}
.tab-toggle-btn {
    padding:7px 16px 6px; font-size:var(--text-sm); font-weight:500;
    color:var(--n-500); border-radius:var(--r-sm); transition:all var(--dur-fast); cursor:pointer;
}
.tab-toggle-btn.active { background:var(--brand-600); color:var(--text-on-brand); box-shadow:var(--sh-sm); }
.tab-toggle-btn:hover:not(.active) { color:var(--n-700); }

/* ═══════════════════════════════════════════════
   TABS (Full)
   ═══════════════════════════════════════════════ */
.tabs { border-bottom:2px solid var(--n-200); display:flex; gap:0; margin-bottom:var(--sp-5); }
.tab-item {
    padding:calc(var(--sp-3) + 1px) var(--sp-5) var(--sp-3); font-size:var(--text-base); font-weight:500;
    color:var(--n-400); border-bottom:2px solid transparent; margin-bottom:-2px;
    cursor:pointer; transition:all var(--dur-fast); white-space:nowrap;
}
.tab-item:hover { color:var(--n-700); }
.tab-item.active { color:var(--brand-600); border-bottom-color:var(--brand-600); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ═══════════════════════════════════════════════
   DONUT CHART
   ═══════════════════════════════════════════════ */
.donut-wrap { display:flex; align-items:center; gap:var(--sp-6); }
.donut-chart { position:relative; width:150px; height:150px; flex-shrink:0; }
.donut-chart svg { width:100%; height:100%; transform:rotate(-90deg); }
.donut-center {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;
}
.donut-center-val { font-size:var(--text-2xl); font-weight:700; color:var(--n-900); line-height:1; }
.donut-center-lbl { font-size:var(--text-xs); color:var(--n-400); margin-top:2px; }

.legend { display:flex; flex-direction:column; gap:var(--sp-2); }
.legend-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); min-width:150px; }
.legend-left { display:flex; align-items:center; gap:var(--sp-2); }
.legend-dot { width:10px; height:10px; border-radius:var(--r-full); flex-shrink:0; }
.legend-label { font-size:var(--text-sm); color:var(--n-600); }
.legend-val { font-size:var(--text-sm); font-weight:700; color:var(--n-800); }

/* ═══════════════════════════════════════════════
   HORIZONTAL BARS
   ═══════════════════════════════════════════════ */
.hbar-list { display:flex; flex-direction:column; gap:var(--sp-4); }
.hbar-row { display:flex; flex-direction:column; gap:6px; }
.hbar-head { display:flex; justify-content:space-between; }
.hbar-label { font-size:var(--text-sm); color:var(--n-700); }
.hbar-val { font-size:var(--text-sm); font-weight:700; color:var(--n-800); }
.hbar-track { width:100%; height:7px; background:var(--n-100); border-radius:var(--r-full); overflow:hidden; }
.hbar-fill { height:100%; border-radius:var(--r-full); transition:width 0.6s var(--ease); }
.hbar-fill.blue { background:linear-gradient(90deg,var(--brand-400),var(--brand-600)); }
.hbar-fill.green { background:linear-gradient(90deg,var(--success-400),var(--success-600)); }
.hbar-fill.amber { background:linear-gradient(90deg,var(--warning-400),var(--warning-600)); }
.hbar-fill.red { background:linear-gradient(90deg,var(--danger-400),var(--danger-600)); }
.hbar-fill.teal { background:linear-gradient(90deg,var(--teal-400),var(--teal-600)); }
.hbar-fill.violet { background:linear-gradient(90deg,var(--violet-400),var(--violet-600)); }

/* ═══════════════════════════════════════════════
   RECENT INCIDENTS LIST
   ═══════════════════════════════════════════════ */
.recent-list { display:flex; flex-direction:column; gap:var(--sp-4); }
.recent-item { display:flex; align-items:flex-start; gap:var(--sp-3); }
.recent-dot { width:10px; height:10px; border-radius:var(--r-full); flex-shrink:0; margin-top:5px; }
.recent-body { flex:1; min-width:0; }
.recent-title { font-size:var(--text-sm); font-weight:500; color:var(--n-800); margin-bottom:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.recent-meta { display:flex; align-items:center; gap:var(--sp-2); }
.recent-time { font-size:var(--text-xs); color:var(--n-400); }

/* ═══════════════════════════════════════════════
   BADGES & STATUS PILLS
   ═══════════════════════════════════════════════ */
.badge {
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px 3px; font-size:var(--text-xs); font-weight:500;
    border-radius:var(--r-full); border:1px solid transparent;
    line-height:1.4; white-space:nowrap;
}
.badge i { font-size:10px; }

.badge-blue   { background:var(--info-50);    color:var(--info-600);    border-color:var(--brand-200); }
.badge-green  { background:var(--success-50); color:var(--success-600); border-color:var(--success-200); }
.badge-amber  { background:var(--warning-50); color:var(--warning-700); border-color:var(--warning-200); }
.badge-red    { background:var(--danger-50);  color:var(--danger-600);  border-color:var(--danger-200); }
.badge-violet { background:var(--violet-50);  color:var(--violet-600);  border-color:var(--violet-200); }
.badge-teal   { background:var(--teal-50);    color:var(--teal-600);    border-color:var(--teal-200); }
.badge-orange { background:var(--orange-50);  color:var(--orange-600);  border-color:var(--orange-200); }
.badge-pink   { background:var(--pink-50);    color:var(--pink-600);    border-color:var(--pink-200); }
.badge-cyan   { background:var(--cyan-50);    color:var(--cyan-600);    border-color:var(--cyan-200); }
.badge-gray   { background:var(--n-50);       color:var(--n-600);       border-color:var(--n-200); }
.badge-dark   { background:var(--n-800);      color:var(--text-on-dark); }

/* Severity */
.sev { display:inline-flex; align-items:center; padding:4px 10px 3px; font-size:var(--text-xs); font-weight:500; border-radius:var(--r-full); border:1px solid transparent; }
.sev.minor        { background:var(--sky-100); color:var(--sky-700); border-color:var(--sky-200); }
.sev.notable      { background:var(--emerald-100); color:var(--emerald-700); border-color:var(--emerald-200); }
.sev.serious      { background:var(--warning-100); color:var(--warning-700); border-color:var(--warning-200); }
.sev.major        { background:var(--rose-100); color:var(--rose-700); border-color:var(--rose-200); }
.sev.catastrophic { background:var(--violet-100); color:var(--violet-700); border-color:var(--violet-200); }
.sev.disastrous   { background:var(--n-800); color:var(--text-on-dark); }

/* Status */
.status { display:inline-flex; align-items:center; gap:5px; padding:4px 10px 3px; font-size:var(--text-xs); font-weight:500; border-radius:var(--r-full); border:1px solid transparent; }
.status .status-dot { width:6px; height:6px; border-radius:var(--r-full); }
.status.open          { background:var(--info-50);    color:var(--info-600);    border-color:var(--brand-200); }
.status.open .status-dot { background:var(--info-500); }
.status.closed        { background:var(--success-50); color:var(--success-600); border-color:var(--success-200); }
.status.closed .status-dot { background:var(--success-500); }
.status.under-review  { background:var(--warning-50); color:var(--warning-700); border-color:var(--warning-200); }
.status.under-review .status-dot { background:var(--warning-500); }
.status.escalated     { background:var(--danger-50);  color:var(--danger-600);  border-color:var(--danger-200); }
.status.escalated .status-dot { background:var(--danger-500); }
.status.pending       { background:var(--n-50); color:var(--n-600); border-color:var(--n-200); }
.status.pending .status-dot { background:var(--n-400); }
.status.in-progress   { background:var(--teal-50); color:var(--teal-600); border-color:var(--teal-200); }
.status.in-progress .status-dot { background:var(--teal-500); }
.status.area-owner    { background:var(--violet-50); color:var(--violet-600); border-color:var(--violet-200); }
.status.area-owner .status-dot { background:var(--violet-500); }

/* ═══════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:var(--sp-2); font-family:var(--font); font-weight:500;
    border-radius:var(--r-md); border:1.5px solid transparent;
    cursor:pointer; transition:all var(--dur-fast) var(--ease);
    white-space:nowrap; line-height:1; position:relative;
}
.btn:active { transform:scale(0.97); }

/* Sizes */
/* Padding: top is +1px to compensate ADNOC Sans vertical offset */
.btn-xs { padding:6px 10px 5px; font-size:var(--text-xs); border-radius:var(--r-sm); }
.btn-sm { padding:8px 14px 7px; font-size:var(--text-sm); }
.btn-md { padding:10px 18px 9px; font-size:var(--text-base); }
.btn-lg { padding:12px 24px 11px; font-size:var(--text-md); }
.btn-xl { padding:15px 28px 14px; font-size:var(--text-lg); border-radius:var(--r-lg); }

/* Variants */
.btn-primary { background:var(--brand-600); color:var(--text-on-brand); border-color:var(--brand-600); }
.btn-primary:hover { background:var(--brand-700); border-color:var(--brand-700); box-shadow:var(--sh-brand-hover); }

.btn-secondary { background:var(--n-100); color:var(--n-700); border-color:var(--n-200); }
.btn-secondary:hover { background:var(--n-200); }

.btn-outline { background:transparent; color:var(--n-700); border-color:var(--n-300); }
.btn-outline:hover { background:var(--n-50); border-color:var(--n-400); }

.btn-ghost { background:transparent; color:var(--n-600); border-color:transparent; }
.btn-ghost:hover { background:var(--n-100); }

.btn-danger { background:var(--danger-600); color:var(--text-on-brand); border-color:var(--danger-600); }
.btn-danger:hover { background:var(--danger-700); box-shadow:var(--sh-danger-hover); }

.btn-danger-soft { background:var(--danger-50); color:var(--danger-600); border-color:var(--danger-200); }
.btn-danger-soft:hover { background:var(--danger-100); }

.btn-success { background:var(--success-600); color:var(--text-on-brand); border-color:var(--success-600); }
.btn-success:hover { background:var(--success-700); box-shadow:var(--sh-success-hover); }

.btn-success-soft { background:var(--success-50); color:var(--success-600); border-color:var(--success-200); }
.btn-success-soft:hover { background:var(--success-100); }

.btn-warning { background:var(--warning-600); color:var(--text-on-brand); border-color:var(--warning-600); }
.btn-warning:hover { background:var(--warning-700); }

.btn-warning-soft { background:var(--warning-50); color:var(--warning-700); border-color:var(--warning-200); }
.btn-warning-soft:hover { background:var(--warning-100); }

.btn-brand-outline { background:transparent; color:var(--brand-600); border-color:var(--brand-300); }
.btn-brand-outline:hover { background:var(--brand-50); border-color:var(--brand-400); }

/* Icon only */
.btn-icon {
    width:38px; height:38px; padding:1px 0 0;
    display:inline-flex; align-items:center; justify-content:center;
    border-radius:var(--r-md); font-size:15px; border:1.5px solid transparent;
    cursor:pointer; transition:all var(--dur-fast);
}
.btn-icon:active { transform:scale(0.93); }
.btn-icon.primary { background:var(--brand-600); color:var(--text-on-brand); }
.btn-icon.primary:hover { background:var(--brand-700); }
.btn-icon.warning { background:var(--warning-500); color:var(--text-on-brand); }
.btn-icon.warning:hover { background:var(--warning-600); }
.btn-icon.danger { background:var(--danger-500); color:var(--text-on-brand); }
.btn-icon.danger:hover { background:var(--danger-600); }
.btn-icon.soft { background:var(--n-100); color:var(--n-600); }
.btn-icon.soft:hover { background:var(--n-200); color:var(--n-700); }
.btn-icon.outline-icon { background:transparent; border-color:var(--n-300); color:var(--n-600); }
.btn-icon.outline-icon:hover { background:var(--n-50); border-color:var(--n-400); }
.btn-icon.ghost-icon { background:transparent; color:var(--n-400); }
.btn-icon.ghost-icon:hover { background:var(--n-100); color:var(--n-600); }

/* Button Group */
.btn-group { display:inline-flex; }
.btn-group .btn { border-radius:0; margin-left:-1.5px; }
.btn-group .btn:first-child { border-radius:var(--r-md) 0 0 var(--r-md); margin-left:0; }
.btn-group .btn:last-child { border-radius:0 var(--r-md) var(--r-md) 0; }

/* Loading state */
.btn.loading { pointer-events:none; opacity:0.7; }
.btn.loading::after {
    content:''; width:14px; height:14px;
    border:2px solid var(--spinner-track); border-top-color:var(--spinner-head);
    border-radius:var(--r-full); animation:spin 0.6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* ═══════════════════════════════════════════════
   FORM CONTROLS
   ═══════════════════════════════════════════════ */
.form-group { margin-bottom:var(--sp-5); }
.form-label {
    display:flex; align-items:center; gap:4px;
    font-size:var(--text-sm); font-weight:500; color:var(--n-700);
    margin-bottom:6px;
}
.form-label .req { color:var(--danger-500); }
.form-label .optional { font-weight:400; color:var(--n-400); font-size:var(--text-xs); }

.form-input {
    width:100%; height:44px; padding:1px var(--sp-4) 0;
    background:var(--n-0); border:1.5px solid var(--n-200);
    border-radius:var(--r-lg); font-size:var(--text-base);
    font-family:var(--font); color:var(--n-800); transition:all var(--dur-fast);
}
.form-input::placeholder { color:var(--n-400); }
.form-input:hover:not(:disabled) { border-color:var(--n-400); }
.form-input:focus { border-color:var(--brand-500); box-shadow:var(--sh-glow); }
.form-input.is-error { border-color:var(--danger-500); background:var(--danger-50); }
.form-input.is-error:focus { box-shadow:var(--sh-danger-glow); }
.form-input.is-success { border-color:var(--success-500); background:var(--success-50); }
.form-input.is-success:focus { box-shadow:var(--sh-success-glow); }
.form-input:disabled { background:var(--n-100); border-color:var(--n-200); color:var(--n-400); cursor:not-allowed; }

.form-hint { display:flex; align-items:center; gap:4px; font-size:var(--text-xs); margin-top:5px; }
.form-hint.error { color:var(--danger-600); }
.form-hint.success { color:var(--success-600); }
.form-hint i { font-size:12px; }

/* Input with icon */
.input-icon-wrap { position:relative; }
.input-icon-wrap .form-input { padding-left:40px; }
.input-icon-wrap .input-icon {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--n-400); font-size:14px; pointer-events:none;
}
.input-icon-wrap .input-icon-right {
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    color:var(--n-400); font-size:14px; cursor:pointer;
}

/* Select */
.select-wrap { position:relative; }
.form-select {
    width:100%; height:44px; padding:1px 36px 0 var(--sp-4);
    background:var(--n-0); border:1.5px solid var(--n-200);
    border-radius:var(--r-lg); font-size:var(--text-base);
    font-family:var(--font); color:var(--n-800);
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    cursor:pointer; transition:all var(--dur-fast);
}
.form-select:hover { border-color:var(--n-400); }
.form-select:focus { border-color:var(--brand-500); box-shadow:var(--sh-glow); }
.form-select:disabled { background:var(--n-100); border-color:var(--n-200); color:var(--n-400); cursor:not-allowed; }
.form-select.placeholder { color:var(--n-400); }
.select-wrap::after {
    content:'\f078'; font-family:'Font Awesome 6 Free'; font-weight:900;
    position:absolute; right:14px; top:50%; transform:translateY(-50%);
    font-size:11px; color:var(--n-400); pointer-events:none;
}

/* Textarea */
.form-textarea {
    width:100%; min-height:110px; padding:calc(var(--sp-3) + 1px) var(--sp-4) var(--sp-3);
    background:var(--n-0); border:1.5px solid var(--n-200);
    border-radius:var(--r-lg); font-size:var(--text-base);
    font-family:var(--font); color:var(--n-800);
    resize:vertical; transition:all var(--dur-fast);
}
.form-textarea::placeholder { color:var(--n-400); }
.form-textarea:hover { border-color:var(--n-400); }
.form-textarea:focus { border-color:var(--brand-500); box-shadow:var(--sh-glow); }

/* Checkbox */
.checkbox { display:flex; align-items:center; gap:var(--sp-2); cursor:pointer; font-size:var(--text-base); color:var(--n-700); }
.checkbox input { display:none; }
.checkbox-box {
    width:20px; height:20px; border:1.5px solid var(--n-300);
    border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center;
    padding-top:1px;
    transition:all var(--dur-fast); flex-shrink:0; color:transparent; font-size:11px;
}
.checkbox input:checked + .checkbox-box {
    background:var(--brand-600); border-color:var(--brand-600); color:var(--text-on-brand);
}
.checkbox:hover .checkbox-box { border-color:var(--brand-400); }
.checkbox input:disabled + .checkbox-box { background:var(--n-100); border-color:var(--n-200); }

/* Radio */
.radio { display:flex; align-items:center; gap:var(--sp-2); cursor:pointer; font-size:var(--text-base); color:var(--n-700); }
.radio input { display:none; }
.radio-circle {
    width:20px; height:20px; border:1.5px solid var(--n-300);
    border-radius:var(--r-full); display:flex; align-items:center; justify-content:center;
    transition:all var(--dur-fast); flex-shrink:0;
}
.radio-circle::after {
    content:''; width:10px; height:10px; border-radius:var(--r-full);
    background:var(--brand-600); transform:scale(0); transition:transform var(--dur-fast);
}
.radio input:checked + .radio-circle { border-color:var(--brand-600); }
.radio input:checked + .radio-circle::after { transform:scale(1); }

/* Toggle / Switch */
.toggle { display:flex; align-items:center; gap:var(--sp-3); cursor:pointer; font-size:var(--text-base); color:var(--n-700); }
.toggle input { display:none; }
.toggle-track {
    width:44px; height:24px; background:var(--n-300);
    border-radius:var(--r-full); position:relative;
    transition:background var(--dur-fast); flex-shrink:0;
}
.toggle-track::after {
    content:''; position:absolute; top:2px; left:2px;
    width:20px; height:20px; background:var(--n-0);
    border-radius:var(--r-full); box-shadow:var(--sh-sm);
    transition:transform var(--dur-fast);
}
.toggle input:checked + .toggle-track { background:var(--brand-600); }
.toggle input:checked + .toggle-track::after { transform:translateX(20px); }

/* File Upload */
.file-upload {
    border:2px dashed var(--n-300); border-radius:var(--r-xl);
    padding:var(--sp-8) var(--sp-6); text-align:center;
    cursor:pointer; transition:all var(--dur-fast);
    background:var(--n-25);
}
.file-upload:hover { border-color:var(--brand-400); background:var(--brand-50); }
.file-upload-icon { font-size:36px; color:var(--n-300); margin-bottom:var(--sp-3); }
.file-upload:hover .file-upload-icon { color:var(--brand-400); }
.file-upload-text { font-size:var(--text-base); color:var(--n-600); margin-bottom:4px; }
.file-upload-text strong { color:var(--brand-600); }
.file-upload-hint { font-size:var(--text-xs); color:var(--n-400); }

/* ═══════════════════════════════════════════════
   TABLE
   ═══════════════════════════════════════════════ */
.table-wrap { overflow-x:auto; border-radius:var(--r-xl); border:1px solid var(--n-200); }
.table {
    width:100%; border-collapse:collapse; font-size:var(--text-base);
}
.table thead { background:var(--n-50); }
.table th {
    padding:calc(var(--sp-3) + 1px) var(--sp-4) var(--sp-3); text-align:left;
    font-size:var(--text-sm); font-weight:600; color:var(--n-600);
    border-bottom:1px solid var(--n-200); white-space:nowrap;
    cursor:pointer; user-select:none;
}
.table th:hover { color:var(--n-800); }
.table th .sort-icon { margin-left:4px; font-size:10px; color:var(--n-300); }
.table th.sorted .sort-icon { color:var(--brand-600); }
.table td {
    padding:calc(var(--sp-3) + 1px) var(--sp-4) var(--sp-3); border-bottom:1px solid var(--n-100);
    color:var(--n-700); vertical-align:middle;
}
.table tbody tr { transition:background var(--dur-fast); }
.table tbody tr:hover { background:var(--brand-50); }
.table tbody tr:last-child td { border-bottom:none; }

.table-user { display:flex; align-items:center; gap:var(--sp-3); }
.table-avatar {
    width:32px; height:32px; border-radius:var(--r-full);
    display:flex; align-items:center; justify-content:center;
    padding-top:1px;
    font-size:var(--text-xs); font-weight:600; color:var(--text-on-dark); flex-shrink:0;
}
.table-user-name { font-weight:500; color:var(--n-800); }
.table-user-email { font-size:var(--text-xs); color:var(--n-400); }

/* ── Table Filter Bar ── */
.table-filter-bar {
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--sp-4); padding:var(--sp-4) var(--sp-5);
    flex-wrap:wrap;
}
.table-filter-left { display:flex; align-items:center; gap:var(--sp-3); flex:1; flex-wrap:wrap; }
.table-filter-right { display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }

.table-search {
    position:relative; min-width:220px; max-width:280px;
}
.table-search i {
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--n-400); font-size:13px; pointer-events:none;
}
.table-search input {
    width:100%; height:40px; padding:1px var(--sp-3) 0 36px;
    background:var(--n-50); border:1.5px solid var(--n-200);
    border-radius:var(--r-lg); font-size:var(--text-sm);
    color:var(--n-800); transition:all var(--dur-fast);
}
.table-search input::placeholder { color:var(--n-400); }
.table-search input:focus { background:var(--n-0); border-color:var(--brand-500); box-shadow:var(--sh-glow); }

.table-quick-filters { display:flex; align-items:center; gap:var(--sp-2); }
.filter-select { min-width:0; position:relative; }
.filter-select .form-select {
    height:40px; padding:0 30px 0 12px; font-size:var(--text-sm);
    min-width:110px;
}
.filter-select.select-wrap::after { right:10px; font-size:10px; }

/* Advance Filter Button — consistent with btn-outline */
.btn-advance-filter {
    background:var(--adnoc-600); color:var(--text-on-brand);
    border-radius:var(--r-lg); font-weight:500; font-size:var(--text-sm);
    padding:9px 18px 8px; border:1.5px solid var(--adnoc-600); cursor:pointer;
    transition:all var(--dur-fast); white-space:nowrap;
    height:40px; display:inline-flex; align-items:center; gap:6px;
}
.btn-advance-filter:hover { background:var(--adnoc-700); border-color:var(--adnoc-700); }

/* Advance Filter Panel */
.advance-filter-panel {
    max-height:0; overflow:hidden;
    transition:max-height 0.35s var(--ease);
    border-top:none;
}
.advance-filter-panel.open {
    max-height:400px;
    border-top:1px solid var(--n-200);
}
.advance-filter-inner { padding:var(--sp-5); background:var(--n-25); }
.advance-filter-header {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:var(--sp-4);
}
.advance-filter-header h4 { font-size:var(--text-base); font-weight:600; color:var(--n-800); margin:0; }
.advance-filter-close {
    width:32px; height:32px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--r-md); color:var(--n-500); cursor:pointer;
    background:none; border:none; font-size:16px;
}
.advance-filter-close:hover { background:var(--n-100); }
.advance-filter-grid {
    display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);
    margin-bottom:var(--sp-4);
}
.advance-filter-actions { display:flex; justify-content:flex-end; gap:var(--sp-2); }

/* Active Filter Tags */
.active-filter-tags {
    display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap;
    padding:var(--sp-3) var(--sp-5);
    border-top:1px solid var(--n-100);
}
.filter-tag {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px 4px 12px; background:var(--brand-50);
    border:1px solid var(--brand-200); border-radius:var(--r-full);
    font-size:var(--text-xs); font-weight:500; color:var(--brand-700);
}
.filter-tag-remove {
    width:18px; height:18px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--r-full); cursor:pointer; font-size:10px;
    color:var(--brand-500); background:none; border:none;
    transition:all var(--dur-fast);
}
.filter-tag-remove:hover { background:var(--brand-100); color:var(--brand-700); }
.filter-clear-all {
    font-size:var(--text-xs); color:var(--danger-600); font-weight:500;
    cursor:pointer; background:none; border:none; padding:4px 8px;
    border-radius:var(--r-sm);
}
.filter-clear-all:hover { background:var(--danger-50); }

/* Sub-role Badges */
.subrole-badge {
    display:inline-block; padding:4px 12px 3px; border-radius:var(--r-full);
    font-size:var(--text-xs); font-weight:500; white-space:nowrap;
}
.subrole-badge.reviewer { background:var(--sky-100); color:var(--sky-700); }
.subrole-badge.approver { background:var(--warning-100); color:var(--warning-800); }
.subrole-badge.gso { background:var(--indigo-100); color:var(--indigo-800); }
.subrole-badge.direct { background:var(--success-100); color:var(--success-800); }

/* Status Pill */
.status-pill {
    display:inline-block; padding:4px 14px 3px; border-radius:var(--r-full);
    font-size:var(--text-xs); font-weight:500;
}
.status-pill.active { background:var(--success-100); color:var(--success-800); }
.status-pill.inactive { background:var(--n-100); color:var(--n-600); }
.status-pill.suspended { background:var(--danger-100); color:var(--danger-800); }

/* Pagination nav buttons */
.page-nav {
    width:auto !important; padding:0 14px; gap:6px;
    font-size:var(--text-sm); font-weight:500; color:var(--n-600);
}
.page-nav:hover { color:var(--brand-600); }

/* ═══════════════════════════════════════════════
   PAGINATION
   ═══════════════════════════════════════════════ */
.pagination { display:flex; align-items:center; gap:var(--sp-1); }
.page-btn {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    padding-top:1px;
    border-radius:var(--r-md); font-size:var(--text-sm); font-weight:500;
    color:var(--n-600); transition:all var(--dur-fast); cursor:pointer;
}
.page-btn:hover { background:var(--n-100); }
.page-btn.active { background:var(--brand-600); color:var(--text-on-brand); }
.page-btn:disabled { color:var(--n-300); cursor:not-allowed; }
.page-info { font-size:var(--text-sm); color:var(--n-500); }

/* ═══════════════════════════════════════════════
   AVATARS
   ═══════════════════════════════════════════════ */
.avatar {
    display:inline-flex; align-items:center; justify-content:center;
    padding-top:1px;
    border-radius:var(--r-full); font-weight:600; color:var(--text-on-dark); flex-shrink:0;
    border:2px solid var(--n-0); overflow:hidden;
}
.avatar-xs { width:24px; height:24px; font-size:9px; }
.avatar-sm { width:32px; height:32px; font-size:11px; }
.avatar-md { width:40px; height:40px; font-size:14px; }
.avatar-lg { width:48px; height:48px; font-size:16px; }
.avatar-xl { width:64px; height:64px; font-size:22px; }

.avatar-group { display:flex; }
.avatar-group .avatar { margin-left:-8px; border:2px solid var(--n-0); }
.avatar-group .avatar:first-child { margin-left:0; }
.avatar-group .avatar-more { background:var(--n-200); color:var(--n-600); font-size:11px; }

/* ═══════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════ */
.progress { width:100%; height:8px; background:var(--n-100); border-radius:var(--r-full); overflow:hidden; }
.progress-fill { height:100%; border-radius:var(--r-full); transition:width 0.5s var(--ease); }
.progress.thin { height:4px; }
.progress.thick { height:12px; }

.progress-labeled { display:flex; flex-direction:column; gap:6px; }
.progress-head { display:flex; justify-content:space-between; font-size:var(--text-sm); }
.progress-head-label { color:var(--n-700); font-weight:500; }
.progress-head-val { color:var(--n-500); }

/* ═══════════════════════════════════════════════
   ALERTS / CALLOUTS
   ═══════════════════════════════════════════════ */
.alert {
    display:flex; gap:var(--sp-3); padding:calc(var(--sp-4) + 1px) var(--sp-5) var(--sp-4);
    border-radius:var(--r-lg); border:1px solid transparent;
    font-size:var(--text-base); line-height:1.5;
}
.alert-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.alert-body { flex:1; }
.alert-title { font-weight:600; margin-bottom:2px; }
.alert-text { font-size:var(--text-sm); }
.alert-close { margin-left:auto; cursor:pointer; opacity:0.5; transition:opacity var(--dur-fast); font-size:14px; }
.alert-close:hover { opacity:1; }

.alert-info    { background:var(--info-50);    border-color:var(--brand-200); }
.alert-info .alert-icon { color:var(--info-600); }
.alert-info .alert-title { color:var(--info-600); }

.alert-success { background:var(--success-50); border-color:var(--success-200); }
.alert-success .alert-icon { color:var(--success-600); }
.alert-success .alert-title { color:var(--success-600); }

.alert-warning { background:var(--warning-50); border-color:var(--warning-200); }
.alert-warning .alert-icon { color:var(--warning-600); }
.alert-warning .alert-title { color:var(--warning-700); }

.alert-danger  { background:var(--danger-50);  border-color:var(--danger-200); }
.alert-danger .alert-icon { color:var(--danger-600); }
.alert-danger .alert-title { color:var(--danger-600); }

/* ═══════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ═══════════════════════════════════════════════ */
.toast-container {
    position:fixed; top:var(--sp-6); right:var(--sp-6);
    z-index:9999; display:flex; flex-direction:column; gap:var(--sp-3);
}
.toast {
    display:flex; align-items:flex-start; gap:var(--sp-3);
    padding:calc(var(--sp-4) + 1px) var(--sp-5) var(--sp-4);
    background:var(--n-0); border-radius:var(--r-lg);
    box-shadow:var(--sh-xl); border:1px solid var(--n-200);
    min-width:340px; max-width:420px;
    animation:slideIn 0.3s var(--ease);
    position:relative; overflow:hidden;
}
.toast::before {
    content:''; position:absolute; left:0; top:0; bottom:0;
    width:4px;
}
.toast-success::before { background:var(--success-500); }
.toast-danger::before  { background:var(--danger-500); }
.toast-warning::before { background:var(--warning-500); }
.toast-info::before    { background:var(--brand-500); }

.toast-icon { font-size:18px; flex-shrink:0; margin-top:1px; }
.toast-success .toast-icon { color:var(--success-500); }
.toast-danger .toast-icon  { color:var(--danger-500); }
.toast-warning .toast-icon { color:var(--warning-500); }
.toast-info .toast-icon    { color:var(--brand-500); }

.toast-body { flex:1; }
.toast-title { font-size:var(--text-base); font-weight:600; color:var(--n-800); }
.toast-text { font-size:var(--text-sm); color:var(--n-500); margin-top:2px; }
.toast-close { cursor:pointer; color:var(--n-400); font-size:14px; transition:color var(--dur-fast); }
.toast-close:hover { color:var(--n-700); }

@keyframes slideIn { from { transform:translateX(100%); opacity:0; } to { transform:translateX(0); opacity:1; } }
@keyframes slideOut { from { transform:translateX(0); opacity:1; } to { transform:translateX(100%); opacity:0; } }
.toast.hiding { animation:slideOut 0.3s var(--ease) forwards; }

/* ═══════════════════════════════════════════════
   MODAL / DIALOG
   ═══════════════════════════════════════════════ */
.modal-overlay {
    position:fixed; inset:0; background:var(--overlay-bg);
    backdrop-filter:blur(4px); z-index:5000;
    display:none; align-items:center; justify-content:center;
    padding:var(--sp-6); opacity:0; transition:opacity var(--dur);
}
.modal-overlay.show { display:flex; opacity:1; }

.modal {
    background:var(--n-0); border-radius:var(--r-2xl);
    box-shadow:var(--sh-xl); width:100%; max-width:520px;
    max-height:90vh; overflow:hidden; display:flex; flex-direction:column;
    transform:translateY(20px) scale(0.97);
    transition:transform var(--dur) var(--ease);
}
.modal-overlay.show .modal { transform:translateY(0) scale(1); }

.modal-header {
    display:flex; align-items:center; justify-content:space-between;
    padding:var(--sp-5) var(--sp-6); border-bottom:1px solid var(--n-200);
}
.modal-title { font-size:var(--text-xl); font-weight:700; color:var(--n-900); }
.modal-close {
    width:36px; height:36px; display:flex; align-items:center; justify-content:center;
    border-radius:var(--r-md); color:var(--n-400); font-size:18px;
    transition:all var(--dur-fast); cursor:pointer;
}
.modal-close:hover { background:var(--n-100); color:var(--n-700); }

.modal-body { padding:var(--sp-6); overflow-y:auto; flex:1; }
.modal-footer {
    display:flex; align-items:center; justify-content:flex-end; gap:var(--sp-3);
    padding:var(--sp-4) var(--sp-6); border-top:1px solid var(--n-200);
}

/* ═══════════════════════════════════════════════
   ACCORDION
   ═══════════════════════════════════════════════ */
.accordion { border:1px solid var(--n-200); border-radius:var(--r-xl); overflow:hidden; }
.accordion-item { border-bottom:1px solid var(--n-200); }
.accordion-item:last-child { border-bottom:none; }
.accordion-trigger {
    width:100%; display:flex; align-items:center; justify-content:space-between;
    padding:calc(var(--sp-4) + 1px) var(--sp-5) var(--sp-4); font-size:var(--text-base); font-weight:500;
    color:var(--n-800); background:var(--n-0); cursor:pointer;
    transition:background var(--dur-fast); text-align:left;
}
.accordion-trigger:hover { background:var(--n-50); }
.accordion-trigger i { color:var(--n-400); font-size:12px; transition:transform var(--dur-fast); }
.accordion-item.open .accordion-trigger i { transform:rotate(180deg); }
.accordion-panel {
    max-height:0; overflow:hidden; transition:max-height var(--dur) var(--ease);
}
.accordion-item.open .accordion-panel { max-height:500px; }
.accordion-panel-inner { padding:var(--sp-3) var(--sp-5); font-size:var(--text-sm); color:var(--n-600); line-height:1.7; }

/* ═══════════════════════════════════════════════
   DROPDOWN MENU
   ═══════════════════════════════════════════════ */
.dropdown { position:relative; display:inline-block; }
.dropdown-menu {
    position:absolute; top:calc(100% + 6px); left:0;
    background:var(--n-0); border:1px solid var(--n-200);
    border-radius:var(--r-lg); box-shadow:var(--sh-lg);
    min-width:200px; padding:var(--sp-1);
    z-index:500; display:none;
    animation:fadeDown 0.15s var(--ease);
}
.dropdown-menu.show { display:block; }
.dropdown-menu.right { left:auto; right:0; }

@keyframes fadeDown { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }

.dropdown-item {
    display:flex; align-items:center; gap:var(--sp-3);
    padding:9px var(--sp-3) 8px; border-radius:var(--r-sm);
    font-size:var(--text-sm); color:var(--n-700);
    cursor:pointer; transition:background var(--dur-fast);
}
.dropdown-item:hover { background:var(--n-50); }
.dropdown-item i { width:16px; text-align:center; color:var(--n-400); font-size:14px; }
.dropdown-item.danger { color:var(--danger-600); }
.dropdown-item.danger i { color:var(--danger-500); }
.dropdown-divider { height:1px; background:var(--n-100); margin:var(--sp-1) 0; }

/* ═══════════════════════════════════════════════
   TIMELINE
   ═══════════════════════════════════════════════ */
.timeline { position:relative; padding-left:28px; }
.timeline::before {
    content:''; position:absolute; left:11px; top:4px; bottom:4px;
    width:2px; background:var(--n-200);
}
.timeline-item { position:relative; padding-bottom:var(--sp-6); }
.timeline-item:last-child { padding-bottom:0; }
.timeline-dot {
    position:absolute; left:-28px; top:2px;
    width:22px; height:22px; border-radius:var(--r-full);
    border:2px solid var(--n-0); display:flex;
    align-items:center; justify-content:center;
    font-size:10px; color:var(--text-on-dark); z-index:1;
}
.timeline-dot.blue { background:var(--brand-500); }
.timeline-dot.green { background:var(--success-500); }
.timeline-dot.red { background:var(--danger-500); }
.timeline-dot.amber { background:var(--warning-500); }
.timeline-dot.gray { background:var(--n-400); }

.timeline-time { font-size:var(--text-xs); color:var(--n-400); margin-bottom:2px; }
.timeline-title { font-size:var(--text-base); font-weight:500; color:var(--n-800); }
.timeline-desc { font-size:var(--text-sm); color:var(--n-500); margin-top:2px; }

/* ═══════════════════════════════════════════════
   STEPPER
   ═══════════════════════════════════════════════ */
.stepper { display:flex; align-items:flex-start; gap:0; }
.step { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; }
.step-circle {
    width:36px; height:36px; border-radius:var(--r-full);
    display:flex; align-items:center; justify-content:center;
    padding-top:1px;
    font-size:var(--text-sm); font-weight:600;
    border:2px solid var(--n-300); color:var(--n-400);
    background:var(--n-0); z-index:1; transition:all var(--dur-fast);
}
.step.active .step-circle { border-color:var(--brand-600); color:var(--brand-600); background:var(--brand-50); }
.step.completed .step-circle { border-color:var(--success-500); background:var(--success-500); color:var(--text-on-brand); }
.step-label { margin-top:var(--sp-2); font-size:var(--text-xs); color:var(--n-400); font-weight:500; text-align:center; }
.step.active .step-label { color:var(--brand-600); }
.step.completed .step-label { color:var(--success-600); }

.step-line {
    position:absolute; top:18px; left:calc(50% + 18px); right:calc(-50% + 18px);
    height:2px; background:var(--n-200);
}
.step:last-child .step-line { display:none; }
.step.completed .step-line { background:var(--success-500); }

/* ═══════════════════════════════════════════════
   SKELETON / LOADING
   ═══════════════════════════════════════════════ */
.skeleton {
    background:linear-gradient(90deg, var(--n-100) 25%, var(--n-200) 50%, var(--n-100) 75%);
    background-size:200% 100%;
    animation:shimmer 1.5s infinite;
    border-radius:var(--r-md);
}
@keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.skeleton-text { height:14px; margin-bottom:var(--sp-2); border-radius:var(--r-xs); }
.skeleton-text.w-75 { width:75%; }
.skeleton-text.w-50 { width:50%; }
.skeleton-text.w-100 { width:100%; }
.skeleton-circle { border-radius:var(--r-full); }
.skeleton-rect { border-radius:var(--r-md); }

/* ═══════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════ */
.empty-state {
    text-align:center; padding:var(--sp-12) var(--sp-6);
}
.empty-state-icon {
    width:80px; height:80px; margin:0 auto var(--sp-5);
    background:var(--n-100); border-radius:var(--r-full);
    display:flex; align-items:center; justify-content:center;
    font-size:32px; color:var(--n-300);
}
.empty-state-title { font-size:var(--text-xl); font-weight:600; color:var(--n-700); margin-bottom:var(--sp-2); }
.empty-state-text { font-size:var(--text-base); color:var(--n-400); max-width:360px; margin:0 auto var(--sp-5); }

/* ═══════════════════════════════════════════════
   TAGS / CHIPS
   ═══════════════════════════════════════════════ */
.tag {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px 4px; font-size:var(--text-xs); font-weight:500;
    border-radius:var(--r-full); background:var(--n-100); color:var(--n-600);
    border:1px solid var(--n-200);
}
.tag-remove { cursor:pointer; font-size:10px; opacity:0.5; transition:opacity var(--dur-fast); }
.tag-remove:hover { opacity:1; }
.tag-blue { background:var(--brand-100); color:var(--brand-700); border-color:var(--brand-200); }
.tag-green { background:var(--success-100); color:var(--success-700); border-color:var(--success-200); }
.tag-red { background:var(--danger-100); color:var(--danger-700); border-color:var(--danger-200); }

/* ═══════════════════════════════════════════════
   TOOLTIP
   ═══════════════════════════════════════════════ */
.tooltip-wrap { position:relative; display:inline-block; }
.tooltip-wrap .tooltip {
    position:absolute; bottom:calc(100% + 8px); left:50%;
    transform:translateX(-50%); padding:6px 12px;
    background:var(--n-800); color:var(--text-on-dark); font-size:var(--text-xs);
    border-radius:var(--r-sm); white-space:nowrap;
    opacity:0; pointer-events:none; transition:opacity var(--dur-fast);
}
.tooltip-wrap .tooltip::after {
    content:''; position:absolute; top:100%; left:50%;
    transform:translateX(-50%); border:5px solid transparent;
    border-top-color:var(--n-800);
}
.tooltip-wrap:hover .tooltip { opacity:1; }

/* ═══════════════════════════════════════════════
   CHART AREA
   ═══════════════════════════════════════════════ */
.chart-area { width:100%; min-height:200px; display:flex; align-items:center; justify-content:center; }

/* ═══════════════════════════════════════════════
   SECTION / COMPONENT SHOWCASE
   ═══════════════════════════════════════════════ */
.section-divider { border:none; border-top:1px solid var(--n-200); margin:var(--sp-10) 0; }

.comp-section { margin-bottom:var(--sp-10); }
.comp-section-title {
    font-size:var(--text-xl); font-weight:700; color:var(--n-900);
    margin-bottom:var(--sp-5); padding-bottom:var(--sp-3);
    border-bottom:2px solid var(--n-200);
    display:flex; align-items:center; gap:var(--sp-3);
}
.comp-section-title i { color:var(--brand-500); font-size:var(--text-lg); }
.comp-group { margin-bottom:var(--sp-6); }
.comp-label {
    font-size:var(--text-xs); font-weight:600; text-transform:uppercase;
    letter-spacing:0.8px; color:var(--n-400); margin-bottom:var(--sp-3);
}
.comp-row { display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center; }
.comp-row.gap-lg { gap:var(--sp-4); }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); }
.form-grid-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-6); }

/* ═══════════════════════════════════════════════
   SCROLLBAR
   ═══════════════════════════════════════════════ */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--n-300); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background:var(--n-400); }

/* ═══════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════ */
.text-brand { color:var(--brand-600); }
.text-success { color:var(--success-600); }
.text-warning { color:var(--warning-600); }
.text-danger { color:var(--danger-600); }
.text-muted { color:var(--n-500); }
.fw-300 { font-weight:300; }
.fw-400 { font-weight:400; }
.fw-500 { font-weight:500; }
.fw-700 { font-weight:700; }
.d-flex { display:flex; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex-wrap { flex-wrap:wrap; }
.gap-1 { gap:var(--sp-1); } .gap-2 { gap:var(--sp-2); } .gap-3 { gap:var(--sp-3); }
.gap-4 { gap:var(--sp-4); } .gap-6 { gap:var(--sp-6); }
.mt-2 { margin-top:var(--sp-2); } .mt-4 { margin-top:var(--sp-4); } .mt-6 { margin-top:var(--sp-6); }
.mb-2 { margin-bottom:var(--sp-2); } .mb-4 { margin-bottom:var(--sp-4); } .mb-6 { margin-bottom:var(--sp-6); }
.w-full { width:100%; }

/* ═══════════════════════════════════════════════
   DARK MODE THEME
   ═══════════════════════════════════════════════ */
[data-theme="dark"] {
    /* Neutrals — inverted */
    --n-0:   #0F172A;
    --n-25:  #131C30;
    --n-50:  #1A2540;
    --n-100: #1E293B;
    --n-200: #334155;
    --n-300: #475569;
    --n-400: #64748B;
    --n-500: #94A3B8;
    --n-600: #CBD5E1;
    --n-700: #E2E8F0;
    --n-800: #F1F5F9;
    --n-900: #F8FAFC;

    /* Surfaces */
    --bg:      #0B1120;
    --surface: #111827;
    --surface-raised: #1A2332;
    --surface-overlay: #1E293B;

    /* Text */
    --text-primary: #E2E8F0;
    --text-heading: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --text-on-brand: #FFFFFF;
    --text-on-dark: #FFFFFF;

    /* Brand — slightly desaturated for dark bg */
    --brand-50:  #172554;
    --brand-100: #1E3A5F;
    --brand-200: #1E40AF;
    --brand-300: #2563EB;
    --brand-400: #3B82F6;
    --brand-500: #60A5FA;
    --brand-600: #93C5FD;
    --brand-700: #BFDBFE;
    --brand-800: #DBEAFE;
    --brand-900: #EFF6FF;

    /* ADNOC Blue — darker sidebar */
    --adnoc-600: #0F3470;
    --adnoc-700: #0C2A5C;
    --adnoc-800: #091F48;

    /* Sidebar */
    --sidebar-bg: var(--adnoc-600);
    --sidebar-active: rgba(255,255,255,0.12);
    --sidebar-hover: rgba(255,255,255,0.08);
    --sidebar-text: rgba(255,255,255,0.55);
    --sidebar-text-hover: rgba(255,255,255,0.85);
    --sidebar-text-active: #FFFFFF;
    --sidebar-section-text: rgba(255,255,255,0.3);
    --sidebar-border: rgba(255,255,255,0.06);
    --sidebar-border-collapsed: rgba(255,255,255,0.08);
    --sidebar-user-avatar-bg: rgba(255,255,255,0.1);
    --sidebar-user-avatar-border: rgba(255,255,255,0.15);
    --sidebar-user-name: rgba(255,255,255,0.85);
    --sidebar-user-role: rgba(255,255,255,0.35);
    --sidebar-btn-bg: rgba(255,255,255,0.08);
    --sidebar-btn-hover: rgba(255,255,255,0.15);
    --sidebar-collapsed-active-bg: rgba(255,255,255,0.12);
    --sidebar-collapsed-active-shadow: 0 2px 8px rgba(0,0,0,0.3);

    /* Overlay */
    --overlay-bg: rgba(0,0,0,0.6);

    /* Semantic — muted tones for dark mode */
    --success-50:  #052e16; --success-100: #14532d; --success-200: #166534;
    --success-400: #4ADE80; --success-500: #22C55E; --success-600: #4ADE80;
    --success-700: #86EFAC; --success-800: #BBF7D0;

    --warning-50:  #422006; --warning-100: #713f12; --warning-200: #854d0e;
    --warning-400: #FBBF24; --warning-500: #F59E0B; --warning-600: #FBBF24;
    --warning-700: #FDE68A; --warning-800: #FEF3C7;

    --danger-50:   #450a0a; --danger-100: #7f1d1d; --danger-200: #991B1B;
    --danger-400:  #F87171; --danger-500:  #EF4444; --danger-600:  #F87171;
    --danger-700:  #FECACA; --danger-800:  #FEE2E2;

    --info-50:     #172554; --info-100: #1E3A5F; --info-500: #60A5FA; --info-600: #93C5FD;

    --violet-50:   #2e1065; --violet-100: #3b0764; --violet-200: #4c1d95;
    --violet-400:  #A78BFA; --violet-500: #8B5CF6; --violet-600: #A78BFA; --violet-700: #C4B5FD;

    --teal-50:     #042f2e; --teal-100: #134e4a; --teal-200: #115e59;
    --teal-400:    #2DD4BF; --teal-500: #14B8A6; --teal-600: #2DD4BF;

    --orange-50:   #431407; --orange-100: #7c2d12; --orange-200: #9a3412;
    --orange-500:  #F97316; --orange-600: #FB923C;

    --pink-50:     #500724; --pink-100: #831843; --pink-200: #9d174d;
    --pink-500:    #EC4899; --pink-600: #F472B6;

    --cyan-50:     #083344; --cyan-100: #164e63; --cyan-200: #155e75;
    --cyan-500:    #06B6D4; --cyan-600: #22D3EE;

    /* Sky */
    --sky-50: #0c4a6e; --sky-100: #075985; --sky-200: #0369A1; --sky-700: #7DD3FC;

    /* Indigo */
    --indigo-100: #312e81; --indigo-800: #C7D2FE;

    /* Emerald */
    --emerald-100: #064e3b; --emerald-200: #065f46; --emerald-700: #6EE7B7;

    /* Rose */
    --rose-100: #881337; --rose-200: #9f1239; --rose-700: #FDA4AF;

    /* Nav badge */
    --nav-badge-bg: rgba(239,68,68,0.85);

    /* Shadows — darker, more dramatic */
    --sh-xs:  0 1px 2px rgba(0,0,0,0.2);
    --sh-sm:  0 1px 3px rgba(0,0,0,0.25), 0 1px 2px rgba(0,0,0,0.2);
    --sh-md:  0 4px 6px -1px rgba(0,0,0,0.3), 0 2px 4px -2px rgba(0,0,0,0.2);
    --sh-lg:  0 10px 15px -3px rgba(0,0,0,0.35), 0 4px 6px -4px rgba(0,0,0,0.2);
    --sh-xl:  0 20px 25px -5px rgba(0,0,0,0.4), 0 8px 10px -6px rgba(0,0,0,0.2);
    --sh-glow: 0 0 0 3px rgba(96,165,250,0.2);
    --sh-danger-glow: 0 0 0 3px rgba(248,113,113,0.15);
    --sh-success-glow: 0 0 0 3px rgba(74,222,128,0.15);
    --sh-brand-hover: 0 4px 12px rgba(59,130,246,0.35);
    --sh-danger-hover: 0 4px 12px rgba(239,68,68,0.35);
    --sh-success-hover: 0 4px 12px rgba(34,197,94,0.35);

    /* Spinner */
    --spinner-track: rgba(255,255,255,0.2);
    --spinner-head: #FFFFFF;

    /* Scrollbar */
    color-scheme: dark;
}

/* Dark mode — component-level overrides */
[data-theme="dark"] .sidebar {
    border-right:1px solid rgba(255,255,255,0.06);
}

[data-theme="dark"] body.sidebar-collapsed .nav-link.active {
    color:var(--text-on-dark);
}

[data-theme="dark"] .header {
    background:var(--surface);
    border-bottom-color:var(--n-200);
}

[data-theme="dark"] .card {
    background:var(--surface);
    border-color:var(--n-200);
}

[data-theme="dark"] .kpi-card {
    background:var(--surface) !important;
    border-color:var(--n-200);
}

[data-theme="dark"] .kpi-card.blue { background:linear-gradient(135deg, rgba(59,130,246,0.08) 0%, var(--surface) 100%) !important; }
[data-theme="dark"] .kpi-card.green { background:linear-gradient(135deg, rgba(34,197,94,0.08) 0%, var(--surface) 100%) !important; }
[data-theme="dark"] .kpi-card.red { background:linear-gradient(135deg, rgba(239,68,68,0.08) 0%, var(--surface) 100%) !important; }
[data-theme="dark"] .kpi-card.amber { background:linear-gradient(135deg, rgba(245,158,11,0.08) 0%, var(--surface) 100%) !important; }

[data-theme="dark"] .table thead {
    background:var(--n-50);
}
[data-theme="dark"] .table tbody tr:hover {
    background:var(--n-50);
}

[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    background:var(--n-50);
    border-color:var(--n-200);
    color:var(--text-primary);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-select.placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color:var(--n-400);
}

[data-theme="dark"] .table-search input {
    background:var(--n-50);
    color:var(--text-primary);
}

[data-theme="dark"] .advance-filter-inner {
    background:var(--n-50);
}

[data-theme="dark"] .accordion-trigger {
    background:var(--surface);
    color:var(--text-primary);
}
[data-theme="dark"] .accordion-trigger:hover {
    background:var(--n-50);
}

[data-theme="dark"] .modal {
    background:var(--surface);
}

[data-theme="dark"] .toast {
    background:var(--surface);
    border-color:var(--n-200);
}

[data-theme="dark"] .dropdown-menu {
    background:var(--surface);
    border-color:var(--n-200);
}
[data-theme="dark"] .dropdown-item:hover {
    background:var(--n-50);
}

[data-theme="dark"] .header-dropdown-panel {
    background:var(--surface);
    border-color:var(--n-200);
}

[data-theme="dark"] .notif-item.unread {
    background:rgba(59,130,246,0.08);
}
[data-theme="dark"] .notif-item.unread:hover {
    background:rgba(59,130,246,0.12);
}

[data-theme="dark"] .file-upload {
    background:var(--n-50);
    border-color:var(--n-300);
}

[data-theme="dark"] .skeleton {
    background:linear-gradient(90deg, var(--n-200) 25%, var(--n-300) 50%, var(--n-200) 75%);
    background-size:200% 100%;
}

[data-theme="dark"] .tab-toggle {
    background:var(--n-200);
}

[data-theme="dark"] .header-org {
    background:var(--n-50);
    border-color:var(--n-200);
}
[data-theme="dark"] .header-org:hover {
    background:var(--n-100);
}

[data-theme="dark"] .header-avatar {
    border-color:var(--n-200);
}

[data-theme="dark"] .filter-tag {
    background:rgba(59,130,246,0.1);
    border-color:rgba(59,130,246,0.2);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background:var(--n-300);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background:var(--n-400);
}

/* Dark mode SVG donut colors */
[data-theme="dark"] .donut-chart circle {
    opacity:0.9;
}

/* Dark mode mobile bottom nav */
[data-theme="dark"] .mobile-bottom-nav {
    background:var(--surface);
    border-top-color:var(--n-200);
    box-shadow:0 -2px 12px rgba(0,0,0,0.2);
}

/* ═══════════════════════════════════════
   EXTENDED STYLES — Multi-Page Layout
   ═══════════════════════════════════════ */

/* Header Search */
.header-search {
    position: relative;
    width: 360px;
    max-width: 100%;
}
.header-search .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--n-400);
    font-size: 14px;
    pointer-events: none;
}
.header-search input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 40px;
    border: 1px solid var(--n-200);
    border-radius: var(--r-full);
    background: var(--n-50);
    font-family: var(--font);
    font-size: var(--text-sm);
    color: var(--text-primary);
    transition: all 0.2s ease;
}
.header-search input:focus {
    outline: none;
    border-color: var(--brand-400);
    box-shadow: var(--sh-glow);
    background: var(--surface);
}
.header-search input::placeholder {
    color: var(--n-400);
}

/* Workflow Stepper — Horizontal 6-step */
.workflow-stepper {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    padding: 20px 0;
    overflow-x: auto;
}
.workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    min-width: 100px;
    flex: 1;
}
.workflow-step .step-num {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--n-300);
    border: 3px solid var(--n-200);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}
.workflow-step.completed .step-num {
    background: var(--success-500);
    border-color: var(--success-400);
    color: #fff;
}
.workflow-step.active .step-num {
    background: var(--brand-600);
    border-color: var(--brand-400);
    color: #fff;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.15);
}
.workflow-step.pending .step-num {
    background: var(--n-100);
    border-color: var(--n-200);
    color: var(--n-400);
}
.workflow-step .step-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: 8px;
    text-align: center;
    white-space: nowrap;
}
.workflow-step .step-sublabel {
    font-size: 11px;
    color: var(--n-400);
    margin-top: 2px;
    text-align: center;
}
.workflow-step.completed .step-sublabel { color: var(--success-600); }
.workflow-step.active .step-sublabel { color: var(--brand-600); font-weight: 600; }

.workflow-step .step-connector {
    position: absolute;
    top: 20px;
    left: calc(50% + 24px);
    width: calc(100% - 48px);
    display: flex;
    align-items: center;
    z-index: 1;
}
.workflow-step .step-connector .connector-line {
    flex: 1;
    height: 3px;
    background: var(--n-200);
}
.workflow-step.completed .step-connector .connector-line {
    background: var(--success-400);
}
.workflow-step .step-connector .connector-arrow {
    color: var(--n-300);
    font-size: 14px;
    margin: 0 2px;
}
.workflow-step.completed .step-connector .connector-arrow {
    color: var(--success-400);
}

/* Comments & Logs Panel */
.comments-panel {
    background: var(--surface);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    padding: 0;
    height: fit-content;
    position: sticky;
    top: 20px;
}
.comments-panel-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--n-100);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-heading);
}
.comments-list {
    padding: 16px 20px;
    max-height: 480px;
    overflow-y: auto;
}
.comment-item {
    display: flex;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--n-100);
}
.comment-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.comment-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--teal-400), var(--teal-600));
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.comment-body { flex: 1; min-width: 0; }
.comment-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.comment-role {
    font-size: 11px;
    color: var(--brand-600);
}
.comment-time {
    font-size: 11px;
    color: var(--n-400);
    margin-bottom: 4px;
}
.comment-text {
    font-size: 13px;
    color: var(--n-600);
    line-height: 1.5;
}
.comment-input-area {
    padding: 16px 20px;
    border-top: 1px solid var(--n-100);
}
.comment-input-area textarea {
    width: 100%;
    border: 1px solid var(--n-200);
    border-radius: var(--r-md);
    padding: 10px 12px;
    font-family: var(--font);
    font-size: 13px;
    resize: vertical;
    min-height: 72px;
    color: var(--text-primary);
    background: var(--n-50);
    transition: border-color 0.2s;
}
.comment-input-area textarea:focus {
    outline: none;
    border-color: var(--brand-400);
    box-shadow: var(--sh-glow);
    background: var(--surface);
}
.comment-input-area textarea::placeholder { color: var(--n-400); }

/* Detail 3-column layout */
.detail-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 320px;
    gap: 20px;
    align-items: start;
}
.detail-layout-2col {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}
.detail-main-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
@media (max-width: 1200px) {
    .detail-layout { grid-template-columns: 1fr; }
    .detail-layout-2col { grid-template-columns: 1fr; }
}

/* Radio Toggle (Yes/No) */
.radio-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid var(--n-100);
}
.radio-toggle-label {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}
.radio-toggle-options {
    display: flex;
    gap: 20px;
    align-items: center;
}

/* Section Card — white card with title */
.section-card {
    background: var(--surface);
    border: 1px solid var(--n-200);
    border-radius: var(--r-xl);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--sh-xs);
}
.section-card-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--n-100);
    margin-bottom: 20px;
}

/* Tab badge */
.tab-item .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--r-full);
    background: var(--brand-100);
    color: var(--brand-700);
    font-size: 11px;
    font-weight: 700;
    margin-left: 6px;
}

/* Email Template Styles */
.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
.template-card {
    background: var(--surface);
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    padding: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.template-card:hover {
    border-color: var(--brand-400);
    box-shadow: var(--sh-md);
}
.template-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--r-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 12px;
}
.template-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.template-card-subject {
    font-size: 12px;
    color: var(--n-500);
    margin-bottom: 8px;
}
.template-card-meta {
    font-size: 11px;
    color: var(--n-400);
    display: flex;
    gap: 12px;
}
.email-preview-frame {
    border: 1px solid var(--n-200);
    border-radius: var(--r-lg);
    background: #fff;
    min-height: 400px;
    padding: 24px;
    overflow: auto;
}

/* Info Grid — label/value pairs */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 24px;
}
.info-grid-item {}
.info-grid-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--n-400);
    margin-bottom: 6px;
}
.info-grid-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

/* Conditional field section */
.conditional-fields {
    display: none;
    padding-top: 12px;
}
.conditional-fields.open {
    display: block;
}

/* Full-width section inside card */
.full-section {
    border-top: 1px solid var(--n-100);
    padding-top: 20px;
    margin-top: 20px;
}

/* Dark mode additions */
[data-theme="dark"] .header-search input {
    background: var(--n-100);
    border-color: var(--n-200);
    color: var(--text-primary);
}
[data-theme="dark"] .comments-panel {
    background: var(--surface);
    border-color: var(--n-200);
}
[data-theme="dark"] .section-card {
    background: var(--surface);
    border-color: var(--n-200);
}
[data-theme="dark"] .template-card {
    background: var(--surface);
    border-color: var(--n-200);
}
[data-theme="dark"] .comment-input-area textarea {
    background: var(--n-100);
    border-color: var(--n-200);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL SHARED COMPONENTS — Extracted from page-level styles
   ═══════════════════════════════════════════════════════════════ */

/* ── Data Table ── */
.data-table {
    width:100%;
    min-width:100%;
    border-collapse:collapse;
    font-size:var(--text-sm);
}
.data-table thead {
    background:var(--n-50);
    border-bottom:1px solid var(--n-200);
}
.data-table th {
    padding:var(--sp-3) var(--sp-3);
    text-align:left;
    font-weight:600;
    color:var(--n-500);
    font-size:var(--text-xs);
    text-transform:uppercase;
    letter-spacing:0.05em;
    white-space:nowrap;
}
.data-table td {
    padding:var(--sp-3) var(--sp-3);
    border-bottom:1px solid var(--n-100);
    color:var(--n-700);
    vertical-align:middle;
}
.data-table tbody tr:hover {
    background:var(--n-25);
}
.data-table .td-summary {
    max-width:260px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.table-link {
    color:var(--brand-600);
    font-weight:600;
    text-decoration:none;
    white-space:nowrap;
}
.table-link:hover {
    color:var(--brand-700);
    text-decoration:underline;
}

/* ── Table Actions & Dropdowns ── */
.table-actions {
    display:flex;
    align-items:center;
    gap:4px;
    position:relative;
}
.table-action-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:30px;
    height:30px;
    border-radius:var(--r-md);
    border:none;
    background:none;
    color:var(--n-400);
    cursor:pointer;
    font-size:14px;
    text-decoration:none;
    transition:all var(--dur-fast);
}
.table-action-btn:hover {
    background:var(--n-100);
    color:var(--n-700);
}
.table-action-dropdown {
    position:static;
}
.table-action-dropdown-menu {
    display:none;
    position:absolute;
    right:var(--sp-3);
    margin-top:2px;
    min-width:160px;
    background:#fff;
    border:1px solid var(--n-200);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);
    padding:var(--sp-1) 0;
    z-index:999;
}
.table-action-dropdown-menu.show {
    display:block;
}
.table-action-dropdown-item {
    display:flex;
    align-items:center;
    gap:var(--sp-2);
    padding:var(--sp-2) var(--sp-3);
    font-size:var(--text-sm);
    color:var(--n-600);
    text-decoration:none;
    transition:background var(--dur-fast);
}
.table-action-dropdown-item:hover {
    background:var(--n-50);
}
.table-action-dropdown-item.danger {
    color:var(--danger-500);
}
.table-action-dropdown-item.danger:hover {
    background:rgba(244,63,94,0.05);
}

/* ── Inline Icon Button (edit-in-place trigger) ── */
.btn-icon-inline {
    display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border:none; background:none;
    color:var(--n-400); cursor:pointer; font-size:13px;
    border-radius:var(--r-md); transition:all var(--dur-fast);
    flex-shrink:0; vertical-align:middle;
}
.btn-icon-inline:hover { background:var(--n-100); color:var(--brand-500); }
/* Editable name input (for evidence & title inline editing) */
.editable-name-input {
    border:1px solid var(--brand-400); border-radius:var(--r-md);
    padding:2px 8px; font-size:inherit; font-weight:inherit;
    color:var(--n-800); background:#fff; outline:none;
    box-shadow:0 0 0 3px rgba(0,133,66,.12);
    min-width:120px;
}

/* ── SLA Badges ── */
.sla-badge {
    display:inline-flex;
    align-items:center;
    padding:3px 10px;
    border-radius:var(--r-full);
    font-size:var(--text-xs);
    font-weight:600;
    white-space:nowrap;
}
.sla-healthy {
    background:rgba(34,197,94,0.1);
    color:#16a34a;
}
.sla-warning-50 {
    background:rgba(245,158,11,0.1);
    color:#d97706;
}
.sla-warning-80 {
    background:rgba(245,158,11,0.15);
    color:#b45309;
}
.sla-breached {
    background:rgba(244,63,94,0.1);
    color:#dc2626;
}

/* ── Pagination ── */
.pagination-info {
    font-size:var(--text-sm);
    color:var(--n-500);
}
.pagination {
    display:flex;
    align-items:center;
    gap:4px;
}
.pagination-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:32px;
    height:32px;
    padding:0 8px;
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    background:#fff;
    color:var(--n-600);
    font-size:var(--text-sm);
    font-weight:500;
    cursor:pointer;
    transition:all var(--dur-fast);
}
.pagination-btn:hover:not(:disabled):not(.active) {
    background:var(--n-50);
    border-color:var(--n-300);
}
.pagination-btn.active {
    background:var(--brand-600);
    color:#fff;
    border-color:var(--brand-600);
}
.pagination-btn:disabled {
    opacity:0.4;
    cursor:not-allowed;
}
.pagination-dots {
    padding:0 4px;
    color:var(--n-400);
    font-size:var(--text-sm);
}
.card-footer {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--sp-3) var(--sp-4);
    border-top:1px solid var(--n-100);
    flex-wrap:wrap;
    gap:var(--sp-3);
}

/* ── Filter Bar Components ── */
.incidents-filter-bar,
.emp-filter-bar {
    display:flex;
    flex-direction:column;
    gap:var(--sp-3);
}
.filter-search-wrap {
    position:relative;
    flex:1;
    min-width:0;
}
.filter-search-icon {
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:var(--n-400);
    font-size:14px;
    pointer-events:none;
}
.filter-search-wrap .form-input {
    padding-left:36px;
    width:100%;
}
.filter-selects {
    display:flex;
    flex-wrap:nowrap;
    gap:var(--sp-2);
    align-items:center;
}
.filter-selects .filter-select {
    flex:1;
    min-width:0;
}
.filter-selects .btn {
    white-space:nowrap;
    flex:1;
    min-width:0;
}
.filter-selects .btn.active {
    background:var(--brand-50);
    color:var(--brand-600);
    border-color:var(--brand-200);
}

/* ── Advanced Filters ── */
.advanced-filters {
    margin-top:var(--sp-4);
    padding-top:var(--sp-4);
    border-top:1px solid var(--n-100);
}
.advanced-filters-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:var(--sp-3);
}

/* ── Active Filter Tags ── */
.active-filters {
    display:flex;
    align-items:center;
    gap:var(--sp-2);
    margin-top:var(--sp-3);
    padding-top:var(--sp-3);
    border-top:1px solid var(--n-100);
    flex-wrap:wrap;
}
.active-filters-list {
    display:flex;
    flex-wrap:wrap;
    gap:var(--sp-2);
    flex:1;
}
.filter-tag {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    background:var(--brand-50);
    color:var(--brand-700);
    border:1px solid var(--brand-200);
    border-radius:var(--r-full);
    font-size:var(--text-xs);
    font-weight:500;
    white-space:nowrap;
}
.filter-tag-remove {
    background:none;
    border:none;
    padding:0;
    cursor:pointer;
    color:var(--brand-400);
    font-size:11px;
    display:flex;
    align-items:center;
}
.filter-tag-remove:hover {
    color:var(--danger-500);
}

/* ── Bulk Actions Bar ── */
.bulk-actions-bar {
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);
    background:var(--brand-50);
    border:1px solid var(--brand-200);
    border-radius:var(--r-lg);
    margin-bottom:var(--sp-4);
}
.bulk-count {
    font-size:var(--text-sm);
    font-weight:600;
    color:var(--brand-700);
}

/* ── Flush Card Pattern ── */
/* Flush card stacking — only when a #filterCard is present (list pages) */
#filterCard { margin-bottom:0; }
#filterCard + .bulk-actions-bar,
#filterCard + .card,
#filterCard + .bulk-actions-bar + .card {
    margin-top:-1px; margin-bottom:0;
}
.tab-content > .card + .card {
    margin-top:-1px;
}
/* Filter card flush — first card loses bottom radius, next card loses top radius */
#filterCard {
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-bottom:none;
}
.tab-content > .card:first-child {
    border-bottom-left-radius:0;
    border-bottom-right-radius:0;
    border-bottom:none;
}
#filterCard ~ .card,
.tab-content > .card:first-child ~ .card {
    border-top-left-radius:0;
    border-top-right-radius:0;
}

/* ── Modal Form Grid ── */
.modal-form-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-4);
}
.required {
    color:var(--danger-500);
    font-weight:600;
}

/* ── Breadcrumb ── */
.breadcrumb {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:var(--text-sm);
    flex-wrap:wrap;
}
.breadcrumb-item {
    color:var(--n-500);
    text-decoration:none;
    transition:color var(--dur-fast);
}
.breadcrumb-item a {
    color:var(--n-500);
    text-decoration:none;
}
.breadcrumb-item a:hover {
    color:var(--brand-500);
}
.breadcrumb-item:hover:not(.current) {
    color:var(--brand-500);
}
.breadcrumb-item.current {
    color:var(--n-700);
    font-weight:500;
}
.breadcrumb-sep {
    color:var(--n-300);
    font-size:10px;
}

/* ── Form Validation Error State ── */
.is-error .form-input,
.is-error .form-select {
    border-color:var(--danger-500) !important;
    box-shadow:0 0 0 3px rgba(244,63,94,0.1);
}
.is-error .form-label {
    color:var(--danger-600);
}
.error-hint {
    color:var(--danger-500) !important;
    font-size:var(--text-xs);
    margin-top:4px;
}

/* ── Upload Zone ── */
.ci-upload-zone {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:var(--sp-6) var(--sp-4);
    border:2px dashed var(--n-200);
    border-radius:var(--r-lg);
    background:var(--n-25);
    cursor:pointer;
    transition:all var(--dur-fast);
    text-align:center;
}
.ci-upload-zone:hover,
.ci-upload-zone.dragover {
    border-color:var(--brand-400);
    background:rgba(0,119,182,0.04);
}
.ci-upload-icon {
    font-size:32px;
    color:var(--brand-400);
    margin-bottom:var(--sp-2);
}
.ci-upload-title {
    font-size:var(--text-sm);
    font-weight:600;
    color:var(--n-600);
    margin-bottom:4px;
}
.ci-upload-hint {
    font-size:var(--text-xs);
    color:var(--n-400);
}

/* ── Uploaded File Cards ── */
.ci-uploaded-list {
    display:flex;
    flex-direction:column;
    gap:var(--sp-2);
    margin-top:var(--sp-3);
}
.ci-file-card {
    display:flex;
    align-items:center;
    gap:var(--sp-3);
    padding:var(--sp-3);
    border:1px solid var(--n-100);
    border-radius:var(--r-md);
    background:#fff;
    transition:background var(--dur-fast);
}
.ci-file-card:hover {
    background:var(--n-25);
}
.ci-file-card-icon {
    width:36px;
    height:36px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:var(--r-md);
    background:var(--brand-50, rgba(0,119,182,0.08));
    color:var(--brand-500);
    font-size:16px;
    flex-shrink:0;
}
.ci-file-card-info {
    flex:1;
    min-width:0;
}
.ci-file-card-name {
    font-size:var(--text-sm);
    font-weight:500;
    color:var(--n-700);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.ci-file-card-size {
    font-size:var(--text-xs);
    color:var(--n-400);
}
.ci-file-card-remove {
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:none;
    background:none;
    color:var(--n-400);
    cursor:pointer;
    border-radius:var(--r-sm);
    transition:all var(--dur-fast);
    flex-shrink:0;
}
.ci-file-card-remove:hover {
    background:rgba(244,63,94,0.08);
    color:var(--danger-500);
}

/* ── Map Placeholder ── */
.ci-map-placeholder {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:var(--sp-6) var(--sp-4);
    background:linear-gradient(135deg, var(--n-25), var(--n-50));
    border-radius:var(--r-lg);
    border:1px dashed var(--n-200);
    text-align:center;
    min-height:180px;
}
.ci-map-placeholder i {
    font-size:36px;
    color:var(--brand-400);
    margin-bottom:var(--sp-3);
}
.ci-map-text {
    font-size:var(--text-base);
    font-weight:600;
    color:var(--n-600);
}
.ci-map-sub {
    font-size:var(--text-xs);
    color:var(--n-400);
    margin-top:4px;
}

/* ── Checkbox Group ── */
.ci-checkbox-group {
    display:flex;
    flex-direction:column;
    gap:var(--sp-2);
}
.ci-checkbox-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
    gap:var(--sp-2);
}

/* ── Radio Group (horizontal) ── */
.ci-radio-group {
    display:flex;
    align-items:center;
    gap:var(--sp-5);
    flex-wrap:wrap;
}

/* ── Segmented Toggle (tab-toggle style) ── */
.ci-segmented-toggle {
    display:flex;
    background:var(--n-50);
    border:1px solid var(--n-200);
    border-radius:var(--r-md);
    overflow:hidden;
}
.ci-seg-option {
    flex:1;
    cursor:pointer;
    margin:0;
    position:relative;
}
.ci-seg-option input[type="radio"] {
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.ci-seg-option span {
    display:block;
    text-align:center;
    padding:9px 12px;
    font-size:var(--text-sm);
    font-weight:500;
    color:var(--n-500);
    transition:all var(--dur-fast);
    border-right:1px solid var(--n-200);
    white-space:nowrap;
}
.ci-seg-option:last-child span {
    border-right:none;
}
.ci-seg-option span i {
    margin-right:5px;
    font-size:11px;
}

/* Segmented toggle — color variants (default / selected / hover) */
.ci-seg-option.seg-success span { background:rgba(22,163,74,0.08); color:#15803d; }
.ci-seg-option.seg-warning span { background:rgba(245,158,11,0.08); color:#b45309; }
.ci-seg-option.seg-danger span  { background:rgba(220,38,38,0.07); color:#dc2626; }
.ci-seg-option.seg-info span    { background:rgba(26,83,164,0.06); color:#1a53a4; }

.ci-seg-option input:checked + span { font-weight:600; box-shadow:0 2px 6px rgba(0,0,0,0.15); color:#fff; }
.ci-seg-option.seg-success input:checked + span { background:#116b30; }
.ci-seg-option.seg-warning input:checked + span { background:#a16207; }
.ci-seg-option.seg-danger input:checked + span  { background:#b91c1c; }
.ci-seg-option.seg-info input:checked + span    { background:#143f7a; }

.ci-seg-option.seg-success:hover span { background:rgba(22,163,74,0.15); }
.ci-seg-option.seg-warning:hover span { background:rgba(245,158,11,0.15); }
.ci-seg-option.seg-danger:hover span  { background:rgba(220,38,38,0.14); }
.ci-seg-option.seg-info:hover span    { background:rgba(26,83,164,0.12); }
.ci-seg-option input:checked:hover + span { opacity:0.92; }

/* ── Uniform Textarea ── */
.ci-textarea {
    min-height:100px;
    padding-top:12px !important;
    padding-bottom:12px !important;
    resize:vertical;
    line-height:1.6;
}
textarea.form-input,
textarea.form-textarea,
.id-textarea {
    min-height:100px;
    padding:12px 14px !important;
    line-height:1.65;
    resize:vertical;
    font-size:var(--text-sm);
}
textarea.form-input::placeholder,
textarea.form-textarea::placeholder {
    color:var(--n-400);
    padding-top:0;
}
.modal textarea.form-textarea,
.modal textarea.form-input {
    min-height:90px;
}

/* ── Form Actions ── */
.ci-form-actions {
    display:flex;
    justify-content:flex-end;
    gap:var(--sp-3);
    margin-top:var(--sp-5);
    padding:var(--sp-4) 0;
    flex-wrap:wrap;
}

/* ── Success Modal ── */
.ci-modal-success-border {
    height:4px;
    background:var(--success-500, #22C55E);
    border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.ci-success-icon {
    width:64px;
    height:64px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(34,197,94,0.1);
    margin:0 auto;
}
.ci-success-icon i {
    font-size:32px;
    color:var(--success-500, #22C55E);
}
.ci-tracking-number-display {
    display:inline-flex;
    flex-direction:column;
    align-items:center;
    padding:var(--sp-3) var(--sp-5);
    background:var(--n-25);
    border:1px solid var(--n-100);
    border-radius:var(--r-lg);
    margin-bottom:var(--sp-4);
}
.ci-tracking-label {
    font-size:var(--text-xs);
    color:var(--n-400);
    text-transform:uppercase;
    letter-spacing:0.5px;
    margin-bottom:4px;
}
.ci-tracking-value {
    font-size:var(--text-xl, 20px);
    font-weight:700;
    color:var(--brand-600, #005f8c);
    font-family:monospace;
    letter-spacing:1px;
}
.ci-modal-info-grid {
    display:flex;
    gap:var(--sp-4);
    justify-content:center;
    margin-bottom:var(--sp-4);
    flex-wrap:wrap;
}
.ci-modal-info-item {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
}
.ci-modal-info-label {
    font-size:var(--text-xs);
    color:var(--n-400);
}
.ci-modal-info-value {
    font-size:var(--text-sm);
    font-weight:600;
    color:var(--n-700);
}
.ci-workflow-section {
    text-align:left;
    background:var(--n-25);
    border-radius:var(--r-md);
    padding:var(--sp-4);
    margin-bottom:var(--sp-4);
}
.ci-workflow-list {
    margin:0;
    padding-left:var(--sp-4);
    list-style:disc;
}
.ci-workflow-list li {
    font-size:var(--text-xs);
    color:var(--n-500);
    margin-bottom:6px;
    line-height:1.5;
}
.ci-workflow-list li:last-child {
    margin-bottom:0;
}
.ci-notifications-sent {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    font-size:var(--text-xs);
    color:var(--success-600, #16a34a);
    padding:var(--sp-2) var(--sp-3);
    background:rgba(34,197,94,0.06);
    border-radius:var(--r-md);
}
.ci-notifications-sent i {
    font-size:16px;
}

/* ── Incident Detail — Header & Timeline ── */
.id-flush-card { margin-bottom:0; border-radius:0; border-bottom:none; }
.id-flush-card:first-child { border-top-left-radius:var(--r-xl); border-top-right-radius:var(--r-xl); }
.id-flush-card:last-child { border-bottom-left-radius:var(--r-xl); border-bottom-right-radius:var(--r-xl); border-bottom:1px solid var(--n-200); }

#tabDetails .card { margin-bottom:0; border-radius:0; border-bottom:none; }
#tabDetails .grid.cols-2 > div > .card:first-child { border-top-left-radius:var(--r-xl); border-top-right-radius:var(--r-xl); }
#tabDetails .grid.cols-2 > div > .card:last-child { border-bottom-left-radius:var(--r-xl); border-bottom-right-radius:var(--r-xl); border-bottom:1px solid var(--n-200); }

.id-header-card { margin-bottom:0; border-bottom-left-radius:0; border-bottom-right-radius:0; border-bottom:none; }
.id-timeline-card { border-top-left-radius:0; border-top-right-radius:0; margin-bottom:var(--sp-4); }
.id-top-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.id-top-left { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.id-tracking { font-size:var(--text-lg); font-weight:700; color:var(--n-800); }
.id-top-right { display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; }
.id-title { font-size:var(--text-2xl); font-weight:700; color:var(--n-900); margin-bottom:var(--sp-1); }
.id-meta { font-size:var(--text-sm); color:var(--n-500); }
.id-meta strong { color:var(--n-700); }

/* ── Workflow Timeline (horizontal steps) ── */
.id-workflow-timeline { display:flex; align-items:center; overflow-x:auto; gap:0; padding:var(--sp-2) 0; }
.wf-step { display:flex; align-items:center; gap:var(--sp-2); flex-shrink:0; }
.wf-num {
    width:36px; height:36px; border-radius:var(--r-full);
    display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; flex-shrink:0;
    border:2px solid var(--n-300); color:var(--n-400); background:var(--n-0);
}
.wf-info { display:flex; flex-direction:column; }
.wf-label { font-size:var(--text-xs); color:var(--n-500); font-weight:500; white-space:nowrap; }
.wf-status { font-size:var(--text-xs); color:var(--n-400); white-space:nowrap; }
.wf-arrow { color:var(--n-300); font-size:12px; margin:0 var(--sp-3); flex-shrink:0; }
.wf-step.completed .wf-num { background:var(--success-600); color:#fff; border-color:var(--success-600); }
.wf-step.completed .wf-label { color:var(--success-700); }
.wf-step.completed .wf-status { color:var(--success-600); }
.wf-step.completed .wf-arrow { color:var(--success-400); }
.wf-step.active .wf-num { background:var(--adnoc-600); color:#fff; border-color:var(--adnoc-600); box-shadow:0 0 0 4px rgba(26,83,164,0.15); }
.wf-step.active .wf-label { color:var(--adnoc-600); font-weight:600; }
.wf-step.active .wf-status { color:var(--brand-500); }

/* ── Detail Grid ── */
.detail-grid { display:flex; flex-direction:column; gap:var(--sp-3); }
.detail-row { display:flex; justify-content:space-between; align-items:center; padding:var(--sp-2) 0; border-bottom:1px solid var(--n-100); gap:var(--sp-3); }
.detail-row:last-child { border-bottom:none; }
.detail-label { font-size:var(--text-sm); color:var(--n-500); flex-shrink:0; }
.detail-value { font-size:var(--text-sm); color:var(--n-800); font-weight:500; text-align:right; }

/* ── Assignment List ── */
.assignment-list { display:flex; flex-direction:column; gap:var(--sp-4); }
.assignment-row { display:flex; flex-direction:column; gap:var(--sp-2); }
.assignment-user { display:flex; align-items:center; gap:var(--sp-2); }
.assignment-avatar { width:32px; height:32px; border-radius:var(--r-full); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600; flex-shrink:0; }

/* ── Tags ── */
.tag { display:inline-flex; align-items:center; gap:var(--sp-1); padding:4px 10px; font-size:var(--text-xs); font-weight:500; color:var(--n-600); background:var(--n-100); border:1px solid var(--n-200); border-radius:var(--r-full); }
.tag-remove { background:none; border:none; cursor:pointer; color:var(--n-400); font-size:10px; padding:0; display:flex; align-items:center; }
.tag-remove:hover { color:var(--danger-500); }

/* ── Yes/No Radio Toggle Sections ── */
.id-toggle-section { padding:var(--sp-4) 0; border-bottom:1px solid var(--n-100); }
.id-toggle-section:last-child { border-bottom:none; }
.id-toggle-row { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); }
.id-toggle-label { font-size:var(--text-sm); color:var(--n-700); font-weight:500; }
.id-yn-group { display:flex; align-items:center; gap:var(--sp-4); }
.id-toggle-details { margin-top:var(--sp-4); }

/* ── Party Entry Cards ── */
.id-party-entries { display:flex; flex-direction:column; gap:var(--sp-4); }
.id-party-entry { border:1px solid var(--n-100); border-radius:var(--r-lg); padding:var(--sp-4); background:var(--n-25); }
.id-party-entry-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-3); padding-bottom:var(--sp-2); border-bottom:1px solid var(--n-100); }
.id-party-entry-num { font-size:var(--text-sm); font-weight:600; color:var(--n-700); }
.id-add-entry-btn { margin-top:var(--sp-3); }

/* ── Mini Upload Zone ── */
.id-mini-upload {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:var(--sp-4); border:2px dashed var(--n-200); border-radius:var(--r-lg);
    background:var(--n-0); cursor:pointer; text-align:center; transition:all var(--dur-fast);
    min-height:100px;
}
.id-mini-upload:hover { border-color:var(--brand-400); background:rgba(0,119,182,0.03); }
.id-mini-upload i { font-size:24px; color:var(--brand-400); margin-bottom:var(--sp-1); }
.id-mini-upload span { font-size:var(--text-sm); font-weight:500; color:var(--brand-500); }
.id-mini-upload-hint { font-size:var(--text-xs); color:var(--n-400); margin-top:2px; }

/* ── Comments & Logs ── */
.grid.cols-3-comments {
    display:grid;
    grid-template-columns:2fr 1fr;
    gap:var(--sp-4);
    align-items:start;
}
.id-comments-list { display:flex; flex-direction:column; gap:0; }
.id-comment { display:flex; gap:var(--sp-3); padding:var(--sp-4) 0; border-bottom:1px solid var(--n-100); }
.id-comment:last-child { border-bottom:none; }
.id-comment-avatar {
    width:36px; height:36px; border-radius:var(--r-full);
    background:var(--n-200); color:var(--n-500);
    display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:600; flex-shrink:0;
}
.id-comment-body { flex:1; min-width:0; }
.id-comment-meta { display:flex; flex-direction:column; margin-bottom:var(--sp-1); }
.id-comment-meta strong { font-size:var(--text-sm); color:var(--n-800); }
.id-comment-meta span { font-size:var(--text-xs); color:var(--n-400); }
.id-comment-text { font-size:var(--text-sm); color:var(--n-600); line-height:1.6; }
.id-comment-input { margin-top:var(--sp-4); padding-top:var(--sp-4); border-top:1px solid var(--n-100); }

/* ── Activity Log ── */
.id-activity-list { display:flex; flex-direction:column; gap:0; position:relative; }
.id-activity-item { display:flex; gap:var(--sp-3); padding:var(--sp-3) 0; border-bottom:1px solid var(--n-50); position:relative; }
.id-activity-item:last-child { border-bottom:none; }
.id-activity-dot {
    width:10px; height:10px; border-radius:var(--r-full); flex-shrink:0; margin-top:5px;
    box-shadow:0 0 0 3px rgba(0,0,0,0.04);
}
.id-activity-body { flex:1; min-width:0; }
.id-activity-text { font-size:var(--text-sm); color:var(--n-600); line-height:1.5; }
.id-activity-text strong { color:var(--n-800); }
.id-activity-time { font-size:var(--text-xs); color:var(--n-400); margin-top:2px; }

/* ── Employee Detail — Quick Stats ── */
.ed-pref-list { display:flex; flex-direction:column; gap:var(--sp-3); }
.ed-stats-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:var(--sp-3);
}
.ed-stat-box {
    background:var(--n-50);
    border:1px solid var(--n-200);
    border-radius:var(--r-lg);
    padding:var(--sp-4);
    text-align:center;
}
.ed-stat-num {
    font-size:var(--text-2xl);
    font-weight:700;
    color:var(--brand-600);
    margin-bottom:var(--sp-1);
}
.ed-stat-label {
    font-size:var(--text-xs);
    color:var(--n-500);
    font-weight:500;
}
.ed-site-list { display:flex; flex-direction:column; gap:0; }
.ed-site-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:var(--sp-3) 0;
    border-bottom:1px solid var(--n-100);
}
.ed-site-row:last-child { border-bottom:none; }
.ed-site-name { font-size:var(--text-sm); color:var(--n-700); font-weight:500; }
.ed-perm-table td,
.ed-perm-table th {
    padding:var(--sp-3) var(--sp-3);
}

/* ── Employee Detail — Flush cards in Profile/Access tabs ── */
#tabProfile .card { margin-bottom:0; border-radius:0; border-bottom:none; }
#tabProfile .grid.cols-2 > div > .card:first-child { border-top-left-radius:var(--r-xl); border-top-right-radius:var(--r-xl); }
#tabProfile .grid.cols-2 > div > .card:last-child { border-bottom-left-radius:var(--r-xl); border-bottom-right-radius:var(--r-xl); border-bottom:1px solid var(--n-200); }
#tabAccess .grid.cols-2 > div > .card { margin-bottom:0; border-radius:0; border-bottom:none; }
#tabAccess .grid.cols-2 > div > .card:first-child { border-top-left-radius:var(--r-xl); border-top-right-radius:var(--r-xl); }
#tabAccess .grid.cols-2 > div > .card:last-child { border-bottom-left-radius:var(--r-xl); border-bottom-right-radius:var(--r-xl); border-bottom:1px solid var(--n-200); }

/* ── Definitions — Level Badge & Color Swatch ── */
.def-level-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:28px;
    height:28px;
    border-radius:var(--r-md);
    font-weight:700;
    font-size:var(--text-sm);
}
.def-color-swatch {
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:50%;
    vertical-align:middle;
    margin-right:6px;
}
.def-filter-bar {
    display:flex;
    gap:var(--sp-3);
    align-items:center;
}
.def-filter-bar .filter-search-wrap {
    flex:2;
}
.def-filter-bar .filter-selects {
    display:flex;
    flex-wrap:nowrap;
    gap:var(--sp-2);
    flex:1;
    min-width:0;
}
.def-filter-bar .filter-selects .filter-select {
    flex:1;
    min-width:0;
}

/* ── Dashboard — Task List ── */
.task-list { display:flex; flex-direction:column; }
.task-item {
    display:flex; align-items:center; gap:var(--sp-3);
    padding:var(--sp-3) var(--sp-4);
    border-bottom:1px solid var(--n-100);
    text-decoration:none; color:inherit;
    transition:background var(--dur-fast);
    cursor:pointer;
}
.task-item:last-child { border-bottom:none; }
.task-item:hover { background:var(--n-25); }
.task-item.urgent { background:rgba(244,63,94,0.04); }
.task-item.urgent:hover { background:rgba(244,63,94,0.08); }
.task-item.warning { background:rgba(245,158,11,0.04); }
.task-item.warning:hover { background:rgba(245,158,11,0.08); }
.task-sla-dot {
    width:10px; height:10px; border-radius:50%; flex-shrink:0;
    animation:pulse-dot 2s infinite;
}
.task-item.urgent .task-sla-dot { animation:pulse-dot-red 1.5s infinite; }
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.5} }
@keyframes pulse-dot-red { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.6;transform:scale(1.3)} }
.task-body { flex:1; min-width:0; }
.task-title {
    font-size:var(--text-sm); font-weight:500; color:var(--n-700);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.task-meta { display:flex; align-items:center; gap:var(--sp-2); margin-top:4px; flex-wrap:wrap; }
.task-time { font-size:var(--text-xs); color:var(--n-400); display:flex; align-items:center; gap:4px; }
.task-arrow { font-size:12px; color:var(--n-300); flex-shrink:0; }
.task-item:hover .task-arrow { color:var(--brand-500); }
.recent-item { cursor:pointer; transition:background var(--dur-fast); border-radius:var(--r-md); padding:var(--sp-2); }
.recent-item:hover { background:var(--n-25); }

/* ── Reporting — Map Placeholder & Heatmap ── */
.map-placeholder {
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:var(--sp-6) var(--sp-4);
    background:linear-gradient(135deg, var(--n-25), var(--n-50));
    border-radius:var(--r-lg);
    border:2px dashed var(--n-200);
    text-align:center;
    min-height:200px;
}
.map-placeholder i { font-size:36px; color:var(--brand-400); margin-bottom:var(--sp-3); }
.map-placeholder-text { font-size:var(--text-base); font-weight:600; color:var(--n-600); }
.map-placeholder-sub { font-size:var(--text-xs); color:var(--n-400); margin-top:4px; }
.map-stats { display:flex; gap:var(--sp-3); margin-top:var(--sp-4); flex-wrap:wrap; justify-content:center; }
.map-stat {
    display:flex; flex-direction:column; align-items:center;
    padding:var(--sp-2) var(--sp-3);
    background:var(--n-0); border-radius:var(--r-md);
    box-shadow:var(--sh-xs);
}
.map-stat-val { font-size:var(--text-xs); font-weight:600; color:var(--n-600); }
.map-stat-count { font-size:var(--text-lg); font-weight:700; color:var(--brand-600); }
.heat-grid {
    display:grid; grid-template-columns:repeat(5,1fr); gap:4px;
    margin-top:var(--sp-4); max-width:200px;
}
.heat-cell {
    width:100%; aspect-ratio:1; border-radius:var(--r-sm);
}
.heat-cell.h1 { background:rgba(34,197,94,0.2); }
.heat-cell.h2 { background:rgba(34,197,94,0.4); }
.heat-cell.h3 { background:rgba(245,158,11,0.5); }
.heat-cell.h4 { background:rgba(239,68,68,0.5); }
.heat-cell.h5 { background:rgba(239,68,68,0.8); }
.kpi-report-grid {
    display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4);
}
.kpi-report-item { padding:var(--sp-3); background:var(--n-25); border-radius:var(--r-md); }
.kpi-report-label { font-size:var(--text-xs); color:var(--n-400); font-weight:500; text-transform:uppercase; letter-spacing:0.04em; }
.kpi-report-value { font-size:var(--text-2xl); font-weight:700; color:var(--n-700); margin:var(--sp-1) 0; }

/* ── Tab Content Visibility ── */
.tab-content {
    display:none;
}
.tab-content.active {
    display:block;
}

/* ═══════════════════════════════════════════════════
   GLOBAL RESPONSIVE — Shared across all pages
   ═══════════════════════════════════════════════════ */
@media (max-width:900px) {
    .grid.cols-3-comments { grid-template-columns:1fr; }
    .id-top-row { flex-direction:column; align-items:flex-start; }
}

@media (max-width:768px) {
    .filter-selects { flex-wrap:wrap; }
    .filter-selects .filter-select { min-width:100%; }
    .advanced-filters-grid { grid-template-columns:1fr; }
    .modal-form-grid { grid-template-columns:1fr; }
    .data-table { font-size:var(--text-xs); }
    .data-table th, .data-table td { padding:var(--sp-2); }
    .pagination { flex-wrap:wrap; }
    .card-footer { flex-direction:column; align-items:flex-start; }
    .ci-form-actions { flex-direction:column; }
    .ci-form-actions .btn { width:100%; justify-content:center; }
    .ci-modal-info-grid { flex-direction:column; align-items:center; }
    .ci-segmented-toggle { flex-direction:column; }
    .ci-seg-option span { border-right:none; border-bottom:1px solid var(--n-200); }
    .ci-seg-option:last-child span { border-bottom:none; }
    .def-filter-bar { flex-direction:column; }
    .def-filter-bar .filter-selects { flex-wrap:wrap; width:100%; }
    .def-filter-bar .filter-selects .filter-select { min-width:100%; }
    .kpi-report-grid { grid-template-columns:1fr; }
    .map-stats { flex-direction:column; align-items:center; }
}
/* ── MULTI-SELECT DROPDOWN (.ms-select) ── */
.ms-select { position:relative; z-index:10; }
.ms-select.open { z-index:1000; }
.ms-select-trigger {
    display:flex; align-items:center; justify-content:space-between;
    min-height:44px; padding:6px 12px 6px var(--sp-4); gap:6px;
    border:1.5px solid var(--n-200); border-radius:var(--r-lg);
    background:var(--n-0); cursor:pointer; transition:all var(--dur-fast);
    font-size:var(--text-base); font-family:var(--font); color:var(--n-800);
}
.ms-select-trigger:hover { border-color:var(--n-400); }
.ms-select-trigger:focus,
.ms-select.open .ms-select-trigger {
    border-color:var(--brand-500); box-shadow:var(--sh-glow);
}
.ms-select-arrow {
    font-size:12px; color:var(--n-400); transition:transform .2s;
    flex-shrink:0; margin-left:auto;
}
.ms-select.open .ms-select-arrow { transform:rotate(180deg); }

/* Tags area */
.ms-select-tags {
    display:flex; flex-wrap:wrap; gap:4px; flex:1; align-items:center;
}
.ms-select-placeholder { color:var(--n-400); font-size:var(--text-sm); pointer-events:none; }
.ms-select-tag {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 8px; font-size:var(--text-xs); font-weight:500;
    background:var(--brand-50); color:var(--brand-700); border:1px solid var(--brand-200);
    border-radius:var(--r-full); white-space:nowrap; line-height:1.5;
}
.ms-select-tag-remove {
    display:inline-flex; align-items:center; justify-content:center;
    width:14px; height:14px; border:none; background:transparent;
    color:var(--brand-500); cursor:pointer; font-size:10px; padding:0;
    border-radius:50%; transition:background .15s, color .15s;
}
.ms-select-tag-remove:hover { background:var(--brand-200); color:var(--brand-800); }

/* Dropdown panel */
.ms-select-dropdown {
    display:none; position:absolute; top:calc(100% + 4px); left:0; right:0;
    background:#fff; border:1.5px solid var(--n-200);
    border-radius:var(--r-lg); box-shadow:0 8px 24px rgba(0,0,0,.12);
    z-index:1000; max-height:280px; overflow:hidden;
    flex-direction:column;
}
.ms-select.open .ms-select-dropdown { display:flex; }

/* Search inside dropdown */
.ms-select-search-wrap {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; border-bottom:1px solid var(--n-100);
}
.ms-select-search-icon { color:var(--n-400); font-size:13px; flex-shrink:0; }
.ms-select-search {
    border:none; outline:none; width:100%; font-size:var(--text-sm);
    background:transparent; color:var(--n-800);
}
.ms-select-search::placeholder { color:var(--n-400); }

/* Options list */
.ms-select-options {
    list-style:none; margin:0; padding:4px 0;
    overflow-y:auto; max-height:220px;
}
.ms-select-option {
    display:flex; align-items:center; gap:8px;
    padding:8px 12px; cursor:pointer; font-size:var(--text-sm);
    color:var(--n-700); transition:background .12s;
}
.ms-select-option:hover { background:var(--n-50); }
.ms-select-option.selected { background:var(--brand-50); color:var(--brand-700); font-weight:500; }

/* Check icon */
.ms-select-check {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; border:1.5px solid var(--n-300);
    border-radius:var(--r-sm); font-size:10px; color:transparent;
    transition:all .15s; flex-shrink:0;
}
.ms-select-option.selected .ms-select-check {
    background:var(--brand-500); border-color:var(--brand-500); color:#fff;
}

/* Empty state */
.ms-select-empty {
    padding:16px 12px; text-align:center;
    color:var(--n-400); font-size:var(--text-sm);
}

/* Dark mode */
[data-theme="dark"] .ms-select-trigger { background:var(--n-800); border-color:var(--n-600); }
[data-theme="dark"] .ms-select-trigger:focus,
[data-theme="dark"] .ms-select.open .ms-select-trigger { border-color:var(--brand-400); }
[data-theme="dark"] .ms-select-dropdown { background:var(--n-800); border-color:var(--n-600); }
[data-theme="dark"] .ms-select-search-wrap { border-bottom-color:var(--n-600); }
[data-theme="dark"] .ms-select-search { color:var(--n-100); }
[data-theme="dark"] .ms-select-option { color:var(--n-200); }
[data-theme="dark"] .ms-select-option:hover { background:var(--n-700); }
[data-theme="dark"] .ms-select-option.selected { background:rgba(59,130,246,.15); color:var(--brand-300); }
[data-theme="dark"] .ms-select-check { border-color:var(--n-500); }
[data-theme="dark"] .ms-select-tag { background:rgba(59,130,246,.15); color:var(--brand-300); border-color:var(--brand-700); }

/* ── Notification Center (.nc-*) ── */
.nc-item {
    display:flex; align-items:flex-start; gap:var(--sp-4);
    padding:var(--sp-5) var(--sp-5);
    border-bottom:1px solid var(--n-100);
    transition:background var(--dur-fast);
}
.nc-item:last-child { border-bottom:none; }
.nc-item:hover { background:var(--n-25); }
.nc-item.unread { background:var(--brand-50); }
.nc-item.unread:hover { background:#dbeafe; }
.nc-icon {
    width:44px; height:44px; border-radius:var(--r-full);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; flex-shrink:0;
}
.nc-icon.warning { background:#fef3c7; color:#d97706; }
.nc-icon.danger { background:#fee2e2; color:#dc2626; }
.nc-icon.success { background:#d1fae5; color:#059669; }
.nc-icon.info { background:#dbeafe; color:#2563eb; }
.nc-body { flex:1; min-width:0; }
.nc-title {
    font-size:var(--text-sm); font-weight:600; color:var(--n-800);
    margin-bottom:4px; line-height:1.4;
}
.nc-title .table-link { font-weight:600; }
.nc-desc {
    font-size:var(--text-sm); color:var(--n-500); line-height:1.5;
}
.nc-meta {
    display:flex; flex-direction:column; align-items:flex-end;
    gap:var(--sp-2); flex-shrink:0; min-width:90px;
}
.nc-time {
    font-size:var(--text-xs); color:var(--n-400); white-space:nowrap;
}
.nc-actions {
    display:flex; gap:2px; opacity:0; transition:opacity var(--dur-fast);
}
.nc-item:hover .nc-actions { opacity:1; }

/* ── Settings Page — toggle switches & settings rows ── */
.settings-row { display:flex; align-items:flex-start; justify-content:space-between; padding:var(--sp-4) var(--sp-5); border-bottom:1px solid var(--n-2); }
.settings-row:last-child { border-bottom:none; }
.settings-row-label { font-weight:600; font-size:0.9rem; color:var(--n-9); margin-bottom:2px; }
.settings-row-desc { font-size:0.8rem; color:var(--n-5); }
.toggle-switch { position:relative; display:inline-block; width:44px; height:24px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; cursor:pointer; inset:0; background:var(--n-3); border-radius:24px; transition:var(--dur-fast); }
.toggle-slider::before { content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:var(--dur-fast); }
.toggle-switch input:checked + .toggle-slider { background:var(--brand-5); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(20px); }

/* ── Template List (Notifications) ── */
.template-list-item { padding:12px 16px; cursor:pointer; font-size:0.875rem; color:var(--n-7); border-bottom:1px solid var(--n-2); transition:background var(--dur-fast); }
.template-list-item:hover { background:var(--n-1); }
.template-list-item.active { background:var(--brand-1); color:var(--brand-7); font-weight:600; border-left:3px solid var(--brand-5); }

/* end of stylesheet */