/* ==========================================================================
   হিসাবের বই — design system
   Palette taken from the approved mockups: emerald green primary,
   white cards on a soft grey canvas, red for money going out.
   ========================================================================== */

:root {
  /* brand */
  --green-50:  #ECFDF5;
  --green-100: #D1FAE5;
  --green-500: #16A34A;
  --green-600: #15803D;
  --green-700: #166534;

  --red-50:  #FEF2F2;
  --red-500: #EF4444;
  --red-600: #DC2626;

  --violet-500: #7C3AED;
  --violet-600: #6D28D9;
  --amber-500:  #F59E0B;
  --blue-500:   #3B82F6;

  /* surfaces */
  --bg:       #F4F6F8;
  --surface:  #FFFFFF;
  --surface-2:#F9FAFB;
  --line:     #E5E7EB;
  --ink:      #111827;
  --ink-2:    #374151;
  --muted:    #6B7280;
  --muted-2:  #9CA3AF;

  /* shape */
  --r-sm: 10px;
  --r:    14px;
  --r-lg: 20px;
  --r-full: 999px;

  --shadow-sm: 0 1px 2px rgba(16,24,40,.05);
  --shadow:    0 4px 14px rgba(16,24,40,.07);
  --shadow-lg: 0 12px 32px rgba(16,24,40,.12);

  --sidebar-w: 252px;
  --topbar-h:  60px;
  --bottomnav-h: 66px;

  --font: 'Anek Bangla', 'Hind Siliguri', system-ui, -apple-system, sans-serif;
  --font-num: 'Inter', 'Anek Bangla', system-ui, sans-serif;
}

[data-theme="dark"] {
  --bg:       #0F1512;
  --surface:  #171F1B;
  --surface-2:#1E2823;
  --line:     #2A352F;
  --ink:      #ECFDF5;
  --ink-2:    #D1FAE5;
  --muted:    #9CA3AF;
  --muted-2:  #6B7280;
  --green-50: #12241B;
  --green-100:#16311F;
  --red-50:   #2A1616;
  --shadow:   0 4px 14px rgba(0,0,0,.4);
  --shadow-lg:0 12px 32px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

a { color: var(--green-600); text-decoration: none; }
a:hover { color: var(--green-700); }
h1, h2, h3, h4 { margin: 0 0 8px; font-weight: 600; line-height: 1.3; }
p { margin: 0 0 8px; }

/* Bangla digits still look best in a tabular font */
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.text-muted   { color: var(--muted); }
.text-muted-2 { color: var(--muted-2); }
.text-success { color: var(--green-600) !important; }
.text-danger  { color: var(--red-600) !important; }
.text-center  { text-align: center; }
.text-end     { text-align: right; }

/* ==========================================================================
   Layout shell
   ========================================================================== */
.app-shell { min-height: 100vh; }

.sidebar {
  position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w);
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 16px 12px; overflow-y: auto; z-index: 40; display: none;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.sidebar-brand img, .brand-mark {
  width: 38px; height: 38px; border-radius: 11px; flex: none;
  background: var(--green-500); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 18px;
}
.sidebar-brand b { font-size: 16.5px; }
.sidebar-brand span { display: block; font-size: 11.5px; color: var(--muted); }

.nav-group { margin-bottom: 14px; }
.nav-label {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); padding: 0 10px; margin-bottom: 6px;
}
.nav-link {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 11px; border-radius: var(--r-sm);
  color: var(--ink-2); font-size: 14.5px; font-weight: 500;
  transition: background .15s ease, color .15s ease;
}
.nav-link svg { width: 18px; height: 18px; flex: none; }
.nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-link.active { background: var(--green-50); color: var(--green-600); font-weight: 600; }
.nav-link .badge-count {
  margin-left: auto; background: var(--red-500); color: #fff;
  font-size: 11px; padding: 1px 7px; border-radius: var(--r-full);
}

.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--topbar-h);
  background: var(--surface); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; gap: 10px; padding: 0 14px;
}
.topbar h1 { font-size: 17px; margin: 0; }
.topbar .sub { font-size: 12px; color: var(--muted); margin: 0; }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.icon-btn {
  width: 38px; height: 38px; border-radius: var(--r-sm);
  display: grid; place-items: center; border: 0;
  background: transparent; color: var(--ink-2); cursor: pointer; position: relative;
}
.icon-btn:hover { background: var(--surface-2); }
.icon-btn .dot {
  position: absolute; top: 8px; right: 9px; width: 8px; height: 8px;
  background: var(--red-500); border: 2px solid var(--surface); border-radius: 50%;
}

.page { padding: 14px 14px calc(var(--bottomnav-h) + 22px); max-width: 1240px; margin: 0 auto; }

@media (min-width: 992px) {
  .sidebar { display: block; }
  .app-shell { padding-left: var(--sidebar-w); }
  .page { padding: 20px 24px 40px; }
  .bottom-nav, .fab { display: none !important; }
}

/* ==========================================================================
   Cards & tiles
   ========================================================================== */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 16px; margin-bottom: 14px;
  box-shadow: var(--shadow-sm);
}
.card.pad-0 { padding: 0; }
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px;
}
.card-head h2 { font-size: 15.5px; margin: 0; }
.card-head h3 { font-size: 14px; margin: 0; }

/* The green summary block at the top of the dashboard */
.summary-hero {
  background: linear-gradient(135deg, var(--green-600), var(--green-500));
  color: #fff; border-radius: var(--r-lg); padding: 18px;
  margin-bottom: 14px; box-shadow: var(--shadow);
}
.summary-hero .label { font-size: 13px; opacity: .85; margin: 0 0 2px; }
.summary-hero .value { font-size: 30px; font-weight: 700; margin: 0; letter-spacing: -.5px; }
.summary-hero .split {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.22);
}
.summary-hero .split span { display: block; font-size: 11.5px; opacity: .85; }
.summary-hero .split strong { font-size: 15px; }

/* 2x2 (mobile) / 4-up (desktop) stat tiles */
.stat-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; margin-bottom: 14px;
}
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); } }

.stat {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 14px; box-shadow: var(--shadow-sm);
}
.stat-icon {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center; margin-bottom: 9px;
}
.stat-icon.income  { background: var(--green-50); color: var(--green-600); }
.stat-icon.expense { background: var(--red-50);   color: var(--red-600); }
.stat-icon.info    { background: #EFF6FF;         color: var(--blue-500); }
.stat-icon.warn    { background: #FFFBEB;         color: var(--amber-500); }
.stat-label { font-size: 12.5px; color: var(--muted); margin: 0 0 2px; }
.stat-value { font-size: 19px; font-weight: 700; margin: 0; }
.stat-value.income  { color: var(--green-600); }
.stat-value.expense { color: var(--red-600); }

/* ==========================================================================
   Alert strip (top of dashboard)
   ========================================================================== */
.alert-strip { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.alert-item {
  display: flex; align-items: center; gap: 11px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--muted-2);
  border-radius: var(--r-sm); padding: 10px 12px; color: var(--ink);
}
.alert-item.danger { border-left-color: var(--red-500);   background: var(--red-50); }
.alert-item.warn   { border-left-color: var(--amber-500); }
.alert-item.info   { border-left-color: var(--blue-500); }
.alert-item.ok     { border-left-color: var(--green-500); background: var(--green-50); }
.alert-item .ai-icon { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.alert-item p { margin: 0; }
.alert-item .t { font-size: 13.8px; font-weight: 600; }
.alert-item .b { font-size: 12px; color: var(--muted); }

/* ==========================================================================
   Hero slider
   ========================================================================== */
.hero-slider { position: relative; border-radius: var(--r-lg); overflow: hidden; margin-bottom: 14px; box-shadow: var(--shadow); }
.hero-track { display: flex; transition: transform .45s cubic-bezier(.4,0,.2,1); }
.hero-slide {
  min-width: 100%; padding: 20px; color: #fff;
  background: linear-gradient(135deg, var(--violet-600), var(--violet-500));
  display: flex; align-items: center; gap: 14px; min-height: 150px;
}
.hero-slide:nth-child(2n) { background: linear-gradient(135deg, var(--green-600), var(--green-500)); }
.hero-slide:nth-child(3n) { background: linear-gradient(135deg, #0EA5E9, var(--blue-500)); }
.hero-slide h3 { font-size: 17px; margin: 0 0 5px; }
.hero-slide p  { font-size: 13px; opacity: .9; margin: 0 0 11px; }
.hero-slide .btn-play {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(255,255,255,.95); color: var(--ink);
  padding: 8px 15px; border-radius: var(--r-full);
  font-size: 13.5px; font-weight: 600;
}
.hero-art { margin-left: auto; font-size: 46px; opacity: .9; flex: none; }
.hero-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.hero-dots span { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); cursor: pointer; }
.hero-dots span.on { background: #fff; width: 18px; border-radius: var(--r-full); }

/* ==========================================================================
   Quick actions
   ========================================================================== */
.quick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
@media (min-width: 768px) { .quick-grid { grid-template-columns: repeat(8, 1fr); } }
.quick-item {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 11px 4px; border-radius: var(--r-sm);
  background: var(--surface-2); color: var(--ink-2);
  font-size: 11.5px; text-align: center; line-height: 1.25;
  border: 1px solid transparent; transition: transform .12s ease;
}
.quick-item:active { transform: scale(.95); }
.quick-item:hover { border-color: var(--line); color: var(--ink); }
.quick-item .qi {
  width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; color: #fff;
}
.qi-green { background: var(--green-500); }
.qi-red   { background: var(--red-500); }
.qi-blue  { background: var(--blue-500); }
.qi-amber { background: var(--amber-500); }
.qi-violet{ background: var(--violet-500); }
.qi-teal  { background: #14B8A6; }
.qi-pink  { background: #EC4899; }
.qi-slate { background: #64748B; }

/* ==========================================================================
   Lists
   ========================================================================== */
.list { list-style: none; margin: 0; padding: 0; }
.list li {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
}
.list li:last-child { border-bottom: 0; }
.row-icon {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-2); color: var(--ink-2); font-weight: 600;
}
.row-body { flex: 1; min-width: 0; }
.row-title {
  margin: 0; font-size: 14.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row-meta { margin: 0; font-size: 12px; color: var(--muted); }
.row-amount { font-size: 15px; font-weight: 700; white-space: nowrap; }
.row-amount.in  { color: var(--green-600); }
.row-amount.out { color: var(--red-600); }

.day-divider {
  padding: 9px 16px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between;
}

/* ==========================================================================
   Buttons, badges, forms
   ========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 11px 18px; border: 0; border-radius: var(--r-sm);
  background: var(--green-500); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; transition: background .15s ease, transform .1s ease;
}
.btn:hover  { background: var(--green-600); color: #fff; }
.btn:active { transform: scale(.98); }
.btn[disabled] { opacity: .6; cursor: not-allowed; }
.btn.block { width: 100%; }
.btn.sm { padding: 7px 13px; font-size: 13.5px; }
.btn.ghost {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn.ghost:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { background: var(--red-500); }
.btn.danger:hover { background: var(--red-600); }

.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--r-full);
  font-size: 11.5px; font-weight: 600;
  background: var(--surface-2); color: var(--muted);
}
.badge.ok     { background: var(--green-50); color: var(--green-600); }
.badge.danger { background: var(--red-50);   color: var(--red-600); }
.badge.warn   { background: #FFFBEB;         color: #B45309; }
.badge.info   { background: #EFF6FF;         color: var(--blue-500); }

.form-label { display: block; font-size: 13.5px; font-weight: 500; margin-bottom: 5px; color: var(--ink-2); }
.form-control, .form-select {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink);
  font-family: inherit; font-size: 15px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-control:focus, .form-select:focus {
  outline: 0; border-color: var(--green-500);
  box-shadow: 0 0 0 3px var(--green-50);
}
.form-control.is-invalid { border-color: var(--red-500); }
.field-error { color: var(--red-600); font-size: 12.5px; margin-top: 4px; }
.field-hint  { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.mb-3 { margin-bottom: 14px; }

/* Big amount field on the add-entry screen */
.amount-input {
  font-size: 34px !important; font-weight: 700; text-align: center;
  font-family: var(--font-num); padding: 14px 10px !important;
  border: 0 !important; border-bottom: 2px solid var(--line) !important;
  border-radius: 0 !important; background: transparent !important;
}
.amount-input:focus { box-shadow: none !important; border-bottom-color: var(--green-500) !important; }

/* income / expense switch */
.type-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  background: var(--surface-2); padding: 5px; border-radius: var(--r);
  margin-bottom: 14px;
}
.type-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.type-toggle label {
  text-align: center; padding: 10px; border-radius: var(--r-sm);
  font-weight: 600; font-size: 14.5px; color: var(--muted); cursor: pointer;
  transition: all .15s ease;
}
.type-toggle input:checked + label.exp { background: var(--red-500);   color: #fff; }
.type-toggle input:checked + label.inc { background: var(--green-500); color: #fff; }

/* category chips */
.chip-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-grid input { position: absolute; opacity: 0; pointer-events: none; }
.chip-grid label {
  padding: 8px 14px; border-radius: var(--r-full);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 13.5px; cursor: pointer; transition: all .15s ease;
}
.chip-grid label:hover { border-color: var(--green-500); }
.chip-grid input:checked + label {
  background: var(--green-500); border-color: var(--green-500); color: #fff; font-weight: 600;
}

.seg { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.seg a, .seg button {
  padding: 7px 14px; border-radius: var(--r-full); white-space: nowrap;
  background: var(--surface-2); color: var(--ink-2);
  font-size: 13.5px; font-weight: 500; border: 0; cursor: pointer;
}
.seg a.active, .seg button.active { background: var(--green-500); color: #fff; font-weight: 600; }

/* ==========================================================================
   Tables
   ========================================================================== */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table thead th {
  text-align: left; padding: 11px 14px; white-space: nowrap;
  background: var(--surface-2); color: var(--muted);
  font-size: 12.5px; font-weight: 600; border-bottom: 1px solid var(--line);
}
.table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--surface-2); }
.table .right { text-align: right; }

/* ==========================================================================
   Progress, empty state, flash
   ========================================================================== */
.progress { height: 8px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.progress span { display: block; height: 100%; background: var(--green-500); border-radius: var(--r-full); }
.progress span.over { background: var(--red-500); }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty-icon {
  width: 62px; height: 62px; margin: 0 auto 14px; border-radius: 20px;
  display: grid; place-items: center; background: var(--surface-2); color: var(--muted-2);
}
.empty h3 { font-size: 16px; color: var(--ink); margin-bottom: 5px; }
.empty p { font-size: 13.5px; margin-bottom: 14px; }

.flash {
  display: flex; align-items: center; gap: 9px;
  padding: 12px 14px; border-radius: var(--r-sm);
  font-size: 14px; margin-bottom: 14px;
}
.flash.success { background: var(--green-50); color: var(--green-700); }
.flash.error   { background: var(--red-50);   color: #991B1B; }
.flash.info    { background: #EFF6FF;         color: #1E40AF; }

.toast-wrap { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); z-index: 90; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--ink); color: #fff; padding: 11px 18px;
  border-radius: var(--r-full); font-size: 14px; box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease;
}
.toast.success { background: var(--green-600); }
.toast.error   { background: var(--red-600); }
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ==========================================================================
   Bottom navigation + FAB (mobile)
   ========================================================================== */
.bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  height: var(--bottomnav-h);
  background: var(--surface); border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: 10.5px; color: var(--muted); font-weight: 500;
}
.bottom-nav a svg { width: 21px; height: 21px; }
.bottom-nav a.active { color: var(--green-600); }
.bottom-nav .slot-fab { visibility: hidden; }

.fab {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(var(--bottomnav-h) - 26px + env(safe-area-inset-bottom));
  width: 54px; height: 54px; border-radius: 50%; z-index: 45;
  background: var(--green-500); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 6px 18px rgba(22,163,74,.45);
  border: 4px solid var(--bg);
}
.fab:active { transform: translateX(-50%) scale(.94); }

/* ==========================================================================
   POS
   ========================================================================== */
.pos-wrap { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
@media (min-width: 992px) { .pos-wrap { grid-template-columns: 1.35fr 1fr; } }

.pos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 9px; }
.pos-item {
  display: flex; flex-direction: column; gap: 3px; text-align: left;
  padding: 11px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r); cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
}
.pos-item:active { transform: scale(.97); }
.pos-item:hover  { border-color: var(--green-500); }
.pos-item .n { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pos-item .r { font-size: 14px; font-weight: 700; color: var(--green-600); }
.pos-item .s { font-size: 11.5px; color: var(--muted); }

.pos-cart {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
  display: flex; flex-direction: column; position: sticky; top: 76px;
  max-height: calc(100vh - 100px);
}
.cart-head { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.cart-body { flex: 1; overflow-y: auto; padding: 4px 10px; min-height: 110px; }
.cart-foot { padding: 12px 15px; border-top: 1px solid var(--line); background: var(--surface-2); }
.cart-row  { display: flex; align-items: center; gap: 8px; padding: 9px 4px; border-bottom: 1px solid var(--line); }
.cart-row:last-child { border-bottom: 0; }
.cart-row .nm { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; }
.cart-row .rt { font-size: 11.5px; color: var(--muted); }
.qty-box { display: flex; align-items: center; gap: 2px; }
.qty-box button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: 15px; line-height: 1; cursor: pointer; }
.qty-box span { min-width: 26px; text-align: center; font-size: 13.5px; }
.cart-total div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13.5px; }
.cart-total .grand { border-top: 1px dashed var(--line); margin-top: 5px; padding-top: 7px; font-size: 17px; font-weight: 700; color: var(--green-600); }

/* ==========================================================================
   Print documents
   ========================================================================== */
.paper { background: #fff; color: #111; max-width: 820px; margin: 0 auto; padding: 26px; border-radius: 10px; box-shadow: var(--shadow); }
.inv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.inv-table th, .inv-table td { border: 1px solid #ccc; padding: 7px 9px; }
.inv-table thead th { background: #15803D; color: #fff; }
.paper .right { text-align: right; }
.thermal { width: 302px; margin: 0 auto; background: #fff; color: #000; padding: 10px; font-size: 12px; }
.t-center { text-align: center; }
.t-line { border-top: 1px dashed #000; margin: 6px 0; }
.t-table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.t-table td { padding: 1px 0; vertical-align: top; }
.t-table .right { text-align: right; }

@media print {
  .no-print, .sidebar, .topbar, .bottom-nav, .fab, .flash { display: none !important; }
  body { background: #fff !important; }
  .paper { box-shadow: none; padding: 0; max-width: none; }
  .page { padding: 0 !important; }
  .app-shell { padding-left: 0 !important; }
}
@page { margin: 12mm; }

/* ==========================================================================
   Auth screens
   ========================================================================== */
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; }
.auth-hero {
  background: linear-gradient(135deg, var(--green-600), var(--green-500));
  color: #fff; padding: 34px 22px 46px; text-align: center;
}
.auth-hero .brand-mark { width: 62px; height: 62px; border-radius: 19px; margin: 0 auto 12px; background: rgba(255,255,255,.18); font-size: 27px; }
.auth-hero h1 { font-size: 23px; margin: 0 0 4px; }
.auth-hero p  { font-size: 13.5px; opacity: .9; margin: 0; }
.auth-card {
  background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0;
  margin-top: -26px; padding: 24px 20px 34px; flex: 1;
  box-shadow: 0 -6px 24px rgba(16,24,40,.08);
}
@media (min-width: 768px) {
  .auth-wrap { justify-content: center; align-items: center; background: var(--bg); }
  .auth-card { max-width: 430px; width: 100%; border-radius: var(--r-lg); margin: -26px auto 30px; box-shadow: var(--shadow-lg); }
  .auth-hero { width: 100%; max-width: 430px; border-radius: var(--r-lg) var(--r-lg) 0 0; }
}
.social-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; padding: 11px; margin-bottom: 10px;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-2); font-size: 14.5px; font-weight: 500;
}
.social-btn:hover { background: var(--surface-2); color: var(--ink); }

.divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; }
.divider:before, .divider:after { content: ''; flex: 1; height: 1px; background: var(--line); }
.divider span { font-size: 12.5px; color: var(--muted-2); }

/* small helpers */
.row { display: flex; flex-wrap: wrap; margin: 0 -5px; }
.col { padding: 0 5px; flex: 1 0 0; }
.col-6 { padding: 0 5px; flex: 0 0 50%; max-width: 50%; }
.col-4 { padding: 0 5px; flex: 0 0 33.333%; max-width: 33.333%; }
.col-12 { padding: 0 5px; flex: 0 0 100%; max-width: 100%; }
@media (min-width: 768px) {
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-8 { flex: 0 0 66.666%; max-width: 66.666%; }
}
.d-flex { display: flex; }
.gap-2 { gap: 8px; }
.align-end { align-items: flex-end; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 14px; }

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



/* ==========================================================================
   Professional A4 invoice
   ========================================================================== */
.paper.inv { max-width: 860px; padding: 34px 38px; position: relative; color: #0F172A; }

.inv-head {
  display: flex; justify-content: space-between; gap: 20px;
  padding-bottom: 18px; border-bottom: 3px solid #15803D;
}
.inv-brand { display: flex; gap: 14px; align-items: flex-start; }
.inv-brand img { width: 68px; height: 68px; object-fit: contain; flex: none; }
.inv-mark {
  width: 68px; height: 68px; border-radius: 16px; flex: none;
  background: #15803D; color: #fff;
  display: grid; place-items: center; font-size: 30px; font-weight: 700;
}
.inv-head h1 { font-size: 23px; margin: 0 0 5px; color: #15803D; letter-spacing: -.3px; }
.inv-head p  { margin: 0; font-size: 12.3px; color: #475569; line-height: 1.6; }

.inv-meta { text-align: right; flex: none; }
.inv-tag {
  display: inline-block; background: #15803D; color: #fff;
  padding: 4px 16px; border-radius: 999px;
  font-size: 12.5px; font-weight: 600; letter-spacing: 1px; margin-bottom: 9px;
}
.inv-meta table { font-size: 12.3px; margin-left: auto; }
.inv-meta td { padding: 2px 0; color: #475569; }
.inv-meta td:first-child { padding-right: 12px; }
.inv-meta #qr { margin-top: 9px; display: flex; justify-content: flex-end; }

.inv-stamp {
  position: absolute; top: 190px; right: 60px;
  border: 3px solid #16A34A; color: #16A34A;
  padding: 6px 20px; border-radius: 8px;
  font-size: 20px; font-weight: 700; letter-spacing: 2px;
  transform: rotate(-14deg); opacity: .5;
}

.inv-parties {
  display: flex; justify-content: space-between; gap: 20px;
  margin: 20px 0; font-size: 13px; line-height: 1.7;
}
.inv-label {
  display: block; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase;
  color: #94A3B8; margin-bottom: 3px; font-weight: 600;
}

.paper .inv-table { width: 100%; border-collapse: collapse; font-size: 12.8px; }
.paper .inv-table thead th {
  background: #F1F5F9; color: #334155; text-align: left;
  padding: 9px 11px; border-bottom: 2px solid #CBD5E1; font-weight: 600;
}
.paper .inv-table tbody td { padding: 9px 11px; border-bottom: 1px solid #E2E8F0; }
.paper .inv-table .right { text-align: right; }
.paper .inv-table .inv-blank td { height: 30px; border-bottom: 1px solid #F1F5F9; }

.inv-foot-grid {
  display: flex; justify-content: space-between; gap: 26px; margin-top: 18px;
}
.inv-words { flex: 1; font-size: 12.3px; color: #475569; }
.inv-words p { margin: 0; line-height: 1.6; }

.inv-totals { font-size: 13px; min-width: 260px; flex: none; }
.inv-totals td { padding: 5px 0; color: #334155; }
.inv-totals .right { text-align: right; }
.inv-totals .grand td {
  border-top: 2px solid #15803D; border-bottom: 2px solid #15803D;
  font-size: 16px; font-weight: 700; color: #15803D; padding: 8px 0;
}
.inv-totals .due td { color: #DC2626; font-weight: 600; }

.inv-sign { display: flex; justify-content: space-between; margin-top: 52px; font-size: 12px; color: #475569; }
.inv-sign div { width: 180px; text-align: center; position: relative; }
.inv-sign .line { display: block; border-top: 1px solid #94A3B8; margin-bottom: 6px; }
.inv-sign .sig { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); max-height: 44px; }

.inv-thanks { text-align: center; font-size: 12.3px; color: #475569; margin-top: 24px; }
.inv-gen    { text-align: center; font-size: 10.5px; color: #94A3B8; margin-top: 3px; }


/* ==========================================================================
   Profile menu (topbar) — holds the language switch
   ========================================================================== */
.profile-menu { position: relative; }
.profile-initial {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--green-50); color: var(--green-600);
  display: grid; place-items: center; font-weight: 600; font-size: 14px;
}
.profile-drop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
  width: 236px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  display: none; opacity: 0; transform: translateY(-6px);
  transition: opacity .15s ease, transform .15s ease;
}
.profile-drop.open { display: block; opacity: 1; transform: none; }
.pd-head { padding: 10px 11px 9px; border-bottom: 1px solid var(--line); margin-bottom: 5px; }
.pd-head strong { display: block; font-size: 14.5px; }
.pd-head span { font-size: 12px; color: var(--muted); }
.pd-label {
  font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-2); margin: 8px 11px 5px; font-weight: 600;
}
.pd-lang {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
  padding: 0 7px 7px; margin-bottom: 5px; border-bottom: 1px solid var(--line);
}
.pd-lang button {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2);
  padding: 8px 4px; border-radius: var(--r-sm);
}
.pd-lang button.on {
  background: var(--green-500); border-color: var(--green-500); color: #fff; font-weight: 600;
}
.profile-drop a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 11px; border-radius: var(--r-sm);
  font-size: 14px; color: var(--ink-2);
}
.profile-drop a svg { width: 16px; height: 16px; }
.profile-drop a:hover { background: var(--surface-2); color: var(--ink); }


/* ==========================================================================
   Topbar on small screens — never let the title wrap onto two lines
   ========================================================================== */
.topbar { flex-wrap: nowrap; }

/* only the title block stretches — the icon row stays pinned right */
.topbar > div:not(.topbar-actions) { flex: 1 1 auto; min-width: 0; }
.topbar-actions { flex: 0 0 auto; margin-left: auto; }

.topbar h1, .topbar .sub {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}

@media (max-width: 480px) {
  .topbar { padding: 0 10px; gap: 7px; }
  .topbar h1 { font-size: 15.5px; }
  .topbar .sub { font-size: 11px; }
  .topbar-actions { gap: 2px; }
  .icon-btn { width: 34px; height: 34px; }

  /* pin the sheet to the viewport so it can never run off either edge */
  .profile-drop {
    position: fixed;
    top: calc(var(--topbar-h) + 6px);
    left: 12px; right: 12px; width: auto;
  }
}

/* above everything, including the FAB */
.profile-drop { z-index: 70; }

/* thermal receipt: logo and signature */
.thermal .t-logo {
  max-width: 120px; max-height: 52px; object-fit: contain;
  display: block; margin: 0 auto 5px;
}
.thermal .t-sign { max-width: 110px; max-height: 40px; object-fit: contain; display: block; margin: 0 auto; }
.thermal .t-sign-line {
  border-top: 1px solid #000; display: inline-block;
  padding-top: 3px; margin-top: 2px; font-size: 10.5px;
}

/* ==========================================================================
   Support chat — same bubbles on both sides of the conversation
   ========================================================================== */
.chat-wrap {
  display: flex; flex-direction: column;
  height: calc(100vh - var(--topbar-h) - var(--bottomnav-h) - 40px);
  min-height: 340px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); overflow: hidden;
}
.chat-wrap.admin { height: calc(100vh - 210px); }

.chat-log { flex: 1; overflow-y: auto; padding: 14px; background: var(--bg); }
.chat-day {
  text-align: center; font-size: 11.5px; color: var(--muted);
  background: var(--surface-2); border-radius: var(--r-full);
  padding: 4px 12px; width: fit-content; margin: 0 auto 14px;
}

.chat-log .msg {
  max-width: 78%; margin-bottom: 10px; padding: 9px 12px;
  border-radius: 14px; font-size: 14px; line-height: 1.55;
  box-shadow: var(--shadow-sm); position: relative;
}
.chat-log .msg p { margin: 0; word-break: break-word; }
.chat-log .msg img { max-width: 190px; border-radius: 9px; display: block; margin-bottom: 5px; }
.chat-log .msg .t { display: block; font-size: 10.5px; opacity: .65; margin-top: 4px; }

.chat-log .msg.in  { background: var(--surface); border-bottom-left-radius: 4px; margin-right: auto; }
.chat-log .msg.out {
  background: var(--green-500); color: #fff;
  border-bottom-right-radius: 4px; margin-left: auto;
}

.chat-box {
  display: flex; align-items: flex-end; gap: 8px;
  padding: 9px 10px; border-top: 1px solid var(--line); background: var(--surface);
}
.chat-box textarea {
  flex: 1; resize: none; border: 1px solid var(--line); border-radius: 18px;
  padding: 10px 14px; font-family: inherit; font-size: 14.5px;
  background: var(--surface-2); color: var(--ink); max-height: 110px;
}
.chat-box textarea:focus { outline: 2px solid var(--green-500); outline-offset: -1px; }
.chat-clip, .chat-send {
  width: 40px; height: 40px; border-radius: 50%; flex: none;
  display: grid; place-items: center; cursor: pointer; border: 0;
}
.chat-clip { background: var(--surface-2); color: var(--muted); }
.chat-send { background: var(--green-500); color: #fff; }

/* ==========================================================================
   Country code + phone number
   ========================================================================== */
.phone-row { display: flex; gap: 8px; }
.phone-row .phone-cc {
  flex: 0 0 132px; max-width: 132px;
  padding-left: 10px; padding-right: 22px;
  font-size: 13.5px;
}
.phone-row .phone-num { flex: 1; min-width: 0; }
@media (max-width: 380px) {
  .phone-row .phone-cc { flex-basis: 112px; max-width: 112px; font-size: 12.5px; }
}

/* ==========================================================================
   Voice entry — mic in the topbar, sheet with a confirm step
   ========================================================================== */
.mic-btn.on { background: var(--red-500); color: #fff; animation: micPulse 1.3s infinite; }
@keyframes micPulse {
  0%   { box-shadow: 0 0 0 0 rgba(239,68,68,.45); }
  70%  { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
  100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}

.voice-sheet {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(15,23,42,.55);
  display: none; align-items: flex-end; justify-content: center;
  padding: 14px;
}
.voice-sheet.open { display: flex; }
@media (min-width: 720px) { .voice-sheet { align-items: center; } }

.voice-card {
  position: relative; width: 100%; max-width: 430px;
  background: var(--surface); border-radius: 22px;
  padding: 26px 20px 20px; text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.3);
  animation: voiceUp .2s ease;
}
@keyframes voiceUp { from { transform: translateY(18px); opacity: 0; } }

.voice-close {
  position: absolute; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%; border: 0;
  background: var(--surface-2); color: var(--muted);
  display: grid; place-items: center; cursor: pointer;
}

.voice-orb {
  width: 86px; height: 86px; border-radius: 50%; margin: 4px auto 14px;
  background: var(--green-500); color: #fff;
  display: grid; place-items: center;
  animation: micPulse 1.3s infinite;
}
.voice-orb svg { width: 36px; height: 36px; }
.voice-orb.muted { background: var(--surface-2); color: var(--muted); animation: none; }

.voice-title { font-size: 18px; font-weight: 700; margin: 0 0 6px; }
.voice-hint  { font-size: 13px; color: var(--muted); margin: 0; line-height: 1.7; }
.voice-heard {
  font-size: 15px; color: var(--ink); margin: 12px 0 0;
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 10px 12px; min-height: 20px;
}
.voice-heard:empty { display: none; }

.voice-draft { margin-top: 14px; text-align: left; }
.vd-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 2px; border-bottom: 1px solid var(--line); font-size: 14.5px;
}
.vd-row:last-child { border-bottom: 0; }
.vd-row span { color: var(--muted); }

.voice-actions { display: grid; grid-template-columns: 1fr 1.4fr; gap: 9px; margin-top: 16px; }




/* ==========================================================================
   Press-and-hold mic
   ========================================================================== */
/* The button must never move or change size while a finger is on it —
   any layout shift drags it out from under the touch and aborts the hold. */
.voice-orb {
  width: 104px; height: 104px; border-radius: 50%;
  margin: 20px auto 12px; border: 0; cursor: pointer;
  background: var(--green-500); color: #fff;
  display: grid; place-items: center;
  box-shadow: 0 8px 22px rgba(22,163,74,.32);
  transition: background .18s ease, box-shadow .18s ease;   /* colour only */
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  user-select: none; -webkit-user-select: none;
  flex: none;
}
.voice-orb svg { width: 42px; height: 42px; pointer-events: none; }
.voice-orb.rec {
  background: var(--red-500);
  box-shadow: 0 0 0 10px rgba(239,68,68,.16), 0 8px 22px rgba(239,68,68,.3);
}
.voice-orb.muted { background: var(--surface-2); color: var(--muted); box-shadow: none; }

/* fixed heights so changing text cannot reflow the panel */
#voiceListen { min-height: 366px; }
.voice-title { min-height: 25px; }
.voice-hint  { min-height: 22px; }
.voice-hold-note { font-size: 12.5px; color: var(--muted-2); margin: 0 0 4px; min-height: 18px; }
.voice-heard { min-height: 44px; }
.voice-heard:empty { display: block; background: transparent; }

.voice-examples {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  transition: opacity .18s ease;
}
.voice-examples.dim { opacity: .25; }
.voice-examples p { font-size: 12px; color: var(--muted-2); margin: 0 0 8px; }
.voice-examples span {
  display: block; font-size: 13.5px; color: var(--ink-2);
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 8px 12px; margin-bottom: 6px;
}


/* holding the mic must not scroll or select anything behind the sheet */
.voice-sheet.open { touch-action: none; }
.voice-card { touch-action: pan-y; }
.voice-orb, .voice-orb * { touch-action: none; user-select: none; -webkit-user-select: none; }

/* "remember this device" on the login screen */
.remember-row {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--surface-2); border-radius: var(--r-sm);
  padding: 12px 13px; margin-bottom: 16px; cursor: pointer;
}
.remember-row input { width: auto; margin-top: 2px; flex: none; }
.remember-row strong { display: block; font-size: 14px; font-weight: 600; }
.remember-row small { font-size: 12px; color: var(--muted); }

/* voice confirm card: heading, warning, picker */
.voice-kind {
  display: inline-block; margin: 0 0 10px;
  background: var(--green-50); color: var(--green-700);
  border-radius: var(--r-full); padding: 5px 14px;
  font-size: 13px; font-weight: 600;
}
.voice-warn {
  background: var(--red-50); color: #991B1B;
  border-radius: var(--r-sm); padding: 9px 12px;
  font-size: 13px; margin: 10px 0 0; text-align: left;
}
#vdPicker { margin-top: 12px; text-align: left; }

/* ==========================================================================
   Invoice payment status
   ========================================================================== */
.pay-card { border-left: 4px solid var(--line); }
.pay-card.paid    { border-left-color: var(--green-500); }
.pay-card.partial { border-left-color: var(--amber-500); }
.pay-card.unpaid  { border-left-color: var(--red-500); }

.pay-split { display: flex; gap: 10px; margin-top: 10px; }
.pay-split div { flex: 1; }
.pay-split span { display: block; font-size: 12px; color: var(--muted); }
.pay-split strong { font-size: 17px; }

.pay-done {
  display: flex; align-items: center; gap: 8px; margin: 12px 0 0;
  background: var(--green-50); color: var(--green-700);
  border-radius: var(--r-sm); padding: 11px 13px; font-size: 14px; font-weight: 500;
}
.badge.warn { background: #FEF3C7; color: #92400E; }
.inv-stamp.partial { border-color: #D97706; color: #D97706; }
.inv-stamp.unpaid  { border-color: #DC2626; color: #DC2626; }

/* ==========================================================================
   A4 invoice — quiet, professional, printer-friendly
   ========================================================================== */
.jinv { position: relative; color: #111827; font-family: Inter, system-ui, sans-serif; }

.jinv-mark {
  position: absolute; top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  width: 320px; opacity: .06; pointer-events: none; z-index: 0;
}
.jinv > *:not(.jinv-mark) { position: relative; z-index: 1; }

.jinv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.jinv-logo { height: 46px; object-fit: contain; display: block; margin-bottom: 10px; }
.jinv-from h1 { font-size: 21px; font-weight: 700; margin: 0 0 6px; letter-spacing: -.2px; }
.jinv-from p  { font-size: 11.5px; line-height: 1.75; color: #4B5563; margin: 0; }

.jinv-title { text-align: right; }
.jinv-title h2 {
  font-size: 30px; font-weight: 800; margin: 0; letter-spacing: 1px; text-transform: uppercase;
}
.jinv-no { font-size: 11.5px; color: #6B7280; margin: 2px 0 12px; letter-spacing: .6px; }
.jinv-status { font-size: 15px; font-weight: 700; margin: 0; }
.jinv-status.paid    { color: #15803D; }
.jinv-status.partial { color: #B45309; }
.jinv-status.unpaid  { color: #B91C1C; }

.jinv-label {
  display: block; font-size: 8.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #9CA3AF; font-weight: 600; margin-bottom: 3px;
}
.jinv-meta {
  display: flex; justify-content: space-between; gap: 24px;
  margin: 34px 0 26px; font-size: 12.5px; line-height: 1.6;
}
.jinv-meta .right { text-align: right; }
.jinv-meta strong { font-weight: 700; }

.jinv-table { width: 100%; border-collapse: collapse; }
.jinv-table th {
  font-size: 8.5px; letter-spacing: 1.6px; text-transform: uppercase;
  color: #9CA3AF; font-weight: 600; text-align: left;
  padding: 0 10px 9px; border-bottom: 1px solid #E5E7EB;
}
.jinv-table td {
  font-size: 12.5px; padding: 11px 10px; border-bottom: 1px solid #F3F4F6;
}
.jinv-table .center, .jinv-table th.center { text-align: center; }
.jinv-table .right,  .jinv-table th.right  { text-align: right; }

.jinv-sum { display: flex; justify-content: flex-end; margin-top: 4px; }
.jinv-sum table { width: 290px; border-collapse: collapse; }
.jinv-sum td { font-size: 12.5px; padding: 8px 10px; }
.jinv-sum tr.grand td {
  font-size: 16px; font-weight: 700; border-top: 1px solid #E5E7EB; padding-top: 12px;
}
.jinv-sum tr.due td { color: #B91C1C; font-weight: 700; }

.jinv-foot {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 20px;
  margin-top: 90px;
}
.jinv-sign img { height: 40px; object-fit: contain; display: block; margin-bottom: 2px; }
.jinv-sign .line { display: block; width: 150px; border-top: 1px solid #111827; margin-bottom: 5px; }
.jinv-sign .cap  { font-size: 10.5px; color: #4B5563; }
.jinv-sign .pm   { font-size: 10.5px; color: #4B5563; margin: 9px 0 0; }
.jinv-thanks { font-size: 11.5px; color: #6B7280; text-align: center; padding-bottom: 8px; }
.jinv-qr { text-align: right; }
.jinv-qr svg { display: inline-block; }
.jinv-qr p { font-size: 9.5px; color: #6B7280; margin: 5px 0 0; line-height: 1.5; }

@media print {
  .no-print { display: none !important; }
  .jinv { padding: 0; }
  .jinv-mark { opacity: .05; }
}

/* invoice edit rows */
.edit-items td { vertical-align: top; padding: 9px 7px; }
.edit-items .form-control, .edit-items .form-select { padding: 7px 9px; font-size: 13.5px; }
.edit-items .line { padding-top: 15px; font-weight: 600; }

/* ==========================================================================
   Moderators
   ========================================================================== */
.ability-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px;
}
.ability {
  display: flex; align-items: center; gap: 9px; cursor: pointer;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 13.5px;
}
.ability input { width: auto; flex: none; }
.ability:has(input:checked) {
  background: var(--green-50); border-color: var(--green-500); color: var(--green-700);
}

.staff-card.paused { opacity: .62; }
.staff-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin-top: 12px;
}
.staff-stats div {
  background: var(--surface-2); border-radius: var(--r-sm); padding: 10px 12px;
}
.staff-stats span  { display: block; font-size: 11.5px; color: var(--muted); }
.staff-stats strong{ display: block; font-size: 16px; margin: 2px 0; }
.staff-stats small { font-size: 11px; color: var(--muted-2); }

.staff-perms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip {
  background: var(--green-50); color: var(--green-700);
  border-radius: var(--r-full); padding: 4px 11px; font-size: 12px; font-weight: 500;
}
.chip.muted { background: var(--surface-2); color: var(--muted); }

.week-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin-top: 10px; }
.wb { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; }
.wb-val { font-size: 10.5px; color: var(--muted); margin-bottom: 4px; }
.wb-bar {
  width: 100%; max-width: 38px; margin-top: auto;
  background: linear-gradient(180deg, var(--green-500), var(--green-600));
  border-radius: 6px 6px 0 0; min-height: 3px;
}
.wb-day { font-size: 11px; color: var(--muted); margin-top: 6px; }

/* ==========================================================================
   Shop switcher — sits under the summary card on the dashboard
   ========================================================================== */
.shop-switch { display: flex; flex-direction: column; gap: 9px; margin-bottom: 14px; }

.shop-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r); padding: 13px 14px; cursor: pointer;
  text-align: left; color: inherit; text-decoration: none;
  box-shadow: var(--shadow-sm); transition: border-color .15s, transform .1s;
}
.shop-btn:active { transform: scale(.995); }
.shop-btn.on { border-color: var(--green-500); background: var(--green-50); }

.shop-btn .sb-icon {
  width: 42px; height: 42px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--green-50); color: var(--green-600);
}
.shop-btn.on .sb-icon { background: var(--green-500); color: #fff; }
.shop-btn .sb-icon svg { width: 20px; height: 20px; }

.shop-btn .sb-body { flex: 1; min-width: 0; }
.shop-btn .sb-body strong {
  display: block; font-size: 15px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.shop-btn .sb-body small { font-size: 12px; color: var(--muted); }

.shop-btn .sb-go {
  display: flex; align-items: center; gap: 5px; flex: none;
  font-size: 12.5px; font-weight: 600; color: var(--green-600);
}
.shop-btn.on .sb-go { color: var(--green-700); }

/* ==========================================================================
   Save animations — a short scene per kind of entry
   ========================================================================== */
.cel-veil {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  background: rgba(15, 23, 42, .28);
  backdrop-filter: blur(2px);
  animation: celVeil .25s ease both;
  pointer-events: none;
}
.cel-veil.out { animation: celVeilOut .3s ease both; }
@keyframes celVeil    { from { opacity: 0; } }
@keyframes celVeilOut { to   { opacity: 0; } }

.cel-card {
  position: relative; width: 210px; min-height: 210px;
  background: var(--surface); border-radius: 26px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .28);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 22px 18px; overflow: hidden;
  animation: celPop .38s cubic-bezier(.2, 1.3, .4, 1) both;
}
@keyframes celPop { from { transform: scale(.72); opacity: 0; } }

.cel-stage { position: relative; width: 92px; height: 92px; }

.cel-badge {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center; margin: 0 auto;
  animation: celBadge .5s cubic-bezier(.2, 1.4, .4, 1) both;
}
@keyframes celBadge { from { transform: scale(.4) rotate(-14deg); opacity: 0; } }
.cel-badge svg { width: 38px; height: 38px; }

.cel-amount { font-size: 19px; font-weight: 700; animation: celRise .45s .12s ease both; }
.cel-note   { font-size: 12.5px; color: var(--muted); text-align: center;
              animation: celRise .45s .18s ease both; }
@keyframes celRise { from { transform: translateY(9px); opacity: 0; } }

/* rings that pulse outwards */
.cel-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid currentColor; opacity: .5;
  animation: celRing 1s ease-out forwards;
}
.cel-ring:nth-child(2) { animation-delay: .18s; }
@keyframes celRing { to { transform: scale(1.9); opacity: 0; } }

/* coins flying up (income, collection) or down (spending) */
.cel-coin {
  position: absolute; left: 50%; top: 50%;
  width: 17px; height: 17px; margin: -8px 0 0 -8px;
  border-radius: 50%; font-size: 10px; font-weight: 700;
  display: grid; place-items: center;
  background: #FACC15; color: #7C4A03;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .18);
}
.cel-up   .cel-coin { animation: celUp   .9s ease-out forwards; }
.cel-down .cel-coin { animation: celDown .9s ease-in  forwards; }
@keyframes celUp {
  0%   { transform: translate(0, 26px) scale(.5); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), -52px) scale(1); opacity: 0; }
}
@keyframes celDown {
  0%   { transform: translate(0, -34px) scale(.6); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), 40px) scale(.9); opacity: 0; }
}

/* a receipt sliding out of the printer, for sales */
.cel-receipt {
  position: absolute; left: 50%; top: 14px; width: 54px; margin-left: -27px;
  background: #fff; border-radius: 4px; padding: 7px 6px 9px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .18);
  animation: celPrint 1s cubic-bezier(.3, .9, .3, 1) both;
  transform-origin: top center;
}
.cel-receipt i { display: block; height: 3px; border-radius: 2px; background: #CBD5E1; margin-bottom: 4px; }
.cel-receipt i:nth-child(1) { width: 78%; }
.cel-receipt i:nth-child(2) { width: 56%; }
.cel-receipt i:nth-child(3) { width: 90%; }
.cel-receipt i:nth-child(4) { width: 44%; background: #16A34A; height: 5px; }
@keyframes celPrint { from { transform: scaleY(0); opacity: .2; } }

/* a carton dropping onto the shelf, for purchases and new stock */
.cel-box {
  position: absolute; left: 50%; top: 8px; width: 44px; height: 38px; margin-left: -22px;
  background: #F59E0B; border-radius: 5px;
  animation: celDrop .75s cubic-bezier(.4, 1.6, .5, 1) both;
}
.cel-box::after {
  content: ''; position: absolute; left: 0; right: 0; top: 15px;
  height: 5px; background: rgba(255, 255, 255, .55);
}
.cel-shelf {
  position: absolute; left: 12px; right: 12px; bottom: 16px; height: 5px;
  background: var(--line); border-radius: 3px;
}
@keyframes celDrop {
  0%   { transform: translateY(-46px) rotate(-8deg); opacity: 0; }
  60%  { transform: translateY(26px) rotate(2deg); opacity: 1; }
  100% { transform: translateY(20px) rotate(0); }
}

/* two hands passing money, for lending and borrowing */
.cel-hand {
  position: absolute; top: 50%; width: 30px; height: 30px; margin-top: -15px;
  border-radius: 8px; background: var(--surface-2);
  display: grid; place-items: center; color: var(--muted);
}
.cel-hand.left  { left: 2px; }
.cel-hand.right { right: 2px; }
.cel-hand svg { width: 17px; height: 17px; }
.cel-note-fly {
  position: absolute; top: 50%; left: 28px; width: 26px; height: 15px; margin-top: -8px;
  background: #22C55E; border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}
.cel-out .cel-note-fly { animation: celFlyRight .85s ease-in-out both; }
.cel-in  .cel-note-fly { animation: celFlyLeft  .85s ease-in-out both; }
@keyframes celFlyRight {
  0%   { transform: translateX(-16px) scale(.7); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(34px) scale(1); opacity: 0; }
}
@keyframes celFlyLeft {
  0%   { transform: translateX(34px) scale(.7); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateX(-16px) scale(1); opacity: 0; }
}

/* confetti, kept for the bigger moments */
.cel-bit {
  position: absolute; top: -6px; width: 7px; height: 11px; border-radius: 2px;
  animation: celFall 1.15s ease-in forwards;
}
@keyframes celFall {
  0%   { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(230px) rotate(420deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cel-coin, .cel-bit, .cel-receipt, .cel-box, .cel-note-fly, .cel-ring { animation: none; }
}