/* ============================================================
   BRDB Restaurant Management System — style.css
   Glassmorphism · premium 3D · dark/light · per-page accent
   ============================================================ */

:root{
  --accent-1:#6366f1; --accent-2:#22d3ee;
  --bg:#eef2ff; --bg2:#fce7f3;
  --surface:rgba(255,255,255,.62);
  --surface-strong:rgba(255,255,255,.86);
  --border:rgba(255,255,255,.55);
  --text:#0f172a; --muted:#64748b;
  --shadow:0 18px 45px -18px rgba(30,41,59,.45);
  --shadow-sm:0 8px 22px -12px rgba(30,41,59,.4);
  --radius:20px;
  --font-display:'Sora',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  /* table sizing: --tbl-h caps a standalone table, --tbl-min/--panel-min keep a table
     beside a short form looking deliberate instead of stunted */
  --tbl-h:460px; --tbl-min:300px; --panel-min:540px;
  --clip-w:130px;
  --ease:cubic-bezier(.4,.14,.3,1);
}
html[data-theme="dark"]{
  --bg:#0b1020; --bg2:#1e1b4b;
  --surface:rgba(22,28,48,.6);
  --surface-strong:rgba(28,34,58,.9);
  --border:rgba(148,163,184,.18);
  --text:#e7ecf5; --muted:#94a3b8;
  --shadow:0 22px 55px -20px rgba(0,0,0,.7);
  --shadow-sm:0 10px 24px -14px rgba(0,0,0,.65);
}

*{box-sizing:border-box}
body{
  margin:0; font-family:var(--font-body); color:var(--text);
  min-height:100vh; background:var(--bg);
  background-image:
    radial-gradient(60vw 60vw at 8% -10%, color-mix(in srgb,var(--accent-1) 38%,transparent), transparent 60%),
    radial-gradient(55vw 55vw at 105% 12%, color-mix(in srgb,var(--accent-2) 35%,transparent), transparent 60%),
    radial-gradient(50vw 50vw at 50% 115%, var(--bg2), transparent 60%);
  background-attachment:fixed;
  transition:background-color .4s,color .3s;
}
h1,h2,h3,h4,.brand{font-family:var(--font-display);letter-spacing:-.02em}
a{color:inherit}

/* ---------------- Glass primitives ---------------- */
.glass{
  background:var(--surface); backdrop-filter:blur(18px) saturate(160%);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.glass-strong{background:var(--surface-strong)!important}

/* ---------------- Header ---------------- */
.app-header{
  position:sticky; top:0; z-index:1030; margin:10px; padding:8px 13px;
  display:flex; align-items:center; gap:11px;
}
.brand{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.25rem;text-decoration:none}
/* The emblem is painted through the artwork's own alpha, so it takes the page accent and
   follows the theme and colour scheme instead of being locked to one ink colour. */
.brand-mark{
  width:38px;height:44px;flex:0 0 38px;display:block;
  -webkit-mask:url(assets/mark.png) center/contain no-repeat;
          mask:url(assets/mark.png) center/contain no-repeat;
  background:linear-gradient(150deg,var(--accent-1),var(--accent-2));
  transition:transform .3s var(--ease),filter .3s var(--ease);
  filter:drop-shadow(0 4px 10px color-mix(in srgb,var(--accent-1) 45%,transparent));
}
.brand:hover .brand-mark{transform:rotate(-5deg) scale(1.07)}
html[data-theme="dark"] .brand-mark{filter:drop-shadow(0 4px 12px color-mix(in srgb,var(--accent-2) 55%,transparent))}
.brand small{display:block;font-size:.62rem;font-weight:600;color:var(--muted);letter-spacing:.18em}
.app-nav{display:flex;gap:4px;flex:1;flex-wrap:nowrap;align-items:center;min-width:0}
.app-nav>*,.has-sub{flex:0 0 auto}
.nav-link2{
  display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:11px;
  font-weight:600;font-size:.78rem;text-decoration:none;color:var(--text);white-space:nowrap;
  border:1px solid transparent;transition:.18s;cursor:pointer;background:transparent;
}
.nav-link2:hover{background:color-mix(in srgb,var(--accent-1) 16%,transparent);transform:translateY(-1px)}
.nav-link2.active{
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;
  box-shadow:0 8px 18px -8px var(--accent-1);
}
.has-sub{position:relative}
.has-sub .caret{font-size:.65rem;transition:transform .2s}
.has-sub:hover .caret,.has-sub.open .caret{transform:rotate(180deg)}
.submenu{
  position:absolute;top:100%;left:0;min-width:222px;padding:10px;margin-top:10px;display:none;
  flex-direction:column;gap:3px;z-index:1200;
}
/* invisible hover bridge so the menu doesn't vanish when crossing the gap */
.has-sub::after{content:"";position:absolute;top:100%;left:0;width:100%;height:14px;display:none}
.has-sub:hover::after{display:block}
.has-sub:hover .submenu,.has-sub.open .submenu,.submenu.open{display:flex;animation:subIn .18s ease}
@keyframes subIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}
.submenu a{padding:8px 11px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.8rem;
  display:flex;align-items:center;gap:9px;transition:.15s}
.submenu a i{width:18px;text-align:center;color:var(--accent-1)}
.submenu a:hover{background:color-mix(in srgb,var(--accent-1) 16%,transparent);transform:translateX(3px)}
.header-tools{display:flex;align-items:center;gap:8px}
.icon-btn{
  width:42px;height:42px;border-radius:13px;border:1px solid var(--border);
  background:var(--surface);display:grid;place-items:center;cursor:pointer;color:var(--text);
  transition:.18s;font-size:1rem;
}
.icon-btn:hover{transform:translateY(-2px) rotate(-4deg);color:var(--accent-1)}
.user-chip{display:flex;align-items:center;gap:0;padding:5px;border-radius:50%;font-weight:600;font-size:.86rem;cursor:pointer}
.user-chip .uname{display:none}
.user-chip .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));font-size:.82rem;font-weight:800}
/* profile dropdown */
.profile-menu{position:relative}
.profile-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:210px;padding:8px;display:none;
  flex-direction:column;gap:3px;z-index:1300}
.profile-menu.open .profile-pop{display:flex;animation:subIn .18s ease}
.pp-head{display:flex;align-items:center;gap:11px;padding:8px 10px 11px;border-bottom:1px solid var(--border);margin-bottom:6px}
.av.lg{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:1.05rem;font-weight:800;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2))}
.pp-name{font-weight:800;font-size:.92rem}
.profile-pop a{padding:9px 11px;border-radius:10px;text-decoration:none;font-weight:600;font-size:.84rem;
  display:flex;align-items:center;gap:9px;color:var(--text);transition:.15s}
.profile-pop a i{width:18px;text-align:center;color:var(--accent-1)}
.profile-pop a:hover{background:color-mix(in srgb,var(--accent-1) 14%,transparent);transform:translateX(2px)}
.pp-logout{color:#ef4444!important}
.pp-logout i{color:#ef4444!important}
.pp-logout:hover{background:color-mix(in srgb,#ef4444 12%,transparent)!important}
.hamburger{display:none}

/* ---------------- Layout ---------------- */
.wrap{max-width:1460px;margin:0 auto;padding:4px 10px 44px}
.page-title{display:flex;align-items:center;gap:14px;margin:18px 6px 22px}
.page-title .tag{
  width:54px;height:54px;border-radius:17px;display:grid;place-items:center;color:#fff;font-size:1.35rem;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));
  box-shadow:0 14px 30px -12px var(--accent-1), inset 0 1px 0 rgba(255,255,255,.5);
}
.page-title h1{margin:0;font-size:1.5rem}
.page-title p{margin:2px 0 0;color:var(--muted);font-size:.9rem}

/* Left form / right table split on desktop.
   The row stretches so the table panel always ends level with the form. When the form is
   short the panel still holds a commanding minimum height rather than collapsing to a
   two-row stub. */
.split{display:grid;grid-template-columns:325px 1fr;gap:12px;align-items:start}
.split>.panel{display:flex;flex-direction:column}
.split>.panel>.dt{flex:1;min-height:0;display:flex;flex-direction:column}
/* the scroller's exact height is set by BRDB.syncSplitHeights() so the table ends level
   with the form; --tbl-min is the floor that keeps it prominent beside a short form */
.split>.panel>.dt>.table-scroll{max-height:none;min-height:var(--tbl-min)}
@media(max-width:1100px){
  .split{grid-template-columns:1fr}
  .split>.panel>.dt>.table-scroll{height:auto!important;max-height:var(--tbl-h);min-height:0}
}

/* watermark on tiles */
.tile,.panel{position:relative;overflow:hidden}
.tile .wm,.panel .wm{
  position:absolute;right:-10px;bottom:-22px;font-size:7rem;opacity:.07;pointer-events:none;
  color:var(--accent-1);transform:rotate(-12deg);
}
.panel{padding:16px}
/* entrance animations */
.wrap>.panel,.wrap>.split,.wrap>.cards,.wrap>.grid-2,.wrap>.center-wrap{animation:fadeUp .35s ease both}
.split>*{animation:fadeUp .4s ease both}
.split>*:nth-child(2){animation-delay:.06s}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cards .tile{animation:fadeUp .4s ease both}
.cards .tile:nth-child(2){animation-delay:.05s}.cards .tile:nth-child(3){animation-delay:.1s}
.cards .tile:nth-child(4){animation-delay:.15s}.cards .tile:nth-child(5){animation-delay:.2s}
.cards .tile:nth-child(6){animation-delay:.25s}

/* ---------------- Dashboard cards ---------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.tile{padding:20px;transition:.25s;transform-style:preserve-3d}
.tile:hover{transform:translateY(-6px) rotateX(4deg) rotateY(-4deg);box-shadow:var(--shadow)}
.tile .ico{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;color:#fff;font-size:1.2rem;margin-bottom:12px;
  background:linear-gradient(135deg,var(--c1,var(--accent-1)),var(--c2,var(--accent-2)));
  box-shadow:0 10px 22px -10px var(--c1,var(--accent-1));
}
/* the tile sizes its own text: a seven-figure rupee value will not fit at 1.7rem in a
 220px tile, and clipping a money figure is worse than setting it a little smaller */
.tile{container-type:inline-size}
.tile .lbl{color:var(--muted);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .val{font-family:var(--font-display);font-size:clamp(1.05rem,11.5cqi,1.7rem);font-weight:800;margin-top:4px;
  white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:-.015em}
.tile .sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tile .sub{font-size:.8rem;color:var(--muted);margin-top:4px}
.report-bar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.report-bar .field{margin-bottom:0;min-width:150px}
.report-bar .field select.ctrl{min-width:190px}
/* report charts */
.chart-area{position:relative;height:300px}
.chart-area canvas{max-height:300px}
.chart-2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;height:300px}
.chart-2>div{position:relative;min-width:0}
@media(max-width:820px){.chart-2{grid-template-columns:1fr;height:auto}.chart-2>div{height:260px}}
/* overall report sections — each its own coloured card */
.ov-sec{--sc:var(--accent-1);margin-bottom:18px;padding:14px 16px;border-radius:16px;
  background:var(--surface);border:1px solid color-mix(in srgb,var(--sc) 30%,var(--border));
  border-left:5px solid var(--sc);
  box-shadow:0 14px 30px -16px color-mix(in srgb,var(--sc) 70%,transparent),0 4px 12px -8px rgba(0,0,0,.25)}
.ov-sec:last-child{margin-bottom:0}
.ov-head{display:flex;align-items:center;gap:10px;font-weight:800;font-size:.98rem;margin-bottom:10px;color:var(--sc)}
.ov-ico{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:#fff;flex:none;
  background:linear-gradient(135deg,var(--sc),color-mix(in srgb,var(--sc) 55%,#000))}
.ov-count{font-size:.72rem;font-weight:800;background:color-mix(in srgb,var(--sc) 16%,transparent);
  color:var(--sc);padding:2px 10px;border-radius:99px}
.ov-total{margin-left:auto;font-family:var(--font-display);font-weight:800;font-size:1rem;color:var(--sc)}
.ov-sec .table-scroll{border-color:color-mix(in srgb,var(--sc) 22%,var(--border))}
.ov-sec table.data tfoot td{border-top-color:var(--sc)}
/* dashboard filter bar */
.dash-filter{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:12px 18px;margin-bottom:18px}
.dash-filter .df-left{font-size:.95rem}.dash-filter .df-left i{color:var(--accent-1)}
.dash-filter .df-left b{font-family:var(--font-display)}
.dash-filter .df-right{display:flex;gap:8px;align-items:center}
.dash-filter .ctrl{width:auto;min-width:120px}
/* mini stat chips */
.mini-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-top:18px}
.ms{display:flex;align-items:center;gap:13px;padding:14px 16px}
.ms>i{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-size:1rem;color:#fff;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));flex:none}
.ms{container-type:inline-size;min-width:0}
.ms>div{min-width:0}
.ms-v{font-family:var(--font-display);font-weight:800;font-size:clamp(.95rem,8cqi,1.2rem);
  white-space:nowrap;font-variant-numeric:tabular-nums}
.ms-l{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-l{font-size:.78rem;color:var(--muted)}
/* mini list (top vendors) */
.mini-list{display:flex;flex-direction:column;gap:2px;max-height:280px;overflow:auto}
.ml-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;border-radius:11px;transition:.14s}
.ml-row:hover{background:color-mix(in srgb,var(--accent-1) 10%,transparent)}
.ml-row b{font-family:var(--font-display);color:#ef4444}
.panel.full{width:100%}
.cards+.panel.full{margin-top:18px}
.grid-2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px;margin-top:18px}
@media(max-width:900px){.grid-2{grid-template-columns:1fr}}

/* ---------------- Forms ---------------- */
.form-card{padding:16px;position:sticky;top:84px}
.field{margin-bottom:8px}
.field label{display:block;font-size:.7rem;font-weight:700;color:var(--muted);margin-bottom:3px;text-transform:uppercase;letter-spacing:.03em}
.ctrl{
  width:100%;padding:6px 10px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface-strong);color:var(--text);font-size:.84rem;font-family:inherit;transition:.15s;line-height:1.35;
}
.ctrl:focus{outline:none;border-color:var(--accent-1);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-1) 20%,transparent)}
textarea.ctrl{resize:vertical;min-height:50px}
.switch{display:flex;align-items:center;gap:9px;padding:7px 11px;border-radius:10px;background:var(--surface-strong);border:1px solid var(--border);cursor:pointer;font-size:.82rem}
.switch input{width:42px;height:24px;appearance:none;background:#cbd5e1;border-radius:99px;position:relative;cursor:pointer;transition:.2s}
.switch input:checked{background:linear-gradient(135deg,var(--accent-1),var(--accent-2))}
.switch input::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:.2s}
.switch input:checked::after{left:20px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:9px 15px;border-radius:11px;
  font-weight:700;font-size:.88rem;border:none;cursor:pointer;font-family:inherit;transition:.18s;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));box-shadow:0 10px 22px -10px var(--accent-1);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px var(--accent-1)}
.btn:active{transform:translateY(0)}
.btn.ghost{background:var(--surface-strong);color:var(--text);border:1px solid var(--border);box-shadow:none}
.btn.ghost:hover{color:var(--accent-1)}
.btn.sm{padding:7px 12px;font-size:.82rem;border-radius:10px}
.btn.danger{background:linear-gradient(135deg,#ef4444,#f97316)}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
/* icon-only toolbar buttons */
.tbtn{width:36px;height:36px;border-radius:11px;border:1px solid var(--border);background:var(--surface-strong);
  display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.18s;font-size:.92rem;position:relative}
.tbtn:hover{color:#fff;transform:translateY(-2px)}
.tbtn.imp:hover{background:linear-gradient(135deg,#10b981,#14b8a6);border-color:transparent}
.tbtn.exp:hover{background:linear-gradient(135deg,#6366f1,#22d3ee);border-color:transparent}
.tbtn.pdf:hover{background:linear-gradient(135deg,#ef4444,#f43f5e);border-color:transparent}
.tbtn.prn:hover{background:linear-gradient(135deg,#f59e0b,#f97316);border-color:transparent}
.tbtn[data-tip]:hover::after{content:attr(data-tip);position:absolute;bottom:-30px;right:0;white-space:nowrap;
  background:var(--text);color:var(--bg);padding:4px 9px;border-radius:7px;font-size:.7rem;font-weight:700;z-index:40}

/* ---------------- Tables ---------------- */
.panel-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.panel-head h3{margin:0;font-size:1.1rem;flex:1}
.search-box{position:relative;flex:1;min-width:180px;max-width:320px}
.search-box i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search-box input{padding-left:38px}
.toolbar{display:flex;gap:7px;flex-wrap:wrap}

.table-scroll{max-height:var(--tbl-h);overflow:auto;border-radius:14px;border:1px solid var(--border);
  background:color-mix(in srgb,var(--surface-strong) 35%,transparent)}
/* colorful modern scrollbars */
.table-scroll::-webkit-scrollbar,.ac-list::-webkit-scrollbar,body::-webkit-scrollbar,
.alloc-rows::-webkit-scrollbar,.vlist::-webkit-scrollbar,.due-body::-webkit-scrollbar{width:11px;height:11px}
.table-scroll::-webkit-scrollbar-track,.ac-list::-webkit-scrollbar-track,
.alloc-rows::-webkit-scrollbar-track,.vlist::-webkit-scrollbar-track,.due-body::-webkit-scrollbar-track{background:color-mix(in srgb,var(--accent-1) 6%,transparent);border-radius:99px}
.table-scroll::-webkit-scrollbar-thumb,.ac-list::-webkit-scrollbar-thumb,
.alloc-rows::-webkit-scrollbar-thumb,.vlist::-webkit-scrollbar-thumb,.due-body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,var(--accent-1),var(--accent-2));border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.table-scroll::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--accent-2),var(--accent-1))}
body::-webkit-scrollbar-track{background:transparent}
body::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent-1),var(--accent-2));border-radius:99px}
*{scrollbar-width:thin;scrollbar-color:var(--accent-1) transparent}
table.data{width:100%;border-collapse:separate;border-spacing:0;font-size:.8rem;min-width:560px}
table.data thead th{
  position:sticky;top:0;z-index:5;background:var(--surface-strong);backdrop-filter:blur(8px);
  text-align:left;padding:6px 10px;font-size:.68rem;font-weight:800;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;cursor:pointer;user-select:none;white-space:nowrap;
  border-bottom:1px solid var(--border);
}
table.data thead th:hover{color:var(--accent-1)}
table.data thead th .fi{margin-left:5px;opacity:.5;font-size:.7rem}
table.data thead th.filtered{color:var(--accent-1)}
table.data thead th.filtered .fi{opacity:1;color:var(--accent-1)}
table.data tbody td{padding:5px 10px;border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent);white-space:nowrap}
table.data tbody tr{transition:.12s;animation:rowIn .25s ease both}
table.data tbody tr:nth-child(even){background:color-mix(in srgb,var(--accent-1) 5%,transparent)}
@keyframes rowIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
table.data tbody tr:hover{background:color-mix(in srgb,var(--accent-1) 12%,transparent)}
table.data tbody tr.sel,table.data tbody tr.sel:nth-child(even),table.data tbody tr.sel:hover{
  background:color-mix(in srgb,var(--accent-1) 26%,transparent)}
table.data tbody tr.sel td{border-bottom-color:color-mix(in srgb,var(--accent-1) 55%,transparent)}
table.data tbody tr.sel td:first-child{box-shadow:inset 3px 0 0 var(--accent-1)}
table.data tfoot td{
  position:sticky;bottom:0;z-index:6;background:var(--surface-strong);padding:7px 10px;font-weight:800;
  border-top:2px solid var(--accent-1);font-family:var(--font-display);box-shadow:0 -2px 8px -4px rgba(0,0,0,.2);
}
.row-act{display:flex;gap:4px}
.ia{width:26px;height:26px;border-radius:8px;border:1px solid var(--border);background:var(--surface-strong);
  display:grid;place-items:center;cursor:pointer;color:var(--muted);transition:.15s;font-size:.76rem}
.ia:hover{color:#fff;transform:translateY(-2px)}
.ia.edit:hover{background:var(--accent-1);border-color:var(--accent-1)}
.ia.del:hover{background:#ef4444;border-color:#ef4444}
.ia.view:hover{background:#10b981;border-color:#10b981}
.ia.has{color:#10b981;border-color:#10b981}
.empty{padding:40px;text-align:center;color:var(--muted)}
.badge{padding:3px 10px;border-radius:99px;font-size:.74rem;font-weight:700;color:#fff;
  background:color-mix(in srgb,var(--accent-1) 18%,transparent)}

/* access checkbox grid */
.user-form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:8px}
.acl-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin:6px 0 10px}
.acl-quick{display:flex;gap:6px;flex-wrap:wrap}
.acl-matrix{border:1px solid var(--border);border-radius:13px;overflow:hidden}
.acl-row{display:grid;grid-template-columns:2fr .8fr .8fr .8fr .8fr;align-items:center;
  padding:7px 14px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent)}
.acl-row:last-child{border-bottom:none}
.acl-row span{text-align:center;font-size:.85rem}
.acl-row span:first-child{text-align:left}
.acl-colhead{background:var(--surface-strong);font-weight:800;font-size:.72rem;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted)}
.acl-colhead span{cursor:help}
.acl-group{background:color-mix(in srgb,var(--accent-1) 9%,transparent);padding:6px 14px;font-weight:800;
  font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;color:var(--accent-1)}
.acl-name{font-weight:600}
.acl-row .acc{width:18px;height:18px;accent-color:var(--accent-1);cursor:pointer}
.acl-na{opacity:.3;font-style:normal}
.acl-row[data-page]{transition:background .14s}
.acl-row[data-page]:hover{background:color-mix(in srgb,var(--accent-1) 7%,transparent)}
/* column and section headers double as bulk toggles */
.acl-colbtn,.acl-gbtn{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:inherit;
  letter-spacing:inherit;text-transform:inherit;transition:color .15s}
.acl-colbtn:hover,.acl-gbtn:hover{color:var(--accent-1);text-decoration:underline}
.acl-gbtn{display:inline-flex;align-items:center;gap:7px}
.acl-count{margin-left:8px;padding:2px 9px;border-radius:99px;font-size:.7rem;font-weight:700;
  text-transform:none;letter-spacing:0;color:var(--accent-1);
  background:color-mix(in srgb,var(--accent-1) 14%,transparent)}
.acl-count.warn{color:#f59e0b;background:color-mix(in srgb,#f59e0b 15%,transparent)}
.acl-search{position:relative;margin-bottom:9px}
.acl-search i{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:.8rem}
.acl-search .ctrl{padding-left:32px}
.acl-empty{display:none;padding:20px;text-align:center;color:var(--muted);font-size:.84rem}
.ctrl.sm{width:auto;padding:5px 9px;font-size:.78rem}

/* active / disabled switch on the user form */
.switch-row{display:flex;align-items:center;gap:12px;margin:4px 0 14px;padding:11px 14px;cursor:pointer;
  border-radius:13px;background:var(--surface-strong);border:1px solid var(--border);transition:.18s}
.switch-row:hover{border-color:var(--accent-1)}
.switch-row input{position:absolute;opacity:0;width:0;height:0}
.switch-row .sw{flex:none;width:42px;height:24px;border-radius:99px;background:var(--border);position:relative;transition:.22s}
.switch-row .sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:.22s var(--ease);box-shadow:0 1px 4px rgba(0,0,0,.3)}
.switch-row input:checked + .sw{background:#10b981}
.switch-row input:checked + .sw::after{transform:translateX(18px)}
.switch-row .sw-txt{display:flex;flex-direction:column;gap:1px;font-size:.85rem}
.switch-row .sw-txt small{color:var(--muted);font-size:.74rem}

/* user table cells */
.u-you{margin-left:5px;padding:1px 7px;border-radius:99px;font-size:.66rem;font-weight:800;
  color:var(--accent-1);background:color-mix(in srgb,var(--accent-1) 16%,transparent)}
.u-none{font-size:.76rem;color:#f59e0b;font-weight:700}
.u-never{font-size:.76rem;color:var(--muted);font-style:italic}
.u-stale{color:#f59e0b}
.u-chips{display:inline-flex;gap:4px;align-items:center;flex-wrap:nowrap}
.u-chip{padding:2px 8px;border-radius:99px;font-size:.7rem;font-weight:600;
  background:color-mix(in srgb,var(--accent-1) 13%,transparent);color:var(--text-dim);
  max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.u-chip.more{background:var(--surface-strong);color:var(--muted);font-weight:800}
.u-status{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:99px;cursor:pointer;
  font-size:.72rem;font-weight:700;font-family:inherit;transition:.16s;
  border:1px solid color-mix(in srgb,#ef4444 40%,transparent);
  background:color-mix(in srgb,#ef4444 12%,transparent);color:#ef4444}
.u-status.on{border-color:color-mix(in srgb,#10b981 40%,transparent);
  background:color-mix(in srgb,#10b981 12%,transparent);color:#10b981}
.u-status:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.12)}
.u-status:disabled{cursor:not-allowed;opacity:.55}

.access-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:6px}
.chip-check{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:11px;cursor:pointer;
  background:var(--surface-strong);border:1px solid var(--border);transition:.18s;font-size:.86rem;font-weight:600}
.chip-check:hover{border-color:var(--accent-1)}
.chip-check input{width:18px;height:18px;accent-color:var(--accent-1);cursor:pointer}
.chip-check:has(input:checked){border-color:var(--accent-1);
  background:color-mix(in srgb,var(--accent-1) 14%,transparent)}

/* change-password layout */
.center-wrap{position:relative;display:flex;justify-content:center;padding:10px 0 40px}
.center-wrap .wm-lg{position:absolute;right:6%;bottom:-10px;font-size:13rem;opacity:.05;pointer-events:none;z-index:0}
.pw-meter{height:7px;border-radius:99px;background:var(--surface-strong);overflow:hidden;margin:2px 0 18px}
.pw-meter span{display:block;height:100%;width:0;border-radius:99px;transition:width .25s,background .25s}


/* selection bar — appears only once rows are picked with Ctrl+click */
.sel-bar{display:none;align-items:center;gap:10px;padding:9px 14px;margin-bottom:12px;border-radius:13px;
  background:color-mix(in srgb,var(--accent-1) 13%,var(--surface));
  border:1px solid color-mix(in srgb,var(--accent-1) 42%,transparent);
  box-shadow:0 6px 18px color-mix(in srgb,var(--accent-1) 16%,transparent)}
.sel-bar.show{display:flex;flex-wrap:wrap;animation:selIn .2s var(--ease)}
@keyframes selIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.sel-bar .sb-n{display:inline-flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text-dim);white-space:nowrap}
.sel-bar .sb-n b{font-size:1rem;color:var(--accent-1)}
.sel-bar .sb-sum{flex:1 1 auto;min-width:0;font-size:.78rem;color:var(--text-dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-bar .sb-sum b{color:var(--text);font-variant-numeric:tabular-nums}
.sel-bar .btn{flex:none}

/* picked rows */
table.data tbody tr.selectable{cursor:default}
table.data tbody tr.selectable:hover{background:color-mix(in srgb,var(--accent-1) 6%,transparent)}

/* ---------------- Filter dropdown ---------------- */
.filter-pop{
  position:absolute;z-index:1400;width:288px;padding:16px;display:none;
}
.filter-pop.show{display:block;animation:pop .14s ease}
@keyframes pop{from{opacity:0;transform:translateY(-6px) scale(.97)}to{opacity:1}}
.fp-sec{margin-bottom:12px}
.fp-sec h6{margin:0 0 7px;font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.fp-row{display:flex;gap:7px;flex-wrap:wrap}
.fp-lbl{font-size:.72rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:8px 0 5px}
.chip{padding:6px 11px;border-radius:10px;font-size:.78rem;font-weight:700;cursor:pointer;
  border:1px solid var(--border);background:var(--surface-strong);transition:.13s}
.chip.on{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;border-color:transparent}
.fp-btns{display:flex;gap:7px;margin-top:6px}

/* ---------------- Autocomplete ---------------- */
.ac-wrap{position:relative}
.ac-list{position:fixed;z-index:4000;max-height:220px;overflow:auto;
  padding:6px;display:none;box-shadow:0 18px 40px -12px rgba(0,0,0,.35)}
.ac-list.show{display:block}
.ac-item{padding:8px 11px;border-radius:9px;cursor:pointer;font-size:.86rem}
.ac-item:hover,.ac-item.hot{background:color-mix(in srgb,var(--accent-1) 16%,transparent)}

/* ---------------- Login ---------------- */
.login-body{overflow-x:hidden}
.login-stage{min-height:100vh;display:grid;place-items:center;padding:20px;position:relative;z-index:1}

/* slow drifting colour behind the glass */
.login-orbs{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.login-orbs span{position:absolute;border-radius:50%;filter:blur(58px);opacity:.55}
.login-orbs span:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-12vw;
  background:radial-gradient(circle,var(--accent-1),transparent 68%);animation:orb1 20s ease-in-out infinite}
.login-orbs span:nth-child(2){width:40vw;height:40vw;right:-8vw;top:8vh;
  background:radial-gradient(circle,var(--accent-2),transparent 68%);animation:orb2 24s ease-in-out infinite}
.login-orbs span:nth-child(3){width:38vw;height:38vw;left:26vw;bottom:-16vw;
  background:radial-gradient(circle,var(--bg2),transparent 68%);animation:orb3 28s ease-in-out infinite}
@keyframes orb1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(7vw,5vh) scale(1.12)}}
@keyframes orb2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-6vw,7vh) scale(1.08)}}
@keyframes orb3{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(4vw,-6vh) scale(1.15)}}

.login-theme{position:fixed;top:18px;right:18px;z-index:3}

.login-shell{
  width:100%;max-width:920px;display:grid;grid-template-columns:1.05fr 1fr;overflow:hidden;
  border-radius:26px;animation:loginIn .5s var(--ease) both;
}
@keyframes loginIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

/* ---- left: brand panel ---- */
.login-brand{
  position:relative;padding:38px 34px;color:#fff;overflow:hidden;
  background:linear-gradient(150deg,var(--accent-1),var(--accent-2));
  display:flex;flex-direction:column;
}
.login-brand::after{content:"";position:absolute;inset:0;
  background:radial-gradient(70% 50% at 15% 0%,rgba(255,255,255,.28),transparent 60%)}
.login-brand>*{position:relative;z-index:1}
/* wordmark, masked so it paints solid white on the gradient panel at any size */
.lb-mark{display:block;width:min(100%,178px);aspect-ratio:720/663;margin:0 0 10px -3px;
  -webkit-mask:url(assets/logo.png) left center/contain no-repeat;
          mask:url(assets/logo.png) left center/contain no-repeat;
  background:#fff;filter:drop-shadow(0 6px 18px rgba(0,0,0,.3))}
@media(max-width:820px){.lb-mark{width:min(100%,140px);margin-bottom:6px}}
.lb-top{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.login-brand h1{margin:0;font-size:1.7rem;letter-spacing:-.02em;color:#fff}
.lb-place{font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;opacity:.85}
.lb-tag{margin:0 0 26px;font-size:.94rem;font-weight:600;opacity:.95;line-height:1.4}
.lb-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;flex:1}
.lb-points li{display:flex;align-items:flex-start;gap:12px;font-size:.85rem;line-height:1.45;opacity:.96}
.lb-points i{
  width:30px;height:30px;flex:0 0 30px;border-radius:10px;display:grid;place-items:center;font-size:.8rem;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
}
.lb-foot{margin-top:24px;font-size:.74rem;opacity:.85;display:flex;align-items:center;gap:8px}
.lb-wm{position:absolute;right:-18px;bottom:-26px;font-size:9rem;opacity:.09;z-index:0;line-height:1}

/* ---- right: the form ---- */
.login-form{padding:40px 38px;display:flex;flex-direction:column;justify-content:center}
.login-form h2{margin:0 0 5px;font-size:1.42rem;font-family:var(--font-display);letter-spacing:-.02em}
.lf-sub{margin:0 0 24px;color:var(--muted);font-size:.87rem}
.login-form .field{margin-bottom:15px}
.login-form label{font-size:.68rem}
.input-wrap{position:relative;display:flex;align-items:center}
.input-wrap>i{position:absolute;left:13px;color:var(--muted);font-size:.85rem;pointer-events:none;transition:color .18s}
.input-wrap .ctrl{padding:11px 13px 11px 39px;font-size:.9rem;border-radius:12px}
.input-wrap:focus-within>i{color:var(--accent-1)}
.pw-eye{
  position:absolute;right:6px;width:30px;height:30px;border:0;border-radius:9px;background:transparent;
  color:var(--muted);cursor:pointer;display:grid;place-items:center;font-size:.85rem;transition:.15s;
}
.pw-eye:hover{color:var(--accent-1);background:color-mix(in srgb,var(--accent-1) 12%,transparent)}
.login-btn{width:100%;margin-top:10px;padding:12px 16px;font-size:.94rem;border-radius:12px}
.login-btn:disabled{opacity:.75;cursor:progress}
.lf-error{
  display:flex;align-items:center;gap:9px;margin-bottom:16px;padding:11px 13px;border-radius:12px;
  font-size:.84rem;font-weight:600;color:#ef4444;
  background:color-mix(in srgb,#ef4444 12%,transparent);
  border:1px solid color-mix(in srgb,#ef4444 35%,transparent);
  animation:shake .4s var(--ease);
}
@keyframes shake{0%,100%{transform:translateX(0)}22%{transform:translateX(-6px)}62%{transform:translateX(5px)}}
.lf-foot{margin:22px 0 0;text-align:center;font-size:.72rem;color:var(--muted)}

@media(max-width:820px){
  .login-shell{grid-template-columns:1fr;max-width:430px}
  .login-brand{padding:26px 26px 22px}
  .lb-points{display:none}          /* keep the sign-in box above the fold on a phone */
  .lb-tag{margin-bottom:0}
  .lb-foot{display:none}
  .login-form{padding:28px 26px 32px}
}

/* ---------------- Reports ---------------- */
.report-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.daterange{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:16px}
.daterange .field{margin:0;min-width:150px}

/* ---------------- Misc / print ---------------- */
.spin{display:inline-block;width:18px;height:18px;border:3px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.hidden{display:none!important}

/* import result dialog */
.imp-result{text-align:left}
.imp-counts{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.imp-counts .ic{padding:6px 12px;border-radius:10px;font-size:.85rem;font-weight:700}
.imp-counts .ic b{font-family:var(--font-display)}
.ic.ok{background:color-mix(in srgb,#10b981 16%,transparent);color:#10b981}
.ic.skip{background:color-mix(in srgb,#ef4444 16%,transparent);color:#ef4444}
.ic.tot{background:color-mix(in srgb,var(--accent-1) 14%,transparent);color:var(--accent-1)}
.imp-tablewrap{max-height:280px;overflow:auto;border:1px solid var(--border);border-radius:11px;margin-bottom:12px}
.imp-table{width:100%;border-collapse:collapse;font-size:.82rem}
.imp-table th{position:sticky;top:0;background:var(--surface-strong);text-align:left;padding:7px 10px;font-size:.72rem;
  text-transform:uppercase;letter-spacing:.03em;color:var(--muted);font-weight:800}
.imp-table td{padding:6px 10px;border-top:1px solid color-mix(in srgb,var(--border) 50%,transparent);white-space:nowrap}
.imp-table td:nth-child(3){white-space:normal}
.ir-imported td{color:var(--text)}
.ir-skipped{background:color-mix(in srgb,#ef4444 7%,transparent)}
.ir-skipped td{color:#ef4444}

/* ---------------- Bill picker / camera / crop ---------------- */
.pick-choice{display:flex;gap:12px;justify-content:center;padding:6px 0}
.pick-choice .btn{flex:1;padding:18px 10px;flex-direction:column;gap:9px;font-size:.92rem}
.pick-choice .btn i{font-size:1.5rem}
.cam-wrap,.crop-wrap{max-height:60vh;border-radius:12px;overflow:hidden;background:#0b1020;display:flex;justify-content:center}
.cam-wrap video{width:100%;display:block}
.crop-wrap img{max-width:100%;display:block}
.crop-tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-top:12px}

/* ---------------- Stock status badge ---------------- */
.stat-badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:99px;font-size:.72rem;font-weight:800;
  color:var(--sc);background:color-mix(in srgb,var(--sc) 15%,transparent);border:1px solid color-mix(in srgb,var(--sc) 35%,transparent)}

/* ---------------- UI polish ---------------- */
.preset-row{display:flex;gap:6px;flex-wrap:wrap}
.preset-row .btn{padding:5px 11px;font-size:.76rem}
.panel-head h3,.form-card h3{display:flex;align-items:center;gap:9px}
.panel-head h3 i,.form-card h3 i{color:var(--accent-1)}
.btn{position:relative;overflow:hidden}
.btn:not(.ghost)::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s}
.btn:not(.ghost):hover::after{transform:translateX(120%)}
.glass{transition:box-shadow .25s,transform .25s,border-color .25s}
.panel:hover{border-color:color-mix(in srgb,var(--accent-1) 30%,var(--border))}
/* tiles */
.tile{border-top:none;cursor:default}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--c1,var(--accent-1)),var(--c2,var(--accent-2)))}
.tile:hover{transform:translateY(-4px);box-shadow:0 18px 38px -18px var(--accent-1)}
.tile .val{background:linear-gradient(120deg,var(--text),color-mix(in srgb,var(--text) 60%,var(--accent-1)));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.page-title h1{background:linear-gradient(120deg,var(--accent-1),var(--accent-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ia.up{color:#0ea5e9;border-color:color-mix(in srgb,#0ea5e9 40%,var(--border))}
.ia.up:hover{background:#0ea5e9;color:#fff}
.ia.view.has{color:#10b981;border-color:color-mix(in srgb,#10b981 40%,var(--border))}
.ia.view.has:hover{background:#10b981;color:#fff}
.ia.expand{color:var(--accent-1);border-color:color-mix(in srgb,var(--accent-1) 40%,var(--border))}
.ia.expand:hover{background:var(--accent-1);color:#fff}
.ia.expand.open i{transform:rotate(180deg)}
.ia.expand i{transition:transform .2s}

/* report drill-down detail rows */
.detail-row td{padding:0!important;background:color-mix(in srgb,var(--accent-1) 6%,transparent)}
.detail-row:hover td{background:color-mix(in srgb,var(--accent-1) 6%,transparent)!important}
.detail-box{padding:12px 16px;animation:fadeUp .25s ease both}
.detail-loading{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:.85rem}
.detail-loading .spin{border-color:color-mix(in srgb,var(--accent-1) 35%,transparent);border-top-color:var(--accent-1)}
.detail-title{font-weight:800;font-size:.88rem;margin-bottom:8px;display:flex;align-items:center;gap:8px;color:var(--accent-1)}
.detail-sub{font-weight:800;font-size:.84rem;margin:12px 0 8px;display:flex;align-items:center;gap:8px;color:var(--accent-2);
  border-top:1px dashed var(--border);padding-top:10px}
.detail-head{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.8rem;color:var(--muted);
  padding:6px 10px;margin-bottom:8px;border-radius:9px;background:var(--surface-strong)}
.detail-empty{padding:10px;color:var(--muted);font-size:.84rem}
.d-day{margin-bottom:10px}
.d-date{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.78rem;color:var(--text);
  padding:5px 9px;border-radius:8px;background:color-mix(in srgb,var(--accent-1) 10%,transparent);margin-bottom:4px}
.d-date b{margin-left:auto;font-family:var(--font-display)}
.d-row{display:flex;justify-content:space-between;gap:12px;padding:4px 12px;font-size:.82rem;border-bottom:1px dashed color-mix(in srgb,var(--border) 50%,transparent)}
.d-row:last-child{border-bottom:none}
.d-desc{color:var(--text)}.d-desc em{color:var(--muted);font-style:normal}
.d-amt{font-weight:700;white-space:nowrap;font-family:var(--font-display)}
.d-chart{margin:2px 0 12px;padding:8px 10px;border-radius:10px;background:var(--surface-strong)}
.d-chart svg rect{transition:opacity .15s}
.d-chart svg rect:hover{opacity:.7}
.mv{display:inline-block;padding:1px 8px;border-radius:99px;font-size:.7rem;font-weight:800;margin-right:4px}
.mv.in{color:#10b981;background:color-mix(in srgb,#10b981 16%,transparent)}
.mv.out{color:#ef4444;background:color-mix(in srgb,#ef4444 16%,transparent)}

/* ================= Refinement pass: hierarchy, rhythm, motion ================= */

/* content settles in on load instead of snapping into place */
@keyframes pageIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wrap>*{animation:pageIn .38s var(--ease) both}
.wrap>*:nth-child(2){animation-delay:.04s}
.wrap>*:nth-child(3){animation-delay:.08s}
.wrap>*:nth-child(4){animation-delay:.12s}
.wrap>*:nth-child(n+5){animation-delay:.16s}

/* page heading: tighter, with a rule that ties it to the accent */
.page-title{margin:12px 2px 14px;padding-bottom:11px;gap:12px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent)}
.page-title .tag{width:46px;height:46px;border-radius:14px;font-size:1.15rem}
.page-title .tag{box-shadow:0 14px 30px -12px var(--accent-1),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .3s var(--ease)}
.page-title:hover .tag{transform:rotate(-6deg) scale(1.04)}
.page-title h1{font-size:1.55rem;line-height:1.15}

/* panel headers: title anchored left, search and tools trailing right */
.panel-head{gap:9px;padding-bottom:9px;margin-bottom:11px;
  border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent)}
.panel-head h3{font-size:.96rem;font-weight:800;flex:0 1 auto;margin-right:auto}
.panel-head h3 i{font-size:.92em;opacity:.9}
.search-box{flex:0 1 300px;min-width:170px}
.search-box .ctrl{border-radius:10px}
.toolbar{gap:6px}

/* panels lift very slightly on hover — presence without fidget */
.panel{transition:box-shadow .28s var(--ease),border-color .28s var(--ease)}
.panel:hover{box-shadow:0 22px 50px -22px color-mix(in srgb,var(--accent-1) 55%,rgba(30,41,59,.5))}

/* form card: compact, with clear grouping */
.form-card{padding:13px 14px}
.form-card h3{padding-bottom:10px;margin-bottom:12px!important;font-size:.98rem;
  border-bottom:1px solid color-mix(in srgb,var(--border) 65%,transparent)}
.field{margin-bottom:9px}
.field label{margin-bottom:4px;font-size:.65rem}
.ctrl{padding:7px 10px;border-radius:9px;font-size:.8rem}
.ctrl:hover:not(:focus){border-color:color-mix(in srgb,var(--accent-1) 45%,var(--border))}
.btn-row{margin-top:12px;gap:8px}
.switch{padding:6px 10px;font-size:.78rem}

/* panels hug their content so the table gets the width instead of the gutters */
.panel{padding:12px 13px}

/* table typography: denser, so more columns fit without sideways scrolling */
table.data{font-size:.745rem;min-width:0}
table.data thead th{padding:7px 7px;font-size:.61rem;letter-spacing:.04em;
  box-shadow:inset 0 -1px 0 var(--border)}
table.data thead th .fi{margin-left:4px;font-size:.62rem;transition:opacity .15s,color .15s}
table.data tbody td{padding:5px 7px}
table.data tbody tr:nth-child(even){background:color-mix(in srgb,var(--accent-1) 4%,transparent)}
table.data tbody tr:hover{background:color-mix(in srgb,var(--accent-1) 11%,transparent)}
table.data tfoot td{padding:7px 8px;font-size:.755rem}
.badge{padding:2px 8px;font-size:.66rem}
.ia{width:23px;height:23px;border-radius:7px;font-size:.68rem}
.empty{padding:44px 18px}
.empty i{display:block;margin-bottom:4px}
.row-act{gap:4px;justify-content:flex-end}
.sel-bar{gap:8px;padding:8px 11px}
.sel-bar .sb-sum{font-size:.72rem}

/* toolbar tooltips sit below without clipping */
.tbtn[data-tip]:hover::after{bottom:-32px;box-shadow:var(--shadow-sm)}

/* respect users who ask the OS for less motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ================= Table: column fitting, cell overflow, pagination ================= */
/* Columns size themselves to their content. A column that carries long values is pinned to
   a readable width and its overflowing cells expose a "view full value" button, so one
   verbose remark can never stretch the whole table sideways. */
table.data td.clip{
  max-width:var(--clip-w);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  position:relative;padding-right:28px;
}
.ia.mini{
  width:20px;height:20px;border-radius:6px;font-size:.6rem;padding:0;
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  opacity:0;transition:opacity .15s var(--ease),background .15s,color .15s;
}
table.data tbody tr:hover .ia.mini{opacity:1}
.ia.mini:focus-visible{opacity:1;outline:2px solid var(--accent-1)}
.ia.mini:hover{background:var(--accent-1);border-color:var(--accent-1);color:#fff}
.cell-full{
  text-align:left;white-space:pre-wrap;word-break:break-word;font-size:.9rem;line-height:1.65;
  background:var(--surface-strong);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;max-height:52vh;overflow:auto;color:var(--text);
}
th.col-act,td.col-act{width:1%;white-space:nowrap}
/* a refresh after saving must not replay the entrance animation — that flicker is exactly
   what makes an in-place update feel like a full page reload */
table.data tbody.no-anim tr{animation:none}

/* ---------------- Entry modal ---------------- */
.modal{
  position:fixed;inset:0;z-index:1600;display:flex;align-items:center;justify-content:center;
  padding:20px;background:color-mix(in srgb,#0b1020 62%,transparent);
  backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;transition:opacity .2s var(--ease);
}
.modal[hidden]{display:none}
.modal.show{opacity:1}
.modal-card{
  width:min(100%,520px);max-height:calc(100vh - 40px);display:flex;flex-direction:column;
  border-radius:20px;overflow:hidden;position:relative;
  transform:translateY(14px) scale(.97);opacity:.6;
  transition:transform .24s var(--ease),opacity .24s var(--ease);
}
.modal.show .modal-card{transform:none;opacity:1}
.modal-card::before{content:'';position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2))}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none;
  padding:16px 18px 12px;border-bottom:1px solid color-mix(in srgb,var(--border) 60%,transparent);
}
.modal-head h3{margin:0;font-size:1rem;font-family:var(--font-display);display:flex;align-items:center;gap:10px}
.modal-head h3 i{color:var(--accent-1)}
.modal-x{
  width:30px;height:30px;flex:none;border-radius:10px;border:1px solid var(--border);cursor:pointer;
  background:var(--surface-strong);color:var(--muted);display:grid;place-items:center;transition:.16s;
}
.modal-x:hover{background:#ef4444;border-color:#ef4444;color:#fff;transform:rotate(90deg)}
.modal-body{padding:16px 18px;overflow-y:auto;flex:1 1 auto}
.modal-body .field:last-of-type{margin-bottom:0}
.modal-foot{
  display:flex;gap:9px;justify-content:flex-end;flex:none;padding:13px 18px;
  border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);
  background:color-mix(in srgb,var(--accent-1) 5%,transparent);
}
.modal-hint{margin-right:auto;align-self:center;font-size:.72rem;color:var(--muted)}
.modal-hint kbd{display:inline-block;padding:1px 5px;border-radius:5px;font-size:.66rem;font-weight:700;
  font-family:var(--font-body);background:var(--surface-strong);border:1px solid var(--border);color:var(--text-dim)}
body.modal-open{overflow:hidden}
@media(max-width:600px){
  .modal{padding:12px;align-items:flex-end}
  .modal-card{width:100%;max-height:88vh;border-radius:20px 20px 0 0}
  .modal-hint{display:none}
}

/* the register list now owns the whole width */
.reg-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* With the entry form moved into a dialog the list is the page, so it takes the height the
   viewport can give it instead of the 460px cap meant for a table sharing space. */
.panel.list-main>.dt>.table-scroll{max-height:calc(100vh - 330px);min-height:420px}
@media(max-width:1100px){.panel.list-main>.dt>.table-scroll{max-height:var(--tbl-h);min-height:0}}

/* ---------------- Register summary band ---------------- */
.reg-sum{margin-top:16px;padding:16px 18px 18px;position:relative;overflow:hidden}
.reg-sum::before{content:'';position:absolute;inset:0 0 auto;height:3px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2),transparent)}
.rs-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.rs-head h3{margin:0;font-size:.98rem;font-family:var(--font-display);letter-spacing:.02em;
  display:flex;align-items:center;gap:9px}
.rs-head h3 i{color:var(--accent-1)}
.rs-month{margin-left:2px;padding:2px 10px;border-radius:99px;font-size:.72rem;font-weight:800;
  letter-spacing:.02em;font-family:var(--font-body);color:var(--accent-1);
  background:color-mix(in srgb,var(--accent-1) 15%,transparent)}
.rs-stamp{font-size:.72rem;color:var(--muted)}
.rs-load{padding:26px;text-align:center;color:var(--muted);font-size:.85rem}
.rs-load.rs-err{color:#ef4444}

.rs-tiles{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.rs-tile{position:relative;padding:13px 13px 11px;border-radius:14px;overflow:hidden;
  background:color-mix(in srgb,var(--accent-1) 7%,var(--surface));
  border:1px solid color-mix(in srgb,var(--border) 75%,transparent);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
  animation:rsIn .32s var(--ease) both}
@keyframes rsIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.rs-tile:nth-child(2){animation-delay:.04s}.rs-tile:nth-child(3){animation-delay:.08s}
.rs-tile:nth-child(4){animation-delay:.12s}.rs-tile:nth-child(5){animation-delay:.16s}
.rs-tile:nth-child(6){animation-delay:.2s}
.rs-tile:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent-1) 45%,transparent);
  box-shadow:0 12px 24px -14px var(--accent-1)}
.rs-tile .rs-ic{position:absolute;right:10px;top:11px;font-size:1.5rem;opacity:.13}
.rs-tile{min-width:0}
/* a rupee total is much longer than a count, so the figure shrinks rather than spilling */
.rs-tile .rs-v{font-family:var(--font-display);font-size:clamp(1rem,1.28vw,1.32rem);font-weight:800;
  line-height:1.15;font-variant-numeric:tabular-nums;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:22px}
.rs-tile .rs-l{margin-top:3px;font-size:.78rem;font-weight:700;color:var(--text-dim)}
.rs-tile .rs-s{font-size:.68rem;color:var(--muted);margin-top:1px}
.rs-tile.t-accent{background:linear-gradient(150deg,color-mix(in srgb,var(--accent-1) 20%,var(--surface)),
  color-mix(in srgb,var(--accent-2) 14%,var(--surface)))}
.rs-tile.t-accent .rs-v{color:var(--accent-1)}
.rs-tile.t-ok    .rs-v{color:#10b981}
.rs-tile.t-warn  .rs-v{color:#f59e0b}
.rs-tile.t-bad   .rs-v{color:#ef4444}
.rs-tile.t-warn{background:color-mix(in srgb,#f59e0b 9%,var(--surface));border-color:color-mix(in srgb,#f59e0b 32%,transparent)}
.rs-tile.t-bad {background:color-mix(in srgb,#ef4444 9%,var(--surface));border-color:color-mix(in srgb,#ef4444 34%,transparent)}

.rs-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.rs-list h4{margin:0 0 8px;font-size:.76rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:800}
.rs-table{width:100%;border-collapse:collapse;font-size:.79rem}
.rs-table th{text-align:left;padding:5px 8px;font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);border-bottom:1px solid var(--border)}
.rs-table td{padding:5px 8px;border-bottom:1px solid color-mix(in srgb,var(--border) 45%,transparent)}
.rs-table tbody tr:last-child td{border-bottom:0}
.rs-table tbody tr:hover{background:color-mix(in srgb,var(--accent-1) 8%,transparent)}
.rs-table .r{text-align:right;font-variant-numeric:tabular-nums}
.rs-table td:first-child{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rs-issues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.rs-issues li{display:flex;gap:9px;align-items:flex-start;font-size:.78rem;line-height:1.45;
  padding:7px 10px;border-radius:10px;background:var(--surface-strong);
  border-left:3px solid var(--border)}
.rs-issues li i{margin-top:2px;font-size:.76rem}
.rs-issues li.i-warn{border-left-color:#f59e0b}
.rs-issues li.i-warn i{color:#f59e0b}
.rs-issues li.i-bad{border-left-color:#ef4444}
.rs-issues li.i-bad i{color:#ef4444}
.rs-none{margin:0;font-size:.79rem;color:var(--muted);padding:8px 2px}
.rs-none.rs-ok{color:#10b981;display:flex;align-items:center;gap:8px}
@media(max-width:1200px){.rs-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){
  .rs-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rs-cols{grid-template-columns:1fr}
}

/* an attention item that has records behind it invites a click */
.rs-issues li.has-detail{cursor:pointer;padding-right:30px;position:relative;
  transition:transform .16s var(--ease),box-shadow .16s var(--ease),background .16s}
.rs-issues li.has-detail:hover{transform:translateX(3px);
  background:color-mix(in srgb,var(--accent-1) 9%,var(--surface-strong));
  box-shadow:0 8px 18px -14px var(--accent-1)}
.rs-issues li.has-detail .rs-go{position:absolute;right:11px;top:50%;transform:translateY(-50%);
  font-size:.7rem;color:var(--muted);opacity:.55;transition:.16s}
.rs-issues li.has-detail:hover .rs-go{opacity:1;color:var(--accent-1);right:8px}

/* the detail dialog is a table, so it is allowed to be much wider than an entry form */
.dt-modal .modal-card{width:min(100%,880px)}
.dt-modal .modal-body{padding:14px 16px}
.dt-note{display:flex;gap:9px;align-items:flex-start;margin:0 0 12px;padding:9px 12px;border-radius:11px;
  font-size:.79rem;line-height:1.55;color:var(--text-dim);
  background:color-mix(in srgb,var(--accent-1) 9%,transparent);
  border-left:3px solid var(--accent-1)}
.dt-note i{margin-top:2px;color:var(--accent-1)}
.dt-scroll{max-height:min(56vh,520px)}
.dt-modal table.data td.num,.dt-modal table.data th.num{text-align:right;font-variant-numeric:tabular-nums}
.dt-modal .dm-none{color:var(--muted);opacity:.6}
.dt-modal .vb-empty{padding:34px 18px}

/* ---------------- Pagination ---------------- */
.pager{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding:10px 4px 0;font-size:.8rem;color:var(--muted);
  border-top:1px solid color-mix(in srgb,var(--border) 60%,transparent);
}
.pg-info b{color:var(--text);font-family:var(--font-display)}
.pg-ctl{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pg-n{
  min-width:32px;height:32px;padding:0 9px;border-radius:9px;border:1px solid var(--border);
  background:var(--surface-strong);color:var(--text);font-weight:700;font-size:.8rem;
  font-family:inherit;cursor:pointer;display:grid;place-items:center;
  transition:transform .16s var(--ease),border-color .16s,color .16s,box-shadow .16s;
}
.pg-n:hover:not(:disabled):not(.on){border-color:var(--accent-1);color:var(--accent-1);transform:translateY(-2px)}
.pg-n:disabled{opacity:.32;cursor:not-allowed}
.pg-n.on{
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;border-color:transparent;
  box-shadow:0 8px 16px -8px var(--accent-1);
}
.pg-gap{padding:0 2px;color:var(--muted);letter-spacing:.1em}
.pg-hint{font-size:.71rem;color:var(--muted);opacity:.75;white-space:nowrap}
.pg-hint kbd{display:inline-block;padding:1px 5px;margin:0 1px;border-radius:5px;font-size:.66rem;font-weight:700;
  font-family:var(--font-body);background:var(--surface-strong);border:1px solid var(--border);
  box-shadow:0 1px 0 var(--border);color:var(--text-dim)}
.pg-size{display:flex;align-items:center;gap:7px;font-weight:600;white-space:nowrap}
.pg-size .ctrl{width:auto;padding:5px 8px;font-size:.78rem}
@media(max-width:700px){
  .pager{justify-content:center;gap:9px}
  .pg-info,.pg-size{width:100%;justify-content:center;text-align:center}
  .pg-hint{display:none}          /* no Ctrl key to press on a phone */
}
@media(max-width:1100px){.pg-hint{display:none}}

/* form pulses when a row is opened for editing, instead of the page jumping to the top */
@keyframes formFlash{
  0%{box-shadow:var(--shadow)}
  30%{box-shadow:0 0 0 3px color-mix(in srgb,var(--accent-1) 45%,transparent),var(--shadow)}
  100%{box-shadow:var(--shadow)}
}
.flash{animation:formFlash .9s var(--ease)}

/* ---------------- Wide submenu: two columns on desktop ---------------- */
/* The Report menu carries twenty entries — a single column would run off the screen. */
@media(min-width:1101px){
  .has-sub:hover .submenu.submenu-wide,
  .has-sub.open  .submenu.submenu-wide{
    display:grid; grid-template-columns:1fr 1fr;
    gap:2px 8px; min-width:492px; max-width:min(560px,92vw); padding:12px;
  }
  .submenu-wide .sm-group{
    grid-column:1 / -1; font-size:.62rem; font-weight:800; letter-spacing:.1em;
    text-transform:uppercase; color:var(--accent-1); padding:9px 10px 4px; margin-top:2px;
    border-top:1px solid color-mix(in srgb,var(--border) 70%,transparent);
  }
  .submenu-wide .sm-group:first-child{border-top:none;margin-top:0;padding-top:2px}
  .submenu-wide a{font-size:.78rem;padding:7px 10px}
  .submenu-wide a i{width:16px;font-size:.85em}
  /* keep the panel on screen when the menu sits near the right edge */
  .has-sub:nth-last-child(-n+2) .submenu.submenu-wide{left:auto;right:0}
}
/* stacked on mobile — the group labels still separate the sections */
.submenu-wide .sm-group{
  display:block;font-size:.62rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent-1);padding:9px 10px 3px;
}

/* ---------------- Share-of-total cell ---------------- */
.pct-bar{display:inline-block;width:52px;height:6px;border-radius:99px;vertical-align:middle;
  background:color-mix(in srgb,var(--accent-1) 16%,transparent);overflow:hidden;margin-right:7px}
.pct-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2))}
.pct-n{font-variant-numeric:tabular-nums;font-size:.72rem;color:var(--muted);font-weight:700}

/* ================= Payment page ================= */

/* --- position strip: four numbers on one line --- */
.pay-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:0;overflow:hidden;margin-bottom:12px}
.ps-item{display:flex;align-items:center;gap:11px;padding:12px 16px;
  border-left:1px solid color-mix(in srgb,var(--border) 65%,transparent)}
.ps-item:first-child{border-left:none}
.ps-ico{width:34px;height:34px;flex:0 0 34px;border-radius:11px;display:grid;place-items:center;
  color:#fff;font-size:.85rem;background:linear-gradient(135deg,var(--sc),color-mix(in srgb,var(--sc) 55%,#fff));
  box-shadow:0 8px 16px -9px var(--sc)}
.ps-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.ps-l{font-size:.63rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ps-v{font-family:var(--font-display);font-weight:800;font-size:1.05rem;letter-spacing:-.02em}
.ps-s{font-size:.68rem;color:var(--muted);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1100px){.pay-strip{grid-template-columns:repeat(2,1fr)}
  .ps-item:nth-child(3){border-left:none}
  .ps-item:nth-child(n+3){border-top:1px solid color-mix(in srgb,var(--border) 65%,transparent)}}
@media(max-width:560px){.pay-strip{grid-template-columns:1fr}
  .ps-item{border-left:none;border-top:1px solid color-mix(in srgb,var(--border) 65%,transparent)}
  .ps-item:first-child{border-top:none}}

/* --- left column: one-line outstanding readout --- */
.due-line{display:flex;align-items:center;gap:10px;margin-bottom:11px;padding:10px 12px;border-radius:12px;
  background:var(--surface-strong);border:1px solid var(--border);font-size:.8rem;color:var(--muted)}
.due-line>i{font-size:1rem;color:var(--muted)}
.due-line.owe{border-color:color-mix(in srgb,#ef4444 40%,transparent);
  background:color-mix(in srgb,#ef4444 9%,var(--surface-strong))}
.due-line.owe>i{color:#ef4444}
.due-line.clear{border-color:color-mix(in srgb,#10b981 40%,transparent);
  background:color-mix(in srgb,#10b981 9%,var(--surface-strong))}
.due-line.clear>i{color:#10b981}
.dl-hint{font-weight:600}
.dl-main{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.dl-l{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.dl-v{font-family:var(--font-display);font-weight:800;font-size:1.12rem;color:var(--text)}
.due-line.owe .dl-v{color:#ef4444}
.due-line.clear .dl-v{color:#10b981}
.dl-meta{font-size:.68rem;font-weight:600;text-align:right;line-height:1.3}
.amt-in{font-family:var(--font-display);font-weight:700;font-size:1rem}

/* quick-fill chips */
.quick-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.chip-btn{border:1px dashed color-mix(in srgb,var(--accent-1) 45%,var(--border));
  background:color-mix(in srgb,var(--accent-1) 8%,transparent);color:var(--accent-1);
  padding:5px 10px;border-radius:99px;font-size:.71rem;font-weight:700;cursor:pointer;
  font-family:inherit;transition:.16s var(--ease);display:inline-flex;align-items:center;gap:6px}
button.chip-btn:hover{background:var(--accent-1);color:#fff;border-style:solid;transform:translateY(-1px)}
.chip-btn.adv{cursor:default;color:#10b981;border-color:color-mix(in srgb,#10b981 45%,transparent);
  background:color-mix(in srgb,#10b981 10%,transparent)}

/* --- right panel --- */
.pay-split>.panel{display:flex;flex-direction:column;overflow:hidden}
/* the panel gets a definite height from BRDB.syncSplitHeights, so this flexes and the
   regions inside it (bill table, vendor list) scroll instead of stretching the page */
.due-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.due-empty{display:flex;align-items:center;gap:9px;font-size:.82rem;color:var(--muted)}
.due-empty.big{flex:1;flex-direction:column;justify-content:center;gap:10px;padding:40px 18px;text-align:center}
.due-empty i{color:var(--accent-1);opacity:.75}

/* allocation preview — full panel width */
.alloc{margin:0 0 12px;padding:11px 13px;border-radius:14px;
  background:color-mix(in srgb,var(--accent-1) 7%,var(--surface-strong));
  border:1px solid color-mix(in srgb,var(--accent-1) 32%,transparent);
  animation:pageIn .25s var(--ease) both}
.alloc.note{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--muted);font-weight:600}
.alloc.note i{color:var(--accent-1)}
.alloc.slim{padding:9px 13px}
.alloc.slim .alloc-head{margin-bottom:0}
.alloc-head{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:700;margin-bottom:9px}
.alloc-head>i{color:var(--accent-1)}
.alloc-head b{color:var(--accent-1)}
.alloc-left{margin-left:auto;font-size:.74rem;font-weight:800;color:#10b981;white-space:nowrap;
  padding:3px 9px;border-radius:99px;background:color-mix(in srgb,#10b981 13%,transparent)}
/* A big payment can settle dozens of bills. The box keeps its header visible and scrolls the
   rows, so it never crowds the ledger underneath it out of the panel. */
#allocBox{flex:0 0 auto;min-height:0}
.alloc-rows{display:flex;flex-direction:column;gap:2px;max-height:196px;overflow-y:auto;padding-right:3px}
.ar{display:grid;grid-template-columns:26px minmax(90px,auto) 1fr auto 62px;align-items:center;gap:11px;
  padding:7px 9px;border-radius:10px;background:var(--surface-strong)}
.ar-ico{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:.74rem;
  color:var(--sc);background:color-mix(in srgb,var(--sc) 16%,transparent)}
.ar-bill{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.ar-bill b{font-size:.79rem}
.ar-bill small{font-size:.66rem;color:var(--muted);font-weight:600}
.ar-note{font-size:.74rem;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ar-amt{font-family:var(--font-display);font-weight:800;font-size:.86rem;white-space:nowrap;text-align:right}
.ar-tag{font-size:.63rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;text-align:center;
  color:var(--sc);background:color-mix(in srgb,var(--sc) 15%,transparent);padding:3px 0;border-radius:99px}
@media(max-width:820px){
  .ar{grid-template-columns:26px 1fr auto;row-gap:3px}
  /* the note gets its own row here, so let it wrap instead of truncating */
  .ar-note{grid-column:2 / -1;white-space:normal;overflow:visible;text-overflow:clip;line-height:1.35}
  .ar-tag{display:none}
}

/* segmented Full / Bill-wise switch */
.seg{display:inline-flex;padding:3px;border-radius:11px;background:var(--surface-strong);
  border:1px solid var(--border);gap:2px}
.seg-b{border:0;background:transparent;color:var(--muted);font-family:inherit;font-weight:700;
  font-size:.74rem;padding:6px 12px;border-radius:9px;cursor:pointer;display:inline-flex;
  align-items:center;gap:6px;transition:.16s var(--ease);white-space:nowrap}
.seg-b:hover{color:var(--accent-1)}
.seg-b.on{background:linear-gradient(135deg,var(--accent-1),var(--accent-2));color:#fff;
  box-shadow:0 6px 14px -7px var(--accent-1)}
.tbtn.ghost-t:hover{background:var(--accent-1);border-color:transparent;color:#fff}

/* summary view — these sit in a flex column, so pin them or the column crushes them */
.sum-hero,.sum-bar,.sum-cells,.sum-oldest,.vl-head,.alloc{flex:none}
.sum-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:13px 16px;border-radius:15px;background:var(--surface-strong);border:1px solid var(--border)}
.sum-hero-l{display:flex;flex-direction:column;gap:1px}
.sum-lbl{font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sum-big{font-family:var(--font-display);font-weight:800;font-size:1.9rem;letter-spacing:-.03em;line-height:1.1}
.sum-big.owe{color:#ef4444}
.sum-big.clear{color:#10b981}
.sum-sub{font-size:.75rem;color:var(--muted);font-weight:600}
.sum-ring{width:78px;height:78px;flex:0 0 78px;border-radius:50%;display:grid;place-items:center;
  background:conic-gradient(var(--accent-1) calc(var(--pct)*1%),color-mix(in srgb,var(--border) 60%,transparent) 0);
  position:relative;text-align:center}
.sum-ring::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--surface-strong)}
.sum-ring span{position:relative;font-family:var(--font-display);font-weight:800;font-size:.98rem;line-height:1}
.sum-ring small{position:relative;display:block;font-size:.55rem;color:var(--muted);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em}
.sum-bar{height:7px;border-radius:99px;margin:10px 0;overflow:hidden;
  background:color-mix(in srgb,var(--border) 60%,transparent)}
.sum-bar i{display:block;height:100%;border-radius:99px;transition:width .45s var(--ease);
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2))}
/* six figures in one tidy band rather than a long list */
.sum-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:color-mix(in srgb,var(--border) 55%,transparent);
  border:1px solid color-mix(in srgb,var(--border) 55%,transparent);border-radius:13px;overflow:hidden}
.sum-cell{display:flex;flex-direction:column;gap:2px;padding:10px 12px;background:var(--surface-strong)}
.sum-cell span{font-size:.63rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.sum-cell b{font-family:var(--font-display);font-size:.92rem}
.sum-cell b.good{color:#10b981}.sum-cell b.bad{color:#ef4444}.sum-cell b.warn{color:#f59e0b}
.sum-oldest{margin-top:10px;padding:9px 12px;border-radius:11px;font-size:.78rem;color:var(--muted);
  background:color-mix(in srgb,#f59e0b 10%,transparent);
  border:1px solid color-mix(in srgb,#f59e0b 32%,transparent)}
.sum-oldest i{color:#f59e0b;margin-right:7px}
.sum-oldest b{color:var(--text)}

/* vendor picker list — the panel's default, useful state */
.vl-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 8px;
  font-size:.75rem;color:var(--muted);font-weight:600}
.vl-head b{font-family:var(--font-display);color:var(--text)}
.vl-head.sub{margin-top:14px;padding-top:11px;font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;border-top:1px solid color-mix(in srgb,var(--border) 65%,transparent)}
.vlist{display:flex;flex-direction:column;gap:4px;overflow:auto;flex:1;min-height:0}
.vl-row{display:grid;grid-template-columns:minmax(120px,1.4fr) 1fr auto;align-items:center;gap:12px;
  width:100%;text-align:left;font-family:inherit;cursor:pointer;padding:9px 12px;border-radius:11px;
  background:var(--surface-strong);border:1px solid var(--border);transition:.16s var(--ease)}
.vl-row:hover{border-color:var(--accent-1);transform:translateX(2px);
  background:color-mix(in srgb,var(--accent-1) 8%,var(--surface-strong))}
.vl-name{display:flex;flex-direction:column;line-height:1.25;min-width:0;font-weight:700;font-size:.82rem;color:var(--text)}
.vl-name small{font-size:.66rem;color:var(--muted);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vl-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--border) 60%,transparent);overflow:hidden}
.vl-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#ef4444)}
.vl-amt{font-family:var(--font-display);font-weight:800;font-size:.86rem;color:#ef4444;white-space:nowrap}
.vlist.compact{flex:0 1 auto;min-height:104px;max-height:168px}
.vlist.compact .vl-row{grid-template-columns:1fr auto;padding:7px 11px}
@media(max-width:820px){.vl-row{grid-template-columns:1fr auto}.vl-bar{display:none}}

/* bill-wise table fills whatever height the panel has, then scrolls */
.bills-scroll{flex:1;min-height:0;max-height:none}
.bills-table td.num,.bills-table th.num{text-align:right}
.tgt{color:#8b5cf6;font-size:.66rem;margin-left:5px}

/* a settled bill cannot be chosen; an open one selects on click anywhere in the row */
tr.payable{cursor:pointer}
tr.payable:hover td{background:color-mix(in srgb,var(--accent-1) 9%,transparent)}
tr.picked td{
  background:color-mix(in srgb,var(--accent-1) 17%,transparent)!important;
  border-top-color:color-mix(in srgb,var(--accent-1) 35%,transparent);
  border-bottom-color:color-mix(in srgb,var(--accent-1) 35%,transparent);
}
tr.picked td:first-child{box-shadow:inset 4px 0 0 var(--accent-1)!important;font-weight:700}
tr.picked td:last-child{box-shadow:inset -4px 0 0 var(--accent-1)}
tr.picked .stat-badge{filter:saturate(1.2)}

/* selection bar above the bill table */
.pick-bar{display:none}
.pick-bar.hint,.pick-bar.show{display:flex;align-items:center;gap:11px;flex:none;margin-bottom:9px;
  padding:8px 12px;border-radius:12px;animation:pageIn .2s var(--ease) both}
.pick-bar.hint{background:var(--surface-strong);border:1px dashed var(--border)}
.pick-bar.show{background:color-mix(in srgb,var(--accent-1) 12%,var(--surface-strong));
  border:1px solid color-mix(in srgb,var(--accent-1) 38%,transparent)}
.pb-h{display:flex;align-items:center;gap:8px;font-size:.78rem;color:var(--muted);font-weight:600}
.pb-h i{color:var(--accent-1)}
.pick-bar.hint .btn{margin-left:auto}
.pb-n{font-size:.8rem;color:var(--muted)}
.pb-n b{color:var(--text);font-family:var(--font-display)}
.pb-t{margin-left:auto;font-family:var(--font-display);font-weight:800;font-size:.95rem;color:var(--accent-1)}

/* ---------- vendor dues rows ---------- */
.pt-name{display:flex;align-items:center;gap:9px}
.v-rank{flex:0 0 18px;font-size:.66rem;font-weight:800;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.v-av{flex:0 0 26px;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-size:.63rem;font-weight:800;letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 55%,#fff));
  box-shadow:0 5px 12px -6px var(--c)}
.v-nm{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-row .pt-sub{display:flex;flex-direction:column;gap:4px;min-width:150px}
.v-meta{font-size:.7rem;color:var(--muted);white-space:nowrap}
.v-bar{height:5px;border-radius:99px;background:color-mix(in srgb,var(--border) 55%,transparent);overflow:hidden}
.v-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#ef4444)}
.pt-due{font-variant-numeric:tabular-nums}
tr.pt-row.pick:hover .v-av{transform:scale(1.06)}
.v-av{transition:transform .16s var(--ease)}
.alloc.picked{background:color-mix(in srgb,#8b5cf6 8%,var(--surface-strong));
  border-color:color-mix(in srgb,#8b5cf6 34%,transparent)}
.alloc.picked .alloc-head>i,.alloc.picked .alloc-head b{color:#8b5cf6}
.ar.tgt{box-shadow:inset 3px 0 0 #8b5cf6}
.ar-note .fa-thumbtack{color:#8b5cf6;margin-right:4px;font-size:.66rem}

/* bill-wise rows */
table.data td.good{color:#10b981;font-weight:600}
table.data td.bad{color:#ef4444;font-weight:700}
tr.bill-paid td:first-child{box-shadow:inset 3px 0 0 #10b981}
tr.bill-partial td:first-child{box-shadow:inset 3px 0 0 #f59e0b}
tr.bill-unpaid td:first-child{box-shadow:inset 3px 0 0 #ef4444}

/* ---------------- Standing expenses (rent / royalty / fixed / salary) ---------------- */
.fx-switch{margin-bottom:10px}
.form-card.is-fixed .fx-switch{border-color:color-mix(in srgb,#8b5cf6 45%,transparent);
  background:color-mix(in srgb,#8b5cf6 10%,var(--surface-strong))}
.fx-type{margin-bottom:11px}
.alloc.note.fx{align-items:flex-start;line-height:1.5;
  background:color-mix(in srgb,#8b5cf6 8%,var(--surface-strong));
  border-color:color-mix(in srgb,#8b5cf6 32%,transparent)}
.alloc.note.fx i{color:#8b5cf6;margin-top:2px}
.alloc.note.fx b{color:var(--text)}
.badge.fx-badge{background:color-mix(in srgb,#8b5cf6 16%,transparent)!important;color:#8b5cf6!important}

/* reminder that a recurring expense has no entry for this month yet */
.fx-rem{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-family:inherit;
  cursor:pointer;padding:9px 12px;margin-bottom:6px;border-radius:12px;flex:none;
  background:color-mix(in srgb,#f59e0b 12%,var(--surface-strong));
  border:1px solid color-mix(in srgb,#f59e0b 40%,transparent);transition:.16s var(--ease)}
.fx-rem:hover{transform:translateX(2px);border-color:#f59e0b}
.fx-rem>i{color:#f59e0b;font-size:.95rem}
.fx-rem span{display:flex;flex-direction:column;line-height:1.3;font-size:.79rem;color:var(--text)}
.fx-rem small{font-size:.68rem;color:var(--muted);font-weight:600}
.fx-add{margin-left:auto;flex:0 0 auto;font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.05em;color:#fff;background:#f59e0b;padding:4px 11px;border-radius:99px}

/* ---------- outstanding split by the month the bills were raised ---------- */
.dm-list{display:flex;flex-direction:column;gap:2px;flex:none;
  border:1px solid var(--border);border-radius:12px;overflow:hidden}
.dm-row{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(120px,1fr) 1fr auto;
  align-items:center;gap:12px;padding:8px 12px;background:var(--surface-strong)}
.dm-row.old{background:color-mix(in srgb,#f59e0b 9%,var(--surface-strong))}
.dm-m{font-weight:700;font-size:.8rem;display:flex;align-items:center;gap:7px}
.dm-m small{font-size:.6rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:#f59e0b;background:color-mix(in srgb,#f59e0b 16%,transparent);padding:2px 7px;border-radius:99px}
.dm-n{font-size:.71rem;color:var(--muted);font-weight:600;white-space:nowrap}
.dm-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--border) 60%,transparent);overflow:hidden}
.dm-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,#f59e0b,#ef4444)}
.dm-a{font-family:var(--font-display);font-weight:800;font-size:.85rem;color:#ef4444;
  white-space:nowrap;text-align:right}
@media(max-width:820px){.dm-row{grid-template-columns:1fr auto}.dm-bar,.dm-n{display:none}}

/* ---------- one table: vendor dues, a divider, then standing expenses ---------- */
.dues-scroll{flex:1;min-height:0;max-height:none}
.pt-table td.num,.pt-table th.num{text-align:right}
.pt-table th.col-act,.pt-table td.col-act{width:52px;text-align:right}

/* section headers */
tr.pt-sec td{
  position:sticky;top:29px;z-index:4;padding:7px 10px!important;
  font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:color-mix(in srgb,var(--accent-1) 13%,var(--surface-strong));
  border-top:1px solid color-mix(in srgb,var(--accent-1) 30%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent-1) 22%,transparent);
}
tr.pt-sec.fx td{background:color-mix(in srgb,#8b5cf6 14%,var(--surface-strong));
  border-color:color-mix(in srgb,#8b5cf6 32%,transparent)}
tr.pt-sec.sub td{background:color-mix(in srgb,var(--border) 42%,var(--surface-strong));font-size:.63rem}
.pt-n{margin-left:9px;font-weight:600;opacity:.72;text-transform:none;letter-spacing:0}
tr.pt-sec b{float:right;font-family:var(--font-display);font-size:.78rem;text-transform:none;letter-spacing:0}

/* the divider between the two halves */
tr.pt-div td{
  padding:0!important;background:transparent!important;border:none!important;height:34px;position:relative}
tr.pt-div span{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:.65rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8b5cf6}
tr.pt-div span::before,tr.pt-div span::after{content:"";height:1px;width:26%;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,#8b5cf6 45%,transparent),transparent)}
tr.pt-div:hover td{background:transparent!important}

/* rows */
tr.pt-row .pt-name{font-weight:700}
tr.pt-row .pt-sub{color:var(--muted);font-size:.72rem}
tr.pt-row .pt-due{font-weight:800;color:#ef4444}
tr.pt-row.pick,tr.pt-row.rem{cursor:pointer}
.pt-ic{width:15px;text-align:center;margin-right:6px;color:#8b5cf6}
.pt-go{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:7px;font-size:.66rem;
  color:var(--accent-1);background:color-mix(in srgb,var(--accent-1) 13%,transparent);opacity:0;transition:.15s}
tr.pt-row.pick:hover .pt-go{opacity:1}
.pt-add{display:inline-block;padding:3px 11px;border-radius:99px;font-size:.65rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:#fff;background:#f59e0b;white-space:nowrap}
tr.pt-row.rem{background:color-mix(in srgb,#f59e0b 8%,transparent)}
tr.pt-row.rem:hover{background:color-mix(in srgb,#f59e0b 15%,transparent)}
tr.pt-row.rem .pt-ic{color:#f59e0b}
.pt-none,.pt-ok{text-align:center;padding:14px!important;font-size:.78rem;color:var(--muted);font-style:italic}
.pt-ok{color:#10b981;font-style:normal;font-weight:600}
.pt-ok i{margin-right:7px}

.fx-list{display:flex;flex-direction:column;gap:2px;flex:none;
  border:1px solid var(--border);border-radius:12px;overflow:hidden}
.fx-sec.prevm{background:color-mix(in srgb,#f59e0b 14%,var(--surface-strong))}
.fx-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:7px 12px;font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:color-mix(in srgb,#8b5cf6 13%,var(--surface-strong));color:var(--text)}
.fx-sec b{font-family:var(--font-display);font-size:.78rem;text-transform:none;letter-spacing:0}
.fx-sec.now{background:color-mix(in srgb,#10b981 14%,var(--surface-strong))}
.fx-sec.prev{background:var(--surface-strong);color:var(--muted)}
.fx-sec.month{background:color-mix(in srgb,var(--border) 40%,var(--surface-strong));font-size:.64rem}
.fx-row{display:flex;align-items:center;gap:10px;padding:7px 12px;background:var(--surface-strong)}
.fx-ico{width:24px;height:24px;flex:0 0 24px;border-radius:8px;display:grid;place-items:center;
  font-size:.7rem;color:#8b5cf6;background:color-mix(in srgb,#8b5cf6 15%,transparent)}
.fx-main{display:flex;flex-direction:column;line-height:1.25;min-width:0;flex:1}
.fx-main b{font-size:.79rem}
.fx-main small{font-size:.66rem;color:var(--muted);font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fx-amt{font-family:var(--font-display);font-weight:800;font-size:.84rem;white-space:nowrap}
.fx-none{padding:11px 12px;font-size:.75rem;color:var(--muted);font-style:italic;
  background:var(--surface-strong);text-align:center}

/* ================= Stock Balance ================= */
.sb-top .tile .sub{font-size:.7rem;color:var(--muted);margin-top:3px;font-weight:600}
.sb-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px}
.sb-type{width:auto;min-width:150px;padding:6px 10px;font-size:.78rem}
.sb-count{margin-left:auto;font-size:.75rem;color:var(--muted);font-weight:600}
.status-seg{flex-wrap:wrap}
.status-seg .seg-b{padding:6px 11px}
.status-seg .seg-b i{font-size:.7em}

/* how full the shelf is against its optimum */
.lvl{display:flex;align-items:center;gap:8px;min-width:96px}
.lvl-bar{flex:1;height:6px;border-radius:99px;overflow:hidden;
  background:color-mix(in srgb,var(--border) 60%,transparent)}
.lvl-bar i{display:block;height:100%;border-radius:99px;transition:width .35s var(--ease)}
.lvl-n{font-size:.68rem;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;min-width:30px;text-align:right}

/* ================= Stock pages — material panel ================= */
.split>#mpPanel{display:flex;flex-direction:column;overflow:hidden}
.vb-chip.st b{display:flex;align-items:center;gap:5px;color:var(--sc)}
.vb-chip.warn{border-color:color-mix(in srgb,#f59e0b 40%,transparent);
  background:color-mix(in srgb,#f59e0b 9%,var(--surface-strong))}
.vb-chip.warn b{color:#f59e0b}

/* one-line stock readout under the material field */
.stk-line{display:flex;align-items:center;gap:10px;margin-bottom:11px;padding:10px 12px;border-radius:12px;
  background:var(--surface-strong);border:1px solid var(--border);font-size:.8rem;color:var(--muted)}
.stk-line>i{font-size:1rem;color:var(--muted)}
.stk-line.good{border-color:color-mix(in srgb,#10b981 40%,transparent);
  background:color-mix(in srgb,#10b981 9%,var(--surface-strong))}
.stk-line.good>i{color:#10b981}
.stk-line.warn{border-color:color-mix(in srgb,#f59e0b 42%,transparent);
  background:color-mix(in srgb,#f59e0b 10%,var(--surface-strong))}
.stk-line.warn>i{color:#f59e0b}
.stk-line.bad{border-color:color-mix(in srgb,#ef4444 42%,transparent);
  background:color-mix(in srgb,#ef4444 10%,var(--surface-strong))}
.stk-line.bad>i{color:#ef4444}
.sl-hint{font-weight:600}
.sl-main{display:flex;flex-direction:column;line-height:1.2;margin-right:auto}
.sl-l{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.sl-v{font-family:var(--font-display);font-weight:800;font-size:1.12rem;color:var(--text)}
.stk-line.good .sl-v{color:#10b981}
.stk-line.warn .sl-v{color:#f59e0b}
.stk-line.bad .sl-v{color:#ef4444}
.sl-meta{font-size:.66rem;font-weight:600;text-align:right;line-height:1.35}

/* inline notes: shortfall, negative balance, what an issue would leave */
.stk-note{display:flex;align-items:flex-start;gap:9px;padding:8px 11px;border-radius:11px;flex:none;
  font-size:.76rem;line-height:1.45;color:var(--muted);margin-top:8px}
.stk-note i{margin-top:2px}
.stk-note b{color:var(--text)}
.stk-note.warn{background:color-mix(in srgb,#f59e0b 11%,transparent);
  border:1px solid color-mix(in srgb,#f59e0b 34%,transparent)}
.stk-note.warn i{color:#f59e0b}
.stk-note.bad{background:color-mix(in srgb,#ef4444 11%,transparent);
  border:1px solid color-mix(in srgb,#ef4444 34%,transparent)}
.stk-note.bad i{color:#ef4444}
.stk-note.ok{background:color-mix(in srgb,#10b981 10%,transparent);
  border:1px solid color-mix(in srgb,#10b981 32%,transparent)}
.stk-note.ok i{color:#10b981}
.lnk{border:0;background:none;padding:0;font:inherit;color:var(--accent-1);font-weight:800;
  cursor:pointer;text-decoration:underline}
.lnk:hover{color:var(--accent-2)}

/* movement rows */
.vb-table td.bal{font-weight:700;font-family:var(--font-display)}
.vb-table td.good{color:#10b981;font-weight:700}
.vb-table td.bad{color:#ef4444;font-weight:700}

/* ================= Expense page — vendor bills panel ================= */
.split>#vbPanel{display:flex;flex-direction:column;overflow:hidden}
.vb-body{flex:1;min-height:0;display:flex;flex-direction:column;overflow:auto}
.vb-scroll{flex:1;min-height:0;max-height:none}

.vb-chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px;flex:none}
.vb-chip{display:flex;flex-direction:column;gap:1px;padding:7px 12px;border-radius:11px;line-height:1.25;
  background:var(--surface-strong);border:1px solid var(--border)}
.vb-chip small{font-size:.6rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.vb-chip b{font-family:var(--font-display);font-size:.92rem}
.vb-chip.good b{color:#10b981}
.vb-chip.bad{border-color:color-mix(in srgb,#ef4444 40%,transparent);
  background:color-mix(in srgb,#ef4444 9%,var(--surface-strong))}
.vb-chip.bad b{color:#ef4444}

.vb-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  padding:40px 18px;text-align:center;color:var(--muted);font-size:.85rem}
.vb-empty i{color:var(--accent-1);opacity:.5}
.vb-empty small{font-size:.75rem;opacity:.8}

/* section rows inside the bill table — one table keeps every column aligned */
.vb-table td.num,.vb-table th.num{text-align:right}
tr.vb-sec td{
  position:sticky;top:29px;z-index:4;cursor:pointer;user-select:none;
  padding:7px 10px!important;font-size:.7rem;font-weight:800;letter-spacing:.04em;
  background:color-mix(in srgb,var(--accent-1) 13%,var(--surface-strong));
  border-top:1px solid color-mix(in srgb,var(--accent-1) 30%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--accent-1) 22%,transparent);
}
tr.vb-sec.now td{background:color-mix(in srgb,#10b981 15%,var(--surface-strong));
  border-color:color-mix(in srgb,#10b981 34%,transparent)}
tr.vb-sec.future td{background:color-mix(in srgb,#8b5cf6 15%,var(--surface-strong));
  border-color:color-mix(in srgb,#8b5cf6 34%,transparent)}
tr.vb-sec.prev td{background:var(--surface-strong);cursor:default;color:var(--muted)}
tr.vb-sec.month td{background:color-mix(in srgb,var(--border) 40%,var(--surface-strong))}
tr.vb-sec:hover td{filter:brightness(1.04)}
.vb-sec-l{text-transform:uppercase}
.vb-sec-n{margin-left:9px;font-weight:600;opacity:.75;text-transform:none;letter-spacing:0}
tr.vb-sec b{float:right;font-family:var(--font-display);font-size:.8rem}
.vb-caret{margin-right:7px;font-size:.62rem;transition:transform .2s var(--ease);display:inline-block}
tr.vb-sec.closed .vb-caret{transform:rotate(-90deg)}
tr.vb-row.hide{display:none}
.vb-none{color:var(--muted);font-style:italic;text-align:center;padding:14px!important}

/* default view: who billed this month */
.vb-lead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex:none;
  margin-bottom:8px;font-size:.76rem;color:var(--muted);font-weight:600}
.vb-lead b{font-family:var(--font-display);color:var(--text)}
.vb-list{display:flex;flex-direction:column;gap:4px;overflow:auto;flex:1;min-height:0}
/* the list is a flex column that scrolls, so its rows must never be allowed to shrink —
   40 of them squeezed into the panel collapse to a few pixels and overlap each other */
.vb-list>*{flex:0 0 auto}
.vb-vrow{display:grid;grid-template-columns:minmax(110px,1.3fr) 1fr auto;align-items:center;gap:12px;
  width:100%;text-align:left;font-family:inherit;color:var(--text);cursor:pointer;padding:8px 12px;border-radius:11px;
  background:var(--surface-strong);border:1px solid var(--border);transition:.16s var(--ease)}
.vb-vrow:hover{border-color:var(--accent-1);transform:translateX(2px);
  background:color-mix(in srgb,var(--accent-1) 8%,var(--surface-strong))}
.vv-name{display:flex;flex-direction:column;line-height:1.25;min-width:0;font-weight:700;font-size:.81rem;color:var(--text)}
.vv-name small{font-size:.65rem;color:var(--muted);font-weight:600}
.vv-bar{height:6px;border-radius:99px;background:color-mix(in srgb,var(--border) 60%,transparent);overflow:hidden}
.vv-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent-1),var(--accent-2))}
.vv-amt{font-family:var(--font-display);font-weight:800;font-size:.85rem;white-space:nowrap}
@media(max-width:820px){.vb-vrow{grid-template-columns:1fr auto}.vv-bar{display:none}}



/* ================= Context panels — shared polish =================
   Expense (vendor bills), Payment (vendor dues), Stock Purchase and Stock Issue
   (material ledger) all render through the same vb-* classes, so the styling
   below lifts every one of those panels at once. */

/* the panel header gets the accent hairline the summary band uses */
#vbPanel>.panel-head,#mpPanel>.panel-head,#duePanel>.panel-head{position:relative}
#vbPanel>.panel-head::after,#mpPanel>.panel-head::after,#duePanel>.panel-head::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2),transparent)}

/* Chips are small stat cards: accent edge, tabular figures, a lift on hover.
 One line, always. Flex with nowrap cannot be broken by a stray grid-template rule the way
 auto-flow could, and flex:1 1 0 + min-width:0 makes the cards share the width evenly and
 shrink rather than push each other onto a second row. Each card scales its own text
 (see the container-query block below) so shrinking never truncates a figure. */
.vb-chips{display:flex;flex-wrap:nowrap;align-items:stretch;gap:6px}
.vb-chips>.vb-chip{flex:1 1 0;min-width:0}
.vb-chip{position:relative;padding:9px 12px 8px;border-radius:13px;   /* .vb-chips owns the sizing */
  overflow:hidden;transition:transform .18s var(--ease),box-shadow .18s var(--ease),border-color .18s var(--ease);
  background:linear-gradient(160deg,color-mix(in srgb,var(--accent-1) 8%,var(--surface-strong)),var(--surface-strong))}
.vb-chip::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent-1),var(--accent-2));opacity:.85}
.vb-chip:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent-1) 45%,transparent);
  box-shadow:0 10px 20px -14px var(--accent-1)}
.vb-chip b{font-size:.98rem;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.vb-chip.good::before{background:linear-gradient(180deg,#10b981,#059669)}
.vb-chip.bad::before {background:linear-gradient(180deg,#ef4444,#f97316)}
.vb-chip.warn::before{background:linear-gradient(180deg,#f59e0b,#f97316)}
.vb-chip.st::before  {background:var(--sc)}

/* how much of what was billed has actually been paid */
.vb-prog{flex:none;margin:-2px 0 11px;display:flex;flex-direction:column;gap:5px}
.vb-prog-bar{height:8px;border-radius:99px;overflow:hidden;display:flex;
  background:color-mix(in srgb,#ef4444 22%,transparent)}
.vb-prog-bar i{display:block;height:100%;background:linear-gradient(90deg,#10b981,#34d399);
  transition:width .45s var(--ease)}
/* the stock variant fills against an optimum, not a debt, so its track is neutral */
.vb-prog-bar.stk{background:color-mix(in srgb,var(--border) 70%,transparent)}
.vb-prog-txt{display:flex;justify-content:space-between;font-size:.68rem;font-weight:700;color:var(--muted)}
.vb-prog-txt b{font-family:var(--font-display)}
.vb-prog-txt .pd{color:#10b981}
.vb-prog-txt .pu{color:#ef4444}

/* vendor identity block when one is selected */
.vb-who{display:flex;align-items:center;gap:11px;flex:none;margin-bottom:11px}
.vb-av{width:38px;height:38px;flex:none;border-radius:12px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.86rem;color:#fff;letter-spacing:.02em;
  background:linear-gradient(145deg,var(--av1),var(--av2));
  box-shadow:0 6px 14px -8px var(--av1)}
.vb-who-t{min-width:0;line-height:1.3}
.vb-who-t b{display:block;font-family:var(--font-display);font-size:.95rem;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vb-who-t small{font-size:.7rem;color:var(--muted);font-weight:600}

/* section bands: accent bar, pill count, total pushed right */
tr.vb-sec td{padding:8px 10px!important;box-shadow:inset 3px 0 0 var(--accent-1)}
tr.vb-sec.now td{box-shadow:inset 3px 0 0 #10b981}
tr.vb-sec.future td{box-shadow:inset 3px 0 0 #8b5cf6}
tr.vb-sec.prev td{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--muted) 55%,transparent)}
tr.vb-sec.month td{box-shadow:inset 3px 0 0 color-mix(in srgb,var(--border) 90%,transparent)}
.vb-sec-n{margin-left:8px;padding:1px 8px;border-radius:99px;font-size:.64rem;font-weight:800;
  background:color-mix(in srgb,var(--surface) 70%,transparent);opacity:1;color:var(--muted)}
tr.vb-sec b{font-size:.84rem;font-variant-numeric:tabular-nums}

/* bill / movement rows */
.vb-table tbody tr.vb-row:hover td{background:color-mix(in srgb,var(--accent-1) 8%,transparent)}
.vb-table tbody td{transition:background .14s}

/* ranked list rows get a rank chip and a firmer hover */
.vb-list{gap:5px}
.vb-vrow{position:relative;padding:9px 12px 9px 13px;border-radius:12px;overflow:hidden}
.vb-vrow::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--accent-1),var(--accent-2));
  opacity:0;transition:opacity .16s var(--ease)}
.vb-vrow:hover::before{opacity:1}
.vb-vrow:hover{transform:translateX(3px);box-shadow:0 8px 18px -14px var(--accent-1)}
.vv-bar{height:7px}
.vv-bar i{background:linear-gradient(90deg,var(--accent-1),var(--accent-2));
  transition:width .45s var(--ease)}
/* the figure is what the row is about, so it carries the accent rather than body colour */
.vv-amt{font-variant-numeric:tabular-nums;color:var(--accent-1)}
.vb-vrow:hover .vv-amt{color:var(--accent-2)}
/* a shortfall row states a deficit, which should read as a warning, not an accent */
.vb-list .vb-vrow .vv-amt.short{color:#f59e0b}

/* empty states read as a deliberate message rather than a gap */
.vb-empty{gap:10px}
.vb-empty i{opacity:.35;font-size:2rem}
.vb-empty b{color:var(--text);font-family:var(--font-display);font-size:.9rem}

/* ---------------- Profit & Loss statement ---------------- */
.pl-table th small{display:block;font-weight:600;opacity:.6;text-transform:none;letter-spacing:0;font-size:.62rem}
.pl-table td.num,.pl-table th.num{text-align:right;font-variant-numeric:tabular-nums}
.pl-table td.dim{color:var(--muted)}
.pl-table td.neg{color:#ef4444}
.pl-table .pl-l small{display:block;font-weight:500;font-size:.68rem;color:var(--muted);margin-top:1px}
.pl-table tbody tr.pl-rev td{font-weight:700}
/* the two derived lines are the ones the eye should land on */
.pl-table tbody tr.pl-sub td{background:color-mix(in srgb,var(--accent-1) 8%,transparent);
  border-top:1px solid color-mix(in srgb,var(--accent-1) 30%,transparent);font-weight:800}
.pl-table tbody tr.pl-net td{background:color-mix(in srgb,var(--accent-1) 15%,transparent);
  border-top:2px solid var(--accent-1);font-weight:800;font-size:.9rem}
.pl-table tbody tr.pl-net td:first-child{box-shadow:inset 3px 0 0 var(--accent-1)}
.pl-table tbody tr.cost td.num:nth-child(2){color:#ef4444}

.pl-d{font-size:.72rem;font-weight:800;white-space:nowrap}
.pl-d.up{color:#10b981}
.pl-d.down{color:#ef4444}
.pl-d.flat{color:var(--muted)}

.ov-total.good{color:#10b981}
.ov-total.bad{color:#ef4444}

/* stock movement memo — deliberately set apart from the statement above it */
.pl-memo{margin:12px 2px 2px;padding:13px 15px;border-radius:14px;
  background:color-mix(in srgb,#0ea5e9 8%,var(--surface-strong));
  border:1px solid color-mix(in srgb,#0ea5e9 32%,transparent)}
.pl-memo-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.82rem;
  font-family:var(--font-display);margin-bottom:6px}
.pl-memo-h i{color:#0ea5e9}
.pl-memo p{margin:0 0 10px;font-size:.82rem;line-height:1.6;color:var(--text-dim)}
.pl-memo-g{display:flex;gap:10px;flex-wrap:wrap}
.pl-memo-g span{display:flex;flex-direction:column;gap:1px;padding:8px 13px;border-radius:11px;
  background:var(--surface);border:1px solid var(--border);flex:1 1 190px}
.pl-memo-g small{font-size:.62rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pl-memo-g b{font-family:var(--font-display);font-size:1rem;font-variant-numeric:tabular-nums}
.pl-memo-g b.good{color:#10b981}
.pl-memo-g b.bad{color:#ef4444}
.pl-caveat{display:block;margin-top:9px;font-size:.7rem;color:var(--muted);line-height:1.5}
@media(max-width:700px){.pl-memo-g{flex-direction:column}}

/* --- Context panel header: give the space back to the table -----------------
   The identity block, stat cards and progress bar sit above a scrolling table. They were
   costing ~450px before a single row appeared, so everything here is tightened and the
   cards sit on one line however many there are. */
.vb-who{margin-bottom:6px;gap:8px}
.vb-av{width:28px;height:28px;border-radius:9px;font-size:.7rem}
.vb-who-t b{font-size:.87rem}
.vb-who-t small{font-size:.66rem}

.vb-chips{gap:5px}
/* Each card is its own size container: six across a ~570px panel leaves under 90px per
 card, so the label and the figure scale with the card rather than spilling out of it. */
.vb-chip{padding:4px 8px;border-radius:9px;line-height:1.22;container-type:inline-size;min-width:0}
.vb-chip::before{width:2px}
.vb-chip small{font-size:clamp(.47rem,5.9cqi,.54rem);letter-spacing:.03em;line-height:1.18;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.vb-chip b{font-size:clamp(.63rem,9.8cqi,.82rem);line-height:1.24;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;display:block}

/* a phone cannot show six cards in a row without shredding them, so there they wrap 2-up */
@media(max-width:700px){
  .vb-chips{flex-wrap:wrap;gap:7px}
  .vb-chips>.vb-chip{flex:1 1 44%}
  .vb-chip b{font-size:.85rem}
  .vb-chip small{font-size:.56rem}
}

.vb-prog{margin:0 0 6px;gap:2px}
.vb-prog-bar{height:5px}
.vb-prog-txt{font-size:.63rem}

/* the shortfall note and the negative-balance note share a row rather than stacking */
.stk-notes{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;flex:none}
.stk-notes>.stk-note{flex:1 1 240px;margin-top:0}
.stk-note{padding:5px 8px;font-size:.69rem;line-height:1.34;margin-top:5px;gap:6px}
.stk-note i{margin-top:1px}
@media(max-width:900px){.stk-notes>.stk-note{flex:1 1 100%}}

/* whatever is reclaimed goes to the table */
.vb-body{gap:0}
.vb-scroll{flex:1 1 auto;min-height:0}

/* ---------------- Sale register — month block inside the form card ----------------
   Here the table sets the row height and the form column stretches to meet it (the opposite
   of the other split pages), so the month block fills whatever space the form leaves and
   scrolls its own list rather than pushing the card taller than the table. */
.split-tled{align-items:stretch}
/* the month panel stands on its own in the left column now that the form lives in a dialog */
.sale-aside{display:flex;flex-direction:column;min-height:0;padding:12px 14px}
.sale-aside .panel-head{margin-bottom:10px;flex:none}
.sale-aside .panel-head h3{font-size:.92rem}
.sa-month{font-size:.7rem;font-weight:800;padding:2px 9px;border-radius:99px;white-space:nowrap;
  color:var(--accent-1);background:color-mix(in srgb,var(--accent-1) 15%,transparent)}
.sa-total{flex:none;display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:14px;margin-bottom:14px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent-1) 17%,var(--surface)),
    color-mix(in srgb,var(--accent-2) 11%,var(--surface)));
  border:1px solid color-mix(in srgb,var(--accent-1) 32%,transparent);
  container-type:inline-size}
.sa-total small{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.sa-total b{font-family:var(--font-display);font-size:clamp(1.05rem,12cqi,1.45rem);font-weight:800;
  color:var(--accent-1);font-variant-numeric:tabular-nums;letter-spacing:-.015em;white-space:nowrap}
.sa-total span{font-size:.7rem;color:var(--muted)}
.sa-h{flex:none;margin:0 0 8px;font-size:.72rem;text-transform:uppercase;letter-spacing:.09em;
  color:var(--muted);font-weight:800}
/* the list is the part that gives, so a tall table never stretches the card past it */
.sa-list{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:5px;padding-right:2px}
.sa-list>*{flex:0 0 auto}
.sa-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;grid-template-rows:auto auto;
  gap:2px 9px;align-items:center;width:100%;text-align:left;cursor:pointer;
  font-family:inherit;color:var(--text);padding:8px 11px;border-radius:12px;
  background:var(--surface-strong);border:1px solid var(--border);
  transition:transform .16s var(--ease),border-color .16s var(--ease),box-shadow .16s var(--ease)}
.sa-row:hover{transform:translateX(3px);border-color:color-mix(in srgb,var(--accent-1) 45%,transparent);
  box-shadow:0 8px 18px -14px var(--accent-1)}
.sa-rank{grid-row:1/span 2;width:22px;height:22px;border-radius:8px;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:800;font-size:.7rem;color:#fff;
  background:linear-gradient(135deg,var(--accent-1),var(--accent-2))}
.sa-when{grid-row:1;grid-column:2;display:flex;flex-direction:column;line-height:1.2;
  font-size:.79rem;font-weight:700;min-width:0}
.sa-when small{font-size:.65rem;color:var(--muted);font-weight:600}
.sa-amt{grid-row:1;grid-column:3;font-family:var(--font-display);font-weight:800;font-size:.84rem;
  white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--accent-1)}
.sa-bar{grid-row:2;grid-column:2/span 2;height:5px;border-radius:99px;overflow:hidden;
  background:color-mix(in srgb,var(--border) 65%,transparent)}
.sa-bar i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--accent-1),var(--accent-2));transition:width .45s var(--ease)}
.sa-none{margin:0;padding:12px 2px;font-size:.79rem;color:var(--muted);line-height:1.55}
.sa-none b{color:var(--text)}
/* --- Sale register: keep the pair compact ---------------------------------
   The table drives the height here, so an unbounded 25-row table made the form card
   over 1000px tall. Cap the scroller and tighten everything in the left column. */
.split-tled>.panel>.dt>.table-scroll{max-height:min(52vh,440px);min-height:0}
.sale-aside .panel-head{margin-bottom:8px}
.sale-aside .panel-head h3{font-size:.84rem}
.sa-month{font-size:.64rem;padding:1px 8px}
.sa-total{padding:9px 11px;margin-bottom:10px;border-radius:12px}
.sa-total small{font-size:.58rem}
.sa-total b{font-size:clamp(.98rem,11cqi,1.28rem)}
.sa-total span{font-size:.66rem;line-height:1.4}
.sa-h{margin-bottom:6px;font-size:.66rem}
.sa-list{gap:4px}
.sa-row{padding:6px 9px;gap:1px 8px;border-radius:10px}
.sa-rank{width:19px;height:19px;border-radius:7px;font-size:.64rem}
.sa-row{grid-template-columns:19px minmax(0,1fr) auto}
.sa-when{font-size:.74rem}
.sa-when small{font-size:.61rem}
.sa-amt{font-size:.78rem}
.sa-bar{height:4px}
.sa-none{padding:8px 2px;font-size:.74rem}

@media(max-width:1100px){
  .split-tled{align-items:start}
  .sale-aside{flex:none}
  .sa-list{max-height:none;overflow:visible}
}

/* ---------------- Backup page ---------------- */
.bk-note{display:flex;flex-direction:column;gap:8px}
.bk-line{display:flex;align-items:flex-start;gap:10px;font-size:.85rem;line-height:1.55;color:var(--muted);
  padding:9px 12px;border-radius:11px;background:var(--surface-strong);border:1px solid var(--border)}
.bk-line i{margin-top:2px;color:var(--accent-1);width:16px;text-align:center;flex:0 0 16px}
.bk-line b{color:var(--text)}
.bk-line.good{border-color:color-mix(in srgb,#10b981 40%,transparent);
  background:color-mix(in srgb,#10b981 10%,var(--surface-strong))}
.bk-line.good i{color:#10b981}
.bk-line.warn{border-color:color-mix(in srgb,#f59e0b 40%,transparent);
  background:color-mix(in srgb,#f59e0b 10%,var(--surface-strong))}
.bk-line.warn i{color:#f59e0b}
.bk-line.bad{border-color:color-mix(in srgb,#ef4444 40%,transparent);
  background:color-mix(in srgb,#ef4444 10%,var(--surface-strong))}
.bk-line.bad i{color:#ef4444}
.bk-note .spin{border-color:color-mix(in srgb,var(--accent-1) 35%,transparent);border-top-color:var(--accent-1);
  width:15px;height:15px;border-width:2px;vertical-align:-2px;margin-right:7px}
.ia.dl{color:#0ea5e9;border-color:color-mix(in srgb,#0ea5e9 40%,var(--border))}
.ia.dl:hover{background:#0ea5e9;border-color:#0ea5e9;color:#fff}
.ia.rst{color:#f59e0b;border-color:color-mix(in srgb,#f59e0b 40%,var(--border))}
.ia.rst:hover{background:#f59e0b;border-color:#f59e0b;color:#fff}
.swal2-popup code{background:color-mix(in srgb,var(--accent-1) 12%,transparent);padding:2px 7px;
  border-radius:6px;font-size:.82em;word-break:break-all}

/* print letterhead — built by BRDB.markPrint(), never shown on screen */
.print-head{display:none}

/* ================= Print ================= */
@media print{
  /* --- screen-only chrome --- */
  .app-header,.form-card,.toolbar,.sel-bar,.search-box,.row-act,.ia,.report-bar,.pager,
  .modal,.preset-row,.mx-legend,.dash-filter,.acl-quick,.pick-choice,.crop-tools,.filter-pop,
  .ac-list,.swal2-container,.wm,.no-print,.btn,.tbtn,.page-title .tag,
  th.col-act,td.col-act,
  .panel-head select.ctrl,
  /* interactive bits of the newer panels — none of it means anything on paper */
  .seg,.pick-bar,.stk-line,.quick-row,.pt-go,.pt-add,.fx-add,.fx-rem .fx-add,
  .status-seg,.sb-filters{display:none!important}

  /* --- NOTHING MAY CLIP --------------------------------------------------
     The layout sync writes inline heights on panels and scrollers so the two
     columns line up on screen. On paper those must all open to full height,
     or the printout stops wherever the scroll box ended. */
  .panel,.split>.panel,#duePanel,#mpPanel,#vbPanel,.dt,
  .table-scroll,.due-body,.vb-body,.dues-scroll,.bills-scroll,.vb-scroll,
  .vlist,.fx-list,.dm-list,.alloc,.alloc-rows,.mat-grid,.chart-area,.acl-matrix{
    height:auto!important;max-height:none!important;min-height:0!important;
    overflow:visible!important;
  }
  /* a screen selection is not a document property — print rows plain */
  table.data tbody tr.sel{background:transparent!important}
  table.data tbody tr.sel td:first-child{box-shadow:none!important}

  /* anything sticky becomes static, or it lands on top of the rows below it */
  table.data thead th,table.data tfoot td,tr.vb-sec td,tr.pt-sec td,
  .mx .mx-first,.mx .mx-second,.imp-table th{position:static!important}

  /* A printed report is the table and nothing else. Drop the whole filter/builder panel,
     and on any page that has a data table drop the summary tiles and chart panels too —
     the dashboard has no table, so its tiles and charts still print. */
  .panel:has(.report-bar){display:none!important}
  /* .print-keep opts a summary band back in — a stock sheet or statement is worth more
     with its headline figures on the page. */
  body:has(table.data) .cards:not(.print-keep),
  body:has(table.data) .mini-stats{display:none!important}

  /* Paper carries the figures, never the pictures. Every chart goes — the canvas itself,
     the panel built around it, and the inline SVG sparklines in report drill-downs. */
  canvas,.chart-area,.chart-2,.d-chart,.panel:has(canvas){display:none!important}
  /* in-cell and in-list proportion bars are pictures of a number that is already printed
     beside them, so the bar goes and the figure stays */
  .lvl-bar,.vv-bar,.v-bar,.dm-bar,.pct-bar{display:none!important}

  /* The register summary is figures, not pictures, so it belongs on the printout —
     but it must start on a fresh block and never split a tile across two pages. */
  .reg-sum{break-before:auto;break-inside:avoid;margin-top:14px;padding:10px 0 0;
    border:0!important;box-shadow:none!important;background:none!important}
  .reg-sum::before{display:none}
  .rs-tiles{grid-template-columns:repeat(6,1fr)!important;gap:6px}
  .rs-tile{break-inside:avoid;padding:7px 8px;background:none!important;
    border:1px solid #bbb!important;box-shadow:none!important;animation:none!important}
  .rs-tile .rs-ic{display:none}
  .rs-tile .rs-v{font-size:.9rem;padding-right:0}
  .rs-cols{break-inside:avoid;gap:10px}
  .rs-issues li{background:none!important;padding:3px 0 3px 8px}
  .rs-stamp{color:#555}

  @page{margin:14mm 12mm}
  html,body{background:#fff!important}
  body{font-size:11px;color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* letterhead, repeated visual identity without the app shell */
  .print-head{display:block;margin-bottom:5mm;padding-bottom:3mm;border-bottom:2.5px solid #111}
  .ph-row{display:flex;justify-content:space-between;align-items:baseline}
  .ph-brand{font-family:var(--font-display);font-weight:800;font-size:12.5px;letter-spacing:-.01em}
  .ph-brand span{font-weight:600;font-size:8.5px;letter-spacing:.18em;text-transform:uppercase;margin-left:7px;color:#555}
  .ph-stamp{font-size:8.5px;color:#555}
  .ph-title{font-family:var(--font-display);font-weight:800;font-size:19px;margin-top:2mm;line-height:1.15}
  .ph-meta{font-size:9.5px;color:#555;margin-top:1mm}

  /* the page's own heading is redundant next to the letterhead */
  .page-title{display:none}
  .wrap{max-width:100%;padding:0;margin:0}
  .split{display:block!important}
  .glass{box-shadow:none!important;border:none;background:#fff!important;backdrop-filter:none!important;border-radius:0}
  .panel{padding:0!important;margin:0 0 6mm!important;overflow:visible}
  .panel-head{margin-bottom:2.5mm;border-bottom:1px solid #ddd;padding-bottom:1.5mm}
  .panel-head h3{font-size:12px;font-weight:800}
  .panel-head h3 i{color:#000!important}

  /* --- tables --- */
  .table-scroll{max-height:none!important;min-height:0!important;overflow:visible!important;
    border:none;border-radius:0;background:none!important}
  table.data{min-width:0!important;width:100%;font-size:10px;border-collapse:collapse}
  /* repeat the header (and totals) on every printed page */
  table.data thead{display:table-header-group}
  table.data tfoot{display:table-footer-group}
  table.data thead th{
    position:static!important;color:#000;background:#eceff5!important;padding:4px 6px;
    border:.5px solid #8a8a8a;font-size:8.5px;
  }
  table.data thead th .fi{display:none}
  table.data tbody td{padding:3.5px 6px;border:.5px solid #c9c9c9;animation:none!important}
  table.data tbody tr{break-inside:avoid}
  table.data tbody tr:nth-child(even){background:#f7f8fb!important}
  table.data tfoot td{
    position:static!important;background:#eceff5!important;border:.5px solid #8a8a8a;color:#000;
    font-weight:800;padding:4px 6px;
  }
  /* long values print in full — clipping is a screen affordance only */
  table.data td.clip{max-width:none!important;white-space:normal!important;overflow:visible!important;
    text-overflow:clip!important;padding-right:6px!important}
  .badge{background:none!important;color:#000!important;padding:0;font-weight:600}

  .cards{gap:4mm;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
  .tile{padding:3mm;border:.5px solid #8a8a8a!important;break-inside:avoid}
  .tile::before{display:none}
  .tile .val{-webkit-text-fill-color:#000!important;color:#000!important;font-size:13px}
  .tile .lbl{color:#555!important;font-size:8.5px}

  /* analysis matrices: sticky columns would overlap the data on paper */
  .mx .mx-first,.mx .mx-second{position:static!important;background:#fff!important;min-width:0}
  .mx-in{border:none!important;background:transparent!important;color:#000!important;
    width:auto;padding:0;text-align:center;font-size:10px}
  .mat-grid{max-height:none!important;overflow:visible!important}

  .detail-row{break-inside:avoid}
  a[href]::after{content:""}   /* never append raw URLs */

  /* --- the panel components, flattened for paper --- */
  .vb-chips{display:flex;flex-wrap:wrap;gap:0;margin-bottom:3mm;border:.5px solid #8a8a8a}
  .vb-chip{flex:1 1 auto;padding:2mm 3mm;background:#fff!important;border:none;
    border-left:.5px solid #c9c9c9;border-radius:0}
  .vb-chip:first-child{border-left:none}
  .vb-chip small{color:#555!important;font-size:8px}
  .vb-chip b{color:#000!important;font-size:11px}

  /* section header rows inside a data table */
  tr.vb-sec td,tr.pt-sec td{background:#e7eaf2!important;border:.5px solid #8a8a8a;
    font-size:8.5px;padding:3px 6px!important}
  tr.pt-div td{background:#fff!important;border:none!important;height:auto!important;padding:3mm 0 1mm!important}
  tr.pt-div span{position:static!important;color:#000!important;font-size:8.5px}
  tr.pt-div span::before,tr.pt-div span::after{display:none}
  tr.vb-row.hide{display:table-row!important}   /* collapsed months still belong in the record */

  /* list-style rows (standing expenses, dues by month, vendor/material pickers) */
  .fx-row,.dm-row,.vl-row,.vb-vrow,.ar{border:.5px solid #c9c9c9;border-top:none;
    background:#fff!important;padding:2mm 3mm;border-radius:0!important;box-shadow:none!important}
  .fx-sec{background:#e7eaf2!important;border:.5px solid #8a8a8a;padding:2px 3mm;font-size:8.5px}
  .fx-ico,.ar-ico,.v-av,.vv-bar,.v-bar,.dm-bar,.pct-bar{display:none!important}
  .sum-hero,.sum-cells,.sum-cell,.stk-note,.alloc{background:#fff!important;
    border:.5px solid #8a8a8a;box-shadow:none!important;border-radius:0!important}
  .sum-big{font-size:16px}
  .sum-ring{display:none!important}     /* a conic gradient is wasted ink */
  .sum-bar{display:none!important}

  /* keep related blocks together where we can */
  .panel,.tile,.fx-row,.dm-row,.sum-hero,.vb-chips{break-inside:avoid}
  .vl-head,.panel-divider{break-after:avoid}
}

@media(max-width:1100px){
  .hamburger{display:grid}
  .app-nav{display:none;position:fixed;top:78px;left:14px;right:14px;flex-direction:column;
    padding:12px;z-index:1100;max-height:80vh;overflow:auto}
  .app-nav.open{display:flex}
  .app-nav>*,.has-sub{width:100%}
  .nav-link2{width:100%;justify-content:flex-start}
  .has-sub>[data-sub]{justify-content:space-between}
  .has-sub .caret{margin-left:auto}
  /* submenus collapsed by default; expand only when the group is tapped open */
  .has-sub .submenu,.has-sub:hover .submenu{position:static;display:none;margin:4px 0 8px 14px;
    box-shadow:none;background:transparent!important;border:none;animation:none;padding:0}
  .has-sub.open .submenu{display:flex}
  .has-sub::after{display:none!important}
  .user-chip span.uname{display:none}
}
.req{color:#ef4444;font-weight:800}

/* analysis matrix tables */
.mx td,.mx th{text-align:center;white-space:nowrap}
.mx td.mx-first,.mx th.mx-first{text-align:left}
.mx .mx-first{position:sticky;left:0;z-index:3;background:var(--surface-strong);min-width:160px;font-weight:700}
.mx .mx-second{position:sticky;left:160px;z-index:3;background:var(--surface-strong);min-width:80px;text-align:right;font-weight:700}
.mx thead th.mx-first,.mx thead th.mx-second{z-index:7}
.mx tfoot td.mx-first,.mx tfoot td.mx-second{z-index:7}
.mx tbody tr.zero td{background:color-mix(in srgb,#ef4444 9%,transparent)}
.mx tbody tr.zero td.mx-first{background:color-mix(in srgb,#ef4444 16%,var(--surface-strong))}
.mx tbody tr.picked td{background:color-mix(in srgb,#22c55e 22%,transparent)!important}
.mx tbody tr.picked td.mx-first,.mx tbody tr.picked td.mx-second{background:color-mix(in srgb,#22c55e 32%,var(--surface-strong))!important}
.mx tbody tr:hover td{background:color-mix(in srgb,var(--accent-1) 8%,transparent)}
.mx-in{width:74px;padding:4px 6px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--text);font-size:.8rem;text-align:right}
.mx-in:focus{outline:none;border-color:var(--accent-1)}
.mx-legend{display:flex;gap:16px;margin-bottom:10px;font-size:.78rem;color:var(--muted);flex-wrap:wrap}
.mx-legend .sw{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:5px;border:1px solid var(--border)}
.mx-legend .sw.zero{background:color-mix(in srgb,#ef4444 22%,transparent)}
.mx-legend .sw.filled{background:var(--surface)}
.mx-legend .sw.picked{background:color-mix(in srgb,#22c55e 42%,transparent)}
.imp-dls{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
.danger-txt{color:#ef4444!important}
.mat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px;
  max-height:480px;overflow-y:auto;align-content:start;padding:2px 4px 2px 2px}
.mat-grid::-webkit-scrollbar{width:11px}
.mat-grid::-webkit-scrollbar-track{background:color-mix(in srgb,var(--accent-1) 6%,transparent);border-radius:99px}
.mat-grid::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--accent-1),var(--accent-2));border-radius:99px;border:2px solid transparent;background-clip:padding-box}
.mat-grid .chip-check.on{border-color:var(--accent-1);background:color-mix(in srgb,var(--accent-1) 14%,transparent)}

/* import rows with a warning note (imported but menu not assigned) */
.ic.warn{background:color-mix(in srgb,#f59e0b 16%,transparent);color:#f59e0b}
.ir-warned{background:color-mix(in srgb,#f59e0b 8%,transparent)}
.ir-warned td{color:#b45309}
html[data-theme="dark"] .ir-warned td{color:#fbbf24}

/* ---------------- Color schemes (palette dropdown) ---------------- */
/* Picking a scheme themes the ENTIRE app: buttons, tiles, charts, table accents and the
   background wash all move together. "Default" sets nothing, which leaves each page with
   its own accent (Expense red, Sale green, and so on) exactly as before.
   html[data-scheme=…] outranks the :root accent block header.php prints, so no !important. */
html[data-scheme="aurora"]{--accent-1:#7c3aed;--accent-2:#22d3ee;--sch-1:#7c3aed;--sch-2:#22d3ee}
html[data-scheme="aurora"][data-theme="light"]{--bg:#f5f3ff;--bg2:#cffafe}
html[data-scheme="aurora"][data-theme="dark"]{--bg:#150733;--bg2:#052f3d}

html[data-scheme="ocean"]{--accent-1:#0284c7;--accent-2:#22d3ee;--sch-1:#0284c7;--sch-2:#22d3ee}
html[data-scheme="ocean"][data-theme="light"]{--bg:#e0f2fe;--bg2:#cffafe}
html[data-scheme="ocean"][data-theme="dark"]{--bg:#04141f;--bg2:#062f3d}

html[data-scheme="lagoon"]{--accent-1:#0d9488;--accent-2:#4ade80;--sch-1:#0d9488;--sch-2:#4ade80}
html[data-scheme="lagoon"][data-theme="light"]{--bg:#ccfbf1;--bg2:#dcfce7}
html[data-scheme="lagoon"][data-theme="dark"]{--bg:#03211d;--bg2:#052e16}

html[data-scheme="sunset"]{--accent-1:#f97316;--accent-2:#ec4899;--sch-1:#f97316;--sch-2:#ec4899}
html[data-scheme="sunset"][data-theme="light"]{--bg:#ffedd5;--bg2:#fce7f3}
html[data-scheme="sunset"][data-theme="dark"]{--bg:#1c0e07;--bg2:#3b0f24}

html[data-scheme="ruby"]{--accent-1:#e11d48;--accent-2:#fb923c;--sch-1:#e11d48;--sch-2:#fb923c}
html[data-scheme="ruby"][data-theme="light"]{--bg:#ffe4e6;--bg2:#ffedd5}
html[data-scheme="ruby"][data-theme="dark"]{--bg:#1f0611;--bg2:#3b1106}

html[data-scheme="forest"]{--accent-1:#059669;--accent-2:#84cc16;--sch-1:#059669;--sch-2:#84cc16}
html[data-scheme="forest"][data-theme="light"]{--bg:#dcfce7;--bg2:#ecfccb}
html[data-scheme="forest"][data-theme="dark"]{--bg:#05130b;--bg2:#16250a}

html[data-scheme="gold"]{--accent-1:#d97706;--accent-2:#facc15;--sch-1:#d97706;--sch-2:#facc15}
html[data-scheme="gold"][data-theme="light"]{--bg:#fef3c7;--bg2:#fefce8}
html[data-scheme="gold"][data-theme="dark"]{--bg:#1a1204;--bg2:#2a2205}

html[data-scheme="royal"]{--accent-1:#8b5cf6;--accent-2:#d946ef;--sch-1:#8b5cf6;--sch-2:#d946ef}
html[data-scheme="royal"][data-theme="light"]{--bg:#ede9fe;--bg2:#fae8ff}
html[data-scheme="royal"][data-theme="dark"]{--bg:#120b2a;--bg2:#2e1065}

html[data-scheme="midnight"]{--accent-1:#4f46e5;--accent-2:#38bdf8;--sch-1:#4f46e5;--sch-2:#38bdf8}
html[data-scheme="midnight"][data-theme="light"]{--bg:#e0e7ff;--bg2:#e0f2fe}
html[data-scheme="midnight"][data-theme="dark"]{--bg:#0a0f2b;--bg2:#0b2545}

html[data-scheme="slate"]{--accent-1:#475569;--accent-2:#94a3b8;--sch-1:#475569;--sch-2:#94a3b8}
html[data-scheme="slate"][data-theme="light"]{--bg:#f1f5f9;--bg2:#e2e8f0}
html[data-scheme="slate"][data-theme="dark"]{--bg:#0b1220;--bg2:#1e293b}

/* body gradients follow the scheme when set, else the page accent */
body{
  background-image:
    radial-gradient(60vw 60vw at 8% -10%, color-mix(in srgb,var(--sch-1,var(--accent-1)) 38%,transparent), transparent 60%),
    radial-gradient(55vw 55vw at 105% 12%, color-mix(in srgb,var(--sch-2,var(--accent-2)) 35%,transparent), transparent 60%),
    radial-gradient(50vw 50vw at 50% 115%, var(--bg2), transparent 60%);
}

/* scheme dropdown */
.scheme-menu{position:relative}
.scheme-pop{position:absolute;top:calc(100% + 8px);right:0;min-width:196px;padding:8px;display:none;
  flex-direction:column;gap:2px;z-index:1040;max-height:min(70vh,440px);overflow:auto}
.scheme-menu.open .scheme-pop{display:flex;animation:subIn .18s ease}
.scheme-pop button{display:flex;align-items:center;gap:10px;padding:8px 11px;border:0;background:none;
  border-radius:10px;font-weight:600;font-size:.83rem;color:var(--text);cursor:pointer;text-align:left;
  transition:background .15s,transform .15s var(--ease)}
.scheme-pop button small{font-weight:600;font-size:.66rem;color:var(--muted);letter-spacing:.02em}
.scheme-pop button.active{background:color-mix(in srgb,var(--accent-1) 12%,transparent)}
.scheme-pop button:hover{background:color-mix(in srgb,var(--accent-1) 14%,transparent);transform:translateX(2px)}
.scheme-pop button .fa-check{margin-left:auto;font-size:.7rem;color:var(--accent-1);visibility:hidden}
.scheme-pop button.active .fa-check{visibility:visible}
.sch-dot{width:16px;height:16px;border-radius:50%;flex:0 0 16px;
  background:linear-gradient(135deg,var(--d1) 0 50%,var(--d2) 50% 100%);
  box-shadow:0 0 0 2px color-mix(in srgb,var(--text) 12%,transparent)}