/* AAVIVR Cash — mobile-first stylesheet */

:root{
  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#f8fafc;
  --line:#e3e8f0;
  --ink:#0f172a;
  --ink-2:#475569;
  --ink-3:#94a3b8;
  --brand:#0f172a;
  --accent:#4f46e5;
  --in:#0f766e;
  --in-bg:#ecfdf5;
  --out:#be123c;
  --out-bg:#fff1f2;
  --warn:#b45309;
  --radius:14px;
  --shadow:0 1px 2px rgba(15,23,42,.06), 0 8px 24px -12px rgba(15,23,42,.18);
  --tabbar-h:64px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0b1120;
    --surface:#111a2e;
    --surface-2:#16203a;
    --line:#243049;
    --ink:#e8edf7;
    --ink-2:#a5b3cc;
    --ink-3:#6b7c9b;
    --brand:#0b1120;
    --accent:#818cf8;
    --in:#34d399;
    --in-bg:#0c2c26;
    --out:#fb7185;
    --out-bg:#331420;
    --warn:#fbbf24;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--ink);
  font-size:15px; line-height:1.5;
  padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  -webkit-tap-highlight-color:transparent;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0 0 .5rem;line-height:1.25}
h1{font-size:1.35rem;letter-spacing:-.02em}
h2{font-size:1.05rem;letter-spacing:-.01em}
small{color:var(--ink-2)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ------------------------------------------------------------------ topbar */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:1rem;
  padding:.65rem 1rem;
  padding-top:calc(.65rem + env(safe-area-inset-top));
  background:var(--brand);color:#fff;
  box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.brand{display:flex;align-items:center;gap:.55rem;font-size:1rem;letter-spacing:.01em}
.brand-mark{
  display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  background:linear-gradient(140deg,#6366f1,#0ea5e9);font-weight:700;font-size:1rem;
}
.brand-text{font-weight:400;opacity:.95}
.brand-text b{font-weight:700}
.topnav{display:none;gap:.25rem;margin-left:auto}
.topnav a{padding:.4rem .75rem;border-radius:8px;color:rgba(255,255,255,.72);font-weight:500}
.topnav a:hover{background:rgba(255,255,255,.08);color:#fff}
.topnav a.on{background:rgba(255,255,255,.14);color:#fff}
.topnav a.nav-new{background:var(--accent);color:#fff;margin-left:.5rem}
.topnav a.nav-new:hover{background:var(--accent);filter:brightness(1.1)}
.topbar-right{margin-left:auto}
.topnav + .topbar-right{margin-left:0}

.avatar{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.15);font-weight:600;font-size:.9rem;color:#fff;
}
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer}
.menu summary::-webkit-details-marker{display:none}
.menu-panel{
  position:absolute;right:0;top:calc(100% + .5rem);min-width:230px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:.4rem;color:var(--ink);
}
.menu-panel a{display:block;padding:.55rem .7rem;border-radius:9px;font-size:.92rem}
.menu-panel a:hover{background:var(--surface-2)}
.menu-panel a.danger{color:var(--out)}
.menu-panel hr{border:0;border-top:1px solid var(--line);margin:.35rem .3rem}
.menu-head{padding:.5rem .7rem .6rem;border-bottom:1px solid var(--line);margin-bottom:.3rem}
.menu-head strong{display:block;font-size:.95rem}
.menu-head small{font-size:.78rem}

/* ------------------------------------------------------------------- layout */
.wrap{max-width:1080px;margin:0 auto;padding:1rem}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:1rem;box-shadow:var(--shadow);margin-bottom:1rem;
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.75rem}
.card-head h2{margin:0}
.section-title{font-size:.75rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);font-weight:700;margin:1.4rem .25rem .6rem}
.grid{display:grid;gap:.75rem}
.grid-2{grid-template-columns:1fr}
.grid-3{grid-template-columns:1fr}
@media (min-width:640px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:860px){
  body{padding-bottom:2rem}
  .topnav{display:flex}
  .tabbar{display:none !important}
  .wrap{padding:1.5rem}
}

/* -------------------------------------------------------------- total strip */
.total-card{
  background:linear-gradient(150deg,#4f46e5,#0ea5e9);
  color:#fff;border:0;padding:1.15rem 1.15rem 1.25rem;
}
.total-card .label{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;opacity:.85}
.total-card .value{font-size:2.1rem;font-weight:700;letter-spacing:-.03em;margin:.15rem 0 .1rem}
.total-card .sub{font-size:.85rem;opacity:.9}
.total-split{display:flex;gap:1.25rem;margin-top:.9rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.22)}
.total-split div{flex:1}
.total-split .k{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;opacity:.85}
.total-split .v{font-size:1.05rem;font-weight:600}

/* ------------------------------------------------------------ person tiles */
.person{
  display:flex;align-items:center;gap:.8rem;padding:.85rem 1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.person .pic{
  display:grid;place-items:center;width:42px;height:42px;border-radius:50%;flex:none;
  background:var(--surface-2);border:1px solid var(--line);font-weight:700;color:var(--ink-2);
}
.person .who{flex:1;min-width:0}
.person .who b{display:block;font-size:.95rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.person .who small{font-size:.78rem}
.person .bal{text-align:right;font-weight:700;font-size:1.05rem;white-space:nowrap}
.person .bal.neg{color:var(--out)}

/* ------------------------------------------------------------------ entries */
.entry-list{display:flex;flex-direction:column;gap:.5rem}
.entry{
  display:flex;align-items:stretch;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;
}
.entry-main{
  flex:1;min-width:0;display:flex;align-items:center;gap:.8rem;
  padding:.75rem .4rem .75rem .9rem;
}
.entry-vch{
  display:grid;place-items:center;width:44px;flex:none;font-size:1rem;
  border-left:1px solid var(--line);opacity:.5;border-radius:0 12px 12px 0;
}
.entry-vch:hover{opacity:1;background:var(--surface-2)}
.entry .ico{
  display:grid;place-items:center;width:36px;height:36px;border-radius:10px;flex:none;
  font-weight:700;font-size:1rem;
}
.entry.in  .ico{background:var(--in-bg);color:var(--in)}
.entry.out .ico{background:var(--out-bg);color:var(--out)}
.entry .body{flex:1;min-width:0}
.entry .body b{display:block;font-size:.92rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry .body small{display:block;font-size:.78rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.entry .amt{font-weight:700;font-size:.98rem;white-space:nowrap;text-align:right}
.entry.in  .amt{color:var(--in)}
.entry.out .amt{color:var(--out)}
.entry .amt small{display:block;font-weight:500;font-size:.72rem;color:var(--ink-3)}
.day-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:1.1rem .25rem .5rem;font-size:.8rem;font-weight:700;color:var(--ink-2);
}
.day-head .net{font-weight:600;color:var(--ink-3)}
.empty{text-align:center;padding:2.5rem 1rem;color:var(--ink-3)}
.empty .big{font-size:2rem;margin-bottom:.4rem}

/* -------------------------------------------------------------------- forms */
label{display:block;font-size:.8rem;font-weight:600;color:var(--ink-2);margin:0 0 .3rem}
input,select,textarea,button{font:inherit;color:inherit}
input[type=text],input[type=date],input[type=number],input[type=search],
input[type=password],input[type=tel],select,textarea{
  width:100%;padding:.7rem .8rem;border:1px solid var(--line);border-radius:11px;
  background:var(--surface);color:var(--ink);appearance:none;
}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:transparent}
.field{margin-bottom:.85rem}
.field-row{display:grid;gap:.85rem;grid-template-columns:1fr 1fr}
textarea{min-height:70px;resize:vertical}
.hint{font-size:.75rem;color:var(--ink-3);margin-top:.3rem}

.amount-input{position:relative}
.amount-input span{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);
  color:var(--ink-3);font-size:1.25rem;font-weight:600;pointer-events:none;
}
.amount-input input{
  padding-left:2.1rem;font-size:1.6rem;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}

/* direction toggle */
.toggle{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-bottom:1rem}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle label{
  margin:0;display:flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.8rem;border:1.5px solid var(--line);border-radius:12px;cursor:pointer;
  font-size:.95rem;font-weight:600;color:var(--ink-2);background:var(--surface);
}
.toggle input:checked + label.in{border-color:var(--in);background:var(--in-bg);color:var(--in)}
.toggle input:checked + label.out{border-color:var(--out);background:var(--out-bg);color:var(--out)}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem}
.chip{
  padding:.35rem .7rem;border:1px solid var(--line);border-radius:999px;
  background:var(--surface);font-size:.8rem;color:var(--ink-2);cursor:pointer;
}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* ------------------------------------------------------------------ buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  padding:.75rem 1.1rem;border-radius:11px;border:1px solid var(--line);
  background:var(--surface);color:var(--ink);font-weight:600;font-size:.92rem;
  cursor:pointer;text-align:center;
}
.btn:hover{background:var(--surface-2)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.08);background:var(--accent)}
.btn-danger{color:var(--out);border-color:var(--line)}
.btn-danger:hover{background:var(--out-bg)}
.btn-block{display:flex;width:100%}
.btn-sm{padding:.45rem .7rem;font-size:.82rem;border-radius:9px}
.btn-row{display:flex;gap:.6rem;flex-wrap:wrap}
.btn-row .btn{flex:1;min-width:130px}

.quick{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:1rem}
.quick a{
  display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;
  padding:.9rem 1rem;border-radius:var(--radius);border:1px solid var(--line);
  background:var(--surface);box-shadow:var(--shadow);
}
.quick a b{font-size:.95rem}
.quick a small{font-size:.75rem;color:var(--ink-3)}
.quick a.recv b{color:var(--in)}
.quick a.paid b{color:var(--out)}

/* --------------------------------------------------------------------- misc */
.flash{
  padding:.75rem .9rem;border-radius:11px;margin-bottom:.85rem;font-size:.9rem;
  border:1px solid transparent;
}
.flash-ok{background:var(--in-bg);color:var(--in);border-color:currentColor}
.flash-err{background:var(--out-bg);color:var(--out);border-color:currentColor}
.flash-warn{background:#fffbeb;color:var(--warn);border-color:currentColor}
@media (prefers-color-scheme: dark){ .flash-warn{background:#2a2110} }

.tag{
  display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.7rem;
  font-weight:600;background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line);
}
.tag.in{background:var(--in-bg);color:var(--in);border-color:transparent}
.tag.out{background:var(--out-bg);color:var(--out);border-color:transparent}

.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -1rem;padding:0 1rem}
table{width:100%;border-collapse:collapse;font-size:.88rem;min-width:520px}
th,td{padding:.6rem .55rem;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);font-weight:700}
td.r,th.r{text-align:right}
tfoot td{font-weight:700;border-top:2px solid var(--line);border-bottom:0}
tbody tr:last-child td{border-bottom:0}
.pos{color:var(--in)} .neg{color:var(--out)}

.filters{display:grid;gap:.6rem;grid-template-columns:1fr 1fr}
.filters .full{grid-column:1 / -1}

.pager{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem}

/* --------------------------------------------------------------- fab + tabs */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:44;
  display:grid;grid-template-columns:repeat(5,1fr);
  height:calc(var(--tabbar-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:var(--surface);border-top:1px solid var(--line);
}
.tabbar.tabbar-slim{grid-template-columns:repeat(3,1fr)}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  font-size:.66rem;font-weight:600;color:var(--ink-3);
}
.tabbar a.on{color:var(--accent)}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tabbar .tab-add{color:transparent}
.tabbar .tab-add span{
  display:grid;place-items:center;width:46px;height:46px;border-radius:14px;
  background:var(--accent);color:#fff;font-size:1.6rem;font-weight:300;line-height:1;
}

/* -------------------------------------------------------------------- login */
body.is-login{
  padding:0;min-height:100dvh;display:grid;place-items:center;
  background:linear-gradient(160deg,#0f172a 0%,#1e1b4b 55%,#312e81 100%);
}
body.is-login .wrap{width:100%;max-width:400px;padding:1.5rem}
.login-card{background:var(--surface);border-radius:20px;padding:1.75rem 1.5rem;box-shadow:0 24px 60px -20px rgba(0,0,0,.6)}
.login-logo{
  width:56px;height:56px;border-radius:16px;margin:0 auto .9rem;
  display:grid;place-items:center;font-size:1.7rem;font-weight:700;color:#fff;
  background:linear-gradient(140deg,#6366f1,#0ea5e9);
}
.login-card h1{text-align:center;font-size:1.25rem;margin-bottom:.15rem}
.login-card .sub{text-align:center;color:var(--ink-3);font-size:.85rem;margin-bottom:1.4rem}
.who-pick{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1rem}
.who-pick input{position:absolute;opacity:0;pointer-events:none}
.who-pick label{
  margin:0;display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;
  border:1.5px solid var(--line);border-radius:12px;cursor:pointer;
  font-size:.95rem;font-weight:600;color:var(--ink);
}
.who-pick input:checked + label{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.who-pick label .pic{
  display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:var(--surface-2);border:1px solid var(--line);font-size:.85rem;color:var(--ink-2);
}
.pin-input input{text-align:center;letter-spacing:.7em;font-size:1.3rem;font-weight:700;padding-left:.7em}
.login-foot{text-align:center;margin-top:1.1rem;font-size:.75rem;color:rgba(255,255,255,.55)}

/* -------------------------------------------------------------- change log */
.tabs{display:flex;gap:.4rem;margin-bottom:1rem;border-bottom:1px solid var(--line)}
.tabs a{
  padding:.55rem .85rem;font-size:.88rem;font-weight:600;color:var(--ink-3);
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tabs a.on{color:var(--accent);border-bottom-color:var(--accent)}

.logrow{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--ink-3);
  border-radius:10px;padding:.75rem .9rem;margin-bottom:.6rem;
}
.logrow-update{border-left-color:var(--warn)}
.logrow-delete{border-left-color:var(--out)}
.logrow-create{border-left-color:var(--in)}
.logrow-head{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;font-size:.88rem}
.logrow-head .when{margin-left:auto;font-size:.76rem;color:var(--ink-3);white-space:nowrap}
.logrow-summary{font-size:.85rem;color:var(--ink-2);margin-top:.4rem;word-break:break-word}

.logrow-diff{width:100%;min-width:0;border-collapse:collapse;margin-top:.55rem;font-size:.82rem}
.logrow-diff th{
  width:30%;text-align:left;padding:.25rem .5rem .25rem 0;border:0;white-space:normal;
  font-size:.72rem;text-transform:none;letter-spacing:0;color:var(--ink-3);font-weight:600;
}
.logrow-diff td{padding:.25rem .4rem;border:0;white-space:normal;word-break:break-word}
.logrow-diff .was{color:var(--out);text-decoration:line-through;opacity:.85}
.logrow-diff .arrow{color:var(--ink-3);width:1.4rem;text-align:center}
.logrow-diff .now{color:var(--in);font-weight:600}

.entry-history{margin-top:.4rem}
.entry-history li{font-size:.82rem;color:var(--ink-2);margin-bottom:.3rem;line-height:1.45}
.entry-history .when{color:var(--ink-3)}

/* ------------------------------------------------------------ voucher slip */
.voucher-actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:1rem}
.voucher-actions .btn{flex:1;min-width:120px}

.slip{
  background:#fff;color:#0f172a;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:1.4rem 1.3rem 1.1rem;max-width:520px;margin:0 auto;
}
.slip-head{text-align:center}
.slip-head h2{margin:0;font-size:1.25rem;letter-spacing:.01em}
.slip-head p{margin:.3rem 0 0;font-size:.75rem;color:#64748b;line-height:1.4}
.slip-title{
  margin:.9rem 0 1rem;padding:.45rem;border-top:2px solid #0f172a;
  background:#f1f3f8;text-align:center;font-weight:700;font-size:.92rem;letter-spacing:.09em;
}
.slip-meta{display:flex;justify-content:space-between;gap:1rem;padding-bottom:.7rem;border-bottom:1px solid #e2e8f0}
.slip-meta small{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:#64748b}
.slip-meta b{font-size:.95rem;font-variant-numeric:tabular-nums}
.slip-meta .r{text-align:right}

.slip-rows{width:100%;min-width:0;border-collapse:collapse;margin:.5rem 0}
.slip-rows th{
  width:34%;text-align:left;vertical-align:top;padding:.4rem .5rem .4rem 0;border:0;
  font-size:.72rem;text-transform:none;letter-spacing:0;color:#64748b;font-weight:600;white-space:normal;
}
.slip-rows td{padding:.4rem 0;border:0;font-size:.88rem;white-space:normal;word-break:break-word}

.slip-amount{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  border:1px solid #b4becd;border-radius:8px;padding:.6rem .8rem;margin:.7rem 0 .2rem;
}
.slip-amount span{font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:#64748b}
.slip-amount b{font-size:1.3rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

.slip-sign{display:flex;justify-content:space-between;gap:1.5rem;margin-top:2.6rem}
.slip-sign > div{flex:1}
.slip-sign .rule{display:block;border-top:1px dashed #94a3b8;margin-bottom:.35rem}
.slip-sign small{font-size:.7rem;color:#64748b;line-height:1.35;display:block}
.slip-sign .r{text-align:right}

.slip-foot{
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  margin-top:1.4rem;padding-top:.6rem;border-top:1px solid #e8edf4;
  font-size:.66rem;color:#94a3b8;
}

@media print{
  @page{size:A5 portrait;margin:10mm}
  .slip{
    border:0;box-shadow:none;border-radius:0;padding:0;max-width:none;
    background:#fff;color:#000;
  }
  .voucher-actions{display:none !important}
  .slip-sign{margin-top:22mm}
}

@media print{
  .topbar,.tabbar,.no-print,.btn{display:none !important}
  body{background:#fff;padding:0}
  .card{box-shadow:none;border:1px solid #ddd;break-inside:avoid}
  .table-scroll{overflow:visible;margin:0;padding:0}
  table{min-width:0}
}