/* ============================================================
   SITS 360 — Design System  ·  v3 "Studio"
   Craft pass: refined neutral ramp, intentional type scale with
   tabular figures, layered hairline+shadow elevation, considered
   motion. Single teal accent used sparingly; near-black actions.

   Component vocabulary (stable — module views depend on these):
     .page-head .page-title-lg .page-sub
     .s-card .s-card-head .s-card-title .s-card-body .s-card-foot
     .stat .stat-icon .stat-value .stat-label .stat-trend
     .grid-stats   .pill .pill-{success,warning,danger,info,primary,neutral}
     .s-table .empty .quick .quick-icon .hero
     .btn-primary .btn-soft .btn-ghost   .ic-{indigo,teal,green,amber,red,cyan,violet,pink}
   New: .segmented .kbd .avatar(.ring) .dotstat
   ============================================================ */

:root {
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Cool neutral ramp */
    --c0:#ffffff; --c25:#fbfbfc; --c50:#f6f7f9; --c100:#eef0f3; --c150:#e6e8ee;
    --c200:#dde0e7; --c300:#cbd0d9; --c400:#a4abb8; --c500:#79808f;
    --c600:#565d6b; --c700:#3c424d; --c800:#252a32; --c900:#14171c;

    /* Accent (refined teal) + ink actions */
    --accent:#0fb3a3; --accent-600:#0c9c8e; --accent-700:#0a7d72; --accent-soft:#e4f6f3;
    /* Gradient stops used by hero / feature card / avatars (recoloured by accent schemes) */
    --g1:#1ec9ba; --g2:#0fb3a3; --g3:#0a857b;
    --ink:#181b21; --ink-700:#2a2f38; --ink-contrast:#ffffff;

    /* Surfaces */
    --bg:#eaebf0;            /* outer */
    --frame:#f7f8fa;         /* stage */
    --surface:#ffffff;
    --text:var(--c900);
    --muted:var(--c500);
    --muted-2:var(--c400);
    --line:rgba(20,23,28,.07);     /* hairline border */
    --line-2:rgba(20,23,28,.11);

    /* Semantic (muted, sophisticated) */
    --success:#0f8a52; --success-soft:#e7f5ec;
    --warning:#b9760f; --warning-soft:#fbf0db;
    --danger:#cf2f54;  --danger-soft:#fbe7ec;
    --info:#2a6fc2;    --info-soft:#e8f0fb;

    /* Radii */
    --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px;

    /* Layered elevation (Linear-style) */
    --sh-1: 0 1px 2px rgba(18,22,31,.05), 0 0 0 1px rgba(18,22,31,.04);
    --sh-2: 0 2px 4px rgba(18,22,31,.04), 0 10px 26px -14px rgba(18,22,31,.16), 0 0 0 1px rgba(18,22,31,.04);
    --sh-3: 0 28px 64px -28px rgba(18,22,31,.32), 0 0 0 1px rgba(18,22,31,.05);

    --t:.16s; --ease:cubic-bezier(.4,0,.2,1);
    --sidebar-w:252px;
}

*{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
*:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

body.app{
    font-family:var(--font-sans);
    font-feature-settings:'cv05' 1,'cv11' 1,'ss01' 1;
    background:var(--bg);
    color:var(--text);
    font-size:14px; line-height:1.5; letter-spacing:-.006em;
    padding:14px;
}
a{ text-decoration:none; color:inherit; }
::selection{ background:rgba(15,179,163,.18); }
.num,.stat-value,.s-table .num{ font-variant-numeric:tabular-nums; font-feature-settings:'tnum' 1; }

/* ---------- Frame ---------- */
.app-frame{
    display:flex; background:var(--frame);
    border-radius:26px; min-height:calc(100vh - 28px);
    box-shadow:var(--sh-2);
}

/* ---------- Sidebar ---------- */
.sidebar{
    width:var(--sidebar-w); flex:none; background:var(--surface);
    border-radius:26px 0 0 26px; border-right:1px solid var(--line);
    display:flex; flex-direction:column;
    position:sticky; top:14px; align-self:flex-start; height:calc(100vh - 28px);
}
.sidebar-brand{ display:flex; align-items:center; gap:.6rem; padding:1.35rem 1.4rem 1.1rem; }
.sidebar-brand .logo{
    width:36px; height:36px; border-radius:10px;
    background:linear-gradient(140deg,var(--g1),var(--g3));
    display:grid; place-items:center; color:#fff; font-weight:800; font-size:1rem;
    box-shadow:0 4px 12px -3px rgba(15,179,163,.55), inset 0 1px 0 rgba(255,255,255,.25);
}
.sidebar-brand .name{ color:var(--text); font-weight:750; font-size:1.16rem; letter-spacing:-.025em; line-height:1; }
.sidebar-brand .tag{ color:var(--muted-2); font-size:.64rem; letter-spacing:.13em; text-transform:uppercase; font-weight:600; }

.sidebar-nav{ padding:.4rem .65rem 1rem; overflow-y:auto; flex:1; }
.sidebar-nav::-webkit-scrollbar{ width:6px; }
.sidebar-nav::-webkit-scrollbar-thumb{ background:var(--c150); border-radius:6px; }
.nav-section-label{ color:var(--muted-2); font-size:.64rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; padding:1.15rem .85rem .35rem; }
.nav-item{
    display:flex; align-items:center; gap:.65rem; position:relative;
    padding:.56rem .8rem; margin:.1rem 0; border-radius:10px;
    color:var(--c600); font-weight:500; font-size:.9rem;
    transition:background var(--t) var(--ease), color var(--t) var(--ease);
}
.nav-item .bi{ font-size:1.02rem; width:1.25rem; text-align:center; color:var(--c400); transition:color var(--t) var(--ease); }
.nav-item:hover{ background:var(--c50); color:var(--text); }
.nav-item:hover .bi{ color:var(--c600); }
.nav-item.active{ background:var(--c100); color:var(--text); font-weight:600; box-shadow:inset 0 0 0 1px var(--line); }
.nav-item.active .bi{ color:var(--accent); }
.nav-item.active::before{ content:''; position:absolute; left:-.65rem; top:50%; transform:translateY(-50%); width:3px; height:18px; border-radius:0 3px 3px 0; background:var(--accent); }

.sidebar-foot{ padding:.8rem; border-top:1px solid var(--line); }
.sidebar-user{ display:flex; align-items:center; gap:.6rem; padding:.5rem .55rem; border-radius:12px; transition:background var(--t) var(--ease); }
.sidebar-user:hover{ background:var(--c50); }
.sidebar-user .who{ line-height:1.25; min-width:0; }
.sidebar-user .who b{ color:var(--text); font-size:.82rem; font-weight:600; display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sidebar-user .who span{ color:var(--muted); font-size:.7rem; }

/* ---------- Main + topbar ---------- */
.app-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
    position:sticky; top:0; z-index:20; height:72px;
    display:flex; align-items:center; gap:1rem; padding:0 1.7rem;
    background:linear-gradient(var(--frame) 68%, rgba(247,248,250,0));
    border-radius:0 26px 0 0;
}
.topbar .page-title{ font-size:1.4rem; font-weight:780; letter-spacing:-.03em; margin:0; }
.topbar-search{
    display:flex; align-items:center; gap:.5rem;
    background:var(--surface); border:1px solid var(--line-2); border-radius:11px;
    padding:.52rem .8rem; color:var(--muted-2); width:280px; max-width:30vw;
    transition:box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.topbar-search:focus-within{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,179,163,.14); }
.topbar-search input{ border:0; background:transparent; outline:none; font-size:.86rem; width:100%; color:var(--text); }
.kbd{ font:600 .68rem var(--font-sans); color:var(--muted); background:var(--c50); border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; padding:.08rem .35rem; letter-spacing:.02em; }
.icon-btn{
    width:42px; height:42px; border-radius:11px; display:grid; place-items:center;
    background:var(--surface); color:var(--c700); border:1px solid var(--line-2);
    position:relative; transition:all var(--t) var(--ease);
}
.icon-btn:hover{ color:var(--accent); border-color:rgba(15,179,163,.4); transform:translateY(-1px); }
.icon-btn:active{ transform:translateY(0) scale(.97); }
.icon-btn .dot{ position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--danger); border:2px solid #fff; }

.avatar{ width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:700; background:linear-gradient(140deg,var(--g1),var(--g3)); }
.avatar.ring{ box-shadow:0 0 0 2px var(--surface), 0 0 0 3px var(--line-2); }
.avatar.sm{ width:32px; height:32px; font-size:.78rem; border-radius:9px; }

/* ---------- Segmented control ---------- */
.segmented{ display:inline-flex; background:var(--c100); border:1px solid var(--line); border-radius:11px; padding:3px; gap:2px; }
.segmented button{ border:0; background:transparent; color:var(--muted); font:600 .82rem var(--font-sans); padding:.4rem .85rem; border-radius:8px; cursor:pointer; transition:all var(--t) var(--ease); }
.segmented button.active{ background:var(--surface); color:var(--text); box-shadow:var(--sh-1); }
.segmented button:hover:not(.active){ color:var(--text); }

/* ---------- Page + headers ---------- */
.page{ padding:.3rem 1.7rem 2rem; flex:1; }
.page-head{ margin-bottom:1.4rem; }
.page-title-lg{ font-size:1.55rem; font-weight:800; letter-spacing:-.03em; margin:0; }
.page-sub{ color:var(--muted); margin:.3rem 0 0; font-size:.92rem; }

/* ---------- Cards ---------- */
.s-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-1); }
.s-card-head{ display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.4rem; border-bottom:1px solid var(--line); }
.s-card-title{ font-size:.98rem; font-weight:700; margin:0; letter-spacing:-.015em; }
.s-card-body{ padding:1.2rem 1.4rem; }
.s-card-foot{ padding:.85rem 1.4rem; border-top:1px solid var(--line); }

/* ---------- Stats ---------- */
.grid-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.1rem; }
.stat{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3rem 1.35rem; box-shadow:var(--sh-1); transition:transform var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.stat:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.stat-icon{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.3rem; margin-bottom:1.05rem; box-shadow:inset 0 0 0 1px rgba(20,23,28,.04); }
.stat-value{ font-size:1.85rem; font-weight:800; letter-spacing:-.03em; line-height:1.05; }
.stat-label{ color:var(--muted); font-size:.84rem; margin-top:.2rem; }
.stat-trend{ display:inline-flex; align-items:center; gap:.2rem; font-size:.73rem; font-weight:700; margin-top:.55rem; padding:.13rem .45rem; border-radius:999px; }
.stat-trend.up{ color:var(--success); background:var(--success-soft); }
.stat-trend.down{ color:var(--danger); background:var(--danger-soft); }
.stat-trend.flat{ color:var(--muted); background:var(--c50); }

.ic-indigo,.ic-teal{ background:var(--accent-soft); color:var(--accent-700); }
.ic-green{ background:var(--success-soft); color:var(--success); }
.ic-amber{ background:var(--warning-soft); color:var(--warning); }
.ic-red{ background:var(--danger-soft); color:var(--danger); }
.ic-cyan{ background:var(--info-soft); color:var(--info); }
.ic-violet{ background:#efeaff; color:#6d52f0; }
.ic-pink{ background:#fceaf2; color:#cf3f86; }

/* ---------- Pills ---------- */
.pill{ display:inline-flex; align-items:center; gap:.35rem; font-size:.72rem; font-weight:650; line-height:1; padding:.34rem .6rem; border-radius:999px; background:var(--c50); color:var(--muted); }
.pill::before{ content:''; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill-success{ background:var(--success-soft); color:var(--success); }
.pill-warning{ background:var(--warning-soft); color:var(--warning); }
.pill-danger{ background:var(--danger-soft); color:var(--danger); }
.pill-info{ background:var(--info-soft); color:var(--info); }
.pill-primary{ background:var(--accent-soft); color:var(--accent-700); }
.pill-neutral{ background:var(--c100); color:var(--c600); }

/* ---------- Tables ---------- */
.s-table{ width:100%; border-collapse:separate; border-spacing:0; }
.s-table thead th{ text-align:left; font-size:.7rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted-2); padding:.7rem 1.4rem; border-bottom:1px solid var(--line); }
.s-table tbody td{ padding:.85rem 1.4rem; border-bottom:1px solid var(--line); font-size:.875rem; color:var(--c700); }
.s-table tbody tr:last-child td{ border-bottom:0; }
.s-table tbody tr{ transition:background var(--t) var(--ease); }
.s-table tbody tr:hover{ background:var(--c25); }
.s-table td .fw-semibold,.s-table td b{ color:var(--text); }

/* ---------- Empty ---------- */
.empty{ text-align:center; padding:3rem 1rem; color:var(--muted); }
.empty .bi{ font-size:2.2rem; color:var(--muted-2); }
.empty p{ margin:.65rem 0 0; }
.empty a{ color:var(--accent-700); font-weight:600; }

/* ---------- Quick ---------- */
.quick{ display:flex; align-items:center; gap:.9rem; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:1rem 1.1rem; transition:all var(--t) var(--ease); height:100%; }
.quick:hover{ border-color:rgba(15,179,163,.35); box-shadow:var(--sh-2); transform:translateY(-2px); }
.quick-icon{ width:46px; height:46px; border-radius:13px; display:grid; place-items:center; font-size:1.25rem; flex:none; box-shadow:inset 0 0 0 1px rgba(20,23,28,.04); }
.quick b{ color:var(--text); font-weight:650; display:block; font-size:.92rem; }
.quick span{ color:var(--muted); font-size:.79rem; }
.quick .bi-chevron-right{ margin-left:auto; color:var(--muted-2); transition:transform var(--t) var(--ease); }
.quick:hover .bi-chevron-right{ transform:translateX(3px); color:var(--accent); }

/* ---------- Hero ---------- */
.hero{ position:relative; overflow:hidden; border-radius:var(--r-lg); color:#fff; padding:1.75rem 1.85rem;
    background:linear-gradient(125deg,var(--g1) 0%,var(--g2) 48%,var(--g3) 100%);
    box-shadow:0 18px 40px -22px rgba(12,156,142,.7), inset 0 1px 0 rgba(255,255,255,.18); }
.hero::after{ content:''; position:absolute; right:-50px; top:-70px; width:240px; height:240px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%); }
.hero::before{ content:''; position:absolute; right:100px; bottom:-100px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle,rgba(255,255,255,.1),transparent 70%); }
.hero h1{ font-size:1.5rem; font-weight:800; letter-spacing:-.03em; margin:0; position:relative; }
.hero p{ opacity:.92; margin:.4rem 0 0; position:relative; }

/* ---------- Buttons ---------- */
.btn{ font-weight:600; border-radius:11px; font-size:.875rem; padding:.55rem 1rem; transition:all var(--t) var(--ease); }
.btn:active{ transform:scale(.975); }
.btn-sm{ padding:.4rem .7rem; font-size:.82rem; border-radius:9px; }
.btn-primary{ background:var(--ink); border-color:var(--ink); color:var(--ink-contrast); box-shadow:0 1px 2px rgba(18,22,31,.18), inset 0 1px 0 rgba(255,255,255,.08); }
.btn-primary:hover{ background:var(--ink-700); border-color:var(--ink-700); color:var(--ink-contrast); box-shadow:0 4px 12px -4px rgba(18,22,31,.4); }
.btn-soft{ background:var(--c50); color:var(--text); border:1px solid var(--line-2); }
.btn-soft:hover{ background:var(--c100); color:var(--text); }
.btn-ghost{ background:var(--surface); color:var(--c600); border:1px solid var(--line-2); }
.btn-ghost:hover{ background:var(--c50); color:var(--text); border-color:var(--line-2); }
.btn-light-on-hero{ background:rgba(255,255,255,.16); color:#fff; border:1px solid rgba(255,255,255,.32); backdrop-filter:blur(4px); }
.btn-light-on-hero:hover{ background:#fff; color:var(--accent-700); }

/* ---------- Forms ---------- */
.form-control,.form-select{ border-radius:11px; border-color:var(--line-2); padding:.58rem .8rem; font-size:.88rem; transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.form-control:focus,.form-select:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(15,179,163,.15); }
.form-control::placeholder{ color:var(--muted-2); }
.form-label{ font-size:.82rem; font-weight:600; color:var(--c700); }

/* ---------- Misc ---------- */
.text-muted2{ color:var(--muted-2)!important; }
.divider{ height:1px; background:var(--line); margin:1rem 0; }
.dropdown-menu{ border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-3); padding:.4rem; }
.dropdown-item{ border-radius:9px; font-size:.87rem; padding:.5rem .7rem; }
.app-footer{ text-align:center; color:var(--muted-2); font-size:.76rem; padding:1.3rem 0 1.5rem; }
.alert{ border-radius:13px; border:1px solid var(--line); }

/* ---------- Responsive ---------- */
@media (max-width:992px){
    body.app{ padding:0; }
    .app-frame{ border-radius:0; min-height:100vh; }
    .sidebar{ position:fixed; top:0; left:0; bottom:0; height:100vh; border-radius:0; transform:translateX(-100%); transition:transform .25s var(--ease); z-index:1050; box-shadow:var(--sh-3); }
    .sidebar.open{ transform:translateX(0); }
    .topbar{ border-radius:0; }
    .topbar-search{ display:none; }
    .sidebar-backdrop{ position:fixed; inset:0; background:rgba(10,14,22,.5); z-index:1045; opacity:0; pointer-events:none; transition:opacity .2s; }
    .sidebar-backdrop.show{ opacity:1; pointer-events:auto; }
}
@media (min-width:993px){ .sidebar-toggle{ display:none!important; } }

/* ============================================================
   DASHBOARD KPI CARDS (rich, with inline composition bars)
   ============================================================ */
.kpi { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem 1.2rem; box-shadow: var(--sh-1); height: 100%; display: flex; flex-direction: column; transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease); width: 100%; text-align: left; color: var(--text); }
button.kpi { cursor: pointer; }
.kpi:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: .7rem; }
.kpi-icn { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 1.05rem; box-shadow: inset 0 0 0 1px rgba(20,23,28,.04); }
.kpi-value { font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.kpi-label { color: var(--muted); font-size: .8rem; margin-top: .1rem; }
.kpi-label b { color: var(--text); font-weight: 600; }
.kdelta { display: inline-flex; align-items: center; gap: .15rem; font-size: .72rem; font-weight: 700; padding: .14rem .45rem; border-radius: 999px; }
.kdelta.up { color: var(--success); background: var(--success-soft); }
.kdelta.down { color: var(--danger); background: var(--danger-soft); }
.kdelta.flat { color: var(--muted); background: var(--c50); }
.kbar { display: flex; height: 8px; border-radius: 5px; overflow: hidden; background: var(--c100); margin-top: .85rem; }
.kbar > span { height: 100%; display: block; min-width: 2px; }
.klegend { display: flex; flex-wrap: wrap; gap: .25rem .8rem; margin-top: .55rem; }
.kleg { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; color: var(--muted); }
.kleg b { color: var(--text); font-weight: 600; }
.kleg .dot { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.kpi-cta { margin-top: auto; padding-top: .85rem; display: flex; align-items: center; gap: .35rem; color: var(--accent-700); font-weight: 600; font-size: .8rem; }
.kpi:hover .kpi-cta .bi-arrow-right { transform: translateX(3px); transition: transform var(--t) var(--ease); }
.kpi-empty { margin-top: .7rem; font-size: .76rem; color: var(--muted-2); }
/* Compact month filter inside a KPI card (e.g. pipeline by lead month) */
.pipe-month { appearance: auto; font-size: .74rem; font-weight: 600; color: var(--muted); background: var(--c50); border: 1px solid var(--border); border-radius: 8px; padding: .2rem 1.4rem .2rem .5rem; cursor: pointer; max-width: 120px; }
.pipe-month:hover { border-color: var(--accent); color: var(--text); }
.pipe-month:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* Featured (gradient) revenue card */
.kpi.feature { background: linear-gradient(135deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%); border: 0; color: #fff; box-shadow: 0 18px 40px -22px rgba(12,156,142,.75), inset 0 1px 0 rgba(255,255,255,.2); }
.kpi.feature .kpi-icn { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; }
.kpi.feature .kpi-label { color: rgba(255,255,255,.85); }
.kpi.feature .kpi-label b { color: #fff; }
.kpi.feature .kbar { background: rgba(255,255,255,.22); }
.kpi.feature .klegend { color: #fff; }
.kpi.feature .kleg { color: rgba(255,255,255,.85); }
.kpi.feature .kleg b { color: #fff; }
.kpi.feature .kdelta { background: rgba(255,255,255,.2); color: #fff; }
.kpi.feature .kpi-cta { color: #fff; }
.kpi.feature .kpi-empty { color: rgba(255,255,255,.8); }

/* ============================================================
   INVOICE LINE-ITEM TABLE — compact, aligned inputs
   ============================================================ */
#itemsTable { border-collapse: separate; border-spacing: 0; }
#itemsTable thead th { padding: .3rem .4rem .55rem; border-bottom: 1px solid var(--line); }
#itemsTable thead th:first-child { padding-left: .15rem; }
#itemsTable tbody td { padding: .3rem .4rem; border-bottom: 0; vertical-align: middle; }
#itemsTable tbody td:first-child { padding-left: .15rem; }
#itemsTable tbody td:last-child { padding-right: 0; }
#itemsTable tbody tr:hover { background: transparent; }
#itemsTable .form-control { height: 40px; border-radius: 10px; padding: .5rem .65rem; font-size: .88rem; border-color: var(--line-2); }
#itemsTable .form-control:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15,179,163,.14); }
#itemsTable input[type="number"] { text-align: right; -moz-appearance: textfield; }
#itemsTable input[type="number"]::-webkit-outer-spin-button,
#itemsTable input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
#itemsTable .js-amount { white-space: nowrap; font-weight: 600; color: var(--text); }
#itemsTable .js-remove { width: 34px; height: 34px; padding: 0; border-radius: 9px; }

/* ============================================================
   FILTER BAR + VIEW SWITCHER (list pages)
   ============================================================ */
.filter-bar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .85rem .9rem; box-shadow: var(--sh-1); }
.filter-bar .f { display: flex; flex-direction: column; }
.filter-bar label { font-size: .68rem; font-weight: 700; color: var(--muted-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .25rem; }
.filter-bar .form-control, .filter-bar .form-select { height: 38px; font-size: .85rem; padding: .4rem .6rem; }
.filter-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; font-weight: 600; color: var(--accent-700); background: var(--accent-soft); padding: .2rem .55rem; border-radius: 999px; }
.view-switch { display: inline-flex; background: var(--c100); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 2px; }
.view-switch a { width: 36px; height: 30px; display: grid; place-items: center; border-radius: 7px; color: var(--muted); transition: all var(--t) var(--ease); }
.view-switch a:hover { color: var(--text); }
.view-switch a.active { background: var(--surface); color: var(--text); box-shadow: var(--sh-1); }
.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; }

/* ============================================================
   DARK THEME  — token flip (html[data-theme="dark"])
   ============================================================ */
html[data-theme="dark"]{
    --c0:#1b1f27; --c25:#1f242c; --c50:#222831; --c100:#272d37; --c150:#2d343f;
    --c200:#333b46; --c300:#3d4651; --c400:#7e8794; --c500:#9aa2ae;
    --c600:#b8bfc9; --c700:#d2d7de; --c800:#e6e9ed; --c900:#f3f5f7;

    --bg:#0b0d11; --frame:#14171c; --surface:#1b1f27;
    --text:#edeff2; --muted:#9aa2ae; --muted-2:#6f7783;
    --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.12);

    --accent:#16c6b4; --accent-600:#13b3a3; --accent-700:#79e6db; --accent-soft:rgba(22,198,180,.15);
    --ink:#f3f4f6; --ink-700:#e2e4e8; --ink-contrast:#16191f;

    --success:#3ec78a; --success-soft:rgba(34,170,110,.16);
    --warning:#e3aa53; --warning-soft:rgba(205,150,55,.16);
    --danger:#f2738f;  --danger-soft:rgba(225,80,110,.16);
    --info:#6aa6f0;    --info-soft:rgba(70,135,230,.16);

    --sh-1: 0 1px 2px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05);
    --sh-2: 0 2px 6px rgba(0,0,0,.45), 0 14px 32px -16px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.05);
    --sh-3: 0 32px 70px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.06);
}
html[data-theme="dark"] .ic-violet{ background:rgba(120,90,240,.18); color:#a99bf7; }
html[data-theme="dark"] .ic-pink{ background:rgba(207,63,134,.18); color:#f08cba; }
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select{ background:var(--c50); color:var(--text); border-color:var(--line-2); }
html[data-theme="dark"] .form-control::placeholder{ color:var(--muted-2); }
html[data-theme="dark"] .dropdown-menu{ background:var(--surface); }
html[data-theme="dark"] .dropdown-item{ color:var(--c700); }
html[data-theme="dark"] .dropdown-item:hover{ background:var(--c50); color:var(--text); }
html[data-theme="dark"] .btn-close{ filter:invert(1) grayscale(1) brightness(1.4); }
html[data-theme="dark"] .alert-light{ background:var(--surface)!important; color:var(--text); }
html[data-theme="dark"] .alert-success{ background:var(--success-soft); color:var(--success); }
html[data-theme="dark"] .alert-danger{ background:var(--danger-soft); color:var(--danger); }
html[data-theme="dark"] .alert-info{ background:var(--info-soft); color:var(--info); }
html[data-theme="dark"] .text-dark{ color:var(--text)!important; }

/* ============================================================
   COMMAND PALETTE  (⌘K)
   ============================================================ */
.cmdk-overlay{
    position:fixed; inset:0; z-index:2000; display:none;
    background:rgba(12,15,22,.55); backdrop-filter:blur(3px);
    align-items:flex-start; justify-content:center; padding:12vh 1rem 1rem;
}
.cmdk-overlay.open{ display:flex; }
.cmdk{
    width:100%; max-width:560px; background:var(--surface);
    border:1px solid var(--line); border-radius:16px; box-shadow:var(--sh-3);
    overflow:hidden; animation:cmdk-in .14s var(--ease);
}
@keyframes cmdk-in{ from{ opacity:0; transform:translateY(-8px) scale(.985);} to{ opacity:1; transform:none;} }
.cmdk-search{ display:flex; align-items:center; gap:.6rem; padding:.95rem 1.1rem; border-bottom:1px solid var(--line); }
.cmdk-search .bi{ color:var(--muted-2); font-size:1.05rem; }
.cmdk-search input{ flex:1; border:0; outline:0; background:transparent; font-size:1rem; color:var(--text); font-family:var(--font-sans); }
.cmdk-search .kbd{ font-size:.66rem; }
.cmdk-list{ max-height:46vh; overflow-y:auto; padding:.45rem; }
.cmdk-list::-webkit-scrollbar{ width:8px; }
.cmdk-list::-webkit-scrollbar-thumb{ background:var(--c150); border-radius:8px; }
.cmdk-group-label{ font-size:.64rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); padding:.7rem .75rem .3rem; }
.cmdk-item{ display:flex; align-items:center; gap:.7rem; padding:.6rem .75rem; border-radius:10px; cursor:pointer; color:var(--c700); }
.cmdk-item .ci{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; background:var(--c50); color:var(--c600); font-size:.95rem; flex:none; }
.cmdk-item .lbl{ font-size:.9rem; font-weight:500; color:var(--text); }
.cmdk-item .meta{ margin-left:auto; font-size:.72rem; color:var(--muted-2); }
.cmdk-item.active,.cmdk-item:hover{ background:var(--c50); }
.cmdk-item.active{ box-shadow:inset 0 0 0 1px var(--line-2); }
.cmdk-item.active .ci{ background:var(--accent-soft); color:var(--accent-700); }
.cmdk-empty{ padding:1.6rem; text-align:center; color:var(--muted); font-size:.88rem; }
.cmdk-foot{ display:flex; gap:1rem; padding:.6rem 1rem; border-top:1px solid var(--line); color:var(--muted-2); font-size:.72rem; }
.cmdk-foot b{ color:var(--muted); font-weight:600; }
/* topbar search as a button trigger */
button.topbar-search{ cursor:pointer; text-align:left; font:inherit; }
button.topbar-search span.ph{ flex:1; color:var(--muted-2); font-size:.86rem; }

/* ============================================================
   COMPACT DENSITY  (global tightening — overrides above)
   ============================================================ */
body.app { font-size: 13.5px; }
.app-frame { border-radius: 22px; }
.sidebar { border-radius: 22px 0 0 22px; }
.topbar { height: 60px; border-radius: 0 22px 0 0; padding: 0 1.2rem; }
.topbar .page-title { font-size: 1.18rem; }
.page { padding: .2rem 1.2rem 1.3rem; }
.page-head { margin-bottom: .9rem; }
.page-title-lg { font-size: 1.28rem; }
.page-sub { font-size: .82rem; margin-top: .12rem; }
.page .mb-4 { margin-bottom: 1rem !important; }
.page .g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.page .g-3 { --bs-gutter-x: .8rem; --bs-gutter-y: .8rem; }
.grid-stats { gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.stat { padding: .85rem 1rem; border-radius: var(--r); }
.stat-icon { width: 36px; height: 36px; border-radius: 10px; font-size: 1rem; margin-bottom: .5rem; }
.stat-value { font-size: 1.4rem; }
.stat-label { font-size: .76rem; }
.s-card { border-radius: var(--r); }
.s-card-head { padding: .7rem 1.05rem; }
.s-card-title { font-size: .9rem; }
.s-card-body { padding: .9rem 1.05rem; }
.s-card-foot { padding: .65rem 1.05rem; }
.s-table thead th { padding: .48rem 1.05rem; font-size: .68rem; }
.s-table tbody td { padding: .58rem 1.05rem; font-size: .83rem; }
.hero { padding: 1.15rem 1.35rem; border-radius: var(--r); }
.hero h1 { font-size: 1.25rem; }
.hero p { font-size: .84rem; margin-top: .25rem; }
.quick { padding: .68rem .85rem; border-radius: 12px; }
.quick-icon { width: 38px; height: 38px; font-size: 1.05rem; border-radius: 11px; }
.quick b { font-size: .86rem; }
.kpi { padding: 1rem 1.1rem; }
.kpi-value { font-size: 1.45rem; }
.kpi-icn { width: 36px; height: 36px; font-size: 1rem; }
.btn { padding: .42rem .8rem; font-size: .83rem; border-radius: 9px; }
.btn-sm { padding: .3rem .55rem; font-size: .78rem; border-radius: 8px; }
.form-control, .form-select { padding: .4rem .6rem; font-size: .84rem; }
input.form-control, .form-select { height: 36px; }
.form-label { font-size: .78rem; margin-bottom: .25rem; }
.pill { padding: .28rem .5rem; font-size: .7rem; }
.app-footer { padding: .85rem 0 1rem; font-size: .73rem; }
.nav-item { padding: .5rem .8rem; font-size: .87rem; }
.sidebar-brand { padding: 1.05rem 1.3rem .9rem; }

/* Collapsible filter bar */
.filter-toggle .count { background: var(--accent-soft); color: var(--accent-700); font-size: .68rem; font-weight: 700; padding: .05rem .4rem; border-radius: 999px; margin-left: .35rem; }
.filter-bar { padding: .8rem .85rem; }

/* ============================================================
   ACCENT COLOR SCHEMES  (per-user · html[data-accent="…"])
   Teal is the default (no attribute). Each scheme recolours the
   accent + gradient stops; --accent-soft is derived translucent
   so tints stay correct on light or dark surfaces.
   ============================================================ */
html[data-accent="indigo"]  { --accent:#6366f1; --accent-600:#4f46e5; --accent-700:#4338ca; --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent); --g1:#818cf8; --g2:#6366f1; --g3:#4338ca; }
html[data-accent="violet"]  { --accent:#8b5cf6; --accent-600:#7c3aed; --accent-700:#6d28d9; --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent); --g1:#a78bfa; --g2:#8b5cf6; --g3:#6d28d9; }
html[data-accent="blue"]    { --accent:#3b82f6; --accent-600:#2563eb; --accent-700:#1d4ed8; --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent); --g1:#60a5fa; --g2:#3b82f6; --g3:#1d4ed8; }
html[data-accent="rose"]    { --accent:#f43f5e; --accent-600:#e11d48; --accent-700:#be123c; --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent); --g1:#fb7185; --g2:#f43f5e; --g3:#be123c; }
html[data-accent="amber"]   { --accent:#f59e0b; --accent-600:#d97706; --accent-700:#b45309; --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent); --g1:#fbbf24; --g2:#f59e0b; --g3:#b45309; }
html[data-accent="emerald"] { --accent:#10b981; --accent-600:#059669; --accent-700:#047857; --accent-soft:color-mix(in srgb,var(--accent) 14%,transparent); --g1:#34d399; --g2:#10b981; --g3:#047857; }
html[data-accent="cyan"]    { --accent:#06b6d4; --accent-600:#0891b2; --accent-700:#0e7490; --accent-soft:color-mix(in srgb,var(--accent) 14%,transparent); --g1:#22d3ee; --g2:#06b6d4; --g3:#0e7490; }
html[data-accent="sky"]     { --accent:#0ea5e9; --accent-600:#0284c7; --accent-700:#0369a1; --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent); --g1:#38bdf8; --g2:#0ea5e9; --g3:#0369a1; }
html[data-accent="purple"]  { --accent:#a855f7; --accent-600:#9333ea; --accent-700:#7e22ce; --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent); --g1:#c084fc; --g2:#a855f7; --g3:#7e22ce; }
html[data-accent="fuchsia"] { --accent:#d946ef; --accent-600:#c026d3; --accent-700:#a21caf; --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent); --g1:#e879f9; --g2:#d946ef; --g3:#a21caf; }
html[data-accent="pink"]    { --accent:#ec4899; --accent-600:#db2777; --accent-700:#be185d; --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent); --g1:#f472b6; --g2:#ec4899; --g3:#be185d; }
html[data-accent="red"]     { --accent:#ef4444; --accent-600:#dc2626; --accent-700:#b91c1c; --accent-soft:color-mix(in srgb,var(--accent) 13%,transparent); --g1:#f87171; --g2:#ef4444; --g3:#b91c1c; }
html[data-accent="orange"]  { --accent:#f97316; --accent-600:#ea580c; --accent-700:#c2410c; --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent); --g1:#fb923c; --g2:#f97316; --g3:#c2410c; }
html[data-accent="lime"]    { --accent:#65a30d; --accent-600:#4d7c0f; --accent-700:#3f6212; --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent); --g1:#a3e635; --g2:#84cc16; --g3:#4d7c0f; }
html[data-accent="slate"]   { --accent:#64748b; --accent-600:#475569; --accent-700:#334155; --accent-soft:color-mix(in srgb,var(--accent) 15%,transparent); --g1:#94a3b8; --g2:#64748b; --g3:#334155; }

/* In dark mode, lighten the "on-soft" text + strengthen the tint for any chosen scheme. */
html[data-theme="dark"][data-accent]{
    --accent-700: color-mix(in srgb, var(--accent) 58%, white);
    --accent-soft: color-mix(in srgb, var(--accent) 24%, transparent);
}

/* Accent picker swatches */
.accent-swatch{ width:30px; height:30px; border-radius:9px; border:2px solid transparent; background:var(--sw); cursor:pointer; padding:0; transition:transform .12s var(--ease); }
.accent-swatch:hover{ transform:scale(1.09); }
.accent-swatch.is-active{ border-color:var(--surface); box-shadow:0 0 0 2px var(--sw); }

/* Desktop-only lock for regular employees (blank screen on phones/tablets) */
.mobile-lock-screen{ display:none; }
@media (max-width: 820px){
    body.emp-lock .app-frame{ display:none !important; }
    body.emp-lock .mobile-lock-screen{
        display:flex; position:fixed; inset:0; z-index:9999;
        align-items:center; justify-content:center; text-align:center; padding:2rem;
        background:var(--bg); color:var(--text);
    }
}

/* Segmented tab bar (HR workspace, etc.) — icon + label pills */
.seg-tabs{ display:inline-flex; flex-wrap:wrap; gap:4px; background:var(--c100); border:1px solid var(--line); border-radius:13px; padding:4px; max-width:100%; }
.seg-tabs a{ display:inline-flex; align-items:center; gap:.4rem; padding:.5rem .9rem; border-radius:9px; font-size:.85rem; font-weight:600; color:var(--muted); white-space:nowrap; transition:background var(--t) var(--ease), color var(--t) var(--ease); }
.seg-tabs a .bi{ font-size:.95rem; }
.seg-tabs a:hover{ color:var(--text); }
.seg-tabs a.active{ background:var(--surface); color:var(--text); box-shadow:var(--sh-1); }

/* Notification bell + panel */
.notif-badge{ position:absolute; top:4px; right:5px; min-width:17px; height:17px; padding:0 4px; border-radius:9px; background:var(--danger); color:#fff; font-size:.62rem; font-weight:800; display:grid; place-items:center; border:2px solid var(--surface); line-height:1; }
.ws-badge{ background:var(--accent); }
.notif-panel{ width:360px; max-width:92vw; border:1px solid var(--line); border-radius:14px; box-shadow:var(--sh-3); overflow:hidden; }
.notif-tabs{ display:flex; gap:4px; padding-bottom:.5rem; border-bottom:1px solid var(--line); }
.notif-tab{ border:0; background:transparent; color:var(--muted); font-size:.78rem; font-weight:700; padding:.3rem .7rem; border-radius:8px; cursor:pointer; }
.notif-tab:hover{ color:var(--text); }
.notif-tab.active{ background:var(--accent-soft); color:var(--accent-700); }
.notif-list{ max-height:380px; overflow-y:auto; }
.notif-item{ display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .9rem; border-bottom:1px solid var(--line); position:relative; transition:background var(--t) var(--ease); }
.notif-item:hover{ background:var(--c50); }
.notif-item.unread{ background:var(--accent-soft); }
.notif-item.unread:hover{ background:var(--accent-soft); filter:brightness(.98); }
.notif-dot{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:8px; height:8px; border-radius:50%; background:var(--accent); }

/* Work drawer (right off-canvas) — half the viewport on desktop */
.work-drawer{ width:50vw; max-width:92vw; }
@media (max-width: 991.98px){ .work-drawer{ width:420px; } }
@media (max-width: 480px){ .work-drawer{ width:92vw; } }
.work-drawer .offcanvas-body{ overflow-y:auto; }
.wd-item{ display:block; border:1px solid var(--line); border-radius:10px; padding:.55rem .7rem; transition:background var(--t) var(--ease); }
.wd-item:hover{ background:var(--c50); }
.wd-todo{ border:1px solid var(--line); border-radius:9px; padding:.4rem .55rem; }
.wd-todo-title{ font-size:.86rem; }
.wd-todo-title.done{ text-decoration:line-through; color:var(--muted-2); }

/* Work-drawer tabs: keep on one row (scroll instead of wrap) */
.work-drawer .seg-tabs{ flex-wrap:nowrap; overflow-x:auto; -ms-overflow-style:none; scrollbar-width:none; }
.work-drawer .seg-tabs::-webkit-scrollbar{ display:none; }
.work-drawer .seg-tabs a{ flex:0 0 auto; white-space:nowrap; padding:.45rem .7rem; }
.wd-quick{ background:var(--c50); border:1px solid var(--line); border-radius:12px; padding:.7rem; margin-bottom:.9rem; }

/* Task timer (work drawer) */
.wd-task{ border:1px solid var(--line); border-radius:11px; padding:.55rem .7rem; transition:border-color var(--t) var(--ease); }
.wd-task:hover{ border-color:var(--line-2); }
.wd-clock{ font-variant-numeric:tabular-nums; font-size:.78rem; font-weight:700; color:var(--muted-2); letter-spacing:.02em; }
.wd-clock.live{ color:var(--accent-700); }
.wd-timer-btn{ width:30px; height:30px; flex:none; border-radius:50%; border:1px solid var(--line-2); background:var(--surface); color:var(--accent-700); display:grid; place-items:center; cursor:pointer; transition:all var(--t) var(--ease); }
.wd-timer-btn:hover{ transform:scale(1.08); }
.wd-timer-btn.running{ background:var(--danger); border-color:var(--danger); color:#fff; box-shadow:0 0 0 0 rgba(207,47,84,.5); animation:wdpulse 1.6s infinite; }
@keyframes wdpulse{ 0%{box-shadow:0 0 0 0 rgba(207,47,84,.45);} 70%{box-shadow:0 0 0 7px rgba(207,47,84,0);} 100%{box-shadow:0 0 0 0 rgba(207,47,84,0);} }

/* Polished to-dos */
.wd-todo{ transition:background var(--t) var(--ease), border-color var(--t) var(--ease); }
.wd-todo:hover{ background:var(--c50); border-color:var(--line-2); }
.wd-todo-chk{ accent-color:var(--accent); width:17px; height:17px; cursor:pointer; flex:none; }

/* Motivational toast */
.motiv-toast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%, 24px); z-index:4000;
    display:flex; align-items:center; gap:.6rem; padding:.7rem 1.1rem; border-radius:14px;
    background:var(--surface); color:var(--text); border:1px solid var(--line);
    box-shadow:var(--sh-3); opacity:0; pointer-events:none; transition:opacity .3s var(--ease), transform .3s var(--ease); max-width:90vw; }
.motiv-toast.show{ opacity:1; transform:translate(-50%, 0); }
.motiv-toast .motiv-emoji{ font-size:1.3rem; }
.motiv-toast .motiv-text{ font-weight:600; font-size:.9rem; }

/* Pomodoro focus timer (work drawer) */
.wd-pomo{ background:linear-gradient(135deg, var(--accent-soft), transparent); border:1px solid var(--line); border-radius:13px; padding:.7rem .8rem; }
.wd-pomo-mode{ font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--accent-700); background:var(--surface); border:1px solid var(--line); padding:.18rem .5rem; border-radius:999px; }
.wd-pomo.brk .wd-pomo-mode{ color:var(--warning); }
.wd-pomo-time{ font-size:1.5rem; font-weight:800; font-variant-numeric:tabular-nums; letter-spacing:-.02em; color:var(--text); }
.wd-pomo-btn{ width:32px; height:32px; border-radius:9px; border:1px solid var(--line-2); background:var(--surface); color:var(--c700); display:grid; place-items:center; cursor:pointer; transition:all var(--t) var(--ease); }
.wd-pomo-btn:hover{ transform:translateY(-1px); color:var(--accent); }
.wd-pomo-btn.primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
.wd-pomo-btn.primary:hover{ color:#fff; filter:brightness(1.05); }
.wd-pomo-bar{ height:5px; border-radius:3px; background:var(--line); margin-top:.6rem; overflow:hidden; }
.wd-pomo-bar span{ display:block; height:100%; width:0%; background:var(--accent); transition:width 1s linear; }
.wd-pomo.brk .wd-pomo-bar span{ background:var(--warning); }

/* Amount-in-words under KPI numbers */
.kpi-words{ font-size:.68rem; font-style:italic; color:var(--muted); margin:1px 0 2px; line-height:1.3; }