/* =======================================================
   HPIT Intelligence Architect — Design System v2.0
   Light Mode Foundation + Purple Accent Scale
   ======================================================= */

/* --- Token System --- */
:root {
    /* Neutral Tier — Layered depth without clutter */
    --bg-main:      #F8FAFC;  /* Soft canvas — primary surface */
    --sidebar:      #F1F5F9;  /* Spine — slightly tinted white */
    --bg-deep:      #FFFFFF;  /* Cards — pure white foreground */
    --sidebar-hover:#E8EDF4;  /* Hover/active tint */
    --border:       #E2E8F0;  /* Subtle stroke */
    --border-strong:#CBD5E1;  /* Stronger strokes / dividers */

    /* Typography Scale — Gracefully muted hierarchy */
    --text-main:    #1E293B;  /* Slate 800 (was 900) — anchor headings */
    --text-body:    #334155;  /* Slate 700 (was 800) — body data */
    --text-muted:   #64748B;  /* Slate 500 — metadata, context */
    --sidebar-text: #475569;  /* Slate 600 — Nav labels */

    /* ── Indigo Ramp (full 11-stop scale) ─────────────────
       Source: Indigo 50–950
       Reference the ramp directly for one-off overrides;
       use the semantic aliases below for all component work.
    ──────────────────────────────────────────────────────── */
    --indigo-50:  #EEF2FF;
    --indigo-100: #E0E7FF;
    --indigo-200: #C7D2FE;
    --indigo-300: #A5B4FC;
    --indigo-400: #818CF8;
    --indigo-500: #6366F1;
    --indigo-600: #4F46E5;
    --indigo-700: #4338CA;
    --indigo-800: #3730A3;
    --indigo-900: #312E81;
    --indigo-950: #1E1B4B;

    /* ── Semantic Accent Aliases ───────────────────────────
       Map ramp weights to intent — never use raw ramp tokens
       in components; always go through these aliases.
    ──────────────────────────────────────────────────────── */
    --accent:         var(--indigo-600); /* Primary actions, brand identity */
    --accent-hover:   var(--indigo-700); /* Interaction feedback — hover/active */
    --accent-active:  var(--indigo-800); /* Pressed / focus-visible ring source */
    --accent-light:   var(--indigo-400); /* Links, secondary interactive text */
    --accent-subtle:  var(--indigo-500); /* Mid-weight — icons, accented UI text */
    --accent-bg:      var(--indigo-100); /* Badge / pill fills */
    --accent-bg-soft: var(--indigo-50);  /* Very subtle tints — row highlights */
    --accent-border:  var(--indigo-300); /* Accent-tinted borders */

    /* Semantic States */
    --success:        #059669;
    --success-bg:     #D1FAE5;
    --success-border: #6EE7B7;
    --danger:         #DC2626;
    --danger-bg:      #FEE2E2;
    --danger-border:  #FCA5A5;
    --warning:        #D97706;
    --warning-bg:     #FEF3C7;
    --warning-border: #FCD34D;
    --info:           #0284C7;
    --info-bg:        #E0F2FE;

    /* Elevation Shadows (light-aware) */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
    --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
    --shadow-md: 0 4px 12px rgba(15,23,42,0.1),  0 2px 6px rgba(15,23,42,0.06);
    --shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 4px 12px rgba(15,23,42,0.07);
    --shadow-xl: 0 20px 48px rgba(15,23,42,0.14), 0 8px 24px rgba(15,23,42,0.08);
}


/* =======================================================
   Dark Mode — Enterprise-Grade Token Overrides
   Double Distance Rule · Elevation Principle · OKLCH Semantics
   ======================================================= */
[data-theme="dark"] {
    /* ── Neutral Hierarchy (5% increment Double Distance Rule) ──
       Surfaces get LIGHTER as they elevate.
       bg-main (darkest) → sidebar → bg-deep (cards, lightest)
    ──────────────────────────────────────────────────────────── */
    --bg-main:       #171B26;  /* L0 — comfortable dark, not a cave  */
    --sidebar:       #1E2233;  /* L1 — spine, +5% from bg-main       */
    --bg-deep:       #252A3A;  /* L2 — cards/modals, +5% from sidebar */
    --sidebar-hover: #2D3348;  /* Hover tint — perceptibly distinct   */
    --border:        #353B52;  /* Subtle edge — brighter in dark mode  */
    --border-strong: #454D68;  /* Strong dividers / active borders     */

    /* ── Typography (restored legibility without pure white) ───────────────── */
    --text-main:     #F1F5F9;  /* Slate 100 — crisp primary headings */
    --text-body:     #E2E8F0;  /* Slate 200 — highly readable body data */
    --text-muted:    #94A3B8;  /* Slate 400 — secondary metadata */
    --sidebar-text:  #94A3B8;

    /* ── Brand Ramp Shift (300/400 primary on dark bg) ──────── */
    --accent:         var(--indigo-400);
    --accent-hover:   var(--indigo-500);
    --accent-active:  var(--indigo-600);
    --accent-light:   var(--indigo-300);
    --accent-subtle:  var(--indigo-400);
    --accent-bg:      rgba(99,102,241, 0.15);
    --accent-bg-soft: rgba(99,102,241, 0.08);
    --accent-border:  rgba(129,140,248, 0.30);

    /* ── Semantic States (OKLCH-balanced: L=0.75 C=0.18) ──── */
    --success:        oklch(0.75 0.18 155);
    --success-bg:     oklch(0.75 0.18 155 / 0.12);
    --success-border: oklch(0.75 0.18 155 / 0.30);
    --danger:         oklch(0.75 0.18 25);
    --danger-bg:      oklch(0.75 0.18 25 / 0.12);
    --danger-border:  oklch(0.75 0.18 25 / 0.30);
    --warning:        oklch(0.75 0.18 80);
    --warning-bg:     oklch(0.75 0.18 80 / 0.12);
    --warning-border: oklch(0.75 0.18 80 / 0.30);
    --info:           oklch(0.75 0.18 235);
    --info-bg:        oklch(0.75 0.18 235 / 0.12);

    /* ── Elevation Shadows (edge-glow on dark) ──────────────── */
    --shadow-xs: 0 0 0 1px rgba(255,255,255,0.04);
    --shadow-sm: 0 0 0 1px rgba(255,255,255,0.06), 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg: 0 0 0 1px rgba(255,255,255,0.06), 0 8px 24px rgba(0,0,0,0.5);
    --shadow-xl: 0 0 0 1px rgba(255,255,255,0.08), 0 20px 48px rgba(0,0,0,0.6);
}

/* ── Dark scrollbar ── */
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--border-strong); }
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ── Dark auth page ── */
[data-theme="dark"] .auth-body {
    background: #0B0E17;
    animation: none;
}

[data-theme="dark"] .auth-body::before {
    background: radial-gradient(ellipse, rgba(129,140,248,0.18) 0%, transparent 70%);
    filter: blur(100px);
}

[data-theme="dark"] .auth-body::after {
    background: radial-gradient(ellipse, rgba(99,102,241,0.14) 0%, transparent 70%);
    filter: blur(120px);
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-body);
    margin: 0;
    display: flex;
    height: 100vh;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Typography --- */
h1, h2, h3, h4 { margin-top: 0; font-weight: 700; color: var(--text-main); }

h1 {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--text-main);
    background: none;
    -webkit-text-fill-color: var(--text-main);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

h1 .material-symbols-rounded {
    font-size: 1.15em;
    flex-shrink: 0;
}

h2 {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-main);
}

h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-main);
}

p { line-height: 1.6; margin-top: 0; }

a { color: var(--accent-light); text-decoration: none; transition: color 0.12s; }
a:hover { color: var(--accent); }

.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent); }

/* Links that are secondary/lower-priority stop at 400 by default,
   stepping up to 600 (--accent) only on deliberate hover interaction. */
.link-secondary { color: var(--accent-light); }
.link-secondary:hover { color: var(--accent-subtle); }

.gradient-text {
    /* 600 → 400: brand gradient reads light-to-lighter, not dark-to-light */
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 99px; transition: background 0.15s; }
/* Subtle brand moment — scrollbar steps to 400 on hover, not just grey */
::-webkit-scrollbar-thumb:hover { background: var(--accent-light); }

/* --- Animations --- */
@keyframes spin {
    100% { transform: rotate(360deg); }
}
@keyframes bellPulse {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(12deg); }
    20% { transform: rotate(-10deg); }
    30% { transform: rotate(6deg); }
    40% { transform: rotate(0deg); }
}
@keyframes badgePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}
@keyframes slideInRight {
    from { transform: translateX(110%); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
@keyframes slideInDown {
    from { transform: translateY(-120%) scale(0.95); opacity: 0; }
    to   { transform: translateY(0)     scale(1);    opacity: 1; }
}
@keyframes letterDrop {
    0%   { transform: translateY(-16px); opacity: 0; }
    100% { transform: translateY(0);     opacity: 1; }
}
/* --- Global Icon Standards --- */
/* Enforce that icons seamlessly match their surrounding typography, stripping scattered color treatments */
.material-symbols-rounded, .material-symbols-outlined {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
    opacity: 0.85; /* Soften geometry to retain focus on typography */
}
@keyframes slideOutRight {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(20px); }
}
@keyframes fadeInUp {
    0%   { opacity: 0; transform: translateY(12px) scale(0.99); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes fadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* panic / scream — triggered by "!!!" phrases in the typing controller */
@keyframes panicShake {
    0%   { transform: translateX(0)     scale(1);    color: inherit; }
    4%   { transform: translateX(-8px)  scale(1.04); color: #D946EF; }
    8%   { transform: translateX(8px)   scale(1.02); color: #A855F7; }
    12%  { transform: translateX(-7px)  scale(1.04); color: #D946EF; }
    16%  { transform: translateX(7px)   scale(1.02); color: #A855F7; }
    20%  { transform: translateX(-6px)  scale(1.03); color: #D946EF; }
    24%  { transform: translateX(6px)   scale(1);    color: #A855F7; }
    28%  { transform: translateX(-5px)  scale(1.02); color: #D946EF; }
    32%  { transform: translateX(5px)   scale(1);    color: #A855F7; }
    36%  { transform: translateX(-4px)  scale(1.01); color: #D946EF; }
    40%  { transform: translateX(4px)   scale(1);    color: #A855F7; }
    44%  { transform: translateX(-3px)  scale(1);    color: #D946EF; }
    48%  { transform: translateX(3px)   scale(1);    color: #A855F7; }
    52%  { transform: translateX(-2px)  scale(1);    color: #D946EF; }
    56%  { transform: translateX(2px)   scale(1);    color: inherit; }
    60%  { transform: translateX(-1px)  scale(1);    color: inherit; }
    65%  { transform: translateX(1px);               color: inherit; }
    70%  { transform: translateX(0); }
    100% { transform: translateX(0)     scale(1);    color: inherit; }
}

.animate-panic {
    display: inline-block;
    animation: panicShake 1.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
    transform-origin: center;
}

/* View Transitions */
::view-transition-old(root) { animation: 0.2s ease-out fadeOut; }
::view-transition-new(root) { animation: 0.25s ease-out fadeInUp; }

/* Reduced motion / disabled animations */
[data-animations="disabled"] * {
    transition: none !important;
    animation: none !important;
}

/* --- Sidebar --- */
nav.sidebar {
    width: 220px;
    background: var(--sidebar);
    color: var(--sidebar-text);
    padding: 1.25rem 0.875rem 1.5rem;
    flex-shrink: 0;
    border-right: 1px solid var(--border);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    display: flex;
    flex-direction: column;
}

.logo {
    margin: 0 0 1.5rem 0;
    padding: 0.5rem 0.5rem 1.25rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
}

.logo .logo-svg {
    width: 56px;
    height: auto;
    color: var(--accent-light);
    flex-shrink: 0;
}

.logo-wordmark {
    color: var(--accent-light);
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 600;
    font-size: 2rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
}

/* Nav section labels */
.nav-section-label {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    padding: 0 0.5rem;
    margin: 1.25rem 0 0.375rem;
    display: block;
}

.nav-links { list-style: none; padding: 0; margin: 0; }
.nav-links li { margin-bottom: 1px; }

.nav-link {
    color: var(--sidebar-text);
    text-decoration: none;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    transition: background 0.12s ease, color 0.12s ease;
    font-weight: 500;
    font-size: 0.875rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.nav-link-inner {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.nav-link .material-symbols-rounded {
    font-size: 1.1rem;
    color: var(--text-muted);
    transition: color 0.12s ease;
    flex-shrink: 0;
}

.nav-link:hover {
    background: var(--sidebar-hover);
    color: var(--text-main);
}

/* Hover: icon steps to 500 (--accent-subtle) — you're browsing, not committed */
.nav-link:hover .material-symbols-rounded {
    color: var(--accent-subtle);
}

.nav-link.active {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}

/* Active: icon hits full 600 — you are here, maximum signal */
.nav-link.active .material-symbols-rounded {
    color: var(--accent);
}

/* Left accent bar */
.nav-link::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%) scaleY(0);
    width: 3px; height: 55%;
    background: var(--accent);
    border-radius: 0 3px 3px 0;
    transition: transform 0.12s ease;
}
.nav-link.active::before, .nav-link:hover::before {
    transform: translateY(-50%) scaleY(1);
}

/* Sub-nav */
.nav-sub-link {
    padding-left: 2.25rem !important;
    font-size: 0.8125rem !important;
    color: var(--text-muted) !important;
}
.nav-sub-link.active { color: var(--accent) !important; }

.dropdown-arrow { transition: transform 0.2s ease; }
.dropdown-arrow.open { transform: rotate(180deg); }

/* Sidebar footer */
.sidebar-footer {
    margin-top: auto;
    padding-top: 1rem;
}

/* --- Main Content --- */
main.content {
    flex-grow: 1;
    padding: 5rem 3.5rem 3rem;
    overflow-y: scroll;
    background: var(--bg-main);
    min-width: 0;
    min-height: 0;
}

.container { max-width: 1280px; margin: 0 auto; }

/* --- Page Header --- */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 2rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.page-header-meta {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
    font-weight: 400;
}

/* --- Cards --- */
.card {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 0;
}

.card-header {
    padding: 24px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.card-body { padding: 24px; }

/* --- Detail Panel (Entity Profile Pages) --- */
.detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 48px; /* 8pt × 6 — generous horizontal gutter */
}
.detail-grid--3col {
    grid-template-columns: 1fr 1fr 1fr;
}
.detail-grid > .detail-section {
    padding: 24px 0; /* 8pt × 3 vertical rhythm */
}
.detail-grid > .detail-section:not(:last-child) {
    border-right: 1px solid var(--border);
    padding-right: 24px;
}
.detail-grid > .detail-section + .detail-section {
    padding-left: 24px;
}
/* For 3-col grids, only the non-last columns get the divider */
.detail-grid--3col > .detail-section:nth-child(2) {
    border-right: 1px solid var(--border);
    padding-right: 24px;
}

.detail-section-title {
    font-size: 0.75rem; /* 12px — modular scale stop */
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 700;
    margin: 0 0 16px 0; /* 8pt × 2 */
}

.detail-field {
    margin-bottom: 16px; /* 8pt × 2 */
}
.detail-field:last-child {
    margin-bottom: 0;
}
.detail-field-label {
    font-size: 0.75rem; /* 12px — modular scale */
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 4px; /* 8pt × 0.5 — tight internal relationship */
}
.detail-field-value {
    font-size: 0.875rem;
    color: var(--text-body);
}
.detail-field-value--emphasis {
    font-weight: 600;
    color: var(--text-main);
}
.detail-field-value--link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent-light);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    transition: color 0.15s ease;
}
.detail-field-value--link:hover {
    color: var(--accent);
}

/* --- 3D Card Flip (People Grid) --- */
.person-card {
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 12px;
}
.person-card__inner {
    width: 100%;
    height: 100%;
}
.person-card__front {
    border-radius: 0;
    background: var(--bg-deep);
    border: none;
    box-shadow: none;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding: 24px 24px 16px;
    transition: background-color 0.15s;
    height: 100%;
}
.person-card:hover .person-card__front {
    background-color: var(--sidebar-hover);
}

/* --- Chat Attachments --- */
.chat-thumbnail {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.chat-thumbnail:hover {
    transform: scale(1.04);
    box-shadow: var(--shadow-sm);
}
.chat-file-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.5rem;
    padding: 0.4rem 0.75rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--accent-light);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    transition: border-color 0.12s, background 0.12s;
}
.chat-file-chip:hover {
    border-color: var(--accent-border);
    background: var(--accent-bg-soft);
}

/* --- Buttons --- */
.btn-action {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 8px 16px;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 0;
    color: var(--text-body);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.12s ease;
    white-space: nowrap;
    cursor: pointer;
    font-family: inherit;
    line-height: 1;
}

.btn-action:hover {
    /* Default ghost btn hover nudges toward brand without fully committing */
    background: var(--accent-bg-soft);
    border-color: var(--accent-border);
    color: var(--accent);
    box-shadow: var(--shadow-xs);
}

.btn-action.primary {
    background: var(--accent);       /* 600 — clear primary CTA */
    border-color: var(--accent);
    color: #fff;
}

.btn-action.primary:hover {
    background: var(--accent-hover); /* 700 — steps darker, confirms intent */
    border-color: var(--accent-hover);
    transform: translateY(-1px);
}

.btn-action.primary:active {
    background: var(--accent-active); /* 800 — pressed state, maximum feedback */
    border-color: var(--accent-active);
    transform: translateY(0);
}

.btn-action.danger {
    color: var(--danger);
    border-color: rgba(220,38,38,0.25);
}
.btn-action.danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
}

.btn-action .material-symbols-rounded { font-size: 1rem; }

/* --- Status Badges --- */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 4px 8px;
    border-radius: 0;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}
.status-badge.active, .status-badge.status-active               { background: var(--success-bg); color: var(--success); }
.status-badge.inactive, .status-badge.status-inactive           { background: var(--sidebar-hover); color: var(--text-muted); }
.status-badge.pending, .status-badge.status-pending             { background: var(--warning-bg); color: var(--warning); }
.status-badge.leased, .status-badge.status-leased               { background: var(--info-bg); color: var(--info); }
.status-badge.retired, .status-badge.status-retired             { background: var(--danger-bg); color: var(--danger); }
.status-badge.purple                                            { background: var(--accent-bg); color: var(--accent); }
/* Asset statuses */
.status-badge.status-deployed                                   { background: var(--info-bg); color: var(--info); }
.status-badge.status-available                                  { background: var(--success-bg); color: var(--success); }
.status-badge.status-maintenance                                { background: var(--warning-bg); color: var(--warning); }
.status-badge.status-decommissioned, .status-badge.status-retired { background: var(--sidebar-hover); color: var(--text-muted); }
/* Ticket statuses */
.status-badge.status-Open                                       { background: var(--accent-bg); color: var(--accent); }
.status-badge.status-InProgress                                 { background: var(--info-bg); color: var(--info); }
.status-badge.status-Resolved                                   { background: var(--success-bg); color: var(--success); }
/* Person/admin statuses */
.status-badge.status-invited                                    { background: var(--accent-bg); color: var(--accent); }
.status-badge.status-offboarding                                { background: var(--warning-bg); color: var(--warning); }
.status-badge.status-terminated                                 { background: var(--danger-bg); color: var(--danger); }

/* Card header h1/h2/h3 size constraint */
.card-header h1 { font-size: 1.125rem; margin: 0; }
.card-header h2 { margin: 0; }
.card-header h3 { margin: 0; }

/* --- Form Controls --- */
.form-group { margin-bottom: 1.25rem; }

.form-group label {
    display: block;
    margin-bottom: 0.375rem;
    color: var(--text-muted);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.9rem;
    transition: border-color 0.12s, box-shadow 0.12s;
    outline: none;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--accent);                         /* 600 border */
    box-shadow: 0 0 0 3px var(--accent-bg);              /* 100 ring — soft, branded */
}

.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--text-muted); }

/* --- Searchable Select --- */
.ss-wrapper {
    position: relative;
}
.ss-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.35rem;
}
.ss-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: var(--accent-bg);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    line-height: 1.4;
    white-space: nowrap;
}
.ss-tag-remove {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 700;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.ss-tag-remove:hover { opacity: 1; }
.ss-search {
    width: 100%;
    padding: 0.65rem 0.85rem;
    font-size: 0.875rem;
    font-family: 'Inter', sans-serif;
    background: var(--input-bg, var(--bg-deep));
    color: var(--text-main);
    border: 1px solid var(--border);
    border-radius: 6px;
    outline: none;
    transition: border 0.2s, box-shadow 0.2s;
}
.ss-search:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-bg);
}
.ss-search::placeholder { color: var(--text-muted); }
.ss-dropdown {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.ss-option {
    padding: 0.5rem 0.85rem;
    font-size: 0.8125rem;
    cursor: pointer;
    color: var(--text-body);
    transition: background 0.1s;
}
.ss-option:hover {
    background: var(--sidebar-hover);
    color: var(--text-main);
}
.ss-option--selected {
    background: var(--accent-bg);
    color: var(--accent);
    font-weight: 600;
}
.ss-option--selected:hover {
    background: var(--accent-bg);
}
.ss-no-results {
    padding: 0.75rem 0.85rem;
    font-size: 0.8125rem;
    color: var(--text-muted);
    font-style: italic;
}

/* --- Auth Pages --- */
.auth-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: linear-gradient(-45deg, #F8FAFC, #EEF2FF, #E0E7FF, #F1F5F9);
    background-size: 400% 400%;
    animation: gradientShift 18s ease infinite;
    margin: 0;
    padding: 1rem;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

/* Atmospheric glow orbs — instant ambiance before JS loads */
.auth-body::before,
.auth-body::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.auth-body::before {
    width: 600px;
    height: 400px;
    background: radial-gradient(ellipse, rgba(129,140,248,0.1) 0%, transparent 70%);
    top: -5%;
    right: -5%;
    filter: blur(80px);
}

.auth-body::after {
    width: 500px;
    height: 350px;
    background: radial-gradient(ellipse, rgba(99,102,241,0.08) 0%, transparent 70%);
    bottom: -10%;
    left: -5%;
    filter: blur(100px);
}

.auth-card {
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 3.5rem;
    width: 100%;
    max-width: 520px;
    box-shadow: var(--shadow-xl);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}



.auth-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.auth-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.auth-input-group label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.auth-input {
    background: var(--bg-main);
    border: 1px solid var(--border);
    color: var(--text-main);
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-family: inherit;
    font-size: 1.125rem;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    width: 100%;
}

.auth-input:focus {
    border-color: var(--accent);          /* 600 */
    box-shadow: 0 0 0 3px var(--accent-bg); /* 100 ring */
}

.auth-btn {
    background: var(--accent);  /* 600 — primary identity moment */
    color: #fff;
    border: none;
    padding: 1.125rem 1.5rem;
    border-radius: 8px;
    font-size: 1.125rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease, transform 0.15s ease;
    margin-top: 0.5rem;
}

.auth-btn:hover {
    background: var(--accent-hover);  /* 700 — deliberate step darker */
    transform: translateY(-1px);
}

.auth-btn:active {
    background: var(--accent-active); /* 800 — maximum confirmation */
    transform: translateY(0);
}

.auth-alert {
    background: var(--danger-bg);
    border: 1px solid var(--danger-border);
    color: var(--danger);
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    width: 100%;
    box-sizing: border-box;
}

/* --- Reveal Utility --- */
.reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.16,1,0.3,1), transform 0.5s cubic-bezier(0.16,1,0.3,1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* --- DataTables Light Override --- */
.dt-container .dt-search input,
.dt-container .dt-length select {
    background: var(--bg-deep) !important;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    color: var(--text-main) !important;
    padding: 0.55rem 1rem !important;
    font-family: inherit !important;
    font-size: 0.875rem !important;
    outline: none !important;
    box-shadow: none !important;
}
.dt-container .dt-search input:focus,
.dt-container .dt-length select:focus {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-bg) !important; /* 100 ring */
}
table.dataTable thead tr {
    background: var(--sidebar) !important;
}
table.dataTable thead th {
    background: var(--sidebar) !important;
    color: var(--text-muted) !important;
    font-size: 0.6875rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    border-bottom: 1px solid var(--border) !important;
    border-top: none !important;
    padding: 0.875rem 1rem !important;
}
table.dataTable tbody tr {
    background: var(--bg-deep) !important;
    border-bottom: 1px solid var(--border) !important;
    transition: background 0.1s !important;
}
/* Table row hover: purple-50 instead of grey — "this is clickable" in brand language */
table.dataTable tbody tr:hover {
    background: var(--accent-bg-soft) !important;
}
table.dataTable tbody td {
    color: var(--text-body) !important;
    padding: 0.875rem 1rem !important;
    font-size: 0.875rem !important;
    border-top: none !important;
}
table.dataTable.no-footer { border-bottom: 1px solid var(--border) !important; }
.dt-container .dt-paging .dt-paging-button {
    background: var(--bg-deep) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    transition: all 0.12s !important;
}
/* Current page: full 600 — you are on this page */
.dt-container .dt-paging .dt-paging-button.current {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
}
/* Pagination hover: 50 bg + 400 text — exploring, not committed */
.dt-container .dt-paging .dt-paging-button:hover:not(.current) {
    background: var(--accent-bg-soft) !important;
    border-color: var(--accent-border) !important;
    color: var(--accent-light) !important;
}

/* --- Prevent DataTables Flash of Unstyled Content --- */
table.display:not(.dataTable) { opacity: 0; }
.dt-container table.display { opacity: 1; transition: opacity 0.2s ease-in; }

/* --- Glass Table (admin pages) --- */
.glass-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-deep);
    border-radius: 0;
    border: 1px solid var(--border);
    overflow: hidden;
}
.glass-table th {
    background: var(--sidebar);
    text-align: left;
    padding: 16px;
    color: var(--text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    border-bottom: 1px solid var(--border);
}
.glass-table td {
    padding: 16px;
    border-bottom: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text-body);
}
.glass-table tbody tr:last-child td { border-bottom: none; }
.glass-table tbody tr { transition: background 0.1s; }
/* glass-table row hover also uses purple-50 — consistent brand signal */
.glass-table tbody tr:hover { background: var(--accent-bg-soft); }

/* --- Search Input Utility --- */
.search-input {
    padding: 0.55rem 1rem;
    background: var(--bg-deep);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-main);
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.12s, box-shadow 0.12s;
    width: 100%;
    max-width: 340px;
}
.search-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.search-input::placeholder { color: var(--text-muted); }

/* --- Dash Tabs Structure --- */
.dash-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    z-index: 10;
}
.dash-tab-indicator {
    position: absolute;
    bottom: -1px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px 2px 0 0;
    pointer-events: none;
    z-index: 2;
}
.dash-tab {
    background: none; border: none; cursor: pointer;
    padding: 0.75rem 1.25rem;
    font-family: inherit; font-size: 0.875rem; font-weight: 600;
    color: var(--text-muted);
    transition: color 0.15s;
    display: flex; align-items: center; gap: 0.5rem; text-decoration: none;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}
.dash-tab:hover, .dash-tab.active {
    color: var(--text-main);
}
.dash-tab__count {
    background: var(--border); color: var(--text-body);
    font-size: 0.6875rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: 8px;
    min-width: 18px; text-align: center; line-height: 1.4;
}

/* =======================================================
   Login Layout - Glow Background
   ======================================================= */
.login-glow {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    /* Rendering handled by WebGL canvas / Three.js via stimulus controller */
}

@keyframes loginBreathe { 
    0%   { opacity: 0.7; }
    100% { opacity: 1.0; }
}

/* --- Dialog Modals --- */
dialog::backdrop {
    background: rgba(0,0,0,0.3) !important;
}