/* ============================================================================
   Enterprise console theme - ADDITIVE layer loaded AFTER style.css (and BEFORE the
   per-page CSS emitted from head_logged). Shifts the whole dashboard from the
   "purple-gradient SaaS" look toward a calm, dense, precise operations console:
   one disciplined indigo accent, cool-slate neutrals, hairline borders, flat and
   stable surfaces, tabular data, soft status badges. Fully theme-aware (light + dark).

   Almost everything downstream reads --bs-* / --bs-primary-rgb, so re-pointing the
   tokens here recolors the app; the few hardcoded literals live in the per-page CSS
   (dashboard.css / data-tables.css) and the sidebar/header partials.
   ============================================================================ */

:root {
    /* ---- Accent: one indigo, everywhere (was #3b5bdb / #4f46e5 / #6366f1 mixed) ---- */
    --ent-accent: #4f46e5;
    --ent-accent-strong: #4338ca;
    --ent-accent-rgb: 79, 70, 229;

    /* ---- Cool-slate neutrals (a faint blue undertone reads "considered") ---- */
    --ent-bg: #f6f7f9;
    --ent-surface: #ffffff;
    --ent-surface-2: #f9fafb;
    --ent-border: #e6e8ee;
    --ent-border-strong: #d6dae1;
    --ent-ink: #171b24;
    --ent-ink-2: #364152;
    --ent-muted: #667085;
    --ent-faint: #98a2b3;

    /* ---- Semantic (soft badge tint + solid ink) ---- */
    --ent-success: #067647; --ent-success-bg: rgba(6, 118, 71, .10);
    --ent-warning: #b54708; --ent-warning-bg: rgba(181, 71, 8, .10);
    --ent-danger:  #d92d20; --ent-danger-bg:  rgba(217, 45, 32, .09);
    --ent-info:    #175cd3; --ent-info-bg:    rgba(23, 92, 211, .10);
    --ent-neutral: #5b6472; --ent-neutral-bg: rgba(91, 100, 114, .10);

    /* ---- Elevation: hairline + a whisper of depth, never floaty ---- */
    --ent-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --ent-shadow:    0 1px 2px rgba(16, 24, 40, .04), 0 1px 3px rgba(16, 24, 40, .06);
    --ent-shadow-pop: 0 10px 30px -6px rgba(16, 24, 40, .16), 0 2px 6px -2px rgba(16, 24, 40, .08);

    /* ---- Radii: tighter, consistent ---- */
    --ent-r-xs: 5px; --ent-r-sm: 7px; --ent-r: 9px; --ent-r-lg: 12px;

    /* ---- Map into Bootstrap so components inherit automatically ---- */
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    --bs-primary: var(--ent-accent);
    --bs-primary-rgb: var(--ent-accent-rgb);
    --studio-accent: var(--ent-accent);
    --bs-link-color: var(--ent-accent);
    --bs-link-hover-color: var(--ent-accent-strong);
    --bs-body-bg: var(--ent-bg);
    --bs-tertiary-bg: var(--ent-surface);
    --bs-secondary-bg: var(--ent-surface-2);
    --bs-border-color: var(--ent-border);
    --bs-body-color: var(--ent-ink-2);
    --bs-emphasis-color: var(--ent-ink);
    --bs-heading-color: var(--ent-ink);
    --bs-secondary-color: var(--ent-muted);
    --bs-tertiary-color: var(--ent-faint);
    --bs-success: var(--ent-success); --bs-danger: var(--ent-danger);
    --bs-warning: var(--ent-warning); --bs-info: var(--ent-info);

    --studio-radius-sm: var(--ent-r-sm); --studio-radius-md: var(--ent-r); --studio-radius-lg: var(--ent-r-lg);
    --bs-border-radius: var(--ent-r); --bs-border-radius-sm: var(--ent-r-sm);
    --bs-border-radius-lg: var(--ent-r-lg); --bs-border-radius-xl: 14px;
    --studio-card-shadow: var(--ent-shadow);
}

[data-bs-theme="dark"] {
    --ent-accent: #6d6af6;
    --ent-accent-strong: #8b89ff;
    --ent-accent-rgb: 109, 106, 246;

    --ent-bg: #0d0f14;
    --ent-surface: #14171e;
    --ent-surface-2: #1a1e27;
    --ent-border: #262b35;
    --ent-border-strong: #333a46;
    --ent-ink: #e7eaf0;
    --ent-ink-2: #c3c9d4;
    --ent-muted: #8b93a1;
    --ent-faint: #616a79;

    --ent-success: #3ccb8c; --ent-success-bg: rgba(60, 203, 140, .13);
    --ent-warning: #e0a256; --ent-warning-bg: rgba(224, 162, 86, .14);
    --ent-danger:  #f87171; --ent-danger-bg:  rgba(248, 113, 113, .13);
    --ent-info:    #6ea8fe; --ent-info-bg:    rgba(110, 168, 254, .14);
    --ent-neutral: #98a1b0; --ent-neutral-bg: rgba(152, 161, 176, .12);

    --ent-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --ent-shadow:    0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .4);
    --ent-shadow-pop: 0 14px 34px -8px rgba(0, 0, 0, .6), 0 2px 6px -2px rgba(0, 0, 0, .4);

    /* Re-map the Bootstrap tokens style.css sets for dark, so the refined palette wins. */
    --bs-primary: var(--ent-accent);
    --bs-primary-rgb: var(--ent-accent-rgb);
    --studio-accent: var(--ent-accent);
    --bs-link-color: var(--ent-accent-strong);
    --bs-link-hover-color: #a7a4ff;
    --bs-body-bg: var(--ent-bg);
    --bs-tertiary-bg: var(--ent-surface);
    --bs-secondary-bg: var(--ent-surface-2);
    --bs-border-color: var(--ent-border);
    --bs-body-color: var(--ent-ink-2);
    --bs-emphasis-color: var(--ent-ink);
    --bs-heading-color: var(--ent-ink);
    --bs-secondary-color: var(--ent-muted);
    --bs-tertiary-color: var(--ent-faint);
    --navbar-bg: var(--ent-surface);
    --navbar-color: var(--ent-ink);
}

/* ---- Base type ------------------------------------------------------------ */
body {
    font-family: var(--bs-body-font-family);
    letter-spacing: -0.006em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--ent-bg);
    color: var(--ent-ink-2);
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    letter-spacing: -0.018em;
    font-weight: 600;
    color: var(--ent-ink);
}
/* Enterprise doesn't shout: cap the display weights the dashboard uses at 700. */
.fw-bold, .fw-bolder, b, strong { font-weight: 600; }
code, kbd, samp, .font-monospace { font-variant-ligatures: none; }

/* ---- Buttons -------------------------------------------------------------- */
.btn { border-radius: var(--ent-r-sm); font-weight: 500; letter-spacing: -0.006em; }
.btn-lg { border-radius: var(--ent-r); }
.btn-primary { background: var(--ent-accent); border-color: var(--ent-accent); box-shadow: var(--ent-shadow-sm); }
.btn-primary:hover, .btn-primary:focus { background: var(--ent-accent-strong); border-color: var(--ent-accent-strong); }
.btn-outline-primary { border-color: var(--ent-accent); color: var(--ent-accent); }
.btn-outline-primary:hover { background: var(--ent-accent); border-color: var(--ent-accent); color: #fff; }
.btn-outline-secondary { border-color: var(--ent-border-strong); color: var(--ent-ink-2); }
.btn-outline-secondary:hover { background: var(--ent-surface-2); border-color: var(--ent-border-strong); color: var(--ent-ink); }
.btn-light { background: var(--ent-surface); border-color: var(--ent-border); color: var(--ent-ink-2); }
.btn-light:hover { background: var(--ent-surface-2); border-color: var(--ent-border-strong); }
.btn:focus-visible { outline: 2px solid rgba(var(--ent-accent-rgb), .5); outline-offset: 1px; box-shadow: none; }

/* ---- Form controls -------------------------------------------------------- */
.form-control, .form-select {
    border-radius: var(--ent-r-sm);
    border-color: var(--ent-border-strong);
    color: var(--ent-ink);
    background-color: var(--ent-surface);
}
.form-control::placeholder { color: var(--ent-faint); }
.form-control:focus, .form-select:focus {
    border-color: var(--ent-accent);
    box-shadow: 0 0 0 3px rgba(var(--ent-accent-rgb), .14);
}
.form-check-input:checked { background-color: var(--ent-accent); border-color: var(--ent-accent); }
.form-check-input:focus { border-color: var(--ent-accent); box-shadow: 0 0 0 3px rgba(var(--ent-accent-rgb), .14); }

/* ---- Cards / panels: hairline border, flat, calm radius ------------------- */
.card {
    border: 1px solid var(--ent-border);
    border-radius: var(--ent-r-lg);
    box-shadow: var(--ent-shadow-sm);
    background: var(--ent-surface);
}
.card.shadow-sm, .card.shadow { box-shadow: var(--ent-shadow) !important; }
.card-header { background: var(--ent-surface); border-bottom-color: var(--ent-border); font-weight: 600; }

/* ---- Generic tables ------------------------------------------------------- */
.table { --bs-table-color: var(--ent-ink-2); --bs-table-border-color: var(--ent-border); font-variant-numeric: tabular-nums; }
.table > thead { --bs-table-bg: var(--ent-surface-2); }
.table > thead th { color: var(--ent-muted); font-weight: 600; border-bottom-color: var(--ent-border); }

/* ---- Badges: soft tint + solid ink (Linear/Stripe style) ------------------ */
.badge { border-radius: var(--ent-r-xs); font-weight: 600; letter-spacing: .002em; padding: .34em .6em; }
.badge.rounded-pill { border-radius: 999px; }
/* Recolour Bootstrap's loud contextual badges (used by the data tables) to soft. */
.badge.bg-primary, .badge.text-bg-primary { background: rgba(var(--ent-accent-rgb), .12) !important; color: var(--ent-accent) !important; }
.badge.bg-success, .badge.text-bg-success { background: var(--ent-success-bg) !important; color: var(--ent-success) !important; }
.badge.bg-danger,  .badge.text-bg-danger  { background: var(--ent-danger-bg)  !important; color: var(--ent-danger)  !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--ent-warning-bg) !important; color: var(--ent-warning) !important; }
.badge.bg-info,    .badge.text-bg-info    { background: var(--ent-info-bg)    !important; color: var(--ent-info)    !important; }
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-dark, .badge.bg-light, .badge.text-bg-light { background: var(--ent-neutral-bg) !important; color: var(--ent-neutral) !important; }
.badge.bg-primary-subtle { color: var(--ent-accent) !important; }

/* ---- Dropdowns ------------------------------------------------------------ */
.dropdown-menu {
    border: 1px solid var(--ent-border) !important;
    border-radius: var(--ent-r-lg) !important;
    box-shadow: var(--ent-shadow-pop) !important;
    background: var(--ent-surface);
    padding: 5px;
}
.dropdown-item { border-radius: var(--ent-r-xs); padding: .45rem .6rem; color: var(--ent-ink-2); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--ent-surface-2); color: var(--ent-ink); }
.dropdown-item.active, .dropdown-item:active { background: rgba(var(--ent-accent-rgb), .10); color: var(--ent-accent); }
.dropdown-divider { border-color: var(--ent-border); }

/* ---- Modals + offcanvas --------------------------------------------------- */
.modal-content { border: 1px solid var(--ent-border); border-radius: 14px; box-shadow: var(--ent-shadow-pop); background: var(--ent-surface); }
.modal-header, .modal-footer { border-color: var(--ent-border); }
.offcanvas { background: var(--ent-surface); color: var(--ent-ink-2); }

/* ---- Pagination + list groups -------------------------------------------- */
.page-link { color: var(--ent-ink-2); border-radius: var(--ent-r-xs); border: 0; }
.page-link:hover { background: var(--ent-surface-2); color: var(--ent-ink); }
.page-item.active .page-link { background: rgba(var(--ent-accent-rgb), .12); color: var(--ent-accent); }
.list-group-item { background: var(--ent-surface); border-color: var(--ent-border); color: var(--ent-ink-2); }

/* ---- Alerts (soft) -------------------------------------------------------- */
.alert { border-radius: var(--ent-r); border-width: 1px; }

/* ============================================================================
   App chrome: top bar + left sidebar + main
   ============================================================================ */
.app-main { background: var(--ent-bg); }

.main-header, .navbar, .app-header, header.navbar {
    background: var(--ent-surface) !important;
    border-bottom: 1px solid var(--ent-border);
    box-shadow: none;
}
.main-header { position: sticky; top: 0; z-index: 1051; box-shadow: 0 1px 2px rgba(16, 24, 40, .03); }
.main-header .navbar-brand { color: var(--ent-ink) !important; font-weight: 650; }
.main-header .navbar-nav .nav-link { color: var(--ent-muted) !important; font-weight: 500; padding-block: .32rem !important; border-radius: var(--ent-r-sm); }
.main-header .navbar-nav .nav-link:hover { background: var(--ent-surface-2); color: var(--ent-ink) !important; }
.main-header .navbar-nav .nav-link.text-primary { background: rgba(var(--ent-accent-rgb), .10); color: var(--ent-accent) !important; }

#global-search-btn {
    background: var(--ent-surface-2) !important;
    border-color: var(--ent-border) !important;
    border-radius: var(--ent-r) !important;
    color: var(--ent-muted) !important;
    min-width: 210px;
    justify-content: flex-start !important;
}
#global-search-btn:hover { background: var(--ent-bg) !important; border-color: var(--ent-border-strong) !important; }
#global-search-btn kbd { margin-left: auto; background: var(--ent-surface); border: 1px solid var(--ent-border); color: var(--ent-muted); }
.user-avatar-bubble { border-radius: var(--ent-r) !important; font-weight: 600; }
#btn-dark-mode { border-radius: var(--ent-r) !important; }

/* "Upgrade" pill: calm amber, not a loud gradient. */
#nav-upgrade-btn {
    background: var(--ent-warning-bg) !important;
    color: var(--ent-warning) !important;
    border: 1px solid rgba(181, 71, 8, .22) !important;
    font-weight: 600;
    border-radius: 999px;
}
#nav-upgrade-btn:hover { filter: brightness(.97); }

/* Sidebar: crisp surface, quiet labels, token-driven active state. */
.app-sidebar { background: var(--ent-surface); border-right: 1px solid var(--ent-border); }
.as-switcher-label, .as-sec-label { color: var(--ent-faint); font-weight: 600; letter-spacing: .05em; font-size: .6rem; }
.as-link, .as-item { border-radius: var(--ent-r-sm); font-weight: 500; color: var(--ent-ink-2); }
.as-link:hover, .as-item:hover { background: var(--ent-surface-2); color: var(--ent-ink); }
.as-group-head { border-radius: var(--ent-r-sm); font-weight: 500; color: var(--ent-ink-2); }
.as-group-head:hover { background: var(--ent-surface-2); color: var(--ent-ink); }
.as-link.active, .as-item.active {
    background: rgba(var(--ent-accent-rgb), .09) !important;
    color: var(--ent-accent) !important;
    box-shadow: inset 2px 0 0 var(--ent-accent);
    font-weight: 600;
}
.as-link .bi, .as-item .bi, .as-group-head .bi { opacity: .82; }

/* ============================================================================
   Data pages: page header + toolbar (table density lives in data-tables.css)
   ============================================================================ */
.data-header h1, .settings-page h1, .analytics-header h1, .dash-greeting h1, h1.fw-bold {
    font-size: 1.5rem;
    font-weight: 650;
    letter-spacing: -.022em;
    color: var(--ent-ink);
}
.data-header .subtitle, .dash-greeting p { color: var(--ent-muted); }
.row-count-badge {
    background: rgba(var(--ent-accent-rgb), .12) !important;
    color: var(--ent-accent) !important;
    font-weight: 600;
}

/* ---- Refined scrollbars (a small, distinctly "enterprise" detail) --------- */
* { scrollbar-width: thin; scrollbar-color: var(--ent-border-strong) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-thumb { background: var(--ent-border-strong); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ent-faint); background-clip: padding-box; }

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}