:root {
  --bg: #f3f6fc;
  --panel: #ffffff;
  --panel-2: #f0f5fd;
  --panel-3: #e7eefb;
  --border: #dfe8f7;
  --border-strong: #c7d6f0;
  --text: #0f1c37;
  --muted: #64749a;
  --muted-2: #8a97b8;
  --accent: #2563eb;
  --accent-2: #1d4ed8;
  --accent-soft: #eaf1ff;
  --good: #16a34a;
  --good-soft: #eafbf0;
  --warn: #d97706;
  --warn-soft: #fef6e8;
  --bad: #dc2626;
  --bad-soft: #fdeeee;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow-sm: 0 1px 2px rgba(16, 32, 64, 0.04), 0 1px 1px rgba(16, 32, 64, 0.03);
  --shadow-md: 0 8px 24px rgba(16, 32, 64, 0.07), 0 2px 6px rgba(16, 32, 64, 0.04);
  --shadow-lg: 0 20px 48px rgba(16, 32, 64, 0.14), 0 4px 12px rgba(16, 32, 64, 0.06);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* Stop the whole page rubber-banding/bouncing when you swipe past the top or bottom —
     that "everything shifts" motion isn't how native Android apps behave; only the content
     inside #app should ever scroll, and it should stop dead at its own edges. */
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed;
  width: 100%;
}
button, input, select, textarea { font-family: inherit; font-size: 15px; color: var(--text); }
a { color: var(--accent-2); }
h1, h2, h3 { font-family: inherit; letter-spacing: -0.01em; }

::selection { background: var(--accent-soft); color: var(--accent-2); }

#app {
  height: 100%;
  display: flex; flex-direction: column;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---- Top bar ---- */
.topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) 20px 10px;
  border-bottom: 1px solid var(--border); background: rgba(255,255,255,.85);
  backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
  position: sticky; top: 0; z-index: 30;
}
.topbar .brand {
  display: flex; align-items: center; white-space: nowrap;
}
.topbar .brand .brand-logo { height: 26px; width: auto; display: block; }
.topbar .who { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; flex-shrink: 0; margin-left: auto; }
.topbar .who span { display: none; }
.topbar .who button {
  background: var(--panel); border: 1px solid var(--border); color: var(--muted); border-radius: 9px;
  padding: 7px 12px; cursor: pointer; font-weight: 600; font-size: 13px; transition: border-color .15s, color .15s;
}
.topbar .who button:hover { border-color: var(--border-strong); color: var(--text); }
.plan-pill {
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--muted);
  cursor: pointer; white-space: nowrap;
}
.plan-pill.ok { background: var(--accent-soft); color: var(--accent-2); border-color: transparent; }
.plan-pill.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.plan-pill.bad { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
@media (min-width: 640px) { .topbar .who span { display: inline; } }

/* ---- Shell body: sidebar (mouse desktop only) + main content ----
   The touch/phone layout (bottom tab bar, floating "+", single-column cards) is the
   DEFAULT everywhere, including tablets — a tablet is still a touchscreen, so it should
   look and behave exactly like the phone app, just with more breathing room. The sidebar
   below is opt-in only for a wide screen driven by a mouse (a real desktop/laptop browser
   window), detected with "(pointer: fine)" so a touch-only tablet never gets it even at a
   wide/landscape resolution. */
.shell-body { flex: 1; display: flex; align-items: flex-start; width: 100%; }
main { flex: 1; padding: 14px; padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); max-width: 720px; width: 100%; margin: 0 auto; min-width: 0; }
@media (min-width: 900px) and (pointer: fine) {
  main { padding: 20px; padding-bottom: 20px; max-width: 1120px; }
}

/* ---- Sidebar nav (wide desktop/laptop browser windows only — not tablets) ---- */
.sidebar { display: none; }
@media (min-width: 900px) and (pointer: fine) {
  .sidebar {
    display: flex; flex-direction: column; gap: 2px; flex-shrink: 0;
    width: 234px; padding: 16px 12px; position: sticky; top: 57px;
    height: calc(100vh - 57px); overflow-y: auto;
    border-right: 1px solid var(--border);
  }
  .sidebar-group { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
  .sidebar-group-title {
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    color: var(--muted-2); padding: 12px 10px 6px;
  }
  .sidebar-group.sidebar-primary { margin-bottom: 14px; }
  .sidebar button {
    display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
    background: transparent; border: 1px solid transparent; color: var(--muted);
    padding: 10px 10px; border-radius: 10px; cursor: pointer;
    font-size: 14px; font-weight: 650; transition: background .15s, color .15s;
  }
  .sidebar button .icon-wrap { display: inline-flex; flex-shrink: 0; }
  .sidebar button svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.8; }
  .sidebar button:hover { background: var(--panel-2); color: var(--text); }
  .sidebar button.active { background: var(--accent-soft); color: var(--accent-2); }
}

/* ---- Bottom tab bar (mobile) ---- */
.bottom-nav {
  display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0);
}
.bottom-nav .row-inner { display: flex; }
.bottom-nav button {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; background: transparent; border: none; color: var(--muted); cursor: pointer;
  padding: 9px 2px 7px; font-size: 10.5px; font-weight: 650; box-shadow: none;
}
.bottom-nav button svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.bottom-nav button.active { color: var(--accent-2); }
@media (min-width: 900px) and (pointer: fine) {
  .bottom-nav { display: none; }
}

/* ---- "Menu" bottom sheet (grouped, like a native app's menu screen) ---- */
.menu-group { margin-bottom: 4px; }
.menu-group-title { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-2); padding: 14px 4px 6px; }
.menu-group:first-child .menu-group-title { padding-top: 2px; }
.more-sheet-list button {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left;
  background: transparent; border: none; box-shadow: none; padding: 12px 8px; color: var(--text);
  font-weight: 600; font-size: 14.5px; border-bottom: 1px solid var(--border); border-radius: 9px;
  transition: background .12s;
}
.more-sheet-list button:last-child { border-bottom: none; }
.more-sheet-list button:active { background: var(--panel-2); }
.more-sheet-list button svg {
  width: 32px; height: 32px; padding: 6px; box-sizing: border-box; border-radius: 9px;
  background: var(--accent-soft); stroke: var(--accent-2); fill: none; stroke-width: 1.8; flex-shrink: 0;
}
.more-sheet-list button.active { color: var(--accent-2); }
.more-sheet-list button.active svg { background: var(--accent); stroke: white; }
.more-sheet-list button.danger-text { color: var(--bad); }
.more-sheet-list button.danger-text svg { background: var(--bad-soft); stroke: var(--bad); }
.sidebar-group.sidebar-logout { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.sidebar-group.sidebar-logout button { color: var(--bad); }

/* ---- Floating "+" action button (mobile only) ---- */
.fab {
  display: none; position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(70px + env(safe-area-inset-bottom, 0) + 10px); z-index: 39;
  background: var(--accent); color: #fff; border: none; border-radius: 999px;
  padding: 12px 22px 12px 18px; font-weight: 700; font-size: 14px;
  box-shadow: var(--shadow-lg); align-items: center; gap: 7px;
}
.fab.show { display: inline-flex; }
@media (min-width: 900px) and (pointer: fine) { .fab.show { display: none; } }

/* ---- Cards & layout ---- */
.card {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s, transform .18s;
}
@media (hover: hover) {
  .card:hover { box-shadow: var(--shadow-md); }
}
.card h2 {
  margin: 0 0 14px; font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em;
  display: flex; align-items: center; gap: 9px;
}
.card h2::before {
  content: ''; width: 4px; height: 16px; border-radius: 3px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
/* ---- Plan comparison cards (Upgrade screen) ---- */
.plan-card { position: relative; display: flex; flex-direction: column; }
.plan-card.current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft) inset; }
.plan-badge {
  position: absolute; top: -10px; right: 14px; background: var(--accent); color: #fff;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em; padding: 4px 10px; border-radius: 999px;
}
.plan-name { margin: 4px 0 2px; font-size: 17px; font-weight: 800; }
.plan-price { font-size: 26px; font-weight: 800; color: var(--accent-2); margin-bottom: 10px; }
.plan-price span { font-size: 13px; font-weight: 600; color: var(--muted); }
.plan-features { list-style: none; margin: 0 0 16px; padding: 0; flex: 1; }
.plan-features li {
  font-size: 13.5px; color: var(--text); padding: 7px 0 7px 24px; position: relative;
  border-bottom: 1px solid var(--border);
}
.plan-features li:last-child { border-bottom: none; }
.plan-features li::before {
  content: ''; position: absolute; left: 2px; top: 11px; width: 14px; height: 14px; border-radius: 50%;
  background: var(--good-soft);
}
.plan-features li::after {
  content: '✓'; position: absolute; left: 5px; top: 8px; font-size: 10px; font-weight: 800; color: var(--good);
}
@media (max-width: 640px) { .plan-grid.grid.cols-2 { grid-template-columns: 1fr; } }

.grid { display: grid; gap: 12px; }
.grid.cols-2 { grid-template-columns: 1fr 1fr; }
.grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } }

label { display: block; font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
input, select, textarea {
  width: 100%; background: var(--panel-2); border: 1.5px solid var(--border); color: var(--text);
  border-radius: var(--radius-sm); padding: 10px 12px; outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus {
  border-color: var(--accent); background: var(--panel);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field { margin-bottom: 12px; }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 42px; }
.pw-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; margin: 0; color: var(--muted-2); cursor: pointer; border-radius: 8px;
}
.pw-toggle:hover { color: var(--muted); background: var(--panel-2); }
.pw-toggle.on { color: var(--accent); }

.logo-upload { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.logo-upload-preview {
  width: 64px; height: 64px; border-radius: 12px; border: 1.5px solid var(--border); background: var(--panel-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0;
}
.logo-upload-preview img { width: 100%; height: 100%; object-fit: cover; }
.logo-upload-preview span { font-size: 10.5px; color: var(--muted-2); text-align: center; }
.logo-upload-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- Buttons ---- */
.btn {
  background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: white; border: none; border-radius: 10px; padding: 11px 16px;
  cursor: pointer; font-weight: 650; font-size: 14px; transition: filter .15s, transform .1s, box-shadow .15s;
  box-shadow: 0 3px 10px rgba(37, 99, 235, .25);
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); filter: brightness(.98); }
.btn.secondary { background: var(--panel); border: 1.5px solid var(--border); color: var(--text); font-weight: 600; box-shadow: none; }
.btn.secondary:hover { border-color: var(--border-strong); background: var(--panel-2); }
.btn.danger { background: var(--bad); box-shadow: 0 1px 2px rgba(220,38,38,.15); }
.btn.danger:hover { background: #b91c1c; }
.btn.small { padding: 7px 12px; font-size: 12.5px; }
/* A native <select> sitting invisibly on top of an icon-only button — tapping the button area
   opens the real (native, accessible) picker, but visually only the filter icon shows. Used for
   the category filter on the Products screen, so it reads as an icon control instead of a wide
   "All categories" dropdown competing with the page title for space. */
.icon-select-wrap { position: relative; display: inline-flex; }
.icon-select-wrap .icon-btn { position: relative; width: 36px; height: 36px; padding: 0; display: flex; align-items: center; justify-content: center; }
.icon-select-wrap .icon-btn svg { width: 17px; height: 17px; }
.icon-select-wrap select { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.icon-select-wrap .icon-btn.active { border-color: var(--accent-2); color: var(--accent-2); background: var(--accent-soft); }
.icon-select-wrap .icon-btn.active::after { content: ''; position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); border: 1.5px solid var(--panel); }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }

/* ---- Tables ---- */
.card > table, .card > div > table { margin-top: 2px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; background: var(--panel-2); }
th:first-child { border-radius: 8px 0 0 8px; }
th:last-child { border-radius: 0 8px 8px 0; }
tbody tr { transition: background .12s; }
tbody tr:hover td { background: var(--accent-soft); cursor: pointer; }
tbody tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
  table { display: block; }
  thead { display: none; }
  tbody, tr, td { display: block; width: 100%; }
  tr { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; padding: 4px 0; box-shadow: var(--shadow-sm); }
  tr:last-child { margin-bottom: 0; }
  td {
    border-bottom: none; padding: 7px 12px; display: flex; align-items: baseline;
    justify-content: space-between; gap: 10px; text-align: right;
  }
  td:empty { display: none; }
  /* Every cell gets its column header as a label (see labelTable() in app.js) —
     without this a collapsed card is just a stack of bare numbers with no
     idea what they mean. */
  td[data-label]::before {
    content: attr(data-label); color: var(--muted); font-weight: 650; font-size: 11px;
    text-transform: uppercase; letter-spacing: .04em; flex-shrink: 0; text-align: left;
  }
  td:not([data-label]) { justify-content: flex-end; }
}

/* ---- Badges ---- */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; box-shadow: inset 0 0 0 1px rgba(0,0,0,.03); }
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.draft { background: #f1f3f9; color: #56607a; }
.badge.sent { background: #e8f0ff; color: #1d4ed8; }
.badge.paid { background: var(--good-soft); color: #0d7a3d; }
.badge.partially_paid { background: var(--warn-soft); color: #b45309; }
.badge.overdue { background: var(--bad-soft); color: #b91c1c; }
.badge.void { background: #f1f3f9; color: #97a1b8; }
.badge.unpaid { background: var(--bad-soft); color: #b91c1c; }
.badge.pending { background: var(--warn-soft); color: #b45309; }

/* ---- Offline sync indicator ---- */
.sync-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 999px; border: none;
  font-size: 12px; font-weight: 700; cursor: pointer;
  background: var(--warn-soft); color: #b45309;
}
.sync-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sync-badge.offline { background: #f1f3f9; color: #56607a; }

/* ---- Stat tiles ---- */
.stat { text-align: left; position: relative; overflow: hidden; }
.stat::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--accent), #60a5fa);
}
.stat .n { font-size: 25px; font-weight: 800; letter-spacing: -0.02em; }
.stat .l { color: var(--muted); font-size: 12.5px; margin-top: 3px; font-weight: 600; }
@media (hover: hover) {
  .stat:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
}

.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.muted { color: var(--muted); }
.error { color: var(--bad); font-size: 13px; margin-top: 8px; font-weight: 500; }
.success { color: var(--good); font-size: 13px; margin-top: 8px; font-weight: 500; }

/* ---- Auth screen ---- */
.auth-wrap {
  min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 7vh 20px 8vh;
  background: radial-gradient(1200px 600px at 50% -10%, #dce8ff 0%, var(--bg) 60%);
}
.auth-card {
  width: 100%; max-width: 400px; padding: 24px 22px;
  box-shadow: 0 10px 28px rgba(16, 32, 64, .08), 0 2px 8px rgba(16, 32, 64, .04);
  border: 1px solid var(--border);
}
.auth-brand {
  width: 100%; max-width: 250px; height: auto; margin-bottom: 18px;
  filter: drop-shadow(0 4px 10px rgba(15, 31, 56, .08)) contrast(1.08) saturate(1.05);
}
/* Small icon inside a login-screen input (phone/password) — purely decorative, doesn't
   change behavior, just fills a little of the empty space next to the placeholder text. */
.input-icon-wrap { position: relative; }
.input-icon-wrap input { padding-left: 40px; }
.input-icon-wrap svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 17px; height: 17px; color: var(--muted-2); pointer-events: none;
}
/* The eye-toggle button is injected by JS (enablePasswordToggles) as its own .pw-wrap
   nested inside .input-icon-wrap — reserve room for it there rather than expecting both
   classes on the same element. */
.input-icon-wrap .pw-wrap input { padding-right: 42px; }
.btn-arrow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.btn-arrow svg { width: 17px; height: 17px; transition: transform .15s; }
.btn-arrow:hover svg { transform: translateX(2px); }
/* Create / Track / Grow row below the login card — fills the empty space under the card
   without adding another block of text; icons + a two-word label + short subtext each. */
.auth-features {
  width: 100%; max-width: 400px; margin-top: 26px;
  display: flex; align-items: flex-start; justify-content: space-between;
}
.auth-features .feat { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.auth-features .feat .icon {
  width: 44px; height: 44px; border-radius: 50%; background: var(--accent-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 9px;
}
.auth-features .feat .icon svg { width: 20px; height: 20px; color: var(--accent-2); }
.auth-features .feat .label { font-weight: 700; font-size: 12.5px; color: var(--text); }
.auth-features .feat .sub { font-size: 10.5px; color: var(--muted-2); margin-top: 1px; }
.auth-features .divider { width: 1px; align-self: stretch; background: var(--border); margin-top: 22px; }
.auth-tabs {
  display: flex; gap: 2px; margin-bottom: 20px; background: var(--panel-2); padding: 3px; border-radius: 10px;
}
.auth-tab {
  flex: 1; background: transparent; border: none; box-shadow: none; color: var(--muted-2);
  font-weight: 600; font-size: 13.5px; padding: 9px 10px; border-radius: 7px; cursor: pointer;
  transition: background .15s, color .15s, box-shadow .15s;
}
.auth-tab:hover { color: var(--muted); }
.auth-tab.active { background: var(--panel); color: var(--accent-2); box-shadow: var(--shadow-sm); font-weight: 700; }
.auth-card .field { margin-bottom: 14px; }
.auth-card label { font-size: 11.5px; letter-spacing: .02em; text-transform: uppercase; font-weight: 700; color: var(--muted-2); margin-bottom: 6px; }
.forgot-pw-row { text-align: right; margin-top: 7px; margin-bottom: 4px; }
.forgot-pw-row a {
  font-size: 12.5px; font-weight: 600; color: var(--accent); text-decoration: none;
}
.forgot-pw-row a:hover { color: var(--accent-2); text-decoration: underline; }
.auth-card > .btn { margin-top: 4px; }

/* ---- Line-item editor ---- */
.item-row {
  position: relative;
  display: grid; grid-template-columns: 2fr 70px 90px 90px 70px 90px 30px; gap: 10px; align-items: end;
  margin-bottom: 12px; padding: 14px 40px 14px 14px; border-radius: var(--radius-sm);
  background: var(--panel); border: 1px solid var(--border); box-shadow: var(--shadow-sm);
  transition: box-shadow .15s;
}
@media (hover: hover) { .item-row:hover { box-shadow: var(--shadow-md); } }
.item-row .del {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--bad-soft); color: var(--bad); border: none; cursor: pointer;
  font-size: 13px; line-height: 1; transition: background .15s, color .15s;
}
.item-row .del:hover { background: var(--bad); color: #fff; }
.item-row .it-desc { font-size: 12.5px; color: var(--muted); }

@media (max-width: 800px) {
  .item-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "item item" "qty price" "disc gst" "total total";
    gap: 12px 12px; padding: 16px 40px 14px 16px;
  }
  .item-row > div:nth-child(1) { grid-area: item; }
  .item-row > div:nth-child(2) { grid-area: qty; }
  .item-row > div:nth-child(3) { grid-area: price; }
  .item-row > div:nth-child(4) { grid-area: disc; }
  .item-row > div:nth-child(5) { grid-area: gst; }
  .item-row > div:nth-child(6) {
    grid-area: total; display: flex; align-items: center; justify-content: space-between;
    margin-top: 2px; padding-top: 12px; border-top: 1px dashed var(--border);
  }
  .item-row > div:nth-child(6) label { margin-bottom: 0; }
  .item-row > div:nth-child(6) .it-total { font-size: 18px; font-weight: 800; color: var(--accent-2); }
}

/* Credit notes have a simpler 4-field row (no product picker, no delete button, no running
   line total) — its own compact grid rather than forcing it through the 7-column/6-area
   invoice-style layout above. */
.item-row-compact { grid-template-columns: 2fr 70px 90px 90px; padding-right: 14px; }
@media (max-width: 800px) {
  .item-row-compact {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "item item" "qty price" "gst gst";
    padding-right: 16px;
  }
  .item-row-compact > div:nth-child(1) { grid-area: item; }
  .item-row-compact > div:nth-child(2) { grid-area: qty; }
  .item-row-compact > div:nth-child(3) { grid-area: price; }
  .item-row-compact > div:nth-child(4) { grid-area: gst; }
}

.totals {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--radius-sm);
  background: var(--panel-2); border: 1px solid var(--border); font-size: 13.5px;
}
.totals .line { display: flex; justify-content: space-between; padding: 4px 0; }
.totals .grand {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 19px; font-weight: 800; letter-spacing: -0.01em;
  border-top: 1.5px dashed var(--border-strong); margin-top: 8px; padding-top: 12px;
}
.totals .grand span:last-child { color: var(--accent-2); }

/* ---- Modals ---- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(15, 28, 55, .45); display: flex; align-items: center;
  justify-content: center; z-index: 100; padding: 16px; backdrop-filter: blur(2px);
}
.modal {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px;
  max-width: 480px; width: 100%; max-height: 90vh; overflow: auto; box-shadow: var(--shadow-lg);
}
.modal h2 { margin-top: 0; display: flex; align-items: center; gap: 9px; }
.modal h2::before {
  content: ''; width: 4px; height: 16px; border-radius: 3px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
}
@media (max-width: 640px) {
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100%; max-height: 92vh; border-radius: 18px 18px 0 0;
    padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  }
}

code.key {
  background: var(--panel-3); padding: 10px 12px; border-radius: var(--radius-sm); display: block;
  word-break: break-all; margin: 8px 0; font-size: 13px; border: 1px dashed var(--border-strong);
}

/* Party (customer) list + detail — Vyapar-style drill-down */
.party-list { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.party-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; background: var(--panel);
  transition: background .12s ease;
}
.party-row:last-child { border-bottom: none; }
.party-row:hover, .party-row:active { background: var(--panel-2); }
.party-row .party-info { min-width: 0; flex: 1; }
.party-name { font-weight: 600; font-size: 15px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.party-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.party-bal { text-align: right; flex-shrink: 0; }
.party-bal .amt { font-weight: 700; font-size: 15px; display: block; }
.party-bal .lbl { font-size: 11px; display: block; margin-top: 1px; font-weight: 500; }
.party-bal.pos .amt { color: var(--good); }
.party-bal.pos .lbl { color: var(--good); }
.party-bal.neg .amt { color: var(--bad); }
.party-bal.neg .lbl { color: var(--bad); }
.party-bal.zero .amt { color: var(--muted); }
.party-bal.zero .lbl { color: var(--muted); }

.party-detail-header {
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 16px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.party-detail-header .pd-name { font-size: 19px; font-weight: 700; margin: 0 0 2px; }
.party-detail-header .pd-phone { font-size: 13px; color: var(--muted); margin: 0 0 12px; }
.party-detail-header .pd-balance { display: flex; align-items: baseline; gap: 8px; }
.party-detail-header .pd-balance .amt { font-size: 22px; font-weight: 700; }
.party-detail-header .pd-balance .lbl { font-size: 13px; font-weight: 600; }
.party-detail-header .pd-balance.pos .amt, .party-detail-header .pd-balance.pos .lbl { color: var(--good); }
.party-detail-header .pd-balance.neg .amt, .party-detail-header .pd-balance.neg .lbl { color: var(--bad); }
.party-detail-header .pd-balance.zero .amt, .party-detail-header .pd-balance.zero .lbl { color: var(--muted); }

.pd-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.pd-actions a, .pd-actions button {
  flex: 1; min-width: 110px; text-align: center; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--panel-2); color: var(--text);
  font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer;
}
.pd-actions a:active, .pd-actions button:active { background: var(--panel-3); }

.pd-back {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: none; color: var(--accent-2);
  font-weight: 600; font-size: 14px; padding: 4px 0 12px; cursor: pointer;
}

.statement-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.statement-table th, .statement-table td { padding: 8px 6px; border-bottom: 1px solid var(--border); text-align: right; }
.statement-table th:first-child, .statement-table td:first-child,
.statement-table th:nth-child(2), .statement-table td:nth-child(2) { text-align: left; }
.statement-table th { color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .02em; }
.statement-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 4px; font-weight: 700; }

/* ---- Home header (greeting + at-a-glance receivable/payable) ---- */
.home-header {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 60%, #1e3a8a 100%);
  border-radius: var(--radius); padding: 20px 18px; margin-bottom: 16px; color: #fff;
  box-shadow: 0 10px 28px rgba(29, 78, 216, .22), 0 2px 6px rgba(29, 78, 216, .12);
  position: relative; overflow: hidden;
}
.home-header::before {
  content: ''; position: absolute; right: -40px; top: -60px; width: 180px; height: 180px;
  border-radius: 50%; background: rgba(255,255,255,.08);
}
.home-header::after {
  content: ''; position: absolute; right: 30px; bottom: -70px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(255,255,255,.06);
}
.home-greet {
  font-size: 13px; font-weight: 600; opacity: .85; margin-bottom: 12px; position: relative;
}
.home-stats { display: flex; gap: 10px; position: relative; flex-wrap: wrap; }
.stat-pill {
  flex: 1; min-width: 140px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius-sm); padding: 12px 14px; backdrop-filter: blur(6px);
}
.stat-pill .dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #4ade80; margin-right: 6px;
  box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
}
.stat-pill.neg .dot { background: #f87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .25); }
.stat-pill .v { display: block; font-size: 19px; font-weight: 800; margin: 4px 0 2px; letter-spacing: -0.01em; }
.stat-pill .k { display: block; font-size: 12px; font-weight: 600; opacity: .85; }

/* ---- Segmented control (Invoices/Customers on Home) — a sliding-thumb
   toggle rather than the plain pill tabs used for auth screens. ---- */
.segment {
  position: relative; display: flex; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 4px; width: 100%; box-shadow: var(--shadow-sm);
}
.segment button {
  flex: 1 1 50%; width: 50%; position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  gap: 6px; background: transparent; border: none; box-shadow: none; color: var(--muted);
  padding: 11px 10px; font-weight: 650; font-size: 14px; transition: color .18s;
}
.segment button svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.segment button.active { color: var(--accent-2); }
.segment-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
  background: var(--panel); border-radius: 9px; box-shadow: var(--shadow-sm);
  transition: transform .22s cubic-bezier(.4,0,.2,1);
}
.segment.right .segment-thumb { transform: translateX(100%); }

/* ---- Bottom tab bar — premium pass: active tab gets a soft pill behind the
   icon (like iOS/Vyapar tab bars) instead of just a color change. ---- */
.bottom-nav {
  box-shadow: 0 -4px 20px rgba(16, 32, 64, .06);
}
.bottom-nav button { position: relative; transition: color .15s; }
.bottom-nav button .icon-wrap {
  display: flex; align-items: center; justify-content: center; width: 42px; height: 26px;
  border-radius: 999px; transition: background .18s, transform .12s;
}
.bottom-nav button.active .icon-wrap { background: var(--accent-soft); transform: translateY(-1px); }
.bottom-nav button:active .icon-wrap { transform: scale(.92); }

/* ---- FAB — premium gradient + lift ---- */
.fab {
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 24px rgba(37, 99, 235, .35), 0 2px 6px rgba(37, 99, 235, .2);
  transition: transform .12s, box-shadow .12s;
}
.fab:active { transform: translateX(-50%) scale(.96); box-shadow: 0 6px 16px rgba(37, 99, 235, .3); }

/* ---- Top bar — subtle depth to match ---- */
.topbar { box-shadow: 0 1px 0 rgba(16, 32, 64, .02); }

/* ---- Global toast — replaces plain text status lines buried at the bottom of a card with
   a themed popup near the top of the screen that appears immediately and fades on its own. */
.toast-stack {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  z-index: 9999; display: flex; flex-direction: column; gap: 8px; align-items: center;
  width: 100%; max-width: 420px; padding: 0 14px; pointer-events: none;
}
.toast {
  pointer-events: auto; display: flex; align-items: center; gap: 10px; width: 100%;
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); padding: 12px 14px; font-size: 13.5px; font-weight: 600;
  color: var(--text); opacity: 0; transform: translateY(-14px) scale(.97);
  transition: opacity .22s ease, transform .22s ease; cursor: pointer;
}
.toast.show { opacity: 1; transform: translateY(0) scale(1); }
.toast-icon {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-size: 12.5px; font-weight: 800; color: #fff;
}
.toast.success { border-color: var(--good); }
.toast.success .toast-icon { background: var(--good); }
.toast.error { border-color: var(--bad); }
.toast.error .toast-icon { background: var(--bad); }
.toast.info { border-color: var(--accent); }
.toast.info .toast-icon { background: var(--accent); }
.toast-text { flex: 1; line-height: 1.35; }
@media (max-width: 480px) {
  .toast-stack { max-width: none; }
}

/* ---- Dashboard tiles — every block is a shortcut into its own screen, not just a static
   number, so it needs the same tap affordance (pointer cursor, a subtle press, a chevron hint)
   as any other tappable row in the app. ---- */
.dash-tile { cursor: pointer; transition: transform .1s, box-shadow .15s; }
.dash-tile:active { transform: scale(.98); }
.stat-pill.dash-tile { cursor: pointer; transition: transform .1s, background .15s; }
.stat-pill.dash-tile:active { transform: scale(.97); background: rgba(255,255,255,.22); }
.topbar .brand .mark { box-shadow: 0 3px 8px rgba(37, 99, 235, .3); }