/* ==========================================================================
   natoy — Design System
   Identity: repair-shop reliability, technical precision, warm service
   --------------------------------------------------------------------------
   Design direction (stated intent):
   - Primary = deep teal: professional + technical, avoids the corporate-blue
     and generic SaaS-purple cliches.
   - Accent = warm amber: draws attention to overdue jobs & urgent actions
     without red fatigue.
   - Typography: Space Grotesk for headings (geometric, technical feel),
     Inter for body (proven legibility). Not a reflex Inter-everywhere pick.
   - Density is tuned for admin speed, not marketing brochure padding.
   ========================================================================== */

:root {
    /* ── Brand palette (ref: purple+teal+amber dashboard) ────────────────── */
    /* Deep purple surface scale — admin shell + masthead + sidebar */
    --c-pur-50:   #F2ECFF;
    --c-pur-100:  #D8C7F8;
    --c-pur-300:  #7C5CD4;
    --c-pur-500:  #4F2DA0;
    --c-pur-700:  #2B1656;
    --c-pur-800:  #1C0F3A;
    --c-pur-900:  #120926;

    /* Teal/mint — interactive accent + navigation highlight */
    --c-teal-50:  #E6F9F4;
    --c-teal-100: #BFEEDE;
    --c-teal-200: #7FDCC0;
    --c-teal-300: #2EE8C5;
    --c-teal-500: #16C4A8;
    --c-teal-600: #0F9C85;
    --c-teal-700: #0A6B5C;

    /* Amber — primary CTA + overdue/urgency */
    --c-amber-50:  #FFF5E0;
    --c-amber-200: #FBD58A;
    --c-amber-500: #F5B301;
    --c-amber-600: #D89500;

    /* Semantic */
    --c-success: #1B8A5A;
    --c-success-bg: #E2F4EC;
    --c-danger:  #B3261E;
    --c-danger-bg: #FDE7E6;
    --c-info:    #1F5B8F;
    --c-warn:    #9A6700;

    /* Neutrals (warm-slate) */
    --c-ink:     #0E1624;
    --c-body:    #2C3645;
    --c-muted:   #6B7280;
    --c-line:    #E5E7EB;
    --c-line-2:  #EEF0F3;
    --c-surf:    #FFFFFF;
    --c-bg:      #F6F7F9;
    --c-bg-2:    #ECEEF1;

    /* Tonal swatches for status pills */
    --tone-slate-bg:  #EEF0F3; --tone-slate-fg:  #374151;
    --tone-indigo-bg: #E8E8FA; --tone-indigo-fg: #3730A3;
    --tone-amber-bg:  #FFF1D6; --tone-amber-fg:  #92400E;
    --tone-teal-bg:   #D7ECEC; --tone-teal-fg:   #064F4F;
    --tone-green-bg:  #DCF1E4; --tone-green-fg:  #145E3B;
    --tone-gray-bg:   #E5E7EB; --tone-gray-fg:   #4B5563;
    --tone-red-bg:    #FDE2E0; --tone-red-fg:    #8C1D17;

    /* Spacing scale (4-based) */
    --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
    --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
    --sp-12: 48px; --sp-16: 64px;

    /* Radii */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --r-pill: 999px;

    /* Shadows (layered depth, not heavy drop-blobs) */
    --sh-1: 0 1px 2px rgba(14, 22, 36, .06);
    --sh-2: 0 4px 10px rgba(14, 22, 36, .06), 0 1px 2px rgba(14, 22, 36, .04);
    --sh-3: 0 12px 24px rgba(14, 22, 36, .08), 0 2px 6px rgba(14, 22, 36, .05);

    /* Type */
    --f-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --f-body: "Inter", ui-sans-serif, system-ui, sans-serif;
    --f-mono: ui-monospace, "JetBrains Mono", Menlo, monospace;

    /* Motion tokens (per /super) */
    --motion-fast:   120ms;
    --motion-ui:     180ms;
    --motion-medium: 240ms;
    --motion-slow:   320ms;
    --ease-standard:    cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-emphasized:  cubic-bezier(0.2, 0, 0, 1);
    --ease-exit:        cubic-bezier(0.4, 0, 1, 1);

    /* Layout */
    --nav-w: 244px;
}

/* ── Reset / base ─────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; text-rendering:optimizeLegibility}
body{
    margin:0;
    font-family:var(--f-body);
    font-size:14.5px;
    line-height:1.55;
    color:var(--c-body);
    background:var(--c-bg);
    -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5{font-family:var(--f-head); color:var(--c-ink); margin:0 0 var(--sp-3); letter-spacing:-.01em}
h1{font-size:28px; line-height:1.2; font-weight:700}
h2{font-size:22px; line-height:1.25; font-weight:600}
h3{font-size:18px; line-height:1.3; font-weight:600}
h4{font-size:15px; line-height:1.35; font-weight:600}
p{margin:0 0 var(--sp-3)}
a{color:var(--c-pur-500); text-decoration:none; transition:color var(--motion-fast) var(--ease-standard)}
a:hover{color:var(--c-pur-700); text-decoration:underline}
small{font-size:12.5px; color:var(--c-muted)}
code,kbd,pre{font-family:var(--f-mono); font-size:.92em}

hr{border:0; border-top:1px solid var(--c-line); margin:var(--sp-5) 0}

/* ── App shell ────────────────────────────────────────────────────────────── */
.shell{display:grid; grid-template-columns:var(--nav-w) 1fr; min-height:100vh}
.sidebar{
    background:
        radial-gradient(400px 220px at 40% 0%, rgba(22,196,168,.10), transparent 60%),
        radial-gradient(500px 300px at 60% 100%, rgba(245,179,1,.08), transparent 60%),
        linear-gradient(180deg, var(--c-pur-800) 0%, var(--c-pur-700) 55%, var(--c-pur-900) 100%);
    color:#EEE4FF;
    padding:var(--sp-5) var(--sp-4);
    position:sticky; top:0; height:100vh; overflow-y:auto;
    /* Flex column so the .me block can pin to bottom via margin-top:auto
       and nothing leaks through the sidebar visually. */
    display:flex; flex-direction:column;
    z-index:5;
    isolation:isolate;
    /* Custom scrollbar so default light scrollbar doesn't flash through */
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.18) transparent;
    border-right:1px solid rgba(255,255,255,.04);
}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:3px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar .brand{display:flex; align-items:center; gap:10px; padding:2px var(--sp-2) var(--sp-5)}
.sidebar .brand-mark{
    width:36px; height:36px; border-radius:10px;
    display:grid; place-items:center; font-weight:700; font-family:var(--f-head);
    background:linear-gradient(135deg, var(--c-amber-500), #E27A1F);
    color:#1a1104; box-shadow:var(--sh-2);
    letter-spacing:-.02em;
}
.sidebar .brand-name{font-family:var(--f-head); font-weight:700; letter-spacing:-.01em; color:#fff; font-size:15.5px}
.sidebar .brand-sub{display:block; font-size:11px; opacity:.7; letter-spacing:.08em; text-transform:uppercase}

.nav{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; flex:1 0 auto}
.nav a{
    position:relative; display:flex; align-items:center; gap:10px;
    padding:9px var(--sp-3); border-radius:var(--r-md);
    color:#D6C9F2; font-size:13.5px; font-weight:500;
    background:transparent;
    transition:background var(--motion-fast) var(--ease-standard),
               color var(--motion-fast) var(--ease-standard),
               padding-left var(--motion-fast) var(--ease-standard);
}
.nav a:hover{background:rgba(22,196,168,.10); color:#fff; text-decoration:none; padding-left:16px}
.nav a.is-active{
    background:linear-gradient(90deg, rgba(22,196,168,.22), rgba(22,196,168,.08));
    color:#E8FFF9;
    padding-left:16px;
    box-shadow:inset 0 0 0 1px rgba(22,196,168,.25);
}
.nav a.is-active::before{
    content:""; position:absolute; left:4px; top:50%; transform:translateY(-50%);
    width:3px; height:18px; background:var(--c-teal-300); border-radius:2px;
    box-shadow:0 0 10px rgba(46,232,197,.65);
    animation:navAccent var(--motion-medium) var(--ease-emphasized);
}
@keyframes navAccent{from{transform:translate(-4px,-50%) scaleY(.3); opacity:0} to{transform:translate(0,-50%) scaleY(1); opacity:1}}

/* Section separator — hardened pill on the dark purple surface
   - opaque background so nothing can overlay/redact it
   - high z-index + isolation to defeat extension/overlay interference
   - mint-tinted label pairs with the teal active-nav */
.nav .sep{
    display:flex; align-items:center; gap:10px;
    margin:var(--sp-4) 2px var(--sp-2);
    padding:5px 10px 5px 8px;
    color:#8FC9B8;
    background:rgba(22,196,168,.08) !important;
    border-radius:6px;
    font-size:10.5px; font-weight:700;
    letter-spacing:.14em; text-transform:uppercase;
    border:0;
    user-select:none; pointer-events:none;
    position:relative; z-index:3;
    isolation:isolate;
}
.nav .sep::after{
    content:""; flex:1; height:1px;
    background:linear-gradient(90deg, rgba(22,196,168,.35), rgba(22,196,168,0));
}

.sidebar .me{margin-top:auto; padding:var(--sp-3); border-top:1px solid rgba(255,255,255,.08); font-size:12.5px; color:#C7B9E6; background:transparent}
.sidebar .me b{color:#fff; font-weight:600; display:block; font-family:var(--f-head)}
.sidebar .me .role{display:inline-block; margin-top:2px; padding:2px 8px; border-radius:var(--r-pill); background:rgba(22,196,168,.18); color:#BFFFEE; font-size:11px; text-transform:capitalize; font-weight:600; letter-spacing:.03em}

.main{display:flex; flex-direction:column; min-width:0}
.topbar{
    display:flex; align-items:center; gap:var(--sp-4);
    padding:var(--sp-4) var(--sp-6);
    background:var(--c-surf);
    border-bottom:1px solid var(--c-line);
    position:sticky; top:0; z-index:10;
}
.topbar h1{font-size:18px; margin:0}
.topbar .spacer{flex:1}
.topbar .hint{color:var(--c-muted); font-size:12.5px}

.content{padding:var(--sp-6); min-width:0; animation:pageIn 260ms var(--ease-standard) both}
@keyframes pageIn{from{opacity:0; transform:translateY(4px)} to{opacity:1; transform:translateY(0)}}

/* ── Cards / panels ───────────────────────────────────────────────────────── */
.card{
    background:var(--c-surf);
    border:1px solid var(--c-line);
    border-radius:var(--r-lg);
    box-shadow:var(--sh-1);
}
.card .card-hd{
    display:flex; align-items:center; gap:var(--sp-3);
    padding:var(--sp-4) var(--sp-5);
    border-bottom:1px solid var(--c-line-2);
}
.card .card-hd h3{margin:0; font-size:15px}
.card .card-bd{padding:var(--sp-5)}
.card .card-ft{padding:var(--sp-4) var(--sp-5); border-top:1px solid var(--c-line-2); background:#FCFCFD; border-radius:0 0 var(--r-lg) var(--r-lg)}
.card.card-flat{box-shadow:none}

/* ── Dashboard Masthead (Money-at-a-glance, purple+teal+amber) ────────────── */
.masthead{
    position:relative;
    border-radius:var(--r-xl);
    padding:var(--sp-6) var(--sp-8);
    color:#F1E9FF;
    background:
        radial-gradient(620px 280px at 8% -15%, rgba(245,179,1,.22), transparent 58%),
        radial-gradient(520px 260px at 100% 120%, rgba(22,196,168,.26), transparent 60%),
        radial-gradient(300px 300px at 70% 30%, rgba(124,92,212,.28), transparent 70%),
        linear-gradient(135deg, var(--c-pur-800) 0%, var(--c-pur-700) 55%, var(--c-pur-900) 100%);
    box-shadow:0 24px 48px -20px rgba(28,15,58,.55), 0 1px 0 rgba(255,255,255,.05) inset;
    overflow:hidden;
    isolation:isolate;
    margin-bottom:var(--sp-6);
    animation:mastIn 520ms var(--ease-emphasized) both;
    border:1px solid rgba(22,196,168,.10);
}
@keyframes mastIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:translateY(0)}}

/* Subtle animated grid pattern overlay — signals "live/active system", not decoration */
.masthead::before{
    content:""; position:absolute; inset:0; z-index:-1;
    background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:32px 32px;
    mask-image:radial-gradient(circle at 80% 50%, #000 0%, transparent 70%);
    animation:gridDrift 18s linear infinite;
}
@keyframes gridDrift{from{background-position:0 0, 0 0} to{background-position:32px 32px, 32px 32px}}

.masthead .m-top{display:flex; gap:var(--sp-4); align-items:flex-start; flex-wrap:wrap}
.masthead .m-hello{flex:1 1 auto; min-width:260px}
.masthead .m-greet{font-family:var(--f-head); font-weight:700; font-size:12px; color:var(--c-teal-300); letter-spacing:.08em; text-transform:uppercase; opacity:.95; display:inline-flex; align-items:center; gap:8px}
.masthead .m-greet::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--c-teal-300); box-shadow:0 0 8px rgba(46,232,197,.6); animation:livePulse 2s var(--ease-standard) infinite}
@keyframes livePulse{0%,100%{box-shadow:0 0 8px rgba(46,232,197,.4)} 50%{box-shadow:0 0 14px rgba(46,232,197,.9)}}
.masthead h2{color:#fff; font-family:var(--f-head); font-weight:700; font-size:30px; margin:6px 0 4px; letter-spacing:-.02em; line-height:1.12}
.masthead .m-date{color:rgba(241,233,255,.65); font-size:13px}

.masthead .m-actions{display:flex; gap:10px; flex-wrap:wrap}
.masthead .m-actions .btn{height:40px; padding:0 var(--sp-5); border-radius:var(--r-pill)}
.masthead .m-actions .btn-primary{
    background:linear-gradient(135deg, var(--c-amber-500), #FFC636);
    color:#1a1104; border-color:transparent;
    box-shadow:0 8px 22px rgba(245,179,1,.45);
}
.masthead .m-actions .btn-primary:hover{background:linear-gradient(135deg, #FFC636, var(--c-amber-500)); color:#1a1104; transform:translateY(-1px)}
.masthead .m-actions .btn-ghost{
    background:rgba(22,196,168,.12); color:#CFFBEF; border-color:rgba(22,196,168,.30);
}
.masthead .m-actions .btn-ghost:hover{background:rgba(22,196,168,.22); color:#fff; transform:translateY(-1px)}

/* Money row — the single-click answer to "pila ang kwarta today" */
.masthead .m-money{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:var(--sp-4);
    margin-top:var(--sp-6); padding-top:var(--sp-5);
    border-top:1px solid rgba(22,196,168,.14);
}
.masthead .m-stat{
    position:relative; padding:14px 16px;
    border-radius:var(--r-md);
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.04);
    transition:transform var(--motion-ui) var(--ease-standard), background var(--motion-ui);
}
.masthead .m-stat:hover{transform:translateY(-2px); background:rgba(22,196,168,.05); border-color:rgba(22,196,168,.22)}
.masthead .m-stat .lbl{font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:rgba(241,233,255,.55); font-weight:700}
.masthead .m-stat .val{
    font-family:var(--f-head); font-weight:700; font-size:26px; color:#fff;
    margin-top:8px; letter-spacing:-.02em; line-height:1;
    display:inline-block; animation:numRise 520ms var(--ease-emphasized) both;
    font-variant-numeric:tabular-nums;
}
.masthead .m-stat.is-hero{
    background:linear-gradient(135deg, rgba(245,179,1,.14), rgba(245,179,1,.04));
    border-color:rgba(245,179,1,.30);
    box-shadow:0 0 0 1px rgba(245,179,1,.10) inset;
}
.masthead .m-stat.is-hero .val{
    color:#FFE18F; font-size:34px;
    text-shadow:0 0 24px rgba(245,179,1,.28);
}
.masthead .m-stat .meta{margin-top:6px; font-size:11.5px; color:rgba(241,233,255,.5)}
.masthead .m-stat .delta{display:inline-flex; align-items:center; gap:4px; padding:2px 10px; border-radius:var(--r-pill); font-size:11px; font-weight:700; margin-top:8px; letter-spacing:.02em}
.masthead .m-stat .delta.up{background:rgba(46,204,113,.22); color:#A5F0CD; box-shadow:0 0 0 1px rgba(46,204,113,.3) inset}
.masthead .m-stat .delta.up::before{content:"▲"; font-size:9px}
.masthead .m-stat .delta.dn{background:rgba(231,76,60,.22); color:#FFC6C2; box-shadow:0 0 0 1px rgba(231,76,60,.3) inset}
.masthead .m-stat .delta.dn::before{content:"▼"; font-size:9px}
.masthead .m-stat .delta.flat{background:rgba(255,255,255,.08); color:rgba(241,233,255,.75)}

@keyframes numRise{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:translateY(0)}}

.masthead .m-stat:nth-child(1){animation-delay:0ms}
.masthead .m-stat:nth-child(2) .val{animation-delay:80ms}
.masthead .m-stat:nth-child(3) .val{animation-delay:160ms}
.masthead .m-stat:nth-child(4) .val{animation-delay:240ms}

@media (max-width: 780px){
    .masthead{padding:var(--sp-5); border-radius:var(--r-lg)}
    .masthead h2{font-size:22px}
    .masthead .m-money{grid-template-columns:repeat(2, 1fr)}
    .masthead .m-stat.is-hero .val{font-size:28px}
}

/* ── KPI tiles ────────────────────────────────────────────────────────────── */
.kpi-grid{display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit, minmax(220px, 1fr))}
.kpi{
    background:var(--c-surf); border:1px solid var(--c-line); border-radius:var(--r-lg);
    padding:var(--sp-5); position:relative; overflow:hidden;
    transition:transform var(--motion-ui) var(--ease-standard), box-shadow var(--motion-ui);
    opacity:0; transform:translateY(8px);
    animation:kpiIn 420ms var(--ease-emphasized) both;
}
@keyframes kpiIn{to{opacity:1; transform:translateY(0)}}
.kpi-grid > :nth-child(1){animation-delay:0ms}
.kpi-grid > :nth-child(2){animation-delay:60ms}
.kpi-grid > :nth-child(3){animation-delay:120ms}
.kpi-grid > :nth-child(4){animation-delay:180ms}
.kpi-grid > :nth-child(5){animation-delay:240ms}
.kpi-grid > :nth-child(6){animation-delay:300ms}
.kpi-grid > :nth-child(7){animation-delay:360ms}
.kpi-grid > :nth-child(8){animation-delay:420ms}
.kpi:hover{transform:translateY(-2px); box-shadow:var(--sh-2)}
.kpi .label{color:var(--c-muted); font-size:12px; letter-spacing:.04em; text-transform:uppercase; font-weight:600}
.kpi .num{font-family:var(--f-head); font-weight:700; font-size:30px; color:var(--c-ink); margin-top:var(--sp-2); letter-spacing:-.02em; line-height:1}
.kpi .sub{margin-top:var(--sp-2); font-size:12.5px; color:var(--c-muted)}
.kpi .spark{position:absolute; right:-12px; top:-12px; width:72px; height:72px; border-radius:50%; background:var(--c-pur-50); z-index:0}
.kpi.kpi-warn .spark{background:var(--c-amber-50)}
.kpi.kpi-danger .spark{background:var(--c-danger-bg)}
.kpi.kpi-ok .spark{background:var(--c-success-bg)}
.kpi > *{position:relative; z-index:1}

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.btn{
    display:inline-flex; align-items:center; gap:8px; justify-content:center;
    height:38px; padding:0 var(--sp-4);
    border-radius:var(--r-md); border:1px solid transparent; cursor:pointer;
    font:600 13.5px/1 var(--f-body); text-decoration:none;
    background:var(--c-bg-2); color:var(--c-ink);
    transition: transform var(--motion-fast) var(--ease-standard),
                background var(--motion-fast) var(--ease-standard),
                box-shadow var(--motion-fast) var(--ease-standard);
}
.btn:hover{text-decoration:none; background:#E2E5E9}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:3px solid var(--c-pur-100); outline-offset:1px}
.btn.btn-primary{
    background:linear-gradient(135deg, var(--c-pur-700), var(--c-pur-500));
    color:#fff;
    border-color:transparent;
    box-shadow:0 4px 14px rgba(79,45,160,.28);
}
.btn.btn-primary:hover{
    background:linear-gradient(135deg, var(--c-pur-500), var(--c-pur-300));
    color:#fff;
    transform:translateY(-1px);
}
.btn.btn-accent{background:var(--c-amber-500); color:#1a1104; box-shadow:0 4px 14px rgba(245,179,1,.30)}
.btn.btn-accent:hover{background:var(--c-amber-600); color:#1a1104; transform:translateY(-1px)}
.btn.btn-teal{background:var(--c-teal-500); color:#fff}
.btn.btn-teal:hover{background:var(--c-teal-600); color:#fff}
.btn.btn-ghost{background:transparent; color:var(--c-body); border-color:var(--c-line)}
.btn.btn-ghost:hover{background:var(--c-bg-2)}
.btn.btn-danger{background:var(--c-danger); color:#fff}
.btn.btn-danger:hover{background:#8C1D17}
.btn.btn-sm{height:30px; font-size:12.5px; padding:0 var(--sp-3); border-radius:var(--r-sm)}
.btn.btn-lg{height:44px; font-size:14.5px; padding:0 var(--sp-5)}
.btn[disabled], .btn.is-disabled{opacity:.5; pointer-events:none}

.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-2); align-items:center}

/* ── Forms ────────────────────────────────────────────────────────────────── */
.form-grid{display:grid; gap:var(--sp-4); grid-template-columns:repeat(12, 1fr)}
.field{display:flex; flex-direction:column; gap:6px; grid-column:span 12}
.field.sp-6{grid-column:span 6}
.field.sp-4{grid-column:span 4}
.field.sp-3{grid-column:span 3}
.field.sp-8{grid-column:span 8}
.field label{font-size:12.5px; font-weight:600; color:var(--c-ink); letter-spacing:.01em}
.field .hint{font-size:11.5px; color:var(--c-muted)}
.field .err{font-size:12px; color:var(--c-danger)}
.field .req{color:var(--c-danger); margin-left:2px}

.input, .select, .textarea{
    width:100%; height:38px;
    padding:0 12px;
    border:1px solid var(--c-line); border-radius:var(--r-md);
    background:#fff; font:14px/1.4 var(--f-body); color:var(--c-ink);
    transition:border-color var(--motion-fast) var(--ease-standard), box-shadow var(--motion-fast);
}
.textarea{height:auto; padding:10px 12px; min-height:92px; resize:vertical; line-height:1.5}
.input:focus, .select:focus, .textarea:focus{
    outline:none; border-color:var(--c-pur-300);
    box-shadow:0 0 0 3px rgba(124,92,212,.22);
}
.input::placeholder, .textarea::placeholder{color:#98A0AD}
.field.has-err .input, .field.has-err .select, .field.has-err .textarea{border-color:var(--c-danger); box-shadow:0 0 0 3px var(--c-danger-bg)}

.select{appearance:none; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='%236B7280' d='M5.5 7.5 10 12l4.5-4.5z'/></svg>"); background-repeat:no-repeat; background-position:right 10px center; padding-right:34px}

/* ── Tables ───────────────────────────────────────────────────────────────── */
.table-wrap{overflow-x:auto; border:1px solid var(--c-line); border-radius:var(--r-lg); background:var(--c-surf)}
.table{width:100%; border-collapse:separate; border-spacing:0; font-size:13.5px}
.table th, .table td{padding:11px 14px; text-align:left; vertical-align:middle; border-bottom:1px solid var(--c-line-2)}
.table thead th{
    background:#FAFBFC; color:var(--c-muted);
    font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
    border-bottom:1px solid var(--c-line);
    position:sticky; top:0; z-index:1;
}
.table tbody tr{transition:background var(--motion-fast) var(--ease-standard)}
.table tbody tr:hover{background:#FAFBFC}
.table tbody tr:last-child td{border-bottom:0}
.table .num{text-align:right; font-variant-numeric:tabular-nums}
.table .row-overdue{background:#FFFBF0}
.table .row-overdue:hover{background:#FFF5E0}

/* ── Pills / pills / tags ─────────────────────────────────────────────────── */
.pill{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--r-pill); font-size:11.5px; font-weight:600; letter-spacing:.02em}
.pill::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.55}
.pill.t-slate{background:var(--tone-slate-bg); color:var(--tone-slate-fg)}
.pill.t-indigo{background:var(--tone-indigo-bg); color:var(--tone-indigo-fg)}
.pill.t-amber{background:var(--tone-amber-bg); color:var(--tone-amber-fg)}
.pill.t-teal{background:var(--tone-teal-bg); color:var(--tone-teal-fg)}
.pill.t-green{background:var(--tone-green-bg); color:var(--tone-green-fg)}
.pill.t-gray{background:var(--tone-gray-bg); color:var(--tone-gray-fg)}
.pill.t-red{background:var(--tone-red-bg); color:var(--tone-red-fg)}

.badge-overdue{display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:var(--r-pill); background:var(--c-danger-bg); color:var(--c-danger); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; animation:overduePulse 2.4s var(--ease-standard) infinite}
@keyframes overduePulse{0%,100%{box-shadow:0 0 0 0 rgba(179,38,30,.35)} 50%{box-shadow:0 0 0 6px rgba(179,38,30,0)}}

/* Table rows hint as clickable when they declare data-href */
.table tbody tr[data-href]{cursor:pointer}
.table tbody tr[data-href]:hover{background:#F3F7F7}

/* ── Flash ────────────────────────────────────────────────────────────────── */
.flash{padding:12px 16px; border-radius:var(--r-md); margin-bottom:var(--sp-4); border:1px solid; display:flex; align-items:center; gap:var(--sp-3); animation:slideIn var(--motion-medium) var(--ease-emphasized)}
.flash.success{background:var(--c-success-bg); border-color:#B9E3CE; color:#0E5A38}
.flash.error{background:var(--c-danger-bg); border-color:#F3BFBC; color:#761612}
.flash.info{background:#E3F0FA; border-color:#B6D4EC; color:#174A73}

@keyframes slideIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:translateY(0)}}

/* ── Timeline (ticket centerpiece) ────────────────────────────────────────── */
.timeline{position:relative; padding-left:28px}
.timeline::before{content:""; position:absolute; left:9px; top:4px; bottom:4px; width:2px; background:var(--c-line)}
.timeline-item{position:relative; padding:0 0 var(--sp-4) 0}
.timeline-item::before{
    content:""; position:absolute; left:-24px; top:3px;
    width:14px; height:14px; border-radius:50%;
    background:#fff; border:3px solid var(--c-pur-300);
    box-shadow:0 0 0 3px #fff;
}
.timeline-item.t-status::before{border-color:var(--c-amber-500)}
.timeline-item.t-payment::before{border-color:var(--c-success)}
.timeline-item.t-part_added::before, .timeline-item.t-part_removed::before{border-color:#7C3AED}
.timeline-item.t-delivered::before{border-color:var(--c-success)}
.timeline-item.t-cancelled::before{border-color:var(--c-danger)}
.timeline-item .head{display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap}
.timeline-item .who{font-weight:600; color:var(--c-ink); font-size:13px}
.timeline-item .when{color:var(--c-muted); font-size:11.5px}
.timeline-item .msg{margin-top:4px; color:var(--c-body); font-size:13.5px; white-space:pre-wrap}

/* ── Login ────────────────────────────────────────────────────────────────── */
.auth-shell{
    min-height:100vh;
    display:grid;
    place-items:center;
    padding:var(--sp-6);
    background:
        radial-gradient(800px 500px at 15% 0%, rgba(79,45,160,.22), transparent 60%),
        radial-gradient(900px 500px at 100% 100%, rgba(22,196,168,.18), transparent 60%),
        radial-gradient(500px 400px at 50% 50%, rgba(245,179,1,.10), transparent 70%),
        linear-gradient(135deg, var(--c-pur-900), var(--c-pur-800));
    color:#F1E9FF;
}
.auth-card{
    width:100%; max-width:420px;
    background:var(--c-surf); border:1px solid var(--c-line);
    border-radius:var(--r-xl); padding:var(--sp-8);
    box-shadow:var(--sh-3);
    animation:riseIn var(--motion-slow) var(--ease-emphasized);
}
@keyframes riseIn{from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:translateY(0)}}
.auth-card .brand{display:flex; align-items:center; gap:12px; margin-bottom:var(--sp-6)}
.auth-card .brand-mark{width:46px; height:46px; border-radius:12px; background:linear-gradient(135deg, var(--c-amber-500), #E27A1F); display:grid; place-items:center; color:#1a1104; font-family:var(--f-head); font-weight:700; font-size:18px; box-shadow:var(--sh-2)}
.auth-card h1{font-size:22px; margin:0}
.auth-card .subtitle{color:var(--c-muted); font-size:13px; margin-top:2px}
.auth-card form{margin-top:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-4)}
.auth-card .help{margin-top:var(--sp-4); font-size:12px; color:var(--c-muted); text-align:center}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.empty{text-align:center; padding:var(--sp-10) var(--sp-4); color:var(--c-muted)}
.empty .title{color:var(--c-ink); font-family:var(--f-head); font-weight:600; font-size:17px; margin-bottom:var(--sp-2)}
.empty .icon{width:64px; height:64px; margin:0 auto var(--sp-3); border-radius:50%; background:var(--c-pur-50); display:grid; place-items:center; color:var(--c-pur-500); font-size:28px}

/* ── Toolbar above tables / filters ───────────────────────────────────────── */
.toolbar{display:flex; gap:var(--sp-3); flex-wrap:wrap; align-items:center; margin-bottom:var(--sp-4)}
.toolbar .grow{flex:1}
.toolbar .search{flex:1; min-width:240px}
.toolbar .search .input{padding-left:34px; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>"); background-repeat:no-repeat; background-position:10px center}

/* ── Pagination ───────────────────────────────────────────────────────────── */
.pager{display:flex; gap:6px; justify-content:flex-end; align-items:center; margin-top:var(--sp-4); font-size:13px}
.pager a, .pager span{padding:6px 10px; border:1px solid var(--c-line); border-radius:var(--r-sm); background:#fff; color:var(--c-body); text-decoration:none}
.pager a:hover{background:var(--c-bg-2); text-decoration:none}
.pager .current{background:var(--c-pur-500); color:#fff; border-color:var(--c-pur-500)}
.pager .disabled{color:#9AA3B0; pointer-events:none}

/* ── Misc utilities ───────────────────────────────────────────────────────── */
.muted{color:var(--c-muted)}
.row{display:flex; gap:var(--sp-3); align-items:center; flex-wrap:wrap}
.stack{display:flex; flex-direction:column; gap:var(--sp-3)}
.between{display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3); flex-wrap:wrap}
.mono{font-family:var(--f-mono)}
.sep{height:1px; background:var(--c-line); margin:var(--sp-4) 0}
.page-head{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-4)}
.page-head .sub{color:var(--c-muted); margin-top:2px; font-size:13px}
.grid-2{display:grid; gap:var(--sp-4); grid-template-columns:2fr 1fr}

/* ── Responsive ───────────────────────────────────────────────────────────── */
@media (max-width: 960px){
    .grid-2{grid-template-columns:1fr}
    .field.sp-6, .field.sp-4, .field.sp-3, .field.sp-8{grid-column:span 12}
}
@media (max-width: 820px){
    :root{--nav-w:68px}
    .sidebar{padding:var(--sp-4) var(--sp-2)}
    .sidebar .brand-name, .sidebar .brand-sub, .nav a span.lbl, .nav .sep, .sidebar .me{display:none}
    .nav a{justify-content:center; padding:10px 6px}
    .nav a.is-active::before{display:none}
    .content{padding:var(--sp-4)}
    h1{font-size:22px}
}
@media (max-width: 560px){
    .shell{grid-template-columns:1fr; min-height:auto}
    .sidebar{position:relative; height:auto; width:100%; display:flex; gap:var(--sp-3); align-items:center; overflow-x:auto}
    .sidebar .brand{padding:0 var(--sp-2); flex-shrink:0}
    .nav{flex-direction:row; gap:2px}
    .topbar{padding:var(--sp-3) var(--sp-4)}
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
    *{animation:none !important; transition:none !important}
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print{
    .sidebar, .topbar, .btn, .pager, .toolbar{display:none !important}
    body{background:#fff}
    .content{padding:0}
    .card{box-shadow:none; border:0}
}

/* ==========================================================================
   Design System v1.2 additions
   - Accounting/ledger tone polish: stronger mono numerics, balanced rows
   - Details/accordion inline payouts in shares page
   - Sidebar mini-section dividers + live counter dots
   - Card flat hover lift and subtle KPI shimmer for pending items
   ========================================================================== */

/* Ledger-grade numeric treatment (used in Ledger + Sales + Purchases totals) */
.table .mono{font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.table tbody tr.ledger-pair{background:linear-gradient(90deg, rgba(22,196,168,.05), transparent 50%)}

/* "hero" currency value inside summary cards */
.card .card-bd strong[style*="font-size:18px"]{
    font-family:var(--f-head); letter-spacing:-.02em; color:var(--c-ink);
}

/* <details> used in Tech Shares for inline actions */
details > summary{outline:none}
details[open] > summary{background:var(--c-bg-2); color:var(--c-ink)}

/* Pending shimmer — catches the eye on KPIs that need action */
.kpi.kpi-warn::after{
    content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(100deg, transparent 30%, rgba(245,179,1,.14) 50%, transparent 70%);
    transform:translateX(-100%);
    animation:kpiShimmer 4s var(--ease-standard) infinite;
}
@keyframes kpiShimmer{0%,45%{transform:translateX(-100%)} 60%{transform:translateX(120%)} 100%{transform:translateX(120%)}}

/* Mini "chip" used for inline badges (tech commission %, roles) */
.chip{display:inline-flex; align-items:center; gap:4px; padding:1px 8px; border-radius:var(--r-pill);
    font-size:11px; font-weight:600; background:var(--c-bg-2); color:var(--c-body)}
.chip.chip-teal{background:var(--tone-teal-bg); color:var(--tone-teal-fg)}
.chip.chip-amber{background:var(--tone-amber-bg); color:var(--tone-amber-fg)}

/* KPI variant: ledger balance with signed-number color */
.kpi.kpi-balance .num.pos{color:var(--c-success)}
.kpi.kpi-balance .num.neg{color:var(--c-danger)}

/* Empty state illustrations — bigger icon, tighter copy */
.empty .icon{font-size:32px; width:72px; height:72px}

/* Wider grid-2 on large screens to let ledger breathe */
@media (min-width: 1280px){
    .grid-2{grid-template-columns:minmax(0, 2.2fr) minmax(0, 1fr)}
}

/* Purchase/Sale line-item row focus — keeps attention on the row being edited */
#itemsTbl tbody tr:focus-within{
    background:linear-gradient(90deg, rgba(124,92,212,.06), transparent 60%);
    box-shadow:inset 2px 0 0 var(--c-pur-500);
}

/* Sidebar "New" ribbon for freshly-added nav links */
.nav a.is-new::after{
    content:"NEW"; margin-left:auto; font-size:9.5px; font-weight:700;
    padding:1px 6px; border-radius:var(--r-pill);
    background:linear-gradient(135deg, var(--c-amber-500), #FFC636); color:#1a1104;
    letter-spacing:.06em; box-shadow:0 2px 6px rgba(245,179,1,.35);
}

/* Smooth details disclosure on the shares page */
details[open] > summary + *{animation:pageIn 200ms var(--ease-standard) both}

/* Table status rows: soft tint for refunded/cancelled */
.table tr.row-refunded{background:#FFFBF0}
.table tr.row-cancelled{background:#FDF2F2}

/* ==========================================================================
   Design System v1.3 — Image uploads + category tiles + hero circuit
   ========================================================================== */

/* ── Avatars ──────────────────────────────────────────────────────────────── */
.avatar{
    width:32px; height:32px; border-radius:50%; overflow:hidden;
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--c-pur-100); color:var(--c-pur-700);
    font-family:var(--f-head); font-weight:700; font-size:12.5px;
    border:1px solid rgba(79,45,160,.18);
    flex-shrink:0;
}
.avatar img{width:100%; height:100%; object-fit:cover; display:block}
.avatar-sm{width:24px; height:24px; font-size:10.5px}
.avatar-lg{width:48px; height:48px; font-size:16px}
.avatar-xl{width:88px; height:88px; font-size:28px; border-width:2px}

/* avatar group pill — used in tables */
.avatar-row{display:inline-flex; align-items:center; gap:8px}

/* Upload widget on forms */
.avatar-upload{display:flex; gap:14px; align-items:center}
.avatar-preview, .device-preview{
    width:88px; height:88px; border-radius:50%;
    background:var(--c-bg-2); display:grid; place-items:center;
    overflow:hidden; font-family:var(--f-head); font-weight:700; color:var(--c-pur-500);
    font-size:28px; border:2px dashed transparent;
}
.avatar-preview img, .device-preview img{width:100%; height:100%; object-fit:cover}
.avatar-preview.is-empty, .device-preview.is-empty{
    border-color:var(--c-line); background:
        repeating-linear-gradient(45deg, #F4F5F8, #F4F5F8 6px, #FAFBFC 6px, #FAFBFC 12px);
    color:var(--c-muted);
}
.device-preview{border-radius:var(--r-lg); width:120px; height:120px; font-size:36px}
.avatar-actions{display:flex; flex-direction:column; gap:6px; align-items:flex-start}

/* Sidebar "me" block with avatar */
.sidebar .me .me-row{display:flex; gap:10px; align-items:center}
.sidebar .me .me-avatar{
    width:38px; height:38px; border-radius:50%; overflow:hidden; flex-shrink:0;
    background:linear-gradient(135deg, var(--c-amber-500), #E27A1F);
    color:#1a1104; display:grid; place-items:center;
    font-family:var(--f-head); font-weight:700; font-size:14px;
    box-shadow:0 2px 6px rgba(0,0,0,.2), inset 0 0 0 2px rgba(255,255,255,.15);
}
.sidebar .me .me-avatar img{width:100%; height:100%; object-fit:cover}
.sidebar .me .me-avatar.is-empty{color:#1a1104}
.sidebar .me .me-body{min-width:0}
.sidebar .me .me-body b{display:block; font-family:var(--f-head); color:#fff; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* ── Category KPI tiles (AdminLTE-inspired, matches the reference dashboard) ─ */
.cat-grid{
    display:grid; gap:var(--sp-4);
    grid-template-columns:repeat(4, minmax(0, 1fr));
    margin-bottom:var(--sp-6);
}
.cat-tile{
    position:relative; display:flex; align-items:stretch; gap:0; overflow:hidden;
    border-radius:var(--r-lg); color:#fff; text-decoration:none;
    box-shadow:var(--sh-2);
    transition:transform var(--motion-ui) var(--ease-standard), box-shadow var(--motion-ui);
    animation:kpiIn 420ms var(--ease-emphasized) both;
    min-height:92px;
}
.cat-tile:hover{transform:translateY(-2px); box-shadow:var(--sh-3); color:#fff; text-decoration:none}
.cat-tile .cat-icon{
    width:86px; flex-shrink:0;
    display:grid; place-items:center; font-size:32px;
    background:rgba(0,0,0,.10); color:rgba(255,255,255,.94);
    font-family:var(--f-head);
}
.cat-tile .cat-body{flex:1; padding:14px 16px; display:flex; flex-direction:column; justify-content:space-between; min-width:0}
.cat-tile .cat-lbl{
    font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
    opacity:.95; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cat-tile .cat-num{
    font-family:var(--f-head); font-size:28px; font-weight:700; line-height:1;
    letter-spacing:-.02em; text-align:right; font-variant-numeric:tabular-nums;
    text-shadow:0 2px 10px rgba(0,0,0,.18);
}
.cat-tile .cat-foot{
    font-size:11px; opacity:.85; text-align:right; margin-top:2px;
}
/* Palette variants (aligned to reference) */
.cat-t-services   {background:linear-gradient(135deg, #00BCD4, #0097A7)}
.cat-t-clients    {background:linear-gradient(135deg, #03A9F4, #0277BD)}
.cat-t-pending    {background:linear-gradient(135deg, #78909C, #546E7A)}
.cat-t-approved   {background:linear-gradient(135deg, #1976D2, #0D47A1)}
.cat-t-inprogress {background:linear-gradient(135deg, #FB8C00, #E65100)}
.cat-t-checking   {background:linear-gradient(135deg, #FBC02D, #F57F17); color:#1a1104}
.cat-t-checking .cat-icon{color:#1a1104; background:rgba(255,255,255,.20)}
.cat-t-checking:hover{color:#1a1104}
.cat-t-done       {background:linear-gradient(135deg, #43A047, #1B5E20)}
.cat-t-cancelled  {background:linear-gradient(135deg, #E53935, #B71C1C)}
.cat-t-sales      {background:linear-gradient(135deg, #7C5CD4, #4F2DA0)}
.cat-t-ledger     {background:linear-gradient(135deg, #16C4A8, #0A6B5C)}

@media (max-width: 1024px){ .cat-grid{grid-template-columns:repeat(2, 1fr)} }
@media (max-width: 520px) { .cat-grid{grid-template-columns:1fr} }

/* ── Hero "circuit" panel (SVG background — original pattern, no 3rd-party art) */
.hero-circuit{
    position:relative; overflow:hidden;
    border-radius:var(--r-xl);
    padding:var(--sp-8) var(--sp-6);
    color:#E8FFF9;
    background:
        radial-gradient(520px 280px at 90% 110%, rgba(22,196,168,.28), transparent 60%),
        radial-gradient(420px 240px at 10% -10%, rgba(79,45,160,.28), transparent 60%),
        linear-gradient(135deg, #0B1F3A 0%, #0E2A4E 55%, #0A1528 100%);
    box-shadow:0 24px 48px -20px rgba(0,0,0,.45);
    margin-bottom:var(--sp-6);
    isolation:isolate;
}
.hero-circuit::before{
    /* Etched circuit-board lines */
    content:""; position:absolute; inset:0; z-index:-1; opacity:.55;
    background-image:
        linear-gradient(90deg, transparent 0 46px, rgba(46,232,197,.10) 47px 48px, transparent 49px 100%),
        linear-gradient(0deg,  transparent 0 46px, rgba(46,232,197,.10) 47px 48px, transparent 49px 100%);
    background-size:48px 48px;
    mask-image:radial-gradient(circle at 65% 50%, #000 0%, transparent 75%);
    animation:circuitDrift 30s linear infinite;
}
.hero-circuit::after{
    /* Glowing "nodes" */
    content:""; position:absolute; inset:0; z-index:-1;
    background-image:
        radial-gradient(3px 3px at 14% 30%,  rgba(46,232,197,.85), transparent 60%),
        radial-gradient(3px 3px at 26% 68%,  rgba(46,232,197,.60), transparent 60%),
        radial-gradient(3px 3px at 48% 22%,  rgba(245,179,1,.80),  transparent 60%),
        radial-gradient(3px 3px at 74% 40%,  rgba(46,232,197,.80), transparent 60%),
        radial-gradient(3px 3px at 86% 78%,  rgba(245,179,1,.55),  transparent 60%),
        radial-gradient(2px 2px at 60% 85%,  rgba(46,232,197,.65), transparent 60%);
    animation:nodePulse 3.2s var(--ease-standard) infinite alternate;
}
@keyframes circuitDrift{from{background-position:0 0, 0 0} to{background-position:48px 0, 0 48px}}
@keyframes nodePulse{from{opacity:.7} to{opacity:1}}

.hero-circuit h2{color:#fff; font-family:var(--f-head); font-size:28px; margin:0 0 6px; letter-spacing:-.02em}
.hero-circuit .sub{color:rgba(232,255,249,.72); max-width:560px}
.hero-circuit .pill{background:rgba(22,196,168,.16); color:#CFFBEF; border:1px solid rgba(22,196,168,.30)}
.hero-circuit .h-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:var(--sp-5)}
.hero-circuit .h-cta .btn.btn-primary{background:linear-gradient(135deg,var(--c-amber-500),#FFC636); color:#1a1104}
.hero-circuit .h-cta .btn.btn-ghost{background:rgba(22,196,168,.14); color:#CFFBEF; border:1px solid rgba(22,196,168,.30)}

/* Donut chart for ticket status (SVG, no libs) */
.donut{width:180px; height:180px}
.donut-legend{display:grid; gap:6px; font-size:12.5px}
.donut-legend .dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:middle}

/* asset version: v1.3.0 */