/* BOSTOP new look (v2): dark layout, sidebar, typography and tables from the reference designs.
   Pure styling on top of app.css + glow.css. Remove this file's <link> to undo. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{--v2-accent:#b8f54a;--v2-accent-ink:#0f1a00;--v2-radius:14px}
body{font-family:'Inter','DM Sans',system-ui,sans-serif;letter-spacing:-.005em}
.pagehead h1,.brand,.h3-stat strong,.metric strong,.card h2,.card h3{font-family:'Inter','Manrope',system-ui,sans-serif;letter-spacing:-.03em}
.card,.h3-stat,.h3-tile,.action-tile,.product-card{border-radius:var(--v2-radius)}
.nav{border-radius:10px}

/* ---------- dark layout ---------- */
body.dark-mode,html.dark-preload body{--page-bg:#0c0d10;--surface:#131418;--surface-2:#1a1c22;--ink:#f1f3f8;--muted:#9097a6;--line:#23262e;--bn-glow:rgba(184,245,74,.07);background:#0c0d10}
body.dark-mode:before,body.dark-mode:after{opacity:.07}
body.dark-mode .sidebar{background:#0f1013;border-right:1px solid #1f222a;backdrop-filter:none}
body.dark-mode .topbar{background:rgba(12,13,16,.86);border-bottom:1px solid #1f222a}
body.dark-mode .card,body.dark-mode .h3-stat,body.dark-mode .h3-tile,body.dark-mode .product-card{background-color:#131418;border:1px solid #23262e}
body.dark-mode .workspace{background:#16181d;border-color:#23262e}
body.dark-mode .navlabel{color:#6c7380;letter-spacing:1.4px}
body.dark-mode .nav{color:#aab0bd}
body.dark-mode .nav:hover{background:#1a1c22;color:#fff;transform:none}
body.dark-mode .nav.active{background:var(--v2-accent);color:var(--v2-accent-ink);font-weight:700}
body.dark-mode .nav.active .ico{color:var(--v2-accent-ink)}
body.dark-mode .nav em{background:#2a2e38;color:#e8ebf2}
body.dark-mode .nav.active em{background:rgba(0,0,0,.18);color:var(--v2-accent-ink)}
body.dark-mode .helpbox{background-color:#16181d;border-color:#23262e}
body.dark-mode .button.primary,body.dark-mode .button.green,body.dark-mode .button.dark{background:var(--v2-accent);color:var(--v2-accent-ink);border-color:transparent}
body.dark-mode .button{border-color:#2a2e38}
body.dark-mode input,body.dark-mode select,body.dark-mode textarea{background:#101115;border-color:#262a33;border-radius:10px}
body.dark-mode input:focus,body.dark-mode select:focus,body.dark-mode textarea:focus{outline:none;border-color:var(--v2-accent);box-shadow:0 0 0 3px rgba(184,245,74,.14)}

/* ---------- tables: quiet header, hairline rows ---------- */
body.dark-mode table{border-collapse:separate;border-spacing:0}
body.dark-mode th{background:#16181d;color:#9097a6;font-weight:600;font-size:12px;border-bottom:1px solid #23262e}
body.dark-mode td{border-bottom:1px solid #1d2027}
body.dark-mode tbody tr:hover td{background:#171a1f}
body.dark-mode .pill{border:1px solid rgba(255,255,255,.08)}
body.dark-mode .theme-toggle{background:#16181d;border-color:#262a33}
body.dark-mode ::-webkit-scrollbar{width:10px;height:10px}body.dark-mode ::-webkit-scrollbar-thumb{background:#2a2e38;border-radius:10px}

/* ---------- motion + ambient light (all business / staff pages) ---------- */
body.dark-mode:before{background:radial-gradient(circle,rgba(184,245,74,.55),transparent 68%)!important;opacity:.32!important}
body.dark-mode:after{background:radial-gradient(circle,rgba(59,130,246,.5),transparent 68%)!important;opacity:.30!important}
.bn-in{animation:bnRise .6s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--bi,0)*45ms)}
@keyframes bnRise{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.sidebar .nav{animation:bnSlide .5s ease both}
.sidebar .nav:nth-of-type(2){animation-delay:.04s}.sidebar .nav:nth-of-type(3){animation-delay:.08s}.sidebar .nav:nth-of-type(4){animation-delay:.12s}.sidebar .nav:nth-of-type(5){animation-delay:.16s}.sidebar .nav:nth-of-type(6){animation-delay:.2s}.sidebar .nav:nth-of-type(7){animation-delay:.24s}.sidebar .nav:nth-of-type(8){animation-delay:.28s}
@keyframes bnSlide{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
.button,.theme-toggle{transition:transform .15s,box-shadow .2s,filter .2s,border-color .2s}
.button:hover{transform:translateY(-1px);filter:brightness(1.06)}.button:active{transform:scale(.97)}
.card:hover{border-color:rgba(184,245,74,.28)}
body.dark-mode .h3-tile:hover,body.dark-mode .action-tile:hover,body.dark-mode .product-card:hover{border-color:rgba(184,245,74,.4);box-shadow:0 20px 44px -24px rgba(184,245,74,.5)}
tbody tr{transition:background .15s}
@media (prefers-reduced-motion:reduce){.bn-in,.sidebar .nav{animation:none!important}}