/* ============================================================
ไร่แสนสุขฟาร์ม — GRAND FEED ERP · design system
Mint / glassmorphism, ported & expanded from the legacy app.
============================================================ */
:root{
--mint-50:#f6fdfb; --mint-100:#ecf7f2; --mint-200:#d6efe7; --mint-300:#aedfd0;
--mint-400:#79ccb1; --mint-500:#4fbd9d; --mint-600:#37a287; --mint-700:#2a806b;
--ink:#0d2a20; --muted:#4f7165; --line:rgba(28,96,74,.24);
--glass:rgba(255,255,255,.7); --glassb:rgba(28,96,74,.2);
--shadow:0 10px 28px -12px rgba(8,120,90,.28);
--t1:#10b981; --t1b:rgba(16,185,129,.14);
--t2:#f59e0b; --t2b:rgba(245,158,11,.14);
--t3:#0ea5e9; --t3b:rgba(14,165,233,.14);
--t4:#8b5cf6; --t4b:rgba(139,92,246,.14);
--danger:#ef4444; --dangerb:rgba(239,68,68,.12);
--warn:#f59e0b; --ok:#10b981; --info:#0ea5e9;
--r:18px; --sb:264px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Sarabun","Helvetica Neue",sans-serif;
color:var(--ink);
background:#ffffff;
min-height:100vh; font-size:15px; line-height:1.45;
}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)}
.tnum{font-variant-numeric:tabular-nums}
/* ===== Layout ===== */
.app{display:flex;min-height:100vh}
.content{flex:1;min-width:0;display:flex;flex-direction:column}
main{flex:1;padding:18px;max-width:1180px;width:100%;margin:0 auto;animation:fade .3s ease}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ===== Sidebar (always dark) ===== */
.sb-backdrop{position:fixed;inset:0;background:rgba(10,58,44,.35);backdrop-filter:blur(3px);
z-index:60;opacity:0;pointer-events:none;transition:.25s}
body.sb-open .sb-backdrop{opacity:1;pointer-events:auto}
#sidebar{
position:fixed;top:0;bottom:0;left:0;z-index:70;width:var(--sb);max-width:84vw;
background:
radial-gradient(130% 72% at 0% 0%, rgba(209,250,229,.34), transparent 58%),
radial-gradient(120% 80% at 100% 100%, rgba(13,148,136,.5), transparent 55%),
linear-gradient(168deg, #34d399 0%, #10b981 40%, #0d9488 72%, #0f766e 100%);
border-right:1px solid rgba(153,246,228,.2);
box-shadow:14px 0 50px -18px rgba(0,0,0,.6);
transform:translateX(-105%);transition:transform .28s cubic-bezier(.2,.8,.2,1),width .25s ease;
display:flex;flex-direction:column;padding:16px 12px;overflow:hidden}
body.sb-open #sidebar{transform:translateX(0)}
.sb-head{display:flex;align-items:center;gap:11px;padding:4px 8px 14px;
border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:10px;position:relative}
/* Premium logo */
.sb-logo{width:46px;height:46px;border-radius:14px;flex:0 0 auto;font-size:13px;font-weight:900;
letter-spacing:.5px;
background:linear-gradient(135deg,#4fbd9d 0%,#1e7a5f 60%,#0f4a37 100%);
display:flex;align-items:center;justify-content:center;color:#fff;
box-shadow:0 8px 22px -6px rgba(79,189,157,.65),inset 0 1px 0 rgba(255,255,255,.28);
border:1px solid rgba(255,255,255,.15);transition:.2s}
.sb-logo-rf{font-size:13px;font-weight:900;letter-spacing:.5px;line-height:1}
.sb-head .nm{font-weight:800;font-size:14.5px;line-height:1.15;color:#fff}
.sb-head .sub{font-size:9.5px;color:rgba(255,255,255,.5);font-weight:700;letter-spacing:1.2px}
#sidebar nav{display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1;padding-right:2px}
.nav-group{font-size:10px;font-weight:800;color:rgba(255,255,255,.3);letter-spacing:.8px;
text-transform:uppercase;margin:14px 12px 5px;white-space:nowrap;overflow:hidden}
#sidebar nav a{display:flex;align-items:center;gap:11px;border-radius:12px;
padding:10px 13px;font-size:14px;font-weight:700;color:rgba(255,255,255,.65);
transition:.13s;position:relative;white-space:nowrap}
#sidebar nav a .ic{width:22px;height:22px;flex:0 0 22px;display:flex;align-items:center;justify-content:center}
#sidebar .ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;display:block}
#sidebar .ic-emoji{font-size:18px;line-height:1}
#sidebar nav a:hover{background:rgba(255,255,255,.1);color:#fff}
#sidebar nav a.active{color:#fff;background:linear-gradient(135deg,rgba(255,255,255,.26),rgba(255,255,255,.1));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
#sidebar nav a .badge{margin-left:auto;background:var(--danger);color:#fff;font-size:10px;
font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;
justify-content:center;padding:0 5px;flex:0 0 auto}
#sidebar nav a.active .badge{background:rgba(255,255,255,.25)}
.sb-foot{margin-top:auto;font-size:11px;color:rgba(255,255,255,.38);text-align:center;
padding-top:12px;border-top:1px solid rgba(255,255,255,.08);overflow:hidden}
.sb-logout{margin-top:10px;width:100%;border:0;border-radius:12px;cursor:pointer;font-family:inherit;
padding:9px;font-weight:700;font-size:13px;background:rgba(239,68,68,.2);color:#fca5a5;
white-space:nowrap;transition:.13s;display:flex;align-items:center;justify-content:center;gap:8px}
.sb-logout:hover{background:rgba(239,68,68,.32)}
/* "ล็อกโหมดผู้บริหาร" — same shape as logout, but readable on every sidebar */
.sb-mgmt-lock{background:rgba(255,255,255,.16);color:#eafff4}
.sb-mgmt-lock:hover{background:rgba(255,255,255,.26)}
html[data-theme="minimal"] .sb-mgmt-lock{background:#d5efe1;color:#2a806b}
html[data-theme="minimal"] .sb-mgmt-lock:hover{background:#c3e8d3}
/* ===== Topbar ===== */
header{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:12px;
padding:11px 18px;background:rgba(255,255,255,.6);backdrop-filter:saturate(180%) blur(18px);
border-bottom:1px solid var(--line)}
.burger{width:40px;height:40px;border:0;border-radius:12px;cursor:pointer;flex:0 0 auto;
background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--line);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.burger span{display:block;width:18px;height:2.2px;border-radius:2px;background:var(--mint-700)}
.page-title{font-size:17px;font-weight:800;margin:0;display:flex;align-items:center;gap:8px}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:14px}
.clock{text-align:right;font-variant-numeric:tabular-nums;line-height:1.1}
.clock .t{font-size:15px;font-weight:800}
.clock .d{font-size:10.5px;color:var(--muted)}
.userchip{display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.7);
border:1px solid var(--line);border-radius:14px;padding:6px 12px 6px 8px}
.avatar{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--mint-400),var(--mint-600));
color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.userchip .un{font-size:13px;font-weight:800;line-height:1.1}
.userchip .ur{font-size:10.5px;color:var(--mint-700);font-weight:700}
@media(max-width:680px){.clock,.userchip .un,.userchip .ur{display:none}}
/* ===== Desktop docked sidebar + collapse ===== */
@media(min-width:980px){
.sb-backdrop{display:none}
#sidebar{transform:translateX(0)}
.content{margin-left:var(--sb);transition:margin-left .28s cubic-bezier(.2,.8,.2,1)}
/* collapsed: hide the sidebar entirely, content spans full width */
body.sb-collapsed #sidebar{transform:translateX(-105%)}
body.sb-collapsed .content{margin-left:0}
/* Keep burger visible on desktop to show/hide the sidebar */
.burger{display:flex}
}
/* ===== Cards ===== */
.card{background:var(--glass);border:1px solid var(--glassb);border-radius:var(--r);
box-shadow:var(--shadow);backdrop-filter:blur(14px);padding:16px;margin-bottom:14px}
.card h2{font-size:14px;margin:0 0 13px;display:flex;align-items:center;gap:8px;font-weight:800}
.card h2 .pill{margin-left:auto;font-size:11px;font-weight:700;color:var(--mint-700);
background:var(--mint-100);padding:3px 10px;border-radius:999px}
.section-title{font-size:12px;font-weight:800;color:var(--muted);margin:18px 4px 8px;
letter-spacing:.5px;text-transform:uppercase}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media(max-width:860px){.grid2,.grid3{grid-template-columns:1fr}}
.flex{display:flex;align-items:center;gap:10px}
.flex-between{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mt{margin-top:14px}
/* ===== Stat / hero cards ===== */
.hero{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}
@media(max-width:860px){.hero{grid-template-columns:1fr 1fr}}
.hcard{border-radius:20px;padding:16px;color:#fff;position:relative;overflow:hidden;min-height:108px;
box-shadow:0 14px 30px -14px rgba(0,0,0,.3);display:flex;flex-direction:column;justify-content:space-between}
.hcard::after{content:"";position:absolute;right:-22px;top:-22px;width:88px;height:88px;border-radius:50%;background:rgba(255,255,255,.16)}
.hcard .hic{font-size:22px;position:relative}
.hcard .hlab{font-size:12px;font-weight:700;opacity:.95;position:relative}
.hcard .hval{font-size:23px;font-weight:800;letter-spacing:-.5px;font-variant-numeric:tabular-nums;position:relative}
.hcard .hsub{font-size:11px;opacity:.92;font-weight:600;position:relative}
.g-mint{background:linear-gradient(135deg,#4fbd9d,#2a806b)}
.g-blue{background:linear-gradient(135deg,#38bdf8,#0369a1)}
.g-violet{background:linear-gradient(135deg,#a78bfa,#6d28d9)}
.g-amber{background:linear-gradient(135deg,#fbbf24,#b45309)}
.g-rose{background:linear-gradient(135deg,#fb7185,#be123c)}
.g-slate{background:linear-gradient(135deg,#94a3b8,#475569)}
/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:11px}
@media(max-width:860px){.kpis{grid-template-columns:1fr 1fr}}
.kpi{background:var(--glass);border:1px solid var(--glassb);border-radius:16px;padding:13px 14px;
box-shadow:var(--shadow);position:relative;overflow:hidden}
.kpi .lab{font-size:11px;color:var(--muted);font-weight:700}
.kpi .val{font-size:22px;font-weight:800;margin-top:5px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.kpi .unit{font-size:12px;color:var(--muted);font-weight:600}
.kpi.pos .val{color:var(--mint-600)} .kpi.neg .val{color:var(--danger)}
.kpi .bar{position:absolute;left:0;top:0;bottom:0;width:5px}
/* ===== Forms ===== */
.field{margin-bottom:11px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
input,select,textarea{width:100%;font-family:inherit;font-size:15px;color:var(--ink);
background:rgba(255,255,255,.9);border:1.5px solid var(--line);border-radius:12px;
padding:10px 12px;outline:none;transition:.15s;-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
input:focus,select:focus,textarea:focus{border-color:var(--mint-400);box-shadow:0 0 0 4px rgba(22,192,141,.13)}
textarea{resize:vertical;min-height:84px;font-size:14px;line-height:1.5}
.row{display:grid;gap:10px}
.row.c2{grid-template-columns:1fr 1fr}
.row.c3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:560px){.row.c2,.row.c3{grid-template-columns:1fr}}
.hint{font-size:11px;color:var(--muted);margin-top:4px;line-height:1.5}
/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;border:0;border-radius:13px;
padding:11px 17px;font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;transition:.13s;text-decoration:none}
.btn:active{transform:scale(.97)}
.btn-block{width:100%}
.btn-primary{background:linear-gradient(135deg,var(--mint-400),var(--mint-600));color:#fff;
box-shadow:0 8px 20px -6px rgba(8,120,90,.55)}
.btn-ghost{background:rgba(255,255,255,.75);color:var(--mint-700);border:1.5px solid var(--line)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:10px}
.btn-danger{background:var(--dangerb);color:var(--danger)}
.btn-dark{background:var(--ink);color:#fff}
/* ===== Chips ===== */
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:8px 14px;border-radius:12px;font-size:13px;font-weight:700;cursor:pointer;
background:rgba(255,255,255,.7);border:1.5px solid var(--line);color:var(--muted);transition:.13s}
.chip:hover{border-color:var(--mint-300)}
.chip.active{color:#fff;background:linear-gradient(135deg,var(--mint-400),var(--mint-600));border-color:transparent}
/* ===== Lists ===== */
.list{display:flex;flex-direction:column;gap:9px}
.item{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.74);
border:1px solid var(--glassb);border-radius:15px;padding:12px 14px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.item .tag{position:absolute;left:0;top:0;bottom:0;width:5px}
.item .main{flex:1;min-width:0}
.item .main .t1{font-weight:800;font-size:14px;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.item .main .t2{font-size:12px;color:var(--muted);margin-top:2px}
.item .amt{text-align:right;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.item .amt small{display:block;font-size:11px;color:var(--muted);font-weight:600}
.item .acts{display:flex;gap:6px;margin-left:6px}
/* ===== Data tables ===== */
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px}
.tbl{width:100%;border-collapse:collapse;font-size:13px}
.tbl th{text-align:right;font-size:11px;color:var(--muted);font-weight:800;padding:9px 8px;
border-bottom:2px solid var(--line);white-space:nowrap;text-transform:uppercase;letter-spacing:.3px}
.tbl th:first-child,.tbl td:first-child{text-align:left}
.tbl td{padding:10px 8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums;vertical-align:middle}
.tbl tbody tr:hover{background:rgba(79,189,157,.06)}
.tbl tr:last-child td{border-bottom:0}
.tbl tfoot td{font-weight:800;border-top:2px solid var(--line);border-bottom:0}
.tbl .r{text-align:right}.tbl .c{text-align:center}
/* ===== Horizontal bars ===== */
.bars{display:flex;flex-direction:column;gap:10px}
.barrow{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:10px;font-size:12px}
.barrow .lab{font-weight:700;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bartrack{height:12px;background:rgba(8,120,90,.08);border-radius:8px;overflow:hidden}
.barfill{height:100%;border-radius:8px;transition:width .5s ease}
.barrow .v{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
/* ===== Statement tables (P&L / BS) ===== */
.stmt{width:100%;border-collapse:collapse;font-size:13.5px}
.stmt td{padding:8px 4px;border-bottom:1px solid var(--line)}
.stmt td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.stmt tr.head td{font-weight:800;color:var(--mint-700);font-size:12px;text-transform:uppercase;border-bottom:2px solid var(--line)}
.stmt tr.sub td:first-child{padding-left:18px;color:var(--muted);border-bottom:1px dashed var(--line)}
.stmt tr.total td{font-weight:800;border-top:2px solid var(--line);border-bottom:0;font-size:14.5px}
.stmt tr.total td:last-child{color:var(--mint-700)}
.stmt tr.net td{font-weight:800;font-size:16px;border-top:2px solid var(--ink);border-bottom:0;padding-top:12px}
.stmt .neg{color:var(--danger)!important}
.balchk{margin-top:10px;font-size:12px;font-weight:700;text-align:center;padding:8px;border-radius:11px}
.balchk.ok{background:var(--t1b);color:var(--t1)}
.balchk.no{background:var(--dangerb);color:var(--danger)}
/* ===== Badges / status ===== */
.badge-s{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;
padding:3px 9px;border-radius:999px;white-space:nowrap}
.b-green{background:var(--t1b);color:var(--t1)}
.b-amber{background:var(--t2b);color:var(--t2)}
.b-blue{background:var(--t3b);color:var(--t3)}
.b-violet{background:var(--t4b);color:var(--t4)}
.b-red{background:var(--dangerb);color:var(--danger)}
.b-gray{background:rgba(100,116,139,.13);color:#64748b}
.dot{width:11px;height:11px;border-radius:4px;flex:0 0 auto;display:inline-block}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:30px;height:30px;border-radius:9px;cursor:pointer;border:2px solid transparent;transition:.12s}
.swatch.sel{border-color:var(--ink);transform:scale(1.1)}
.divider{height:1px;background:var(--line);margin:14px 0}
/* ===== Empty state ===== */
.empty{text-align:center;color:var(--muted);padding:34px 14px;font-size:13.5px}
.empty .ic{font-size:38px;display:block;margin-bottom:8px;opacity:.7}
/* ===== Close-total (month-end closing report) ===== */
.ct-hero{border-radius:22px;padding:24px 26px;color:#fff;position:relative;overflow:hidden;margin-bottom:16px;
box-shadow:0 18px 42px -18px rgba(8,120,90,.5)}
.ct-hero.pos{background:linear-gradient(135deg,#4fbd9d 0%,#2a806b 68%,#185445 130%)}
.ct-hero.neg{background:linear-gradient(135deg,#fb7185 0%,#be123c 72%,#9f1239 130%)}
.ct-hero::after{content:"";position:absolute;right:-44px;top:-44px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.12)}
.ct-hero>*{position:relative;z-index:1}
.ct-hero-period{font-size:13px;font-weight:700;opacity:.92;letter-spacing:.4px}
.ct-hero-label{font-size:14px;font-weight:700;margin-top:5px;display:flex;align-items:center;gap:8px}
.ct-hero-value{font-size:40px;font-weight:800;letter-spacing:-1px;font-variant-numeric:tabular-nums;margin:2px 0 4px;line-height:1.05}
.ct-hero-compare{font-size:12.5px;font-weight:700;opacity:.95;margin-bottom:13px;display:inline-flex;align-items:center;gap:6px}
.ct-margin-bar{height:9px;background:rgba(255,255,255,.25);border-radius:6px;overflow:hidden;margin-bottom:6px}
.ct-margin-fill{height:100%;background:rgba(255,255,255,.92);border-radius:6px;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.ct-margin-text{display:flex;justify-content:space-between;font-size:12px;font-weight:700;opacity:.95}
.ct-hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;padding-top:15px;border-top:1px solid rgba(255,255,255,.22)}
.ct-stat-label{font-size:11.5px;font-weight:600;opacity:.85}
.ct-stat-value{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:2px;letter-spacing:-.3px}
.ct-hero-breakdown{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:13px}
.ct-bd{background:rgba(255,255,255,.15);border-radius:13px;padding:11px 14px;backdrop-filter:blur(4px)}
.ct-bd-label{font-size:11.5px;font-weight:600;opacity:.92}
.ct-bd-value{font-size:17px;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.ct-bd-pct{font-size:10.5px;opacity:.85;font-weight:600}
.ct-panels{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:16px}
@media(max-width:980px){.ct-panels{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.ct-panels{grid-template-columns:1fr}}
.ct-panel{background:var(--glass);border:1px solid var(--glassb);border-radius:16px;padding:15px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}
.ct-panel-tag{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--muted);margin-bottom:11px}
.ct-panel-dot{width:9px;height:9px;border-radius:3px;flex:0 0 auto}
.ct-panel-main{font-size:23px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.ct-panel-foot{font-size:10.5px;color:var(--muted);font-weight:600;margin-top:2px}
.ct-prow{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-top:10px;font-size:12.5px}
.ct-prow .l{color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}
.ct-prow .v{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-prow .pct{font-size:10.5px;color:var(--muted);font-weight:700;margin-left:5px}
.ct-dual{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:2px}
.ct-dual-cell{border-radius:11px;padding:10px 11px}
.ct-dual-fixed{background:var(--dangerb)}
.ct-dual-var{background:var(--t3b)}
.ct-dual-label{font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.3px}
.ct-dual-value{font-size:16px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:3px}
.ct-dual-pct{font-size:10.5px;font-weight:700;color:var(--muted);margin-top:1px}
/* editable worksheet rows */
.ct-erow{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.ct-erow input,.ct-erow select{flex:1;min-width:86px;height:42px;margin:0}
.ct-erow .ct-name{flex:2.2;min-width:150px}
.ct-erow select{flex:1.3;min-width:120px}
.ct-erow .ct-pct{flex:0 0 auto;min-width:46px;text-align:right;font-size:11px;font-weight:800;color:var(--muted)}
.ct-rm{flex:0 0 auto;width:38px;height:38px;border:0;border-radius:10px;cursor:pointer;background:var(--dangerb);color:var(--danger);font-weight:800;font-size:14px}
.ct-rm:hover{filter:brightness(.96)}
.ct-sub-tot{margin-top:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-weight:800;font-size:13.5px;padding-top:11px;border-top:1px solid var(--line)}
.ct-sub-tot .seg{color:var(--muted);font-weight:700;font-size:12.5px}
.ct-cogs{margin-top:13px;background:var(--mint-50);border:1px solid var(--mint-200);border-radius:13px;padding:13px 15px}
.ct-cogs .r{display:flex;justify-content:space-between;font-size:13px;padding:3px 0;color:var(--muted);font-weight:600}
.ct-cogs .r b{color:var(--ink);font-variant-numeric:tabular-nums}
.ct-cogs .r i{flex:0 0 74px;text-align:right;font-style:normal;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-cogs .r b{flex:0 0 122px;text-align:right;white-space:nowrap}
.ct-cogs .r span{flex:1 1 auto;min-width:0}
.ct-cogs .mid{border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);margin:4px 0;padding:5px 0;color:var(--ink);font-weight:800}
.ct-cogs .tot{font-weight:800;border-top:1.5px solid var(--line);margin-top:5px;padding-top:7px;font-size:14px;color:var(--ink)}
/* ===== Unsaved-worksheet bar — offers back what a lock-out would have eaten ===== */
.ct-draft{display:flex;align-items:center;gap:13px;flex-wrap:wrap;margin-bottom:14px;
background:#fff8e6;border:1.5px solid #f0c36b;border-left:5px solid #e79b1c;border-radius:14px;padding:13px 16px}
.ct-draft .d-ic{flex:0 0 auto;font-size:22px;line-height:1}
.ct-draft .d-tx{flex:1 1 240px;min-width:0}
.ct-draft .d-tx b{display:block;font-size:14px;font-weight:800;color:#8a5300}
.ct-draft .d-tx span{font-size:12.5px;color:#95713a;font-weight:600}
.ct-draft .d-bt{flex:0 0 auto;display:flex;gap:8px}
.ct-draft[hidden]{display:none}
html[data-theme="dark"] .ct-draft{background:rgba(231,155,28,.12);border-color:rgba(231,155,28,.42)}
html[data-theme="dark"] .ct-draft .d-tx b{color:#fcd34d}
html[data-theme="dark"] .ct-draft .d-tx span{color:#d8b980}
/* ===== Herd box — counted in head, carried month to month like the debts ===== */
.ct-herd{display:flex;flex-direction:column;gap:9px}
.ct-herd-row{border:1px solid var(--glassb);border-left:4px solid var(--mint-200);border-radius:13px;padding:10px 12px;background:rgba(255,255,255,.5)}
html[data-theme="dark"] .ct-herd-row{background:rgba(255,255,255,.03)}
.ct-herd-row.open{border-left-color:#0ea5e9}
.ct-herd-row.buy{border-left-color:#f59e0b}
.ct-herd-row.close{border-left-color:#10b981}
.ct-herd-row .hl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:13px}
.ct-herd-row .hl b{color:var(--ink);font-weight:800}
.ct-herd-row .tag{font-size:10px;font-weight:800;padding:3px 8px;border-radius:7px;white-space:nowrap;
background:rgba(14,165,233,.13);color:#0369a1}
.ct-herd-row .tag.buy{background:rgba(245,158,11,.15);color:#b45309}
.ct-herd-row .tag.close{background:rgba(16,185,129,.15);color:#047857}
.ct-herd-row .hf{display:flex;gap:9px;flex-wrap:wrap}
.ct-herd-row .hf label{flex:1 1 145px;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:var(--muted)}
/* display ที่เขียนเองชนะ [hidden] เสมอ — ถ้าไม่ปิดตรงนี้ ช่องที่สั่งซ่อนจะยังโผล่อยู่ */
.ct-herd-row .hf label[hidden]{display:none}
.ct-herd-row .hf input{flex:1;min-width:70px;height:40px;margin:0;text-align:right;font-variant-numeric:tabular-nums}
/* ทับพื้นช่องด้วยสีเข้มจาง ๆ แทนการอ้าง --mint-50 — บางธีมค่านั้นเกือบขาว ช่องที่ล็อกจะดูเหมือนช่องปกติ */
.ct-herd-row .hf input.ro{background:rgba(15,42,32,.075);color:var(--muted);cursor:not-allowed}
/* ธีมมืด: ช่องปกติพื้นเป็น rgba(255,255,255,.05) อยู่แล้ว ถ้าใช้ค่าเดียวกันจะแยกไม่ออกว่าช่องไหนล็อก */
html[data-theme="dark"] .ct-herd-row .hf input.ro{background:rgba(255,255,255,.11);color:var(--muted)}
/* ป้ายพวกนี้เป็นตัวหนังสือเข้มบนพื้นจาง — บนพื้นมืดจะจมหายไป ต้องพลิกเป็นสีอ่อน */
html[data-theme="dark"] .ct-herd-row .tag,
html[data-theme="dark"] .ct-carry-tag{background:rgba(14,165,233,.22);color:#7dd3fc}
html[data-theme="dark"] .ct-herd-row .tag.buy{background:rgba(245,158,11,.22);color:#fcd34d}
html[data-theme="dark"] .ct-herd-row .tag.close{background:rgba(16,185,129,.22);color:#6ee7b7}
html[data-theme="dark"] .ct-herd-auto .warn{color:#fcd34d}
html[data-theme="dark"] .ct-herd-use{color:#6ee7b7}
.ct-herd-row .hf .u{flex:0 0 auto;font-size:11px;font-weight:700;color:var(--muted)}
.ct-herd-auto{margin-top:7px;font-size:11.5px;font-weight:600;color:var(--muted);line-height:1.55}
.ct-herd-auto b{color:var(--ink);font-variant-numeric:tabular-nums}
.ct-herd-auto .warn{color:#b45309;font-weight:700}
.ct-herd-edit,.ct-herd-use{margin-left:auto;border:1px solid var(--glassb);background:transparent;color:var(--muted);
font-size:11px;font-weight:800;padding:4px 9px;border-radius:8px;cursor:pointer;white-space:nowrap}
.ct-herd-use{margin-left:4px;border-color:var(--mint-200);color:#047857}
.ct-herd-edit:hover,.ct-herd-use:hover{filter:brightness(.96)}
.ct-herd-have{display:flex;justify-content:space-between;align-items:center;padding:2px 13px;
font-size:13px;font-weight:800;color:var(--muted)}
.ct-herd-have b{color:var(--ink);font-size:15px;font-variant-numeric:tabular-nums}
.ct-alert{display:flex;gap:9px;align-items:center;padding:10px 13px;border-radius:11px;font-size:13px;font-weight:700;margin-bottom:8px}
.ct-alert:last-child{margin-bottom:0}
.ct-alert.ok{background:var(--t1b);color:#0f766e}
.ct-alert.warn{background:var(--t2b);color:#b45309}
.ct-alert.bad{background:var(--dangerb);color:#b91c1c}
.ct-savebar{position:sticky;bottom:12px;z-index:5;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
background:var(--glass);border:1px solid var(--glassb);border-radius:15px;padding:13px 16px;
box-shadow:0 12px 32px -12px rgba(8,120,90,.45);backdrop-filter:blur(12px);margin-bottom:14px}
.ct-savebar .hint{margin:0}
html[data-theme="dark"] .ct-cogs{background:rgba(79,189,157,.08);border-color:rgba(79,189,157,.22)}
/* ===== Liability / accrued items with dated payments ===== */
.ct-liab{border:1px solid var(--glassb);border-radius:14px;padding:12px 13px;margin-bottom:11px;background:rgba(255,255,255,.5)}
html[data-theme="dark"] .ct-liab{background:rgba(255,255,255,.03)}
.ct-liab.kind-accrued{border-left:4px solid #8b5cf6}
.ct-liab.kind-debt{border-left:4px solid var(--danger)}
.ct-liab-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ct-liab-head input,.ct-liab-head select{height:40px;margin:0}
.ct-liab-head .ct-name{flex:2.2;min-width:140px}
.ct-liab-head select{flex:1.2;min-width:120px}
.ct-liab-head .ct-amt{flex:1.1;min-width:110px}
.ct-liab-note{margin-top:7px}
.ct-liab-note input{height:36px;margin:0;font-size:13px}
.ct-liab-bal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:9px}
.ct-prog{flex:1;min-width:120px;height:8px;border-radius:6px;background:var(--mint-100);overflow:hidden}
.ct-prog>i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--mint-400),var(--mint-600));transition:width .25s}
.ct-bal-txt{font-size:12.5px;font-weight:700;color:var(--muted);white-space:nowrap}
.ct-bal-txt b{font-variant-numeric:tabular-nums}
.ct-badge{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap}
.ct-badge.paid{background:rgba(16,185,129,.16);color:#0f766e}
.ct-badge.partial{background:var(--t2b,rgba(245,158,11,.15));color:#b45309}
.ct-badge.unpaid{background:var(--dangerb);color:#b91c1c}
.ct-badge.over{background:rgba(14,165,233,.16);color:#0369a1}
.ct-carry-tag{font-size:10px;font-weight:800;color:#0369a1;background:rgba(14,165,233,.13);padding:2px 7px;border-radius:6px;white-space:nowrap}
.ct-pay-list{margin:9px 0 0;padding:9px 0 0;border-top:1px dashed var(--line)}
.ct-pay-row{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.ct-pay-row input{height:34px;margin:0;font-size:12.5px}
.ct-pay-row .pay-amt{flex:1.1;min-width:92px}
.ct-pay-row .pay-date{flex:1.3;min-width:128px}
.ct-pay-row .pay-time{flex:.8;min-width:84px}
.ct-pay-row .pay-note{flex:1.6;min-width:110px}
.ct-pay-rm{flex:0 0 auto;width:30px;height:30px;border:0;border-radius:8px;cursor:pointer;background:var(--dangerb);color:var(--danger);font-weight:800}
.ct-pay-empty{font-size:11.5px;color:var(--muted);font-style:italic;padding:2px 0 6px}
.ct-liab-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px}
.ct-addpay{font-size:11.5px;font-weight:700;padding:5px 11px;border:1.5px solid var(--line);border-radius:9px;
background:var(--mint-50);color:var(--mint-700);cursor:pointer}
.ct-addpay:hover{background:var(--mint-100)}
/* ===== Debt / accrued mini-dashboard ===== */
.ct-board-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;margin-bottom:13px}
@media(max-width:760px){.ct-board-grid{grid-template-columns:1fr}}
.ct-board-cell{border-radius:15px;padding:14px 15px;border:1px solid var(--glassb);background:var(--glass);position:relative;overflow:hidden}
.ct-board-cell .lab{font-size:11.5px;font-weight:800;color:var(--muted);display:flex;align-items:center;gap:6px}
.ct-board-cell .big{font-size:23px;font-weight:800;margin-top:6px;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.ct-board-cell .sub{font-size:11px;color:var(--muted);font-weight:600;margin-top:3px}
.ct-board-cell.debt .big{color:var(--danger)} .ct-board-cell.accr .big{color:#7c3aed} .ct-board-cell.paid .big{color:var(--mint-600)}
.ct-board-cell .edge{position:absolute;left:0;top:0;bottom:0;width:5px}
.ct-board-cell.debt .edge{background:var(--danger)} .ct-board-cell.accr .edge{background:#8b5cf6} .ct-board-cell.paid .edge{background:var(--mint-500)}
.ct-board-list{display:flex;flex-direction:column;gap:7px}
.ct-board-item{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:11px;background:rgba(255,255,255,.45);border:1px solid var(--line)}
html[data-theme="dark"] .ct-board-item{background:rgba(255,255,255,.03)}
.ct-board-item .nm{flex:1.4;min-width:0;font-weight:700;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ct-board-item .pr{flex:1;min-width:80px}
.ct-board-item .rm{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
/* ===== Carry-forward banner & access manager ===== */
.ct-carry{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:14px;margin-bottom:14px;
background:rgba(14,165,233,.1);border:1px solid rgba(14,165,233,.3);color:#0369a1;font-weight:700;font-size:13.5px}
.ct-carry .ic{font-size:20px}
.ct-access-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ct-access-row:last-of-type{border-bottom:0}
.ct-access-row .who{flex:1.6;min-width:150px}
.ct-access-row .who b{font-weight:800}
.ct-access-row .who small{display:block;color:var(--muted);font-size:11px}
.ct-access-opt{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer}
.ct-access-opt input{width:auto;height:auto;margin:0}
.ct-ro-note{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:13px;font-weight:700;font-size:13px;
background:var(--mint-50);border:1px solid var(--mint-200);color:var(--mint-700);margin-bottom:14px}
/* ===== Confirm modal + loading + spinner ===== */
.cm-overlay{position:fixed;inset:0;z-index:300;display:flex;align-items:center;justify-content:center;padding:20px;
background:rgba(10,30,24,.5);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:.18s}
.cm-overlay.open{opacity:1;pointer-events:auto}
.cm-box{background:var(--glass);backdrop-filter:blur(18px);border:1px solid var(--glassb);border-radius:18px;
box-shadow:0 30px 70px -20px rgba(0,0,0,.5);padding:24px 22px;max-width:360px;width:100%;text-align:center;
transform:translateY(12px) scale(.98);transition:.2s}
.cm-overlay.open .cm-box{transform:none}
.cm-icon{font-size:32px;margin-bottom:8px;line-height:1}
.cm-msg{font-size:15px;font-weight:700;color:var(--ink);line-height:1.55;margin-bottom:18px}
.cm-actions{display:flex;gap:10px;justify-content:center}
.cm-actions .btn{min-width:100px}
.spinner{display:inline-block;width:15px;height:15px;border:2.5px solid rgba(255,255,255,.4);
border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
.spinner-lg{width:32px;height:32px;border-width:3.5px;border-color:rgba(79,189,157,.25);border-top-color:var(--mint-500)}
@keyframes spin{to{transform:rotate(360deg)}}
.app-loading{position:fixed;inset:0;z-index:320;display:flex;align-items:center;justify-content:center;
background:rgba(238,252,248,.62);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:.18s}
.app-loading.show{opacity:1;pointer-events:auto}
.app-loading-box{display:flex;flex-direction:column;align-items:center;gap:13px;background:var(--glass);
border:1px solid var(--glassb);border-radius:18px;padding:24px 32px;box-shadow:var(--shadow)}
.app-loading .al-msg{font-size:13.5px;font-weight:700;color:var(--ink)}
/* ===== Toast ===== */
.toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%) translateY(20px);
background:var(--ink);color:#fff;padding:12px 20px;border-radius:14px;font-size:14px;font-weight:700;
box-shadow:0 14px 40px -10px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.25s;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ===== Flash ===== */
.flash{display:flex;align-items:center;gap:9px;padding:11px 15px;border-radius:13px;font-weight:700;
font-size:13.5px;margin-bottom:12px;border:1px solid}
.flash.success{background:var(--t1b);color:#0f766e;border-color:rgba(16,185,129,.3)}
.flash.error{background:var(--dangerb);color:#b91c1c;border-color:rgba(239,68,68,.3)}
.flash.info{background:var(--t3b);color:#0369a1;border-color:rgba(14,165,233,.3)}
/* ===== Auth (split-screen) ===== */
.auth-body{min-height:100vh}
.auth-shell{min-height:100vh;display:grid;grid-template-columns:1.04fr .96fr}
/* --- Left: brand showcase --- */
.auth-showcase{position:relative;overflow:hidden;color:#fff;display:flex;flex-direction:column;
padding:48px 52px;background:linear-gradient(155deg,#37a287 0%,#2a806b 52%,#16463a 128%)}
.auth-showcase::before{content:"";position:absolute;width:540px;height:540px;border-radius:50%;
top:-190px;right:-170px;background:radial-gradient(circle,rgba(255,255,255,.16),transparent 70%)}
.auth-showcase::after{content:"";position:absolute;width:430px;height:430px;border-radius:50%;
bottom:-150px;left:-130px;background:radial-gradient(circle,rgba(121,204,177,.4),transparent 70%)}
.auth-showcase>*{position:relative;z-index:1}
.auth-brand{display:flex;align-items:center;gap:13px}
.auth-brand-logo{width:50px;height:50px;border-radius:15px;font-size:27px;flex:0 0 auto;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px)}
.auth-brand-name{font-weight:900;font-size:44px;line-height:1.02;letter-spacing:1.5px;
text-shadow:0 2px 18px rgba(0,0,0,.18)}
.auth-brand-name-sub{font-weight:800;font-size:33px;line-height:1.05;letter-spacing:4px;opacity:.9;margin-top:4px}
.auth-brand-tag{font-size:15px;font-weight:600;letter-spacing:.8px;opacity:.74;margin-top:14px}
@media(max-width:1100px){.auth-brand-name{font-size:38px}.auth-brand-name-sub{font-size:27px}}
.auth-hero{margin:auto 0}
.auth-hero h1{font-size:33px;line-height:1.22;font-weight:800;letter-spacing:-.5px;margin:0 0 16px}
.auth-hero p{font-size:14.5px;line-height:1.75;opacity:.9;max-width:392px;margin:0 0 32px}
.auth-features{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:15px}
.auth-features li{display:flex;align-items:center;gap:14px;font-size:14.5px;font-weight:600;opacity:.96}
.auth-features .fic{width:40px;height:40px;border-radius:12px;flex:0 0 auto;font-size:19px;
display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.auth-foot{font-size:12px;opacity:.72;font-weight:500}
/* --- Right: form panel --- */
.auth-form-panel{display:flex;align-items:center;justify-content:center;padding:40px 24px}
.auth-form-wrap{width:100%;max-width:374px;animation:fade .4s ease}
.auth-logo-sm{display:none}
.auth-form-head{margin-bottom:26px}
.auth-form-head h2{font-size:25px;font-weight:800;margin:0 0 6px;letter-spacing:-.4px}
.auth-form-head p{margin:0;color:var(--muted);font-size:13.5px}
.auth-alert{display:flex;align-items:center;gap:9px;background:var(--dangerb);color:#b91c1c;
border:1px solid rgba(239,68,68,.28);border-radius:12px;padding:11px 14px;font-size:13px;font-weight:700;margin-bottom:18px}
.auth-alert svg{flex:0 0 auto}
/* input with leading icon + toggle */
.in-group{margin-bottom:16px}
.in-group label{display:block;font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:7px}
.in-field{position:relative}
.in-field .lead{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);display:flex;pointer-events:none}
.in-field input{height:50px;padding-left:43px;border-radius:13px}
.in-field input.has-toggle{padding-right:46px}
.in-field input:focus~.lead{color:var(--mint-600)}
.in-toggle{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:36px;height:36px;border:0;
background:transparent;cursor:pointer;color:var(--muted);border-radius:9px;display:flex;align-items:center;justify-content:center;transition:.13s}
.in-toggle:hover{background:var(--mint-100);color:var(--mint-700)}
.auth-form .btn-primary{height:50px;font-size:15.5px;margin-top:6px}
/* login ↔ register switch */
.auth-switch{margin-top:20px;text-align:center;font-size:13.5px;color:var(--muted)}
.auth-switch a{color:var(--mint-700);font-weight:800}
.auth-switch a:hover{text-decoration:underline}
/* clickable demo accounts */
.demo-creds{margin-top:24px;border-top:1px solid var(--line);padding-top:18px}
.demo-creds .dc-title{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
color:var(--muted);margin-bottom:11px;display:flex;align-items:center;gap:7px}
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.demo-acc{text-align:left;background:rgba(255,255,255,.7);border:1px solid var(--line);border-radius:11px;
padding:9px 13px;cursor:pointer;transition:.13s;font-family:inherit}
.demo-acc:hover{border-color:var(--mint-300);background:#fff;box-shadow:0 8px 18px -12px rgba(8,120,90,.45);transform:translateY(-1px)}
.demo-acc .r{font-size:11px;color:var(--muted);font-weight:700}
.demo-acc .u{font-size:13.5px;font-weight:800;color:var(--mint-700);margin-top:1px}
@media(max-width:900px){
.auth-shell{grid-template-columns:1fr}
.auth-showcase{display:none}
.auth-form-panel{min-height:100vh;align-items:flex-start;padding-top:7vh}
.auth-logo-sm{display:flex;width:58px;height:58px;border-radius:16px;font-size:31px;margin:0 0 20px;
align-items:center;justify-content:center;color:#fff;background:linear-gradient(135deg,var(--mint-400),var(--mint-600));
box-shadow:0 12px 28px -8px rgba(8,120,90,.6)}
}
@media(max-width:430px){.demo-grid{grid-template-columns:1fr}}
/* ===== Pagination ===== */
.pager{display:flex;gap:6px;justify-content:center;margin-top:14px;flex-wrap:wrap}
.pager a,.pager span{padding:7px 12px;border-radius:10px;font-size:13px;font-weight:700;
background:rgba(255,255,255,.7);border:1px solid var(--line);color:var(--muted)}
.pager .on{background:var(--mint-600);color:#fff;border-color:transparent}
/* ===== Chart containers (compact, uniform) ===== */
.chart-wrap{position:relative;width:100%;height:210px;margin-top:4px}
.chart-wrap.tall{height:240px}
.chart-wrap canvas{position:absolute;inset:0}
.grid3 .chart-wrap{height:200px}
/* ===== Goal tracker ===== */
.goal-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:4px}
@media(max-width:640px){.goal-grid{grid-template-columns:1fr}}
.goal-item .goal-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px}
.goal-item .goal-lab{font-size:13px;font-weight:800;color:var(--ink);display:flex;align-items:center;gap:7px}
.goal-item .goal-now{font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.goal-item .goal-now b{font-size:17px;color:var(--ink)}
.goal-track{height:18px;background:rgba(8,120,90,.1);border-radius:11px;overflow:hidden;border:1px solid var(--line)}
.goal-fill{height:100%;border-radius:11px;width:0;transition:width 1s cubic-bezier(.2,.8,.2,1)}
.goal-fill.f-mint{background:linear-gradient(90deg,#4fbd9d,#2a806b)}
.goal-fill.f-blue{background:linear-gradient(90deg,#38bdf8,#0369a1)}
.goal-foot{display:flex;justify-content:space-between;margin-top:6px;font-size:11.5px;font-weight:700;color:var(--muted)}
.goal-foot .goal-pct{font-weight:800;color:var(--mint-700)}
.goal-set{display:flex;gap:8px;align-items:flex-end;flex-wrap:wrap;margin-top:4px}
.goal-set .field{margin:0;flex:1;min-width:130px}
.goal-set .field label{color:var(--ink)}
/* ===== Bill print modal ===== */
.modal-overlay{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
display:flex;align-items:flex-start;justify-content:center;padding:24px 12px;overflow-y:auto;
opacity:0;pointer-events:none;transition:.2s}
.modal-overlay.open{opacity:1;pointer-events:auto}
.bill-modal-box{background:var(--glass);border:1px solid var(--glassb);border-radius:20px;
box-shadow:0 30px 80px -20px rgba(0,0,0,.5);width:100%;max-width:820px;overflow:hidden}
.bill-controls{display:flex;align-items:center;gap:10px;padding:14px 18px;
border-bottom:1px solid var(--line);flex-wrap:wrap;background:rgba(255,255,255,.04)}
.bill-controls .ctrl-label{font-size:12px;font-weight:700;color:var(--muted);margin-right:2px}
.bill-tab-group{display:flex;border-radius:10px;overflow:hidden;border:1.5px solid var(--line)}
.bill-tab{padding:7px 16px;font-size:13px;font-weight:700;border:0;cursor:pointer;
background:transparent;color:var(--muted);font-family:inherit;transition:.13s}
.bill-tab.active{background:var(--mint-600);color:#fff}
.bill-spacer{flex:1}
.bill-preview{padding:20px;background:rgba(0,0,0,.04)}
/* The paper itself */
.bill-paper{background:#fff;color:#1a1a1a;box-shadow:0 8px 40px -10px rgba(0,0,0,.4);
margin:0 auto;font-family:"Sarabun",sans-serif;font-size:13px;
width:210mm;min-height:180mm;border-radius:4px}
.bill-paper.bill-a5{width:148mm;font-size:12px}
.bill-header{padding:18px 24px 14px;color:#fff;position:relative;overflow:hidden}
.bill-header::after{content:"";position:absolute;right:-40px;top:-40px;width:160px;height:160px;
border-radius:50%;background:rgba(255,255,255,.1)}
.bill-h-receipt{background:linear-gradient(135deg,#2a806b 0%,#1a5c4c 100%)}
.bill-h-delivery{background:linear-gradient(135deg,#0369a1 0%,#075985 100%)}
.bill-header-inner{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.bill-co-block .bill-co-name{font-size:17px;font-weight:800;letter-spacing:.3px;line-height:1.2}
.bill-co-block .bill-co-addr{font-size:11.5px;opacity:.9;margin-top:4px;line-height:1.5}
.bill-co-block .bill-co-phone{font-size:12px;opacity:.9;margin-top:2px;font-weight:600}
.bill-doc-badge{text-align:right;flex:0 0 auto}
.bill-doc-badge .bill-doc-type{font-size:16px;font-weight:800;letter-spacing:.5px;line-height:1}
.bill-doc-badge .bill-doc-no{font-size:12px;opacity:.85;margin-top:4px;font-weight:600}
.bill-meta{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 24px 10px;
border-bottom:1px solid #e5e7eb}
.bill-meta-left,.bill-meta-right{font-size:12.5px;line-height:1.9}
.bill-meta-right{text-align:right}
.bill-meta b{font-weight:700;color:#374151}
.bill-tbl{width:100%;border-collapse:collapse;margin:0;font-size:12.5px}
.bill-tbl th{background:#f9fafb;padding:8px 10px;text-align:right;font-size:11px;
font-weight:800;color:#6b7280;border-bottom:2px solid #e5e7eb;letter-spacing:.3px;text-transform:uppercase}
.bill-tbl th:first-child{text-align:left}
.bill-tbl td{padding:9px 10px;border-bottom:1px solid #f3f4f6;vertical-align:middle}
.bill-tbl td:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.bill-tbl tfoot td{padding:8px 10px;font-weight:700;border-top:2px solid #e5e7eb;background:#f9fafb}
.bill-tbl tfoot tr.total-row td{font-size:14px;font-weight:800}
.bill-tbl-wrap{padding:0 24px}
.bill-words{padding:10px 24px;font-size:12px;color:#4b5563;font-style:italic;
border-bottom:1px solid #f3f4f6}
.bill-sigs{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:20px 24px 18px;margin-top:4px}
.bill-sig{text-align:center;font-size:11.5px;color:#6b7280}
.bill-sig-line{border-top:1px dashed #9ca3af;margin:0 10px 8px}
.bill-sig-name{font-weight:700;color:#374151;font-size:12px;margin-bottom:3px}
/* ===== Theme toggle button ===== */
.theme-toggle{width:40px;height:40px;border:0;border-radius:12px;cursor:pointer;flex:0 0 auto;
background:rgba(255,255,255,.8);box-shadow:inset 0 0 0 1px var(--line);color:var(--mint-700);
display:flex;align-items:center;justify-content:center;transition:.15s}
.theme-toggle:hover{background:var(--mint-100)}
.theme-toggle:active{transform:scale(.95)}
.theme-toggle svg{width:19px;height:19px}
.theme-toggle .sun{display:none}
.auth-theme-toggle{position:fixed;top:18px;right:18px;z-index:8}
/* ============================================================
Dark mode · toggled via html[data-theme="dark"] (see app.js)
Brand mint gradients are kept; surfaces/text/lines flip to dark.
============================================================ */
html[data-theme="dark"]{
color-scheme:dark;
--mint-50:rgba(79,189,157,.07); --mint-100:rgba(79,189,157,.13);
--mint-200:rgba(79,189,157,.20); --mint-300:rgba(121,204,177,.38);
--mint-700:#7ad9bc;
--ink:#e7f3ee; --muted:#8ca99e; --line:rgba(255,255,255,.10);
--glass:rgba(255,255,255,.045); --glassb:rgba(255,255,255,.09);
--shadow:0 12px 34px -14px rgba(0,0,0,.7);
--t1b:rgba(16,185,129,.20); --t2b:rgba(245,158,11,.20);
--t3b:rgba(14,165,233,.20); --t4b:rgba(139,92,246,.20);
--dangerb:rgba(239,68,68,.22);
}
html[data-theme="dark"] body{
color:var(--ink);
background:
radial-gradient(1100px 560px at 100% -10%,rgba(79,189,157,.14),transparent 60%),
radial-gradient(900px 500px at -10% 110%,rgba(14,165,233,.10),transparent 55%),
#0b1512;
}
/* sidebar is always dark — no dark-mode override needed */
html[data-theme="dark"] header{background:rgba(13,23,20,.62)}
html[data-theme="dark"] .burger{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .userchip{background:rgba(255,255,255,.05)}
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .btn-ghost{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .chip{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .item{background:rgba(255,255,255,.045)}
html[data-theme="dark"] .tbl tbody tr:hover{background:rgba(255,255,255,.045)}
html[data-theme="dark"] .bartrack{background:rgba(255,255,255,.09)}
html[data-theme="dark"] .goal-track{background:rgba(255,255,255,.08)}
html[data-theme="dark"] .pager a,
html[data-theme="dark"] .pager span{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .toast{background:#1d2e29;box-shadow:0 14px 40px -10px rgba(0,0,0,.8)}
html[data-theme="dark"] .app-loading{background:rgba(11,21,18,.62)}
html[data-theme="dark"] .btn-dark{background:#243a33;color:#fff}
html[data-theme="dark"] .flash.success{color:#6ee7b7}
html[data-theme="dark"] .flash.error{color:#fca5a5}
html[data-theme="dark"] .flash.info{color:#7dd3fc}
html[data-theme="dark"] .auth-alert{color:#fca5a5}
html[data-theme="dark"] .demo-acc{background:rgba(255,255,255,.05)}
html[data-theme="dark"] .demo-acc:hover{background:rgba(255,255,255,.10)}
html[data-theme="dark"] .b-gray{background:rgba(148,163,184,.2);color:#cbd5e1}
html[data-theme="dark"] .theme-toggle{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .theme-toggle .sun{display:block}
html[data-theme="dark"] .theme-toggle .moon{display:none}
/* ===== Print ===== */
@media print{
html[data-theme="dark"]{--ink:#19392f;--muted:#6e887e;--mint-700:#2a806b;--line:rgba(45,120,98,.13)}
#sidebar,header,.no-print,.modal-overlay .bill-controls{display:none!important}
.modal-overlay{position:static!important;opacity:1!important;pointer-events:auto!important;
background:none!important;padding:0!important;overflow:visible!important;display:block!important}
.bill-modal-box{box-shadow:none!important;border:none!important;background:none!important;
border-radius:0!important;max-width:none!important}
.bill-preview{padding:0!important;background:none!important}
.bill-paper{box-shadow:none!important;margin:0!important;border-radius:0!important;
width:100%!important;min-height:0!important}
.content{margin-left:0!important}
body,html[data-theme="dark"] body{background:#fff;color:#19392f}
.card{box-shadow:none;border:1px solid #ddd}
}
/* ===== Close-total printable A4 report ===== */
.print-only{display:none}
.rpt{color:#111;font-size:11pt;line-height:1.45;font-family:Sarabun,sans-serif}
.rpt-head{text-align:center;border-bottom:2.5px solid #111;padding-bottom:10px;margin-bottom:6px}
.rpt-brand{font-size:17pt;font-weight:800;letter-spacing:.3px}
.rpt-title{font-size:13pt;font-weight:800;margin-top:2px}
.rpt-sub{font-size:10pt;color:#444;margin-top:2px}
.rpt-meta{display:flex;justify-content:space-between;font-size:9pt;color:#555;margin:6px 2px 0}
.rpt-kpis{display:flex;gap:8px;margin:13px 0}
.rpt-kpi{flex:1;border:1px solid #bbb;border-radius:7px;padding:8px 9px;text-align:center}
.rpt-kpi .l{font-size:8pt;color:#555;font-weight:700}
.rpt-kpi .v{font-size:12.5pt;font-weight:800;margin-top:2px;font-variant-numeric:tabular-nums}
.rpt-kpi.neg .v{color:#b91c1c}
.rpt-sec{margin-top:15px;break-inside:avoid}
.rpt-sec>h3{font-size:11pt;font-weight:800;border-left:4px solid #111;padding-left:8px;margin:0 0 7px}
.rpt-tbl{width:100%;border-collapse:collapse;font-size:9.5pt}
.rpt-tbl th,.rpt-tbl td{border:1px solid #cfcfcf;padding:4px 8px;text-align:right;vertical-align:top}
.rpt-tbl th{background:#eee;font-weight:800}
.rpt-tbl th:first-child,.rpt-tbl td:first-child{text-align:left}
.rpt-tbl tr.grp td{background:#f6f6f6;font-weight:700}
.rpt-tbl tr.rpt-pay td{font-size:8.5pt;color:#444;background:#fcfcfc;border-top:0;border-bottom:1px dotted #ddd}
.rpt-tbl tr.rpt-pay td:first-child{padding-left:18px}
.rpt-tbl tr.tot td{font-weight:800;border-top:2px solid #111;background:#f1f1f1}
.rpt-status{font-weight:800;font-size:8.5pt}
.rpt-2col{display:flex;gap:14px;break-inside:avoid}
.rpt-2col>div{flex:1;min-width:0}
.rpt-2col h3{font-size:10.5pt;font-weight:800;margin:0 0 5px}
.rpt-note{font-size:8.5pt;color:#666;margin-top:5px}
.rpt-sign{display:flex;justify-content:space-around;gap:30px;margin-top:34px;break-inside:avoid}
.rpt-sign>div{flex:1;max-width:230px;text-align:center;border-top:1px dotted #888;padding-top:5px;font-size:9pt;color:#555}
@media print{
@page{size:A4 portrait;margin:13mm}
main>*{display:none!important}
main>#ctReport{display:block!important}
.rpt .stmt td{padding:4px 4px;font-size:9.5pt}
}
/* ===================================================================
THEME 3 — Airy Pastel · data-theme="minimal" (white / soft-pastel / airy)
Scoped entirely under html[data-theme="minimal"] — light & dark untouched.
=================================================================== */
/* ============================================================
MINIMAL — "AIRY PASTEL" theme (scope: html[data-theme="minimal"])
White page · soft SOLID pastel tiles · no hard borders ·
big radius · roomy padding · diffuse shadow · dark ink text.
Light & dark themes are untouched (every selector is scoped).
============================================================ */
/* ---- 1) Tokens: recast the design system for a pale, airy look ---- */
html[data-theme="minimal"]{
color-scheme:light;
--ink:#33413b; /* dark ink text on pale tints (AA) */
--muted:#566b62; /* soft secondary text */
--line:rgba(51,65,59,.07); /* ultra-faint hairline */
--glass:#ffffff; /* generic surfaces go solid white */
--glassb:rgba(51,65,59,.05); /* almost-invisible border */
--shadow:0 16px 36px -20px rgba(60,80,72,.22),0 4px 12px -8px rgba(60,80,72,.10);
--r:20px; /* big, friendly radius */
--mint-100:#d5efe1; /* pale-pill bg used by .pill / badges */
--mint-700:#2a806b; /* accent text stays readable on white */
}
/* ---- 2) Page background: near-white, lots of light ---- */
html[data-theme="minimal"] body{
color:var(--ink);
background:
radial-gradient(1200px 600px at 100% -8%,rgba(140,190,255,.08),transparent 60%),
radial-gradient(1000px 560px at -8% 108%,rgba(160,140,220,.07),transparent 55%),
#fbfcfc;
}
/* ---- 3) Generic .card: roomy pastel tile, borderless, soft shadow ---- */
html[data-theme="minimal"] .card{
background:#d9e7fc; /* default = pale sky */
border:1px solid transparent;
border-radius:22px;
box-shadow:var(--shadow);
backdrop-filter:none;
padding:24px 24px;
margin-bottom:18px;
}
html[data-theme="minimal"] .card h2{ font-size:15.5px; margin:0 0 15px; color:var(--ink); }
html[data-theme="minimal"] .card h2 .pill{
background:rgba(255,255,255,.7); color:var(--mint-700);
}
/* Best-effort rotation for standalone cards (grids & known frames
are pinned below and win by specificity) */
html[data-theme="minimal"] .card:nth-of-type(5n+2){ background:#ffe9d6; } /* peach */
html[data-theme="minimal"] .card:nth-of-type(5n+3){ background:#fdd7e0; } /* rose */
html[data-theme="minimal"] .card:nth-of-type(5n+4){ background:#d5efe1; } /* mint */
html[data-theme="minimal"] .card:nth-of-type(5n+5){ background:#e6dcf7; } /* lilac */
/* Generic KPI tiles (var-driven) → white so numbers read clean */
html[data-theme="minimal"] .kpi{
background:#ffffff; border:1px solid transparent; border-radius:18px;
box-shadow:var(--shadow); padding:16px 16px;
}
html[data-theme="minimal"] .kpi .val{ color:var(--ink); }
/* ---- 4) HERO KPIs: soften saturated gradients → pale pastel tiles ---- */
html[data-theme="minimal"] .hero-lg .hcard,
html[data-theme="minimal"] .hcard{
color:var(--ink);
box-shadow:var(--shadow);
border:1px solid transparent;
}
/* pale glossy blob instead of the white-on-color circle */
html[data-theme="minimal"] .hcard::after{ background:rgba(255,255,255,.55); }
/* pale tile per variant (beats inline/dashboard gradient rules) */
html[data-theme="minimal"] .hcard.g-mint { background:#d5efe1 !important; }
html[data-theme="minimal"] .hcard.g-blue { background:#d9e7fc !important; }
html[data-theme="minimal"] .hcard.g-violet{ background:#e6dcf7 !important; }
html[data-theme="minimal"] .hcard.g-rose { background:#fdd7e0 !important; }
html[data-theme="minimal"] .hcard.g-today { background:#cceee5 !important; }
html[data-theme="minimal"] .hcard.g-amber { background:#ffe9d6 !important; }
html[data-theme="minimal"] .hcard.g-slate { background:#dde3ea !important; }
/* hero inner text → dark ink; label/sub muted; value strong */
html[data-theme="minimal"] .hcard .hlab{ color:#5b6b63; opacity:1; }
html[data-theme="minimal"] .hcard .hval{ color:#2b3a33; }
html[data-theme="minimal"] .hcard .hsub{ color:#566b62; opacity:1; }
/* small colored icon per hero tile */
html[data-theme="minimal"] .hcard .hic{ font-size:24px; }
html[data-theme="minimal"] .hcard.g-mint .hic{ color:#2f9d78; }
html[data-theme="minimal"] .hcard.g-blue .hic{ color:#3b82c4; }
html[data-theme="minimal"] .hcard.g-violet .hic{ color:#8468c4; }
html[data-theme="minimal"] .hcard.g-rose .hic{ color:#cf6a86; }
html[data-theme="minimal"] .hcard.g-today .hic{ color:#1f9c8a; }
/* ---- 5) Filter bar: clean white, pale-tint active chip ---- */
html[data-theme="minimal"] .dfilter{
background:#ffffff; border:1px solid transparent; border-radius:18px;
padding:13px 17px; box-shadow:var(--shadow);
}
html[data-theme="minimal"] .dfilter a.chip{
background:#f4f7f5; border:1.5px solid transparent; color:#6b7a72;
}
html[data-theme="minimal"] .dfilter a.chip:hover{ border-color:transparent; background:#eef2f0; color:#2b3a33; }
html[data-theme="minimal"] .dfilter a.chip.on{
background:#d5efe1; color:#2a806b; border-color:transparent;
box-shadow:inset 0 0 0 1.5px rgba(79,189,157,.35);
}
html[data-theme="minimal"] .dfilter select{
background:#ffffff; border:1.5px solid rgba(51,65,59,.12); border-radius:12px;
}
/* ---- 6) Two headline cards (AR / feed) ---- */
html[data-theme="minimal"] .dcards>.card:nth-child(1){ background:#fdd7e0; } /* AR → rose */
html[data-theme="minimal"] .dcards>.card:nth-child(2){ background:#d9e7fc; } /* feed → sky */
html[data-theme="minimal"] .dc-mrow{
background:rgba(255,255,255,.7); border:1px solid transparent; border-radius:12px;
padding:11px 13px;
}
html[data-theme="minimal"] .dc-mrow .k{ font-size:11px; }
html[data-theme="minimal"] .dc-ic.blue{ background:rgba(59,130,196,.14); color:#3b82c4; }
/* ---- 7) Round-summary box (#roundbox + .rbx-*) → mint frame ---- */
html[data-theme="minimal"] #roundbox{ background:#d5efe1; }
/* soften the two gradient KPI tiles into pale tiles w/ dark ink */
html[data-theme="minimal"] .rbx-kpi{ color:var(--ink); box-shadow:none; border:1px solid transparent; }
html[data-theme="minimal"] .rbx-kpi.mint{ background:#ffffff !important; }
html[data-theme="minimal"] .rbx-kpi.blue{ background:#ffffff !important; }
html[data-theme="minimal"] .rbx-kpi .k{ color:#5b6b63; opacity:1; }
html[data-theme="minimal"] .rbx-kpi .v{ color:#2b3a33; }
html[data-theme="minimal"] .rbx-kpi .s{ color:#566b62; opacity:1; }
html[data-theme="minimal"] .rbx-kpi.mint .v{ color:#2a806b; }
html[data-theme="minimal"] .rbx-kpi.blue .v{ color:#3b82c4; }
html[data-theme="minimal"] .rbx-sel select{ background:#ffffff; border:1.5px solid rgba(51,65,59,.12); }
html[data-theme="minimal"] .rbx-sec-h{ border-bottom-color:rgba(51,65,59,.10); }
html[data-theme="minimal"] .rbx-badge{ background:rgba(255,255,255,.7); }
html[data-theme="minimal"] .rrow .track{ background:rgba(51,65,59,.07); }
html[data-theme="minimal"] .rbx-net{
background:rgba(255,255,255,.6); border:1.5px solid rgba(79,189,157,.28); border-radius:16px;
}
html[data-theme="minimal"] .rbx-netdiv{ background:rgba(51,65,59,.10); }
html[data-theme="minimal"] .st.open{ background:#d5efe1; color:#2a806b; }
/* ---- 8) Goal tracker card → lavender frame ---- */
html[data-theme="minimal"] .card.goal-card,
html[data-theme="minimal"] #goalbox{ background:#e6dcf7; }
html[data-theme="minimal"] .goal-track{
background:rgba(51,65,59,.06); border:1px solid transparent;
}
html[data-theme="minimal"] .goal-lab{ color:var(--ink); }
/* ---- 9) Chart cards: rotate pastel tints inside the grids ---- */
html[data-theme="minimal"] .grid2>.card:nth-child(4n+1){ background:#ffe9d6; } /* peach */
html[data-theme="minimal"] .grid2>.card:nth-child(4n+2){ background:#d9e7fc; } /* sky */
html[data-theme="minimal"] .grid2>.card:nth-child(4n+3){ background:#e6dcf7; } /* lilac */
html[data-theme="minimal"] .grid2>.card:nth-child(4n+4){ background:#fdd7e0; } /* rose */
html[data-theme="minimal"] .grid3>.card:nth-child(3n+1){ background:#d5efe1; } /* mint */
html[data-theme="minimal"] .grid3>.card:nth-child(3n+2){ background:#ffe9d6; } /* peach */
html[data-theme="minimal"] .grid3>.card:nth-child(3n+3){ background:#d9e7fc; } /* sky */
/* ---- 10) Table card + table: loosen & lighten ---- */
html[data-theme="minimal"] .tbl{ font-size:14px; }
html[data-theme="minimal"] .tbl th{
color:var(--muted); font-size:11px; padding:12px 10px; border-bottom:2px solid rgba(51,65,59,.10);
}
html[data-theme="minimal"] .tbl td{
padding:13px 10px; border-bottom:1px solid rgba(51,65,59,.07); color:var(--ink);
}
html[data-theme="minimal"] .tbl tbody tr:hover{ background:rgba(51,65,59,.03); }
html[data-theme="minimal"] .tbl tfoot td,
html[data-theme="minimal"] .tbl tr:last-child td{ border-color:rgba(51,65,59,.12); }
/* generic list rows / items on pale cards → soft white inset */
html[data-theme="minimal"] .item{ background:rgba(255,255,255,.7); border-color:transparent; }
html[data-theme="minimal"] .bartrack{ background:rgba(51,65,59,.07); }
/* ---- 11) Form controls: crisp on pale tiles ---- */
html[data-theme="minimal"] input,
html[data-theme="minimal"] select,
html[data-theme="minimal"] textarea{
background:#ffffff; border:1.5px solid rgba(51,65,59,.12);
}
html[data-theme="minimal"] input:focus,
html[data-theme="minimal"] select:focus,
html[data-theme="minimal"] textarea:focus{
border-color:var(--mint-400); box-shadow:0 0 0 4px rgba(79,189,157,.15);
}
/* ---- 12) Topbar: clean white, faint edges ---- */
html[data-theme="minimal"] header{
background:rgba(255,255,255,.82); border-bottom:1px solid var(--line);
}
html[data-theme="minimal"] .burger{ background:#f4f7f5; box-shadow:inset 0 0 0 1px var(--line); }
html[data-theme="minimal"] .userchip{ background:#ffffff; border:1px solid var(--line); }
/* ============================================================
13) SIDEBAR → WHITE (icons follow link color via currentColor)
============================================================ */
html[data-theme="minimal"] #sidebar{
background:
radial-gradient(140% 34% at 50% 100%, rgba(139,111,201,.10), transparent 62%),
radial-gradient(120% 30% at 0% 100%, rgba(79,189,157,.13), transparent 58%),
#ffffff;
border-right:1px solid rgba(51,65,59,.07);
box-shadow:10px 0 44px -26px rgba(60,80,72,.20);
}
html[data-theme="minimal"] .sb-head{ border-bottom:1px solid rgba(51,65,59,.08); }
html[data-theme="minimal"] .sb-head .nm{ color:var(--ink); }
html[data-theme="minimal"] .sb-head .sub{ color:#8a988f; }
html[data-theme="minimal"] .nav-group{ color:#9aa8a1; }
/* nav links: dark idle text (and thus dark icons) */
html[data-theme="minimal"] #sidebar nav a{ color:#5c6b63; }
html[data-theme="minimal"] #sidebar nav a:hover{ background:#f2f6f4; color:#2b3a33; }
html[data-theme="minimal"] #sidebar nav a.active{
color:#2a806b;
background:#d5efe1;
box-shadow:inset 0 0 0 1px rgba(79,189,157,.35);
}
html[data-theme="minimal"] #sidebar nav a.active .badge{ background:var(--danger); color:#fff; }
/* footer + logout on white */
html[data-theme="minimal"] .sb-foot{ color:#8a988f; border-top:1px solid rgba(51,65,59,.08); }
html[data-theme="minimal"] .sb-logout{ background:rgba(239,68,68,.09); color:#dc2626; }
html[data-theme="minimal"] .sb-logout:hover{ background:rgba(239,68,68,.16); }
/* ---- 14) Misc polish ---- */
html[data-theme="minimal"] .btn-ghost{ background:#ffffff; border:1.5px solid rgba(51,65,59,.12); }
html[data-theme="minimal"] .chip{ background:#f4f7f5; border:1.5px solid transparent; color:#6b7a72; }
html[data-theme="minimal"] .pager a,
html[data-theme="minimal"] .pager span{ background:#ffffff; border:1px solid var(--line); }
html[data-theme="minimal"] .toast{ background:#ffffff; box-shadow:0 18px 44px -16px rgba(60,80,72,.30); color:var(--ink); }
/* === critic fixes (applied) === */
html[data-theme="minimal"]{--muted:#5b6b63}
html[data-theme="minimal"] .card:has(.goal-grid){background:#e6dcf7}
/* ---- 15) Hero: 4 UPRIGHT (portrait) cards in a row, taller/enlarged ---- */
html[data-theme="minimal"] .hero-lg{ grid-template-columns:repeat(4,1fr); gap:16px; }
html[data-theme="minimal"] .hero-lg .hcard{
flex-direction:column; align-items:stretch; justify-content:space-between;
min-height:214px; padding:24px 22px; border-radius:24px; gap:14px;
}
html[data-theme="minimal"] .hero-lg .hcard .hic{ font-size:34px; }
@media(max-width:900px){ html[data-theme="minimal"] .hero-lg{ grid-template-columns:1fr 1fr; } }
/* ---- 16) ยกตัวเลขในกรอบสีให้เด่น (แบบ 4: highlight ขาว + เงาอ่อน) ---- */
html[data-theme="minimal"] .hcard .hval{ color:#10201a; }
html[data-theme="minimal"] .hcard .hval,
html[data-theme="minimal"] .dc-big,
html[data-theme="minimal"] .mrx-total,
html[data-theme="minimal"] .rbx-net b,
html[data-theme="minimal"] .rbx-kpi .v,
html[data-theme="minimal"] .goal-now b{
text-shadow:0 1px 0 rgba(255,255,255,.72), 0 3px 8px rgba(10,30,22,.14);
}
/* white-circle theme switch button — active state (all themes) */
.theme-minimal.on{background:var(--mint-100);box-shadow:inset 0 0 0 1.6px var(--mint-600);color:var(--mint-700)}
html[data-theme="dark"] .theme-minimal.on{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.6px var(--mint-400)}
/* ===== Top-bar notification bell — Cash Flow expense reminders ===== */
.notif{position:relative;flex:0 0 auto}
.notif-btn{width:40px;height:40px;border:0;border-radius:12px;cursor:pointer;position:relative;
display:flex;align-items:center;justify-content:center;background:var(--mint-100);color:var(--ink);transition:.15s}
.notif-btn:hover{background:var(--mint-200)}
.notif-btn:active{transform:scale(.95)}
.notif-btn svg{width:20px;height:20px}
.notif.open .notif-btn{background:var(--mint-300)}
.notif-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;
font-size:11px;font-weight:800;color:#fff;display:flex;align-items:center;justify-content:center;line-height:1;
box-shadow:0 0 0 2px var(--mint-100)}
.notif-badge.urgent{background:var(--danger)}
.notif-badge.soon{background:var(--warn)}
html[data-theme="dark"] .notif-badge{box-shadow:0 0 0 2px #16211d}
.notif-panel{position:absolute;top:calc(100% + 10px);right:0;width:344px;max-width:88vw;z-index:60;
background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
box-shadow:0 20px 46px -18px rgba(8,40,30,.42),0 6px 16px -10px rgba(8,40,30,.26);animation:notifIn .16s ease}
@keyframes notifIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 16px;
font-weight:800;font-size:14px;color:var(--ink);
background:linear-gradient(90deg,var(--mint-100),transparent);border-bottom:1px solid var(--line)}
.notif-clear{border:0;background:none;color:var(--mint-700);font-weight:800;font-size:12px;cursor:pointer;padding:2px 4px}
.notif-clear:hover{text-decoration:underline}
.notif-body{max-height:min(56vh,440px);overflow-y:auto}
.notif-empty{padding:28px 16px;text-align:center;color:var(--muted);font-weight:600;font-size:13px;
display:flex;flex-direction:column;align-items:center;gap:7px}
.notif-empty span{font-size:24px;color:var(--ok)}
.notif-item{display:flex;align-items:center;gap:11px;padding:11px 14px;border-bottom:1px solid var(--line);
text-decoration:none;color:var(--ink);transition:background .12s;border-left:3px solid transparent}
.notif-item:last-child{border-bottom:0}
.notif-item:hover{background:var(--mint-50)}
.notif-item.k-overdue{border-left-color:var(--danger)}
.notif-item.k-today{border-left-color:var(--warn)}
.notif-item.k-upcoming{border-left-color:var(--mint-400)}
.ni-dot{width:11px;height:11px;border-radius:50%;flex:0 0 11px}
.ni-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ni-t1{font-size:13px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ni-t2{font-size:11px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.ni-tag{font-weight:800;padding:1px 6px;border-radius:5px;font-size:10px;white-space:nowrap}
.k-overdue .ni-tag{background:var(--dangerb);color:var(--danger)}
.k-today .ni-tag{background:var(--t2b);color:var(--warn)}
.k-upcoming .ni-tag{background:var(--mint-100);color:var(--mint-700)}
.ni-amt{font-weight:800;font-size:13px;color:var(--danger);white-space:nowrap;font-variant-numeric:tabular-nums}
.notif-foot{display:block;padding:11px 16px;text-align:center;font-size:12.5px;font-weight:800;
color:var(--mint-700);text-decoration:none;background:var(--mint-50)}
.notif-foot:hover{background:var(--mint-100)}
html[data-theme="dark"] .notif-btn{background:rgba(255,255,255,.07)}
html[data-theme="dark"] .notif-btn:hover{background:rgba(255,255,255,.12)}
html[data-theme="dark"] .notif-panel{background:#16211d;border-color:var(--line)}
html[data-theme="dark"] .notif-head{background:linear-gradient(90deg,rgba(255,255,255,.05),transparent)}
html[data-theme="dark"] .notif-item:hover{background:rgba(255,255,255,.04)}
html[data-theme="dark"] .notif-foot{background:rgba(255,255,255,.03)}
html[data-theme="dark"] .k-upcoming .ni-tag,html[data-theme="dark"] .notif-foot{color:var(--mint-400)}
html[data-theme="minimal"] .notif-btn{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
html[data-theme="minimal"] .notif-panel{background:#fff}
@media(max-width:680px){.notif-panel{position:fixed;top:62px;right:8px;left:8px;width:auto;max-width:none}}
/* ============================================================
THEME 4 — "FIN" · data-theme="fin"
Clean fintech skin for the private finance menus
(แผนเงินสด · ปิดสิ้นเดือน · แดชบอร์ดรายปี).
White cards on light-gray, green #16a34a accent, dark ink,
WHITE sidebar with a DARK active pill, white topbar.
Forced server-side in layout.php ($FIN list) — never persisted
to localStorage, so ERP pages are untouched. Flipping the whole
project later = make 'fin' the default there.
============================================================ */
html[data-theme="fin"]{
color-scheme:light;
--ink:#101828; --muted:#667085;
--line:#eaecf0; --glass:#ffffff; --glassb:#eaecf0;
--shadow:0 1px 2px rgba(16,24,40,.04);
--r:16px;
--mint-50:#f6fef9; --mint-100:#e7f6ec; --mint-200:#d7eede; --mint-300:#a6e7bd;
--mint-400:#22c55e; --mint-500:#16a34a; --mint-600:#16a34a; --mint-700:#12873e;
--danger:#e5484d; --dangerb:#fdeaea;
--warn:#f79009; --ok:#16a34a; --info:#3b82f6;
--t1:#16a34a; --t1b:#e7f6ec;
--t2:#f79009; --t2b:#fef3d9;
--t3:#3b82f6; --t3b:#eaf1fe;
--t4:#7c3aed; --t4b:#f0eafd;
}
html[data-theme="fin"] body{
background:#f5f6f7; color:var(--ink);
font-family:'Inter','Sarabun',-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
font-size:14px;
}
html[data-theme="fin"] main{max-width:1320px;padding:22px 24px 70px}
html[data-theme="fin"] .muted{color:var(--muted)}
/* ---- จอกว้าง: ดึงขอบว่างซ้าย-ขวากลับมาใช้ ----
เริ่มที่ 1500px ซึ่งกว้างกว่าไอแพดทุกรุ่นแม้แนวนอน (12.9" = 1366px) มือถือและ
แท็บเล็ตจึงไม่ขยับสักพิกเซล เปลี่ยนเฉพาะจอคอมพิวเตอร์จริง ๆ เท่านั้น */
@media (min-width:1500px){
main{max-width:1600px}
html[data-theme="fin"] main{max-width:1600px}
}
@media (min-width:1800px){
main{max-width:1780px}
html[data-theme="fin"] main{max-width:1780px}
}
/* ---- Sidebar: white, hairline border, DARK active pill ---- */
html[data-theme="fin"] .sb-backdrop{background:rgba(16,24,40,.35)}
html[data-theme="fin"] #sidebar{
background:#ffffff;
border-right:1px solid var(--line);
box-shadow:4px 0 24px -20px rgba(16,24,40,.16);
padding:16px 14px}
html[data-theme="fin"] #sidebar .sb-head-logo{border-bottom:1px solid var(--line)}
html[data-theme="fin"] #sidebar .sb-brand{filter:drop-shadow(0 2px 6px rgba(16,24,40,.14))}
html[data-theme="fin"] .sb-head{border-bottom-color:var(--line)}
html[data-theme="fin"] .sb-head .nm{color:var(--ink)}
html[data-theme="fin"] .sb-head .sub{color:#98a2b3}
html[data-theme="fin"] .nav-group{
color:#98a2b3;font-size:10.5px;letter-spacing:.5px;margin:14px 10px 6px}
html[data-theme="fin"] #sidebar nav a{
color:#344054;font-size:13.5px;font-weight:600;padding:9px 11px;border-radius:10px}
html[data-theme="fin"] #sidebar nav a:hover{background:#f2f4f7;color:var(--ink)}
html[data-theme="fin"] #sidebar nav a.active{
background:#101828;color:#fff;box-shadow:none}
html[data-theme="fin"] #sidebar nav a .badge{
background:#f2f4f7;color:var(--muted);font-weight:700}
html[data-theme="fin"] #sidebar nav a.active .badge{background:rgba(255,255,255,.22);color:rgba(255,255,255,.8)}
html[data-theme="fin"] .sb-foot{color:#98a2b3;border-top-color:var(--line)}
html[data-theme="fin"] .sb-logout{
background:#fdeaea;color:#b42318;border-radius:10px;font-size:12.5px}
html[data-theme="fin"] .sb-logout:hover{background:#fbd5d5}
html[data-theme="fin"] .sb-mgmt-lock{background:var(--mint-100);color:var(--mint-700)}
html[data-theme="fin"] .sb-mgmt-lock:hover{background:var(--mint-200)}
/* ---- Topbar: solid white, no blur ---- */
html[data-theme="fin"] header{
background:#ffffff;backdrop-filter:none;border-bottom:1px solid var(--line);padding:11px 24px}
html[data-theme="fin"] .burger{background:#fff;box-shadow:inset 0 0 0 1px var(--line);border-radius:10px}
html[data-theme="fin"] .burger span{background:#344054}
html[data-theme="fin"] .page-title{font-size:17px;letter-spacing:-.3px}
html[data-theme="fin"] .clock .d{color:var(--muted)}
html[data-theme="fin"] .userchip{background:#fff;border:1px solid var(--line);border-radius:10px}
html[data-theme="fin"] .userchip .ur{color:var(--muted)}
html[data-theme="fin"] .avatar{
background:linear-gradient(135deg,#a7f3d0,#34d399);color:#065f46;border-radius:50%}
html[data-theme="fin"] .theme-toggle{background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:#344054}
html[data-theme="fin"] .theme-toggle:hover{background:#f2f4f7}
/* ---- Cards / KPI ---- */
html[data-theme="fin"] .card{
background:#fff;border:1px solid var(--line);border-radius:var(--r);
box-shadow:var(--shadow);backdrop-filter:none;padding:16px 18px;margin-bottom:16px}
html[data-theme="fin"] .card h2{font-size:15px;letter-spacing:-.1px;margin-bottom:12px}
html[data-theme="fin"] .card h2 .pill{background:var(--mint-100);color:var(--mint-700);font-weight:600}
html[data-theme="fin"] .section-title{color:var(--muted);letter-spacing:.3px}
html[data-theme="fin"] .kpi{
background:#fff;border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow)}
html[data-theme="fin"] .kpi .lab{color:var(--muted);font-weight:600}
html[data-theme="fin"] .item{background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
/* ---- Tables ---- */
html[data-theme="fin"] .tbl th{
background:#fbfcfd;color:var(--muted);font-weight:600;text-transform:none;letter-spacing:0;
border-bottom:1px solid var(--line);padding:9px 10px}
html[data-theme="fin"] .tbl td{border-bottom-color:#f2f4f7;padding:10px}
html[data-theme="fin"] .tbl tbody tr:hover{background:#fcfdfd}
html[data-theme="fin"] .tbl tfoot td{border-top:1px solid var(--line)}
html[data-theme="fin"] .stmt td{border-bottom-color:#f2f4f7}
html[data-theme="fin"] .stmt tr.head td{color:var(--mint-700);border-bottom-color:var(--line)}
html[data-theme="fin"] .stmt tr.net td{border-top-color:var(--ink)}
/* ---- Buttons / chips / forms ---- */
html[data-theme="fin"] .btn{border-radius:10px;font-size:13.5px;padding:10px 16px}
html[data-theme="fin"] .btn-primary{background:#16a34a;box-shadow:none}
html[data-theme="fin"] .btn-primary:hover{background:#12873e}
html[data-theme="fin"] .btn-ghost{background:#fff;color:#344054;border:1px solid var(--line)}
html[data-theme="fin"] .btn-sm{border-radius:9px;padding:7px 12px}
html[data-theme="fin"] .btn-danger{background:var(--dangerb);color:#b42318}
html[data-theme="fin"] .chip{
background:#f2f4f7;border:1px solid transparent;color:var(--muted);border-radius:10px;font-weight:600}
html[data-theme="fin"] .chip:hover{background:#eaecf0;color:var(--ink)}
html[data-theme="fin"] .chip.active{background:#16a34a;color:#fff;border-color:transparent}
html[data-theme="fin"] input,html[data-theme="fin"] select,html[data-theme="fin"] textarea{
background:#fff;border:1px solid #d0d5dd;border-radius:10px;font-size:14px}
/* NOTE: the `background:#fff` shorthand above resets background-repeat to its
initial value (repeat) and the position to 0 0. Without restating both, the
12x8 chevron tiles across the whole control and reads as a zig-zag texture
with the label unreadable on top of it. Always restate them here. */
html[data-theme="fin"] select{
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;background-position:right 13px center;padding-right:34px}
html[data-theme="fin"] input:focus,html[data-theme="fin"] select:focus,html[data-theme="fin"] textarea:focus{
border-color:#16a34a;box-shadow:0 0 0 4px rgba(22,163,74,.12)}
html[data-theme="fin"] .field label{color:var(--muted);font-weight:600}
html[data-theme="fin"] .divider{background:var(--line)}
/* ---- Flash / toast ---- */
html[data-theme="fin"] .flash{border-radius:12px}
html[data-theme="fin"] .flash.success{background:var(--t1b);color:#12873e;border-color:#c4ead2}
html[data-theme="fin"] .flash.error{background:var(--dangerb);color:#b42318;border-color:#fbd5d5}
html[data-theme="fin"] .flash.info{background:var(--t3b);color:#1e5bbf;border-color:#d6e4fd}
html[data-theme="fin"] .toast{background:#101828;border-radius:12px;box-shadow:0 12px 32px -10px rgba(16,24,40,.45)}
/* ---- Notification bell ---- */
html[data-theme="fin"] .notif-btn{background:#f2f4f7;color:#344054;border-radius:10px}
html[data-theme="fin"] .notif-btn:hover{background:#eaecf0}
html[data-theme="fin"] .notif.open .notif-btn{background:#eaecf0}
html[data-theme="fin"] .notif-badge{box-shadow:0 0 0 2px #fff}
html[data-theme="fin"] .notif-panel{background:#fff;border-color:var(--line);border-radius:14px;
box-shadow:0 16px 40px -16px rgba(16,24,40,.24)}
html[data-theme="fin"] .notif-head{background:#fbfcfd;border-bottom-color:var(--line)}
html[data-theme="fin"] .notif-item{border-bottom-color:#f2f4f7}
html[data-theme="fin"] .notif-item:hover{background:#fbfcfd}
html[data-theme="fin"] .notif-foot{background:#fbfcfd;color:var(--mint-700)}
html[data-theme="fin"] .notif-foot:hover{background:#f2f4f7}
/* ---- fin · ปิดสิ้นเดือน (close-total): only the hard-coded colours need help,
everything var()-driven already followed the token block above ---- */
html[data-theme="fin"] .ct-hero{box-shadow:0 1px 2px rgba(16,24,40,.06);border-radius:16px}
html[data-theme="fin"] .ct-hero.pos{background:linear-gradient(150deg,#1aa64b 0%,#0f7a37 100%)}
html[data-theme="fin"] .ct-hero.neg{background:linear-gradient(150deg,#e5484d 0%,#b42318 100%)}
html[data-theme="fin"] .ct-panel,
html[data-theme="fin"] .ct-savebar,
html[data-theme="fin"] .ct-board-cell{backdrop-filter:none;border-radius:14px}
html[data-theme="fin"] .ct-savebar{box-shadow:0 8px 24px -14px rgba(16,24,40,.3)}
html[data-theme="fin"] .ct-alert.ok{color:#12873e}
html[data-theme="fin"] .ct-alert.warn{color:#b54708}
html[data-theme="fin"] .ct-alert.bad{color:#b42318}
html[data-theme="fin"] .ct-badge.paid{background:var(--t1b);color:#12873e}
html[data-theme="fin"] .ct-badge.partial{background:var(--t2b);color:#b54708}
html[data-theme="fin"] .ct-badge.unpaid{background:var(--dangerb);color:#b42318}
html[data-theme="fin"] .ct-badge.over{background:var(--t3b);color:#1e5bbf}
html[data-theme="fin"] .ct-carry-tag{background:var(--t3b);color:#1e5bbf}
html[data-theme="fin"] .ct-carry{background:var(--t3b);border-color:#d6e4fd;color:#1e5bbf}
html[data-theme="fin"] .ct-liab{background:#fff;border-radius:12px}
html[data-theme="fin"] .ct-liab.kind-accrued{border-left-color:#7c3aed}
html[data-theme="fin"] .ct-board-item{background:#fff;border-radius:10px}
html[data-theme="fin"] .ct-prog{background:#eaecf0}
html[data-theme="fin"] .ct-prog>i{background:#16a34a}
html[data-theme="fin"] .ct-addpay{background:var(--mint-100);border:1px solid transparent;color:var(--mint-700)}
html[data-theme="fin"] .ct-addpay:hover{background:var(--mint-200)}
html[data-theme="fin"] .cm-overlay{background:rgba(16,24,40,.45);backdrop-filter:blur(3px)}
/* ---- fin · แผนเงินสด (cash-flow): remap #cfapp's private tokens, then fix
the handful of hard-coded gradients the tokens can't reach ---- */
html[data-theme="fin"] #cfapp{
--income-primary:#16a34a; --income-secondary:#34d399; --income-tertiary:#12873e; --income-light:#e7f6ec;
--expense-primary:#e5484d; --expense-secondary:#f97066; --expense-tertiary:#f79009; --expense-pink:#e5484d; --expense-light:#fdeaea;
--bg:#f5f6f7; --card:#ffffff; --border:#eaecf0; --text:#101828; --muted:#667085;
--gold:#b54708; --timeline-line:#eaecf0;
font-family:'Inter','Sarabun',sans-serif;
background:transparent;border-radius:0;overflow:visible}
html[data-theme="fin"] #cfapp .main{max-width:none;padding:0}
html[data-theme="fin"] #cfapp .month-card,
html[data-theme="fin"] #cfapp .entry-form,
html[data-theme="fin"] #cfapp .timeline-wrapper{
border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
/* summary cards: flat white tiles with a coloured number (was 7 gradients) */
html[data-theme="fin"] #cfapp .sum-card,
html[data-theme="fin"] #cfapp .sum-card.income,
html[data-theme="fin"] #cfapp .sum-card.expense,
html[data-theme="fin"] #cfapp .sum-card.balance-pos,
html[data-theme="fin"] #cfapp .sum-card.balance-neg,
html[data-theme="fin"] #cfapp .sum-card.paid,
html[data-theme="fin"] #cfapp .sum-card.recv,
html[data-theme="fin"] #cfapp .sum-card.owe{
background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
html[data-theme="fin"] #cfapp .sum-card::after{display:none}
html[data-theme="fin"] #cfapp .sum-card .sum-label{color:var(--muted)}
html[data-theme="fin"] #cfapp .sum-card .sum-count{color:#98a2b3}
html[data-theme="fin"] #cfapp .sum-card .sum-value{color:var(--text);font-size:clamp(24px,2.4vw,30px)}
html[data-theme="fin"] #cfapp .sum-card.income .sum-value{color:#16a34a}
html[data-theme="fin"] #cfapp .sum-card.recv .sum-value{color:#12873e}
html[data-theme="fin"] #cfapp .sum-card.expense .sum-value{color:#e5484d}
html[data-theme="fin"] #cfapp .sum-card.owe .sum-value{color:#e5484d}
html[data-theme="fin"] #cfapp .sum-card.paid .sum-value{color:#b54708}
html[data-theme="fin"] #cfapp .sum-card.balance-pos .sum-value{color:#12873e}
html[data-theme="fin"] #cfapp .sum-card.balance-neg .sum-value{color:#7c3aed}
/* ---- แถวบน 3 ใบ = ตัวเลขที่เจ้าของดูทุกวัน (รับจริง · จ่ายแล้ว · ค้างจ่าย)
เติมสีเต็มใบให้เห็นแต่ไกล · แถวล่างเป็นตัวประกอบ เหลือแค่เส้นขอบสี
กฎด้านบนไล่ .sum-card ทีละคลาสไว้ ต้องเจาะจงกว่านั้นถึงจะทับได้ ---- */
html[data-theme="fin"] #cfapp .sum-row.big .sum-card.recv{background:linear-gradient(135deg,#15803d,#22c55e)}
html[data-theme="fin"] #cfapp .sum-row.big .sum-card.paid{background:linear-gradient(135deg,#1d4ed8,#3b82f6)}
html[data-theme="fin"] #cfapp .sum-row.big .sum-card.owe {background:linear-gradient(135deg,#b91c1c,#ef4444)}
html[data-theme="fin"] #cfapp .sum-row.big .sum-card{
border:0;border-radius:17px;padding:20px 24px;box-shadow:0 8px 22px -10px rgba(16,24,40,.4)}
html[data-theme="fin"] #cfapp .sum-row.big .sum-card .sum-label{color:rgba(255,255,255,.93);font-size:13.5px;font-weight:800}
html[data-theme="fin"] #cfapp .sum-row.big .sum-card .sum-value{color:#fff;font-size:clamp(34px,3.7vw,46px);margin-top:7px}
html[data-theme="fin"] #cfapp .sum-row.big .sum-card .sum-count{color:rgba(255,255,255,.85);font-size:12.5px;font-weight:700;margin-top:4px}
html[data-theme="fin"] #cfapp .sum-row.mini .sum-card{background:none;border-width:2px;padding:11px 16px;border-radius:13px;box-shadow:none}
html[data-theme="fin"] #cfapp .sum-row.mini .sum-card .sum-label{font-size:11.5px;font-weight:700}
html[data-theme="fin"] #cfapp .sum-row.mini .sum-card .sum-value{font-size:clamp(19px,1.9vw,23px);margin-top:2px}
html[data-theme="fin"] #cfapp .sum-row.mini .sum-card.income{border-color:#0d6efd}
html[data-theme="fin"] #cfapp .sum-row.mini .sum-card.expense{border-color:#e5484d}
html[data-theme="fin"] #cfapp .sum-row.mini .sum-card.balance-pos{border-color:#12873e}
html[data-theme="fin"] #cfapp .sum-row.mini .sum-card.balance-neg{border-color:#7c3aed}
/* กรอบบันทึกรายการใหม่ — ขอบเขียวเข้ม ให้รู้ว่านี่คือที่ที่ต้องกรอก */
html[data-theme="fin"] #cfapp .entry-form{border:2.5px solid #15803d;box-shadow:0 3px 18px -6px rgba(21,128,61,.3)}
/* ป้าย "รับจริง" ในไทม์ไลน์ — เดิม 10px จางจนต้องเพ่ง */
html[data-theme="fin"] #cfapp .recv-pill{font-size:12.5px;padding:4px 11px;border-radius:9px;border-width:1.5px}
html[data-theme="fin"] #cfapp .recv-pill b{font-size:14px;font-weight:800}
/* timeline */
html[data-theme="fin"] #cfapp .timeline-header{background:#101828}
html[data-theme="fin"] #cfapp .timeline-header span{color:#98a2b3}
html[data-theme="fin"] #cfapp .timeline-legend{background:#fbfcfd}
html[data-theme="fin"] #cfapp .day-row{border-bottom:1px solid #f2f4f7}
html[data-theme="fin"] #cfapp .day-row:hover{background:#fcfdfd}
html[data-theme="fin"] #cfapp .day-row.has-data{background:#fff}
html[data-theme="fin"] #cfapp .day-row.today{background:#fefbe8}
html[data-theme="fin"] #cfapp .day-num{border-right-color:#f2f4f7}
html[data-theme="fin"] #cfapp .day-num .dow{color:#98a2b3}
html[data-theme="fin"] #cfapp .center-line::before{background:#eaecf0}
html[data-theme="fin"] #cfapp .cf-thead{background:#fbfcfd;border-bottom:1px solid #eaecf0}
html[data-theme="fin"] #cfapp .cf-thead .h-day{color:#98a2b3}
html[data-theme="fin"] #cfapp .cf-thead .h-in{color:#16a34a}
html[data-theme="fin"] #cfapp .cf-thead .h-out{color:#e5484d}
/* add buttons: solid, no lift shadow */
html[data-theme="fin"] #cfapp .btn-add-income{background:#16a34a;box-shadow:none}
html[data-theme="fin"] #cfapp .btn-add-income:hover{background:#12873e;transform:none;box-shadow:none}
html[data-theme="fin"] #cfapp .btn-add-expense{background:#e5484d;box-shadow:none}
html[data-theme="fin"] #cfapp .btn-add-expense:hover{background:#b42318;transform:none;box-shadow:none}
/* ============================================================
เมนู "หมวดการเงิน" ในไซด์บาร์ — พื้นฟ้าอ่อน + แถบซ้าย
ให้เห็นชัดว่าแยกออกจากเมนู ERP ทั่วไป (คลาส .priv)
กุญแจ 🔒 (.sb-lock) ใส่เฉพาะเมนูที่อยู่หลังรหัสผู้บริหารจริง ๆ
============================================================ */
#sidebar nav a.priv{background:rgba(125,211,252,.16);box-shadow:inset 3px 0 0 rgba(56,189,248,.85)}
#sidebar nav a.priv:hover{background:rgba(125,211,252,.28);color:#fff}
#sidebar nav a.priv.active{color:#fff;
background:linear-gradient(135deg,rgba(186,230,253,.36),rgba(125,211,252,.18));
box-shadow:inset 3px 0 0 #7dd3fc,inset 0 0 0 1px rgba(255,255,255,.3)}
#sidebar nav a .sb-lock{margin-left:auto;flex:0 0 auto;font-size:10.5px;line-height:1;opacity:.7}
#sidebar nav a.active .sb-lock{opacity:.95}
/* ธีมขาวมินิมอล */
html[data-theme="minimal"] #sidebar nav a.priv{background:#e6f3fd;color:#1c5a85;
box-shadow:inset 3px 0 0 #38bdf8}
html[data-theme="minimal"] #sidebar nav a.priv:hover{background:#d6ecfb;color:#0b4a70}
html[data-theme="minimal"] #sidebar nav a.priv.active{background:#c2e4fa;color:#0b4a70;
box-shadow:inset 3px 0 0 #0ea5e9,inset 0 0 0 1px rgba(14,165,233,.32)}
/* ธีม fin (เมนูการเงิน) — เมนูที่เลือกยังเป็นแถบดำเหมือนเดิม แต่คงแถบฟ้าไว้ */
html[data-theme="fin"] #sidebar nav a.priv{background:#eaf4fe;color:#1d4ed8;
box-shadow:inset 3px 0 0 #3b82f6}
html[data-theme="fin"] #sidebar nav a.priv:hover{background:#dbeafe;color:#1e3a8a}
html[data-theme="fin"] #sidebar nav a.priv.active{background:#101828;color:#fff;
box-shadow:inset 3px 0 0 #60a5fa}