/* Care Givers Financial Management System - brand: orange #FF7300, green #036D46 (from the supplied logo) */
:root{
  --green:#036d46; --green-600:#04593a; --green-50:#e8f4ee; --orange:#ff7300; --orange-600:#d95f00; --orange-50:#fff1e5;
  --bg:#f4f6f5; --surface:#ffffff; --surface-2:#f8faf9; --text:#14211b; --muted:#5b6b63; --border:#dfe6e2;
  --bad:#b42318; --bad-bg:#fef0ee; --ok:#067647; --ok-bg:#e8f6ee; --warn:#9a5b00; --warn-bg:#fff4e0; --info:#1d4f91; --info-bg:#eaf2fc;
  --shadow:0 1px 2px rgba(16,40,28,.05),0 4px 16px rgba(16,40,28,.05); --radius:14px;
  --side-w:260px; --side-w-c:72px; --font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --link:#036d46; --chart-g:#036d46; --chart-o:#ff7300; --axis:#c9d3ce;
}
:root[data-theme=dark]{
  --bg:#0d1511; --surface:#141f1a; --surface-2:#18251f; --text:#e8f0ec; --muted:#9db1a7; --border:#263a31;
  --bad:#ff8a7a; --bad-bg:#3a1b18; --ok:#6fe0a6; --ok-bg:#12301f; --warn:#ffc266; --warn-bg:#3a2a10; --info:#8dbcf5; --info-bg:#14263d;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 6px 20px rgba(0,0,0,.25); --link:#5fd3a0; --green-50:#12301f; --orange-50:#3a220e;
  --chart-g:#3fbf8a; --chart-o:#ff8f33; --axis:#34493f;
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;font:15px/1.5 var(--font);background:var(--bg);color:var(--text);transition:background .25s,color .25s}
a{color:var(--link);text-decoration:none} a:hover{text-decoration:underline}
h1,h2,h3{margin:0;line-height:1.25} small{font-size:.82em} code{background:var(--surface-2);padding:1px 6px;border-radius:6px;border:1px solid var(--border)}
.muted{color:var(--muted)} .small{font-size:.85rem} .neg{color:var(--bad)} .center{text-align:center;display:block}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:8px;left:8px;z-index:99;background:var(--surface);padding:8px 12px;border-radius:8px}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px;border-radius:6px}
.icon{flex:none}

/* ---------- Shell ---------- */
.shell{display:flex;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side-w);background:linear-gradient(180deg,var(--green) 0%,#02402a 100%);color:#e9f5ee;display:flex;flex-direction:column;padding:16px 12px;z-index:30;transition:width .25s ease,transform .25s ease}
.brand{display:flex;flex-direction:column;gap:8px;padding:4px 4px 16px;align-items:stretch}
.brand-tile{background:#fefefe;border-radius:12px;padding:8px 10px;display:flex;justify-content:center;align-items:center}
.brand-full{width:100%;max-width:170px;height:auto;display:block} .brand-mark{display:none;width:34px;height:auto}
.brand-text{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;opacity:.8}
.nav{display:flex;flex-direction:column;gap:2px;overflow:auto;flex:1;padding-right:2px}
.nav-link{display:flex;align-items:center;gap:12px;padding:8px 12px;border-radius:10px;color:#d7ebe0;font-weight:500;white-space:nowrap;transition:background .15s,color .15s}
.nav-link:hover{background:rgba(255,255,255,.1);text-decoration:none;color:#fff}
.nav-link.active{background:#fff;color:var(--green);font-weight:650;box-shadow:inset 4px 0 0 var(--orange)}
.collapse-btn{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);color:#d7ebe0;border:0;border-radius:10px;padding:10px 12px;cursor:pointer;font:inherit}
.collapse-btn:hover{background:rgba(255,255,255,.16)} .collapse-btn .icon{transition:transform .25s}
.main-col{margin-left:var(--side-w);flex:1;min-width:0;transition:margin-left .25s ease}
body.collapsed .sidebar{width:var(--side-w-c)} body.collapsed .main-col{margin-left:var(--side-w-c)}
body.collapsed .nav-link span,body.collapsed .brand-text,body.collapsed .collapse-btn span{display:none}
body.collapsed .brand-full{display:none} body.collapsed .brand-mark{display:block} body.collapsed .nav-link{justify-content:center;padding:11px 0}
body.collapsed .collapse-btn{justify-content:center} body.collapsed .collapse-btn .icon{transform:rotate(180deg)}
.scrim{display:none}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:12px 24px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--border);flex-wrap:wrap}
.titles{min-width:0;margin-right:auto} .crumbs{font-size:.78rem;color:var(--muted);display:flex;gap:6px} .crumbs .sep{opacity:.5}
.page-title{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;order:5;flex-basis:100%;padding-top:10px;border-top:1px solid var(--border)}
.icon-btn{background:var(--surface);border:1px solid var(--border);color:var(--text);width:40px;height:40px;border-radius:10px;display:inline-grid;place-items:center;cursor:pointer;transition:transform .1s,background .15s}
.icon-btn:hover{background:var(--surface-2)} .icon-btn:active{transform:scale(.95)} .menu-btn{display:none}
:root[data-theme=dark] .i-sun{display:none} :root:not([data-theme=dark]) .i-moon{display:none}
.usermenu{position:relative} .usermenu summary{list-style:none;display:flex;gap:10px;align-items:center;cursor:pointer;padding:4px 8px;border-radius:12px;border:1px solid var(--border);background:var(--surface)}
.usermenu summary::-webkit-details-marker{display:none}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--orange);color:#fff;display:grid;place-items:center;font-weight:700}
.who{display:flex;flex-direction:column;line-height:1.15} .who small{color:var(--muted)}
.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:6px;animation:pop .15s ease-out;z-index:40}
.menu-head{display:flex;flex-direction:column;padding:8px 10px;border-bottom:1px solid var(--border);margin-bottom:4px} .menu-head small{color:var(--muted)}
.menu a,.menu button{display:flex;gap:8px;align-items:center;width:100%;padding:9px 10px;border-radius:8px;border:0;background:none;color:var(--text);font:inherit;cursor:pointer;text-align:left}
.menu a:hover,.menu button:hover{background:var(--surface-2);text-decoration:none}
.page{padding:24px;max-width:1320px;margin:0 auto;animation:fade .3s ease-out} .page:focus{outline:none}
.scope{margin:0 0 14px;color:var(--muted);font-size:.88rem}

/* ---------- Cards & grids ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;margin-bottom:20px;transition:box-shadow .2s,transform .2s}
.card.narrow{max-width:860px} .card-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.card-head h2{font-size:1.05rem;display:flex;align-items:center;gap:8px}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px} .grid-2.top{align-items:start} .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-bottom:20px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px;margin-bottom:20px}
.kpi{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;color:var(--text);box-shadow:var(--shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
a.kpi:hover{transform:translateY(-2px);border-color:var(--green);text-decoration:none} .kpi.static{margin:0}
.kpi-top{display:flex;justify-content:space-between;align-items:center} .kpi-label{font-size:.8rem;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.05em}
.kpi-icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:var(--green-50);color:var(--green)} :root[data-theme=dark] .kpi-icon{color:#5fd3a0}
.kpi-value{font-size:1.7rem;font-weight:750;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi-foot{min-height:22px} .kpi-tip{font-size:.74rem;color:var(--muted);max-height:0;opacity:0;overflow:hidden;transition:max-height .25s,opacity .25s}
a.kpi:hover .kpi-tip,a.kpi:focus-visible .kpi-tip{max-height:80px;opacity:1}
.delta{display:inline-block;font-size:.76rem;font-weight:650;padding:2px 8px;border-radius:99px}
.delta-up{background:var(--ok-bg);color:var(--ok)} .delta-down{background:var(--bad-bg);color:var(--bad)} .delta-na{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.welcome ol{padding-left:20px;line-height:1.9}

/* ---------- Charts ---------- */
.chart-svg{width:100%;height:auto;display:block} .axis{stroke:var(--axis);stroke-width:1} .axis-label{fill:var(--muted);font-size:11px}
.bar{transform-origin:bottom;transform-box:fill-box;animation:grow .5s ease-out both} .bar-g{fill:var(--chart-g)} .bar-o{fill:var(--chart-o)}
.line-path{fill:none;stroke:var(--chart-g);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;animation:draw .8s ease-out}
.dot{stroke:var(--surface);stroke-width:2} .dot-pos{fill:var(--chart-g)} .dot-neg{fill:var(--bad)}
.legend{font-size:.8rem;color:var(--muted);display:flex;gap:10px;align-items:center} .legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px}
.dot-g{background:var(--chart-g)} .dot-o{background:var(--chart-o)}
.hbar{margin-bottom:14px} .hbar-label{display:flex;justify-content:space-between;gap:10px;font-size:.9rem;margin-bottom:5px}
.hbar-track{height:10px;background:var(--surface-2);border:1px solid var(--border);border-radius:99px;overflow:hidden;margin-bottom:3px} .hbar-track.thin{height:6px}
.hbar-fill{display:block;height:100%;border-radius:99px;transition:width .6s ease} .hbar-fill.g{background:var(--chart-g)} .hbar-fill.o{background:var(--chart-o)}
.note{font-size:.8rem;color:var(--muted);margin:10px 0 0} .summary{margin:4px 0 12px;color:var(--muted)} .summary strong{color:var(--text)}
.empty{color:var(--muted);text-align:center;padding:24px 8px;margin:0;border:1px dashed var(--border);border-radius:12px;background:var(--surface-2)}

/* ---------- Lists & tables ---------- */
.list{list-style:none;margin:0;padding:0} .list li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--border)} .list li:last-child{border:0}
.list .right{display:flex;flex-direction:column;align-items:flex-end;font-variant-numeric:tabular-nums;font-weight:650;white-space:nowrap}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:.9rem} .table th{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);white-space:nowrap}
.table th a{color:inherit} .table td{padding:11px 12px;border-bottom:1px solid var(--border);vertical-align:top}
.table tbody tr{transition:background .12s} .table tbody tr:hover{background:var(--surface-2)}
.num{text-align:right!important;font-variant-numeric:tabular-nums;white-space:nowrap}
.pl .sec td{background:var(--surface-2);font-weight:700;color:var(--green);text-transform:uppercase;font-size:.76rem;letter-spacing:.06em} :root[data-theme=dark] .pl .sec td{color:#5fd3a0}
.pl .code{color:var(--muted);width:70px} .pl .total td{border-top:1px solid var(--border);font-weight:650} .pl .strong td{background:var(--green-50);font-size:1rem}
.actions-cell{white-space:nowrap} .actions{display:flex;gap:8px;flex-wrap:wrap} form.inline{display:inline}
.badge{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:99px;white-space:nowrap}
.badge-ok{background:var(--ok-bg);color:var(--ok)} .badge-bad{background:var(--bad-bg);color:var(--bad)} .badge-warn{background:var(--warn-bg);color:var(--warn)} .badge-info{background:var(--info-bg);color:var(--info)} .badge-muted{background:var(--surface-2);color:var(--muted);border:1px solid var(--border)}
.toolbar,.search{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px} .toolbar input[type=search]{flex:1;min-width:200px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:14px;flex-wrap:wrap} .pager-links{display:flex;gap:8px}
.dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 20px;margin:0 0 16px} .dl dt{font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)} .dl dd{margin:2px 0 0} .dl .span-2{grid-column:span 2}

/* ---------- Forms & buttons ---------- */
input,select,textarea,button{font:inherit}
input:not([type=checkbox]),select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);min-height:42px;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px color-mix(in srgb,var(--green) 25%,transparent)}
.filters input,.filters select,.toolbar input,.toolbar select,.search input{width:auto;min-height:38px;padding:7px 10px}
label{display:flex;flex-direction:column;gap:6px;font-weight:600;font-size:.88rem} label small{font-weight:400;color:var(--muted)}
label.check{flex-direction:row;align-items:center;font-weight:500} label.check input{width:auto;min-height:0}
.form-stack{display:flex;flex-direction:column;gap:14px} .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px} .form-grid.compact{margin-top:14px} .span-2{grid-column:span 2} .form-actions{display:flex;gap:10px;align-items:center;grid-column:span 2}
fieldset{border:1px solid var(--border);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:12px;margin:0} legend{padding:0 6px;font-weight:700;color:var(--green)}
.num-input{text-align:right} .lines select{min-width:170px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 16px;border-radius:10px;border:1px solid transparent;font-weight:650;cursor:pointer;min-height:42px;transition:transform .1s,background .15s,box-shadow .15s;text-decoration:none!important;position:relative}
.btn:active{transform:scale(.97)} .btn-sm{min-height:34px;padding:6px 12px;font-size:.85rem}
.btn-primary{background:var(--green);color:#fff} .btn-primary:hover{background:var(--green-600);box-shadow:0 4px 12px rgba(3,109,70,.3)}
.btn-ghost{background:var(--surface);color:var(--text);border-color:var(--border)} .btn-ghost:hover{background:var(--surface-2)}
.btn-danger{background:var(--bad);color:#fff} :root[data-theme=dark] .btn-danger{color:#1a0b09}
.btn-block{width:100%} .btn[disabled]{opacity:.6;cursor:not-allowed}
.spinner{display:none;width:16px;height:16px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.is-loading .spinner{display:inline-block} .is-loading .btn-label{opacity:.85}
.flash{padding:11px 14px;border-radius:10px;margin-bottom:14px;border:1px solid transparent;display:flex;gap:8px;align-items:center}
.flash-ok{background:var(--ok-bg);color:var(--ok);border-color:color-mix(in srgb,var(--ok) 30%,transparent)} .flash-bad{background:var(--bad-bg);color:var(--bad);border-color:color-mix(in srgb,var(--bad) 30%,transparent)}
.flash-warn{background:var(--warn-bg);color:var(--warn)} .flash-info{background:var(--info-bg);color:var(--info)}
.secret code{font-size:1.15rem;letter-spacing:.08em;padding:8px 12px;display:inline-block}
.code-input{font-size:1.4rem;letter-spacing:.3em;text-align:center}
.error-box{text-align:center;padding:30px 10px} .error-code{font-size:3.4rem;font-weight:800;margin:0;color:var(--green)}

/* ---------- Sign-in ---------- */
.auth-body{background:linear-gradient(135deg,#f3faf6 0%,#fff6ee 100%);min-height:100vh;overflow-x:hidden}
.auth-bg{position:fixed;inset:0;overflow:hidden;pointer-events:none}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.45;animation:float 18s ease-in-out infinite}
.b1{width:420px;height:420px;background:#7fd1ab;top:-120px;left:-100px} .b2{width:380px;height:380px;background:#ffc08a;bottom:-120px;right:-80px;animation-delay:-6s} .b3{width:260px;height:260px;background:#b5e5cd;top:40%;right:25%;animation-delay:-11s}
.flow{position:absolute;inset:0;width:100%;height:100%} .flow path{fill:none;stroke:#036d46;stroke-opacity:.12;stroke-width:2;stroke-dasharray:10 14;animation:dash 30s linear infinite}
.auth-wrap{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px 16px;gap:16px}
.auth-card{width:100%;max-width:430px;background:rgba(255,255,255,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.9);border-radius:20px;padding:32px 30px;box-shadow:0 20px 60px rgba(3,109,70,.15);animation:rise .5s ease-out;color:#14211b}
.auth-card .muted,.auth-foot{color:#4b5d54} .auth-card a{color:#036d46}
.auth-logo{mix-blend-mode:multiply;display:block;width:190px;max-width:70%;height:auto;margin:0 auto 16px} .auth-title{text-align:center;font-size:1.6rem;margin-bottom:4px} .auth-sub{text-align:center;color:#4b5d54;margin:0 0 20px}
.auth-card input{background:#fff;color:#14211b;border-color:#cfd9d4} .auth-card label{color:#14211b}
.auth-foot{font-size:.78rem;margin:0;text-align:center}
.pw-wrap{position:relative;display:block} .pw-wrap input{padding-right:70px} .pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:#036d46;font-weight:700;cursor:pointer;padding:8px}
.row-between{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;font-size:.88rem}
.install-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px} .install-card{max-width:560px;margin:auto}

.errlist{margin:0 0 14px;padding:12px 12px 12px 30px;background:var(--bad-bg);border-radius:10px;color:var(--bad);font-size:.88rem}

/* ---------- Motion ---------- */
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @keyframes rise{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:1;transform:none}} @keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,30px)}} @keyframes dash{to{stroke-dashoffset:-600}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---------- Responsive ---------- */
@media (max-width:1100px){.grid-2{grid-template-columns:1fr}.dl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .sidebar{transform:translateX(-100%);width:var(--side-w)!important;box-shadow:none} body.nav-open .sidebar{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .main-col,body.collapsed .main-col{margin-left:0} .menu-btn{display:inline-grid} .collapse-btn{display:none}
  body.collapsed .nav-link span,body.collapsed .brand-text{display:inline} body.collapsed .brand-full{display:block} body.collapsed .brand-mark{display:none} body.collapsed .nav-link{justify-content:flex-start;padding:10px 12px}
  .scrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:25;display:block;opacity:0;pointer-events:none;transition:opacity .25s} body.nav-open .scrim{opacity:1;pointer-events:auto}
  .topbar{padding:10px 14px} .page{padding:16px 14px} .who{display:none} .grid-3{grid-template-columns:1fr} .form-grid{grid-template-columns:1fr} .span-2,.form-actions{grid-column:span 1} .dl{grid-template-columns:1fr 1fr}
  .filters select,.filters input{flex:1;min-width:120px} .kpi-value{font-size:1.45rem}
}
@media print{.sidebar,.topbar,.btn,.toolbar,.pager{display:none!important}.main-col{margin:0}.card{box-shadow:none}}
.pos{color:var(--ok,#2f7d4f)} input.cell{width:6.5rem;min-width:0;padding:.3rem .4rem;text-align:right}
.tabs{display:flex;gap:.5rem} .tabs a{padding:.2rem .6rem;border-radius:999px} .tabs a.active{background:var(--brand,#e8751a);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem} .chip{padding:.35rem .8rem;border:1px solid var(--line,#d8d8d8);border-radius:999px;text-decoration:none} .chip.active{background:var(--brand,#e8751a);color:#fff;border-color:transparent}
.plainlist{list-style:none;padding:0;margin:.5rem 0} .plainlist li{padding:.3rem 0;border-bottom:1px solid var(--line,#eee)} .answer{margin:1rem 0;padding:1rem;border-left:4px solid var(--brand,#e8751a);background:rgba(128,128,128,.08);border-radius:6px}
.searchbox input{width:9rem;padding:.35rem .6rem;border-radius:999px;border:1px solid var(--line,#d8d8d8);background:transparent;color:inherit} .bell{position:relative;display:inline-flex} .bell .dot{position:absolute;top:-4px;right:-4px;min-width:16px;height:16px;border-radius:8px;background:var(--bad,#c0392b);color:#fff;font-size:.65rem;line-height:16px;text-align:center}
@media(max-width:700px){.searchbox{display:none}}