/* ============================================================================
   InfraErp — design system v2
   Premium ERP shell: themed (light/dark) tokens, collapsible slate sidebar,
   command palette, launchpad dashboard, refined data + form components.
   Bootstrap 5.1 is skinned via local CSS vars + targeted overrides.
   ========================================================================== */

:root {
    /* Brand ramp — FlexAdmin teal accent (#0ea5a4) */
    --brand:        #0ea5a4;
    --brand-rgb:    14, 165, 164;
    --brand-600:    #0ea5a4;
    --brand-700:    #0d9594;
    --brand-800:    #0c8c8b;
    --brand-400:    #2dd4bf;
    --brand-50:     #f0fdfa;
    --brand-100:    #ccfbf1;
    --violet:       #7c3aed;

    /* Light theme surfaces (FlexAdmin) */
    --canvas:       #f4f7fb;
    --canvas-grad:  radial-gradient(1100px 540px at 100% -8%, rgba(14,165,164,.06), transparent 60%), #f4f7fb;
    --surface:      #ffffff;
    --surface-2:    #f7faff;
    --surface-3:    #edf3fb;
    --border:       #dde5f1;
    --border-soft:  #eef3fa;
    --border-strong:#c4d2e6;

    --text:         #1c2635;
    --text-muted:   #5f6e83;
    --text-soft:    #8ea0b8;
    --on-brand:     #ffffff;

    /* Sidebar — FlexAdmin light/white */
    --sidebar-bg:   #ffffff;
    --sidebar-grad: #ffffff;
    --sidebar-fg:   #223248;
    --sidebar-muted:#6b809d;
    --sidebar-hover:rgba(14, 165, 164, .10);
    --sidebar-line: #e2e9f3;

    /* Semantic soft pairs (FlexAdmin) */
    --green:#16a34a;  --green-50:#dcfce7;  --green-fg:#15803d;
    --amber:#d97706;  --amber-50:#ffedd5;  --amber-fg:#b45309;
    --red:#dc2626;    --red-50:#fee2e2;    --red-fg:#b91c1c;
    --blue:#0284c7;   --blue-50:#e0f2fe;   --blue-fg:#0369a1;
    --violet-50:#f1ecfe; --violet-fg:#6d28d9;
    --slate-50:#edf3fb; --slate-fg:#475569;

    /* Shape & depth (FlexAdmin radii + shadows) */
    --radius-xs:   6px;
    --radius-sm:   8px;
    --radius:      12px;
    --radius-lg:   16px;
    --shadow-xs:   0 1px 3px 0 rgb(0 0 0 / .04), 0 1px 2px -1px rgb(0 0 0 / .04);
    --shadow-sm:   0 1px 3px 0 rgb(0 0 0 / .05), 0 1px 2px -1px rgb(0 0 0 / .04);
    --shadow:      0 8px 20px -10px rgb(2 12 27 / .18), 0 6px 12px -8px rgb(2 12 27 / .12);
    --shadow-lg:   0 28px 60px -22px rgb(2 12 27 / .34), 0 18px 28px -12px rgb(2 12 27 / .16);
    --ring:        0 0 0 3.5px rgb(14 165 164 / .22);

    /* Layout */
    --sidebar-w:   280px;
    --sidebar-mini:74px;
    --topbar-h:    64px;

    --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --heading-font: "Sora", "Manrope", system-ui, sans-serif;

    /* Bootstrap bridges */
    --bs-primary:#0ea5a4; --bs-primary-rgb:14,165,164;
    --bs-link-color:#0ea5a4; --bs-link-color-rgb:14,165,164; --bs-link-hover-color:#0d9594;
    --bs-body-color:#1c2635; --bs-body-bg:#f4f7fb; --bs-border-color:#dde5f1;
    --bs-font-sans-serif: var(--font);
}

html[data-theme="dark"] {
    --canvas:       #08141a;
    --canvas-grad:  radial-gradient(1100px 540px at 100% -8%, rgba(34,211,206,.10), transparent 60%), #08141a;
    --surface:      #11222c;
    --surface-2:    #16303c;
    --surface-3:    #1d3a48;
    --border:       #2a4458;
    --border-soft:  rgba(255, 255, 255, .07);
    --border-strong:#355068;

    --text:         #d2e1e7;
    --text-muted:   #8ea7b5;
    --text-soft:    #5f7a8a;

    /* Sidebar — FlexAdmin dark */
    --sidebar-bg:   #081018;
    --sidebar-grad: linear-gradient(180deg, #0b1a24 0%, #081018 100%);
    --sidebar-fg:   #b9cde0;
    --sidebar-muted:#6b8294;
    --sidebar-hover:rgba(34, 211, 206, .12);
    --sidebar-line: rgba(255, 255, 255, .07);

    --brand:        #22d3ce;
    --brand-rgb:    34, 211, 206;
    --brand-600:    #22d3ce;
    --brand-700:    #14b8a6;
    --brand-400:    #5eead4;
    --brand-50:     rgba(34,211,206,.16);
    --brand-100:    rgba(34,211,206,.22);

    --green-50:rgba(74,222,128,.16);  --green-fg:#4ade80;
    --amber-50:rgba(245,158,11,.18);  --amber-fg:#f59e0b;
    --red-50:rgba(251,113,133,.16);   --red-fg:#fb7185;
    --blue-50:rgba(56,189,248,.18);   --blue-fg:#38bdf8;
    --violet-50:rgba(124,58,237,.2); --violet-fg:#b794f6;
    --slate-50:rgba(148,163,184,.14);--slate-fg:#cbd5e1;

    --shadow-xs:   0 1px 2px rgba(0,0,0,.4);
    --shadow-sm:   0 1px 2px rgba(0,0,0,.4);
    --shadow:      0 8px 26px -10px rgba(0,0,0,.6);
    --shadow-lg:   0 26px 54px -18px rgba(0,0,0,.7);

    --bs-body-color:#d2e1e7; --bs-body-bg:#08141a; --bs-border-color:#2a4458;
    color-scheme: dark;
}

* { scrollbar-color: rgba(148,163,184,.45) transparent; }
html { font-size: 15px; position: relative; min-height: 100%; }
body {
    font-family: var(--font);
    background: var(--canvas-grad);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
::selection { background: rgba(var(--brand-rgb), .22); }

/* ===========================================================================
   App shell
   ========================================================================== */
body.app-shell { margin: 0; min-height: 100vh; }

.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-w);
    background: var(--sidebar-grad);
    border-right: 1px solid var(--sidebar-line);
    display: flex;
    flex-direction: column;
    z-index: 1045;
    transition: width .22s cubic-bezier(.4, 0, .2, 1), transform .25s ease;
}

.sidebar-brand {
    height: var(--topbar-h);
    display: flex; align-items: center; gap: 11px;
    padding: 0 18px;
    border-bottom: 1px solid var(--sidebar-line);
    text-decoration: none; flex: none; overflow: hidden; white-space: nowrap;
}
.sidebar-brand:hover { text-decoration: none; }
.brand-mark { flex: none; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; transition: opacity .18s ease; }
.brand-name { color: var(--text); font-family: var(--heading-font); font-weight: 750; font-size: 17px; letter-spacing: -.015em; }
.brand-sub  { color: var(--sidebar-muted); font-size: 9.5px; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; margin-top: 2px; }

.sidebar-nav { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; padding: 12px 12px 26px; list-style: none; margin: 0; }
.sidebar-nav::-webkit-scrollbar { width: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, .28); border-radius: 8px; }
.sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, .45); }
.sidebar-nav > li { list-style: none; }

.nav-section {
    color: var(--sidebar-muted);
    font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    padding: 16px 12px 7px; white-space: nowrap; overflow: hidden;
}

.nav-single, .nav-group-toggle {
    width: 100%; display: flex; align-items: center; gap: 11px;
    padding: 9px 11px; border: 0; background: transparent;
    color: var(--sidebar-fg); font-size: 13.5px; font-weight: 500;
    border-radius: var(--radius-sm); text-decoration: none; text-align: left;
    transition: background .13s ease, color .13s ease; cursor: pointer; white-space: nowrap;
}
.nav-single:hover, .nav-group-toggle:hover { background: var(--sidebar-hover); color: var(--brand); text-decoration: none; }
.nav-single.active {
    background: linear-gradient(100deg, var(--brand-600), var(--brand-700));
    color: #fff; box-shadow: 0 8px 18px -8px rgba(var(--brand-rgb), .9);
}
.nav-group.open > .nav-group-toggle, .nav-group-toggle.active { color: var(--brand); }

.nav-ico { width: 18px; height: 18px; flex: none; }
.nav-ico-wrap { display: inline-flex; opacity: .88; flex: none; }
.nav-single.active .nav-ico-wrap { opacity: 1; }
.nav-label { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; }
.nav-chevron { display: inline-flex; transition: transform .18s ease; opacity: .55; flex: none; }
.nav-chevron .nav-ico { width: 15px; height: 15px; }
.nav-group.open .nav-chevron { transform: rotate(180deg); }

.nav-sub { list-style: none; margin: 2px 0 4px; padding: 2px 0 2px 19px; position: relative; }
.nav-sub::before { content: ""; position: absolute; left: 21px; top: 2px; bottom: 2px; width: 1.5px; background: var(--border); border-radius: 2px; }
.nav-sublink {
    position: relative; display: block; padding: 7px 11px 7px 18px; margin-left: 4px;
    color: var(--text-soft); font-size: 13px; border-radius: var(--radius-sm);
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: color .12s ease, background .12s ease;
}
.nav-sublink:hover { color: var(--brand); background: var(--sidebar-hover); text-decoration: none; }
.nav-sublink.active { color: var(--brand); font-weight: 600; }
.nav-sublink.active::before { content: ""; position: absolute; left: -3.5px; top: 50%; transform: translateY(-50%); width: 6px; height: 6px; background: var(--brand-400); border-radius: 50%; box-shadow: 0 0 0 3px rgba(var(--brand-rgb), .3); }

/* Collapsed (mini) rail — hover to expand as overlay */
html.nav-mini .app-main { margin-left: var(--sidebar-mini); }
html.nav-mini .sidebar { width: var(--sidebar-mini); }
html.nav-mini .sidebar:hover { width: var(--sidebar-w); box-shadow: var(--shadow-lg); }
html.nav-mini .sidebar:not(:hover) .brand-text,
html.nav-mini .sidebar:not(:hover) .nav-label,
html.nav-mini .sidebar:not(:hover) .nav-chevron,
html.nav-mini .sidebar:not(:hover) .nav-section,
html.nav-mini .sidebar:not(:hover) .nav-sub { opacity: 0; pointer-events: none; }
html.nav-mini .sidebar:not(:hover) .nav-single,
html.nav-mini .sidebar:not(:hover) .nav-group-toggle { gap: 0; justify-content: center; }
html.nav-mini .sidebar:not(:hover) .sidebar-nav { overflow: visible; }

/* Main column */
.app-main { margin-left: var(--sidebar-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .22s cubic-bezier(.4, 0, .2, 1); }

.topbar {
    position: sticky; top: 0; height: var(--topbar-h);
    background: color-mix(in srgb, var(--surface) 82%, transparent);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px; z-index: 1030; gap: 12px;
}
.topbar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-right { display: flex; align-items: center; gap: 8px; }

.icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex: none;
    border: 1px solid var(--border); background: var(--surface);
    border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border-strong); }
.icon-btn .nav-ico { width: 19px; height: 19px; }
.sidebar-toggle { display: none; }
.nav-mini-toggle { display: inline-flex; }

.crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; }
.crumb-home { display: inline-flex; color: var(--text-soft); }
.crumb-home .nav-ico { width: 16px; height: 16px; }
.crumb-sep { color: var(--text-soft); font-size: 13px; }
.crumb-current { font-weight: 650; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Command-palette trigger (faux search) */
.cmdk-trigger {
    display: inline-flex; align-items: center; gap: 9px;
    height: 38px; padding: 0 11px; min-width: 210px;
    border: 1px solid var(--border); background: var(--surface-2);
    border-radius: var(--radius-sm); color: var(--text-soft);
    font-size: 13px; cursor: pointer; transition: border-color .12s ease, background .12s ease;
}
.cmdk-trigger:hover { border-color: var(--border-strong); background: var(--surface); }
.cmdk-trigger .nav-ico { width: 16px; height: 16px; }
.cmdk-trigger .cmdk-label { flex: 1 1 auto; text-align: left; }
.kbd {
    font-family: var(--font); font-size: 10.5px; font-weight: 600; line-height: 1;
    color: var(--text-muted); background: var(--surface-3); border: 1px solid var(--border);
    border-radius: 6px; padding: 4px 6px; box-shadow: 0 1px 0 var(--border);
}

.env-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); padding: 6px 11px; border-radius: 999px; }
.env-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(22, 163, 74, .15); }

/* theme toggle icon swap */
.icon-btn .ico-moon { display: inline-flex; }
.icon-btn .ico-sun { display: none; }
html[data-theme="dark"] .icon-btn .ico-moon { display: none; }
html[data-theme="dark"] .icon-btn .ico-sun { display: inline-flex; }

/* User menu */
.user-btn { display: flex; align-items: center; gap: 10px; border: 1px solid transparent; background: transparent; padding: 5px 8px 5px 6px; border-radius: 999px; cursor: pointer; }
.user-btn:hover { background: var(--surface-2); border-color: var(--border); }
.avatar { width: 36px; height: 36px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); color: #fff; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.user-meta { display: flex; flex-direction: column; line-height: 1.1; text-align: left; }
.user-name { font-size: 13.5px; font-weight: 650; color: var(--text); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 11px; color: var(--text-muted); }
.user-btn .chev { display: inline-flex; color: var(--text-soft); }
.user-btn .chev .nav-ico { width: 15px; height: 15px; }

/* Content */
.app-content { flex: 1 1 auto; padding: 26px 30px 60px; }
.app-content > main { max-width: 1500px; margin: 0 auto; animation: rise .26s cubic-bezier(.4, 0, .2, 1); }
@keyframes rise { from { opacity: .001; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.sidebar-backdrop { display: none; }
@media (max-width: 991.98px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--shadow-lg); }
    body.sidebar-open .sidebar { transform: none; }
    .app-main, html.nav-mini .app-main { margin-left: 0; }
    .sidebar-backdrop { position: fixed; inset: 0; background: rgba(8, 12, 22, .55); z-index: 1040; }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .sidebar-toggle { display: inline-flex; }
    .nav-mini-toggle { display: none; }
    .cmdk-trigger { min-width: 0; }
    .cmdk-trigger .cmdk-label, .cmdk-trigger .kbd { display: none; }
    .user-meta { display: none; }
    .app-content { padding: 18px 16px 48px; }
}

/* ===========================================================================
   Command palette
   ========================================================================== */
.cmdk { position: fixed; inset: 0; z-index: 1080; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; }
.cmdk[hidden] { display: none; }
.cmdk-backdrop { position: absolute; inset: 0; background: rgba(8, 12, 22, .5); backdrop-filter: blur(3px); animation: fade .12s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.cmdk-panel { position: relative; width: 100%; max-width: 580px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; animation: pop .14s cubic-bezier(.4, 0, .2, 1); }
@keyframes pop { from { opacity: .4; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } }
.cmdk-input-row { display: flex; align-items: center; gap: 11px; padding: 15px 18px; border-bottom: 1px solid var(--border-soft); }
.cmdk-input-row svg { width: 19px; height: 19px; color: var(--text-soft); flex: none; }
.cmdk-input-row input { flex: 1 1 auto; border: 0; outline: 0; background: transparent; font-size: 16px; color: var(--text); font-family: var(--font); }
.cmdk-input-row input::placeholder { color: var(--text-soft); }
.cmdk-list { list-style: none; margin: 0; padding: 7px; max-height: 52vh; overflow-y: auto; }
.cmdk-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; color: var(--text); }
.cmdk-item .ci-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); flex: none; }
.cmdk-item .ci-ico svg { width: 17px; height: 17px; }
.cmdk-item .ci-label { font-size: 14px; font-weight: 550; flex: 1 1 auto; }
.cmdk-item .ci-group { font-size: 11.5px; color: var(--text-soft); }
.cmdk-item.sel, .cmdk-item:hover { background: var(--brand-50); }
.cmdk-item.sel .ci-ico { background: var(--brand); color: #fff; }
.cmdk-empty { padding: 26px; text-align: center; color: var(--text-soft); font-size: 14px; }

/* ===========================================================================
   Typography & generic components
   ========================================================================== */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.ph-title, .card-title, .kpi-val, .hero-greet, .donut-c b {
    font-family: var(--heading-font);
}
h1, .h1 { font-size: 1.6rem; font-weight: 750; letter-spacing: -.022em; }
h2, .h2 { font-size: 1.34rem; font-weight: 700; letter-spacing: -.015em; }
h3, .h3 { font-size: 1.14rem; font-weight: 700; }
h4, .h4, h5, .h5 { font-weight: 650; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
.text-muted { color: var(--text-muted) !important; }
hr { border-color: var(--border); opacity: 1; }
code, kbd, pre { color: var(--brand-700); }
html[data-theme="dark"] code { color: var(--brand-400); }

/* Page header */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-header .ph-title { font-size: 1.5rem; font-weight: 760; letter-spacing: -.02em; margin: 0; }
.page-header .ph-sub { color: var(--text-muted); font-size: .92rem; margin-top: 5px; max-width: 60ch; }
.page-header .ph-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.search-field { position: relative; display: inline-flex; align-items: center; }
.search-field > svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-soft); pointer-events: none; }
.search-field input { padding-left: 34px; min-width: 250px; }

/* Cards */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card .card-header {
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
    border-bottom: 1px solid var(--border-soft);
    font-weight: 700; font-size: 13.5px; letter-spacing: -.01em;
    padding: 15px 20px; color: var(--text);
    display: flex; align-items: center; gap: 8px;
}
.card .card-body { padding: 20px; }
.card .card-title { font-weight: 700; font-size: 13.5px; letter-spacing: -.01em; }
.card .card-footer { background: var(--surface-2); border-top: 1px solid var(--border-soft); padding: 12px 20px; }
/* Form panel cards get a top brand accent */
.card.form-panel { border-top: 3px solid var(--brand); }
.card.form-panel .card-header { background: transparent; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.card-hover { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--border-strong); }

/* Icon badge */
.ico-badge { width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-50); color: var(--brand); flex: none; }
.ico-badge svg { width: 22px; height: 22px; }
.ico-badge.g { background: var(--green-50); color: var(--green-fg); }
.ico-badge.a { background: var(--amber-50); color: var(--amber-fg); }
.ico-badge.b { background: var(--blue-50); color: var(--blue-fg); }
.ico-badge.v { background: var(--violet-50); color: var(--violet-fg); }
.ico-badge.r { background: var(--red-50); color: var(--red-fg); }
.ico-badge.s { background: var(--slate-50); color: var(--slate-fg); }

/* Stat / module tiles */
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 16px; }
.tile { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px; color: inherit; }
a.tile:hover { text-decoration: none; }
.tile .tile-top { display: flex; align-items: center; justify-content: space-between; }
.tile .tile-title { font-weight: 680; font-size: 1rem; margin: 13px 0 3px; letter-spacing: -.01em; }
.tile .tile-desc { color: var(--text-muted); font-size: .86rem; line-height: 1.5; }
.tile .tile-go { color: var(--text-soft); transition: transform .16s ease, color .16s ease; }
.card-hover:hover .tile-go { color: var(--brand); transform: translateX(3px); }

/* Hero */
.hero { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 28px 30px; color: #fff; background: linear-gradient(120deg, #0a3b39 0%, #0d8d8b 55%, #0ea5a4 100%); box-shadow: 0 20px 44px -22px rgba(14, 165, 164, .6); }
.hero::after { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 320px at 88% -30%, rgba(255, 255, 255, .22), transparent 60%); pointer-events: none; }
.hero-greet { font-size: 1.5rem; font-weight: 760; letter-spacing: -.02em; }
.hero-sub { color: rgba(255, 255, 255, .82); margin-top: 6px; font-size: .95rem; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; position: relative; }
.hero .btn-on { background: #fff; color: var(--brand-700); border: 0; font-weight: 650; }
.hero .btn-on:hover { background: #ecfdfa; color: var(--brand-800); }
.hero .btn-ghost { background: rgba(255, 255, 255, .14); color: #fff; border: 1px solid rgba(255, 255, 255, .28); }
.hero .btn-ghost:hover { background: rgba(255, 255, 255, .22); color: #fff; }

.section-label { font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-soft); margin: 26px 2px 13px; }

/* Workspace mini-list */
.mini-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-soft); font-size: .88rem; }
.mini-row:last-child { border-bottom: 0; }
.mini-row .k { color: var(--text-muted); }
.mini-row .v { font-weight: 600; }

/* Tables */
.table {
    --bs-table-bg: transparent; --bs-table-color: var(--text);
    --bs-table-striped-color: var(--text); --bs-table-striped-bg: rgba(148, 163, 184, .07);
    --bs-table-hover-color: var(--text); --bs-table-hover-bg: rgba(var(--brand-rgb), .05);
    --bs-table-active-color: var(--text);
    color: var(--text); margin-bottom: 0;
}
.table > thead th { background: var(--surface-2); color: var(--text-muted); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border-bottom: 1px solid var(--border); padding: 11px 14px; white-space: nowrap; }
.table > tbody td, .table > tbody th { padding: 11px 14px; border-bottom: 1px solid var(--border-soft); vertical-align: middle; color: var(--text); }
.table > tbody tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr:hover > * { background: var(--bs-table-hover-bg); }
.table-card { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); background: var(--surface); }
.table-card .table > thead th { background: var(--surface-2); }
.table code { background: var(--surface-3); padding: 2px 7px; border-radius: 6px; font-size: 12px; font-weight: 600; }

/* Status pills */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 650; padding: 3px 10px; border-radius: 999px; line-height: 1.55; white-space: nowrap; }
.pill .pd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.pill-green { background: var(--green-50); color: var(--green-fg); }
.pill-amber { background: var(--amber-50); color: var(--amber-fg); }
.pill-red   { background: var(--red-50); color: var(--red-fg); }
.pill-blue  { background: var(--blue-50); color: var(--blue-fg); }
.pill-violet{ background: var(--violet-50); color: var(--violet-fg); }
.pill-slate { background: var(--slate-50); color: var(--slate-fg); }

/* ============================================================================
   Forms — filled-style inputs, uppercase labels, smooth focus transitions
   ========================================================================== */
.form-label {
    font-size: 11px; font-weight: 700; color: var(--text-muted);
    margin-bottom: 5px; text-transform: uppercase; letter-spacing: .055em;
}
.col-form-label { font-size: 11px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.form-text, .form-hint { color: var(--text-soft); font-size: 11.5px; margin-top: 4px; line-height: 1.5; }
.form-control, .form-select {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 9.5px 12px;
    font-size: 13.5px;
    color: var(--text);
    background-color: var(--surface-2);
    box-shadow: none;
    transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}
.form-control-sm, .form-select-sm { padding: 7.5px 11px; font-size: 13px; border-radius: var(--radius-xs); height: auto; }
.form-control::placeholder { color: var(--text-soft); opacity: 1; }
.form-control:hover:not(:focus):not(:disabled):not([readonly]),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--border-strong); background-color: var(--surface);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand); box-shadow: var(--ring); outline: 0;
    background-color: var(--surface); color: var(--text);
}
.form-control:disabled, .form-select:disabled {
    background: var(--surface-3); color: var(--text-soft); cursor: not-allowed; opacity: 1;
}
.form-control[readonly] { background: var(--surface-2); color: var(--text-muted); }
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2394a3b8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m4 6 4 4 4-4'/%3e%3c/svg%3e");
    background-size: 16px 12px;
}
.input-group-text {
    background: var(--surface-2); border: 1.5px solid var(--border);
    color: var(--text-muted); font-size: 13px; font-weight: 600;
}
/* Validation — strip browser-injected background icons */
.form-control.is-valid, .form-control.is-invalid,
.form-select.is-valid, .form-select.is-invalid { background-image: none; }
.form-control.is-valid, .form-select.is-valid     { border-color: var(--green); }
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--red);   }
.form-control.is-valid:focus  { box-shadow: 0 0 0 3.5px rgba(5,150,105,.18); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3.5px rgba(220,38,38,.18); }
.valid-feedback                { color: var(--green-fg); font-size: 11.5px; margin-top: 4px; }
.invalid-feedback, .text-danger.small, span.text-danger { color: var(--red-fg) !important; font-size: 11.5px; }
/* Checkboxes & radios */
.form-check-input {
    background-color: var(--surface-2); border: 1.5px solid var(--border-strong);
    width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; margin-top: .18rem;
    transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.form-check-input:hover { border-color: var(--brand); }
.form-check-input:checked {
    background-color: var(--brand); border-color: var(--brand);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.form-check-input[type="radio"]:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.form-check-input:focus { box-shadow: var(--ring); border-color: var(--brand); }
.form-check-label { font-size: 13.5px; color: var(--text); cursor: pointer; user-select: none; }
/* Date/time inputs — respect theme color-scheme */
input[type="date"], input[type="time"], input[type="datetime-local"] { color-scheme: light; }
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] input[type="time"],
html[data-theme="dark"] input[type="datetime-local"] { color-scheme: dark; }

/* ============================================================================
   Buttons
   ========================================================================== */
.btn {
    font-weight: 650; border-radius: var(--radius-sm);
    padding: 8.5px 16px; font-size: 13.5px; letter-spacing: .01em;
    transition: transform .06s ease, background .12s ease, box-shadow .12s ease, color .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
.btn:focus, .btn:active:focus { box-shadow: var(--ring); }
.btn .nav-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 5px; }
.btn-sm { padding: 5.5px 12px; font-size: 12px; border-radius: var(--radius-xs); letter-spacing: .01em; }
.btn-lg { padding: 11px 22px; font-size: 15px; border-radius: var(--radius); }
.btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-700); --bs-btn-hover-border-color: var(--brand-700); --bs-btn-active-bg: var(--brand-800); --bs-btn-active-border-color: var(--brand-800); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
.btn-outline-primary { --bs-btn-color: var(--brand-700); --bs-btn-border-color: var(--brand-100); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--brand-700); --bs-btn-active-border-color: var(--brand-700); }
html[data-theme="dark"] .btn-outline-primary { --bs-btn-color: var(--brand-400); --bs-btn-border-color: rgba(99, 102, 241, .4); }
.btn-outline-secondary { --bs-btn-color: var(--text-muted); --bs-btn-border-color: var(--border); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-hover-color: var(--text); --bs-btn-active-bg: var(--surface-3); --bs-btn-active-color: var(--text); }
.btn-secondary { --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text); --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-hover-color: var(--text); }
.btn-light { --bs-btn-bg: var(--surface-2); --bs-btn-border-color: var(--border); --bs-btn-color: var(--text); --bs-btn-hover-bg: var(--surface-3); --bs-btn-hover-color: var(--text); }
.btn-success { --bs-btn-bg: var(--green); --bs-btn-border-color: var(--green); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--green-fg); --bs-btn-hover-border-color: var(--green-fg); --bs-btn-hover-color: #fff; }
.btn-danger  { --bs-btn-bg: var(--red);   --bs-btn-border-color: var(--red);   --bs-btn-color: #fff; --bs-btn-hover-bg: var(--red-fg);  --bs-btn-hover-border-color: var(--red-fg);  --bs-btn-hover-color: #fff; }
.btn-outline-danger  { --bs-btn-color: var(--red-fg); --bs-btn-border-color: color-mix(in srgb,var(--red) 30%,transparent); --bs-btn-hover-bg: var(--red); --bs-btn-hover-border-color: var(--red); --bs-btn-hover-color: #fff; }
.btn-outline-success { --bs-btn-color: var(--green-fg); --bs-btn-border-color: color-mix(in srgb,var(--green) 30%,transparent); --bs-btn-hover-bg: var(--green); --bs-btn-hover-border-color: var(--green); --bs-btn-hover-color: #fff; }

/* Badges (legacy bg-* still used on some pages) */
.badge { font-weight: 650; font-size: 11px; padding: .4em .68em; border-radius: 999px; letter-spacing: .01em; }
.badge.bg-success { background: var(--green-50) !important; color: var(--green-fg) !important; }
.badge.bg-danger  { background: var(--red-50) !important;   color: var(--red-fg) !important; }
.badge.bg-warning { background: var(--amber-50) !important; color: var(--amber-fg) !important; }
.badge.bg-secondary { background: var(--slate-50) !important; color: var(--slate-fg) !important; }
.badge.bg-primary { background: var(--brand-50) !important; color: var(--brand-700) !important; }
.badge.bg-info { background: var(--blue-50) !important; color: var(--blue-fg) !important; }
html[data-theme="dark"] .badge.bg-primary { color: var(--brand-400) !important; }

/* Alerts */
.alert { border: 1px solid transparent; border-radius: var(--radius); font-size: 14px; padding: 13px 16px; }
.alert-success { background: var(--green-50); border-color: color-mix(in srgb, var(--green) 30%, transparent); color: var(--green-fg); }
.alert-danger  { background: var(--red-50);   border-color: color-mix(in srgb, var(--red) 30%, transparent);   color: var(--red-fg); }
.alert-warning { background: var(--amber-50); border-color: color-mix(in srgb, var(--amber) 30%, transparent); color: var(--amber-fg); }
.alert-info    { background: var(--blue-50);  border-color: color-mix(in srgb, var(--blue) 30%, transparent);  color: var(--blue-fg); }

/* Dropdowns */
.dropdown-menu { --bs-dropdown-bg: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; font-size: 14px; color: var(--text); }
.dropdown-item { border-radius: var(--radius-sm); padding: 8px 11px; font-weight: 500; color: var(--text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--surface-2); color: var(--text); }
.dropdown-item.text-danger:hover { background: var(--red-50); }
.dropdown-header { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-soft); font-weight: 700; }
.dropdown-divider { border-color: var(--border); }
.dropdown-item .nav-ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 8px; }

/* Empty state */
.empty-state { text-align: center; padding: 44px 20px; color: var(--text-muted); }
.empty-state .es-ico { width: 56px; height: 56px; border-radius: 16px; background: var(--surface-2); color: var(--text-soft); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.empty-state .es-ico svg { width: 26px; height: 26px; }

/* Dark-mode overrides for stray Bootstrap utilities used by content pages */
html[data-theme="dark"] .bg-white { background-color: var(--surface) !important; }
html[data-theme="dark"] .bg-light { background-color: var(--surface-2) !important; }
html[data-theme="dark"] .text-dark { color: var(--text) !important; }
html[data-theme="dark"] .border { border-color: var(--border) !important; }
html[data-theme="dark"] .list-group-item { background: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .modal-content { background: var(--surface); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .nav-tabs { border-color: var(--border); }
html[data-theme="dark"] .nav-tabs .nav-link.active { background: var(--surface); color: var(--text); border-color: var(--border) var(--border) var(--surface); }
html[data-theme="dark"] .page-link { background: var(--surface); border-color: var(--border); color: var(--text); }

/* ===========================================================================
   Auth (login) screen
   ========================================================================== */
body.auth-body {
    margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(1200px 600px at 15% -10%, rgba(99, 102, 241, .22), transparent 60%),
                radial-gradient(900px 500px at 110% 110%, rgba(124, 58, 237, .18), transparent 55%), #0a0f1c;
    padding: 24px;
}
.auth-wrap { width: 100%; max-width: 412px; }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 22px; }
.auth-brand .brand-name { color: #fff; font-weight: 760; font-size: 22px; letter-spacing: -.015em; }
.auth-brand .brand-sub { color: #7c8aa5; font-size: 10.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; }
.auth-body .card { border: 1px solid rgba(255, 255, 255, .08); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); background: #fff; }
.auth-body .card .mt-5 { margin-top: 0 !important; }
.auth-foot { text-align: center; color: #5b6b88; font-size: 12px; margin-top: 18px; }

/* ===========================================================================
   Dashboard — KPI cards, comparison bars, donut, quick links
   ========================================================================== */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 1180px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .kpi-row { grid-template-columns: 1fr; } }
.kpi-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 18px 20px; transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease; }
.kpi-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--border-strong); }
.kpi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kpi-val { font-size: 1.6rem; font-weight: 760; letter-spacing: -.022em; line-height: 1.1; color: var(--text); }
.kpi-val .u { font-size: .95rem; font-weight: 650; color: var(--text-muted); }
.kpi-label { color: var(--text-muted); font-size: .86rem; font-weight: 500; margin-top: 4px; }
.kpi-sub { margin-top: 13px; font-size: 12px; color: var(--text-soft); font-weight: 550; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi-sub .ctx { color: var(--text-soft); font-weight: 550; }
/* KPI delta / ratio pill — the FlexAdmin-style headline secondary metric */
.kpi-delta { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 750; padding: 3px 9px 3px 6px; border-radius: 999px; letter-spacing: .005em; line-height: 1.5; white-space: nowrap; }
.kpi-delta svg { width: 13px; height: 13px; flex: none; stroke-width: 3; }
.kpi-delta .dd { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; margin: 0 1px; }
.kpi-delta.up   { background: var(--green-50); color: var(--green-fg); }
.kpi-delta.down { background: var(--red-50);   color: var(--red-fg); }
.kpi-delta.warn { background: var(--amber-50); color: var(--amber-fg); }
.kpi-delta.info { background: var(--blue-50);  color: var(--blue-fg); }
.kpi-delta.flat { background: var(--slate-50); color: var(--slate-fg); }

.bar-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; }
.bar-row + .bar-row { border-top: 1px solid var(--border-soft); }
.bar-row .bl { width: 120px; flex: none; font-size: 13px; color: var(--text-muted); font-weight: 550; }
.bar-track { flex: 1 1 auto; height: 10px; border-radius: 6px; background: var(--surface-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 6px; transition: width .55s cubic-bezier(.4, 0, .2, 1); }
.bar-row .bv { width: 124px; flex: none; text-align: right; font-weight: 700; font-size: 13px; font-variant-numeric: tabular-nums; color: var(--text); }

/* Donut — crisp SVG ring (rounded segment caps), centered value overlay */
.donut { width: 184px; height: 184px; position: relative; display: grid; place-items: center; margin: 6px auto 2px; }
.donut-svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.donut-svg .seg { transition: stroke-dasharray .7s cubic-bezier(.4,0,.2,1); }
.donut-c { position: absolute; text-align: center; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.donut-c b { display: block; font-size: 1.3rem; font-weight: 780; letter-spacing: -.02em; color: var(--text); line-height: 1.1; }
.donut-c span { font-size: 10px; color: var(--text-soft); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
/* legacy conic fallback kept for safety */
.donut.conic { border-radius: 50%; }
.donut.conic::before { content: ""; position: absolute; inset: 25px; background: var(--surface); border-radius: 50%; box-shadow: inset 0 0 0 1px var(--border); }
.legend-list { margin-top: 16px; display: flex; flex-direction: column; gap: 2px; }
.legend-list .li { display: flex; align-items: center; gap: 10px; padding: 7px 6px; border-radius: var(--radius-xs); }
.legend-list .li:hover { background: var(--surface-2); }
.legend-list .li .d { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-list .li .ll { flex: 1 1 auto; font-size: 13px; color: var(--text); font-weight: 500; }
.legend-list .li .lv { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }

.stat-strip { display: flex; gap: 28px; flex-wrap: wrap; }
.stat-strip .s .sv { font-size: 1.18rem; font-weight: 740; letter-spacing: -.01em; }
.stat-strip .s .sl { font-size: 11.5px; color: var(--text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; }

.link-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 2px; border-bottom: 1px solid var(--border-soft); color: var(--text); font-size: .9rem; font-weight: 550; text-decoration: none; }
.link-row:last-child { border-bottom: 0; }
.link-row:hover { color: var(--brand); text-decoration: none; }
.link-row .nav-ico { width: 16px; height: 16px; color: var(--text-soft); }
.link-row:hover .nav-ico { color: var(--brand); }
.num { font-variant-numeric: tabular-nums; }

/* ===========================================================================
   KPI card sparklines — subtle area-chart decoration at the card base
   ========================================================================== */
.kpi-card { padding-bottom: 22px; }
.kpi-spark {
    position: absolute; bottom: 0; left: 0; right: 0; height: 56px;
    pointer-events: none; overflow: hidden;
}
.kpi-spark svg { width: 100%; height: 100%; display: block; }
.kpi-spark.sp-g { color: var(--green); }
.kpi-spark.sp-b { color: var(--blue); }
.kpi-spark.sp-a { color: var(--amber); }
.kpi-spark.sp-s { color: var(--slate-fg); }

/* ===========================================================================
   Project card grid — replaces the plain table on the Projects list page
   ========================================================================== */
.proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; }
.proj-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 16px 18px 14px; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; }
.proj-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--border-strong); }
.proj-card .pc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.proj-card .pc-code { font-size: 10.5px; font-weight: 700; color: var(--text-soft); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 3px; }
.proj-card .pc-name { font-weight: 680; font-size: .97rem; line-height: 1.3; color: var(--text); }
.proj-card .pc-meta { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: 12px; color: var(--text-muted); }
.proj-card .pc-mgr-av { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-400), var(--brand-700)); color: #fff; font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.proj-card .pc-budget { margin-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.proj-card .pc-budget-lbl { font-size: 11px; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.proj-card .pc-budget-val { font-size: 1.08rem; font-weight: 740; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.proj-card .pc-bar { height: 5px; border-radius: 999px; background: var(--surface-3); margin-top: 8px; overflow: hidden; }
.proj-card .pc-bar-fill { height: 100%; border-radius: 999px; transition: width .6s cubic-bezier(.4,0,.2,1); }
.proj-card .pc-actions { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border-soft); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.proj-card .pc-dates { font-size: 11px; color: var(--text-soft); }

/* ===========================================================================
   Bootstrap 5.1 explicit button color overrides (--bs-btn-* vars land in 5.2+ only).
   These rules take final precedence, keeping every button on-brand and themed. */
.btn-primary { background-color: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 3px rgba(var(--brand-rgb),.25), 0 4px 10px -4px rgba(var(--brand-rgb),.45); }
.btn-primary:hover { background-color: var(--brand-700); border-color: var(--brand-700); color: #fff; box-shadow: 0 1px 3px rgba(var(--brand-rgb),.3), 0 5px 14px -4px rgba(var(--brand-rgb),.5); }
.btn-primary:focus, .btn-primary:focus-visible { background-color: var(--brand-700); border-color: var(--brand-700); color: #fff; box-shadow: var(--ring); }
.btn-primary:active, .btn-primary:active:focus, .btn-primary.active { background-color: var(--brand-800); border-color: var(--brand-800); color: #fff; box-shadow: none; }
.btn-primary:disabled, .btn-primary.disabled { background-color: var(--brand); border-color: var(--brand); color: #fff; opacity: .5; box-shadow: none; }
.btn-outline-primary { color: var(--brand-700); border-color: var(--brand-100); background-color: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary.active, .btn-check:checked + .btn-outline-primary { background-color: var(--brand); border-color: var(--brand); color: #fff; }
html[data-theme="dark"] .btn-outline-primary { color: var(--brand-400); border-color: rgba(var(--brand-rgb), .4); }
.btn-success { background-color: var(--green); border-color: var(--green); color: #fff; }
.btn-success:hover { background-color: var(--green-fg); border-color: var(--green-fg); color: #fff; }
.btn-success:focus, .btn-success:focus-visible { background-color: var(--green-fg); border-color: var(--green-fg); color: #fff; box-shadow: 0 0 0 3.5px rgba(5,150,105,.22); }
.btn-success:active { background-color: #036644; border-color: #036644; color: #fff; }
.btn-outline-success { color: var(--green-fg); border-color: color-mix(in srgb, var(--green) 35%, transparent); background: transparent; }
.btn-outline-success:hover { background-color: var(--green); border-color: var(--green); color: #fff; }
.btn-danger { background-color: var(--red); border-color: var(--red); color: #fff; }
.btn-danger:hover { background-color: var(--red-fg); border-color: var(--red-fg); color: #fff; }
.btn-danger:focus, .btn-danger:focus-visible { background-color: var(--red-fg); border-color: var(--red-fg); color: #fff; box-shadow: 0 0 0 3.5px rgba(220,38,38,.22); }
.btn-danger:active { background-color: #991b1b; border-color: #991b1b; color: #fff; }
.btn-outline-danger { color: var(--red-fg); border-color: color-mix(in srgb, var(--red) 35%, transparent); background: transparent; }
.btn-outline-danger:hover { background-color: var(--red); border-color: var(--red); color: #fff; }