/*
 * Sombhavona design system v2 (Release 9; v9.1 tighter gutters; v9.2
 * structural width fixes: safe grid tracks, shrinkable flex/grid children,
 * icon-compact mobile topbar, overflow safety net; v9.3 second fidelity
 * pass: mobile topbar brand, bulletproof icon-only Quick Create, always-
 * visible breadcrumb, rich profile menu, Light/Dark/System theme via
 * <html data-theme>, honest app-footprint storage card; v9.4 six user
 * fixes: logo-only branding in a white chip, FIXED sidebar footer (only
 * the nav scrolls), real user avatars with a bundled default, curated
 * setting titles, a compact 13.5px type/component scale with 600-weight
 * headings, floating back-to-top button; v11.1 demo-composition shell
 * footer (settings-editable links) + square back-to-top button) —
 * original CSS.
 * Source-faithful redesign: VERY dark green sidebar, compact density,
 * Font Awesome icons only (never emoji/unicode glyphs as icons).
 * Palette: primary teal #24997C, gradient #0F766E -> #059669, sidebar
 * gradient #0A1F1B -> #0C2B23, accent orange #E8830F, white rounded cards.
 * No third-party template code or assets are used. See DESIGN.md.
 */

:root {
    --sb-primary: #24997C;
    --sb-primary-600: #187F65;
    --sb-primary-700: #146553;
    --sb-primary-50: #EFFAF6;
    --sb-primary-100: #D7F2E7;
    --sb-accent: #E8830F;
    --sb-bg: #F3F7F5;
    --sb-card: #FFFFFF;
    --sb-border: #E3ECE8;
    --sb-text: #1E293B;
    --sb-muted: #64748B;
    --sb-faint: #94A3B8;
    --sb-danger: #DC2626;
    --sb-radius: 14px;
    --sb-shadow: 0 1px 3px rgba(11, 61, 51, .06), 0 1px 2px rgba(11, 61, 51, .04);
    --sb-sidebar-w: 250px;
    --sb-sidebar-mini: 76px;
    --sb-topbar-h: 60px;
    --sb-side-grad: linear-gradient(180deg, #0A1F1B 0%, #0C2B23 55%, #0A2620 100%);
    --sb-side-line: rgba(255, 255, 255, .08);
    --sb-side-text: #B9CFC7;
    --sb-side-mute: #6E9384;
}

* { box-sizing: border-box; }
/* v9.2 safety net: the page itself must never scroll sideways. `clip`
   (unlike `hidden`) creates no scroll container, so the sticky sidebar
   and topbar keep working. The structural fixes below remove the causes;
   this only catches anything unforeseen. */
html, body { overflow-x: clip; }
img, video, svg { max-width: 100%; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    font-size: 14px;
    background: var(--sb-bg);
    color: var(--sb-text);
    margin: 0;
    -webkit-font-smoothing: antialiased;
}
/* v9.4 compact shell scale: the admin/panel shells run at 13.5px base
   (the installer/auth pages keep the 14px body default). */
.sb-app { font-size: 13.5px; }
a { color: var(--sb-primary-600); text-decoration: none; }
a:hover { color: var(--sb-primary-700); }
::selection { background: var(--sb-primary-100); }

/* ---------------------------------------------------------- gradients */
.grad-primary { background: linear-gradient(120deg, #0F766E, #059669); }
.grad-hero { background: linear-gradient(135deg, #0A1F1B 0%, #0C2B23 55%, #11543F 100%); }

/* ------------------------------------------------------------- shell */
.sb-shell { display: flex; min-height: 100vh; }
/* v11.1: the main column is a full-height flex column — topbar, title
   strip, content (flex: 1 0 auto) and the shell footer (flex: none) —
   so the footer sits at the very bottom on short pages and flows right
   after the content on long ones. The sidebar is an in-flow flex item
   (sticky, own width), so no offsets/margins change. */
.sb-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
/* v9.1: full-fluid content (no max-width cap), tighter side gutters */
.sb-content { flex: 1 0 auto; width: 100%; min-width: 0; padding: 12px 10px 20px; }
/* v9.2: grid/flex children inside the content must be allowed to shrink
   below their content's intrinsic size — otherwise a wide child (a table
   with a min-width, a nowrap cell) forces its column, and with it the
   whole page, wider than the phone screen. */
.sb-content .grid > *, .sb-content .sb-card-head > *, .sb-content .sb-page-head > *, .sb-content .sb-hero .flex > * { min-width: 0; }
@media (min-width: 768px) { .sb-content { padding: 16px 14px 22px; } }
@media (min-width: 1200px) { .sb-content { padding: 16px 16px 24px; } }
/* v9.1: tighten dashboard / generic card grid gaps inside the content area
   (specificity beats the Tailwind gap-4 utility) */
.sb-content .gap-4 { gap: 14px; }
@media (max-width: 767.98px) { .sb-content .gap-4 { gap: 12px; } }

/* --------------------------------------------------- footer (v11.1)
 * Shell footer at the bottom of the main column: copyright + "Crafted
 * by" credit on the left, settings-driven links on the right. Stacked
 * and centered on mobile. Colours read the shell tokens, so the dark
 * theme flips text/border automatically; only the surface needs an
 * explicit dark rule (with the topbar/titlestrip rules below). */
.sb-footer {
    flex: none; display: flex; flex-wrap: wrap; align-items: center;
    justify-content: space-between; gap: 6px 18px;
    padding: 14px 10px; border-top: 1px solid var(--sb-border);
    background: #fff; color: var(--sb-muted); font-size: 12.5px;
}
@media (min-width: 768px) { .sb-footer { padding: 14px 14px; } }
@media (min-width: 1200px) { .sb-footer { padding: 14px 16px; } }
.sb-footer strong { color: var(--sb-text); font-weight: 600; }
.sb-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.sb-footer-links a { color: var(--sb-muted); }
.sb-footer-links a:hover { color: var(--sb-primary-600); }
@media (max-width: 767.98px) {
    .sb-footer { flex-direction: column; justify-content: center; text-align: center; }
    .sb-footer-links { justify-content: center; }
}

/* -------------------------------------------------- sidebar (DARK) */
/* v9.4: the sidebar is a full-height flex column — brand (flex-none),
   nav (the ONLY scrolling region), footer cards (flex-none, fixed).
   The sidebar itself never scrolls, so the storage + user cards stay
   pinned to the bottom like in the reference demo. */
.sb-sidebar {
    width: var(--sb-sidebar-w); flex: none;
    background: var(--sb-side-grad); color: var(--sb-side-text);
    display: flex; flex-direction: column;
    position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden;
    transition: width .25s ease, transform .25s ease; z-index: 50;
}
.sb-nav::-webkit-scrollbar { width: 5px; }
.sb-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); border-radius: 99px; }
/* v9.4 logo-only brand: no site name, no panel caption. An uploaded
   logo sits in a clean white rounded chip (its artwork is on white);
   without a logo only the gradient letter mark shows. */
.sb-brand {
    display: flex; align-items: center;
    padding: 14px 16px; border-bottom: 1px solid var(--sb-side-line); flex: none;
}
.sb-brand-mark {
    width: 36px; height: 36px; border-radius: 10px; flex: none; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 1rem;
    background: linear-gradient(120deg, #0F766E, #059669);
    box-shadow: 0 4px 12px rgba(5, 150, 105, .35);
}
.sb-brand-chip {
    display: inline-flex; align-items: center; background: #fff;
    border: 1px solid rgba(11, 61, 51, .1); border-radius: 8px; padding: 4px 8px;
}
.sb-brand-logo { height: 40px; width: auto; max-width: 170px; object-fit: contain; display: block; }
.sb-nav {
    padding: .7rem .7rem .9rem; flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .22) transparent;
}
.sb-nav-label {
    font-size: 10px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
    color: var(--sb-side-mute); padding: .95rem .55rem .35rem; white-space: nowrap;
}
.sb-nav-link, .sidebar-link {
    display: flex; align-items: center; gap: .65rem;
    padding: 8px 12px; margin-bottom: 2px; border-radius: .6rem; min-height: 36px;
    color: var(--sb-side-text); font-weight: 500; font-size: 13px; position: relative; white-space: nowrap;
}
.sb-nav-link:hover, .sidebar-link:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.sb-nav-link.active, .sidebar-link.active {
    background: linear-gradient(120deg, #17604C, #0F4A3A); color: #fff; font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}
.sb-nav-link.active::before, .sidebar-link.active::before {
    content: ''; position: absolute; left: -0.7rem; top: 22%; bottom: 22%;
    width: 3.5px; border-radius: 99px; background: linear-gradient(180deg, #34D399, #24997C);
}
.sb-nav-icon { width: 21px; text-align: center; flex: none; font-size: .93rem; color: #8FB8A9; }
.sb-nav-link:hover .sb-nav-icon { color: #A7F3D0; }
.sb-nav-link.active .sb-nav-icon { color: #34D399; }
.sb-nav-link.disabled, .sidebar-link.disabled { opacity: .45; pointer-events: none; }
.sb-nav-note { padding: .2rem .55rem; font-size: 12px; line-height: 1.55; color: var(--sb-side-mute); white-space: normal; }

/* sidebar bottom cards (storage + user) — v9.4: a FIXED footer.
   .sb-sidebar-foot never scrolls with the nav; a hairline separates
   it from the scrolling menu above. */
.sb-side-cards { padding: .35rem .7rem .8rem; display: flex; flex-direction: column; gap: .6rem; }
.sb-sidebar-foot { flex: none; border-top: 1px solid var(--sb-side-line); padding-top: .7rem; }
.sb-storage, .sb-usercard {
    background: rgba(255, 255, 255, .05); border: 1px solid var(--sb-side-line);
    border-radius: 12px; padding: .72rem .8rem;
}
.sb-storage-head { display: flex; align-items: center; gap: .45rem; font-size: 12.5px; font-weight: 600; color: #E7F2EE; }
.sb-storage-head i { color: #34D399; }
.sb-storage-size { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--sb-side-mute); white-space: nowrap; }
.sb-progress { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .13); overflow: hidden; margin-top: .55rem; }
.sb-progress > span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #24997C, #7ED957 60%, #E8830F); }
.sb-storage-link { display: inline-flex; align-items: center; gap: .35rem; margin-top: .55rem; font-size: 12px; font-weight: 600; color: #34D399; }
.sb-storage-link:hover { color: #6EE7B7; }
/* v9.3: storage card rows (Uploads / App size — the app's own footprint) */
.sb-storage-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-top: .5rem; font-size: 12px; }
.sb-storage-row span { color: var(--sb-side-mute); font-weight: 600; }
.sb-storage-row b { color: #E7F2EE; font-weight: 600; white-space: nowrap; }
.sb-usercard { display: flex; align-items: center; gap: .6rem; }
.sb-usercard .sb-avatar { width: 36px; height: 36px; font-size: .85rem; }
.sb-usercard-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-role-badge {
    display: inline-block; margin-top: 2px; font-size: 9.5px; font-weight: 700; letter-spacing: .05em;
    text-transform: uppercase; padding: .1rem .4rem; border-radius: 5px;
    background: rgba(232, 131, 15, .22); color: #FBBF24;
}
.sb-logout-btn {
    margin-left: auto; width: 32px; height: 32px; flex: none; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); border: 1px solid var(--sb-side-line);
    color: #B9CFC7; cursor: pointer; font-size: .85rem; transition: .15s;
}
.sb-logout-btn:hover { background: rgba(220, 38, 38, .25); color: #FCA5A5; border-color: rgba(220, 38, 38, .35); }
.sb-backdrop {
    position: fixed; inset: 0; background: rgba(7, 32, 26, .5); z-index: 45;
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}

/* collapsed -> icon bar (desktop toggle). v9.4: the footer survives
   in icon mode as JUST the user avatar circle, pinned at the bottom;
   the storage card and the user name/role/logout hide. The brand chip
   shrinks to fit the 76px bar. */
@media (min-width: 1200px) {
    body.sb-collapsed .sb-sidebar { width: var(--sb-sidebar-mini); }
    body.sb-collapsed .sb-nav-text, body.sb-collapsed .sb-nav-label,
    body.sb-collapsed .sb-nav-note { display: none; }
    body.sb-collapsed .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
    body.sb-collapsed .sb-brand-chip { padding: 3px; }
    body.sb-collapsed .sb-brand-logo { max-width: 58px; height: auto; max-height: 40px; }
    body.sb-collapsed .sb-nav-link, body.sb-collapsed .sidebar-link { justify-content: center; padding: .6rem 0; }
    body.sb-collapsed .sb-storage, body.sb-collapsed .sb-usercard-meta,
    body.sb-collapsed .sb-usercard form { display: none; }
    body.sb-collapsed .sb-side-cards { padding: .55rem .5rem .7rem; align-items: center; }
    body.sb-collapsed .sb-usercard { background: transparent; border-color: transparent; padding: 0; }
}
/* tablet: automatic icon bar */
@media (min-width: 768px) and (max-width: 1199.98px) {
    .sb-sidebar { width: var(--sb-sidebar-mini); }
    .sb-nav-text, .sb-nav-label, .sb-nav-note { display: none; }
    .sb-brand { justify-content: center; padding-left: 0; padding-right: 0; }
    .sb-brand-chip { padding: 3px; }
    .sb-brand-logo { max-width: 58px; height: auto; max-height: 40px; }
    .sb-nav-link, .sidebar-link { justify-content: center; padding: .6rem 0; }
    .sb-storage, .sb-usercard-meta, .sb-usercard form { display: none; }
    .sb-side-cards { padding: .55rem .5rem .7rem; align-items: center; }
    .sb-usercard { background: transparent; border-color: transparent; padding: 0; }
}
/* mobile: off-canvas drawer */
@media (max-width: 767.98px) {
    .sb-sidebar { position: fixed; left: 0; top: 0; transform: translateX(-105%); width: 268px !important; box-shadow: none; }
    .sb-sidebar.open { transform: translateX(0); box-shadow: 0 24px 60px rgba(7, 32, 26, .45); }
    .sb-backdrop.open { opacity: 1; pointer-events: auto; }
}

/* ------------------------------------------------------------ topbar */
.sb-topbar {
    height: var(--sb-topbar-h); background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--sb-border);
    display: flex; align-items: center; gap: .7rem;
    padding: 0 10px; position: sticky; top: 0; z-index: 40;
}
@media (min-width: 768px) { .sb-topbar { padding: 0 14px; } }
@media (min-width: 1200px) { .sb-topbar { padding: 0 16px; } }
/* v9.3: brand block inside the topbar (the demo pairs hamburger + logo
   on mobile). Only below 1200px — at desktop width the sidebar carries
   the brand. Name truncates so hamburger + brand + actions fit 360px. */
.sb-topbar-brand { display: none; align-items: center; min-width: 0; flex: none; color: inherit; }
.sb-topbar-brand:hover { color: inherit; }
/* v9.4 logo-only topbar brand: ~30px tall image in the white chip
   (the chip also keeps the white-backed logo readable when the
   topbar itself goes dark in the dark theme). */
.sb-topbar-brand .sb-brand-mark { width: 30px; height: 30px; border-radius: 9px; font-size: .85rem; }
.sb-topbar-brand .sb-brand-chip { padding: 3px 6px; }
.sb-topbar-brand .sb-brand-logo { height: 30px; max-width: 130px; }
@media (max-width: 1199.98px) { .sb-topbar-brand { display: inline-flex; } }
.sb-icon-btn {
    width: 34px; height: 34px; flex: none; display: inline-flex; align-items: center; justify-content: center;
    border-radius: 999px; border: 1px solid var(--sb-border); background: #fff; color: #475569;
    cursor: pointer; font-size: .92rem; transition: .15s; position: relative;
}
.sb-icon-btn:hover { background: var(--sb-primary-50); color: var(--sb-primary-700); border-color: var(--sb-primary-100); }
.sb-icon-btn.plain { border-color: transparent; background: transparent; }
.sb-icon-btn.plain:hover { background: #F1F7F4; border-color: transparent; }
.sb-topbar-title { font-weight: 600; font-size: 1.02rem; color: var(--sb-text); line-height: 1.15; }
.sb-breadcrumb { font-size: 12px; color: var(--sb-faint); }
/* search pill */
.sb-search { position: relative; flex: 1; max-width: 400px; margin-left: .35rem; }
.sb-search input {
    width: 100%; border: 1px solid var(--sb-border); background: #F5F9F7; border-radius: 999px;
    padding: .56rem 3.4rem .56rem 2.35rem; font-size: 13px; outline: none; font-family: inherit;
}
.sb-search input:focus { border-color: var(--sb-primary); background: #fff; box-shadow: 0 0 0 3px var(--sb-primary-100); }
.sb-search .sb-search-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--sb-faint); font-size: .85rem; }
.sb-search kbd {
    position: absolute; right: .6rem; top: 50%; transform: translateY(-50%);
    font-family: inherit; font-size: 10px; font-weight: 600; color: var(--sb-muted);
    background: #fff; border: 1px solid var(--sb-border); border-bottom-width: 2px;
    border-radius: 6px; padding: .12rem .38rem;
}
@media (max-width: 767.98px) { .sb-search { display: none; } }
/* Quick Create gradient pill button */
.btn-quick {
    background: linear-gradient(120deg, #0F766E, #059669); color: #fff; font-weight: 600;
    border: 0; border-radius: 999px; padding: 8px 16px; display: inline-flex;
    align-items: center; gap: .45rem; cursor: pointer; font-family: inherit; font-size: 13px;
    box-shadow: 0 6px 16px rgba(15, 118, 110, .28); transition: .18s; white-space: nowrap;
}
.btn-quick:hover { filter: brightness(1.08); color: #fff; }
.btn-quick .qc-caret { font-size: .62rem; opacity: .85; }
/* v9.2/v9.3: below tablet width the topbar goes icon-compact so
   hamburger + brand + Quick Create (+) + bell + avatar always fit.
   v9.3 hardens the Quick Create rule: the v9.2 hide relied on a single
   normal-specificity media rule and a caret was still seen on device —
   the button is now a fixed 38px circle and EVERY child except the
   plus icon is removed with !important (the caret also carries its own
   .qc-caret class), so no cascade or icon-font rule can resurrect it.
   The profile chip likewise collapses to the avatar only. */
@media (max-width: 767.98px) {
    .sb-topbar { gap: .45rem; }
    .btn-quick { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 999px; }
    .btn-quick > :not(.fa-plus) { display: none !important; }
    .btn-quick .qc-label, .btn-quick .qc-caret { display: none !important; }
    .sb-profile-chip { padding: .28rem .3rem; }
    .sb-profile-chip > span:nth-of-type(2), .sb-profile-chip > .fa-chevron-down { display: none; }
}
/* profile chip */
.sb-profile-chip {
    display: flex; align-items: center; gap: .55rem; padding: .28rem .7rem .28rem .3rem;
    border: 1px solid var(--sb-border); border-radius: 999px; background: #fff;
    cursor: pointer; font-family: inherit; transition: .15s; text-align: left;
}
.sb-profile-chip:hover { background: var(--sb-primary-50); border-color: var(--sb-primary-100); }
.sb-profile-chip .sb-avatar { width: 34px; height: 34px; font-size: .82rem; }
.sb-chip-name { display: block; font-size: 12.5px; font-weight: 600; line-height: 1.1; color: var(--sb-text); }
.sb-chip-role { display: block; font-size: 10.5px; color: var(--sb-faint); line-height: 1.15; }
.sb-profile-chip .fa-chevron-down { font-size: .6rem; color: var(--sb-faint); }
.sb-avatar {
    width: 38px; height: 38px; border-radius: 999px; flex: none; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; background: linear-gradient(120deg, #0F766E, #059669);
}
.sb-avatar img { width: 100%; height: 100%; object-fit: cover; }
.sb-dropdown { position: relative; }
.sb-dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 10px); width: 232px;
    background: #fff; border: 1px solid var(--sb-border); border-radius: 12px;
    box-shadow: 0 18px 44px rgba(11, 61, 51, .16); padding: .45rem; z-index: 60; display: none;
}
.sb-dropdown.open .sb-dropdown-menu { display: block; }
.sb-dropdown-item {
    display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left;
    padding: .52rem .65rem; border-radius: .55rem; font-size: .88rem; font-weight: 500;
    color: var(--sb-text); background: none; border: 0; cursor: pointer; font-family: inherit;
}
.sb-dropdown-item i { width: 17px; text-align: center; color: var(--sb-faint); }
.sb-dropdown-item:hover { background: var(--sb-primary-50); color: var(--sb-primary-700); }
.sb-dropdown-item:hover i { color: var(--sb-primary); }
.sb-dropdown-head { padding: .55rem .65rem .65rem; border-bottom: 1px solid var(--sb-border); margin-bottom: .4rem; }
/* v9.3: rich profile menu (mirrors the demo) — big avatar header with
   name / email / role badge, and a soft tinted icon square per item. */
.sb-dropdown-menu.sb-menu-profile, .sb-dropdown-menu.sb-menu-theme { width: 300px; max-width: calc(100vw - 20px); }
.sb-dropdown-menu.sb-menu-theme { width: 232px; }
.sb-menu-profile .sb-dropdown-head { display: flex; align-items: center; gap: .7rem; padding: .6rem .65rem .75rem; }
.sb-avatar.lg { width: 48px; height: 48px; font-size: 1.05rem; }
.sb-dd-name { display: block; font-size: .92rem; font-weight: 600; line-height: 1.15; color: var(--sb-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-dd-mail { display: block; font-size: 11.5px; color: var(--sb-faint); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-role-badge.on-light { background: #FEF3C7; color: #B45309; }
.sb-dd-icon {
    width: 30px; height: 30px; flex: none; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sb-primary-50);
}
.sb-dd-icon i { width: auto; text-align: center; color: var(--sb-primary-700); font-size: .85rem; }
.sb-dd-icon.blue { background: #EFF6FF; }
.sb-dd-icon.blue i { color: #2563EB; }
.sb-dd-icon.amber { background: #FFFBEB; }
.sb-dd-icon.amber i { color: #D97706; }
.sb-dropdown-item.danger { color: #B91C1C; }
.sb-dropdown-item.danger .sb-dd-icon { background: #FEF2F2; }
.sb-dropdown-item.danger .sb-dd-icon i { color: #DC2626; }
.sb-dropdown-item.danger:hover { background: #FEF2F2; color: #991B1B; }
.sb-dropdown-item.danger:hover i { color: #B91C1C; }
/* theme menu: check mark on the active choice only */
.sb-theme-check { margin-left: auto; width: auto !important; color: var(--sb-primary) !important; font-size: .78rem; visibility: hidden; }
.sb-theme-opt.active .sb-theme-check { visibility: visible; }

/* ------------------------------------------------------- title strip */
.sb-titlestrip {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .58rem 10px; background: #EDF4F1; border-bottom: 1px solid var(--sb-border);
}
@media (min-width: 768px) { .sb-titlestrip { padding-left: 14px; padding-right: 14px; } }
@media (min-width: 1200px) { .sb-titlestrip { padding-left: 16px; padding-right: 16px; } }
.sb-titlestrip .sb-strip-title {
    font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #334155;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1 1 auto;
}
/* v9.3: the breadcrumb stays visible at EVERY width (like the demo) —
   it used to be display:none below 640px. It truncates with an
   ellipsis instead, and the strip never exceeds the viewport. */
.sb-titlestrip .sb-strip-crumb {
    font-size: 12px; color: var(--sb-muted); white-space: nowrap;
    flex: none; max-width: 58%; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.sb-titlestrip .sb-strip-crumb .crumb-parent { color: var(--sb-primary-600); font-weight: 600; }
.sb-titlestrip .sb-strip-crumb .fa-chevron-right { font-size: .55rem; margin: 0 .35rem; color: var(--sb-faint); }
@media (max-width: 640px) { .sb-titlestrip .sb-strip-crumb { font-size: 11px; } }

/* ------------------------------------------------------------ buttons */
.btn-primary {
    background: linear-gradient(120deg, #0F766E, #059669); color: #fff; font-weight: 600;
    border: 0; border-radius: 9px; padding: 8px 14px; display: inline-flex;
    align-items: center; gap: .5rem; transition: .2s; cursor: pointer; font-family: inherit; font-size: 13px;
}
.btn-primary:hover { filter: brightness(1.08); color: #fff; }
.btn-secondary {
    background: #fff; color: var(--sb-text); font-weight: 600; border: 1px solid var(--sb-border);
    border-radius: 9px; padding: 8px 14px; display: inline-flex; align-items: center;
    gap: .5rem; cursor: pointer; font-family: inherit; font-size: 13px; transition: .15s;
}
.btn-secondary:hover { border-color: var(--sb-primary); color: var(--sb-primary-700); }
.btn-danger-soft {
    background: #FEF2F2; color: #B91C1C; font-weight: 600; border: 1px solid #FECACA;
    border-radius: 9px; padding: 8px 14px; display: inline-flex; align-items: center;
    gap: .5rem; cursor: pointer; font-family: inherit; font-size: 13px;
}
.btn-danger-soft:hover { background: #FEE2E2; }
.btn-accent {
    background: linear-gradient(120deg, #E8830F, #F59E0B); color: #fff; font-weight: 600; border: 0;
    border-radius: 9px; padding: 8px 14px; display: inline-flex; align-items: center;
    gap: .5rem; cursor: pointer; font-family: inherit; font-size: 13px;
}
.btn-accent:hover { filter: brightness(1.06); color: #fff; }
/* v9.4 small button variant (dense table heads / card actions) */
.btn-sm { font-size: 12px !important; padding: 6px 10px !important; border-radius: 8px; }

/* -------------------------------------------------------------- forms */
.lbl { display: block; font-size: 12.5px; font-weight: 500; color: #334155; margin-bottom: .32rem; }
.input {
    width: 100%; border: 1px solid #DCE5E1; border-radius: .65rem; padding: 8px 12px;
    background: #fff; outline: none; font-family: inherit; font-size: 13.5px; color: var(--sb-text);
}
.input:focus { border-color: var(--sb-primary); box-shadow: 0 0 0 3px var(--sb-primary-100); }
.input:disabled { background: #F8FAFC; color: var(--sb-muted); }
select.input { appearance: auto; }
input[type="file"].input { padding: 6px 12px; }
.form-help { font-size: 12px; color: var(--sb-muted); margin-top: .35rem; }
.sb-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.sb-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.sb-switch .sb-track { width: 42px; height: 24px; border-radius: 999px; background: #CBD5E1; transition: .2s; flex: none; }
.sb-switch .sb-track::after {
    content: ''; display: block; width: 18px; height: 18px; border-radius: 999px; background: #fff;
    margin: 3px; transition: .2s; box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.sb-switch input:checked + .sb-track { background: var(--sb-primary); }
.sb-switch input:checked + .sb-track::after { transform: translateX(18px); }

/* -------------------------------------------------------------- cards */
.sb-card {
    background: var(--sb-card); border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius); box-shadow: var(--sb-shadow);
}
.sb-card-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 16px 16px 0; }
.sb-card-title { font-weight: 600; font-size: 15px; }
.sb-card-sub { font-size: 12px; color: var(--sb-muted); margin-top: 2px; }
.sb-page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: .9rem; margin-bottom: 1.1rem; }
.sb-page-title { font-size: 18px; font-weight: 600; line-height: 1.2; }
.sb-page-sub { color: var(--sb-muted); font-size: .88rem; margin-top: .28rem; max-width: 640px; }
@media (max-width: 640px) { .sb-page-head .btn-primary, .sb-page-head .btn-secondary { width: 100%; justify-content: center; } }

/* KPI cards (compact v2) */
.kpi-card { padding: 1rem 16px; display: flex; flex-direction: column; gap: .5rem; }
.kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.kpi-icon {
    width: 42px; height: 42px; border-radius: 12px; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 1.02rem; color: #fff;
    background: linear-gradient(135deg, #1C9A6C, #0F766E);
    box-shadow: 0 5px 12px rgba(15, 118, 110, .25);
}
.kpi-icon.orange { background: linear-gradient(135deg, #F59E0B, #E8830F); box-shadow: 0 5px 12px rgba(232, 131, 15, .28); }
.kpi-icon.blue { background: linear-gradient(135deg, #3B82C4, #2563EB); box-shadow: 0 5px 12px rgba(37, 99, 235, .25); }
.kpi-icon.rose { background: linear-gradient(135deg, #F43F5E, #BE123C); box-shadow: 0 5px 12px rgba(225, 29, 72, .25); }
.kpi-icon.violet { background: linear-gradient(135deg, #8B5CF6, #6D28D9); box-shadow: 0 5px 12px rgba(109, 40, 217, .25); }
.kpi-icon.slate { background: linear-gradient(135deg, #64748B, #475569); box-shadow: 0 5px 12px rgba(71, 85, 105, .25); }
.kpi-icon.teal { background: linear-gradient(135deg, #14B8A6, #0D9488); box-shadow: 0 5px 12px rgba(13, 148, 136, .25); }
.kpi-icon.amber { background: linear-gradient(135deg, #FBBF24, #D97706); box-shadow: 0 5px 12px rgba(217, 119, 6, .28); }
.kpi-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sb-faint); }
.kpi-value { font-size: 22px; font-weight: 700; line-height: 1.12; overflow-wrap: anywhere; }
.kpi-hint { font-size: 12px; color: var(--sb-muted); }
.kpi-spark { height: 46px; margin-top: .15rem; }
.kpi-spark svg { width: 100%; height: 100%; display: block; }
.kpi-bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; margin-top: .15rem; }
.kpi-bars > span { flex: 1; min-width: 6px; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, #5B9BD5, #2563EB); opacity: .85; }
.kpi-bars > span.today { background: linear-gradient(180deg, #F5A623, #E8830F); opacity: 1; }
.kpi-foot { border-top: 1px solid #EEF3F1; padding-top: .55rem; margin-top: .1rem; display: flex; flex-direction: column; gap: .32rem; }
.kpi-foot-row { display: flex; align-items: center; justify-content: space-between; font-size: 12px; }
.kpi-foot-row .k { color: var(--sb-muted); }
.kpi-foot-row .v { font-weight: 600; color: var(--sb-text); }
.delta { display: inline-flex; align-items: center; gap: .28rem; font-size: 11px; font-weight: 700; padding: .22rem .55rem; border-radius: 999px; white-space: nowrap; }
.delta i { font-size: .6rem; }
.delta-up { background: #ECFDF5; color: #047857; }
.delta-down { background: #FFF1F2; color: #BE123C; }
.delta-flat { background: #F1F5F9; color: #64748B; }
/* small stat cards with left accent bar (queue pages, panel) */
.kpi-accent { position: relative; overflow: hidden; }
.kpi-accent::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #0F766E, #059669); }
.kpi-accent.orange::before { background: linear-gradient(180deg, #E8830F, #F5A623); }
.kpi-accent.teal::before { background: linear-gradient(180deg, #0EA5A4, #24997C); }
.kpi-accent.rose::before { background: linear-gradient(180deg, #E11D48, #F43F5E); }

/* health card mini tiles */
.mini-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .8rem; }
@media (min-width: 1100px) { .mini-tiles.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.mini-tile { background: #F4F8F6; border-radius: 10px; padding: .6rem .75rem; min-width: 0; }
.mini-tile .t-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--sb-faint); }
.mini-tile .t-value { font-size: 1.02rem; font-weight: 700; margin-top: .15rem; overflow-wrap: anywhere; }

/* stars + product cells */
.stars { color: #F59E0B; font-size: .68rem; letter-spacing: 2.5px; white-space: nowrap; }
.stars .off { color: #E2E8F0; }
.prod-cell { display: flex; align-items: center; gap: .65rem; min-width: 0; }
.prod-thumb { width: 38px; height: 38px; border-radius: 9px; flex: none; overflow: hidden; background: var(--sb-primary-50); display: flex; align-items: center; justify-content: center; color: var(--sb-primary-700); font-weight: 700; font-size: .8rem; border: 1px solid var(--sb-border); }
.prod-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* category distribution tiles */
.cat-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: 1rem 16px 16px; }
.cat-tile { background: #F7FAF8; border: 1px solid #EDF3F0; border-radius: 12px; padding: .75rem .85rem; min-width: 0; }
.cat-tile .c-chip { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; font-size: .82rem; margin-bottom: .5rem; }
.cat-tile .c-name { font-size: 12px; color: var(--sb-muted); font-weight: 600; }
.cat-tile .c-share { font-size: 1.25rem; font-weight: 700; line-height: 1.15; }
.cat-tile .c-rev { font-size: 11.5px; color: var(--sb-faint); }

/* --------------------------------------------------------- dashboard hero */
.sb-hero {
    position: relative; overflow: hidden; border-radius: 16px; color: #DDEEE7;
    background:
        linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px),
        linear-gradient(115deg, #0A2E25 0%, #0C4634 55%, #156B4D 100%);
    background-size: 34px 34px, 34px 34px, 100% 100%;
    padding: 20px;
    box-shadow: 0 12px 30px rgba(10, 47, 37, .25);
}
.sb-hero-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .8rem; }
.sb-hero-badge {
    display: inline-flex; align-items: center; gap: .42rem; font-size: 11.5px; font-weight: 600;
    color: #CDE8DC; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px; padding: .3rem .7rem;
}
.sb-hero-badge i { color: #7ED957; }
.sb-live-dot { width: 7px; height: 7px; border-radius: 99px; background: #4ADE80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: sb-pulse 2s infinite; }
@keyframes sb-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); } 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
.sb-hero h2 { color: #fff; font-size: 24px; font-weight: 700; line-height: 1.15; margin: 0; }
.sb-hero .sb-hero-sub { color: #A9CDBE; font-size: 13.5px; margin-top: .45rem; max-width: 620px; line-height: 1.55; }
.sb-hero .sb-hero-sub strong { color: #fff; }
.sb-hero-stats { display: flex; flex-wrap: wrap; margin-top: 1.15rem; row-gap: .8rem; }
.sb-hero-stat { padding-right: 1.4rem; margin-right: 1.4rem; border-right: 1px solid rgba(255, 255, 255, .14); min-width: 0; }
.sb-hero-stat .h-value { overflow-wrap: anywhere; }
.sb-hero-stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.sb-hero-stat .h-label { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #8FB8A9; }
.sb-hero-stat .h-value { font-size: 1.32rem; font-weight: 700; color: #fff; margin-top: .2rem; }
.btn-hero-dark {
    background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .2);
    font-weight: 600; border-radius: 9px; padding: 8px 14px; display: inline-flex;
    align-items: center; gap: .5rem; cursor: pointer; font-family: inherit; font-size: 13px; transition: .15s;
}
.btn-hero-dark:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.btn-hero-light {
    background: #fff; color: #0B3D33; border: 0; font-weight: 600;
    border-radius: 9px; padding: 8px 14px; display: inline-flex;
    align-items: center; gap: .5rem; cursor: pointer; font-family: inherit; font-size: 13px; transition: .15s;
}
.btn-hero-light:hover { background: #E7F5EE; color: #0B3D33; }
.sb-hero-date { font-size: 12px; color: #9CC3B4; margin-top: .65rem; }
.greet-card { padding: 16px; position: relative; overflow: hidden; }
@media (max-width: 767.98px) {
    .sb-hero { padding: 16px; }
    .sb-hero h2 { font-size: 22px; }
    .sb-hero-stat { padding-right: 1rem; margin-right: 1rem; }
}
.chart-bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding-top: .5rem; }
.chart-bar { flex: 1; min-width: 10px; border-radius: 6px 6px 3px 3px; background: linear-gradient(180deg, #1C9A6C, #0F766E); position: relative; }
.chart-bar:hover { filter: brightness(1.15); }
.chart-bar.today { background: linear-gradient(180deg, #F5A623, #E8830F); }

/* attention list (dashboard) */
.attn-row {
    display: flex; align-items: center; gap: .7rem; padding: .68rem .85rem; min-width: 0;
    border: 1px solid #EDF3F0; border-radius: 11px; background: #FBFDFC; transition: .15s;
}
.attn-row:hover { border-color: var(--sb-primary-100); background: var(--sb-primary-50); }
.attn-row .a-icon { width: 34px; height: 34px; border-radius: 9px; flex: none; display: flex; align-items: center; justify-content: center; font-size: .85rem; background: #FFFBEB; color: #B45309; }
.attn-row .a-label { font-size: 13px; font-weight: 600; color: var(--sb-text); }
.attn-row .a-amt { font-size: 11.5px; color: var(--sb-faint); }

/* ------------------------------------------------------------- tables */
.sb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.sb-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.sb-table thead th {
    text-align: left; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
    color: var(--sb-faint); padding: 9px 12px; border-bottom: 1px solid var(--sb-border); white-space: nowrap;
}
.sb-table tbody td { padding: 9px 12px; border-bottom: 1px solid #EEF3F1; vertical-align: middle; }
.sb-table tbody tr:last-child td { border-bottom: 0; }
.sb-table tbody tr { transition: background .12s; }
.sb-table tbody tr:hover { background: #F7FBF9; }
.cell-user { display: flex; align-items: center; gap: .6rem; }
.avatar-sm {
    width: 33px; height: 33px; border-radius: 999px; flex: none; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sb-primary-50); color: var(--sb-primary-700); font-weight: 700; font-size: .78rem;
}
.avatar-sm img { width: 100%; height: 100%; object-fit: cover; }
.icon-btn {
    width: 31px; height: 31px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: .55rem; border: 1px solid var(--sb-border); background: #fff; color: #475569;
    cursor: pointer; font-size: .8rem; transition: .15s;
}
.icon-btn:hover { background: var(--sb-primary-50); color: var(--sb-primary-700); border-color: var(--sb-primary-100); }
.icon-btn.danger:hover { background: #FEF2F2; color: #B91C1C; border-color: #FECACA; }

/* pills / badges */
.pill { display: inline-flex; align-items: center; gap: .3rem; font-size: 11px; font-weight: 700; padding: .23rem .58rem; border-radius: 999px; white-space: nowrap; }
.pill-green { background: #ECFDF5; color: #047857; }
.pill-amber { background: #FFFBEB; color: #B45309; }
.pill-red { background: #FFF1F2; color: #BE123C; }
.pill-gray { background: #F1F5F9; color: #64748B; }
.pill-blue { background: #EFF6FF; color: #1D4ED8; }
.pill-primary { background: var(--sb-primary-50); color: var(--sb-primary-700); }

/* ------------------------------------------------------------- alerts */
.sb-alert { border-radius: 12px; padding: .8rem .95rem; font-size: .88rem; font-weight: 500; margin-bottom: 1rem; border: 1px solid; display: flex; gap: .6rem; align-items: flex-start; }
.sb-alert > i { margin-top: .15rem; }
.sb-alert-success { background: #ECFDF5; border-color: #A7F3D0; color: #065F46; }
.sb-alert-error { background: #FFF1F2; border-color: #FECDD3; color: #9F1239; }
.sb-alert-info { background: #EFF6FF; border-color: #BFDBFE; color: #1E40AF; }

/* -------------------------------------------------------- empty state */
.sb-empty { text-align: center; padding: 2.5rem 1.5rem; color: var(--sb-muted); }
.sb-empty .sb-empty-icon {
    width: 56px; height: 56px; margin: 0 auto .9rem; border-radius: 16px;
    background: var(--sb-primary-50); color: var(--sb-primary); font-size: 1.45rem;
    display: flex; align-items: center; justify-content: center;
}

/* ------------------------------------------------------------ uploads */
.upload-preview { display: flex; align-items: center; gap: .8rem; margin-bottom: .55rem; }
.upload-preview img { height: 56px; max-width: 150px; object-fit: contain; border: 1px solid var(--sb-border); border-radius: 10px; background: #fff; padding: 4px; }
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(158px, 100%), 1fr)); gap: 14px; }
@media (max-width: 767.98px) { .media-grid { gap: 12px; } }
.media-item { overflow: hidden; display: flex; flex-direction: column; }
.media-thumb { height: 108px; background: #F1F7F4; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-thumb .media-type { font-size: 1.6rem; color: var(--sb-primary); font-weight: 700; }
.media-meta { padding: .6rem .75rem; font-size: 12px; }
.dropzone { border: 1.5px dashed #B9D8CE; border-radius: var(--sb-radius); background: #F7FBF9; padding: 1rem 16px; }

/* --------------------------------------------------------------- auth */
.auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1.02fr 1fr; }
.auth-side { position: relative; color: #fff; padding: 2.4rem; display: flex; flex-direction: column; overflow: hidden; }
.auth-side .auth-side-bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .28; }
.auth-side .auth-side-inner { position: relative; z-index: 1; display: flex; flex-direction: column; height: 100%; }
.auth-main { display: flex; align-items: center; justify-content: center; padding: 2.4rem 16px; background: #fff; }
@media (max-width: 767.98px) { .auth-main { padding: 1.5rem 10px; } }
@media (max-width: 991.98px) {
    .auth-shell { grid-template-columns: 1fr; }
    .auth-side { display: none; }
}

/* ---------------------------------------------------------- installer */
.step-dot { width: 34px; height: 34px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: .85rem; background: #E2E8F0; color: #64748B; flex: none; }
.step-dot.done { background: linear-gradient(120deg, #0F766E, #059669); color: #fff; }
.step-dot.current { background: #E8830F; color: #fff; }
.step-dot i { font-size: .8rem; }

/* pagination (Laravel default markup) */
nav[role="navigation"] .pagination, .sb-pagination { display: flex; gap: .35rem; flex-wrap: wrap; }

/* ------------------------------------------------- back-to-top (v9.4)
 * Floating button (the demo's scroll affordance): fixed bottom-right,
 * hidden until the page is scrolled past 400px (JS toggles .show),
 * smooth-scrolls back to the top on click. z-index 35 keeps it below
 * the drawer (50), backdrop (45) and dropdown menus (60). The primary
 * gradient reads on both the light and dark themes unchanged.
 * v11.1: restyled to the demo's square button — 46x46px, radius 10px. */
.sb-to-top {
    position: fixed; right: 16px; bottom: 18px; z-index: 35;
    width: 46px; height: 46px; border-radius: 10px; border: 0;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(120deg, #0F766E, #059669); color: #fff;
    font-size: 1rem; cursor: pointer;
    box-shadow: 0 10px 24px rgba(11, 61, 51, .35);
    opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
@media (max-width: 767.98px) { .sb-to-top { right: 12px; } }
.sb-to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.sb-to-top:hover { filter: brightness(1.1); color: #fff; }

/* =========================================================== v9.3 DARK THEME
 * Activated by <html data-theme="dark"> (choice persisted in localStorage
 * "sb-theme": light|dark|system; system follows prefers-color-scheme).
 * Everything is scoped to the app shells (body.sb-app / .sb-shell), so
 * the installer and auth pages are untouched. Token flips do most of
 * the work (body, cards, tables read var(--sb-*)); the rules below fix
 * the components and Tailwind utilities that hard-code light colors.
 * Covered utilities (grepped from admin/panel/component views):
 * .bg-white, .bg-slate-50/.bg-slate-100, .text-slate-300..900,
 * .border-slate-50/100/200/300, .divide-slate-100/200. Status colours
 * (rose/amber/green pills, .delta-*) keep their light tints — they read
 * as badges on dark too. .text-white is deliberately NOT overridden
 * (gradient buttons/marks rely on it). */
[data-theme="dark"] body.sb-app {
    --sb-bg: #0D1512;
    --sb-card: #14231E;
    --sb-border: rgba(255, 255, 255, .08);
    --sb-text: #D7E3DD;
    --sb-muted: #8FA79C;
    --sb-faint: #6E857B;
    --sb-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
    background: #0D1512;
    color: #D7E3DD;
}
[data-theme="dark"] .sb-shell .sb-card { background-color: #14231E; border-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .sb-shell .sb-topbar { background: rgba(18, 33, 28, .94); border-bottom-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .sb-shell .sb-titlestrip { background: #12211C; border-bottom-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .sb-shell .sb-footer { background: #12211C; }
[data-theme="dark"] .sb-shell .sb-footer-links a:hover { color: #6EE7B7; }
[data-theme="dark"] .sb-shell .sb-titlestrip .sb-strip-title { color: #D7E3DD; }
[data-theme="dark"] .sb-shell .sb-icon-btn { background: #16261F; border-color: rgba(255, 255, 255, .1); color: #B9CFC7; }
[data-theme="dark"] .sb-shell .sb-icon-btn:hover { background: #1B2F27; color: #6EE7B7; border-color: rgba(255, 255, 255, .16); }
[data-theme="dark"] .sb-shell .sb-icon-btn.plain { background: transparent; border-color: transparent; }
[data-theme="dark"] .sb-shell .sb-icon-btn.plain:hover { background: rgba(255, 255, 255, .06); }
[data-theme="dark"] .sb-shell .sb-search input { background: #0F1D18; border-color: rgba(255, 255, 255, .1); color: #D7E3DD; }
[data-theme="dark"] .sb-shell .sb-search input:focus { background: #12211C; border-color: var(--sb-primary); }
[data-theme="dark"] .sb-shell .sb-search kbd { background: #1B2F27; border-color: rgba(255, 255, 255, .14); color: #8FA79C; }
[data-theme="dark"] .sb-shell .sb-profile-chip { background: #16261F; border-color: rgba(255, 255, 255, .1); }
[data-theme="dark"] .sb-shell .sb-profile-chip:hover { background: #1B2F27; border-color: rgba(255, 255, 255, .16); }
[data-theme="dark"] .sb-shell .sb-chip-name { color: #D7E3DD; }
[data-theme="dark"] .sb-shell .sb-dropdown-menu { background: #16261F; border-color: rgba(255, 255, 255, .1); box-shadow: 0 18px 44px rgba(0, 0, 0, .5); }
[data-theme="dark"] .sb-shell .sb-dropdown-head { border-bottom-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .sb-shell .sb-dd-name { color: #D7E3DD; }
[data-theme="dark"] .sb-shell .sb-dropdown-item { color: #D7E3DD; }
[data-theme="dark"] .sb-shell .sb-dropdown-item:hover { background: rgba(36, 153, 124, .16); color: #6EE7B7; }
[data-theme="dark"] .sb-shell .sb-dropdown-item.danger:hover { background: rgba(220, 38, 38, .16); }
[data-theme="dark"] .sb-shell .lbl { color: #B9CFC7; }
[data-theme="dark"] .sb-shell .input { background: #0F1D18; border-color: rgba(255, 255, 255, .13); color: #D7E3DD; }
[data-theme="dark"] .sb-shell .input:focus { border-color: var(--sb-primary); }
[data-theme="dark"] .sb-shell .input:disabled { background: #12211C; color: #6E857B; }
[data-theme="dark"] .sb-shell .btn-secondary { background: #16261F; border-color: rgba(255, 255, 255, .13); color: #D7E3DD; }
[data-theme="dark"] .sb-shell .btn-secondary:hover { border-color: var(--sb-primary); color: #6EE7B7; }
[data-theme="dark"] .sb-shell .sb-table thead th { border-bottom-color: rgba(255, 255, 255, .1); }
[data-theme="dark"] .sb-shell .sb-table tbody td { border-bottom-color: rgba(255, 255, 255, .055); }
[data-theme="dark"] .sb-shell .sb-table tbody tr:hover { background: rgba(255, 255, 255, .04); }
[data-theme="dark"] .sb-shell .icon-btn { background: #16261F; border-color: rgba(255, 255, 255, .12); color: #B9CFC7; }
[data-theme="dark"] .sb-shell .icon-btn:hover { background: #1B2F27; color: #6EE7B7; }
[data-theme="dark"] .sb-shell .kpi-foot { border-top-color: rgba(255, 255, 255, .08); }
[data-theme="dark"] .sb-shell .mini-tile { background: rgba(255, 255, 255, .05); }
[data-theme="dark"] .sb-shell .cat-tile { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .07); }
[data-theme="dark"] .sb-shell .attn-row { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .07); }
[data-theme="dark"] .sb-shell .attn-row:hover { background: rgba(36, 153, 124, .12); border-color: rgba(255, 255, 255, .12); }
[data-theme="dark"] .sb-shell .stars .off { color: #33473E; }
[data-theme="dark"] .sb-shell .prod-thumb { background: #12211C; border-color: rgba(255, 255, 255, .09); }
[data-theme="dark"] .sb-shell .avatar-sm { background: #12211C; }
[data-theme="dark"] .sb-shell .delta-flat { background: rgba(255, 255, 255, .08); color: #B9CFC7; }
[data-theme="dark"] .sb-shell .pill-gray { background: rgba(255, 255, 255, .09); color: #B9CFC7; }
[data-theme="dark"] .sb-shell .media-thumb { background: #12211C; }
[data-theme="dark"] .sb-shell .dropzone { background: #101D18; border-color: rgba(255, 255, 255, .16); }
[data-theme="dark"] .sb-shell .upload-preview img { background: #12211C; border-color: rgba(255, 255, 255, .1); }
[data-theme="dark"] .sb-shell .sb-page-title { color: #EAF3EE; }
[data-theme="dark"] .sb-shell .sb-card-title { color: #EAF3EE; }
/* Tailwind utility overrides inside the shells (see header note) */
[data-theme="dark"] .sb-shell .bg-white { background-color: #14231E !important; }
[data-theme="dark"] .sb-shell .bg-slate-50 { background-color: #101D18 !important; }
[data-theme="dark"] .sb-shell .bg-slate-100 { background-color: #1A2B24 !important; }
[data-theme="dark"] .sb-shell .text-slate-900, [data-theme="dark"] .sb-shell .text-slate-800,
[data-theme="dark"] .sb-shell .text-slate-700 { color: #D7E3DD !important; }
[data-theme="dark"] .sb-shell .text-slate-600 { color: #A9BDB3 !important; }
[data-theme="dark"] .sb-shell .text-slate-500, [data-theme="dark"] .sb-shell .text-slate-400 { color: #8FA79C !important; }
[data-theme="dark"] .sb-shell .text-slate-300 { color: #5F7268 !important; }
[data-theme="dark"] .sb-shell .border-slate-200, [data-theme="dark"] .sb-shell .border-slate-100,
[data-theme="dark"] .sb-shell .border-slate-300 { border-color: rgba(255, 255, 255, .09) !important; }
[data-theme="dark"] .sb-shell .border-slate-50 { border-color: rgba(255, 255, 255, .05) !important; }
[data-theme="dark"] .sb-shell .divide-slate-200 > :not([hidden]) ~ :not([hidden]),
[data-theme="dark"] .sb-shell .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: rgba(255, 255, 255, .07) !important; }