/* ============================================================
   ITOPS THEME v1 — Deep Tech Slate / Indigo
   Loaded AFTER Bootstrap in header.php, overrides as needed.
   Pure additive — if this file 404s, Bootstrap defaults still work.
   ============================================================ */

/* ---- Self-hosted Inter font (variable, all weights in one file) ---- */
@font-face {
    font-family: 'Inter var';
    font-weight: 100 900;
    font-display: swap;
    font-style: normal;
    src: url('assets/inter.woff2') format('woff2-variations'),
         url('assets/inter.woff2') format('woff2');
}

/* ---- Design tokens ---- */
:root {
    /* Brand */
    --itops-slate:          #1E293B;
    --itops-slate-dark:     #0F172A;
    --itops-indigo:         #4F46E5;
    --itops-indigo-dark:    #4338CA;
    --itops-indigo-light:   #EEF2FF;

    /* Status */
    --itops-ok:        #10B981;
    --itops-ok-bg:     #D1FAE5;
    --itops-warn:      #F59E0B;
    --itops-warn-bg:   #FEF3C7;
    --itops-warn-fg:   #92400E;
    --itops-crit:      #EF4444;
    --itops-crit-bg:   #FEE2E2;
    --itops-info:      #3B82F6;
    --itops-info-bg:   #DBEAFE;
    --itops-info-fg:   #1E40AF;

    /* Neutrals */
    --itops-fg:        #0F172A;
    --itops-fg-muted:  #475569;
    --itops-fg-subtle: #94A3B8;
    --itops-bg:        #F8FAFC;
    --itops-bg-card:   #FFFFFF;
    --itops-border:    #E2E8F0;

    /* Shape */
    --itops-r-sm: 8px;
    --itops-r-md: 12px;
    --itops-r-lg: 16px;
    --itops-r-pill: 999px;

    /* Shadow */
    --itops-sh-sm: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 1px rgba(15, 23, 42, 0.03);
    --itops-sh-md: 0 4px 12px rgba(15, 23, 42, 0.06), 0 2px 4px rgba(15, 23, 42, 0.04);
    --itops-sh-lg: 0 20px 40px rgba(15, 23, 42, 0.08), 0 8px 16px rgba(15, 23, 42, 0.04);

    /* Layout */
    --itops-nav-w: 260px;
    --itops-topbar-h: 64px;
    --itops-bottomnav-h: 72px;

    /* Bootstrap overrides via its CSS vars */
    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-body-font-family: 'Inter var', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: 0.875rem;
    --bs-body-color: #0F172A;
    --bs-body-bg: #F8FAFC;
    --bs-border-color: #E2E8F0;
    --bs-border-radius: 12px;
    --bs-border-radius-sm: 8px;
    --bs-border-radius-lg: 16px;
}

/* ---- Base typography ---- */
body {
    font-family: var(--bs-body-font-family);
    background: var(--itops-bg);
    color: var(--itops-fg);
    font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
    -webkit-font-smoothing: antialiased;
}

/* ---- Buttons — indigo primary ---- */
.btn-primary {
    --bs-btn-bg: var(--itops-indigo);
    --bs-btn-border-color: var(--itops-indigo);
    --bs-btn-hover-bg: var(--itops-indigo-dark);
    --bs-btn-hover-border-color: var(--itops-indigo-dark);
    --bs-btn-active-bg: var(--itops-indigo-dark);
    --bs-btn-active-border-color: var(--itops-indigo-dark);
    --bs-btn-disabled-bg: var(--itops-indigo);
    --bs-btn-disabled-border-color: var(--itops-indigo);
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--itops-indigo);
    --bs-btn-border-color: var(--itops-indigo);
    --bs-btn-hover-bg: var(--itops-indigo);
    --bs-btn-hover-border-color: var(--itops-indigo);
    --bs-btn-active-bg: var(--itops-indigo);
    --bs-btn-active-border-color: var(--itops-indigo);
    font-weight: 600;
}
.btn { font-weight: 500; border-radius: var(--itops-r-md); }

/* ---- Links ---- */
a { color: var(--itops-indigo); }
a:hover { color: var(--itops-indigo-dark); }

/* ---- Cards (soften shadows, tighter borders) ---- */
.card {
    border: 1px solid var(--itops-border) !important;
    box-shadow: var(--itops-sh-sm) !important;
    border-radius: var(--itops-r-lg) !important;
}
.card-header {
    border-bottom-color: var(--itops-border);
    font-weight: 600;
}

/* ---- Form controls ---- */
.form-control, .form-select {
    border-color: var(--itops-border);
    border-radius: var(--itops-r-md);
    font-size: 0.875rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--itops-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.form-label { font-weight: 600; color: var(--itops-fg-muted); font-size: 0.8rem; }
.input-group-text {
    background: var(--itops-bg);
    border-color: var(--itops-border);
    color: var(--itops-fg-muted);
}

/* ---- Tables ---- */
.table thead th {
    background: var(--itops-bg);
    color: var(--itops-fg-muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    border-bottom-color: var(--itops-border);
}

/* ---- Badges (Bootstrap bg-* mapping to new palette) ---- */
.badge.bg-primary   { background-color: var(--itops-indigo) !important; }
.badge.bg-success   { background-color: var(--itops-ok) !important; }
.badge.bg-warning   { background-color: var(--itops-warn) !important; color: #fff !important; }
.badge.bg-danger    { background-color: var(--itops-crit) !important; }
.badge.bg-info      { background-color: var(--itops-info) !important; color: #fff !important; }
.badge.bg-secondary { background-color: #64748B !important; }

/* ---- Alerts ---- */
.alert { border-radius: var(--itops-r-md); border: 1px solid transparent; font-size: 0.875rem; }
.alert-success { background: var(--itops-ok-bg); color: #065F46; border-color: #A7F3D0; }
.alert-warning { background: var(--itops-warn-bg); color: var(--itops-warn-fg); border-color: #FCD34D; }
.alert-danger  { background: var(--itops-crit-bg); color: #991B1B; border-color: #FECACA; }
.alert-info    { background: var(--itops-info-bg); color: var(--itops-info-fg); border-color: #BFDBFE; }

/* ============================================================
   NEW APP SHELL — overrides the old inline sidebar/topbar styles
   from the inherited header.php
   ============================================================ */

/* Reset the old sidebar styles — new look */
nav.sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: var(--itops-nav-w) !important;
    background: var(--itops-bg-card) !important;
    color: var(--itops-fg-muted) !important;
    border-right: 1px solid var(--itops-border);
    padding-top: 0 !important;
    box-shadow: var(--itops-sh-sm);
    overflow-y: auto;
    z-index: 1030;
}
nav.sidebar .brand {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 20px 20px !important;
    font-weight: 800 !important;
    font-size: 1rem !important;
    color: var(--itops-fg) !important;
    border-bottom: 1px solid var(--itops-border);
    letter-spacing: -0.01em;
}
nav.sidebar .brand::before {
    content: '';
    width: 36px; height: 36px;
    background: var(--itops-indigo);
    border-radius: var(--itops-r-md);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/><path d='m9 12 2 2 4-4'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
    flex-shrink: 0;
}
/* Hide the Bootstrap icon inside the brand (we use the ::before shield now) */
nav.sidebar .brand .bi { display: none; }

nav.sidebar .nav.flex-column { padding: 10px; }
nav.sidebar a.nav-link {
    color: var(--itops-fg-muted) !important;
    padding: 10px 14px !important;
    border-radius: var(--itops-r-md);
    margin-bottom: 2px;
    font-weight: 500;
    font-size: 0.875rem;
    transition: background 0.12s, color 0.12s;
    display: flex !important;
    align-items: center;
    gap: 12px;
    text-decoration: none !important;
}
nav.sidebar .brand { text-decoration: none !important; }
nav.sidebar a.nav-link:hover { text-decoration: none !important; }
nav.sidebar a.nav-link:hover {
    background: var(--itops-indigo-light) !important;
    color: var(--itops-indigo) !important;
}
nav.sidebar a.nav-link.active {
    background: var(--itops-indigo) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}
nav.sidebar a.nav-link.active .bi { color: #ffffff; }
nav.sidebar a.nav-link .bi { font-size: 1rem; opacity: 0.9; }
nav.sidebar a.nav-link.ps-4 { padding-left: 36px !important; font-size: 0.82rem; }
nav.sidebar .nav-section {
    font-size: 0.68rem !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--itops-fg-subtle) !important;
    padding: 16px 14px 6px !important;
    font-weight: 600;
}

/* ---- Main content area ---- */
.main {
    margin-left: var(--itops-nav-w);
    padding: 0 !important;
    min-height: 100vh;
}
.main > .topbar {
    background: var(--itops-bg-card) !important;
    border-bottom: 1px solid var(--itops-border);
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0 24px !important;
    height: var(--itops-topbar-h);
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.main > .topbar h5 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* Topbar user dropdown — more polished */
.main > .topbar .dropdown button {
    background: transparent !important;
    border: 1px solid var(--itops-border);
    border-radius: var(--itops-r-pill);
    padding: 4px 12px 4px 4px !important;
}
.main > .topbar .dropdown button:hover,
.main > .topbar .dropdown button:focus,
.main > .topbar .dropdown button[aria-expanded="true"] {
    background: var(--itops-bg) !important;
    border-color: var(--itops-indigo);
}

/* Wrap the actual page content so it gets padding — pages' first child inside .main
   after the .topbar becomes the content zone */
.main > *:not(.topbar):not(.rmd-overlay):not(style):not(script):not(.bottom-nav-mobile) {
    padding: 0 24px;
}
.main > *:not(.topbar):not(.rmd-overlay):not(style):not(script):not(.bottom-nav-mobile):first-of-type {
    padding-top: 24px;
}
/* Last content element gets bottom padding to clear mobile bottom-nav + breathing room */
.main > *:last-child { padding-bottom: 24px; }

/* ============================================================
   MOBILE RESPONSIVE
   ============================================================ */
@media (max-width: 991.98px) {
    /* Sidebar becomes slide-over */
    nav.sidebar {
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        z-index: 1050;
    }
    nav.sidebar.show { transform: translateX(0); }

    .main { margin-left: 0; padding-bottom: calc(var(--itops-bottomnav-h) + 16px) !important; }
    .main > .topbar { padding: 0 16px !important; }
    .main > *:not(.topbar):not(.rmd-overlay):not(style):not(script):not(.bottom-nav-mobile) {
        padding: 0 16px;
    }

    /* Backdrop when sidebar open */
    .sidebar-backdrop {
        position: fixed; inset: 0;
        background: rgba(15, 23, 42, 0.55);
        z-index: 1040;
        display: none;
    }
    .sidebar-backdrop.show { display: block; }
}

/* ============================================================
   MOBILE BOTTOM NAV — only visible < 992px
   ============================================================ */
.bottom-nav-mobile {
    display: none;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: var(--itops-bottomnav-h);
    background: var(--itops-bg-card);
    border-top: 1px solid var(--itops-border);
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom, 8px);
    box-shadow: 0 -4px 12px rgba(15, 23, 42, 0.04);
}
.bottom-nav-mobile .bn-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--itops-fg-muted);
    text-decoration: none;
    padding-top: 8px;
    position: relative;
    font-size: 0.68rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    background: transparent;
}
.bottom-nav-mobile .bn-item [data-lucide] { width: 22px; height: 22px; stroke-width: 2; }
.bottom-nav-mobile .bn-item.active { color: var(--itops-indigo); }
.bottom-nav-mobile .bn-item.active::before {
    content: ''; position: absolute;
    top: 0; left: 25%; right: 25%; height: 3px;
    background: var(--itops-indigo);
    border-radius: 0 0 3px 3px;
}

@media (max-width: 991.98px) {
    .bottom-nav-mobile { display: flex; }
}

/* ============================================================
   MOBILE "MORE" DRAWER — slides up from bottom
   ============================================================ */
.more-drawer-backdrop {
    position: fixed; inset: 0;
    background: rgba(15, 23, 42, 0.55);
    z-index: 1055;
    display: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.more-drawer-backdrop.show { display: block; opacity: 1; }

.more-drawer {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: var(--itops-bg-card);
    border-radius: 24px 24px 0 0;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 1056;
    transform: translateY(100%);
    transition: transform 0.25s ease;
    padding: 10px 0 calc(16px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.25);
}
.more-drawer.show { transform: translateY(0); }
.more-drawer::before {
    content: '';
    display: block;
    width: 40px; height: 4px;
    background: #CBD5E1;
    border-radius: 2px;
    margin: 0 auto 14px;
}
.more-drawer .md-section {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--itops-fg-subtle); padding: 14px 20px 6px; font-weight: 600;
}
.more-drawer .md-item {
    display: flex; align-items: center; gap: 14px;
    padding: 12px 20px; color: var(--itops-fg);
    text-decoration: none; font-weight: 500; font-size: 0.9rem;
}
.more-drawer .md-item:hover, .more-drawer .md-item:active {
    background: var(--itops-bg); color: var(--itops-indigo);
}
.more-drawer .md-item [data-lucide] { width: 20px; height: 20px; color: var(--itops-fg-muted); }
.more-drawer .md-item:hover [data-lucide] { color: var(--itops-indigo); }
.more-drawer .md-item.text-danger { color: var(--itops-crit); }
.more-drawer .md-item.text-danger [data-lucide] { color: var(--itops-crit); }

/* ============================================================
   LOGIN PAGE — scoped via <body class="login-page">
   ============================================================ */
body.login-page {
    background: linear-gradient(135deg, #1E293B 0%, #312E81 50%, #4F46E5 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    overflow-x: hidden;
}
body.login-page::before, body.login-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
body.login-page::before {
    top: -200px; right: -200px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(79, 70, 229, 0.4) 0%, transparent 70%);
}
body.login-page::after {
    bottom: -150px; left: -150px;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.3) 0%, transparent 70%);
}

.login-shell {
    width: 100%;
    max-width: 980px;
    background: var(--itops-bg-card);
    border-radius: 20px;
    box-shadow: var(--itops-sh-lg);
    overflow: hidden;
    display: flex;
    position: relative;
    z-index: 1;
    min-height: 560px;
}

.login-brand-pane {
    flex: 1;
    background: linear-gradient(135deg, #1E293B 0%, #312E81 50%, #4F46E5 100%);
    color: #fff;
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.login-brand-pane::before {
    content: '';
    position: absolute;
    top: -140px; right: -140px;
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.35) 0%, transparent 70%);
    border-radius: 50%;
}
.login-brand-pane > * { position: relative; z-index: 1; }

.login-brand-logo { display: flex; align-items: center; gap: 14px; }
.login-brand-logo .ico {
    width: 56px; height: 56px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.2);
}
.login-brand-logo .ico [data-lucide] { width: 28px; height: 28px; }
.login-brand-logo .name { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.login-brand-logo .tag  { font-size: 0.72rem; opacity: 0.75; margin-top: 2px; }

.login-pitch { margin: 36px 0; }
.login-pitch h1 {
    font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em;
    line-height: 1.1; margin: 0 0 14px;
}
.login-pitch p { font-size: 0.9rem; opacity: 0.8; line-height: 1.6; max-width: 400px; margin: 0; }

.login-features { display: flex; flex-direction: column; gap: 14px; }
.login-features .fi { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; font-weight: 500; }
.login-features .fi .ico {
    width: 36px; height: 36px; flex-shrink: 0;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
}
.login-features .fi .ico [data-lucide] { width: 16px; height: 16px; }

.login-foot {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 0.7rem; opacity: 0.7; margin-top: 20px;
}
.login-foot .status-dot { display: inline-flex; align-items: center; gap: 6px; }
.login-foot .status-dot::before {
    content: ''; width: 6px; height: 6px;
    background: #10B981; border-radius: 50%;
    box-shadow: 0 0 8px #10B981;
}

.login-form-pane {
    width: 420px;
    padding: 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.login-form-wrap { max-width: 320px; width: 100%; margin: 0 auto; }
.login-mini-tag {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px; border-radius: var(--itops-r-pill);
    background: var(--itops-indigo-light);
    color: var(--itops-indigo);
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
    margin-bottom: 14px;
}
.login-form-pane h2 {
    font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em;
    margin: 0 0 4px;
}
.login-form-pane .intro {
    color: var(--itops-fg-muted); font-size: 0.85rem; margin-bottom: 24px;
}
.login-field { margin-bottom: 16px; }
.login-field label {
    display: block; font-size: 0.72rem; font-weight: 600;
    color: var(--itops-fg-muted); margin-bottom: 6px;
}
.login-input-group { position: relative; }
.login-input-group [data-lucide].lead {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    width: 18px; height: 18px; color: var(--itops-fg-subtle); pointer-events: none;
}
.login-input-group input {
    width: 100%; padding: 11px 14px 11px 44px;
    border: 1px solid var(--itops-border);
    border-radius: var(--itops-r-md);
    font-family: inherit; font-size: 0.9rem;
    color: var(--itops-fg); background: var(--itops-bg-card);
    outline: none; transition: all 0.12s;
}
.login-input-group input:focus {
    border-color: var(--itops-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
.login-input-group.has-error input {
    border-color: var(--itops-crit);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.08);
}
.login-input-group .toggle-pwd {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    padding: 6px; border: none; background: transparent;
    color: var(--itops-fg-subtle); cursor: pointer;
}
.login-input-group .toggle-pwd:hover { color: var(--itops-indigo); }

.login-submit {
    width: 100%; padding: 13px 20px;
    background: var(--itops-indigo); color: #fff;
    border: none; border-radius: var(--itops-r-md);
    font-family: inherit; font-size: 0.9rem; font-weight: 700;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: all 0.12s;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.3);
    margin-top: 8px;
}
.login-submit:hover { background: var(--itops-indigo-dark); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(79, 70, 229, 0.4); }
.login-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }

.login-error-banner {
    padding: 12px 14px;
    background: var(--itops-crit-bg);
    border-left: 3px solid var(--itops-crit);
    border-radius: 0 var(--itops-r-md) var(--itops-r-md) 0;
    margin-bottom: 20px;
    display: flex; gap: 10px; align-items: flex-start;
    font-size: 0.82rem;
}
.login-error-banner [data-lucide] {
    width: 16px; height: 16px; color: var(--itops-crit); flex-shrink: 0; margin-top: 2px;
}
.login-error-banner .msg { color: #991B1B; }
.login-error-banner .msg strong { color: var(--itops-crit); display: block; margin-bottom: 2px; }

.lan-notice {
    margin-top: 20px; padding: 10px 14px;
    background: var(--itops-bg);
    border: 1px solid var(--itops-border);
    border-radius: var(--itops-r-md);
    font-size: 0.7rem; color: var(--itops-fg-subtle);
    display: flex; align-items: center; gap: 8px; justify-content: center;
}
.lan-notice [data-lucide] { width: 14px; height: 14px; color: var(--itops-ok); }

.login-help {
    margin-top: 20px; text-align: center;
    font-size: 0.78rem; color: var(--itops-fg-muted);
}
.login-help a { color: var(--itops-indigo); font-weight: 600; }

/* Login page — mobile */
@media (max-width: 820px) {
    body.login-page {
        align-items: stretch;
        padding: 0;
        display: block;
        min-height: 100vh;
    }
    body.login-page::before, body.login-page::after { display: none; }
    .login-shell {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
        box-shadow: none;
    }
    .login-brand-pane {
        padding: 32px 24px 36px;
        flex: 0 0 auto;
        text-align: center;
    }
    .login-brand-logo { justify-content: center; }
    .login-pitch { margin: 20px 0 8px; }
    .login-pitch h1 { font-size: 1.4rem; }
    .login-pitch p { font-size: 0.82rem; margin: 0 auto; max-width: 320px; }
    .login-features, .login-foot { display: none; }
    .login-form-pane {
        width: 100%;
        padding: 32px 24px 32px;
        background: var(--itops-bg-card);
        border-radius: 28px 28px 0 0;
        margin-top: -20px;
        box-shadow: 0 -10px 40px rgba(0,0,0,0.15);
        flex: 1;
        position: relative;
        z-index: 2;
    }
    .login-form-wrap { max-width: 100%; }
}

/* ============================================================
   REMINDER POPUP (preserved from original header.php;
   token-aligned colors but behaviour unchanged)
   ============================================================ */
.rmd-bell { background: var(--itops-indigo-light) !important; color: var(--itops-indigo) !important; }
.rmd-bell::after { border-color: var(--itops-indigo) !important; }
.rmd-assigned { color: var(--itops-indigo) !important; background: var(--itops-indigo-light) !important; }
.rmd-btn { background: var(--itops-indigo) !important; }
.rmd-btn:hover { background: var(--itops-indigo-dark) !important; }

/* ============================================================
   PRINT: strip app shell
   ============================================================ */
@media print {
    nav.sidebar, .main > .topbar, .bottom-nav-mobile, .more-drawer, .more-drawer-backdrop { display: none !important; }
    .main { margin-left: 0 !important; padding: 0 !important; }
}

/* ============================================================
   PHASE 2 — DASHBOARD CLASSES
   ============================================================ */

/* ---- Greeting block ---- */
.dash-hello {
    color: var(--itops-indigo);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.dash-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--itops-fg);
}
.dash-date {
    color: var(--itops-fg-muted);
    font-size: 0.85rem;
    margin-top: 2px;
}

/* ---- Stat cards ---- */
.stat-card {
    display: flex; align-items: center; gap: 14px;
    padding: 18px; border-radius: var(--itops-r-lg);
    background: var(--itops-bg-card);
    border: 1px solid var(--itops-border);
    box-shadow: var(--itops-sh-sm);
    color: var(--itops-fg);
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--itops-sh-md);
    border-color: var(--itops-indigo);
    color: var(--itops-fg);
}
.stat-icon {
    width: 48px; height: 48px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem; flex-shrink: 0;
}
.stat-icon.indigo { background: var(--itops-indigo-light); color: var(--itops-indigo); }
.stat-icon.amber  { background: var(--itops-warn-bg);     color: var(--itops-warn-fg); }
.stat-icon.green  { background: var(--itops-ok-bg);       color: var(--itops-ok); }
.stat-icon.red    { background: var(--itops-crit-bg);     color: var(--itops-crit); }
.stat-value {
    font-size: 1.6rem; font-weight: 800;
    letter-spacing: -0.02em; line-height: 1;
    color: var(--itops-fg);
}
.stat-label {
    font-size: 0.75rem; color: var(--itops-fg-muted);
    margin-top: 4px;
}

/* ---- Section header ---- */
.section-head { margin-bottom: 14px; }
.section-head h3 {
    font-size: 0.85rem; font-weight: 700;
    color: var(--itops-fg-muted);
    text-transform: uppercase; letter-spacing: 0.05em;
    margin: 0;
    display: flex; align-items: center; gap: 8px;
}
.section-head h3 .bi { color: var(--itops-indigo); }

/* ---- Quick action tiles ---- */
.quick-tile {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 10px; padding: 20px 12px;
    border-radius: var(--itops-r-lg);
    background: var(--itops-bg-card);
    border: 1px solid var(--itops-border);
    box-shadow: var(--itops-sh-sm);
    color: var(--itops-fg);
    text-align: center;
    transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
}
.quick-tile:hover {
    transform: translateY(-2px);
    box-shadow: var(--itops-sh-md);
    border-color: var(--itops-indigo);
    color: var(--itops-indigo);
}
.quick-tile .qi {
    width: 44px; height: 44px; border-radius: 12px;
    background: var(--itops-indigo-light);
    color: var(--itops-indigo);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.quick-tile .qt {
    font-weight: 600; font-size: 0.9rem;
}

/* ---- Dashboard widget card ---- */
.dash-card {
    background: var(--itops-bg-card);
    border: 1px solid var(--itops-border);
    border-radius: var(--itops-r-lg);
    box-shadow: var(--itops-sh-sm);
    overflow: hidden;
    height: 100%;
}
.dash-card-head {
    padding: 14px 16px;
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--itops-border);
}
.dash-card-head h3 {
    margin: 0; font-size: 0.95rem; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
    color: var(--itops-fg);
}
.dash-card-head h3 .bi { color: var(--itops-indigo); font-size: 1rem; }

/* ---- List items (recent GP, recent req, down list) ---- */
.list-wrap { padding: 4px 0; }
.list-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    text-decoration: none; color: var(--itops-fg);
    border-top: 1px solid transparent;
    transition: background 0.1s;
}
.list-item:not(:first-child) { border-top: 1px solid var(--itops-border); }
.list-item:hover { background: var(--itops-bg); color: var(--itops-fg); }
.list-item .body { flex: 1; min-width: 0; }
.list-item .main-text {
    font-weight: 600; font-size: 0.88rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.list-item .meta {
    font-size: 0.75rem; color: var(--itops-fg-muted);
    margin-top: 2px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Leading dot (status indicator) ---- */
.lead-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0;
}
.lead-dot.ok   { background: var(--itops-ok); }
.lead-dot.warn { background: var(--itops-warn); }
.lead-dot.crit { background: var(--itops-crit); }
.lead-dot.info { background: var(--itops-info); }

/* ---- Empty state ---- */
.empty-state {
    padding: 32px 20px; text-align: center;
}
.empty-state .icon-wrap {
    width: 56px; height: 56px; margin: 0 auto 12px;
    background: var(--itops-bg);
    color: var(--itops-fg-subtle);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.empty-state .title {
    font-weight: 700; font-size: 0.95rem;
    margin-bottom: 2px;
}

/* ---- Network metrics ---- */
.net-metric {
    flex: 1; display: flex; align-items: center; gap: 10px;
    padding: 12px; background: var(--itops-bg); border-radius: var(--itops-r-md);
}
.net-metric .mv { font-size: 1.4rem; font-weight: 800; line-height: 1; }
.net-metric .ml { font-size: 0.72rem; color: var(--itops-fg-muted); margin-top: 2px; }

.pulse-dot {
    width: 10px; height: 10px; border-radius: 50%;
    flex-shrink: 0; position: relative;
}
.pulse-dot.up { background: var(--itops-ok); }
.pulse-dot.down { background: var(--itops-crit); }
.pulse-dot::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid currentColor; opacity: 0.4;
    animation: pulseRing 1.8s ease-out infinite;
}
.pulse-dot.up::after { border-color: var(--itops-ok); }
.pulse-dot.down::after { border-color: var(--itops-crit); }
@keyframes pulseRing {
    0% { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(2.6); opacity: 0; }
}

.section-caption {
    font-size: 0.68rem; font-weight: 700;
    color: var(--itops-fg-subtle);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin: 12px 0 8px;
}

.down-row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 0; border-bottom: 1px dashed var(--itops-border);
}
.down-row:last-child { border-bottom: 0; }
.down-row .body { flex: 1; min-width: 0; }
.down-row .main-text {
    font-weight: 600; font-size: 0.82rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.down-row .meta {
    font-size: 0.72rem; color: var(--itops-fg-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Reminder tags on dashboard widget ---- */
.rem-tag {
    display: inline-block;
    padding: 3px 8px; border-radius: var(--itops-r-pill);
    font-size: 0.65rem; font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap; flex-shrink: 0;
}
.rem-tag.crit { background: var(--itops-crit-bg); color: var(--itops-crit); }
.rem-tag.warn { background: var(--itops-warn-bg); color: var(--itops-warn-fg); }
.rem-tag.info { background: var(--itops-info-bg); color: var(--itops-info-fg); }

/* ---- Reminder popup overlay ---- */
.rmd-overlay {
    position: fixed; inset: 0; z-index: 20000;
    background: rgba(15, 23, 42, 0.65);
    display: none; align-items: center; justify-content: center;
    padding: 1rem;
}
.rmd-overlay.show { display: flex; }
.rmd-card {
    background: #fff; border-radius: 1.1rem;
    max-width: 430px; width: 100%;
    padding: 1.75rem 1.5rem; text-align: center;
    box-shadow: 0 25px 70px rgba(0,0,0,.35);
    animation: rmdIn 0.25s ease;
}
@keyframes rmdIn {
    from { transform: translateY(14px) scale(.97); opacity: 0; }
    to   { transform: none; opacity: 1; }
}
.rmd-bell {
    position: relative; width: 78px; height: 78px;
    margin: 0 auto 1rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--itops-indigo-light);
    color: var(--itops-indigo);
    font-size: 2rem;
}
.rmd-bell i {
    animation: rmdSwing 1.4s ease-in-out infinite;
    transform-origin: top center;
}
.rmd-bell::after {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 3px solid var(--itops-indigo);
    animation: rmdPulse 1.6s ease-out infinite;
}
@keyframes rmdPulse {
    0%   { transform: scale(1);    opacity: 0.7; }
    100% { transform: scale(1.55); opacity: 0; }
}
@keyframes rmdSwing {
    0%, 100% { transform: rotate(0); }
    20%  { transform: rotate(14deg); }
    40%  { transform: rotate(-12deg); }
    60%  { transform: rotate(8deg); }
    80%  { transform: rotate(-5deg); }
}
.rmd-assigned {
    display: inline-block; margin-bottom: 0.5rem;
    font-size: 0.8rem; font-weight: 600;
    color: var(--itops-indigo);
    background: var(--itops-indigo-light);
    padding: 0.2rem 0.7rem; border-radius: var(--itops-r-pill);
}
.rmd-msg {
    font-size: 1.25rem; font-weight: 700;
    color: var(--itops-fg); margin: 0.25rem 0 0.5rem;
    word-break: break-word;
}
.rmd-when {
    color: var(--itops-fg-muted);
    font-size: 0.9rem; margin-bottom: 1.25rem;
}
.rmd-when strong { color: var(--itops-fg); }
.rmd-btn {
    background: var(--itops-indigo);
    border: none; color: #fff; font-weight: 600;
    padding: 0.6rem 2rem; border-radius: 0.6rem;
    font-size: 1rem; cursor: pointer;
    transition: background 0.15s;
}
.rmd-btn:hover { background: var(--itops-indigo-dark); }
.rmd-btn:disabled { opacity: 0.6; cursor: default; }

/* ---- Birthday overlay ---- */
.bday-overlay {
    position: fixed; inset: 0; z-index: 20100;
    background: rgba(15, 23, 42, 0.75);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
.bday-card {
    background: #fff; border-radius: 1.2rem;
    max-width: 420px; width: 100%;
    padding: 2rem 1.5rem; text-align: center;
    box-shadow: 0 30px 80px rgba(0,0,0,.4);
    animation: rmdIn 0.3s ease;
}
.bday-emoji {
    font-size: 3.5rem; margin-bottom: 0.75rem;
    animation: bdayBounce 1.4s ease-in-out infinite;
}
@keyframes bdayBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* ============================================================
   PHASE 3 — TASKS
   ============================================================ */

/* Stat pills — clickable, show state when active */
.task-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px; border-radius: var(--itops-r-pill);
    font-size: 0.85rem; font-weight: 600;
    text-decoration: none;
    border: 1.5px solid transparent;
    transition: border-color 0.1s, transform 0.1s;
}
.task-pill:hover { transform: translateY(-1px); }
.task-pill.active {
    border-color: var(--itops-indigo);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.task-pill strong { font-weight: 800; }

/* Priority pill (small badge with dot) */
.priority-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: var(--itops-r-pill);
    font-size: 0.75rem; font-weight: 700;
    white-space: nowrap;
}
.priority-pill .dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
.priority-pill.priority-high   { background: var(--itops-crit-bg);  color: var(--itops-crit); }
.priority-pill.priority-high   .dot { background: var(--itops-crit); }
.priority-pill.priority-medium { background: var(--itops-warn-bg);  color: var(--itops-warn-fg); }
.priority-pill.priority-medium .dot { background: var(--itops-warn); }
.priority-pill.priority-low    { background: var(--itops-ok-bg);    color: var(--itops-ok); }
.priority-pill.priority-low    .dot { background: var(--itops-ok); }

/* Task name link */
.task-title-link {
    color: var(--itops-fg); font-weight: 600;
    text-decoration: none;
}
.task-title-link:hover { color: var(--itops-indigo); }

/* Mobile task card */
.task-card {
    background: var(--itops-bg-card);
    border: 1px solid var(--itops-border);
    border-radius: var(--itops-r-lg);
    padding: 14px;
    box-shadow: var(--itops-sh-sm);
    margin-bottom: 12px;
}
.task-card-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 10px; margin-bottom: 10px;
}
.task-card-id { font-size: 11px; color: var(--itops-fg-subtle); margin-top: 2px; }
.task-card-meta {
    display: flex; flex-wrap: wrap; gap: 8px 12px;
    font-size: 12px; color: var(--itops-fg-muted);
    margin-bottom: 10px; align-items: center;
}
.task-card-meta .bi { font-size: 0.85em; }
.task-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 10px; border-top: 1px solid var(--itops-border);
    font-size: 12px;
}

/* Pill-picker (radio group that looks like iOS segmented control) */
.pill-picker {
    display: inline-flex; gap: 4px; padding: 4px;
    background: var(--itops-bg);
    border: 1px solid var(--itops-border);
    border-radius: var(--itops-r-pill);
}
.pill-picker label {
    padding: 7px 16px; border-radius: var(--itops-r-pill);
    font-size: 0.78rem; font-weight: 600;
    color: var(--itops-fg-muted); cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    transition: background 0.1s, color 0.1s, box-shadow 0.1s;
    margin: 0;
}
.pill-picker input { display: none; }
.pill-picker label.active {
    background: var(--itops-bg-card);
    color: var(--itops-fg);
    box-shadow: var(--itops-sh-sm);
}
.pill-picker label.active.priority-high { color: var(--itops-crit); }
.pill-picker label.active.priority-med  { color: var(--itops-warn-fg); }
.pill-picker label.active.priority-low  { color: var(--itops-ok); }
.pill-picker label.active.status-done   { color: var(--itops-ok); }
.pill-picker label.active.status-doing  { color: var(--itops-info-fg); }
.pill-picker label.active.status-todo   { color: var(--itops-fg-muted); }

/* Section divider inside modals */
.section-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 20px 0 12px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--itops-fg-subtle);
}
.section-divider::before, .section-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--itops-border);
}

/* Audit history timeline */
.audit-item {
    display: flex; gap: 12px;
    padding: 10px 0;
    border-bottom: 1px dashed var(--itops-border);
}
.audit-item:last-child { border-bottom: 0; }
.audit-dot {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
}
.audit-dot.indigo { background: var(--itops-indigo-light); color: var(--itops-indigo); }
.audit-dot.amber  { background: var(--itops-warn-bg); color: var(--itops-warn-fg); }
.audit-dot.green  { background: var(--itops-ok-bg); color: var(--itops-ok); }
.audit-main { font-weight: 600; font-size: 0.88rem; }
.audit-sub  { font-size: 0.82rem; color: var(--itops-fg-muted); }


/* ============================================================
   PHASE 4 — PEOPLE
   ============================================================ */

/* Profile notes (JD / Exceptional Work) */
.profile-note {
    padding: 12px 14px;
    border: 1px solid var(--itops-border);
    border-radius: var(--itops-r-md);
    background: var(--itops-bg);
    margin-bottom: 10px;
}
.profile-note:last-child { margin-bottom: 0; }
.profile-note-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--itops-fg);
    word-wrap: break-word;
}
.profile-note-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 8px;
    margin-top: 8px;
    border-top: 1px dashed var(--itops-border);
    font-size: 0.72rem;
    color: var(--itops-fg-muted);
}

/* "My Profile" link in topbar dropdown — Lucide/BI icon alignment */
.dropdown-item .bi { margin-right: 6px; opacity: 0.75; }

/* ============================================================
   PHASE 4.1 — EMPLOYEE PHOTOS
   ============================================================ */
.emp-photo-sm {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--itops-border);
}
.emp-photo-md {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--itops-border);
    flex-shrink: 0;
}

/* ============================================================
   PHASE 5 — PRINTERS + TONER
   ============================================================ */

/* Toner Stock strip at top of printers page */
.stock-strip {
    display: flex; gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}
.stock-chip {
    flex: 0 0 auto;
    min-width: 150px;
    display: flex; flex-direction: column; align-items: center;
    padding: 12px 14px;
    border-radius: var(--itops-r-md);
    text-decoration: none;
    border: 1.5px solid var(--itops-border);
    transition: transform 0.1s, box-shadow 0.1s;
    background: var(--itops-bg-card);
}
.stock-chip:hover { transform: translateY(-2px); box-shadow: var(--itops-sh-md); }
.stock-chip.stock-ok      { border-color: var(--itops-ok); }
.stock-chip.stock-warning { border-color: var(--itops-warn); background: var(--itops-warn-bg); }
.stock-chip.stock-danger  { border-color: var(--itops-crit); background: var(--itops-crit-bg); }
.stock-label {
    font-size: 0.8rem; font-weight: 600;
    color: var(--itops-fg);
    text-align: center;
    margin-bottom: 4px;
    max-width: 140px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.stock-count {
    font-size: 1.6rem; font-weight: 800; line-height: 1;
    color: var(--itops-fg);
}
.stock-chip.stock-warning .stock-count { color: var(--itops-warn-fg); }
.stock-chip.stock-danger  .stock-count { color: var(--itops-crit); }
.stock-meta {
    font-size: 0.68rem;
    color: var(--itops-fg-subtle);
    margin-top: 2px;
}

/* Toner compatibility picker chips (inside printer modal) */
.toner-chip-picker {
    display: flex; flex-wrap: wrap; gap: 6px;
    padding: 10px;
    border: 1px solid var(--itops-border);
    border-radius: var(--itops-r-md);
    background: var(--itops-bg);
    min-height: 54px;
}
.toner-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    border: 1.5px solid var(--itops-border);
    border-radius: var(--itops-r-pill);
    background: var(--itops-bg-card);
    cursor: pointer;
    font-size: 0.82rem;
    margin: 0;
    transition: border-color 0.1s, background 0.1s;
}
.toner-chip input { display: none; }
.toner-chip:hover { border-color: var(--itops-indigo); }
.toner-chip.active {
    background: var(--itops-indigo-light);
    border-color: var(--itops-indigo);
    color: var(--itops-indigo);
    font-weight: 600;
}
.toner-chip.active::before {
    content: '✓'; font-weight: bold; margin-right: 2px;
}


/* ============================================================
   PHASE 6 — REQUISITION + GATE PASS
   ============================================================ */

/* Stage pipeline (horizontal, used on requisition_details.php) */
.stage-pipeline {
    display: flex;
    gap: 0;
    overflow-x: auto;
    padding: 10px 0 4px;
    position: relative;
}
.stage-step {
    flex: 1 1 0;
    min-width: 90px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    position: relative;
}
.stage-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 50%; right: -50%;
    height: 3px;
    background: var(--itops-border);
    z-index: 0;
}
.stage-step.done:not(:last-child)::after {
    background: var(--itops-ok);
}
.stage-dot {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--itops-bg); color: var(--itops-fg-subtle);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 700;
    border: 2px solid var(--itops-border);
    position: relative; z-index: 1;
    transition: all 0.2s;
}
.stage-step.done .stage-dot {
    background: var(--itops-ok); color: #fff; border-color: var(--itops-ok);
}
.stage-step.current .stage-dot {
    background: var(--itops-indigo); color: #fff; border-color: var(--itops-indigo);
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.2);
    transform: scale(1.1);
}
.stage-text {
    font-size: 0.68rem;
    color: var(--itops-fg-subtle);
    margin-top: 6px;
    line-height: 1.2;
    max-width: 90px;
    overflow-wrap: break-word;
}
.stage-step.done .stage-text { color: var(--itops-ok); font-weight: 600; }
.stage-step.current .stage-text { color: var(--itops-indigo); font-weight: 700; }

/* Mini stage indicator (used in list rows) */
.stage-mini { min-width: 180px; }
.stage-mini-bar {
    width: 100%; height: 6px;
    background: var(--itops-border);
    border-radius: 3px;
    overflow: hidden;
}
.stage-mini-fill {
    height: 100%;
    background: linear-gradient(to right, var(--itops-indigo), var(--itops-ok));
    border-radius: 3px;
    transition: width 0.3s;
}
.stage-mini-label {
    font-size: 0.72rem;
    color: var(--itops-fg-muted);
    margin-top: 3px;
}

/* Timeline (vertical, reused on both requisition + gate pass details) */
.timeline {
    position: relative;
    padding-left: 0;
}
.timeline-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    position: relative;
}
.timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 15px; top: 42px; bottom: -4px;
    width: 2px;
    background: var(--itops-border);
}
.timeline-dot {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.9rem;
    color: #fff;
    position: relative; z-index: 1;
}
.timeline-dot.indigo  { background: var(--itops-indigo); }
.timeline-dot.success { background: var(--itops-ok); }
.timeline-dot.danger  { background: var(--itops-crit); }

/* Employee picker */
.emp-picker { position: relative; }
.emp-picker-results {
    position: absolute;
    top: 100%; left: 0; right: 0;
    margin-top: 2px;
    background: var(--itops-bg-card);
    border: 1px solid var(--itops-border);
    border-radius: var(--itops-r-md);
    box-shadow: var(--itops-sh-lg);
    z-index: 1050;
    max-height: 320px;
    overflow-y: auto;
}
.emp-picker-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--itops-border);
    transition: background 0.1s;
}
.emp-picker-item:last-child { border-bottom: 0; }
.emp-picker-item:hover { background: var(--itops-indigo-light); }
.emp-picker-item.selected {
    background: var(--itops-ok-bg);
    border: 1px solid var(--itops-ok);
    border-radius: var(--itops-r-md);
}
.emp-picker-avatar {
    width: 36px; height: 36px; flex-shrink: 0;
    border-radius: 50%;
    background: var(--itops-indigo);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
    font-size: 0.95rem;
}
.emp-picker-name { font-weight: 600; font-size: 0.9rem; }
.emp-picker-sub  { font-size: 0.78rem; color: var(--itops-fg-muted); }
.emp-picker-empty {
    padding: 12px;
    font-size: 0.85rem;
    color: var(--itops-fg-muted);
    text-align: center;
}
.emp-picker-selected { margin-top: 6px; }


/* ============================================================
   PHASE 6.1 — STAT CARDS, POPOVERS, DRAG, FLASH, EDIT MODE
   ============================================================ */

.stat-block {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: var(--itops-bg-card);
    border: 1.5px solid var(--itops-border);
    border-left: 4px solid var(--accent, var(--itops-indigo));
    border-radius: var(--itops-r-md);
    text-decoration: none;
    color: inherit;
    transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
    min-height: 86px;
}
.stat-block:hover {
    transform: translateY(-2px);
    box-shadow: var(--itops-sh-md);
    color: inherit;
}
.stat-block.active {
    background: color-mix(in srgb, var(--accent) 8%, white);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.stat-block-icon {
    width: 48px; height: 48px; flex-shrink: 0;
    background: color-mix(in srgb, var(--accent) 12%, white);
    color: var(--accent);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.stat-block-body { flex-grow: 1; min-width: 0; }
.stat-block-value {
    font-size: 1.75rem; font-weight: 800; line-height: 1;
    color: var(--itops-fg);
    letter-spacing: -0.02em;
}
.stat-block-label {
    font-size: 0.82rem; font-weight: 700;
    color: var(--itops-fg);
    margin-top: 4px;
}
.stat-block-sub {
    font-size: 0.72rem;
    color: var(--itops-fg-muted);
    margin-top: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.itops-popover.popover {
    max-width: 320px;
    border: 1px solid var(--itops-border);
    box-shadow: var(--itops-sh-lg);
    font-size: 0.85rem;
}
.itops-popover .popover-body { padding: 10px 12px; }
.pop-emp-name {
    font-weight: 700; font-size: 0.95rem;
    color: var(--itops-indigo);
    margin-bottom: 6px;
}
.pop-emp-row {
    display: block;
    font-size: 0.78rem;
    color: var(--itops-fg-muted);
    padding: 2px 0;
}
.pop-emp-row i { color: var(--itops-indigo); margin-right: 4px; }
.pop-item-title { font-weight: 700; color: var(--itops-indigo); margin-bottom: 4px; }
.pop-item-desc { font-size: 0.78rem; color: var(--itops-fg-muted); margin: 4px 0; }
.pop-item-meta { font-size: 0.78rem; margin-top: 4px; }

.js-pop {
    text-decoration: underline dotted;
    text-decoration-color: var(--itops-fg-subtle);
    text-underline-offset: 3px;
    cursor: help;
}
.js-pop:hover { color: var(--itops-indigo); }

.drag-handle {
    cursor: grab;
    text-align: center;
    font-size: 1.1rem;
    user-select: none;
}
.drag-handle:active { cursor: grabbing; }
.sortable-ghost {
    opacity: 0.4;
    background: var(--itops-indigo-light) !important;
}

.flash-save {
    animation: flash-save-anim 1.2s ease-out;
}
@keyframes flash-save-anim {
    0%   { background: color-mix(in srgb, var(--itops-ok) 25%, white); }
    100% { background: transparent; }
}

.edit-mode .view-only { display: none !important; }
.edit-mode .edit-only  { display: revert !important; }
.edit-only             { display: none   !important; }
.inline-edit-input {
    display: inline-block;
    width: auto;
    min-width: 160px;
}

.attach-item {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--itops-border);
    border-radius: var(--itops-r-md);
    background: var(--itops-bg-card);
    margin-bottom: 6px;
}
.attach-item-icon {
    width: 36px; height: 36px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: var(--itops-indigo-light);
    color: var(--itops-indigo);
    border-radius: 6px;
    font-size: 1.1rem;
}
.attach-item-body { flex-grow: 1; min-width: 0; }
.attach-item-name {
    font-weight: 600; font-size: 0.9rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.attach-item-meta { font-size: 0.75rem; color: var(--itops-fg-muted); }

.upload-row {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 8px;
    background: var(--itops-bg);
    border-radius: var(--itops-r-md);
    margin-bottom: 4px;
}
.upload-row .filename-display {
    flex: 0 0 180px; min-width: 0;
    font-size: 0.78rem; color: var(--itops-fg-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}


/* ============================================================
   SHARED MONITOR / STATUS COMPONENTS
   (status pills, monitor list rows — reused by Email Tracker,
    Licenses, and other list-style modules)
   ============================================================ */
/* Status pill — the UP/DOWN badge */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    line-height: 1.5;
    white-space: nowrap;
}
.status-pill::before {
    content: '';
    width: 6px; height: 6px;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
}
.status-pill.status-up      { background: #D1FAE5; color: #065F46; }
.status-pill.status-down    { background: #FEE2E2; color: #991B1B; animation: pill-pulse-red 2s ease-in-out infinite; }
.status-pill.status-paused  { background: #F3F4F6; color: #4B5563; }
.status-pill.status-pending { background: #FEF3C7; color: #92400E; }

@keyframes pill-pulse-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.5); }
    50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.0); }
}

/* Monitor section header */
.monitor-section-head {
    margin: 24px 0 10px;
    display: flex; align-items: center;
    justify-content: space-between;
}
.monitor-section-head h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--itops-fg);
    margin: 0;
}
.monitor-section-head h3 i { color: var(--itops-indigo); margin-right: 6px; }

/* Monitor list / rows — the signature UR card-rows */
.monitor-list {
    overflow: hidden;
    padding: 0 !important;
}
.monitor-row {
    display: grid;
    grid-template-columns:
        90px             /* status pill */
        minmax(0, 1.3fr) /* name + target */
        minmax(140px, 1fr) /* bars */
        90px             /* uptime % */
        90px             /* avg response */
        75px             /* last check */
        50px;            /* actions menu */
    gap: 20px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--itops-border);
    align-items: center;
    transition: background 0.1s;
}
.monitor-row:last-child { border-bottom: none; }
.monitor-row:hover { background: var(--itops-bg); }
.monitor-row.paused { opacity: 0.65; }
.monitor-row.paused:hover { opacity: 1; background: var(--itops-bg); }

/* Monitor info — label + subtitle */
.monitor-info { min-width: 0; }
.monitor-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--itops-fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.monitor-target {
    font-size: 0.78rem;
    color: var(--itops-fg-muted);
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin-top: 2px;
}
.monitor-error {
    font-size: 0.72rem;
    color: #991B1B;
    margin-top: 4px;
    display: flex; align-items: center; gap: 4px;
}

/* Uptime bars — the signature pattern */
.monitor-bars-wrap { min-width: 0; }
.monitor-bars {
    display: flex;
    gap: 2px;
    align-items: center;
    height: 28px;
}
.monitor-bars-meta {
    font-size: 0.68rem;
    color: var(--itops-fg-muted);
    margin-top: 4px;
}
.monitor-bars-empty {
    font-size: 0.72rem;
    font-style: italic;
}

/* Metric cells */
.monitor-metric { text-align: right; min-width: 0; }
.monitor-metric .metric-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--itops-fg);
    line-height: 1.1;
    font-feature-settings: 'tnum';
}
.monitor-metric .metric-value small {
    font-size: 0.68rem;
    font-weight: 600;
    opacity: 0.65;
    margin-left: 1px;
}
.monitor-metric .metric-label {
    font-size: 0.68rem;
    color: var(--itops-fg-muted);
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.monitor-last {
    text-align: right;
}

.monitor-actions { text-align: right; }

/* Responsive — mobile card view */
@media (max-width: 991px) {
    .monitor-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info      status"
            "bars      bars"
            "metrics   actions";
        row-gap: 10px;
    }
    .monitor-status  { grid-area: status; text-align: right; }
    .monitor-info    { grid-area: info; }
    .monitor-bars-wrap { grid-area: bars; }
    .monitor-metric  { display: none; }
    .monitor-last    { display: none; }
    .monitor-actions { grid-area: actions; }

    /* Show metric values inline on mobile */
    .monitor-row::after {
        content: '';
        display: none;
    }
}

/* ============================================================
   PHASE 8 — KNOWLEDGE BASE
   ============================================================ */

/* KB tabs */
.kb-tabs .nav-link {
    color: var(--itops-fg-muted);
    padding: 0.5rem 1rem;
    border-radius: 999px;
    font-weight: 500;
    display: flex; align-items: center; gap: 6px;
    transition: all 0.1s;
}
.kb-tabs .nav-link:hover {
    background: var(--itops-bg);
    color: var(--itops-fg);
}
.kb-tabs .nav-link.active {
    background: var(--itops-indigo);
    color: white;
}
.kb-tab-count {
    display: inline-block;
    background: rgba(0,0,0,0.08);
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
}
.kb-tabs .nav-link.active .kb-tab-count {
    background: rgba(255,255,255,0.25);
}

/* KB sidebar (category list) */
.kb-sidebar {
    position: sticky;
    top: 1rem;
}
.kb-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 6px;
    color: var(--itops-fg);
    text-decoration: none;
    font-size: 0.88rem;
    margin-bottom: 2px;
    transition: background 0.1s;
}
.kb-cat-item:hover {
    background: var(--itops-bg);
    color: var(--itops-fg);
}
.kb-cat-item.active {
    background: var(--itops-indigo-light);
    color: var(--itops-indigo);
    font-weight: 600;
}
.kb-cat-item .badge {
    background: rgba(0,0,0,0.08);
    color: var(--itops-fg-muted);
    font-size: 0.7rem;
    font-weight: 600;
}
.kb-cat-item.active .badge {
    background: var(--itops-indigo);
    color: white;
}

/* KB article row (list) */
.kb-article-row {
    height: auto !important;  /* Override .dash-card { height: 100% } from Phase 2 */
}
.kb-article-row:hover {
    box-shadow: var(--itops-sh-md);
    transform: translateY(-1px);
    transition: all 0.15s;
}
.kb-article-row h5 a {
    color: var(--itops-fg);
    font-weight: 700;
}
.kb-article-row h5 a:hover {
    color: var(--itops-indigo);
}

/* KB article full view */
.kb-article-card {
    max-width: 820px;
    margin: 0 auto;
}
.kb-article-title {
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.25;
    color: var(--itops-fg);
    letter-spacing: -0.02em;
    margin-bottom: 8px;
}
.kb-article-meta {
    font-size: 0.85rem;
    color: var(--itops-fg-muted);
    padding-bottom: 16px;
    border-bottom: 1px solid var(--itops-border);
}
.kb-article-body {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--itops-fg);
}
.kb-article-body h1, .kb-article-body h2, .kb-article-body h3 {
    font-weight: 700;
    margin-top: 1.6em;
    margin-bottom: 0.5em;
    letter-spacing: -0.02em;
}
.kb-article-body h1 { font-size: 1.6rem; }
.kb-article-body h2 { font-size: 1.35rem; }
.kb-article-body h3 { font-size: 1.12rem; }
.kb-article-body p { margin-bottom: 1em; }
.kb-article-body ul, .kb-article-body ol { padding-left: 1.5em; margin-bottom: 1em; }
.kb-article-body li { margin-bottom: 0.3em; }
.kb-article-body blockquote {
    border-left: 4px solid var(--itops-indigo);
    background: var(--itops-indigo-light);
    padding: 0.6em 1em;
    margin: 1em 0;
    border-radius: 0 6px 6px 0;
    color: var(--itops-fg);
}
.kb-article-body pre {
    background: #1f2937;
    color: #f3f4f6;
    padding: 1em;
    border-radius: 8px;
    font-size: 0.88rem;
    overflow-x: auto;
    margin-bottom: 1em;
}
.kb-article-body code {
    background: var(--itops-bg);
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 0.88em;
}
.kb-article-body pre code { background: transparent; padding: 0; color: inherit; }
.kb-article-body a { color: var(--itops-indigo); text-decoration: underline; }
.kb-article-body img { max-width: 100%; height: auto; border-radius: 6px; }

/* KB file + link cards */
.kb-file-card, .kb-link-card {
    transition: all 0.15s;
}
.kb-file-card:hover, .kb-link-card:hover {
    box-shadow: var(--itops-sh-md);
    transform: translateY(-1px);
}
.kb-file-icon {
    width: 48px; height: 48px;
    background: var(--itops-indigo-light);
    color: var(--itops-indigo);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    flex-shrink: 0;
}

/* Quill tweaks to match theme */
.ql-toolbar.ql-snow {
    border-color: var(--itops-border);
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background: var(--itops-bg);
}
.ql-container.ql-snow {
    border-color: var(--itops-border);
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}
.ql-editor { font-size: 0.95rem; min-height: 350px; }

/* Indigo-subtle utility (used in badges) */
:root { --itops-indigo-light: #EEF2FF; }

/* ============================================================
   PHASE 9 — EMAIL ASSET TRACKER
   ============================================================ */

/* Clickable stat cards (filter pills) */
.email-stat {
    display: block;
    background: var(--itops-bg-card);
    border: 1.5px solid var(--itops-border);
    border-radius: var(--itops-r-md);
    padding: 14px 16px 12px;
    text-align: left;
    text-decoration: none;
    color: var(--itops-fg);
    transition: all 0.12s;
    position: relative;
    overflow: hidden;
    height: 100%;
}
.email-stat::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: var(--accent, var(--itops-indigo));
    opacity: 0.5;
    transition: opacity 0.12s;
}
.email-stat:hover {
    box-shadow: var(--itops-sh-md);
    transform: translateY(-1px);
    color: var(--itops-fg);
}
.email-stat:hover::before { opacity: 1; }
.email-stat.active {
    border-color: var(--accent, var(--itops-indigo));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, var(--itops-indigo)) 15%, transparent);
}
.email-stat.active::before { opacity: 1; }
.email-stat-icon {
    color: var(--accent, var(--itops-indigo));
    font-size: 1rem;
    opacity: 0.65;
    margin-bottom: 6px;
}
.email-stat-value {
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--itops-fg);
}
.email-stat-label {
    font-size: 0.78rem;
    color: var(--itops-fg-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 4px;
    font-weight: 600;
}

/* New status pill variants (Phase 7's up/down/paused already exist) */
.status-pill.status-active    { background: #D1FAE5; color: #065F46; }
.status-pill.status-available { background: #E0F2FE; color: #075985; }
.status-pill.status-renaming  { background: #FEF3C7; color: #92400E; }
.status-pill.status-suspended { background: #F3F4F6; color: #4B5563; }
.status-pill.status-deleted   { background: #FEE2E2; color: #991B1B; }

/* Email list uses the same monitor-row grid, but with its own column widths */
.email-list .email-row {
    grid-template-columns:
        90px             /* status pill */
        minmax(0, 1.5fr) /* email + user */
        90px             /* past users count */
        90px             /* last updated */
        110px;           /* actions */
    gap: 16px;
}
@media (max-width: 991px) {
    .email-list .email-row {
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "info    status"
            "metrics actions";
        row-gap: 10px;
    }
    .email-list .email-row .monitor-metric { display: none; }
    .email-list .email-row .monitor-last   { display: none; }
}

/* Assignment timeline */
.email-timeline { position: relative; padding-left: 20px; }
.email-timeline::before {
    content: '';
    position: absolute;
    left: 7px; top: 8px; bottom: 8px;
    width: 2px;
    background: var(--itops-border);
}
.et-item {
    position: relative;
    padding: 0 0 20px 24px;
}
.et-item:last-child { padding-bottom: 0; }
.et-marker {
    position: absolute;
    left: -4px; top: 6px;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--itops-bg-card);
    border: 3px solid var(--itops-border);
    z-index: 1;
}
.et-item.et-current .et-marker {
    background: #10B981;
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.et-user {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--itops-fg);
    margin-bottom: 2px;
}
.et-user .bi { color: var(--itops-fg-muted); margin-right: 4px; }
.et-dates {
    color: var(--itops-fg-muted);
    margin-bottom: 3px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Phase 9.1 — employee search dropdown */
.emp-results {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--itops-bg-card);
    border: 1px solid var(--itops-border);
    border-radius: 6px;
    box-shadow: var(--itops-sh-md);
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
    margin-top: 4px;
}
.emp-result-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--itops-border);
    transition: background 0.1s;
}
.emp-result-item:last-child { border-bottom: none; }
.emp-result-item[data-id]:hover { background: var(--itops-indigo-light); }
.emp-result-item[data-id] { cursor: pointer; }

/* Status pill: Blocked variant for Phase 9.1 (gray slash) */
.status-pill.status-blocked { background: #F3F4F6; color: #4B5563; }

/* ============================================================
   PHASE 10 — LICENSES
   ============================================================ */

/* Expired row — static red tint */
.license-row.license-expired {
    background: rgba(220, 38, 38, 0.06) !important;
}
.license-row.license-expired:hover {
    background: rgba(220, 38, 38, 0.10) !important;
}

/* Expiring in 15 days — amber subtle BLINKING */
@keyframes license-blink {
    0%, 100% { background: rgba(245, 158, 11, 0.07); }
    50%      { background: rgba(245, 158, 11, 0.22); }
}
.license-row.license-expiring {
    animation: license-blink 1.6s ease-in-out infinite;
}
.license-row.license-expiring:hover {
    animation-play-state: paused;
    background: rgba(245, 158, 11, 0.28) !important;
}

/* Stat card variant that pulses when there are items needing attention */
@keyframes stat-blink {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); border-color: #F59E0B; }
    50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0.0); border-color: #FBBF24; }
}
.email-stat.blinking {
    animation: stat-blink 1.8s ease-in-out infinite;
}