/* assets/css/tokens.css */
/* ==========================================================================
   Design tokens
   Three layers per theme, tuned for long sessions:
     1. Chrome  – sidebar + header, a deep ink-navy brand frame
     2. Page    – soft, low-glare canvas (never pure white / pure black)
     3. Surface – cards lifted one gentle step above the page
   Text never hits 100% contrast; accents are kept low-chroma so they
   guide the eye without vibrating.
   Light is the base; dark overrides via [data-theme="dark"].
   ========================================================================== */

:root {
  /* Fixed colours used by single components (lifted from the stylesheets, Hallmark Floor 1). */
  --c-oklch-0-32-0-08-262: oklch(0.32 0.08 262);
  --c-oklch-0-38-0-07-200: oklch(0.38 0.07 200);
  --c-oklch-0-42-0-17-350: oklch(0.42 0.17 350);
  --c-oklch-0-45-0-13-250: oklch(0.45 0.13 250);
  --c-oklch-0-52-0-19-30: oklch(0.52 0.19 30);
  --c-oklch-0-55-0-1-180: oklch(0.55 0.1 180);
  --c-oklch-0-6-0-2-360: oklch(0.6 0.2 360);
  --c-oklch-0-68-0-18-45: oklch(0.68 0.18 45);
  /* Solid fills that carry white text (4.5:1 or better). */
  --neg-solid: color-mix(in oklab, var(--neg) 78%, var(--c-black));
  --warn-solid: color-mix(in oklab, var(--warn) 70%, var(--c-black));
  --c-oklch-0-55-0-13-285: oklch(0.55 0.13 285);
  --c-047857: #047857;
  --c-0b2a4a: #0b2a4a;
  --c-111: #111;
  --c-121a2b: #121a2b;
  --c-1a2438: #1a2438;
  --c-1d2433: #1d2433;
  --c-333: #333;
  --c-3aa3e6: #3aa3e6;
  --c-444: #444;
  --c-4a5468: #4a5468;
  --c-6b7487: #6b7487;
  --c-8893a5: #8893a5;
  --c-999: #999;
  --c-b07a10: #b07a10;
  --c-b45309: #b45309;
  --c-bbb: #bbb;
  --c-black: #000;
  --c-c0602a: #c0602a;
  --c-c79a3e: #c79a3e;
  --c-dde1e8: #dde1e8;
  --c-e0a030: #e0a030;
  --c-e57d3a: #e57d3a;
  --c-eee: #eee;
  --c-eef3f8: #eef3f8;
  --c-f0a070: #f0a070;
  --c-f0c060: #f0c060;
  --c-f2f2f2: #f2f2f2;
  --c-f3d488: #f3d488;
  --c-f3f5f8: #f3f5f8;
  --c-f6f7f9: #f6f7f9;
  --c-oklch-0-0-0-0-08: oklch(0 0 0 / 0.08);
  --c-oklch-0-0-0-0-15: oklch(0 0 0 / 0.15);
  --c-oklch-0-0-0-0-5: oklch(0 0 0 / 0.5);
  --c-oklch-0-0-0-0-55: oklch(0 0 0 / 0.55);
  --c-oklch-0-3-0-03-258-0-04: oklch(0.3 0.03 258 / 0.04);
  --c-oklch-0-3-0-03-258-0-06: oklch(0.3 0.03 258 / 0.06);
  --c-oklch-0-3-0-06-258-0-35: oklch(0.3 0.06 258 / 0.35);
  --c-oklch-0-6-0-12-190-0-35: oklch(0.6 0.12 190 / 0.35);
  --c-oklch-0-6-0-19-355: oklch(0.6 0.19 355);
  --c-oklch-0-62-0-12-180-0-32: oklch(0.62 0.12 180 / 0.32);
  --c-oklch-0-62-0-13-230-0-5: oklch(0.62 0.13 230 / 0.5);
  --c-oklch-0-62-0-13-230-0-55: oklch(0.62 0.13 230 / 0.55);
  --c-oklch-0-7-0-17-25: oklch(0.7 0.17 25);
  --c-oklch-0-7-0-17-25-0-25: oklch(0.7 0.17 25 / 0.25);
  --c-oklch-0-72-0-16-150: oklch(0.72 0.16 150);
  --c-oklch-0-72-0-16-150-0-5: oklch(0.72 0.16 150 / 0.5);
  --c-oklch-0-75-0-14-162-0-2: oklch(0.75 0.14 162 / 0.2);
  --c-oklch-0-78-0-13-62-0-2: oklch(0.78 0.13 62 / 0.2);
  --c-oklch-0-8-0-1-228-0-55: oklch(0.8 0.1 228 / 0.55);
  --c-oklch-0-8-0-12-230: oklch(0.8 0.12 230);
  --c-oklch-0-8-0-12-230-0-25: oklch(0.8 0.12 230 / 0.25);
  --c-oklch-0-8-0-15-160: oklch(0.8 0.15 160);
  --c-oklch-0-8-0-15-160-0-25: oklch(0.8 0.15 160 / 0.25);
  --c-oklch-0-82-0-15-85: oklch(0.82 0.15 85);
  --c-oklch-0-82-0-15-85-0-25: oklch(0.82 0.15 85 / 0.25);
  --c-oklch-0-86-0-12-162: oklch(0.86 0.12 162);
  --c-oklch-0-86-0-12-70: oklch(0.86 0.12 70);
  --c-oklch-0-95-0-02-240: oklch(0.95 0.02 240);
  --c-oklch-1-0-0-0-06: oklch(1 0 0 / 0.06);
  --c-oklch-1-0-0-0-07: oklch(1 0 0 / 0.07);
  --c-oklch-1-0-0-0-08: oklch(1 0 0 / 0.08);
  --c-oklch-1-0-0-0-1: oklch(1 0 0 / 0.1);
  --c-oklch-1-0-0-0-12: oklch(1 0 0 / 0.12);
  --c-oklch-1-0-0-0-2: oklch(1 0 0 / 0.2);
  --c-oklch-1-0-0-0-22: oklch(1 0 0 / 0.22);
  --c-oklch-1-0-0-0-3: oklch(1 0 0 / 0.3);
  --c-rgb-0-0-0-0-18: rgb(0 0 0 / 0.18);
  --c-rgb-0-0-0-0-25: rgb(0 0 0 / 0.25);
  --c-rgb-15-23-42-0-14: rgb(15 23 42 / 0.14);
  --c-rgb-15-23-42-0-3: rgb(15 23 42 / 0.3);
  --c-rgb-15-23-42-0-4: rgb(15 23 42 / 0.4);
  --c-rgb-255-255-255-0-2: rgb(255 255 255 / 0.2);
  --c-rgb-255-255-255-0-28: rgb(255 255 255 / 0.28);
  --c-rgba-0-0-0-0-22: rgba(0, 0, 0, 0.22);
  --c-white: #fff;
  color-scheme: light;

  /* Type */
  --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Inter", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8125rem;
  --fs-md: 0.875rem;
  --fs-lg: 1rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.625rem;

  /* ---- Chrome (sidebar + header) ---- */
  --chrome-bg: oklch(0.275 0.048 258);
  --chrome-bg-2: oklch(0.245 0.045 262);
  --chrome-raised: oklch(0.32 0.05 258);
  --chrome-sunken: oklch(0.235 0.042 260);
  --chrome-hover: oklch(1 0 0 / 0.07);
  --chrome-active: oklch(0.78 0.1 230 / 0.16);
  --chrome-border: oklch(1 0 0 / 0.09);
  --chrome-border-strong: oklch(1 0 0 / 0.16);
  --chrome-txt: oklch(0.96 0.008 250);
  --chrome-muted: oklch(0.96 0.008 250 / 0.7);
  --chrome-faint: oklch(0.96 0.008 250 / 0.45);
  --chrome-accent: oklch(0.8 0.1 228);
  --chrome-accent-fg: oklch(0.24 0.045 258);

  /* ---- Header band: a colourful brand gradient (royal blue → azure → teal) ---- */
  --hdr-a: oklch(0.47 0.135 262);
  --hdr-b: oklch(0.55 0.13 240);
  --hdr-c: oklch(0.6 0.105 205);
  --hdr-ink: oklch(0.42 0.13 258);        /* text on white chips placed on the header */

  /* ---- Page + text ---- */
  --bg: oklch(0.962 0.007 248);
  --glow-1: oklch(0.9 0.04 235 / 0.5);
  --glow-2: oklch(0.93 0.03 200 / 0.45);
  --txt: oklch(0.31 0.03 258);
  --tx72: oklch(0.31 0.03 258 / 0.84);
  --tx60: oklch(0.31 0.03 258 / 0.7);
  --tx45: oklch(0.31 0.03 258 / 0.54);

  /* ---- Surfaces ---- */
  --surface: oklch(0.993 0.003 248);
  --surface-2: oklch(0.973 0.006 248);
  --surface-hover: oklch(0.955 0.01 248);
  --surface-active: oklch(0.93 0.028 245);
  --border: oklch(0.905 0.012 250);
  --border-strong: oklch(0.85 0.018 250);
  --input-border: oklch(0.79 0.022 252);   /* form fields: clearly visible edges */
  --input-bg: oklch(1 0 0);
  --overlay: oklch(0.25 0.04 258 / 0.45);
  --stage-bg: oklch(0.935 0.01 250);

  /* ---- Brand ---- */
  --accent: oklch(0.585 0.125 246);
  --accent-hover: oklch(0.53 0.125 248);
  --accent-fg: oklch(0.99 0.004 248);
  --accent-2: oklch(0.64 0.1 192);
  --accent-tint: color-mix(in oklab, var(--accent) 10%, transparent);
  --accent-tint-strong: color-mix(in oklab, var(--accent) 18%, transparent);
  --brand-grad: linear-gradient(135deg, oklch(0.74 0.12 230), oklch(0.6 0.13 250));

  /* ---- Status (muted, readable on both surfaces) ---- */
  --pos: oklch(0.56 0.11 162);
  --warn: oklch(0.63 0.13 62);
  --neg: oklch(0.57 0.17 25);

  /* Shape */
  --radius-xs: 6px;
  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 22px;

  /* Elevation – soft, cool-tinted shadows instead of hard borders */
  --shadow-sm: 0 1px 2px oklch(0.3 0.03 258 / 0.05);
  --shadow-card: 0 1px 2px oklch(0.3 0.03 258 / 0.04), 0 8px 24px -12px oklch(0.4 0.06 250 / 0.16);
  --shadow-pop: 0 18px 50px -12px oklch(0.3 0.05 258 / 0.28);
  --shadow-primary: 0 6px 16px -6px oklch(0.585 0.125 246 / 0.5);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8597' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --chev-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8597' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3C/svg%3E");
  --focus-ring: 0 0 0 3px oklch(0.585 0.125 246 / 0.25);

  /* Layout */
  --sidebar-w: 248px;
  --sidebar-w-collapsed: 72px;
  --topbar-h: 64px;
  --gutter: clamp(14px, 2.2vw, 28px);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.22s;
}

[data-theme="dark"] {
  color-scheme: dark;

  /* Chrome sits darker than the page so content feels lifted. */
  --chrome-bg: oklch(0.185 0.02 258);
  --chrome-bg-2: oklch(0.17 0.018 260);
  --chrome-raised: oklch(0.235 0.022 258);
  --chrome-sunken: oklch(0.16 0.018 260);
  --chrome-hover: oklch(1 0 0 / 0.05);
  --chrome-active: oklch(0.74 0.09 235 / 0.15);
  --chrome-border: oklch(1 0 0 / 0.06);
  --chrome-border-strong: oklch(1 0 0 / 0.12);
  --chrome-txt: oklch(0.9 0.01 250);
  --chrome-muted: oklch(0.9 0.01 250 / 0.66);
  --chrome-faint: oklch(0.9 0.01 250 / 0.42);
  --chrome-accent: oklch(0.76 0.095 232);
  --chrome-accent-fg: oklch(0.18 0.02 258);

  /* Deeper, calmer version of the header gradient so it glows without glaring at night. */
  --hdr-a: oklch(0.33 0.1 268);
  --hdr-b: oklch(0.39 0.11 246);
  --hdr-c: oklch(0.43 0.085 208);
  --hdr-ink: oklch(0.36 0.11 260);

  /* Soft slate rather than near-black; off-white text, not #fff. */
  --bg: oklch(0.215 0.018 256);
  --glow-1: oklch(0.32 0.05 245 / 0.35);
  --glow-2: oklch(0.3 0.04 205 / 0.25);
  --txt: oklch(0.9 0.01 250);
  --tx72: oklch(0.9 0.01 250 / 0.8);
  --tx60: oklch(0.9 0.01 250 / 0.66);
  --tx45: oklch(0.9 0.01 250 / 0.48);

  --surface: oklch(0.252 0.02 256);
  --surface-2: oklch(0.232 0.019 256);
  --surface-hover: oklch(0.285 0.022 255);
  --surface-active: oklch(0.32 0.04 248);
  --border: oklch(0.31 0.02 256);
  --border-strong: oklch(0.38 0.025 255);
  --input-border: oklch(0.47 0.03 254);
  --input-bg: oklch(0.215 0.018 256);
  --overlay: oklch(0.12 0.015 258 / 0.62);
  --stage-bg: oklch(0.19 0.017 257);

  --accent: oklch(0.74 0.105 236);
  --accent-hover: oklch(0.79 0.1 234);
  --accent-fg: oklch(0.2 0.025 258);
  --accent-2: oklch(0.76 0.09 190);
  --brand-grad: linear-gradient(135deg, oklch(0.78 0.1 228), oklch(0.66 0.12 250));

  --pos: oklch(0.75 0.11 165);
  --warn: oklch(0.79 0.11 75);
  --neg: oklch(0.71 0.14 25);

  --shadow-sm: 0 1px 2px oklch(0.08 0.01 258 / 0.3);
  --shadow-card: 0 1px 2px oklch(0.08 0.01 258 / 0.25), 0 10px 28px -14px oklch(0.06 0.01 258 / 0.55);
  --shadow-pop: 0 20px 56px -12px oklch(0.06 0.01 258 / 0.65);
  --shadow-primary: 0 6px 18px -8px oklch(0.74 0.105 236 / 0.45);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6b0c2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
  --chev-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6b0c2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3C/svg%3E");
  --focus-ring: 0 0 0 3px oklch(0.74 0.105 236 / 0.3);
}

/* Anything placed on the chrome re-maps the general tokens, so buttons,
   segmented controls, badges etc. adapt with no component changes. */
.on-chrome {
  --txt: var(--chrome-txt);
  --tx72: var(--chrome-txt);
  --tx60: var(--chrome-muted);
  --tx45: var(--chrome-faint);
  --surface: var(--chrome-raised);
  --surface-2: var(--chrome-sunken);
  --surface-hover: var(--chrome-hover);
  --border: var(--chrome-border);
  --border-strong: var(--chrome-border-strong);
  --input-border: var(--chrome-border-strong);
  --input-bg: var(--chrome-sunken);
  --accent: var(--chrome-accent);
  --accent-fg: var(--chrome-accent-fg);
  --accent-tint: var(--chrome-active);
  --bg: var(--chrome-bg);
  --shadow-sm: none;
  color: var(--txt);
}

/* assets/css/base.css */
/* Inter ships with the app (assets/fonts, SIL OFL) so the look is the same offline. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/inter-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/inter-800.woff2") format("woff2"); }

/* ==========================================================================
   Base: reset, typography, scrollbars, focus, utilities
   ========================================================================== */

/* Pin the ৳ glyph to a Bengali-capable system font so money renders consistently. */
@font-face {
  font-family: "Taka Glyph";
  src: local("Nirmala UI"), local("Noto Sans Bengali"), local("Vrinda");
  unicode-range: U+09F3;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Taka Glyph", var(--font);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--txt);
  background-color: var(--bg);
  background-image:
    radial-gradient(60rem 30rem at 90% -10%, var(--glow-1), transparent 65%),
    radial-gradient(50rem 28rem at -10% 110%, var(--glow-2), transparent 60%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background-color var(--dur), color var(--dur);
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure {
  margin: 0;
}

ul, ol {
  padding: 0;
  list-style: none;
}

img, svg {
  display: block;
  max-width: 100%;
}

.icon {
  flex: none;
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

[hidden] {
  display: none !important;
}

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

:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--border-strong) transparent;
}

::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 9px;
}

/* ---------- Utilities ---------- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -40px;
  z-index: 100;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  background: var(--accent);
  color: var(--accent-fg);
}

.skip-link:focus {
  top: 12px;
}

.muted { color: var(--tx60); }
.hint { color: var(--tx45); font-size: var(--fs-sm); }
.text-warn { color: var(--warn); font-weight: 600; }
.spacer { flex: 1; }
.stack { display: grid; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* assets/css/layout.css */
/* ==========================================================================
   Layout: app shell (sidebar, topbar, content)
   ========================================================================== */

.app {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
  transition: none;
}

.app.is-collapsed {
  grid-template-columns: var(--sidebar-w-collapsed) minmax(0, 1fr);
}

/* ---------- Sidebar ---------- */

.sidebar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  height: 100vh;
  padding: 14px 12px;
  background: linear-gradient(180deg, var(--chrome-bg), var(--chrome-bg-2));
  overflow: hidden;
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 18px;
}

/* SoftBill logo: the full wordmark, or the "S" mark when the rail is collapsed. */
.sidebar__brand img {
  flex: none;
  display: block;
  border-radius: 6px;
  box-shadow: var(--shadow-primary);
}

.sidebar__logo {
  height: 33px;
  width: auto;
}

.sidebar__mark {
  display: none !important;
  border-radius: 8px !important;
}

.sidebar__name {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.sidebar__name b {
  font-weight: 800;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sidebar__collapse {
  margin-left: auto;
  border: 1px solid var(--border);
  transition: transform 0.3s var(--ease);
}

.sidebar__nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0 -4px;
  padding: 0 4px;
  scrollbar-width: none;
}

.nav-group + .nav-group {
  margin-top: 6px;
}

.nav-group__label {
  padding: 10px 10px 4px;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tx45);
  white-space: nowrap;
}

.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--tx60);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur), color var(--dur);
}

.nav-link:hover {
  background: var(--surface-hover);
  color: var(--txt);
}

.nav-link.is-active {
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}

.nav-link.is-active::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 3px;
  background: var(--accent);
  transform: translateY(-50%);
}

.nav-link__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-link__badge {
  min-width: 20px;
  padding: 1px 7px;
  border-radius: 99px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-align: center;
  color: var(--neg);
  background: color-mix(in oklab, var(--neg) 15%, transparent);
}

.profile {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
  padding: 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.profile__text {
  display: grid;
  flex: 1;
  min-width: 0;
  line-height: 1.25;
  white-space: nowrap;
}

.profile__text b { font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; }
.profile__text small { color: var(--tx45); font-size: var(--fs-xs); }

/* Collapsed rail (desktop only) */
@media (min-width: 961px) {
  .app.is-collapsed .sidebar__logo {
    display: none !important;
  }

  .app.is-collapsed .sidebar__mark {
    display: block !important;
  }

  .app.is-collapsed .sidebar__name,
  .app.is-collapsed .nav-link__label,
  .app.is-collapsed .profile__text,
  .app.is-collapsed .profile__out {
    display: none;
  }

  .app.is-collapsed .sidebar__brand {
    flex-direction: column;
    gap: 12px;
  }

  .app.is-collapsed .sidebar__collapse {
    margin: 0;
    transform: rotate(180deg);
  }

  .app.is-collapsed .nav-group__label {
    height: 1px;
    margin: 8px 12px;
    padding: 0;
    overflow: hidden;
    background: var(--border);
    color: transparent;
  }

  .app.is-collapsed .nav-link {
    justify-content: center;
    padding: 0;
  }

  .app.is-collapsed .nav-link__badge {
    position: absolute;
    top: 3px;
    right: 6px;
    min-width: 16px;
    padding: 0 4px;
    color: var(--c-white);
    background: var(--neg-solid);
  }

  .app.is-collapsed .profile {
    justify-content: center;
    padding: 7px 0;
  }
}

/* ---------- Main + topbar ---------- */

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--chrome-bg);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 14px;
  height: var(--topbar-h);
  padding: 0 var(--gutter);
  overflow: visible;
  background: var(--chrome-bg);
}

.topbar__menu {
  display: none;
}

.topbar__title {
  min-width: 0;
  line-height: 1.2;
}

.topbar__crumb {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--tx45);
}

.topbar__h {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

/* The page is an inset canvas inside the chrome frame. */
.content {
  flex: 1;
  padding: var(--gutter);
  outline: none;
  box-shadow: inset 1px 1px 0 var(--chrome-border);
}

/* The page canvas: a flat, low-glare colour. Anything that must blend into it
   (e.g. the pinned editor toolbar strip) uses .page-surface. */
.content,
.page-surface {
  background-color: var(--bg);
}

.view {
  animation: view-in 0.35s var(--ease);
}

@keyframes view-in {
  from { opacity: 0; transform: translateY(6px); }
}

.scrim {
  display: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 960px) {
  .app,
  .app.is-collapsed {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 84vw);
    transform: translateX(-102%);
    transition: transform 0.3s var(--ease);
    box-shadow: var(--shadow-pop);
  }

  .app.is-nav-open .sidebar {
    transform: none;
  }

  .sidebar__collapse { display: none; }

  .scrim {
    position: fixed;
    inset: 0;
    z-index: 35;
    display: block;
    background: var(--overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
  }

  .app.is-nav-open .scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .topbar__menu {
    display: inline-grid;
    margin-left: -6px;
  }

  .content { box-shadow: none; }
}

@media (max-width: 560px) {
  .topbar { gap: 8px; }
  .topbar__crumb { display: none; }
  .topbar__actions { gap: 4px; }
}

/* ---------- Footer ---------- */

.app-foot {
  padding: 10px var(--gutter) 14px;
  background-color: var(--bg);
  color: var(--tx45);
  font-size: var(--fs-xs);
  text-align: center;
}
.app-foot b { color: var(--tx72); font-weight: 700; }
/* Full-height pages carry their own footer line. */
.app:is([data-route$="editor"], [data-route="email"]) .app-foot { display: none; }

/* assets/css/components.css */
/* ==========================================================================
   Components: buttons, forms, cards, badges, tables, dialogs, toasts …
   ========================================================================== */

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  padding: 0 15px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur), transform 0.12s;
}

.btn:active:not(:disabled) { transform: translateY(1px); }
.btn--sm { height: 32px; padding: 0 11px; gap: 6px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }

.btn--primary {
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: var(--shadow-primary);
}
.btn--primary:hover { background: var(--accent-hover); }

.btn--soft {
  background: var(--accent-tint);
  color: var(--accent);
}
.btn--soft:hover { background: var(--accent-tint-strong); }

.btn--ghost {
  background: var(--surface);
  border-color: var(--border);
  color: var(--txt);
}
.btn--ghost:hover { background: var(--surface-hover); border-color: var(--border-strong); }

.btn--danger {
  background: var(--neg-solid);
  color: var(--c-white);
}
.btn--danger:hover { filter: brightness(1.08); }

.btn-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-row--wrap { flex-wrap: wrap; }

.icon-btn {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--tx60);
  transition: background-color var(--dur), color var(--dur);
}
.icon-btn:hover { background: var(--surface-hover); color: var(--txt); }
.icon-btn--sm { width: 28px; height: 28px; }
.icon-btn--lg { position: relative; width: 38px; height: 38px; border-radius: var(--radius-md); }
.icon-btn--danger:hover { background: color-mix(in oklab, var(--neg) 12%, transparent); color: var(--neg); }

.link-btn {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}
.link-btn:hover { text-decoration: underline; }

.divider-v {
  width: 1px;
  height: 22px;
  background: var(--border);
}

/* ---------- Forms ---------- */

.input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--input-bg);
  color: var(--txt);
  font-size: var(--fs-md);
  box-shadow: inset 0 1px 2px var(--c-oklch-0-3-0-03-258-0-06);
  transition: border-color var(--dur);
}
.input::placeholder { color: var(--tx45); }
.input:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--input-border)); }
.input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
/* Larger fields for the things people type most (invoice editor, payments, email). */
.input--lg { height: 46px; padding: 0 14px; font-size: var(--fs-lg); font-weight: 500; }
.input--xl { height: 54px; padding: 0 16px; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
select.input--lg, select.input--xl { padding-right: 38px; }
textarea.input { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
select.input {
  padding-right: 34px;
  appearance: none;
  background: var(--input-bg) var(--chev) no-repeat right 11px center / 14px;
  cursor: pointer;
  text-overflow: ellipsis;
}
select.input:hover { background-color: var(--surface-2); }
select.input.is-open { border-color: var(--accent); box-shadow: var(--focus-ring); background-image: var(--chev-up); }
select.input:disabled { opacity: 0.55; cursor: not-allowed; }
.input--auto { width: auto; }
input[type="date"].input { min-width: 0; }
/* Hide the native up/down spinner on number fields (WebKit/Blink + Firefox). */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { appearance: none; -moz-appearance: textfield; }

.field {
  display: grid;
  align-content: start; /* a taller neighbour in the same grid row must not stretch the gap above the control */
  gap: 6px;
  min-width: 0;
}
.field--full { grid-column: 1 / -1; }
.field.is-invalid .input { border-color: var(--neg); }
.field__err { color: var(--neg); font-size: 0.6875rem; font-weight: 600; }
.field--inline { display: flex; align-items: center; gap: 8px; }
.field--inline .input { width: 160px; }
.field--inline .field__label { min-width: 2.6em; }
.cell-money { display: grid; justify-items: end; }

.field__label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx72);
}

.form-grid {
  display: grid;
  gap: 14px;
}
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid--3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1.2fr); }

@media (max-width: 520px) {
  .form-grid--2, .form-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* Image field in dialogs (App.modal.form type "image") */
.img-field {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px;
  border: 1.5px dashed var(--input-border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.img-field__prev {
  display: grid;
  place-items: center;
  flex: none;
  width: 72px;
  height: 72px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--tx45);
}
.img-field__prev img { width: 100%; height: 100%; object-fit: cover; background: var(--c-white); }
.img-field__body { display: grid; gap: 8px; min-width: 0; }
.img-field__body p { font-size: var(--fs-xs); color: var(--tx60); }

/* Item thumbnail in tables */
.cell-item { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cell-thumb {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.6875rem;
  font-weight: 700;
}
.cell-thumb img { width: 100%; height: 100%; object-fit: cover; background: var(--c-white); }

.search {
  position: relative;
  display: block;
  min-width: 0;
}
.search .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tx45); pointer-events: none; }
.search .input { padding-left: 36px; }

.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-md);
  cursor: pointer;
  user-select: none;
}
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track {
  position: relative;
  flex: none;
  width: 36px;
  height: 20px;
  border-radius: 20px;
  background: var(--border-strong);
  transition: background-color var(--dur);
}
.switch__track::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--c-white);
  box-shadow: 0 1px 3px var(--c-rgb-0-0-0-0-25);
  transition: transform 0.25s var(--ease);
}
.switch input:checked + .switch__track { background: var(--accent); }
.switch input:checked + .switch__track::after { transform: translateX(16px); }
.switch input:focus-visible + .switch__track { box-shadow: var(--focus-ring); }

.check {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.check:hover { background: var(--surface-hover); }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }
.check span:last-child { display: grid; line-height: 1.3; min-width: 0; }
.check small { color: var(--tx45); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; }

/* ---------- Segmented + chips + tabs ---------- */

.segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.segmented button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx60);
  transition: background-color var(--dur), color var(--dur);
}
.segmented button:hover { color: var(--txt); }
.segmented button.is-active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.segmented--sm button { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 99px;
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--tx72);
  transition: background-color var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur);
}
.chip:hover { border-color: var(--border-strong); color: var(--txt); }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

.tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}
.tabs__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 34px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx60);
  transition: background-color var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur);
}
.tabs__btn:hover { color: var(--txt); }
.tabs__btn.is-active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  min-width: 0;
}
.card--flush { overflow: hidden; }

.card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface-2) 70%, transparent);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.card__title { font-size: var(--fs-md); font-weight: 700; }
.card__body { padding: 18px; }

.page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  margin-bottom: 12px;
}
.page-head > div:first-child { min-width: 0; }
.page-head__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.page-head__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--tx60); font-size: var(--fs-xs); }
.page-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.page-head__actions .btn { height: 34px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.page-head__actions .search { width: 240px; }
.page-head__actions .search .input { height: 34px; }

/* Phones: the top bar already names the page, so the heading text goes and only the actions stay.
   Secondary (ghost) buttons shrink to icons; their text stays available to screen readers. */
@media (max-width: 640px) {
  .page-head { margin-bottom: 10px; }
  .page-head > div:first-child:not(.page-head__actions) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .page-head__actions { width: 100%; flex-wrap: nowrap; }
  .page-head__actions .search { flex: 1; width: auto; min-width: 0; }
  .page-head__actions .btn--ghost { width: 34px; padding: 0; font-size: 0; gap: 0; flex: none; }
  .page-head__actions .btn--primary { margin-left: auto; }
}

/* ---------- KPI (stat tiles) ----------
   Compact by design: label, value and one short line. They sit in a strip at the
   top of a page, so the page's main content starts high. On phones the strip
   scrolls sideways (one row) instead of stacking into a tall column. */

.grid:is(.grid--kpi, .grid--kpi-3, .grid--kpi-6) {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.kpi {
  --tone: var(--accent);
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--dur);
}
.kpi--pos { --tone: var(--pos); }
.kpi--warn { --tone: var(--warn); }
.kpi--neg { --tone: var(--neg); }
.kpi__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  color: var(--tone);
  background: color-mix(in oklab, var(--tone) 13%, transparent);
}
.kpi__icon .icon { width: 15px; height: 15px; }
.kpi__body { display: grid; flex: 1; align-content: start; min-width: 0; }
.kpi__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.625rem; font-weight: 600; color: var(--tx45); }
.kpi__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-display); font-size: 1rem; line-height: 1.3; font-weight: 800; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.kpi__hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; line-height: 1.3; color: var(--tx60); }
.kpi__value.is-pos { color: var(--pos); }
.kpi__value.is-warn { color: var(--warn); }
.kpi__value.is-neg { color: var(--neg); }
.kpi__body > .progress { height: 4px; margin: 3px 0 1px; }
.kpi__body > .delta { margin-top: 1px; overflow: hidden; text-overflow: ellipsis; }
/* A tile that gets narrow (six in a row, sidebar open) drops its icon so the number stays whole. */
.kpi { container-type: inline-size; }
@container (max-width: 200px) {
  .kpi__icon { display: none; }
}
.kpi--btn { width: 100%; text-align: left; cursor: pointer; }
.kpi--btn:hover { border-color: color-mix(in oklab, var(--tone) 45%, var(--border)); }
.kpi--btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Phones: one swipeable row of small tiles; hints give way to the numbers. */
@media (max-width: 640px) {
  .grid:is(.grid--kpi, .grid--kpi-3, .grid--kpi-6) {
    display: flex;
    gap: 8px;
    margin: 0 calc(var(--gutter) * -1) 10px;
    padding: 0 var(--gutter) 2px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .grid:is(.grid--kpi, .grid--kpi-3, .grid--kpi-6)::-webkit-scrollbar { display: none; }
  .grid:is(.grid--kpi, .grid--kpi-3, .grid--kpi-6) > .kpi { flex: 0 0 auto; width: max(42%, 148px); max-width: 210px; scroll-snap-align: start; }
  .kpi { padding: 7px 10px; }
  .kpi__icon { display: none; }
  .kpi__hint { display: none; }
  .kpi__value { font-size: 0.9375rem; }
}

/* ---------- Badges, tags, avatars ---------- */

.badge {
  --tone: var(--tx60);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  font-size: 0.71875rem;
  font-weight: 700;
  color: var(--tone);
  background: color-mix(in oklab, var(--tone) 13%, transparent);
  white-space: nowrap;
  vertical-align: middle;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge--info { --tone: var(--accent); }
.badge--pos { --tone: var(--pos); }
.badge--warn { --tone: var(--warn); }
.badge--neg { --tone: var(--neg); }
.badge--muted { --tone: var(--tx45); text-decoration: line-through; }

.tag {
  display: inline-block;
  padding: 2px 9px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  font-weight: 600;
  background: var(--surface-hover);
  color: var(--tx72);
}
.tag--accent { background: var(--accent-tint); color: var(--accent); }
.tag--warn { background: color-mix(in oklab, var(--warn) 14%, transparent); color: color-mix(in oklab, var(--warn) 80%, var(--txt)); }

.avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-grad);
  color: var(--c-white);
  font-size: var(--fs-sm);
  font-weight: 700;
}
.avatar--sm { width: 32px; height: 32px; font-size: 0.6875rem; }

.presence {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--surface);
  background: var(--tx45);
}
.presence.is-on { background: var(--pos); }

.dot-count {
  position: absolute;
  top: 4px;
  right: 4px;
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 99px;
  border: 2px solid var(--bg);
  background: var(--neg-solid);
  color: var(--c-white);
  font-size: 0.625rem;
  font-weight: 700;
}

/* ---------- Lists ---------- */

.list { display: grid; gap: 2px; }
.list__row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border-radius: var(--radius-md);
  text-align: left;
  transition: background-color var(--dur);
}
button.list__row:hover { background: var(--surface-hover); }
.list__main { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.list__main b { font-weight: 600; }
.list__main small { color: var(--tx45); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list__amt { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 36px 16px;
  color: var(--tx45);
  text-align: center;
}

/* ---------- Table ---------- */

.table-toolbar { margin-bottom: 14px; }
.table-wrap { position: relative; overflow-x: auto; }

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-md);
}
.table th {
  position: sticky;
  top: 0;
  padding: 11px 16px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: left;
  color: var(--tx45);
  white-space: nowrap;
  user-select: none;
}
.table th.is-sortable { cursor: pointer; }
.table th.is-sortable:hover { color: var(--txt); }
.sort-ind { margin-left: 4px; color: var(--accent); }
.table td, .table th { white-space: nowrap; }
.table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.table tbody tr { transition: background-color var(--dur); }
.table tbody tr:hover { background: var(--surface-hover); }
.table tbody tr:last-child td { border-bottom: 0; }
.t-right { text-align: right !important; }
.t-num { font-variant-numeric: tabular-nums; font-weight: 600; }
.t-actions { white-space: nowrap; text-align: right; }
.t-actions .icon-btn { display: inline-grid; }

.cell-strong { font-weight: 600; }
.cell-sub { font-size: var(--fs-xs); color: var(--tx45); font-weight: 400; }
.cell-person { display: flex; align-items: center; gap: 10px; }

.table-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-sm);
  color: var(--tx60);
}
.pager { display: flex; align-items: center; gap: 10px; }

/* Tables become stacked cards on phones. */
@media (max-width: 640px) {
  .table thead { display: none; }
  .table, .table tbody, .table tr, .table td { display: block; width: 100%; }
  .table tr { padding: 10px 14px; border-bottom: 1px solid var(--border); }
  .table td { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; text-align: right; }
  .table td::before { content: attr(data-label); font-size: var(--fs-xs); font-weight: 600; color: var(--tx45); text-align: left; }
  .table td.t-actions { justify-content: flex-end; padding-top: 8px; }
  .table td.t-actions::before { content: none; }
  .cell-person { text-align: left; }
}

/* ---------- Modal ---------- */

.modal {
  width: min(680px, calc(100% - 24px));
  max-height: calc(100vh - 32px);
  padding: 0;
  overflow: hidden; /* only .modal__body scrolls — otherwise the dialog gets a second scrollbar */
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  color: var(--txt);
  box-shadow: var(--shadow-pop);
  animation: modal-in 0.28s var(--ease);
}
.modal--sm { width: min(420px, calc(100% - 24px)); }
.modal--lg { width: min(920px, calc(100% - 24px)); }
.modal::backdrop { background: var(--overlay); backdrop-filter: blur(3px); animation: fade-in 0.2s; }
.modal.is-closing { animation: modal-out 0.16s forwards; }
.modal__inner { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.modal__head, .modal__foot { flex: none; }
.modal__head { display: flex; align-items: center; justify-content: space-between; padding: 18px 26px 10px; }
.modal__title { font-size: var(--fs-lg); font-weight: 700; }
.modal__body { flex: 1 1 auto; min-height: 0; padding: 14px 26px 18px; overflow-y: auto; scrollbar-gutter: stable; overscroll-behavior: contain; }
.modal__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 26px 18px; border-top: 1px solid var(--border); }
.modal .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.modal .form-grid > .field:first-child { grid-column: 1 / -1; }
@media (max-width: 520px) { .modal .form-grid { grid-template-columns: minmax(0, 1fr); } }
/* Main fields on the left, `aside` fields (e.g. Notes) in a full-height column on the right */
.form-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: 16px; align-items: stretch; }
.modal .form-split .form-grid > .field:first-child { grid-column: auto; } /* first field is half width beside the next one */
.form-aside { display: flex; flex-direction: column; }
.form-aside .field { flex: 1; display: flex; flex-direction: column; }
.form-aside textarea.input { flex: 1; min-height: 120px; resize: none; }
@media (max-width: 700px) { .form-split { grid-template-columns: minmax(0, 1fr); } }

@keyframes modal-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes modal-out { to { opacity: 0; transform: translateY(6px) scale(0.98); } }
/* Clicked outside a form dialog: a small shake instead of closing it. */
.modal.is-nudge { animation: modal-nudge 0.3s; }
@keyframes modal-nudge { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .modal.is-nudge { animation: none; } }
@keyframes fade-in { from { opacity: 0; } }

/* ---------- Popover / notifications ---------- */

.bell { position: relative; }
.popover {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 80;
  width: min(320px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  padding: 6px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  animation: modal-in 0.2s var(--ease);
}
.popover--panel { z-index: 90; }
.popover__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px 8px; }
.popover__head b { font-size: var(--fs-md); }
.notif { margin: 0; padding: 0 4px 6px; list-style: none; }
.notif li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 10px; border-radius: var(--radius-sm); color: var(--tx72); }
.notif li.is-unread { background: color-mix(in oklab, var(--accent) 8%, transparent); color: var(--txt); font-weight: 500; }
.notif__dot { width: 7px; height: 7px; border-radius: 50%; background: transparent; flex: none; }
.notif li.is-unread .notif__dot { background: var(--accent); }
.notif__ico {
  display: grid; place-items: center; flex: none; width: 28px; height: 28px;
  border-radius: 8px; background: var(--surface-2); color: var(--tx60);
}
.notif li.is-unread .notif__ico { background: var(--accent-tint); color: var(--accent); }
.notif__body { min-width: 0; flex: 1; }
.notif__body p { margin: 0; font-size: var(--fs-sm); line-height: 1.4; overflow-wrap: anywhere; }
.notif__body small { color: var(--tx45); font-size: var(--fs-xs); }
.notif__empty { display: grid; justify-items: center; gap: 8px; padding: 22px 12px; color: var(--tx45); text-align: center; }

/* ---------- Select panel (ui/select.js) ---------- */

.cs-panel {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 300;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  padding: 5px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--txt);
  box-shadow: var(--shadow-pop), 0 0 0 1px color-mix(in oklab, var(--txt) 3%, transparent);
  font-size: var(--fs-md);
  transform-origin: top center;
  animation: cs-in 0.14s var(--ease);
}
.cs-panel.is-up { transform-origin: bottom center; }
@keyframes cs-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
.cs-panel.is-up { animation-name: cs-in-up; }
@keyframes cs-in-up { from { opacity: 0; transform: translateY(4px) scale(0.98); } }

.cs-search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  margin: 0 0 5px;
  padding: 0 10px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--tx45);
}
.cs-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--txt); font: inherit; }
.cs-search input:focus, .cs-search input:focus-visible { outline: none; box-shadow: none; }
.cs-search:focus-within { box-shadow: inset 0 0 0 1px var(--accent); }

.cs-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }

.cs-group {
  padding: 8px 10px 4px;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--tx45);
}

.cs-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  color: var(--tx72);
  cursor: pointer;
  user-select: none;
}
.cs-opt.is-active { background: var(--surface-hover); color: var(--txt); }
.cs-opt.is-selected { color: var(--accent); font-weight: 600; }
.cs-opt.is-selected.is-active { background: var(--accent-tint); }
.cs-opt.is-disabled { opacity: 0.45; cursor: default; }
.cs-opt__lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-opt__hint { flex: none; font-size: var(--fs-xs); color: var(--tx45); font-variant-numeric: tabular-nums; }
.cs-opt__check { display: grid; flex: none; color: var(--accent); visibility: hidden; }
.cs-opt.is-selected .cs-opt__check { visibility: visible; }
.cs-opt__ico { display: grid; flex: none; color: var(--tx45); }
.cs-opt.is-selected .cs-opt__ico { color: var(--accent); }
.cs-opt__sw { flex: none; width: 12px; height: 12px; border-radius: 4px; background: var(--c); box-shadow: inset 0 0 0 1px var(--c-oklch-0-0-0-0-08); }
.cs-opt__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--tone, var(--tx45)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--tone, var(--tx45)) 18%, transparent); }

.cs-tone--draft { --tone: var(--tx45); }
.cs-tone--sent, .cs-tone--accent { --tone: var(--accent); }
.cs-tone--confirmed { --tone: var(--c-oklch-0-55-0-13-285); }
.cs-tone--partial, .cs-tone--pending { --tone: var(--warn); }
.cs-tone--paid { --tone: var(--pos); }
.cs-tone--overdue { --tone: var(--neg); }
.cs-tone--cancelled { --tone: var(--tx45); }

.cs-opt--action {
  position: relative;
  margin-top: 5px;
  color: var(--accent);
  font-weight: 600;
}
.cs-opt--action::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 6px;
  right: 6px;
  border-top: 1px solid var(--border);
}
.cs-opt--action:first-child { margin-top: 0; }
.cs-opt--action:first-child::before { display: none; }
.cs-opt--action .cs-opt__ico { color: inherit; }
.cs-opt--action.is-active { background: var(--accent-tint); color: var(--accent); }

.cs-empty { padding: 14px 10px; text-align: center; font-size: var(--fs-sm); color: var(--tx45); }
.cs-more { padding: 7px 10px 4px; border-top: 1px solid var(--border); font-size: var(--fs-xs); color: var(--tx45); text-align: center; }

/* ---------- Date field + calendar (ui/datepicker.js) ---------- */

.date-field {
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}
.date-field__ico { flex: none; color: var(--tx45); transition: color var(--dur); }
.date-field__val { overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.date-field__ph { overflow: hidden; text-overflow: ellipsis; color: var(--tx45); }
.date-field:hover { background-color: var(--surface-2); }
.date-field:hover .date-field__ico, .date-field.is-open .date-field__ico { color: var(--accent); }
.date-field.is-open { border-color: var(--accent); box-shadow: var(--focus-ring); }
.date-field:disabled { opacity: 0.55; cursor: not-allowed; }

.dp-panel {
  position: fixed;
  inset: auto;
  margin: 0;
  z-index: 300;
  width: 292px;
  padding: 12px;
  overflow: visible;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--txt);
  box-shadow: var(--shadow-pop), 0 0 0 1px color-mix(in oklab, var(--txt) 3%, transparent);
  font-size: var(--fs-md);
  animation: cs-in 0.14s var(--ease);
}
.dp-panel.is-up { animation-name: cs-in-up; }

.dp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.dp-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 8px;
  margin-left: -4px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--txt);
}
.dp-title b { color: var(--accent); font-weight: 700; }
.dp-title .icon { color: var(--tx45); transition: transform var(--dur); }
.dp-panel.is-months .dp-title .icon { transform: rotate(180deg); }
.dp-title:hover { background: var(--surface-hover); }
.dp-nav { display: flex; gap: 2px; }
.dp-arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  color: var(--tx60);
}
.dp-arrow:hover { background: var(--surface-hover); color: var(--txt); }

.dp-week, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-week span {
  display: grid;
  place-items: center;
  height: 28px;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--tx45);
}
.dp-week span:nth-child(6), .dp-week span:nth-child(7) { color: color-mix(in oklab, var(--neg) 70%, var(--tx45)); }

.dp-day {
  position: relative;
  display: grid;
  place-items: center;
  height: 36px;
  border-radius: 10px;
  font-size: var(--fs-sm);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
  transition: background-color var(--dur), color var(--dur);
}
.dp-day:hover { background: var(--surface-hover); }
.dp-day.is-weekend { color: color-mix(in oklab, var(--neg) 55%, var(--txt)); }
.dp-day.is-out { color: var(--tx45); opacity: 0.55; }
.dp-day:disabled { opacity: 0.25; cursor: not-allowed; background: none; }
.dp-day.is-today { font-weight: 700; color: var(--accent); }
.dp-day.is-today::after {
  content: "";
  position: absolute;
  bottom: 5px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
}
.dp-day.is-selected {
  background: var(--accent);
  color: var(--accent-fg);
  font-weight: 700;
  box-shadow: var(--shadow-primary);
  opacity: 1;
}
.dp-day:focus-visible, .dp-month:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
.dp-day.is-selected:focus-visible { box-shadow: var(--shadow-primary), 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }

.dp-months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px 0; }
.dp-month {
  height: 48px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  color: var(--tx72);
}
.dp-month:hover { background: var(--surface-hover); color: var(--txt); }
.dp-month.is-today { color: var(--accent); }
.dp-month.is-selected { background: var(--accent); color: var(--accent-fg); }

.dp-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.dp-link {
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--accent);
}
.dp-link:hover { background: var(--accent-tint); }
.dp-link:disabled { opacity: 0.4; cursor: not-allowed; background: none; }
.dp-link--muted { color: var(--tx60); }
.dp-link--muted:hover { background: var(--surface-hover); color: var(--txt); }

/* ---------- Toast ---------- */

.toast-region {
  position: fixed;
  inset: auto;
  top: calc(var(--topbar-h, 64px) + 12px);
  left: 50%;
  right: auto;
  bottom: auto;
  z-index: 10001; /* above dialogs and the sign-in card */
  display: grid;
  gap: 8px;
  justify-items: center;
  width: min(440px, calc(100% - 24px));
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  transform: translateX(-50%);
  pointer-events: none;
}
.toast {
  --tone: var(--accent);
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 10px 10px 12px;
  overflow: hidden;
  border: 1px solid color-mix(in oklab, var(--tone) 28%, var(--border));
  border-radius: 14px;
  background: color-mix(in oklab, var(--tone) 5%, var(--surface));
  box-shadow: var(--shadow-pop);
  color: var(--txt);
  font-weight: 500;
  line-height: 1.35;
  pointer-events: auto;
  opacity: 0;
  transform: translateY(-14px) scale(0.98);
  transition: opacity 0.22s, transform 0.32s var(--ease);
}
.toast.is-in { opacity: 1; transform: none; }
.toast.is-out { opacity: 0; transform: translateY(-8px) scale(0.98); }
.toast__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tone);
  color: var(--surface);
}
.toast__msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.toast__count { flex: none; color: var(--tx60); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.toast__x {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--tx60);
  cursor: pointer;
}
.toast__x:hover { background: color-mix(in oklab, var(--tone) 12%, transparent); color: var(--txt); }
.toast__x:focus-visible { outline: 2px solid var(--tone); outline-offset: 1px; }
.toast__life {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background: var(--tone);
  opacity: 0.55;
  transform-origin: left;
}
.toast.is-timing .toast__life { animation: toast-life var(--life, 3s) linear forwards; }
.toast.is-held .toast__life { animation-play-state: paused; }
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast--success { --tone: var(--pos); }
.toast--error { --tone: var(--neg); }
.toast--warn { --tone: var(--warn); }
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.is-out { transition: opacity 0.15s; transform: none; }
  .toast.is-timing .toast__life { animation: none; }
}
.confirm-list { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.confirm-list li { position: relative; padding: 8px 10px 8px 30px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--warn) 11%, var(--surface)); font-size: var(--fs-sm); color: var(--txt); }
.confirm-list li::before { content: "!"; position: absolute; left: 10px; top: 8px; display: grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--warn-solid); color: var(--c-white); font-size: 10px; font-weight: 800; }

/* ==========================================================================
   Dialogs and cards, desktop-app style: a coloured title bar, a grey action
   bar at the bottom, a clear main button.
   ========================================================================== */
.modal { border-color: color-mix(in oklab, var(--accent) 22%, var(--border)); }
.modal__head {
  gap: 12px;
  padding: 13px 14px 13px 22px;
  border-bottom: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 13%, var(--surface)), color-mix(in oklab, var(--accent) 7%, var(--surface)));
}
.modal__title { display: flex; align-items: center; gap: 10px; min-width: 0; overflow: hidden; color: var(--txt); font-size: var(--fs-md); text-overflow: ellipsis; white-space: nowrap; }
.modal__title::before { content: ""; flex: none; width: 4px; height: 18px; border-radius: 4px; background: var(--accent); }
.modal--danger .modal__head { border-bottom-color: color-mix(in oklab, var(--neg) 25%, var(--border)); background: linear-gradient(180deg, color-mix(in oklab, var(--neg) 12%, var(--surface)), color-mix(in oklab, var(--neg) 6%, var(--surface))); }
.modal--danger .modal__title::before { background: var(--neg); }
.modal__x { flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--tx60); }
.modal__x:hover { background: var(--neg-solid); color: var(--c-white); }
.modal__body { padding: 18px 22px; }
.modal__foot {
  align-items: center;
  padding: 12px 22px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.modal__foot .btn { height: 40px; }
.modal__foot .btn--primary, .modal__foot .btn--danger { min-width: 124px; justify-content: center; box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--accent) 70%, transparent); }
.modal__foot .btn--danger { box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--neg) 70%, transparent); }
.modal__foot .btn--ghost { background: var(--surface); border-color: var(--input-border); }
.modal .field__label { color: var(--tx72); font-weight: 600; }

/* Cards: the header strip in the brand tint, so sections read like panels of a desktop app. */
.card__head {
  border-bottom-color: color-mix(in oklab, var(--accent) 16%, var(--border));
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 8%, var(--surface)), color-mix(in oklab, var(--accent) 4%, var(--surface)));
}
.card__title { color: var(--txt); }
/* A clearer title bar: stronger brand tint, title in the brand's dark tone. */
.modal__head { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 19%, var(--surface)), color-mix(in oklab, var(--accent) 11%, var(--surface))); }
.modal__title { color: color-mix(in oklab, var(--accent) 45%, var(--txt)); }
.modal--danger .modal__title { color: color-mix(in oklab, var(--neg) 45%, var(--txt)); }
[data-theme="dark"] .modal__head { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 28%, var(--surface)), color-mix(in oklab, var(--accent) 18%, var(--surface))); }
[data-theme="dark"] .modal--danger .modal__head { background: linear-gradient(180deg, color-mix(in oklab, var(--neg) 26%, var(--surface)), color-mix(in oklab, var(--neg) 16%, var(--surface))); }
[data-theme="dark"] .modal__title { color: var(--txt); }
[data-theme="dark"] .modal__foot { background: color-mix(in oklab, var(--surface-2) 80%, var(--c-black)); }
[data-theme="dark"] .card__head { background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 14%, var(--surface)), color-mix(in oklab, var(--accent) 8%, var(--surface))); }

/* ==========================================================================
   Compact record forms (product, customer…): six-column grid, small grouped
   sections, short fields, hints only while a field is in use.
   ========================================================================== */
.modal--form { width: min(720px, calc(100% - 24px)); }
.modal .form-grid.form-grid--6, .form-grid.form-grid--6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 12px; }
.modal .form-grid.form-grid--6 > .field { grid-column: span 3; gap: 5px; }
.modal .form-grid.form-grid--6 > .field--w1 { grid-column: span 1; }
.modal .form-grid.form-grid--6 > .field--w2 { grid-column: span 2; }
.modal .form-grid.form-grid--6 > .field--w3 { grid-column: span 3; }
.modal .form-grid.form-grid--6 > .field--w4 { grid-column: span 4; }
.modal .form-grid.form-grid--6 > .field--w5 { grid-column: span 5; }
.modal .form-grid.form-grid--6 > .field--w6, .modal .form-grid.form-grid--6 > .field--full { grid-column: 1 / -1; }
.form-sec {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin: 6px 0 -2px;
  color: var(--tx60); font-size: 0.6875rem; font-weight: 700;
}
.form-sec::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.form-grid--6 > .form-sec:first-child { margin-top: 0; }
.form-grid--6 .field__label { font-size: var(--fs-xs); font-weight: 600; color: var(--tx72); }
.field__req { margin-left: 3px; color: var(--neg); font-style: normal; }
.form-grid--6 .input { height: 38px; font-size: var(--fs-sm); }
.form-grid--6 textarea.input { height: auto; min-height: 0; padding-top: 8px; padding-bottom: 8px; resize: vertical; }
.form-grid--6 select.input { padding-right: 30px; }
/* Hints only while the field is used: the form stays quiet. */
.form-grid--6 .field__hint { display: none; margin: 0; color: var(--tx60); font-size: 0.6875rem; line-height: 1.3; }
.form-grid--6 .field:focus-within .field__hint { display: block; }
/* Money fields: the currency inside the box. */
.input-pre { position: relative; display: block; }
.input-pre > i { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tx45); font-size: var(--fs-sm); font-style: normal; pointer-events: none; }
.input-pre > .input { padding-left: 26px; }
/* Picture: one slim row instead of a big dashed box. */
.img-field--row { display: flex; align-items: center; gap: 12px; padding: 0; border: 0; background: none; }
.img-field--row .img-field__prev { width: 48px; height: 48px; border-radius: var(--radius-sm); }
.img-field--row .img-field__body { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; }
.img-field--row .img-field__body p { flex: 1; min-width: 0; order: 2; }
.img-field--row .btn-row { order: 1; }
.modal--form .modal__body { padding: 16px 22px 18px; }
@media (max-width: 560px) {
  .modal .form-grid.form-grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal .form-grid.form-grid--6 > .field, .modal .form-grid.form-grid--6 > .field--w3, .modal .form-grid.form-grid--6 > .field--w4, .modal .form-grid.form-grid--6 > .field--w5, .modal .form-grid.form-grid--6 > .field--w6 { grid-column: 1 / -1; }
  .modal .form-grid.form-grid--6 > .field--w1, .modal .form-grid.form-grid--6 > .field--w2 { grid-column: span 1; }
  .img-field--row .img-field__body p { display: none; }
}

/* Every dialog form: the same calm, compact fields. */
.modal .field__label { font-size: var(--fs-xs); font-weight: 600; color: var(--tx72); }
.modal .form-grid .input:not(.input--lg):not(.input--xl):not(textarea) { height: 38px; font-size: var(--fs-sm); }
.modal .form-grid { gap: 12px 14px; }
.modal .form-grid .field { gap: 5px; }
.modal .form-grid .field__hint { color: var(--tx60); font-size: 0.6875rem; line-height: 1.3; }

/* Date picker: quick choices (due date: Net 7 / 15 / 30 / On receipt). */
.dp-quick { display: flex; gap: 4px; margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.dp-chip { flex: 1 1 auto; height: 28px; padding: 0 6px; white-space: nowrap; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--tx72); font: inherit; font-size: var(--fs-xs); font-weight: 600; cursor: pointer; }
.dp-chip:hover { border-color: var(--accent); color: var(--accent); }
.dp-chip.is-on { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }

/* Toasts: bottom of the screen on desktop, so they never cover the invoice header. */
@media (min-width: 961px) {
  .toast-region { top: auto; bottom: 22px; }
}

/* ==========================================================================
   Dialog polish (Nov 2026): a calm white title bar, one control size, one label
   style and clearly marked section headings in every form.
   ========================================================================== */
.modal__head { padding: 16px 16px 14px 24px; background: var(--surface); border-bottom: 1px solid var(--border); }
.modal__title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.01em; }
.modal__title::before { height: 20px; }
.modal--danger .modal__head { background: color-mix(in oklab, var(--neg) 6%, var(--surface)); }
.modal__body { padding: 20px 24px 22px; }
.modal__foot { padding: 12px 24px; }
.modal .field__label, .modal .form-grid--6 .field__label { font-size: var(--fs-sm); font-weight: 600; color: var(--tx72); }
.modal .field .input:not(textarea):not(.input--lg):not(.input--xl) { height: 40px; font-size: var(--fs-md); }
.modal .field textarea.input { height: auto; min-height: 64px; font-size: var(--fs-md); }
.modal .form-grid, .modal .form-grid--6 { gap: 14px 14px; }
.form-sec { margin: 10px 0 0; font-size: var(--fs-sm); font-weight: 700; color: var(--tx72); }
.form-sec::before { content: ""; flex: none; width: 3px; height: 12px; border-radius: 2px; background: var(--accent); }
@media (max-width: 640px) {
  .modal__head { padding: 14px 12px 12px 16px; }
  .modal__body { padding: 16px; }
  .modal__foot { padding: 12px 16px; }
}


/* ==========================================================================
   Save buttons (Nov 2026): the main action in every dialog and the editor's Save
   get a soft gradient, a ringed icon, a gentle lift on hover and a press on click.
   ========================================================================== */
.modal__foot .btn--primary, .ep-save {
  position: relative; overflow: hidden; gap: 9px; height: 42px; padding: 0 20px 0 14px;
  border: 1px solid color-mix(in oklab, var(--accent) 70%, var(--c-0b2a4a)); border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in oklab, var(--accent) 88%, var(--c-white)), var(--accent) 55%, color-mix(in oklab, var(--accent) 86%, var(--c-0b2a4a)));
  color: var(--c-white); font-weight: 700; letter-spacing: 0.01em;
  box-shadow: inset 0 1px 0 var(--c-rgb-255-255-255-0-28), 0 8px 18px -10px color-mix(in oklab, var(--accent) 80%, transparent);
  transition: filter 0.15s, background-color 0.15s;
}
.modal__foot .btn--primary > svg, .ep-save > svg {
  flex: none; box-sizing: content-box; width: 14px; height: 14px; padding: 4px; border-radius: 50%; background: var(--c-rgb-255-255-255-0-2);
}
.modal__foot .btn--primary:hover:not(:disabled), .ep-save:hover:not(:disabled) { filter: brightness(1.07); }
.modal__foot .btn--primary:active:not(:disabled), .ep-save:active:not(:disabled) { filter: brightness(0.94); box-shadow: inset 0 2px 4px var(--c-rgb-0-0-0-0-18); }
.modal__foot .btn--primary:focus-visible, .ep-save:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in oklab, var(--accent) 55%, transparent); }
.modal__foot .btn--primary:disabled, .ep-save:disabled { filter: saturate(0.6); opacity: 0.6; cursor: not-allowed; }
.modal__foot .btn--danger { border-radius: 12px; height: 42px; font-weight: 700; }
.modal__foot .btn--ghost { height: 42px; padding: 0 18px; border-radius: 12px; font-weight: 600; color: var(--tx72); }
.modal__foot .btn--ghost:hover { background: var(--surface-hover); color: var(--txt); }
/* Editor: Save is the strong button of the panel. */
.ep-bar .ep-save { height: 42px; padding: 0 16px 0 12px; }
@media (prefers-reduced-motion: reduce) {
  .modal__foot .btn--primary, .ep-save { transition: none; }
}

/* ---------- Row actions: one "Actions" button with a dropdown (built in components.js) ---------- */
.row-acts__btn { gap: 4px; padding-inline: 10px 8px; white-space: nowrap; }
.row-acts__btn svg { transition: transform var(--dur) var(--ease); }
.row-acts__btn[aria-expanded="true"] { background: var(--accent-tint); border-color: color-mix(in oklab, var(--accent) 35%, transparent); color: var(--accent); }
.row-acts__btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.row-menu {
  position: fixed;
  z-index: 120;
  display: grid;
  min-width: 190px;
  max-width: min(280px, calc(100vw - 16px));
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  animation: fade-in 0.12s var(--ease);
}
.row-menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--txt);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}
.row-menu__item svg { flex: none; width: 15px; height: 15px; color: var(--tx60); }
.row-menu__item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-menu__item:hover:not([disabled]), .row-menu__item:focus-visible { background: var(--accent-tint); color: var(--accent); outline: none; }
.row-menu__item:hover:not([disabled]) svg, .row-menu__item:focus-visible svg { color: currentColor; }
.row-menu__item.is-danger, .row-menu__item.is-danger svg { color: var(--neg); }
.row-menu__item.is-danger:hover:not([disabled]), .row-menu__item.is-danger:focus-visible { background: color-mix(in oklab, var(--neg) 12%, transparent); color: var(--neg); }
.row-menu__item[disabled] { opacity: 0.45; cursor: default; }
.row-menu__sep { height: 1px; margin: 4px 6px; border: 0; background: var(--border); }
/* Grid cards: the Actions button sits in the card's action corner, always visible. */
.rcard__actions[data-acts] { top: 10px; bottom: auto; opacity: 1; transform: none; padding: 0; background: none; box-shadow: none; border: 0; backdrop-filter: none; }
.rcard__actions[data-acts] .row-acts__btn { background: var(--surface); box-shadow: var(--shadow-sm, none); }

/* assets/css/shell.css */
/* ==========================================================================
   Shell extras: top bar (title, global search, quick settings) and the
   docked team-chat popup.
   ========================================================================== */

/* ---------- Top bar ---------- */

.topbar {
  gap: 16px;
  /* A calm neutral bar: the accent marks only the main action and the page icon.
     The chrome tokens are re-pointed at the surface tokens, so everything marked
     .on-chrome (title, icons, search, New invoice) follows light and dark mode. */
  --chrome-bg: var(--surface);
  --chrome-bg-2: var(--surface);
  --chrome-raised: var(--surface-2);
  --chrome-sunken: var(--surface-2);
  --chrome-hover: var(--surface-hover);
  --chrome-active: var(--accent-tint);
  --chrome-border: var(--border);
  --chrome-border-strong: var(--input-border);
  --chrome-txt: var(--txt);
  --chrome-muted: var(--tx60);
  --chrome-faint: var(--tx45);
  --chrome-accent: var(--accent);
  --chrome-accent-fg: var(--accent-fg);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* New invoice: the one accent button in the bar. */
.topbar .topbar__new { background: var(--accent); color: var(--accent-fg); box-shadow: none; }
.topbar .topbar__new:hover { background: var(--accent-hover); }
.topbar .topbar__new .icon { color: currentColor; }

/* Page icon tile: a quiet accent tint. */
.topbar .topbar__ico { background: var(--accent-tint); border-color: transparent; color: var(--accent); box-shadow: none; }

/* Search: a sunken field that turns solid while typing. */
.topbar .gsearch__box { background: var(--surface-2); border-color: var(--border); color: var(--tx45); }
.topbar .gsearch__box:hover { background: var(--surface); border-color: var(--input-border); }
.topbar .gsearch.is-open .gsearch__box,
.topbar .gsearch__box:focus-within { background: var(--surface); border-color: var(--accent); box-shadow: var(--focus-ring); }
.topbar .gsearch__input::placeholder { color: var(--tx45); }

/* Notification counts stay red, ringed in the bar colour. */
.topbar .dot-count { box-shadow: 0 0 0 2px var(--surface); }

.topbar__title {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: none;
  max-width: 40%;
}
.topbar__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  background: linear-gradient(160deg, var(--chrome-raised), var(--chrome-sunken));
  color: var(--chrome-accent);
  box-shadow: inset 0 1px 0 var(--c-oklch-1-0-0-0-06);
}
.topbar__ico:empty { display: none; }
.topbar__text { min-width: 0; }
.topbar__h { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Medium widths: a long page name gives way (ellipsis) instead of pushing the buttons off screen. */
@media (max-width: 960px) { .topbar__title { flex: 0 1 auto; } }
.topbar__crumb {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--chrome-faint);
}

.topbar__actions { gap: 6px; }
.topbar__new { height: 38px; padding: 0 14px 0 12px; box-shadow: 0 6px 16px -8px var(--chrome-accent); }
.topbar__sep { width: 1px; height: 24px; margin: 0 6px; background: var(--chrome-border-strong); }
.topbar__chat { display: none; }
@media (min-width: 961px) { .topbar__menu { display: none; } }
.topbar .icon-btn--lg { flex: none; }
.topbar .icon-btn--lg:hover { background: var(--chrome-hover); }

/* ---------- Global search ---------- */

.gsearch {
  position: relative;
  flex: 1 1 360px;
  max-width: 460px;
  margin: 0 auto;
}
.gsearch__open { display: none; }
.gsearch__box {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 8px 0 13px;
  border: 1px solid var(--chrome-border);
  border-radius: 12px;
  background: var(--chrome-sunken);
  color: var(--chrome-faint);
  transition: border-color var(--dur), background-color var(--dur);
}
.gsearch__box:hover { border-color: var(--chrome-border-strong); }
.gsearch.is-open .gsearch__box,
.gsearch__box:focus-within {
  border-color: color-mix(in oklab, var(--chrome-accent) 60%, transparent);
  background: var(--chrome-bg-2);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--chrome-accent) 18%, transparent);
}
.gsearch__ico { flex: none; }
.gsearch__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  background: none;
  color: var(--chrome-txt);
  font: inherit;
  font-size: var(--fs-md);
}
.gsearch__input::placeholder { color: var(--chrome-faint); }
.gsearch__input:focus, .gsearch__input:focus-visible { outline: none; box-shadow: none; }
.gsearch__input::-webkit-search-cancel-button { display: none; }
.gsearch__kbd {
  flex: none;
  padding: 3px 7px;
  border: 1px solid var(--chrome-border-strong);
  border-radius: 6px;
  font: 600 0.6875rem/1 var(--font-sans, inherit);
  color: var(--chrome-faint);
  white-space: nowrap;
}
.gsearch.is-open .gsearch__kbd { display: none; }

.gsearch__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 60;
  min-width: 340px;
  max-height: min(70vh, 480px);
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--txt);
  box-shadow: var(--shadow-pop);
  animation: cs-in 0.14s var(--ease);
}
.gsearch__group {
  padding: 10px 10px 4px;
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--tx45);
}
.gsearch__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.gsearch__item.is-active { background: var(--surface-hover); }
.gsearch__ri {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--tx60);
}
.gsearch__item.is-active .gsearch__ri { background: var(--accent-tint); color: var(--accent); }
.gsearch__rt { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.gsearch__rt b { overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.gsearch__rt small { overflow: hidden; font-size: var(--fs-xs); color: var(--tx45); text-overflow: ellipsis; white-space: nowrap; }
.gsearch__hint { flex: none; font-size: var(--fs-xs); font-weight: 600; color: var(--tx60); font-variant-numeric: tabular-nums; }
.gsearch__empty { padding: 22px 10px; text-align: center; font-size: var(--fs-sm); color: var(--tx45); }

/* ---------- Quick settings (gear, top-right corner) ---------- */

.qs { position: relative; }
.qs__btn svg { transition: transform 0.4s var(--ease); }
.qs__btn:hover svg { transform: rotate(45deg); }
.qs__pop { width: min(320px, calc(100vw - 16px)); max-width: calc(100vw - 16px); padding: 8px; }
.qs__me {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 8px 12px;
  border-bottom: 1px solid var(--border);
}
.qs__who { display: grid; min-width: 0; line-height: 1.3; }
.qs__who b { font-weight: 600; }
.qs__who small { overflow: hidden; font-size: var(--fs-xs); color: var(--tx45); text-overflow: ellipsis; white-space: nowrap; }
.qs__sec { padding: 10px 8px 4px; }
.qs__label { margin-bottom: 7px; font-size: 0.6875rem; font-weight: 700; color: var(--tx45); }
.qs__sec .segmented button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.qs__row { display: flex; justify-content: space-between; width: 100%; padding: 4px 0; font-size: var(--fs-sm); font-weight: 500; }
.qs__links { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--border); }
.qs__links a {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 8px;
  border-radius: var(--radius-sm);
  color: var(--tx72);
}
.qs__links a:hover { background: var(--surface-hover); color: var(--txt); }
.qs__links a > span { display: grid; flex: 1; font-size: var(--fs-sm); font-weight: 600; line-height: 1.3; }
.qs__links small { font-size: var(--fs-xs); font-weight: 400; color: var(--tx45); }
.qs__note { padding: 8px; font-size: var(--fs-xs); color: var(--tx45); }

/* ---------- Team chat: docked edge tab ---------- */

/* The tab is as wide as the page's right gutter, so at rest it sits in empty
   space beside the content and never covers text or buttons. */
.chat-tab {
  --w: max(20px, calc(var(--gutter) - 4px));
  position: fixed;
  right: 0;
  bottom: 28px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: var(--w);
  height: 58px;
  padding: 0;
  border-radius: 14px 0 0 14px;
  background: linear-gradient(160deg, var(--accent), color-mix(in oklab, var(--accent) 70%, var(--accent-2)));
  color: var(--accent-fg);
  box-shadow: -6px 8px 22px -10px color-mix(in oklab, var(--accent) 70%, transparent);
  transition: gap 0.22s var(--ease);
}
.chat-tab .icon { flex: none; }
.chat-tab__lbl {
  max-width: 0;
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 0.22s var(--ease), opacity 0.15s;
}
.chat-tab:hover,
.chat-tab:focus-visible { width: 98px; gap: 8px; outline: none; }
.chat-tab:hover .chat-tab__lbl,
.chat-tab:focus-visible .chat-tab__lbl { max-width: 50px; opacity: 1; }
.chat-tab .dot-count { top: -8px; right: auto; left: 1px; box-shadow: 0 0 0 2px var(--bg); }
.chat-open .chat-tab { width: 0; box-shadow: none; }
.chat-open .chat-tab > * { display: none; }
.on-chat-page .chat-tab, .on-chat-page .chat-pop, .on-chat-page .topbar__chat { display: none !important; }

/* ---------- Team chat: popup ---------- */

.chat-pop {
  position: fixed;
  right: calc(var(--gutter) + 4px);
  bottom: 20px;
  z-index: 45;
  display: flex;
  flex-direction: column;
  width: 360px;
  height: min(560px, calc(100vh - var(--topbar-h) - 40px));
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  color: var(--txt);
  box-shadow: var(--shadow-pop), 0 0 0 1px color-mix(in oklab, var(--txt) 3%, transparent);
  transform-origin: bottom right;
  animation: chat-in 0.22s var(--ease);
}
.chat-pop[hidden] { display: none; }
@keyframes chat-in { from { opacity: 0; transform: translateY(10px) scale(0.96); } }

/* Popup content is App.teamChat (chat.css); this bar floats over its header. */
.chat-pop { width: 380px; height: min(600px, calc(100vh - var(--topbar-h) - 40px)); }
.chat-pop__body { position: relative; flex: 1; min-height: 0; }
.chat-pop__body > .tc { height: 100%; }
.chat-pop__bar {
  position: absolute;
  top: 12px;
  right: 10px;
  z-index: 5;
  display: flex;
  gap: 2px;
}
.chat-pop__bar .icon-btn { width: 34px; height: 34px; color: var(--tx60); }
.chat-pop__bar .icon-btn:hover { background: var(--surface-hover); color: var(--txt); }
.avatar--xs { width: 26px; height: 26px; font-size: 0.625rem; flex: none; }

/* ---------- Responsive ---------- */

@media (max-width: 1180px) {
  .gsearch__kbd { display: none; }
}
@media (max-width: 1060px) {
  .topbar__new span { display: none; }
  .topbar__new { width: 38px; padding: 0; }
}
/* Narrow: no room for an edge tab; chat lives in the top bar instead. */
@media (max-width: 960px) {
  .chat-tab { display: none; }
  .topbar__chat { display: inline-grid; }
  .topbar__sep { display: none; }
}
@media (max-width: 760px) {
  .gsearch { flex: none; max-width: none; margin: 0 0 0 auto; position: static; }
  .gsearch__open { display: inline-grid; }
  .gsearch__box { display: none; }
  .gsearch.is-open .gsearch__box {
    position: absolute;
    inset: 12px var(--gutter);
    z-index: 61;
    display: flex;
    height: auto;
  }
  .gsearch__pop { left: var(--gutter); right: var(--gutter); top: calc(var(--topbar-h) - 4px); min-width: 0; }
  .topbar__actions { margin-left: 0; }
  .topbar__crumb { display: none; }
  .topbar__ico { display: none; }
}
@media (max-width: 560px) {
  .chat-pop { inset: auto 8px 8px 8px; width: auto; height: min(80vh, 600px); }
  .topbar__new { display: none; }
}
@media print {
  .chat-tab, .chat-pop { display: none !important; }
}


/* Phones: the theme switch lives in quick settings; compact icon buttons so the
   gear always stays on screen. */
@media (max-width: 560px) {
  .topbar { gap: 4px; }
  .topbar [data-slot="theme"] { display: none; }
  .topbar .icon-btn--lg { width: 36px; height: 36px; }
  .topbar__title { flex: 1 1 auto; max-width: none; min-width: 0; }
  .topbar__actions { gap: 2px; }
  .gsearch { margin-left: 0; }
}

/* assets/css/views.css */
/* ==========================================================================
   View-specific styles: dashboard grids, charts, calendar, chat, settings
   ========================================================================== */

.grid { display: grid; gap: 18px; margin-bottom: 18px; }
/* Stat-tile grids (.grid--kpi*) are defined with the tile in components.css. */
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rev-ranks { align-items: start; position: relative; z-index: 0; }
.rev-ranks > .card { min-width: 0; overflow: hidden; }
.rev-month { position: relative; z-index: 0; isolation: isolate; margin-top: 0; }
.rev-month .table-wrap { overflow-x: auto; }
.rev-month .table th { position: static; }
.grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.grid--side { grid-template-columns: 300px minmax(0, 1fr); }

@media (max-width: 1200px) {
  .grid--2-1 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .grid--2, .grid--side { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Charts ---------- */

.chart-box { width: 100%; }
.chart { width: 100%; height: auto; overflow: visible; }
.chart__grid { stroke: var(--border); stroke-dasharray: 3 4; }
.chart__axis { fill: var(--tx45); font-size: 11px; font-family: var(--font); }
.chart__line { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart__dot { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; }
.chart__bar { transition: opacity var(--dur); }
.chart__bar:hover { opacity: 0.8; }
.chart-empty { display: grid; place-items: center; height: 200px; color: var(--tx45); }

.donut { display: grid; grid-template-columns: minmax(120px, 170px) 1fr; align-items: center; gap: 18px; }
.donut__svg { width: 100%; }
.donut__value { fill: var(--txt); font-size: 30px; font-weight: 800; font-family: var(--font-display); }
.donut__label { fill: var(--tx45); font-size: 12px; }
.legend { display: grid; gap: 8px; font-size: var(--fs-sm); }
.legend li { display: flex; align-items: center; gap: 8px; }
.legend b { margin-left: auto; font-variant-numeric: tabular-nums; }
.legend__dot { width: 10px; height: 10px; border-radius: 3px; }

.date-chip {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1;
}
.date-chip b { font-size: 1rem; }
.date-chip--neg { background: color-mix(in oklab, var(--neg) 13%, transparent); color: var(--neg); }

/* ---------- Calendar ---------- */

.cal-nav { display: flex; align-items: center; gap: 4px; }
.cal-nav__label { min-width: 132px; text-align: center; font-weight: 700; }

.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal__dow {
  padding: 10px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
  color: var(--tx45);
}
.cal__day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 108px;
  padding: 8px;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background-color var(--dur);
}
.cal__day:nth-child(7n) { border-right: 0; }
.cal--week .cal__day { min-height: 320px; }
.cal--week .cal__num { display: flex; align-items: baseline; gap: 6px; }
.cal--week .cal__num small { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tx45); }
.cal-empty { margin: 0 0 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--tx60); font-size: var(--fs-sm); }
.cal-empty button { font-weight: 700; color: var(--accent); }
.cal-bar__label { min-width: 12.5rem; text-align: center; }
.cal__ev b { font-weight: 700; }
.cal__ev--full { display: grid; gap: 1px; padding: 6px 8px; white-space: normal; }
.cal__ev--full small { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; color: var(--tx60); }
.cal__day.is-out { background: var(--surface-2); }
.cal__day.is-out .cal__num { opacity: 0.45; }
.cal__day.is-drop { background: var(--accent-tint); }
.cal__num { font-size: var(--fs-sm); font-weight: 600; color: var(--tx60); }
.cal__day.is-today .cal__num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
}
.cal__ev {
  overflow: hidden;
  padding: 3px 8px;
  border-radius: var(--radius-xs);
  border-left: 3px solid var(--accent);
  background: var(--accent-tint);
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: grab;
}
.cal__ev--neg { border-color: var(--neg); background: color-mix(in oklab, var(--neg) 12%, transparent); color: var(--neg); }
.cal__ev[data-drag="no"] { cursor: pointer; }
.cal__ev { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.cal__ev.is-dragging { opacity: 0.35; }
.cal__ghost {
  position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none;
  box-shadow: var(--shadow-lg, 0 12px 28px var(--c-rgba-0-0-0-0-22)); transform-origin: 0 0; opacity: 0.95; cursor: grabbing;
}
.cal__ghost.is-blocked { filter: grayscale(0.8); opacity: 0.7; }
.cal__day.is-nodrop { background: color-mix(in oklab, var(--neg) 8%, transparent); }
.cal__day.is-drop { outline: 2px dashed var(--accent); outline-offset: -3px; }
html.cal-dragging, html.cal-dragging * { cursor: grabbing !important; -webkit-user-select: none !important; user-select: none !important; }

@media (max-width: 640px) {
  .cal__day { min-height: 64px; padding: 4px; }
  .cal__dow { padding: 8px 2px; font-size: 0.625rem; }
  .cal__ev { padding: 2px 4px; font-size: 0.625rem; }
}

/* ---------- Chat ---------- */

.chat { display: flex; flex-direction: column; height: min(66vh, 640px); }
.chat__log { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px; overflow-y: auto; }
.chat__compose { display: flex; gap: 8px; padding: 14px; border-top: 1px solid var(--border); }
.bubble {
  max-width: min(72%, 520px);
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--surface-hover);
}
.bubble--me { align-self: flex-end; border-radius: 16px 16px 4px 16px; background: var(--accent); color: var(--accent-fg); }
.bubble__meta { font-size: 0.6875rem; opacity: 0.7; margin-bottom: 2px; }
.check-list { display: grid; gap: 2px; }

/* ---------- Settings ---------- */

.settings { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start; }
.settings__nav { display: grid; gap: 2px; padding: 8px; }
.side-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  font-weight: 500;
  color: var(--tx60);
  text-align: left;
}
.side-tab:hover { background: var(--surface-hover); color: var(--txt); }
.side-tab.is-active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.settings .hint { margin-top: 14px; }

@media (max-width: 860px) {
  .settings { grid-template-columns: minmax(0, 1fr); }
  .settings__nav { display: flex; overflow-x: auto; }
  .side-tab { flex: none; }
}

.theme-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.theme-card {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  font-weight: 600;
  text-align: left;
  transition: border-color var(--dur);
}
.theme-card:hover { border-color: var(--border-strong); }
.theme-card.is-active { border-color: var(--accent); }
.theme-card__art { position: relative; display: block; height: 96px; border-radius: var(--radius-md); overflow: hidden; }
.theme-card--light .theme-card__art { background: var(--c-eef3f8); }
.theme-card--dark .theme-card__art { background: var(--c-121a2b); }
.theme-card__art i { position: absolute; inset: 0 auto 0 0; width: 28%; }
.theme-card--light .theme-card__art i { background: var(--c-white); }
.theme-card--dark .theme-card__art i { background: var(--c-1a2438); }
.theme-card__art b { position: absolute; left: 36%; top: 16px; width: 50%; height: 10px; border-radius: 4px; background: var(--c-3aa3e6); }
.theme-card__art em { position: absolute; left: 36%; top: 36px; right: 10%; bottom: 14px; border-radius: 6px; }
.theme-card--light .theme-card__art em { background: var(--c-white); }
.theme-card--dark .theme-card__art em { background: var(--c-1a2438); }

.data-actions { display: grid; gap: 12px; }
.data-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.data-card > .icon { color: var(--accent); }
.data-card > div { flex: 1; min-width: 0; }
.data-card p { font-size: var(--fs-sm); color: var(--tx60); }
.data-card--danger > .icon { color: var(--neg); }

@media (max-width: 520px) {
  .data-card { flex-wrap: wrap; }
}

/* ---------- Settings: logo, invoice design, SMTP ---------- */

.logo-up { margin-bottom: 18px; }
.logo-up .uploader { padding: 14px; }
.logo-up .uploader__img, .logo-up .uploader__ph { width: 120px; height: 72px; }
.logo-up .uploader__body p { font-size: var(--fs-sm); }

.settings--wide { grid-template-columns: 210px minmax(0, 1fr); }
.design-split { display: grid; grid-template-columns: minmax(340px, 440px) minmax(0, 1fr); gap: 22px; align-items: start; }
.design-split__controls > .panel-sec:first-child { padding-top: 0; }
.design-split__preview { position: sticky; top: calc(var(--topbar-h) + 12px); display: grid; gap: 10px; }
.design-preview__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.design-preview {
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--stage-bg);
}
.design-preview__scaler { --scale: 0.5; }
.design-preview__scaler > .inv-sheet { transform: scale(var(--scale)); transform-origin: 0 0; box-shadow: none; }
[data-theme="dark"] .design-preview__scaler > .inv-sheet { filter: brightness(0.92) contrast(0.98); }

@media (max-width: 1280px) {
  .design-split { grid-template-columns: minmax(0, 1fr); }
  .design-split__preview { position: static; max-width: 560px; }
}

.set-h { margin: 22px 0 12px; font-size: var(--fs-md); font-weight: 700; }
.set-h--first { margin-top: 0; }
.set-note { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; padding: 9px 12px; border-radius: var(--radius-md); background: color-mix(in oklab, var(--warn) 12%, var(--surface)); font-size: var(--fs-sm); color: var(--tx72); }
.set-switch { margin-top: 14px; }
.num-grid { display: grid; grid-template-columns: minmax(84px, auto) minmax(90px, 1fr) minmax(90px, 1fr) minmax(110px, 1fr) minmax(110px, 1fr); gap: 8px 10px; align-items: center; margin-top: 10px; }
.num-grid__h { font-size: var(--fs-xs); font-weight: 600; color: var(--tx60); }
.num-grid > b { font-size: var(--fs-sm); }
.num-grid__next { padding: 8px 10px; border-radius: var(--radius-sm); background: var(--surface-2); font-family: inherit; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
  .num-grid { grid-template-columns: 1fr 1fr; }
  .num-grid__h { display: none; }
  .num-grid > b { grid-column: 1 / -1; margin-top: 8px; }
}
.smtp-status {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid color-mix(in oklab, var(--warn) 35%, var(--border));
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--warn) 8%, var(--surface));
}
.smtp-status > div { display: grid; flex: 1; gap: 2px; min-width: 0; }
.smtp-status small { color: var(--tx60); font-size: var(--fs-sm); }
.smtp-status.is-on { border-color: color-mix(in oklab, var(--pos) 35%, var(--border)); background: color-mix(in oklab, var(--pos) 8%, var(--surface)); }
.smtp-status__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px color-mix(in oklab, var(--warn) 20%, transparent); }
.is-on > .smtp-status__dot { background: var(--pos); box-shadow: 0 0 0 4px color-mix(in oklab, var(--pos) 20%, transparent); }
.smtp-presets { display: grid; gap: 8px; margin-top: 18px; }
.smtp-actions { margin-top: 20px; }
.pw-field { position: relative; display: block; }
.pw-field .input { padding-right: 44px; }
.pw-field .icon-btn { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); }

/* SMS gateway settings */
.sms-hint { display: flex; align-items: flex-start; gap: 6px; margin-top: 2px; }
.sms-hint .icon { flex: none; margin-top: 2px; color: var(--accent); }
.sms-events { display: grid; gap: 12px; }
.sms-event { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--dur); }
.sms-event.is-on { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); box-shadow: 0 6px 16px -12px color-mix(in oklab, var(--accent) 60%, transparent); }
.sms-event__head { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.sms-event__head > div { display: grid; flex: 1; min-width: 0; gap: 1px; }
.sms-event__head small { color: var(--tx60); font-size: var(--fs-sm); }
.sms-event__ic { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--accent-tint); color: var(--accent); }
.sms-event__body { display: none; gap: 10px; padding: 0 14px 14px; }
.sms-event.is-on .sms-event__body { display: grid; }
.sms-event textarea { resize: vertical; min-height: 72px; }
.sms-vars { display: flex; flex-wrap: wrap; gap: 6px; }
.chip--sm { padding: 2px 9px; font-size: 0.75rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.sms-preview { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 10px; }
.sms-bubble { max-width: min(420px, 100%); padding: 9px 13px; border-radius: 16px 16px 16px 4px; background: color-mix(in oklab, var(--accent) 12%, var(--surface)); color: var(--txt); font-size: var(--fs-sm); line-height: 1.45; overflow-wrap: anywhere; white-space: pre-wrap; }
.sms-count { color: var(--tx60); font-size: var(--fs-xs); }
.sms-test { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px; }
.sms-test .field { flex: 1 1 220px; max-width: 320px; }

/* ==========================================================================
   Grid / list layout for catalog pages (products, categories)
   ========================================================================== */
.view-toggle { flex: none; }
.view-toggle button { display: grid; place-items: center; width: 30px; padding: 0; height: 26px; }
.page-head__actions .view-toggle button { height: 26px; font-size: var(--fs-xs); }

.card--flush > .table-wrap.is-grid { padding: 14px; }
.grid-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.grid-tools__sort { display: flex; align-items: center; gap: 8px; color: var(--tx60); font-size: var(--fs-sm); }
.grid-tools__sort .input { width: auto; min-width: 140px; height: 32px; }

.rcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(218px, 1fr)); gap: 16px; }
.rcard {
  --tint: oklch(0.62 0.13 var(--h, 232));
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  cursor: pointer;
  transition: transform 0.25s var(--ease), border-color var(--dur);
}
.rcard:hover, .rcard:focus-visible { transform: translateY(-4px); border-color: color-mix(in oklab, var(--tint) 45%, var(--border)); box-shadow: 0 18px 32px -18px var(--c-rgb-15-23-42-0-4); outline: none; }
.rcard:focus-visible { box-shadow: var(--focus-ring); }

.rcard__art, .rcard__cover {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background:
    radial-gradient(circle at 85% 12%, color-mix(in oklab, var(--tint) 30%, transparent) 0 22%, transparent 23%),
    linear-gradient(140deg, color-mix(in oklab, var(--tint) 20%, var(--surface)), color-mix(in oklab, var(--tint) 6%, var(--surface)));
}
.rcard__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--ease); }
.rcard:hover .rcard__art > img { transform: none; }
.rcard__ini { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--tint); }
.rcard__tag, .rcard__status {
  position: absolute;
  top: 10px;
  padding: 3px 9px;
  border-radius: 99px;
  font-size: 0.6875rem;
  font-weight: 700;
  backdrop-filter: blur(8px);
}
.rcard__tag { left: 10px; max-width: 58%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: color-mix(in oklab, var(--surface) 82%, transparent); color: var(--txt); box-shadow: 0 1px 3px var(--c-rgb-15-23-42-0-14); }
.rcard__status { right: 10px; background: color-mix(in oklab, var(--surface) 82%, transparent); box-shadow: 0 1px 3px var(--c-rgb-15-23-42-0-14); }
.rcard__status::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; border-radius: 50%; background: var(--tx45); }
.rcard__status--pos { color: var(--pos); } .rcard__status--pos::before { background: var(--pos); }
.rcard__status--warn { color: var(--warn); } .rcard__status--warn::before { background: var(--warn); }
.rcard__status--neg { color: var(--neg); } .rcard__status--neg::before { background: var(--neg); }

.rcard__body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 14px 14px 12px; }
.rcard__title { font-size: var(--fs-md, 1rem); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.rcard__sub { color: var(--tx60); font-size: var(--fs-xs); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rcard__price { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 6px; }
.rcard__price b { font-size: 1.1875rem; font-weight: 800; letter-spacing: -0.02em; color: var(--tint); }
.rcard__price span { font-size: var(--fs-xs); font-weight: 600; }
.rcard__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding-top: 10px; border-top: 1px dashed var(--border); }
.rcard__facts div { display: grid; gap: 1px; min-width: 0; }
.rcard__facts dt { color: var(--tx45); font-size: 0.6875rem; font-weight: 600; }
.rcard__facts dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; }

.rcard__actions {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow-card);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--dur), transform var(--dur);
}
.rcard:hover .rcard__actions, .rcard:focus-within .rcard__actions { opacity: 1; transform: none; }
@media (hover: none) { .rcard__actions { opacity: 1; transform: none; } }

/* Category cards */
.rcard__cover { aspect-ratio: 16 / 9; align-content: center; }
.rcard__badge { position: absolute; top: 14px; left: 14px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--tint); color: var(--c-white); box-shadow: 0 8px 16px -6px color-mix(in oklab, var(--tint) 70%, transparent); }
.rcard__stack { position: absolute; left: 14px; bottom: 12px; display: flex; }

.mini-thumb {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-left: -10px;
  overflow: hidden;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.625rem;
  font-weight: 700;
  box-shadow: 0 2px 6px -2px var(--c-rgb-15-23-42-0-3);
}
.mini-thumb:first-child { margin-left: 0; }
.mini-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mini-thumb--more { background: var(--surface-2); color: var(--tx60); }
.cell-stack { display: inline-flex; padding-left: 4px; }
.cell-stack .mini-thumb { width: 30px; height: 30px; margin-left: -8px; }
.cell-swatch { --tint: oklch(0.62 0.13 var(--h, 232)); display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: color-mix(in oklab, var(--tint) 14%, var(--surface)); color: var(--tint); }

@media (max-width: 640px) {
  .rcards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .card--flush > .table-wrap.is-grid { padding: 10px; }
  .rcard__body { padding: 10px; }
  .rcard__actions { opacity: 1; transform: none; }
  .rcard__facts { gap: 4px 10px; }
  .page-head__actions { flex-wrap: wrap; }
}
@media (prefers-reduced-motion: reduce) { .rcard, .rcard__art > img { transition: none; } .rcard:hover { transform: none; } }
@media (hover: none), (max-width: 640px) {
  .rcard__actions { position: static; align-self: flex-end; margin: 0 10px 10px; opacity: 1; transform: none; box-shadow: none; }
}

/* ---------- First steps: terms of use and company setup (layout/onboarding.js) ---------- */

.terms-gate {
  position: fixed;
  inset: 0;
  z-index: 10002;
  display: grid;
  place-items: center;
  padding: 16px;
  background: var(--overlay);
  backdrop-filter: blur(4px);
}
.terms-card {
  display: flex;
  flex-direction: column;
  width: min(640px, 100%);
  max-height: min(760px, calc(100dvh - 32px));
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
}
.terms-card__head { display: flex; gap: 14px; align-items: flex-start; padding: 22px 24px 16px; border-bottom: 1px solid var(--border); }
.terms-card__head h2 { margin: 0; font-size: var(--fs-xl); }
.terms-card__head p { margin: 4px 0 0; font-size: var(--fs-sm); color: var(--tx60); }
.terms-card__ico { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--accent-tint-strong); color: var(--accent); }
.terms-card__body { flex: 1; min-height: 0; padding: 8px 24px 16px; overflow-y: auto; outline: 0; }
.terms-card__body section { padding: 12px 0; border-bottom: 1px dashed var(--border); }
.terms-card__body section:last-child { border-bottom: 0; }
.terms-card__body h3 { margin: 0 0 4px; font-size: var(--fs-md); }
.terms-card__body p { margin: 0; font-size: var(--fs-sm); line-height: 1.6; color: var(--tx72); max-width: 70ch; }
.terms-card__foot { display: grid; gap: 14px; padding: 16px 24px 20px; border-top: 1px solid var(--border); background: var(--surface-2); }
.terms-check { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-md); font-weight: 600; cursor: pointer; }
.terms-check input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.terms-card__btns { display: flex; justify-content: flex-end; gap: 8px; }
.terms-card__btns .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; }

.setup { display: grid; gap: 18px; width: min(760px, 100%); margin: 0 auto; padding: 8px 0 24px; }
.setup__head h1 { margin: 0; font-size: var(--fs-2xl); letter-spacing: -0.01em; }
.setup__head p { margin: 6px 0 0; color: var(--tx60); max-width: 60ch; }
.setup__card { display: grid; gap: 18px; padding: 22px; }
.setup__logo .uploader { padding: 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg); }
.setup__foot { display: flex; justify-content: flex-end; gap: 8px; }
@media (max-width: 560px) {
  .setup__foot { flex-direction: column-reverse; }
  .setup__foot .btn { width: 100%; }
}

/* ---------- Expenses PIN lock (views/expenses.js, Settings → Security) ---------- */

.pin-lock { display: grid; place-items: center; min-height: calc(100dvh - var(--topbar-h) - 120px); padding: 16px; }
.pin-card { display: grid; justify-items: center; gap: 10px; width: min(380px, 100%); padding: 28px 24px; border-radius: var(--radius-xl); background: var(--surface); box-shadow: var(--shadow-card); text-align: center; }
.pin-card__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--accent-tint-strong); color: var(--accent); }
.pin-card h2 { margin: 6px 0 0; font-size: var(--fs-xl); }
.pin-card p { margin: 0; font-size: var(--fs-sm); color: var(--tx60); }
.pin-input { width: 100%; max-width: 220px; height: 52px; margin-top: 8px; border: 1px solid var(--input-border); border-radius: 12px; background: var(--input-bg); color: var(--txt); font: inherit; font-size: 1.5rem; font-weight: 700; letter-spacing: 0.5em; text-align: center; }
.pin-input:focus { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
.pin-card.is-wrong .pin-input { border-color: var(--neg); animation: pin-shake 0.3s; }
.pin-card__err { min-height: 1.2em; color: var(--neg) !important; font-weight: 600; }
.pin-card .btn { width: 100%; max-width: 220px; }
@keyframes pin-shake { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .pin-card.is-wrong .pin-input { animation: none; } }
.pin-set { display: grid; gap: 14px; max-width: 640px; }
.pin-set__state { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2); font-size: var(--fs-sm); font-weight: 600; color: var(--tx72); }
.pin-set__state.is-on { background: color-mix(in oklab, var(--pos) 12%, var(--surface)); color: var(--pos); }
.pin-pages { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 0; padding: 0; border: 0; }
.pin-pages legend { width: 100%; margin-bottom: 6px; }
.pin-pages .check { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-sm); cursor: pointer; }
.pin-pages input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ---------- Day closing (views/closing.js) ---------- */
.cl-day { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding: 10px 12px; }
.cl-day__pick .input { width: auto; }
.cl-day__name { margin-left: auto; font-size: var(--fs-lg); }
.cl-day .icon-btn:disabled { opacity: 0.35; cursor: not-allowed; filter: grayscale(1); }
.cl-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cl-kpi { display: grid; gap: 3px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.cl-kpi span { font-size: var(--fs-xs); font-weight: 600; color: var(--tx60); }
.cl-kpi b { font-size: var(--fs-xl); font-variant-numeric: tabular-nums; }
.cl-kpi small { font-size: 0.6875rem; color: var(--tx45); }
.cl-kpi.is-pos b { color: var(--pos); }
.cl-kpi.is-warn b { color: var(--warn); }
.cl-kpi.is-neg b { color: var(--neg); }
.cl-grid { margin-bottom: 14px; }
.cl-empty { margin: 0; padding: 18px; color: var(--tx45); font-size: var(--fs-sm); }
.cl-dues { display: grid; gap: 10px; }
.cl-dues p { display: flex; justify-content: space-between; gap: 10px; margin: 0; font-size: var(--fs-sm); }
.cl-dues p b { font-variant-numeric: tabular-nums; }
.cl-dues .is-total { padding-top: 10px; border-top: 1px solid var(--border); font-size: var(--fs-md); }
.cl-dues .btn { justify-self: start; }
.cl-table .is-pos, .cl-dues .is-pos { color: var(--pos); }

/* ---------- Activity log ---------- */
.al-note { margin: 0 0 12px; }
.al-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.al-tools .search { flex: 1 1 240px; }
.al-tools .field { flex: 0 1 170px; }
.al-chips { padding: 0 14px 10px; }
.al-chips .chips { flex-wrap: wrap; }
.al-list { margin: 0; padding: 0 0 8px; list-style: none; }
.al-day { position: sticky; top: 0; z-index: 1; padding: 8px 16px 6px; border-top: 1px solid var(--border); background: var(--surface-2); color: var(--tx60); font-size: var(--fs-xs); font-weight: 700; }
.al-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-top: 1px solid var(--border); }
.al-time { flex: none; width: 42px; color: var(--tx60); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.al-ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--tx60); }
.al-row--pos .al-ico { background: color-mix(in oklab, var(--pos) 13%, transparent); color: var(--pos); }
.al-row--warn .al-ico { background: color-mix(in oklab, var(--warn) 14%, transparent); color: var(--warn); }
.al-row--neg .al-ico { background: color-mix(in oklab, var(--neg) 12%, transparent); color: var(--neg); }
.al-row--info .al-ico { background: var(--accent-tint); color: var(--accent); }
.al-main { flex: 1; min-width: 0; }
.al-main p { margin: 0; font-size: var(--fs-sm); line-height: 1.35; }
.al-main small { color: var(--tx60); font-size: var(--fs-xs); }
.al-amt { flex: none; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.al-more { display: flex; justify-content: center; padding: 10px; }
@media (max-width: 560px) { .al-time { display: none; } .al-amt { font-size: var(--fs-xs); } }
.cal-view button { display: inline-flex; align-items: center; gap: 6px; }
.cal-view__n { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--warn-solid); color: var(--c-white); font-size: 0.625rem; font-weight: 800; line-height: 17px; text-align: center; }

/* Quotations list: "→ Invoice" convert button in the row actions */
.t-actions .conv-btn { color: var(--accent); background: var(--accent-tint); }
.t-actions .conv-btn:hover { background: var(--accent-tint-strong, var(--accent-tint)); }

.settings__by { margin: 10px 8px 2px; font-size: 0.6875rem; color: var(--tx45); }
.settings__by b { color: var(--tx60); }
@media (max-width: 960px) { .settings__by { display: none; } }

/* Bill calendar: title + filters in one bar (the top bar already names the page). */
.cal-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.cal-bar__lead { min-width: 0; flex: 1 1 180px; }
.cal-bar__title { margin: 0; font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.02em; }
.cal-bar__sub { margin: 2px 0 0; color: var(--tx60); font-size: var(--fs-xs); line-height: 1.35; }
.cal-bar__nav { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cal-bar__today { height: 34px; padding: 0 14px; border-color: var(--input-border); font-weight: 600; }
.cal-bar .cal-nav { display: flex; align-items: center; gap: 2px; }
.cal-bar .cal-nav .icon-btn { width: 34px; height: 34px; }
.cal-bar__label { margin: 0 6px; font-size: var(--fs-md); font-weight: 700; white-space: nowrap; }
.cal-bar__opts { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.cal-bar .segmented button { height: 30px; padding: 0 12px; font-size: var(--fs-sm); font-weight: 600; }
.cal-bar .segmented button.is-active { color: var(--accent); }
@media (max-width: 900px) {
  .cal-bar__opts { width: 100%; justify-content: flex-start; }
}
@media (max-width: 640px) {
  .cal-bar { padding: 10px; }
  .cal-bar__opts { width: 100%; }
  .cal-bar__opts .segmented { flex: 1; }
  .cal-bar__opts .segmented button { flex: 1; }
  .cal-bar .cal-nav { width: 100%; justify-content: space-between; }
  .cal-bar__label { flex: 1; text-align: center; }
}

/* Categories: picture, sub-categories, on / off */
.rcard__cover.has-img { background: var(--surface-2, var(--bg)); }
.rcard__cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rcard__cover.has-img .rcard__stack { position: relative; z-index: 1; }
.rcard__cover.is-off, .rcard__cover.is-off + .rcard__body { opacity: 0.55; }
.rcard__title .badge { margin-left: 6px; vertical-align: 2px; }
.cell-swatch { overflow: hidden; }
.cell-swatch img { width: 100%; height: 100%; object-fit: cover; }
.cell-item--sub { padding-left: 22px; position: relative; }
.cell-item--sub::before { content: ""; position: absolute; left: 6px; top: 50%; width: 10px; height: 10px; margin-top: -10px; border-left: 1.5px solid var(--border-strong); border-bottom: 1.5px solid var(--border-strong); border-bottom-left-radius: 4px; }

/* The built-in "Popular" group on the Categories page */
.pop-cat { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid color-mix(in oklab, var(--warn) 30%, var(--border)); border-radius: var(--radius-lg); background: color-mix(in oklab, var(--warn) 7%, var(--surface)); }
.pop-cat__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: color-mix(in oklab, var(--warn) 18%, transparent); color: var(--warn); }
.pop-cat__txt { display: grid; gap: 2px; min-width: 0; flex: 1; }
.pop-cat__txt b { display: flex; align-items: center; gap: 8px; font-size: var(--fs-md); }
.pop-cat__txt > span { color: var(--tx60); font-size: var(--fs-sm); }
.pop-cat__stack { position: static; display: flex; }
.pop-cat__stack .mini-thumb { width: 30px; height: 30px; margin-left: -8px; }
.pop-cat .btn { flex: none; }
@media (max-width: 640px) { .pop-cat { flex-wrap: wrap; } .pop-cat__stack { display: none; } .pop-cat .btn { width: 100%; justify-content: center; } }

/* Product checklist (Popular products dialog) */
.pick-list { display: grid; gap: 2px; max-height: min(52vh, 460px); margin: 10px 0 0; padding: 0; overflow: auto; list-style: none; }
.pick-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.pick-row:hover { background: var(--accent-tint); }
.pick-row input { width: 16px; height: 16px; accent-color: var(--accent); }
.pick-row .mini-thumb { margin: 0; width: 30px; height: 30px; }
.pick-row__name { display: grid; flex: 1; min-width: 0; font-weight: 600; }
.pick-row__name small { color: var(--tx60); font-weight: 400; font-size: var(--fs-xs); }
.pick-row b { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.pick-count { margin-right: auto; color: var(--tx60); font-size: var(--fs-sm); }

/* Settings → Keyboard shortcuts */
.keys-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin: 14px 0; }
.keys-group { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.keys-group__title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: var(--fs-sm); font-weight: 700; }
.keys-group__title svg { color: var(--accent); }
.keys-list { display: grid; gap: 2px; margin: 0; }
.keys-list > div { display: grid; grid-template-columns: minmax(96px, auto) 1fr; align-items: center; gap: 12px; padding: 5px 0; border-top: 1px dashed var(--border); }
.keys-list > div:first-child { border-top: 0; }
.keys-list dt { display: flex; align-items: center; gap: 4px; }
.keys-list dt span { color: var(--tx45); font-size: var(--fs-xs); }
.keys-list dd { margin: 0; color: var(--tx72); font-size: var(--fs-sm); }
.keys-groups kbd, .settings .hint kbd { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 6px; background: var(--surface); color: var(--txt); font: 600 var(--fs-xs)/1 var(--font-mono, ui-monospace, monospace); }

/* assets/css/expenses.css */
/* ==========================================================================
   Expenses module
   ========================================================================== */

/* ---------- Tabs ---------- */

.fin-tabs {
  display: flex;
  gap: 2px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}

.fin-tabs__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  height: 38px;
  padding: 0 12px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx60);
  transition: color var(--dur);
}
.fin-tabs__btn:hover { color: var(--txt); }
.fin-tabs__btn::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: -1px;
  height: 2.5px;
  border-radius: 3px 3px 0 0;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform 0.25s var(--ease);
}
.fin-tabs__btn.is-active { color: var(--accent); }
.fin-tabs__btn.is-active::after { transform: none; }

.fin-tabs__n {
  min-width: 22px;
  padding: 0 7px;
  border-radius: 99px;
  background: var(--surface-hover);
  color: var(--tx60);
  font-size: 0.6875rem;
  line-height: 20px;
  text-align: center;
}
.fin-tabs__btn.is-active .fin-tabs__n { background: var(--accent-tint); color: var(--accent); }
.fin-tabs__due { color: var(--warn); }

.fin-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

/* ---------- KPI tiles ---------- */

.delta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-xs);
  color: var(--tx60);
}
/* For spending, going up is the warning direction. */
.delta--up { color: var(--neg); font-weight: 600; }
.delta--down { color: var(--pos); font-weight: 600; }

/* ---------- Category visuals ---------- */

.cat-ico {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: var(--s, 38px);
  height: var(--s, 38px);
  border-radius: calc(var(--s, 38px) * 0.3);
  background: color-mix(in oklab, var(--c) 15%, transparent);
  color: var(--c);
}

.cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 3px 10px 3px 8px;
  border-radius: 99px;
  background: color-mix(in oklab, var(--c) 12%, transparent);
  color: color-mix(in oklab, var(--c) 78%, var(--txt));
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}
.cat-chip span { overflow: hidden; text-overflow: ellipsis; }

.progress {
  height: 7px;
  border-radius: 99px;
  background: var(--surface-hover);
  overflow: hidden;
}
.progress span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--c, var(--accent));
  transition: none;
}
.progress.is-over span { background: var(--neg); }

/* ---------- Overview lists ---------- */

.legend--row { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin-top: 8px; }

.budget-list { display: grid; gap: 16px; }
.budget-list li { display: flex; align-items: center; gap: 12px; }
.budget-list__main { display: grid; flex: 1; gap: 6px; min-width: 0; }
.budget-list__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: var(--fs-sm); }
.budget-list__row b { flex: 1 1 110px; min-width: 0; }
.budget-list__row b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.budget-list__row span { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.budget-list__row small { font-weight: 500; color: var(--tx45); }
.budget-list__over { display: flex; align-items: center; gap: 4px; font-size: var(--fs-xs); font-weight: 600; color: var(--neg); }

.stack-cards { display: grid; gap: 18px; align-content: start; min-width: 0; }
.list__main .progress { height: 5px; margin-top: 5px; }

/* ---------- Ledger ---------- */

.fin-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(130px, 1fr)) auto auto auto;
  align-items: end;
  gap: 10px;
  padding: 10px;
  margin-bottom: 12px;
}
.fin-filters__date { display: grid; gap: 4px; }
.fin-filters__date > span { font-size: 0.6875rem; font-weight: 600; color: var(--tx45); }
.fin-filters__date .input { width: 150px; }

@media (max-width: 1280px) {
  .fin-filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fin-filters .search { grid-column: 1 / -1; }
  .fin-filters__date .input { width: 100%; }
}
@media (max-width: 640px) {
  .fin-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.fin-date { font-weight: 600; white-space: nowrap; color: var(--tx72); }
.fin-exp { min-width: 0; }
.fin-exp__desc { max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fin-exp .cell-strong { display: flex; align-items: center; gap: 6px; }
.fin-flag {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: var(--surface-hover);
  color: var(--tx60);
}
.fin-flag--btn:hover { background: var(--accent-tint); color: var(--accent); }
.status-btn { border-radius: 99px; }
.status-btn:hover .badge { filter: brightness(0.95); box-shadow: 0 0 0 2px color-mix(in oklab, currentColor 20%, transparent); }
.fin-table tr.is-muted td { opacity: 0.55; }
.fin-table tr.is-muted td.t-actions { opacity: 1; }

/* ---------- Category cards ---------- */

.cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 16px;
}

.cat-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 12px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur) var(--ease), border-color var(--dur);
}
.cat-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--c);
  opacity: 0.85;
}
.cat-card:hover { transform: translateY(-2px); border-color: var(--border-strong); }

.cat-card__head { display: flex; align-items: center; gap: 12px; }
.cat-card__title { flex: 1; min-width: 0; }
.cat-card__title h3 { font-size: var(--fs-md); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-card__title p { font-size: var(--fs-xs); color: var(--tx45); }
.cat-card__menu { display: flex; flex: none; opacity: 0.6; transition: opacity var(--dur); }
.cat-card:hover .cat-card__menu,
.cat-card:focus-within .cat-card__menu { opacity: 1; }
.cat-card__desc { font-size: var(--fs-sm); color: var(--tx60); }
.cat-card__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cat-card__stats div { display: grid; gap: 1px; padding: 9px 12px; border-radius: var(--radius-sm); background: var(--surface-2); }
.cat-card__stats span { font-size: 0.6875rem; color: var(--tx45); }
.cat-card__stats b { font-variant-numeric: tabular-nums; }
.cat-card__pct { margin-top: -4px; font-size: var(--fs-xs); color: var(--tx60); }
.cat-card__pct.is-over { color: var(--neg); font-weight: 600; }
.cat-card__link { justify-self: start; }

.cat-card--add {
  place-content: center;
  justify-items: center;
  gap: 6px;
  min-height: 220px;
  border: 2px dashed var(--border-strong);
  background: transparent;
  box-shadow: none;
  color: var(--tx60);
}
.cat-card--add::before { content: none; }
.cat-card--add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-tint); }
.cat-card--add span { font-size: var(--fs-xs); color: var(--tx45); }

/* ---------- Forms ---------- */

.field__label--row { display: flex; align-items: center; justify-content: space-between; }
.field__label--row .link-btn { font-size: var(--fs-xs); }

.fin-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
  font-weight: 600;
}
.fin-total b { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.cat-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--surface-2);
  border: 1px solid var(--border);
}

.icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; }
.icon-picker input,
.color-picker input { position: absolute; opacity: 0; pointer-events: none; }
.icon-picker span {
  display: grid;
  place-items: center;
  height: 42px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--tx60);
  cursor: pointer;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur);
}
.icon-picker span:hover { border-color: var(--border-strong); color: var(--txt); }
.icon-picker input:checked + span { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.icon-picker input:focus-visible + span,
.color-picker input:focus-visible + span { box-shadow: var(--focus-ring); }

.color-picker { display: flex; flex-wrap: wrap; gap: 8px; }
.color-picker span {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--c);
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--surface), 0 0 0 2px transparent;
  transition: transform 0.2s var(--ease);
}
.color-picker span:hover { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--input-border); }
.color-picker input:checked + span { box-shadow: inset 0 0 0 3px var(--surface), 0 0 0 2px var(--c); }

.receipt-view { width: 100%; max-height: 70vh; object-fit: contain; border-radius: var(--radius-md); background: var(--surface-2); }

/* Donut with the legend underneath, for narrower panels. */
.donut-stack .donut { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.donut-stack .donut__svg { max-width: 190px; }
.donut-stack .legend { width: 100%; }

.fin-bar .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fin-bar .segmented button { flex: none; white-space: nowrap; }

/* assets/css/payroll.css */
/* ==========================================================================
   Payroll module (tabs, filters and tables reuse the Expenses styles)
   ========================================================================== */

.pay-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; margin: 16px 0; align-items: start; }
@media (max-width: 960px) { .pay-grid { grid-template-columns: minmax(0, 1fr); } }

.pay-emp { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pay-emp > div { min-width: 0; }

/* department cost bars */
.pay-dept { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.pay-dept__top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; font-size: var(--fs-sm); }
.pay-dept__top .muted { margin-right: auto; }

/* "needs attention" list */
.pay-todo { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pay-todo li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.pay-todo li:last-child { border-bottom: 0; }
.pay-todo p { flex: 1; margin: 0; font-size: var(--fs-sm); }
.pay-todo__ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-md); background: var(--surface-hover); color: var(--tx60); flex: none; }
.pay-todo__ico--warn { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }

/* month switcher */
.pay-month { align-items: center; }
.pay-month__nav { display: flex; align-items: center; gap: 6px; }
.pay-month__pick .input { min-width: 170px; }
.pay-month__sp { flex: 1; }

/* payslip */
.ps-sheet { display: grid; gap: 16px; padding: 4px 2px; font-size: var(--fs-sm); color: var(--txt); }
.ps-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 2px solid var(--accent); }
.ps-head h2, .ps-head h3, .ps-head p { margin: 0; }
.ps-head h2 { font-size: 1.125rem; }
.ps-head h3 { font-size: 1.25rem; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; }
.ps-head p { color: var(--tx60); }
.ps-head__r { text-align: right; }
.ps-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 24px; margin: 0; }
.ps-who div { display: flex; gap: 8px; }
.ps-who dt { min-width: 92px; color: var(--tx60); }
.ps-who dd { margin: 0; font-weight: 600; }
.ps-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 640px) { .ps-cols, .ps-who { grid-template-columns: minmax(0, 1fr); } }
.ps-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border); border-radius: var(--radius-md); }
.ps-table th, .ps-table td { padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border); }
.ps-table th { background: var(--surface-hover); font-size: .75rem; color: var(--tx60); }
.ps-table .t-right { text-align: right; }
.ps-table .ps-total td { font-weight: 700; border-bottom: 0; background: var(--surface-hover); }
.ps-net { display: flex; justify-content: space-between; align-items: center; margin: 0; padding: 14px 16px; border-radius: var(--radius-md); background: var(--accent-tint); color: var(--accent); }
.ps-net span { font-weight: 600; }
.ps-net b { font-size: 1.375rem; }
.ps-note { margin: 0; padding: 10px 12px; border-left: 3px solid var(--border); color: var(--tx60); }
.ps-foot { margin: 0; text-align: center; font-size: .75rem; color: var(--tx60); }

@media print {
  #print-root .ps-sheet { width: 190mm; margin: 0 auto; padding: 8mm 0; color: var(--c-111); font-size: 11pt; }
  #print-root .ps-head { border-color: var(--c-111); }
  #print-root .ps-head h3, #print-root .ps-net { color: var(--c-111); }
  #print-root .ps-net { background: var(--c-eee); }
  #print-root .ps-table th, #print-root .ps-table .ps-total td { background: var(--c-f2f2f2); color: var(--c-111); }
  #print-root .ps-table, #print-root .ps-table th, #print-root .ps-table td { border-color: var(--c-bbb); }
}

/* Revenue page extras */
.rev-chg { margin: 2px 0 0; font-weight: 600; }
.rev-note { margin-top: 4px; }

/* assets/css/customer.css */
/* ==========================================================================
   Customer details dashboard (#/customer?id=…)
   ========================================================================== */

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--tx60);
  transition: color var(--dur), gap var(--dur);
}
.back-link:hover { color: var(--accent); gap: 9px; }

/* ---------- Hero ---------- */

.cust-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 20px;
  margin-bottom: 10px;
  padding: 12px 16px;
  overflow: hidden;
}
.cust-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--brand-grad);
}
.cust-hero__id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cust-hero__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--brand-grad);
  box-shadow: 0 10px 24px -10px color-mix(in oklab, var(--accent) 70%, transparent);
  color: var(--c-white);
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.cust-hero__name { display: grid; gap: 2px; min-width: 0; }
.cust-hero__name h1 {
  overflow: hidden;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cust-hero__name p { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cust-hero__since { font-size: var(--fs-xs); color: var(--tx60); }

.cust-hero__contact { display: grid; gap: 2px; min-width: 0; font-size: var(--fs-xs); }
.cust-hero__contact li > * { display: flex; align-items: center; gap: 9px; min-width: 0; color: var(--tx72); }
.cust-hero__contact li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cust-hero__contact .icon { flex: none; color: var(--tx45); }
.cust-hero__contact a:hover { color: var(--accent); }
.cust-hero__contact a:hover .icon { color: var(--accent); }

.cust-hero__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
.cust-hero__actions .btn { height: 34px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.cust-hero__actions .icon-btn--lg { width: 34px; height: 34px; }

/* ---------- Tabs ---------- */

/* Sticks under the header so you can switch sections from anywhere on a long tab. */
.cust-tabs {
  position: sticky;
  top: var(--topbar-h);
  z-index: 5;
  margin: 0 calc(var(--gutter) * -1) 12px;
  padding: 0 var(--gutter);
  background: var(--bg);
}
.cust-pane { animation: view-in 0.3s var(--ease); }

/* Summary tiles at the top of the Invoices / Products / Payments tabs */

.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1200px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 > :last-child { grid-column: 1 / -1; } }
@media (max-width: 860px) { .grid--3 { grid-template-columns: minmax(0, 1fr); } }

.list__row--btn:hover { background: var(--surface-hover); }
.list__row--btn .list__main b { color: var(--txt); }
.budget-list .rank { flex: none; }

.cust-due { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--warn); }
.cust-due__btn { margin-top: 12px; }

/* ---------- KPIs ---------- */

/* ---------- Products ---------- */

.card--flush-body > .card__body { padding: 0; }
.card--flush-body .table th:first-child, .card--flush-body .table td:first-child { padding-left: 18px; }
.card--flush-body .table th:last-child, .card--flush-body .table td:last-child { padding-right: 18px; }

.rank {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: var(--surface-hover);
  color: var(--tx60);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.rank--1 { background: color-mix(in oklab, var(--c-e0a030) 22%, transparent); color: var(--c-b07a10); }
.rank--2 { background: color-mix(in oklab, var(--c-8893a5) 22%, transparent); color: var(--tx72); }
.rank--3 { background: color-mix(in oklab, var(--c-e57d3a) 20%, transparent); color: var(--c-c0602a); }
[data-theme="dark"] .rank--1 { color: var(--c-f0c060); }
[data-theme="dark"] .rank--3 { color: var(--c-f0a070); }

.cust-prod__share { width: 22%; min-width: 120px; }
.share { display: flex; align-items: center; gap: 8px; }
.share .progress { flex: 1; height: 6px; }
.share small { min-width: 32px; color: var(--tx45); font-size: var(--fs-xs); font-weight: 600; text-align: right; }

/* ---------- Invoices ---------- */

.cust-inv { margin-bottom: 18px; }
.cust-inv .card__title { display: flex; align-items: center; gap: 8px; }
.cust-inv__filter { padding: 12px 18px 0; }
.cust-inv .table-wrap { margin-top: 10px; }
.table tr.is-link { cursor: pointer; }
.text-pos { color: var(--pos); }
.cell-link { display: block; color: inherit; }
.cell-link:hover .cell-strong { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.view--customers .table tbody tr { cursor: pointer; }

/* ---------- Payment timeline ---------- */

.timeline { position: relative; display: grid; gap: 16px; padding-left: 4px; }
.timeline::before {
  content: "";
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: 15px;
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}
.timeline li { position: relative; display: flex; gap: 12px; }
.timeline__dot {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--pos) 16%, var(--surface));
  box-shadow: 0 0 0 4px var(--surface);
  color: var(--pos);
}
.timeline__body { display: grid; gap: 2px; min-width: 0; padding-top: 2px; font-size: var(--fs-sm); }
.timeline__body b { font-variant-numeric: tabular-nums; }
.timeline__body small { color: var(--tx45); font-size: var(--fs-xs); }
.timeline .link-btn { font-size: inherit; }

/* ---------- Notes & insights ---------- */

.cust-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.cust-facts li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.cust-fact__ico {
  display: grid;
  grid-row: span 2;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--accent-tint);
  color: var(--accent);
}
.cust-facts span:not(.cust-fact__ico) { font-size: var(--fs-xs); color: var(--tx45); }
.cust-facts b { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.cust-facts--one { grid-template-columns: minmax(0, 1fr); margin-bottom: 0; }
.cust-facts--one b { white-space: normal; overflow-wrap: anywhere; }
.cust-facts b a:hover { color: var(--accent); }
.cust-notes { min-height: 140px; resize: vertical; line-height: 1.6; }
.cust-facts:last-child { margin-bottom: 0; }

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
  .cust-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cust-hero__actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  .cust-hero { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 10px 12px; }
  .cust-hero__avatar { width: 36px; height: 36px; border-radius: 11px; font-size: 0.875rem; }
  .cust-hero__name h1 { font-size: var(--fs-md); white-space: normal; }
  /* Contact details on one wrapping line; secondary actions as icons. */
  .cust-hero__contact { display: flex; flex-wrap: wrap; gap: 2px 14px; }
  .cust-hero__contact li > * { gap: 6px; }
  .cust-hero__actions { flex-wrap: nowrap; justify-content: flex-start; }
  .cust-hero__actions .btn--ghost, .cust-hero__actions .btn--soft { width: 34px; padding: 0; font-size: 0; gap: 0; flex: none; }
  .cust-hero__actions .btn--primary { flex: 1; }
  .cust-prod__share { width: auto; }
}
@media (max-width: 640px) {
  .card--flush-body .table td:first-child { padding-left: 0; }
  .card--flush-body .table tr { padding: 10px 16px; }
  .cust-facts { grid-template-columns: minmax(0, 1fr); }
  .fin-bar .segmented { width: 100%; overflow-x: auto; scrollbar-width: none; }
  .fin-bar .segmented button { flex: 1; white-space: nowrap; }
  .fin-bar > .hint { display: none; }
}

/* assets/css/billing.css */
/* ==========================================================================
   Billing (#/billing): plan hero, usage, plans, payment card, history
   ========================================================================== */

/* ---------- Hero ---------- */

.bill-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 14px;
  margin-bottom: 12px;
  padding: 12px 18px;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(120% 140% at 100% 0%, var(--c-oklch-0-62-0-13-230-0-55) 0%, transparent 55%),
    radial-gradient(90% 120% at 0% 100%, var(--c-oklch-0-6-0-12-190-0-35) 0%, transparent 60%),
    linear-gradient(135deg, var(--chrome-bg), var(--chrome-bg-2));
  box-shadow: var(--shadow-card);
  color: var(--chrome-txt);
  isolation: isolate;
}
.bill-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(var(--c-oklch-1-0-0-0-08) 1px, transparent 1.5px) 0 0 / 18px 18px;
  mask-image: linear-gradient(90deg, transparent 30%, var(--c-black));
}

.bill-hero__plan { display: grid; align-content: start; gap: 3px; }
.bill-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--chrome-accent);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.bill-hero__name {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.bill-hero__pill {
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--c-oklch-0-75-0-14-162-0-2);
  color: var(--c-oklch-0-86-0-12-162);
  font-family: var(--font);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.bill-hero__pill.is-off { background: var(--c-oklch-0-78-0-13-62-0-2); color: var(--c-oklch-0-86-0-12-70); }
.bill-hero__price { font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bill-hero__price small { margin-left: 6px; color: var(--chrome-muted); font-size: var(--fs-md); font-weight: 500; letter-spacing: 0; }
.bill-hero__blurb { color: var(--chrome-muted); font-size: var(--fs-xs); }
.bill-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 6px; }
.bill-hero__btn { background: var(--c-white); color: var(--chrome-bg); font-weight: 700; box-shadow: 0 8px 20px -8px var(--c-oklch-0-0-0-0-5); }
.bill-hero__btn:hover { background: var(--c-oklch-0-95-0-02-240); }
.bill-hero__switch { color: var(--chrome-txt); font-weight: 600; }
.bill-hero__switch .switch__track { background: var(--c-oklch-1-0-0-0-2); }

.bill-hero__next { display: grid; align-content: center; gap: 8px; }
.bill-next {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  border: 1px solid var(--c-oklch-1-0-0-0-12);
  border-radius: var(--radius-md);
  background: var(--c-oklch-1-0-0-0-06);
  backdrop-filter: blur(6px);
}
.bill-next > div { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.bill-next small { color: var(--chrome-faint); font-size: var(--fs-xs); }
.bill-next b { overflow: hidden; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.bill-next__ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px; background: var(--c-oklch-1-0-0-0-1); color: var(--chrome-accent); }
.bill-next__amt { flex: none !important; text-align: right; }
.bill-next .link-btn { color: var(--chrome-accent); }
.bill-next .hint { color: var(--chrome-faint); }

/* ---------- Sections ---------- */

.bill-sec { margin-bottom: 24px; }
.bill-sec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.bill-sec__head h3 { font-size: var(--fs-lg); font-weight: 700; }
.bill-save { margin-left: 4px; padding: 0 6px; border-radius: 99px; background: color-mix(in oklab, var(--pos) 16%, transparent); color: var(--pos); font-size: 0.6875rem; line-height: 18px; }

/* ---------- Usage ---------- */

/* ---------- Plans ---------- */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: transform 0.25s var(--ease), border-color var(--dur);
}
.plan:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.plan.is-popular { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); }
.plan.is-current { background: linear-gradient(180deg, var(--accent-tint), var(--surface) 45%); border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); }
.plan__flag {
  position: absolute;
  top: -11px;
  right: 18px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--brand-grad);
  box-shadow: var(--shadow-primary);
  color: var(--c-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
.plan header h4 { font-size: var(--fs-lg); font-weight: 800; }
.plan header p { color: var(--tx60); font-size: var(--fs-sm); }
.plan__price { font-size: 1.75rem; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.plan__price small { margin-left: 4px; color: var(--tx45); font-size: var(--fs-sm); font-weight: 500; letter-spacing: 0; }
.plan__save { margin-top: -6px; color: var(--pos); font-size: var(--fs-xs); font-weight: 600; }
.plan__save.is-blank { color: var(--tx45); font-weight: 500; }
.plan__feat { display: grid; flex: 1; align-content: start; gap: 8px; margin: 6px 0 8px; padding-top: 14px; border-top: 1px dashed var(--border-strong); }
.plan__feat li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--fs-sm); color: var(--tx72); }
.plan__feat .icon { flex: none; margin-top: 2px; padding: 2px; border-radius: 50%; background: color-mix(in oklab, var(--pos) 15%, transparent); color: var(--pos); box-sizing: content-box; }
.plan__cta { width: 100%; justify-content: center; }
.plan__cta:disabled { opacity: 1; color: var(--accent); border-color: color-mix(in oklab, var(--accent) 35%, var(--border)); cursor: default; cursor: not-allowed; filter: grayscale(1); }

/* ---------- Payment card ---------- */

.paycard {
  --g1: var(--c-oklch-0-45-0-13-250);
  --g2: var(--c-oklch-0-32-0-08-262);
  position: relative;
  display: grid;
  gap: 18px;
  aspect-ratio: 1.586;
  max-width: 340px;
  padding: 18px 20px;
  overflow: hidden;
  border-radius: 16px;
  background: radial-gradient(circle at 110% -10%, var(--c-oklch-1-0-0-0-22) 0 30%, transparent 31%), linear-gradient(135deg, var(--g1), var(--g2));
  box-shadow: 0 16px 34px -16px var(--g2);
  color: var(--c-white);
}
.paycard--bkash { --g1: var(--c-oklch-0-6-0-2-360); --g2: var(--c-oklch-0-42-0-17-350); }
.paycard--nagad { --g1: var(--c-oklch-0-68-0-18-45); --g2: var(--c-oklch-0-52-0-19-30); }
.paycard--bank { --g1: var(--c-oklch-0-55-0-1-180); --g2: var(--c-oklch-0-38-0-07-200); }
.paycard__top { display: flex; align-items: center; justify-content: space-between; }
.paycard__top b { font-size: var(--fs-lg); font-weight: 800; letter-spacing: 0.02em; }
.paycard__chip { width: 36px; height: 26px; border-radius: 6px; background: linear-gradient(135deg, var(--c-f3d488), var(--c-c79a3e)); box-shadow: inset 0 0 0 1px var(--c-oklch-0-0-0-0-15); }
.paycard__num { align-self: center; font-size: 1.125rem; font-weight: 600; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.paycard__foot { display: flex; justify-content: space-between; gap: 12px; align-self: end; font-size: var(--fs-sm); font-weight: 600; }
.paycard__foot span { display: grid; min-width: 0; }
.paycard__foot small { opacity: 0.7; font-size: 0.625rem; font-weight: 500; }
.paycard__note { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--tx45); font-size: var(--fs-xs); }

/* ---------- Details ---------- */

.bill-details { display: grid; gap: 10px; }
.bill-details div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--border); font-size: var(--fs-sm); }
.bill-details div:last-child { padding-bottom: 0; border-bottom: 0; }
.bill-details dt { flex: none; color: var(--tx45); }
.bill-details dd { min-width: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.bill-bottom .card--flush-body { align-self: start; }

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
  .bill-hero { grid-template-columns: minmax(0, 1fr); padding: 12px 14px; }
  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
}
@media (max-width: 520px) {
  .bill-hero__name { font-size: 1.125rem; }
  .bill-hero__price { font-size: 1rem; }
  .bill-hero__blurb { display: none; }
  /* Keep the plan band short: next charge and payment method only (paid-to-date is in Receipts below). */
  .bill-hero__next { gap: 6px; }
  .bill-next { padding: 6px 10px; }
  .bill-next__ico { display: none; }
  .bill-next:nth-child(3) { display: none; }
  .bill-sec__head .segmented { width: 100%; }
  .bill-sec__head .segmented button { flex: 1; }
  .paycard { max-width: none; }
}

/* ---------- Licence (activated with a product key) ---------- */
.lic-card { padding: 20px; }
.lic-list { display: grid; gap: 0; margin: 0 0 16px; }
.lic-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.lic-row:last-child { border-bottom: 0; }
.lic-row dt { color: var(--tx60); font-size: var(--fs-sm); }
.lic-row dd { margin: 0; font-weight: 600; }
.lic-row code { font-family: ui-monospace, Consolas, monospace; letter-spacing: 0.04em; }
.lic-actions { margin-bottom: 10px; }
@media (max-width: 560px) { .lic-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }

/* assets/css/support.css */
/* ==========================================================================
   Support center (#/support): hero, stats, three-column desk, help center
   ========================================================================== */

/* ---------- Hero ---------- */

.sup-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  margin-bottom: 12px;
  padding: 12px 18px;
  border-radius: var(--radius-lg);
  background:
    radial-gradient(110% 140% at 100% 0%, var(--c-oklch-0-62-0-13-230-0-5) 0%, transparent 55%),
    radial-gradient(80% 120% at 0% 100%, var(--c-oklch-0-62-0-12-180-0-32) 0%, transparent 60%),
    linear-gradient(135deg, var(--chrome-bg), var(--chrome-bg-2));
  box-shadow: var(--shadow-card);
  color: var(--chrome-txt);
  isolation: isolate;
}
.sup-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(var(--c-oklch-1-0-0-0-07) 1px, transparent 1.5px) 0 0 / 18px 18px;
  mask-image: linear-gradient(100deg, transparent 35%, var(--c-black));
  pointer-events: none;
}
.sup-hero__main { display: grid; align-content: center; gap: 8px; min-width: 0; }
.sup-hero__eyebrow { display: none; align-items: center; gap: 7px; color: var(--chrome-accent); font-size: var(--fs-xs); font-weight: 700; }
.sup-hero__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; }

.sup-search { position: relative; max-width: 620px; }
.sup-search > .icon { position: absolute; top: 50%; left: 16px; color: var(--tx45); transform: translateY(-50%); pointer-events: none; }
.sup-search input {
  width: 100%;
  height: 42px;
  padding: 0 16px 0 44px;
  border: 0;
  border-radius: 14px;
  background: var(--surface);
  box-shadow: 0 12px 30px -12px var(--c-oklch-0-0-0-0-55), inset 0 0 0 1px var(--border);
  color: var(--txt);
  font: inherit;
  font-size: var(--fs-md);
}
.sup-search input:focus { outline: none; box-shadow: 0 12px 30px -12px var(--c-oklch-0-0-0-0-55), 0 0 0 3px var(--c-oklch-0-8-0-1-228-0-55); }
.sup-search__pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  display: grid;
  gap: 2px;
  max-height: 380px;
  padding: 8px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  color: var(--txt);
  animation: view-in 0.2s var(--ease);
}
.sup-search__h { padding: 8px 10px 4px; color: var(--tx45); font-size: 0.6875rem; font-weight: 700; }
.sup-search__item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 10px; border-radius: var(--radius-md); text-align: left; }
.sup-search__item:hover, .sup-search__item:focus-visible { background: var(--surface-hover); }
.sup-search__item > .icon { flex: none; color: var(--tx45); }
.sup-search__item span { display: grid; min-width: 0; line-height: 1.3; }
.sup-search__item b { overflow: hidden; font-size: var(--fs-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sup-search__item small { color: var(--tx45); font-size: var(--fs-xs); }
.sup-search__ask { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius-md) var(--radius-md); }
.sup-search__ask > .icon { color: var(--accent); }
.sup-search__none { padding: 12px 10px 4px; color: var(--tx60); font-size: var(--fs-sm); }

.sup-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.sup-hero__btn { background: var(--c-white); color: var(--chrome-bg); font-weight: 700; box-shadow: 0 8px 20px -8px var(--c-oklch-0-0-0-0-5); }
.sup-hero__btn:hover { background: var(--c-oklch-0-95-0-02-240); }
.sup-hero__ghost { border: 1px solid var(--c-oklch-1-0-0-0-2); background: var(--c-oklch-1-0-0-0-06); color: var(--chrome-txt); }
.sup-hero__ghost:hover { background: var(--c-oklch-1-0-0-0-12); }

.sup-team {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 12px 14px;
  border: 1px solid var(--c-oklch-1-0-0-0-12);
  border-radius: var(--radius-lg);
  background: var(--c-oklch-1-0-0-0-06);
  backdrop-filter: blur(8px);
}
.sup-team__avs { display: flex; }
.sup-team__avs .av-agent { box-shadow: 0 0 0 3px var(--chrome-bg); }
.sup-team__avs .av-agent + .av-agent { margin-left: -10px; }
.sup-team__on { display: flex; align-items: center; gap: 8px; font-weight: 700; }
.sup-team__facts { display: grid; gap: 5px; font-size: var(--fs-xs); }
.sup-team__facts div { display: flex; justify-content: space-between; gap: 10px; padding-top: 5px; border-top: 1px solid var(--c-oklch-1-0-0-0-1); }
.sup-team__facts dt { color: var(--chrome-faint); }
.sup-team__facts dd { font-weight: 600; text-align: right; }

/* Agent avatar: coloured initial with an online dot. */
.av-agent {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(140deg, oklch(0.72 0.12 var(--h)), oklch(0.55 0.13 calc(var(--h) + 25)));
  color: var(--c-white);
  font-size: 0.8125rem;
  font-weight: 800;
}
.av-agent i { position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--c-oklch-0-72-0-16-150); box-shadow: 0 0 0 2px var(--surface); }
.av-agent--lg { width: 42px; height: 42px; font-size: 1rem; }
.av-agent--lg i { box-shadow: 0 0 0 2px var(--chrome-bg); }
.av-agent--sm { width: 22px; height: 22px; font-size: 0.625rem; }
.av-agent--sm i { width: 7px; height: 7px; }
.avatar--xs { width: 22px; height: 22px; font-size: 0.5625rem; }

/* ---------- Stats strip ---------- */

/* ---------- Desk ---------- */

.desk {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr) 280px;
  gap: 16px;
  height: clamp(600px, calc(100vh - var(--topbar-h) - 48px), 900px);
  margin-bottom: 32px;
  scroll-margin-top: calc(var(--topbar-h) + 14px);
}
.desk__list, .desk__thread, .desk__info { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.desk:not(.is-reading) { grid-template-columns: 340px minmax(0, 1fr); }
.desk:not(.is-reading) .desk__info { display: none; }

.desk__head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.desk__head h2 { font-size: var(--fs-lg); font-weight: 800; }
.desk__search { flex: 1; min-width: 0; }
.desk__search .input { height: 36px; }

.desk__tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; }
.desk__tabs button {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 8px;
  color: var(--tx60);
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
}
.desk__tabs button:hover { color: var(--txt); }
.desk__tabs button span { min-width: 18px; padding: 0 5px; border-radius: 99px; background: var(--surface-hover); color: var(--tx45); font-size: 0.625rem; font-weight: 700; line-height: 17px; text-align: center; }
.desk__tabs button.is-alert span { background: color-mix(in oklab, var(--neg) 16%, transparent); color: var(--neg); }
.desk__tabs button.is-active { color: var(--accent); }
.desk__tabs button.is-active::after { content: ""; position: absolute; left: 6px; right: 6px; bottom: -1px; height: 2.5px; border-radius: 3px 3px 0 0; background: var(--accent); }
.desk__tabs button.is-active span { background: var(--accent-tint); color: var(--accent); }

.tlist { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 6px; padding: 10px; overflow-y: auto; }
.tlist__empty { display: grid; justify-items: center; padding-bottom: 20px; }

.tcard {
  --stripe: var(--accent);
  position: relative;
  display: grid;
  gap: 5px;
  width: 100%;
  padding: 12px 12px 12px 15px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left;
  transition: border-color var(--dur), background-color var(--dur);
}
.tcard::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; background: var(--stripe); opacity: 0.85; }
.tcard.prio-low { --stripe: var(--border-strong); }
.tcard.prio-high { --stripe: var(--warn); }
.tcard.prio-urgent { --stripe: var(--neg); }
.tcard:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
.tcard.is-active { border-color: color-mix(in oklab, var(--accent) 50%, var(--border)); background: color-mix(in oklab, var(--accent) 7%, var(--surface)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 30%, transparent); }
.tcard__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tcard__no { display: inline-flex; align-items: center; gap: 5px; color: var(--tx45); font-size: 0.6875rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.tcard__top time { flex: none; color: var(--tx45); font-size: 0.6875rem; }
.tcard__subj { overflow: hidden; font-size: var(--fs-sm); font-weight: 600; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.tcard__snip { overflow: hidden; color: var(--tx60); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.tcard__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 2px; }
.tcard__meta .badge { font-size: 0.625rem; }
.tcard__n { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; color: var(--tx45); font-size: 0.6875rem; font-weight: 600; }
.tcard.is-unread .tcard__subj { font-weight: 800; }
.tcard.is-unread .tcard__top time { color: var(--accent); font-weight: 700; }
.tcard.is-unread .tcard__top time::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }

.prio { display: inline-flex; align-items: center; gap: 4px; color: var(--tx60); font-size: 0.6875rem; font-weight: 600; }
.prio::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.prio--low { color: var(--tx45); }
.prio--normal { color: var(--accent); }
.prio--high { color: var(--warn); }
.prio--urgent { color: var(--neg); }

/* ---------- Conversation ---------- */

.thread__head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
.thread__back { display: none; flex: none; margin-left: -6px; }
.thread__title { display: grid; flex: 1; gap: 5px; min-width: 0; }
.thread__title h2 { overflow: hidden; font-size: var(--fs-lg); font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.thread__title p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--tx45); font-size: var(--fs-xs); }
.thread__no { font-weight: 700; font-variant-numeric: tabular-nums; }
.thread__acts { display: flex; flex: none; align-items: center; gap: 6px; }
.thread__info-btn { display: none; border: 1px solid var(--border); }
.thread__info-btn.is-on { background: var(--accent-tint); color: var(--accent); border-color: transparent; }

.thread__log {
  flex: 1;
  display: grid;
  align-content: start;
  gap: 14px;
  padding: 18px 20px;
  overflow-y: auto;
  background: linear-gradient(var(--surface-2), var(--surface-2)) padding-box;
}
.tday { display: flex; align-items: center; gap: 12px; color: var(--tx45); font-size: 0.6875rem; font-weight: 700; }
.tday::before, .tday::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.tevent { display: flex; align-items: center; justify-content: center; gap: 6px; color: var(--tx45); font-size: var(--fs-xs); text-align: center; }
.tevent .icon { flex: none; }
.tevent--start { padding: 8px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }

.tmsg { display: flex; align-items: flex-start; gap: 10px; max-width: min(620px, 86%); }
.tmsg--me { flex-direction: row-reverse; justify-self: end; }
.tmsg__av { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 50%; background: var(--brand-grad); color: var(--c-white); font-size: 0.6875rem; font-weight: 700; }
.tmsg__body { display: grid; gap: 4px; min-width: 0; }
.tmsg__meta { display: flex; align-items: center; gap: 7px; color: var(--tx45); font-size: 0.6875rem; }
.tmsg__meta b { color: var(--txt); font-size: var(--fs-xs); font-weight: 700; }
.tmsg__role { padding: 0 6px; border-radius: 99px; background: color-mix(in oklab, var(--pos) 14%, transparent); color: var(--pos); font-weight: 700; line-height: 16px; }
.tmsg--me .tmsg__meta { justify-content: flex-end; }
.tmsg__bubble {
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 4px 16px 16px 16px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-md);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.tmsg--me .tmsg__bubble { border-color: transparent; border-radius: 16px 4px 16px 16px; background: var(--accent); color: var(--accent-fg); }
.tmsg__files { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tmsg__file img { display: block; width: 120px; height: 80px; object-fit: cover; border-radius: 8px; border: 1px solid var(--c-oklch-1-0-0-0-3); background: var(--c-white); }

.typing { display: inline-flex; gap: 4px; padding: 14px 16px; }
.typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--tx45); animation: typing 1.2s infinite ease-in-out; }
.typing i:nth-child(2) { animation-delay: 0.15s; }
.typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.rate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 16px; border-top: 1px solid var(--border); background: color-mix(in oklab, var(--pos) 6%, var(--surface)); }
.rate__ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in oklab, var(--c-e0a030) 16%, transparent); color: var(--c-e0a030); }
.rate__txt { display: grid; flex: 1; min-width: 160px; line-height: 1.3; }
.rate__txt b { font-size: var(--fs-sm); }
.rate__txt small { color: var(--tx60); font-size: var(--fs-xs); }
.rate__stars { display: flex; gap: 2px; }
.rate__stars button { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; color: var(--border-strong); transition: color var(--dur), transform 0.15s; }
.rate__stars button:hover { transform: scale(1.12); color: var(--c-e0a030); }
.rate__stars button.is-on { color: var(--c-e0a030); }
.rate__stars button.is-on svg { fill: currentColor; }

.composer { display: grid; gap: 8px; padding: 12px 14px 14px; border-top: 1px solid var(--border); background: var(--surface); }
.composer__quick { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.qchip { flex: none; padding: 5px 11px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface-2); color: var(--tx72); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; transition: background-color var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur); }
.qchip:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.composer__box { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); transition: border-color var(--dur); }
.composer__box:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: var(--focus-ring); }
.composer__input { display: block; width: 100%; min-height: 56px; max-height: 200px; padding: 11px 13px 4px; border: 0; background: transparent; color: var(--txt); font: inherit; resize: none; }
.composer__input:focus { outline: none; }
.composer__bar { display: flex; align-items: center; gap: 8px; padding: 4px 6px 6px; }
.composer__bar .icon-btn { cursor: pointer; }
.composer__hint { flex: 1; min-width: 0; color: var(--tx45); font-size: 0.6875rem; white-space: nowrap; }
.composer__hint kbd { padding: 1px 5px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); font: inherit; font-weight: 600; }
.composer__files { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 10px 0; }
.composer.is-closed .composer__input { min-height: 44px; }
.fchip { display: inline-flex; align-items: center; gap: 6px; max-width: 220px; padding: 3px 4px 3px 3px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); color: var(--tx72); font-size: var(--fs-xs); font-weight: 600; }
.fchip img { width: 22px; height: 22px; object-fit: cover; border-radius: 50%; }
.fchip button { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--tx45); }
.fchip button:hover { background: var(--surface-hover); color: var(--neg); }

.thread-empty { display: grid; flex: 1; place-content: center; justify-items: center; gap: 10px; padding: 32px; text-align: center; }
.thread-empty__art { display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 4px; border-radius: 24px; background: var(--brand-grad); box-shadow: var(--shadow-primary); color: var(--c-white); }
.thread-empty h3 { font-size: var(--fs-xl); font-weight: 800; }
.thread-empty p { max-width: 380px; color: var(--tx60); }
.thread-empty__cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 520px; margin-top: 10px; }
.qcat { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border); border-radius: 99px; background: var(--surface); font-size: var(--fs-sm); font-weight: 600; color: var(--tx72); transition: background-color var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur); }
.qcat:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); transform: translateY(-1px); }

/* ---------- Ticket details ---------- */

.tinfo__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 16px 12px; border-bottom: 1px solid var(--border); }
.tinfo__head h3 { font-size: var(--fs-sm); font-weight: 700; }
.tinfo__close { display: none; }
.tinfo__body { display: grid; align-content: start; gap: 14px; flex: 1; padding: 16px; overflow-y: auto; }
.tinfo__field { display: grid; gap: 6px; }
.tinfo__field > span, .tinfo__sla p { color: var(--tx45); font-size: 0.6875rem; font-weight: 700; }
.tinfo__field .input { height: 38px; }
.tinfo__list { display: grid; gap: 0; margin-top: 2px; border-top: 1px solid var(--border); }
.tinfo__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: var(--fs-sm); }
.tinfo__row dt { flex: none; color: var(--tx45); }
.tinfo__row dd { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; font-weight: 600; text-align: right; }
.tinfo__row dd .icon { flex: none; color: var(--tx45); }
.tinfo__sla { display: grid; gap: 8px; }
.sla { display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: 600; }
.sla--ok { background: color-mix(in oklab, var(--pos) 12%, transparent); color: var(--pos); }
.sla--wait { background: color-mix(in oklab, var(--warn) 12%, transparent); color: var(--warn); }
.sla--late { background: color-mix(in oklab, var(--neg) 12%, transparent); color: var(--neg); }
.tinfo__close-btn { justify-content: center; }
.link-chip { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 99px; background: var(--accent-tint); color: var(--accent); font-size: var(--fs-xs); font-weight: 600; }
.link-chip:hover { background: var(--accent-tint-strong); }

/* ---------- New ticket dialog ---------- */

.nt__cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.nt__cat input, .nt__prio input { position: absolute; opacity: 0; pointer-events: none; }
.nt__cat span {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--tx72);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur);
}
.nt__cat span:hover { border-color: var(--border-strong); }
.nt__cat input:checked + span { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.nt__cat input:focus-visible + span, .nt__prio input:focus-visible + span { box-shadow: var(--focus-ring); }
.nt__prio label { position: relative; flex: 1; }
.nt__prio span { display: grid; place-items: center; height: 32px; border-radius: var(--radius-sm); color: var(--tx60); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur); }
.nt__prio input:checked + span { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.nt__prio label:last-child input:checked + span { color: var(--neg); }
.dropzone { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--tx60); cursor: pointer; transition: background-color var(--dur), border-color var(--dur), color var(--dur), opacity var(--dur); }
.dropzone:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.dropzone span { display: grid; line-height: 1.3; }
.dropzone small { color: var(--tx45); font-size: var(--fs-xs); }
.dropzone + .composer__files { padding: 8px 0 0; }
.nt__sla { display: flex; align-items: center; gap: 6px; margin-top: 12px; color: var(--tx45); font-size: var(--fs-xs); }
.modal .nt.form-grid > .field:first-child { grid-column: 1 / -1; }

/* ---------- Help center ---------- */

.help { scroll-margin-top: calc(var(--topbar-h) + 16px); }
.help__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.help__head h2 { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.01em; }
.help__head p { margin-top: 2px; color: var(--tx60); font-size: var(--fs-sm); }

.topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.topic {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 4px 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  text-align: left;
  transition: transform 0.2s var(--ease), border-color var(--dur);
}
.topic:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.topic.is-active { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-card); }
.topic__ico { display: grid; grid-row: span 2; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-tint); color: var(--accent); }
.topic__txt { display: grid; min-width: 0; line-height: 1.35; }
.topic__txt b { font-size: var(--fs-md); }
.topic__txt small { overflow: hidden; color: var(--tx60); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.topic__n { color: var(--accent); font-size: 0.6875rem; font-weight: 700; }

.faq { display: grid; gap: 8px; }
.faq__item { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); transition: background-color var(--dur); }
.faq__item[open] { background: var(--surface); box-shadow: var(--shadow-sm); }
.faq__item.is-flash { animation: flash 1.2s var(--ease); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 14px; font-size: var(--fs-sm); font-weight: 600; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { flex: none; color: var(--tx45); transition: transform 0.25s var(--ease); }
.faq__item[open] summary .icon { transform: rotate(180deg); color: var(--accent); }
.faq__item p { padding: 0 14px 14px; color: var(--tx60); font-size: var(--fs-sm); line-height: 1.6; }
.faq__none { display: grid; justify-items: center; gap: 4px; padding-bottom: 12px; }

.channels { display: grid; gap: 14px; }
.channels li { display: flex; align-items: center; gap: 12px; }
.channels li > div { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.channels b { font-size: var(--fs-sm); }
.channels small { overflow: hidden; color: var(--tx45); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.channels__ico { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in oklab, var(--c) 14%, transparent); color: var(--c); }

.status-card .card__body { display: grid; gap: 10px; }
.status-card__row { display: flex; align-items: center; gap: 10px; font-size: var(--fs-sm); }
.status-card__list { display: grid; gap: 6px; }
.status-card__list li { display: flex; justify-content: space-between; color: var(--tx60); font-size: var(--fs-xs); }
.status-card__list span { display: inline-flex; align-items: center; gap: 4px; color: var(--pos); font-weight: 600; }
.status-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c-oklch-0-72-0-16-150); box-shadow: 0 0 0 0 var(--c-oklch-0-72-0-16-150-0-5); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }

/* ---------- Responsive ---------- */

/* Details fold into the conversation; the list icon toggles them as an overlay panel. */
@media (max-width: 1360px) {
  .desk, .desk:not(.is-reading) { position: relative; grid-template-columns: 320px minmax(0, 1fr); }
  .desk__info { position: absolute; top: 64px; right: 12px; bottom: 12px; z-index: 4; width: min(300px, calc(100% - 24px)); box-shadow: var(--shadow-pop); transform: translateX(16px); opacity: 0; pointer-events: none; transition: transform 0.25s var(--ease), opacity 0.2s; }
  .desk.has-info .desk__info { transform: none; opacity: 1; pointer-events: auto; }
  .thread__info-btn, .tinfo__close { display: inline-grid; }
}

@media (max-width: 1100px) {
  .sup-hero { grid-template-columns: minmax(0, 1fr); padding: 12px 16px; }
  .sup-team { display: none; }
  .sup-team { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .sup-team__facts { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sup-team__facts div { display: grid; justify-content: start; }
  .sup-team__facts dd { text-align: left; }
  .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablet + phone: list or conversation, one at a time. */
@media (max-width: 960px) {
  .desk, .desk:not(.is-reading) { grid-template-columns: minmax(0, 1fr); height: auto; }
  .tlist { overflow: visible; }
  .desk:not(.is-reading) .desk__thread { display: none; }
  .desk.is-reading .desk__list { display: none; }
  .desk__thread { height: calc(100vh - var(--topbar-h) - 28px); min-height: 520px; }
  .thread__back { display: inline-grid; }
}

@media (max-width: 640px) {
  .sup-hero { gap: 10px; padding: 12px; border-radius: var(--radius-md); }
  .sup-hero__title { font-size: var(--fs-md); }
  .sup-hero__actions .btn { flex: 1; justify-content: center; }
  .sup-team__facts { grid-template-columns: minmax(0, 1fr); }
  .sup-team__facts div { display: flex; justify-content: space-between; }
  .sup-team__facts dd { text-align: right; }
  .thread__head { padding: 12px; }
  .thread__acts .btn span { display: none; }
  .thread__acts .btn { width: 34px; padding: 0; justify-content: center; }
  .thread__log { padding: 14px 12px; }
  .tmsg { max-width: 94%; }
  .composer__hint { display: none; }
  .composer__bar .btn { margin-left: auto; }
  .topics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .topic { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 14px; }
  .topic__ico { grid-row: auto; width: 38px; height: 38px; border-radius: 12px; }
  .topic__txt small { display: none; }
  .nt__cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modal .nt.form-grid { grid-template-columns: minmax(0, 1fr); }
}

/* assets/css/mail.css */
/* ==========================================================================
   Email center: mail client (folders · message list · reading pane)
   ========================================================================== */

.mail {
  display: grid;
  grid-template-columns: 220px minmax(280px, 380px) minmax(0, 1fr);
  gap: 14px;
  height: calc(100dvh - var(--topbar-h) - var(--gutter) * 2);
  min-height: 520px;
}
.mail > .card { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

/* ---------- Folders ---------- */

.mail__nav { gap: 6px; padding: 12px; }
.mail__compose { height: 46px; margin-bottom: 8px; font-size: var(--fs-md); }
.mail__folders { display: grid; gap: 2px; }
.mail__folder {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  color: var(--tx60);
  font-weight: 500;
  text-align: left;
  transition: background-color var(--dur), color var(--dur);
}
.mail__folder span { flex: 1; }
.mail__folder b { min-width: 22px; padding: 0 7px; border-radius: 99px; background: var(--accent); color: var(--accent-fg); font-size: 0.6875rem; line-height: 20px; text-align: center; }
.mail__folder:hover { background: var(--surface-hover); color: var(--txt); }
.mail__folder.is-active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }

.mail__smtp {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--txt);
  font-size: var(--fs-sm);
}
.mail__smtp > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
.mail__smtp small { overflow: hidden; color: var(--tx45); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.mail__smtp:hover { border-color: var(--border-strong); }

/* ---------- List ---------- */

.mail__list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px; }
.mail__list-head h2 { font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.01em; }
.mail__search { padding: 0 14px 10px; border-bottom: 1px solid var(--border); }
.mail__items { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.mail__empty { padding: 30px 0; }

.mail-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 11px;
  width: 100%;
  padding: 11px 10px;
  border-radius: var(--radius-md);
  text-align: left;
  transition: background-color var(--dur);
}
.mail-item:hover { background: var(--surface-hover); }
.mail-item.is-active { background: var(--accent-tint); }
.mail-item.is-unread::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 50%;
  width: 4px;
  height: 22px;
  border-radius: 4px;
  background: var(--accent);
  transform: translateY(-50%);
}
.mail-item__main { display: grid; flex: 1; gap: 1px; min-width: 0; line-height: 1.35; }
.mail-item__top { display: flex; align-items: baseline; gap: 8px; }
.mail-item__top b { flex: 1; overflow: hidden; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.mail-item__top time { flex: none; color: var(--tx45); font-size: var(--fs-xs); }
.mail-item__subj { overflow: hidden; color: var(--tx72); font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.mail-item__subj em { color: var(--neg); font-style: normal; font-weight: 600; }
.mail-item__snip { overflow: hidden; color: var(--tx45); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.mail-item.is-unread .mail-item__top b,
.mail-item.is-unread .mail-item__subj { color: var(--txt); font-weight: 700; }
.mail-item.is-unread .mail-item__top time { color: var(--accent); font-weight: 700; }
.mail-item__flags { display: grid; gap: 4px; flex: none; padding-top: 22px; color: var(--tx45); }
.mail-item__flags .is-star { color: var(--warn); }

/* ---------- Reading pane ---------- */

.mail__blank { display: grid; place-content: center; justify-items: center; gap: 10px; flex: 1; color: var(--tx45); }
.mail-read__bar { display: flex; align-items: center; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.mail-read__bar .icon-btn { width: 36px; height: 36px; }
.mail-read__bar [data-star][aria-pressed="true"] { color: var(--warn); }
.mail-read__back { display: none !important; }
.mail-read__body { flex: 1; min-height: 0; padding: 22px 26px; overflow-y: auto; }
.mail-read__subj { margin-bottom: 18px; font-size: 1.375rem; font-weight: 800; line-height: 1.25; letter-spacing: -0.01em; }
.mail-read__meta { display: flex; align-items: flex-start; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--border); }
.mail-read__meta > div { flex: 1; min-width: 0; line-height: 1.4; }
.mail-read__meta small, .mail-read__meta p { color: var(--tx60); font-size: var(--fs-sm); }
.mail-read__meta time { flex: none; color: var(--tx45); font-size: var(--fs-sm); }
.mail-read__text { padding: 20px 0; font-size: var(--fs-lg); line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }

.mail-att {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 420px;
  padding: 12px 14px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.mail-att > div { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.mail-att small { overflow: hidden; color: var(--tx60); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.mail-att__ico { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--neg) 12%, transparent); color: var(--neg); }

.mail-read__reply { display: grid; gap: 8px; padding: 12px 16px 14px; border-top: 1px solid var(--border); background: var(--surface-2); }
.mail-read__reply .input { min-height: 74px; font-size: var(--fs-md); }

/* ---------- Compose dialog ---------- */

.modal .mail-form { grid-template-columns: minmax(0, 1fr); gap: 14px; }
.mail-form__body { min-height: 220px; font-size: var(--fs-md); line-height: 1.55; }
.mail-warn {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 14px;
  padding: 10px 12px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--warn) 12%, transparent);
  color: var(--txt);
  font-size: var(--fs-sm);
}
.mail-warn .icon { flex: none; margin-top: 2px; color: var(--warn); }
.mail-warn a { color: var(--accent); font-weight: 600; text-decoration: underline; }

/* ---------- Responsive ---------- */

@media (max-width: 1240px) {
  .mail { grid-template-columns: 64px minmax(260px, 340px) minmax(0, 1fr); }
  .mail__nav { padding: 10px 8px; }
  .mail__compose { width: 46px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .mail__folder { justify-content: center; padding: 0; position: relative; }
  .mail__folder span { display: none; }
  .mail__folder b { position: absolute; top: 2px; right: 2px; min-width: 18px; padding: 0 4px; line-height: 16px; font-size: 0.625rem; }
  .mail__smtp { justify-content: center; padding: 10px 0; }
  .mail__smtp > span:last-child { display: none; }
}

@media (max-width: 860px) {
  .mail { grid-template-columns: minmax(0, 1fr); height: auto; min-height: 0; }
  .mail > .card { min-height: 0; }
  .mail > .mail__nav { flex-direction: row; align-items: center; gap: 8px; padding: 8px; overflow: visible; }
  .mail__compose { flex: none; width: auto; margin: 0; padding: 0 14px; font-size: var(--fs-sm); gap: 8px; height: 42px; }
  .mail__folders { display: flex; flex: 1; gap: 2px; justify-content: space-around; }
  .mail__folder { flex: none; width: 42px; height: 42px; }
  .mail__smtp { display: none; }
  .mail__items { max-height: none; }
  .mail.is-reading .mail__list, .mail:not(.is-reading) .mail__read { display: none; }
  .mail-read__back { display: inline-grid !important; }
  .mail-read__body { padding: 18px; }
}

/* ---------- Signature ---------- */

/* Sidebar entry, sitting above the SMTP status at the foot of the folder list. */
.mail__sig { margin-top: auto; }
.mail__sig small { color: var(--tx45); font-size: var(--fs-xs); font-weight: 600; }
.mail__sig + .mail__smtp { margin-top: 6px; }

/* Editor dialog: form on the left, live email preview on the right. */
.sig-edit {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  gap: 22px;
}
.sig-edit__form { display: grid; align-content: start; gap: 16px; min-width: 0; }
.sig-edit__mode { justify-self: start; }
.sig-edit__mode button { display: inline-flex; align-items: center; gap: 7px; }
.sig-edit__text { font-family: inherit; line-height: 1.55; }
.sig-edit__opts {
  display: grid;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.sig-edit__opt > span:last-child { display: grid; line-height: 1.3; }
.sig-edit__opt b { font-size: var(--fs-sm); font-weight: 600; }
.sig-edit__opt small { color: var(--tx45); font-size: var(--fs-xs); }

.sig-edit__preview { display: grid; align-content: start; gap: 8px; min-width: 0; }
.sig-mail {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-2);
}
.sig-mail__head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-sm);
}
.sig-mail__head small { color: var(--tx45); }
.sig-mail__body { display: grid; gap: 10px; padding: 16px; color: var(--tx60); font-size: var(--fs-sm); line-height: 1.55; }
.sig-mail__sig {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--border-strong);
  color: var(--txt);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.sig-mail__sig::first-line { font-weight: 600; }
.sig-mail__sig.is-empty { color: var(--tx45); font-style: italic; }
.sig-mail__sig.is-empty::first-line { font-weight: inherit; }

/* Settings → Email: current signature + edit button. */
.sig-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.sig-summary__text { margin: 0; font: inherit; font-size: var(--fs-sm); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.sig-summary__text.is-empty { color: var(--tx45); font-style: italic; }
.sig-summary .btn { flex: none; }

@media (max-width: 760px) {
  .sig-edit { grid-template-columns: minmax(0, 1fr); }
  .sig-edit__preview { order: -1; }
}
@media (max-width: 1240px) {
  .mail__sig small { display: none; }
}
@media (max-width: 860px) {
  .mail__sig { flex: none; width: 42px; height: 42px; margin: 0; }
}
/* Small phones: compose + five folders + signature fit in one row. */
@media (max-width: 440px) {
  .mail__folder, .mail__sig { width: 36px; height: 36px; }
  .mail__compose { padding: 0 10px; }
}

/* assets/css/business.css */
/* ==========================================================================
   Business modules: dashboard, due collection, purchasing, inventory,
   cash & bank, reports center, modules page, shared helpers and print docs.
   Built only on the tokens in tokens.css, so light / dark themes just work.
   ========================================================================== */

/* ---------- Shared helpers ---------- */

.is-pos { color: var(--pos); }
.text-neg { color: var(--neg); }
.muted.r, .r { text-align: right; }
.t-center { text-align: center; }
.field-err { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--neg); }
.hint--warn { display: flex; align-items: flex-start; gap: 6px; margin-top: 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--warn); }
.hint--warn svg { flex: none; margin-top: 1px; }
.field__hint { font-size: var(--fs-xs); color: var(--tx45); }
.form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .form-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1280px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) { .grid--3 { grid-template-columns: minmax(0, 1fr); } }
.grid--3 > .card, .grid--2 > .card, .grid--2-1 > .card { min-width: 0; }

.badge--neutral { --tone: var(--tx60); }
.delta--good { color: var(--pos); font-weight: 600; }
.delta--bad { color: var(--neg); font-weight: 600; }
.delta { display: inline-flex; align-items: center; gap: 4px; font-size: 0.6875rem; white-space: nowrap; }

.table tr.is-clickable,
.table tbody tr[data-id],
.table tbody tr:has([data-act="view"], [data-act="open"], [data-act="preview"], [data-open], a.cell-link, [data-history]) { cursor: pointer; }
.table tr.is-dim td { opacity: 0.55; }
.table tfoot td { padding: 11px 16px; border-top: 1px solid var(--border-strong); background: var(--surface-2); font-weight: 700; white-space: nowrap; }
@media (max-width: 640px) {
  .table tfoot, .table tfoot tr, .table tfoot td { display: block; width: 100%; }
  .table tfoot tr { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 10px 14px; }
  .table tfoot td { width: auto; padding: 0; border: 0; background: none; }
  .table tfoot td:empty { display: none; }
}

.btn--danger-text { color: var(--neg); }
.btn--danger-text:hover { background: color-mix(in oklab, var(--neg) 10%, transparent); }

.list-toolbar { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.list-toolbar .search { flex: 1 1 260px; max-width: 420px; }
.filter-row { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.filter-row .field { min-width: 160px; }
.filter-row .field--date { min-width: 140px; }
/* Phones: status chips and filters each scroll sideways in one row. */
@media (max-width: 640px) {
  .table-toolbar { margin-bottom: 10px; }
  .table-toolbar .chips { position: relative; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .table-toolbar .chip { flex: none; }
  .filter-row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-top: 8px; padding-bottom: 2px; }
  .filter-row .field { flex: none; min-width: 150px; }
  .filter-row .field--date { min-width: 140px; }
  .filter-row .btn { flex: none; }
  .filter-row .spacer { display: none; }
}

.fin-filters--3 { grid-template-columns: minmax(220px, 2fr) repeat(2, minmax(150px, 1fr)); }
.fin-filters--4 { grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(150px, 1fr)); }
@media (max-width: 1280px) {
  .fin-filters--3, .fin-filters--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .fin-filters--3, .fin-filters--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 8px; }
  :is(.fin-filters--3, .fin-filters--4) > .search { grid-column: 1 / -1; }
}

/* Date range: presets + from / to */
/* Cash & bank filters: search and two selects share a row; the date range is one unit that sits on
   the right when there is room and drops to its own line when there isn't — it never splits. */
.fin-filters.fin-filters--cash { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; container: cashfilters / inline-size; }
.fin-filters--cash > .search { flex: 1 1 220px; min-width: 180px; }
.fin-filters--cash > .field { flex: 0 1 180px; min-width: 150px; }
.fin-filters--cash > .range-bar { flex: 0 0 auto; flex-wrap: nowrap; margin-left: auto; }
/* Sized by the card, not the window, so an open sidebar is accounted for. */
@container cashfilters (max-width: 860px) {
  .fin-filters--cash > .range-bar { flex: 1 1 100%; min-width: 0; margin-left: 0; }
  .fin-filters--cash > .range-bar .segmented { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
}
@media (max-width: 640px) {
  .fin-filters.fin-filters--cash { gap: 8px; padding: 8px; }
  .fin-filters--cash > .search { flex-basis: 100%; }
  .fin-filters--cash > .field { flex: 1 1 0; min-width: 0; }
  .fin-filters--cash > .range-bar { flex-wrap: wrap; }
  .fin-filters--cash > .range-bar .segmented { flex: 1 1 100%; }
  .fin-filters--cash > .range-bar .segmented button { flex: 1; white-space: nowrap; }
  .fin-filters--cash > .range-bar .range-bar__date { flex: 1 1 0; min-width: 0; }
}

.range-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.range-bar__date { width: 148px; }
.range-bar__date .input { width: 100%; }
.range-bar__to { color: var(--tx45); }
@media (max-width: 640px) { .range-bar .segmented { width: 100%; overflow-x: auto; } .range-bar__date { flex: 1; width: auto; } }

/* ---------- Sortable table headers ---------- */

.th-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.th-sort:hover { color: var(--txt); }
.th-sort:focus-visible { outline: none; border-radius: 4px; box-shadow: var(--focus-ring); }
.t-right .th-sort { flex-direction: row-reverse; }
.th-sort .sort-ind { margin-left: 0; opacity: 0.35; font-size: 0.75rem; }
.th-sort .sort-ind.is-on { opacity: 1; color: var(--accent); }
.th-sort:hover .sort-ind { opacity: 0.8; }

/* ---------- Sidebar: collapsible groups ---------- */

button.nav-group__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radius-sm);
  transition: color var(--dur);
}
button.nav-group__label:hover { color: var(--txt); }
button.nav-group__label:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.nav-group__chev { opacity: 0.7; transition: transform var(--dur) var(--ease); }
.nav-group.is-closed .nav-group__chev { transform: rotate(-90deg); }
.nav-group.is-closed .nav-group__items { display: none; }
@media (min-width: 961px) {
  .app.is-collapsed .nav-group__chev { display: none; }
  .app.is-collapsed .nav-group.is-closed .nav-group__items { display: block; }
  .app.is-collapsed button.nav-group__label { cursor: default; pointer-events: none; }
}
.nav-link { height: 36px; }

/* ---------- Top bar: demo pill ---------- */

.demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--chrome-border-strong);
  border-radius: 99px;
  background: var(--chrome-hover);
  color: var(--chrome-txt);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur);
}
.demo-pill:hover { background: var(--chrome-active); }
.demo-pill:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.demo-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--c-oklch-0-82-0-15-85); box-shadow: 0 0 0 3px var(--c-oklch-0-82-0-15-85-0-25); }
/* Signed in, the pill shows sync state (cloud.js sets data-sync). */
.demo-pill[data-sync="synced"] .demo-pill__dot, .demo-pill[data-sync="idle"] .demo-pill__dot { background: var(--c-oklch-0-8-0-15-160); box-shadow: 0 0 0 3px var(--c-oklch-0-8-0-15-160-0-25); }
.demo-pill[data-sync="syncing"] .demo-pill__dot { background: var(--c-oklch-0-8-0-12-230); box-shadow: 0 0 0 3px var(--c-oklch-0-8-0-12-230-0-25); animation: sync-pulse 1s ease-in-out infinite; }
.demo-pill[data-sync="error"] .demo-pill__dot, .demo-pill[data-sync="locked"] .demo-pill__dot { background: var(--c-oklch-0-7-0-17-25); box-shadow: 0 0 0 3px var(--c-oklch-0-7-0-17-25-0-25); }
@keyframes sync-pulse { 50% { opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) { .demo-pill[data-sync="syncing"] .demo-pill__dot { animation: none; } }
@media (max-width: 1100px) { .demo-pill { width: 30px; padding: 0; justify-content: center; font-size: 0; gap: 0; } }
@media (max-width: 900px) { .demo-pill { display: none; } }
.qs__demo { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 8px; padding: 8px 10px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--warn) 10%, transparent); color: var(--tx72); font-size: var(--fs-xs); text-align: left; }
.qs__demo:hover { background: color-mix(in oklab, var(--warn) 16%, transparent); }
.demo-note p { color: var(--tx72); line-height: 1.55; }
.demo-note__list { display: grid; gap: 8px; margin-top: 12px; padding-left: 18px; color: var(--tx72); list-style: disc; }

/* ---------- Dialog sizes ---------- */

.modal--xl { width: min(1180px, calc(100% - 24px)); }
.inv-preview { overflow: auto; max-height: min(72vh, 900px); padding: 8px; background: var(--surface-2); display: grid; justify-items: center; }
.inv-preview .inv-sheet { box-shadow: none; }
.modal--lg .form-grid.form-grid--2 > .field:first-child:not(.field--full) { grid-column: auto; }
.modal--xl .form-grid > .field:first-child { grid-column: auto; }
.modal--xl .form-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .modal--xl .form-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .modal--xl .form-grid--4 { grid-template-columns: minmax(0, 1fr); } }
.modal__badges { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }
.modal__foot .spacer { flex: 1; }
.pay-h small { margin-left: 8px; font-size: var(--fs-xs); font-weight: 500; color: var(--tx45); }

/* ---------- Due collection ---------- */

.collect-who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  min-width: 0;
}
.collect-who > div { display: grid; min-width: 0; }
.collect-who small { font-size: var(--fs-xs); color: var(--tx45); }
.collect-who__due { margin-left: auto; text-align: right; }
.collect-who__due b { font-size: 1.125rem; color: var(--warn); font-variant-numeric: tabular-nums; }
.collect-form { margin-top: 16px; }
/* Two columns: invoices on the left, customer + payment details on the right */
.collect-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 24px; align-items: start; }
.collect-left, .collect-right { display: grid; gap: 14px; min-width: 0; align-content: start; }
.collect-right .pay-h { margin: 6px 0 0; }
.collect-left .collect-form { margin-top: 0; }
.collect-left textarea.input { resize: none; }
.alloc--line .alloc__row { grid-template-columns: 22px minmax(72px, 1fr) minmax(92px, 1.1fr) repeat(3, minmax(74px, 1fr)); gap: 8px; padding: 10px 12px; font-size: var(--fs-sm); white-space: nowrap; }
.alloc--line .alloc__row > span { overflow: hidden; text-overflow: ellipsis; }
.alloc--line .alloc__row--head { font-size: 0.625rem; }
@media (max-width: 860px) { .collect-split { grid-template-columns: minmax(0, 1fr); } .collect-right { order: -1; } }
@media (max-width: 640px) { .alloc--line .alloc__row { grid-template-columns: 24px repeat(3, minmax(0, 1fr)); white-space: normal; } }
.collect-sum { margin-right: auto; align-self: center; font-size: var(--fs-sm); color: var(--tx60); }

.alloc { display: grid; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.alloc__row {
  display: grid;
  grid-template-columns: 28px minmax(110px, 1.2fr) minmax(120px, 1.2fr) repeat(3, minmax(90px, 1fr));
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-top: 1px solid var(--border);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.alloc--5 .alloc__row { grid-template-columns: minmax(120px, 1.3fr) minmax(100px, 1fr) repeat(3, minmax(90px, 1fr)); cursor: default; }
.alloc__row:first-child { border-top: 0; }
.alloc__row--head { padding-block: 8px; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 600; color: var(--tx45); cursor: default; }
.alloc__row > span { min-width: 0; }
.alloc__row b { display: block; font-weight: 600; }
.alloc__row small { font-size: var(--fs-xs); color: var(--tx45); }
.alloc__row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); }
.alloc__row.is-hit { background: color-mix(in oklab, var(--pos) 7%, transparent); }
.alloc__row.is-off { opacity: 0.5; }
/* Phones: two lines per invoice — what it is, then the money (labelled). */
@media (max-width: 640px) {
  .alloc__row--head { display: none; }
  .alloc__row { grid-template-columns: 24px repeat(3, minmax(0, 1fr)); row-gap: 6px; }
  .alloc__row > :nth-child(1) { grid-row: 1 / 3; align-self: start; margin-top: 2px; }
  .alloc__row > :nth-child(2) { grid-column: 2 / 3; }
  .alloc__row > :nth-child(3) { grid-column: 3 / 5; text-align: right; }
  .alloc--5 .alloc__row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alloc--5 .alloc__row > :nth-child(1) { grid-row: auto; margin-top: 0; }
  .alloc--5 .alloc__row > :nth-child(2) { grid-column: 2 / 4; }
  .alloc__row > .r { text-align: left; font-size: var(--fs-xs); overflow-wrap: anywhere; }
  .collect-sum { display: none; }
  .alloc__row > .r::before { display: block; font-size: 0.625rem; font-weight: 600; color: var(--tx45); }
  .alloc__row > .r:nth-last-child(3)::before { content: "Balance"; }
  .alloc__row > .r:nth-last-child(2)::before { content: "Applied"; }
  .alloc__row > .r:nth-last-child(1)::before { content: "Remaining"; }
}

.done-state { display: grid; justify-items: center; gap: 8px; padding: 12px 0 4px; text-align: center; }
.done-state__ico { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--pos); background: color-mix(in oklab, var(--pos) 14%, transparent); }
.done-state h3 { font-size: var(--fs-xl); }
.done-state__list { display: grid; gap: 4px; width: min(360px, 100%); margin: 6px 0; }
.done-state__list li { display: flex; justify-content: space-between; padding: 7px 12px; border-radius: var(--radius-sm); background: var(--surface-2); font-variant-numeric: tabular-nums; }

.aging .card__head .muted { font-size: var(--fs-xs); }
.aging__bar { display: flex; height: 12px; overflow: hidden; border-radius: 99px; background: var(--surface-2); gap: 2px; }
.aging__bar span { min-width: 4px; }
.aging__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.aging__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-xs);
  cursor: pointer;
}
.aging__item i { width: 9px; height: 9px; border-radius: 3px; }
.aging__item span { color: var(--tx60); }
.aging__item b { font-variant-numeric: tabular-nums; }
.aging__item.is-active { border-color: var(--accent); box-shadow: var(--focus-ring); }
.aging { margin-bottom: 12px; }
.aging .card__head { padding: 10px 16px; }
.aging .card__body { padding: 12px 16px; }
@media (max-width: 640px) {
  .aging .card__head .muted { display: none; }
  .aging__legend { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .aging__item { flex: none; }
}

/* ---------- Purchase form & details ---------- */

.line-ed { display: grid; gap: 6px; margin-bottom: 10px; }
.line-ed__row {
  display: grid;
  grid-template-columns: minmax(200px, 3fr) minmax(80px, 0.8fr) minmax(110px, 1fr) minmax(110px, 1fr) 32px;
  align-items: center;
  gap: 8px;
}
.line-ed--recv .line-ed__row { grid-template-columns: minmax(180px, 3fr) repeat(2, minmax(70px, 0.7fr)) minmax(110px, 1fr); padding: 6px 0; border-bottom: 1px solid var(--border); }
.line-ed--recv .line-ed__row span:first-child { display: grid; }
.line-ed--recv small { color: var(--tx45); font-size: var(--fs-xs); }
.line-ed__row--head { font-size: var(--fs-xs); font-weight: 600; color: var(--tx45); }
.line-ed__row .input.r { text-align: right; }
.line-ed__total { font-weight: 700; font-variant-numeric: tabular-nums; }
.line-ed__lock { display: grid; place-items: center; color: var(--tx45); }
.line-ed__note { grid-column: 1 / -1; margin-top: -2px; font-size: var(--fs-xs); color: var(--pos); }
@media (max-width: 640px) {
  .line-ed__row { grid-template-columns: 1fr 1fr 32px; padding-bottom: 8px; border-bottom: 1px solid var(--border); }
  .line-ed__row > select { grid-column: 1 / -1; }
  .line-ed__row--head { display: none; }
  .line-ed__total { grid-column: 1 / 3; }
  .line-ed--recv .line-ed__row { grid-template-columns: 1fr 1fr 1fr; }
  .line-ed--recv .line-ed__row > span:first-child { grid-column: 1 / -1; }
}

.pform-foot { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 20px; margin-top: 18px; align-items: start; }
@media (max-width: 760px) { .pform-foot { grid-template-columns: minmax(0, 1fr); } }

.sum-box { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); font-variant-numeric: tabular-nums; }
.sum-box > div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; }
.sum-box dt { color: var(--tx60); }
.sum-box dd { font-weight: 600; }
.sum-box__total { margin-top: 4px; padding-top: 8px !important; border-top: 1px solid var(--border-strong); font-size: var(--fs-lg); }
.sum-box__total dt { color: var(--txt); font-weight: 700; }
.sum-box__total dd { font-weight: 800; }
.sum-box__due dd { color: var(--warn); font-weight: 800; }

.detail-head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.detail-head > div { display: grid; gap: 2px; align-content: start; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); min-width: 0; }
.detail-head span { font-size: 0.6875rem; font-weight: 600; color: var(--tx45); }
.detail-head small { font-size: var(--fs-xs); color: var(--tx60); }
.detail-head .progress { height: 5px; margin-top: 4px; }
.detail-split { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(260px, 1fr); gap: 20px; margin-top: 16px; align-items: start; }
@media (max-width: 760px) { .detail-head { grid-template-columns: repeat(2, minmax(0, 1fr)); } .detail-split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Profile header (supplier) ---------- */

.back-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--tx60); }
.back-link:hover { color: var(--accent); }
.profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 16px; margin-bottom: 10px; }
.profile-head .btn { height: 34px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.profile-head__main { flex: 1 1 320px; min-width: 0; }
.profile-head__main h1 { font-size: var(--fs-lg); font-weight: 800; letter-spacing: -0.01em; }
.profile-head__main p { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: 2px; font-size: var(--fs-xs); color: var(--tx60); }
.profile-head__main p span { display: inline-flex; align-items: center; gap: 6px; }
.avatar--lg { width: 40px; height: 40px; font-size: 0.9375rem; }
@media (max-width: 640px) {
  .profile-head { padding: 10px 12px; }
  .profile-head > .avatar--lg { width: 34px; height: 34px; font-size: 0.8125rem; }
  .profile-head__main { flex-basis: calc(100% - 50px); }
  .profile-head__main h1 { font-size: var(--fs-md); }
  .profile-head .btn-row { width: 100%; flex-wrap: nowrap; }
  .profile-head .btn--ghost, .profile-head .btn--soft { width: 34px; padding: 0; font-size: 0; gap: 0; flex: none; }
  .profile-head .btn--primary { flex: 1; }
}
.note-strip { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--accent-tint); color: var(--tx72); font-size: var(--fs-sm); }

/* ---------- Inventory ---------- */

/* Four equal tiles, icon and label on one line; two per row on a phone. */
.adj { display: grid; gap: 14px; }
.adj-modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.adj-mode {
  display: grid; justify-items: center; gap: 6px; min-height: 72px; padding: 12px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
  color: var(--tx72); font-size: var(--fs-sm); font-weight: 700;
}
.adj-mode svg { color: var(--tx45); }
.adj-mode:hover { border-color: color-mix(in oklab, var(--accent) 45%, var(--border)); background: var(--surface-2); }
.adj-mode.is-active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.adj-mode.is-active svg { color: var(--accent); }
@media (max-width: 560px) { .adj-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adj-help { margin: 0; padding: 0 2px; color: var(--tx60); font-size: var(--fs-sm); line-height: 1.45; }
.adj-qty .input { height: 56px; font-size: 1.75rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.adj-preview { display: flex; align-items: center; justify-content: center; gap: 22px; padding: 14px 12px; border-radius: var(--radius-md); background: var(--surface-2); }
.adj-preview > div { display: grid; justify-items: center; gap: 2px; }
.adj-preview span { font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tx45); }
.adj-preview b { font-size: 1.75rem; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; }
.adj-preview__arrow { color: var(--tx45); }

/* ---------- Cash & bank ----------
   One slim strip: the total, then each account as a small chip (click to filter the table).
   Chips scroll sideways when they don't fit, so the strip never grows taller. */

.acct-bar { display: flex; align-items: center; gap: 12px; padding: 6px 8px 6px 14px; margin-bottom: 10px; }
.acct-bar__total { display: grid; flex: none; padding-right: 14px; border-right: 1px solid var(--border); line-height: 1.25; }
.acct-bar__total span { font-size: 0.625rem; font-weight: 600; color: var(--tx45); }
.acct-bar__total b { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 800; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.acct-bar__list { display: flex; flex: 1; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.acct-bar__list::-webkit-scrollbar { display: none; }
.acct-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  max-width: 220px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur), background-color var(--dur);
}
.acct-chip:hover { border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.acct-chip.is-active { border-color: var(--accent); background: var(--accent-tint); }
.acct-chip:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.acct-chip__ico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 7px; color: var(--accent); background: var(--accent-tint); }
.acct__ico--cash { color: var(--pos); background: color-mix(in oklab, var(--pos) 13%, transparent); }
.acct__ico--mobile { color: var(--c-oklch-0-6-0-19-355); background: color-mix(in oklab, var(--c-oklch-0-6-0-19-355) 13%, transparent); }
.acct-chip__txt { display: grid; min-width: 0; line-height: 1.2; }
.acct-chip__txt small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.6875rem; color: var(--tx60); }
.acct-chip__txt b { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.acct-bar__sel { display: flex; align-items: center; gap: 10px; flex: none; padding-left: 12px; border-left: 1px solid var(--border); }
.acct-bar__sel > span { display: grid; gap: 1px; font-size: 0.6875rem; font-variant-numeric: tabular-nums; }
.acct-bar__sel > span span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 640px) {
  .acct-bar { flex-wrap: wrap; gap: 6px 10px; padding: 8px; margin: 0 0 10px; }
  .acct-bar__total { border-right: 0; padding-right: 0; }
  .acct-bar__list { flex-basis: 100%; order: 3; }
  .acct-bar__sel { margin-left: auto; padding-left: 0; border-left: 0; }
}

/* ---------- Reports center ---------- */

.rep { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; }
.rep__nav { position: sticky; top: 12px; padding: 10px; }
.rep__pick { display: none; }
.rep__group + .rep__group { margin-top: 8px; }
.rep__glabel { display: flex; align-items: center; gap: 6px; padding: 8px 8px 4px; font-size: 0.6875rem; font-weight: 600; color: var(--tx45); }
.rep__link { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--tx72); font-size: var(--fs-sm); font-weight: 500; text-align: left; transition: background-color var(--dur), color var(--dur); }
.rep__link:hover { background: var(--surface-hover); color: var(--txt); }
.rep__link.is-active { background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.rep__main { display: grid; gap: 12px; min-width: 0; }
.rep__main > .grid { margin-bottom: 0; }
.rep__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.rep__title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.rep__title h2 { font-size: var(--fs-md); font-weight: 700; }
.rep__title p { font-size: var(--fs-xs); color: var(--tx60); }
.rep__ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--radius-md); color: var(--accent); background: var(--accent-tint); }
.rep__tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rep__asof { font-size: var(--fs-sm); }
.rep__note { justify-content: flex-start; align-items: flex-start; gap: 8px; color: var(--tx60); }
.rep__note .icon { flex: none; margin-top: 2px; }
.chart-box--donut { max-width: 560px; margin: 0 auto; }
.pl-strong { font-weight: 700; }
.pl-total { font-weight: 800; font-size: var(--fs-lg); }
.pl-sub { color: var(--tx60); padding-left: 16px; }
@media (max-width: 960px) {
  .rep { grid-template-columns: minmax(0, 1fr); }
  .rep__nav { position: static; padding: 10px; }
  .rep__group { display: none; }
  .rep__pick { display: block; }
}

/* ---------- Dashboard ---------- */

.dash-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.dash-head__actions .btn { height: 34px; padding: 0 12px; font-size: var(--fs-sm); border-radius: var(--radius-sm); }
.dash-head__title { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; }
.dash-head__sub { font-size: var(--fs-xs); color: var(--tx60); }
.dash-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* Phones: the greeting goes (the top bar names the page); period switch and New invoice share one row. */
@media (max-width: 640px) {
  .dash-head { margin-bottom: 10px; }
  .dash-head > div:first-child { display: none; }
  .dash-head__actions { width: 100%; flex-wrap: nowrap; gap: 6px; }
  .dash-head__actions .segmented { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .dash-head__actions .segmented button { flex: 1; padding: 0 6px; white-space: nowrap; }
  .dash-head__actions .btn--ghost, .dash-head__actions [data-act="refresh"] { display: none; }
  .dash-head__actions .btn--primary { width: 34px; padding: 0; font-size: 0; gap: 0; flex: none; }
}

.meter-list { display: grid; gap: 10px; }
.meter-list li { display: grid; grid-template-columns: 36px minmax(0, 1fr) 44px; align-items: center; gap: 10px; }
.meter-list__label { font-size: var(--fs-sm); color: var(--tx60); }
.meter-list__val { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.meter-list .progress { height: 8px; }
.meter-list + .hint { margin-top: 12px; }

.rank { display: grid; gap: 12px; }
.rank li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.rank__n { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); font-size: var(--fs-xs); font-weight: 700; color: var(--tx60); }
.rank__main { min-width: 0; }
.rank__main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: var(--fs-sm); }
.rank__main .progress { height: 5px; margin-top: 5px; }
.rank__val { display: grid; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.rank__val small { font-weight: 400; color: var(--tx45); font-size: var(--fs-xs); }

.list__ico { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--accent); background: var(--accent-tint); }
.pay-due { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: var(--radius-md); background: color-mix(in oklab, var(--warn) 10%, transparent); color: var(--txt); font-size: var(--fs-sm); font-weight: 600; }
.pay-due span { flex: 1; text-align: left; }
.pay-due b { color: var(--warn); font-variant-numeric: tabular-nums; }
.pay-due:hover { background: color-mix(in oklab, var(--warn) 16%, transparent); }

.feed { display: grid; grid-template-columns: minmax(0, 1fr); }
.feed li { min-width: 0; }
.feed__row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 4px; border-radius: var(--radius-sm); text-align: left; }
.feed__row:hover { background: var(--surface-hover); }
.feed__ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; color: var(--accent); background: var(--accent-tint); }
.feed__ico--pos { color: var(--pos); background: color-mix(in oklab, var(--pos) 13%, transparent); }
.feed__ico--neg { color: var(--neg); background: color-mix(in oklab, var(--neg) 12%, transparent); }
.feed__text { display: grid; flex: 1; min-width: 0; font-size: var(--fs-sm); }
.feed__text, .feed__text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed__text small { font-size: var(--fs-xs); color: var(--tx45); }
.feed__amt { font-size: var(--fs-sm); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Modules & roadmap ---------- */

.demo-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 10px 14px; margin-bottom: 4px; background: color-mix(in oklab, var(--warn) 7%, var(--surface)); border-color: color-mix(in oklab, var(--warn) 30%, var(--border)); }
.demo-banner > div:nth-child(2) { flex: 1 1 360px; }
.demo-banner p { margin-top: 2px; font-size: var(--fs-sm); color: var(--tx72); }
.demo-banner__ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-md); color: var(--warn); background: color-mix(in oklab, var(--warn) 15%, transparent); }
.demo-banner__stats { display: flex; flex-wrap: wrap; gap: 6px; }
.mod-h { margin: 22px 0 10px; font-size: var(--fs-sm); font-weight: 700; color: var(--tx45); }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
@media (max-width: 400px) { .mod-grid { grid-template-columns: minmax(0, 1fr); } }
.mod { display: flex; align-items: flex-start; gap: 12px; padding: 14px; color: inherit; }
.mod--link { transition: border-color var(--dur), transform var(--dur) var(--ease); }
.mod--link:hover { transform: translateY(-2px); border-color: color-mix(in oklab, var(--accent) 40%, var(--border)); }
.mod__ico { --tone: var(--accent); display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-md); color: var(--tone); background: color-mix(in oklab, var(--tone) 13%, transparent); }
.mod__ico--pos { --tone: var(--pos); }
.mod__ico--warn { --tone: var(--warn); }
.mod__ico--info { --tone: var(--accent); }
.mod__ico--muted { --tone: var(--tx45); }
.mod__body { flex: 1; min-width: 0; }
.mod__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; }
.mod__body p { margin-top: 4px; font-size: var(--fs-sm); color: var(--tx60); line-height: 1.45; }
.mod__go { align-self: center; color: var(--tx45); }

/* ---------- Printable documents (receipts, statements, reports) ---------- */

.print-doc { padding: 0; color: var(--c-1d2433); font-family: var(--font); font-size: 11pt; line-height: 1.45; background: var(--c-white); }
.print-doc .pd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 2px solid var(--c-1d2433); }
.print-doc .pd-head__co { flex: 1; min-width: 0; }
.print-doc .pd-head__co p { margin: 0; max-width: 92mm; line-height: 1.35; }
.print-doc .pd-reg { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px !important; }
.print-doc .pd-reg span { padding: 1px 7px; border: 1px solid var(--c-dde1e8); border-radius: 99px; font-size: 8pt; font-weight: 700; letter-spacing: 0.02em; color: var(--c-4a5468); }
.print-doc .pd-ids { display: none; }
.print-doc .pd-asof { margin: 4px 0 0; font-size: 9pt; color: var(--c-4a5468); }

/* A4 documents on the invoice design: brand header on top, the document below, brand footer at the end. */
.pd-sheet { min-height: 1123px; box-shadow: none; }
.pd-sheet--fit { min-height: 0; height: auto; overflow: visible; }
.pd-sheet__body { flex: 1; padding: 26px var(--pad) 30px; color: var(--c-1d2433); font-size: 10.5pt; }
.pd-sheet--fit .pd-sheet__body { flex: none; padding-bottom: 8px; }
.pd-sheet.is-branded .pd-head__co { display: none; }
.pd-sheet.is-branded .pd-head { border-bottom-color: var(--inv-dark); }
.pd-sheet.is-branded .pd-title { display: grid; flex: 1; grid-template-columns: 1fr auto; align-items: end; column-gap: 16px; text-align: right; }
.pd-sheet.is-branded .pd-title h2 { grid-row: 1 / span 4; text-align: left; color: var(--inv-dark); font-size: 18pt; }
.pd-sheet.is-branded .pd-ids { display: block; }
.pd-sheet .pd-table th { border-bottom-color: var(--inv-dark); }
.pd-sheet .pd-table tfoot tr:last-child td { border-top-color: var(--inv-dark); color: var(--inv-dark); }
.print-doc .pd-logo { max-height: 48px; margin-bottom: 6px; }
.print-doc .pd-co { font-size: 17pt; font-weight: 800; }
.print-doc .pd-head p { font-size: 9pt; color: var(--c-4a5468); }
.print-doc .pd-title { text-align: right; }
.print-doc .pd-title h2 { font-size: 15pt; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.print-doc .pd-parties { display: flex; gap: 24px; margin-bottom: 14px; }
.print-doc .pd-parties > div { flex: 1; }
.print-doc .pd-parties span, .print-doc .pd-amount span, .print-doc .pd-kpis span { display: block; font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-6b7487); }
.print-doc .pd-parties p { font-size: 9pt; color: var(--c-4a5468); }
.print-doc .pd-amount { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border: 1.5px solid var(--c-1d2433); border-radius: 6px; }
.print-doc .pd-amount b { font-size: 16pt; }
.print-doc .pd-words { margin: 6px 0 14px; font-style: italic; font-size: 10pt; }
.print-doc .pd-table { width: 100%; border-collapse: collapse; font-size: 9.5pt; }
.print-doc .pd-table th { padding: 6px 8px; border-bottom: 1.5px solid var(--c-1d2433); text-align: left; font-size: 8pt; text-transform: uppercase; letter-spacing: 0.04em; }
.print-doc .pd-table td { padding: 6px 8px; border-bottom: 1px solid var(--c-dde1e8); }
.print-doc .pd-table .r { text-align: right; }
.print-doc .pd-table tfoot td { border-bottom: 0; }
.print-doc .pd-table .pd-strong td, .print-doc .pd-table tfoot tr:last-child td { font-weight: 700; border-top: 1.5px solid var(--c-1d2433); }
.print-doc .pd-table .badge { background: none; padding: 0; height: auto; color: inherit; font-weight: 600; }
.print-doc .pd-table .cell-sub { display: block; font-size: 8pt; color: var(--c-6b7487); }
.print-doc .pd-kpis { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.print-doc .pd-kpis > div { flex: 1 1 120px; padding: 8px 10px; border: 1px solid var(--c-dde1e8); border-radius: 6px; }
.print-doc .pd-note { margin-top: 12px; font-size: 9pt; color: var(--c-4a5468); }
.print-doc .pd-gen { margin-top: 18px; font-size: 8pt; color: var(--c-6b7487); }
.print-doc .pd-sign { display: flex; justify-content: space-between; gap: 40px; margin-top: 28px; font-size: 9pt; color: var(--c-4a5468); }
.st-who { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin-bottom: 16px; }
.st-who span { display: block; font-size: 8pt; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-6b7487); }
.st-who b { display: block; margin-top: 2px; font-size: 13pt; }
.st-who p { margin: 0; font-size: 9pt; color: var(--c-4a5468); }
.st-due { min-width: 46mm; padding: 8px 12px; border: 1.5px solid var(--c-1d2433); border-radius: 8px; text-align: right; }
.st-due b { font-size: 16pt; }
.st-due.is-due { border-color: var(--c-b45309); background: #fff8ef; }
.st-due.is-due b { color: var(--c-b45309); }
.st-due.is-credit { border-color: #15803d; background: #f3faf5; }
.st-due.is-credit b { color: #15803d; }
.print-doc .pd-sign > div { flex: 1; max-width: 220px; text-align: center; }
.print-doc .pd-sign span { display: block; margin-bottom: 6px; border-top: 1px solid var(--c-1d2433); }

/* 80 mm thermal roll */
.print-doc--thermal { width: 74mm; font-size: 9pt; }
.print-doc--thermal .pd-head { display: block; text-align: center; border-bottom-style: dashed; }
.print-doc--thermal .pd-logo { display: none; }
.print-doc--thermal .pd-co { font-size: 12pt; }
.print-doc--thermal .pd-title { text-align: center; margin-top: 6px; }
.print-doc--thermal .pd-title h2 { font-size: 10pt; }
.print-doc--thermal .pd-parties { display: block; }
.print-doc--thermal .pd-parties > div { margin-bottom: 6px; }
.print-doc--thermal .pd-amount b { font-size: 12pt; }
.print-doc--thermal .pd-table { font-size: 8pt; }
.print-doc--thermal .pd-sign { margin-top: 30px; gap: 12px; }

/* ---------- Due collection: compact top area so the customer list sits higher ---------- */
.view--collections .page-head { margin-bottom: 10px; }
.view--collections .grid--kpi { gap: 10px; margin-bottom: 8px; }
.view--collections .kpi { gap: 10px; padding: 9px 14px; }
.view--collections .kpi__icon { width: 34px; height: 34px; }
.view--collections .kpi__label { font-size: 0.625rem; }
.view--collections .kpi__value { font-size: 1.125rem; line-height: 1.25; }
.view--collections .kpi__hint { font-size: var(--fs-xs); line-height: 1.3; }
.view--collections .fin-tabs { margin-bottom: 8px; }
.view--collections .fin-tabs__btn { height: 34px; }
.view--collections .aging { margin-bottom: 8px; }
.view--collections .aging .card__head { padding: 7px 14px; }
.view--collections .aging .card__title { font-size: var(--fs-md); }
.view--collections .aging .card__head .muted { display: none; }
.view--collections .aging .card__body { padding: 8px 14px 10px; }
.view--collections .aging__bar { height: 8px; }
.view--collections .aging__legend { margin-top: 8px; gap: 6px; }
.view--collections .aging__item { padding: 3px 8px; }
.view--collections .list-toolbar { padding: 10px 14px; }
.view--collections .list-toolbar .input { height: 38px; }
.print-doc .pd-table + .pd-table { margin-top: 14px; }
.print-doc .pd-table tr.is-strong td { font-weight: 700; background: var(--c-f3f5f8); }

/* 58 mm roll: narrower paper, a little smaller type. */
.print-doc--thermal.print-doc--58 { width: 54mm; font-size: 8pt; }
.print-doc--thermal.print-doc--80 { width: 74mm; }

/* ---------- Receipt (cash memo) for the roll printer ---------- */
.tr { color: var(--c-black); font-family: ui-sans-serif, system-ui, "Noto Sans Bengali", sans-serif; line-height: 1.3; }
.tr p { margin: 0; }
.tr-head { display: grid; justify-items: center; gap: 1px; padding-bottom: 6px; border-bottom: 1px dashed var(--c-black); text-align: center; }
.tr-brand { display: flex; align-items: center; justify-content: center; gap: 2.2mm; width: 100%; margin-bottom: 1mm; }
/* White behind the mark drops out, so the logo sits on the same line as the shop name. */
.tr-logo {
  display: block;
  flex: none;
  width: auto;
  height: 11mm;
  max-width: 14mm;
  margin: 0;
  object-fit: contain;
  object-position: center;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  mix-blend-mode: multiply;
}
.tr-co { min-width: 0; font-size: 1.45em; font-weight: 800; line-height: 1.1; text-align: left; }
.print-doc--58 .tr-logo { height: 9mm; max-width: 11mm; }
.tr-head p { font-size: 0.9em; }
.tr-title { margin: 6px 0 4px !important; font-size: 1.05em; font-weight: 800; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; }
.tr-meta { padding-bottom: 5px; border-bottom: 1px dashed var(--c-black); }
.tr-row { display: flex; justify-content: space-between; gap: 8px; }
.tr-row span { flex: none; }
.tr-row b { min-width: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.tr-items { width: 100%; margin: 4px 0 2px; border-collapse: collapse; }
.tr-items th { padding: 2px 0; border-bottom: 1px solid var(--c-black); font-size: 0.85em; text-align: left; }
.tr-items td { padding: 3px 0; border-bottom: 1px dotted var(--c-999); vertical-align: top; }
.tr-items td b { display: block; font-weight: 600; overflow-wrap: anywhere; }
.tr-items td small { display: block; font-size: 0.85em; color: var(--c-333); }
.tr-items .r { text-align: right; white-space: nowrap; padding-left: 4px; }
.tr-items--shop th.n, .tr-items--shop td.n { width: 1.1em; padding-right: 3px; color: var(--c-333); }
.tr-items--shop td:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.print-doc--thermal .tr-thanks { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.tr-count { font-size: 0.85em; color: var(--c-333); }
.tr-tot { display: grid; gap: 1px; margin-top: 4px; padding-top: 4px; border-top: 1px dashed var(--c-black); }
.tr-row--grand { margin: 2px 0; padding: 3px 0; border-top: 1px solid var(--c-black); border-bottom: 1px solid var(--c-black); font-size: 1.2em; font-weight: 800; }
.tr-row--grand b { font-weight: 800; }
.tr-row--due { font-weight: 800; }
.tr-words { margin-top: 4px !important; font-size: 0.85em; font-style: italic; }
.tr-qr { display: grid; justify-items: center; gap: 2px; margin-top: 8px; text-align: center; }
.tr-qr img, .tr-qr svg { width: 26mm; height: 26mm; image-rendering: pixelated; }
.tr-qr p { font-size: 0.85em; }
.tr-thanks { margin-top: 8px !important; font-weight: 700; text-align: center; }
.tr-note { margin-top: 3px !important; font-size: 0.85em; text-align: center; }
.tr-by { margin-top: 6px !important; padding-top: 4px; border-top: 1px dashed var(--c-black); font-size: 0.75em; color: var(--c-444); text-align: center; }

/* ---------- Return / exchange dialog ---------- */
.rt-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 12px; }
.rt-who b { font-size: var(--fs-lg); }
.rt-who span { color: var(--tx60); font-size: var(--fs-sm); }
.rt-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rt-table th { padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--tx60); font-size: var(--fs-xs); font-weight: 600; text-align: left; }
.rt-table td { padding: 8px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.rt-table .r { text-align: right; }
.rt-table td small { display: block; color: var(--tx60); font-size: var(--fs-xs); }
.rt-table tr.is-done td { color: var(--tx45); }
.rt-qty { display: inline-flex; align-items: center; gap: 2px; }
.rt-qty .input { width: 70px; height: 34px; text-align: center; font-weight: 700; }
.rt-all { display: block; margin: 3px 0 0 auto; font-size: var(--fs-xs); }
.rt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 16px; }
.rt-grid .hint { margin: 4px 0 12px; }
.rt-sum { display: grid; gap: 4px; margin: 0 0 10px; }
.rt-sum > div { display: flex; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); }
.rt-sum dt { color: var(--tx60); }
.rt-sum dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.rt-sum .is-total { padding-top: 6px; border-top: 1px solid var(--border); font-size: var(--fs-md); }
.rt-sum .is-total dt { color: var(--txt); font-weight: 600; }
.rt-opts { display: grid; gap: 6px; }
.rt-opt { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); cursor: pointer; }
.rt-opt.is-on { border-color: var(--accent); background: var(--accent-tint); }
.rt-opt > span { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.rt-opt b { font-size: var(--fs-sm); }
.rt-opt small { color: var(--tx60); font-size: var(--fs-xs); }
.rt-opt select { flex: none; width: 120px; height: 34px; }
@media (max-width: 640px) {
  .rt-grid { grid-template-columns: 1fr; }
  .rt-table thead { display: none; }
  .rt-table tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--border); }
  .rt-table td { padding: 0; border: 0; }
  .rt-table td:nth-child(2), .rt-table td:nth-child(3) { display: none; }
  .rt-table td:nth-child(4) { grid-column: 1 / -1; text-align: left; }
}

/* ---------- Khata (statement) ---------- */
.kh-opts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 12px; }
.kh-preview { max-height: min(62vh, 640px); overflow: auto; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--stage-bg, var(--surface-2)); }
.kh-paper { width: 794px; margin: 0 auto; zoom: 0.72; }
.kh-paper .inv-sheet { min-height: 0; height: auto; box-shadow: var(--shadow-card); }
@media (max-width: 760px) { .kh-paper { zoom: 0.42; } }
.print-doc .kh-parties .kh-due { text-align: right; }
.print-doc .kh-parties .kh-due b { font-size: 16pt; }
.print-doc .kh-parties .kh-due.is-due b { color: var(--c-b45309); }
.print-doc .kh-table td .cell-sub { max-width: 320px; }
.print-doc .kh-table tr.kh-pay td:nth-child(4), .print-doc .kh-table tr.kh-ret td:nth-child(4) { color: var(--c-047857); }
.print-doc .kh-table tr.kh-open td { font-style: italic; background: var(--c-f6f7f9); }
.print-doc .kh-kpis > div { display: grid; gap: 2px; }
.print-doc .kh-kpis span { font-size: 8pt; color: var(--c-6b7487); }
.print-doc .kh-kpis b { font-size: 11pt; }

/* ---------- Due reminders ---------- */
.rm-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.rm-vars { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.rm-preview { display: grid; gap: 4px; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px 12px 12px 4px; background: color-mix(in oklab, var(--pos) 10%, var(--surface)); font-size: var(--fs-sm); line-height: 1.45; white-space: pre-wrap; }
.rm-preview small { color: var(--tx60); font-size: var(--fs-xs); }
.rm-list-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: var(--fs-sm); }
.rm-list { display: grid; gap: 2px; max-height: 300px; margin: 0; padding: 0; overflow-y: auto; list-style: none; border: 1px solid var(--border); border-radius: var(--radius-md); }
.rm-list li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.rm-list li:last-child { border-bottom: 0; }
.rm-list li.is-sent { background: color-mix(in oklab, var(--pos) 7%, transparent); }
.rm-check input { width: 16px; height: 16px; accent-color: var(--accent); }
.rm-who { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.rm-who b { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.rm-who small { overflow: hidden; color: var(--tx60); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.rm-due { flex: none; color: var(--warn); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.rm-wa { flex: none; }
.rm-list li.is-sent .rm-wa { color: var(--pos); }
@media (max-width: 560px) { .rm-due { display: none; } }

/* ==========================================================================
   Business forms (Nov 2026): sectioned layout shared by purchase and expense
   ========================================================================== */
.pf-sec { display: grid; gap: 12px; }
.pf-sec + .pf-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.pf-h { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-md); font-weight: 700; color: var(--txt); }
.pf-h > svg { flex: none; color: var(--accent); }
.pf-h small { margin-left: 2px; font-size: var(--fs-xs); font-weight: 500; color: var(--tx45); }
.pf-grid { display: grid; gap: 12px 14px; }
.pf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-grid .field__hint { margin: 0; line-height: 1.3; }
.affix i, .money-input i { font-style: normal; }
.pf-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.pf-chips .chip { height: 28px; padding: 0 10px; font-size: var(--fs-xs); font-weight: 600; }

/* Product lines: a real table with a header band, row numbers and an add row. */
.pf-table { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
.pf-row {
  display: grid; grid-template-columns: 34px minmax(220px, 1fr) 96px 150px 130px 36px;
  align-items: start; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--border);
}
.pf-row > * { min-width: 0; }
.pf-row--head { align-items: center; padding-top: 9px; padding-bottom: 9px; border-top: 0; background: var(--surface-2); font-size: 0.6875rem; font-weight: 700; color: var(--tx60); }
.pf-row:not(.pf-row--head):hover { background: color-mix(in oklab, var(--accent) 3%, var(--surface)); }
.pf-row .r, .pf-row .input.r { text-align: right; }
.pf-row__no { display: grid; place-items: center; width: 26px; height: 26px; margin-top: 7px; border-radius: 7px; background: var(--surface-2); color: var(--tx60); font-size: var(--fs-xs); font-weight: 700; }
.pf-row__prod { display: grid; gap: 4px; }
.pf-row__note { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--tx45); }
.pf-row__note.is-ok { color: var(--pos); font-weight: 600; }
.pf-row__total { padding-top: 10px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pf-row .icon-btn, .pf-row__lock { margin-top: 3px; }
.pf-row__lock { display: grid; place-items: center; height: 34px; color: var(--tx45); }
.pf-row .money-input i { left: 11px; font-size: var(--fs-sm); }
.pf-row .money-input .input { padding-left: 26px; font-weight: 600; }
.pf-add { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 42px; border-top: 1px dashed var(--border-strong, var(--border)); background: transparent; color: var(--accent); font: inherit; font-size: var(--fs-sm); font-weight: 700; cursor: pointer; }
.pf-add:hover { background: var(--accent-tint); }

/* Bottom: charges / payment / notes on the left, the summary card on the right. */
.pf-bottom { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.pf-left { display: grid; min-width: 0; }
.pf-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; }
.pf-check input { width: 17px; height: 17px; margin-top: 1px; accent-color: var(--accent); }
.pf-check span { display: grid; gap: 2px; }
.pf-check b { font-size: var(--fs-sm); }
.pf-check small { font-size: var(--fs-xs); color: var(--tx60); }
.pf-check:has(input:checked) { border-color: color-mix(in oklab, var(--pos) 45%, var(--border)); background: color-mix(in oklab, var(--pos) 8%, var(--surface)); }

.pf-sum { position: sticky; top: 0; display: grid; gap: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); font-variant-numeric: tabular-nums; }
.pf-sum__title { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--tx72); }
.pf-sum__list { display: grid; gap: 6px; margin: 0; }
.pf-sum__list > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: var(--fs-sm); }
.pf-sum__list dt { display: grid; color: var(--tx72); }
.pf-sum__list dt small { font-size: 0.6875rem; color: var(--tx45); }
.pf-sum__list dd { margin: 0; font-weight: 600; }
.pf-sum__list .is-zero { opacity: 0.5; }
.pf-sum__grand { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-fg, var(--c-white)); }
.pf-sum__grand span { font-size: var(--fs-sm); font-weight: 600; opacity: 0.9; }
.pf-sum__grand b { font-size: 1.375rem; font-weight: 800; }
.pf-sum__list .text-pos { color: var(--pos); }
.pf-sum__due { padding-top: 8px; border-top: 1px dashed var(--border); }
.pf-sum__due dt { font-weight: 700; color: var(--txt); }
.pf-sum__due dd { font-size: var(--fs-lg); font-weight: 800; color: var(--warn); }
.pf-sum__due.is-clear dd { color: var(--pos); }
.pf-foot__hint { flex: 1; font-size: var(--fs-xs); color: var(--tx60); }

/* Expense form: details on the left, the amount card on the right. */
.xf { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.xf-main { display: grid; min-width: 0; }
.xf-side .field { gap: 6px; }
.xf-side .fin-total { margin: 0; }
.money-input--lg i { font-size: var(--fs-lg); }
.money-input--lg .input { padding-left: 38px; }

@media (max-width: 900px) {
  .pf-bottom, .xf { grid-template-columns: minmax(0, 1fr); }
  .pf-sum { position: static; }
  .pf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .pf-row { grid-template-columns: 1fr 1fr 32px; padding: 12px; }
  .pf-row__no { display: none; }
  .pf-row--head { display: none; }
  .pf-row__prod { grid-column: 1 / -1; }
  .pf-row__total { grid-column: 1 / 3; padding-top: 0; text-align: left; }
  .pf-grid--2, .pf-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Summary card with inline inputs (Nov 2026): discount, VAT, charges and the
   payment are typed in the card itself — small, borderless until hovered.
   ========================================================================== */
.pf-sum {
  gap: 12px; padding: 18px;
  border: 1px solid color-mix(in oklab, var(--accent) 14%, var(--border));
  background: linear-gradient(180deg, var(--surface), color-mix(in oklab, var(--accent) 3%, var(--surface)));
  box-shadow: 0 1px 2px var(--c-oklch-0-3-0-03-258-0-04), 0 10px 28px -18px var(--c-oklch-0-3-0-06-258-0-35);
}
.pf-sum__title { display: flex; align-items: center; gap: 8px; }
.pf-sum__title::before { content: ""; width: 3px; height: 12px; border-radius: 2px; background: var(--accent); }
.sum-rows { display: grid; }
.sum-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 38px; padding: 4px 0; border-bottom: 1px solid color-mix(in oklab, var(--border) 70%, transparent); font-size: var(--fs-sm); }
.sum-rows > .sum-row:last-child { border-bottom: 0; }
.sum-row > span { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--tx72); }
.sum-row > span small { flex-basis: 100%; margin-top: -2px; font-size: 0.6875rem; color: var(--tx45); }
.sum-row > b { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--txt); }
.sum-row > b.is-pos { color: var(--pos); }

/* The small value field */
.sum-in {
  display: inline-flex; align-items: center; gap: 2px; width: 118px; height: 30px; padding: 0 8px;
  border: 1px solid transparent; border-radius: 8px; background: color-mix(in oklab, var(--surface-2) 80%, transparent);
  transition: border-color var(--dur), background-color var(--dur);
}
.sum-in:hover { border-color: var(--input-border); background: var(--surface); }
.sum-in:focus-within { border-color: var(--accent); background: var(--surface); box-shadow: var(--focus-ring); }
.sum-in i { flex: none; font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--tx45); }
.sum-in input { flex: 1; min-width: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: var(--txt); font: inherit; font-size: var(--fs-sm); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.sum-in input::placeholder { color: var(--tx45); font-weight: 500; }
.sum-in--suf { width: 64px; }
.sum-sel { max-width: 150px; height: 30px; padding: 0 26px 0 8px; border: 1px solid transparent; border-radius: 8px; appearance: none; background: color-mix(in oklab, var(--surface-2) 80%, transparent) var(--chev) no-repeat right 7px center / 12px; color: var(--txt); font: inherit; font-size: var(--fs-sm); font-weight: 600; text-overflow: ellipsis; cursor: pointer; }
.sum-sel:hover { border-color: var(--input-border); background-color: var(--surface); }
.sum-sel:focus { outline: 0; border-color: var(--accent); box-shadow: var(--focus-ring); }
.sum-link { padding: 1px 8px; border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent); border-radius: 99px; background: var(--accent-tint); color: var(--accent); font: inherit; font-size: 0.6875rem; font-weight: 700; cursor: pointer; }
.sum-link:hover { background: var(--accent); color: var(--c-white); }

.pf-sum__grand { margin: 2px 0; padding: 14px 16px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), color-mix(in oklab, var(--accent) 78%, var(--c-0b2a4a))); box-shadow: 0 10px 22px -14px var(--accent); }
.sum-row--due { min-height: 44px; margin-top: 2px; padding-top: 8px; border-top: 1px dashed var(--border) !important; border-bottom: 0; }
.sum-row--due > span { font-weight: 700; color: var(--txt); }
.sum-row--due > b { font-size: var(--fs-lg); font-weight: 800; color: var(--warn); }
.sum-row--due.is-clear > b { color: var(--pos); }

/* Expense amount card: same look */
.xf-side.pf-sum { gap: 12px; }
.xf-side .sum-rows { margin-top: -4px; }

/* Calm section cards on the left */
.pf-left .pf-sec, .xf-main .pf-sec { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.pf-left .pf-sec + .pf-sec, .xf-main .pf-sec + .pf-sec { margin-top: 14px; }
.pf-bottom { gap: 18px; }

/* Payment dialogs: currency in the amount box, breathing room for the hint lines. */
.money-input--xl i { font-size: 1.25rem; }
.money-input--xl .input { padding-left: 40px; }
.modal .recv__left:not(:empty) { margin: 10px 0 0; font-size: var(--fs-sm); color: var(--tx60); }
.modal .recv__quick { margin-top: -6px; }
.modal .alloc { margin-bottom: 16px; }
.modal .chips { margin-top: 2px; }
.modal .hint { display: flex; align-items: flex-start; gap: 6px; } .modal .hint > svg { flex: none; margin-top: 2px; }

/* Mobile-wallet marks (bKash, Nagad, Rocket, Upay): the brand colour, or the logo file when one is provided. */
.wallet-mark { position: relative; display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; overflow: hidden; border-radius: 7px; color: #fff; font-size: 13px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.wallet-mark__logo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.wallet-mark--bkash { background: #e2136e; }
.wallet-mark--nagad { background: linear-gradient(135deg, #f7941d, #ed1c24); }
.wallet-mark--rocket { background: #8c3494; }
.wallet-mark--upay { background: #ffc20e; color: #0b3b8c; }
.acct-cell { display: inline-flex; align-items: center; gap: 8px; }
.acct-cell .wallet-mark { width: 20px; height: 20px; border-radius: 6px; font-size: 11px; }

/* A loaded wallet logo covers the letter behind it; inline marks sit beside a name (invoice "Pay by mobile"). */
.wallet-mark__logo { z-index: 1; }
.wallet-mark--inline { width: 1.25em; height: 1.25em; margin-right: 5px; vertical-align: -0.28em; border-radius: 4px; font-size: 0.7em; }

/* Full wallet logo in the invoice's "Pay by mobile" block (and wherever the name would be). */
.wallet-full { display: block; height: 22px; width: auto; max-width: 96px; object-fit: contain; object-position: left center; }
.inv-sheet--dense .wallet-full { height: 18px; }
.wallet-mark__logo { padding: 2px; }

/* assets/css/editor.css */
/* ==========================================================================
   Invoice editor: full-height preview on the left, everything else in the
   right-hand panel. The app's top bar collapses on this page (desktop).
   ========================================================================== */

/* ---------- Page frame ---------- */

/* Tighter page padding so the paper gets the room. The right side keeps the
   gutter, where the team-chat edge tab rests. */
.content:has(> .view--editor) { padding: 12px var(--gutter) 12px 12px; }

/* Desktop: the top bar collapses while the editor is open (toggle in the panel).
   Searching (Ctrl+K) reveals it on top of the page until the search closes. */
@media (min-width: 1181px) {
  .app.is-focus[data-route$="editor"] .topbar { display: none; }
  .app.is-focus.is-peek[data-route$="editor"] .topbar {
    display: flex;
    position: fixed;
    top: 0;
    left: var(--sidebar-w);
    right: 0;
    overflow: visible;
    z-index: 60;
    box-shadow: var(--shadow-pop);
    animation: hdr-peek 0.2s var(--ease);
  }
  .app.is-focus.is-peek.is-collapsed[data-route$="editor"] .topbar { left: var(--sidebar-w-collapsed); }
}
@keyframes hdr-peek { from { opacity: 0; transform: translateY(-8px); } }

.editor {
  --editor-h: calc(100dvh - 24px - var(--topbar-h));
  display: grid;
  grid-template-columns: minmax(0, 1fr) 400px;
  gap: 12px;
  height: var(--editor-h);
  min-height: 560px;
}
.app.is-focus .editor { --editor-h: calc(100dvh - 24px); }

.editor__preview {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* ---------- Stage ---------- */

/* The paper sits on a soft canvas that fills the column, scrolled on its own. */
.sheet-stage {
  flex: 1;
  min-height: 0;
  padding: 14px;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--tx45) 22%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--stage-bg);
  scrollbar-gutter: stable;
}

.sheet-scaler {
  --scale: 1;
  margin: 0 auto;
}

.sheet-scaler > .inv-doc {
  transform: scale(var(--scale));
  transform-origin: top left;
}

/* Eye comfort: soften the white paper against the dark canvas (screen only — print is unaffected). */
[data-theme="dark"] .sheet-scaler > .inv-doc .inv-sheet {
  filter: brightness(0.92) contrast(0.98);
}

/* ---------- Panel ---------- */

.editor__panel {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* Document identity + small tools */
.ep-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px 10px 16px;
}
.ep-doc { display: flex; flex: 1; align-items: center; gap: 11px; min-width: 0; }
.ep-tools { display: flex; flex: none; gap: 2px; }
.ep-tools .icon-btn { width: 34px; height: 34px; }
.ep-hdr[aria-pressed="true"] { background: var(--accent-tint); color: var(--accent); }

.doc-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: var(--accent-tint);
  color: var(--accent);
}
.doc-meta { display: grid; gap: 3px; min-width: 0; }
.doc-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -0.01em; }
.doc-no { flex: 0 1 auto; min-width: 56px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-sub { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--fs-sm); color: var(--tx60); white-space: nowrap; }
.doc-sep { flex: none; color: var(--tx45); }
.doc-cust { min-width: 48px; overflow: hidden; text-overflow: ellipsis; }
.doc-amt { flex: none; font-weight: 600; color: var(--tx72); font-variant-numeric: tabular-nums; }
.doc-sub b { flex: none; display: inline-flex; align-items: center; gap: 3px; font-weight: 600; }
.doc-sub .is-due { color: var(--warn); }
.doc-sub .is-paid { color: var(--pos); }
.dirty {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--warn) 22%, transparent);
}

/* Actions row: zoom · document actions · save */
.ep-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px 12px;
}

.zoom {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 42px;
  padding: 2px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.zoom .icon-btn { width: 32px; height: 36px; }
.zoom__val {
  min-width: 50px;
  height: 36px;
  padding: 0 2px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tx72);
  white-space: nowrap;
}
.zoom__val:hover { background: var(--surface-hover); }

.bar-group {
  display: inline-flex;
  flex: none;
  align-items: center;
  height: 42px;
  padding: 2px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--surface);
}
.bar-btn {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 36px;
  border-radius: var(--radius-sm);
  color: var(--tx72);
  transition: background-color var(--dur), color var(--dur);
}
.bar-btn:hover { background: var(--surface-hover); color: var(--txt); }
.bar-btn.is-on { background: var(--accent-tint); color: var(--accent); }

.ep-save { flex: 1; height: 42px; min-width: 0; padding: 0 14px; gap: 8px; font-size: var(--fs-md); }

/* Status: a compact pill with a coloured dot, sized to its text. */
.status-pick {
  --tone: var(--tx60);
  flex: none;
  field-sizing: content;
  height: 22px;
  padding: 0 22px 0 20px;
  border: 0;
  border-radius: 99px;
  appearance: none;
  background:
    radial-gradient(circle, var(--tone) 0 3px, transparent 3.5px) no-repeat 8px center / 8px 8px,
    var(--chev) no-repeat right 6px center / 11px,
    color-mix(in oklab, var(--tone) 13%, transparent);
  color: var(--tone);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 22px;
  cursor: pointer;
}
.status-pick:hover { background-color: color-mix(in oklab, var(--tone) 20%, transparent); }
.status-pick:focus-visible { outline: none; box-shadow: 0 0 0 2px color-mix(in oklab, var(--tone) 40%, transparent); }
.status-pick.is-open { background-image: radial-gradient(circle, var(--tone) 0 3px, transparent 3.5px), var(--chev-up); }
.status-pick option { color: var(--txt); background: var(--surface); font-weight: 500; }
.status-pick--sent { --tone: var(--accent); }
.status-pick--confirmed { --tone: oklch(0.55 0.13 285); }
.status-pick--partial { --tone: var(--warn); }
.status-pick--paid { --tone: var(--pos); }
.status-pick--overdue { --tone: var(--neg); }
.status-pick--cancelled { --tone: var(--tx45); }

/* Tabs */
.ep-tabs { margin: 0 14px; }
.ep-tabs .tabs__btn { height: 38px; font-size: var(--fs-md); }

.tab-panel {
  flex: 1;
  min-height: 0;
  padding: 4px 14px 12px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.ep-foot {
  flex: none;
  padding: 8px 14px;
  border-top: 1px solid var(--border);
  color: var(--tx45);
  font-size: var(--fs-xs);
  text-align: right;
}
.ep-foot b { color: var(--tx72); font-weight: 700; }

.panel-sec {
  display: grid;
  gap: 12px;
  padding: 16px 2px;
  border-bottom: 1px solid var(--border);
}
.panel-sec:last-child { border-bottom: 0; }

.panel-sec__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.panel-sec__head h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.01em;
}
.count:not(:empty) {
  padding: 0 8px;
  border-radius: 99px;
  background: var(--accent-tint);
  color: var(--accent);
  font-size: 0.6875rem;
  line-height: 20px;
}

/* Big, easy-to-hit inputs inside the panel */
.editor__panel .field__label { font-size: var(--fs-sm); color: var(--tx72); }
.input--area { min-height: 96px; font-size: var(--fs-lg); }
.due-chips { margin-top: -2px; }
.due-chips .chip { height: 32px; padding: 0 12px; font-weight: 600; }

/* Number + suffix (Discount %, Tax %) */
.affix { position: relative; display: block; }
.affix i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--tx45);
  font-style: normal;
  font-size: 1.125rem;
  font-weight: 700;
  pointer-events: none;
}
.affix .input { padding-right: 36px; }

/* Catalog */
.catalog {
  display: grid;
  gap: 4px;
  margin: 0 -4px;
  padding: 8px 4px 0; /* room for the qty badge on the first row */
}

.product {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  text-align: left;
  transition: background-color var(--dur), border-color var(--dur);
}
.product:hover { background: var(--surface-hover); border-color: var(--border); }
.product__avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 0.6875rem;
  font-weight: 700;
  color: var(--accent);
}
.product__avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.product__avatar.has-img { padding: 0; background: #fff; }
.product__info { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.product__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product__meta { font-size: var(--fs-xs); color: var(--tx45); }
.product__price { font-weight: 700; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.product__add {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--accent-tint);
  color: var(--accent);
  transition: background-color var(--dur), color var(--dur), transform 0.2s var(--ease);
}
.product:hover .product__add { background: var(--accent); color: var(--accent-fg); transform: scale(1.06); }
/* The pencil edits the product (the card itself adds it): quiet at rest, lit only when it is the target. */
.product__edit { background: transparent; color: var(--tx45); cursor: pointer; }
.product:hover .product__edit, .pcard:hover .product__edit { background: var(--bg-soft, var(--accent-tint)); color: var(--tx60, var(--accent)); transform: none; }
.product .product__edit:hover, .pcard .product__edit:hover { background: var(--accent); color: var(--accent-fg); }

/* Invoice lines */
.lines { display: grid; gap: 10px; }

.line {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.line.is-flash { animation: flash 0.8s var(--ease); }
@keyframes flash { 0% { border-color: var(--accent); box-shadow: var(--focus-ring); } }

.line__name-row { display: flex; align-items: center; gap: 10px; }
.line__name-row .line__name { flex: 1; min-width: 0; }
.line__top { display: flex; align-items: center; gap: 10px; }
.line__text { display: grid; flex: 1; gap: 6px; min-width: 0; }
.line .line__name { height: 40px; font-weight: 600; font-size: var(--fs-lg); }
.line .line__desc { height: 36px; font-size: var(--fs-md); }
input[readonly].input { background: var(--surface-2); color: var(--tx72); cursor: default; }
input[readonly].input:focus { border-color: var(--input-border); box-shadow: none; }

/* Product image slot: click to upload, × to remove */
.line__img {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  margin-top: 1px;
  border: 1.5px dashed var(--input-border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--tx45);
}
.line__img.has-img { border-style: solid; background: #fff; }
.line__img img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--radius-md) - 2px); }
.line__img-up {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: end end;
  padding: 3px;
  border-radius: inherit;
  cursor: pointer;
}
.line__img-up .icon {
  padding: 3px;
  box-sizing: content-box;
  border-radius: 6px;
  background: var(--accent);
  color: var(--accent-fg);
  opacity: 0.85;
}
.line__img:hover .line__img-up { background: color-mix(in oklab, var(--accent) 12%, transparent); }
.line__img:not(.has-img) .line__img-up { place-items: center; }
.line__img:not(.has-img) .line__img-up .icon { opacity: 0; }
.line__img:not(.has-img):hover .line__img-up .icon { opacity: 1; }
.line__img-x {
  position: absolute;
  top: -7px;
  right: -7px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--neg);
  color: #fff;
  box-shadow: 0 0 0 2px var(--surface-2);
}

.line__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 8px;
  align-items: end;
}
/* Discount gets the room; Tax is a read-only company default */
.big-pair { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); gap: 12px; }

.stepper {
  display: flex;
  align-items: center;
  height: 40px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  overflow: hidden;
}
.stepper button { display: grid; place-items: center; flex: none; width: 34px; height: 100%; color: var(--tx60); }
.stepper button:hover { background: var(--surface-hover); color: var(--accent); }
.stepper input {
  width: 100%;
  min-width: 0;
  height: 100%;
  border: 0;
  border-inline: 1px solid var(--border);
  background: transparent;
  color: var(--txt);
  font-size: var(--fs-lg);
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
}
.stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }
.stepper input:focus { outline: none; background: var(--accent-tint); }

.mini-field { display: grid; gap: 4px; min-width: 0; }
.mini-field > span:first-child { font-size: 0.6875rem; font-weight: 700; color: var(--tx60); text-transform: uppercase; letter-spacing: 0.05em; }
.mini-field > input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--txt);
  font-size: var(--fs-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.mini-field > input:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }

/* Warranty / guarantee row */
.line__warranty {
  display: grid;
  grid-template-columns: auto minmax(0, 1.3fr) 64px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
}
.line__w-ico { display: grid; place-items: center; width: 26px; color: var(--accent); }
.line__warranty .input { height: 38px; padding-inline: 10px; font-size: var(--fs-md); }
.line__warranty select.input { padding-right: 28px; background-position: right 8px center; }
.line__warranty .input:disabled { opacity: 0.5; }

.line__foot { display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; border-top: 1px dashed var(--border-strong); color: var(--tx60); font-size: var(--fs-sm); }
.line__amt { font-weight: 800; font-size: var(--fs-lg); color: var(--txt); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Totals summary */
.sum { display: grid; gap: 7px; padding: 14px 16px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); }
.sum div { display: flex; justify-content: space-between; font-size: var(--fs-md); color: var(--tx60); }
.sum dd { font-variant-numeric: tabular-nums; color: var(--txt); font-weight: 600; }
.sum__total { margin-top: 4px; padding-top: 10px; border-top: 1px dashed var(--border-strong); }
.sum__total dt { font-weight: 700; color: var(--txt); font-size: var(--fs-lg); }
.sum__total dd { font-size: 1.375rem; font-weight: 800; color: var(--accent); }

/* ---------- Payment tab ---------- */

.recv { display: grid; gap: 14px; }
.recv__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recv__head h4 { font-size: var(--fs-lg); font-weight: 700; }
.recv__state {
  padding: 3px 10px;
  border-radius: 99px;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--surface-2);
  color: var(--tx60);
}
.recv__state--warn { background: color-mix(in oklab, var(--warn) 15%, transparent); color: var(--warn); }
.recv__state--pos { background: color-mix(in oklab, var(--pos) 15%, transparent); color: var(--pos); }
.money-input { position: relative; display: block; }
.money-input i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--tx45);
  pointer-events: none;
}
.money-input .input { padding-left: 34px; font-weight: 700; font-variant-numeric: tabular-nums; }
.recv__quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.recv__quick .chip { height: 32px; padding: 0 14px; font-size: var(--fs-sm); font-weight: 600; }
.recv__bar { height: 8px; overflow: hidden; border-radius: 99px; background: var(--surface-2); border: 1px solid var(--border); }
.recv__bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--pos), color-mix(in oklab, var(--pos) 70%, var(--accent))); transition: width 0.3s var(--ease); }
.recv__sum { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.recv__sum--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.recv__sum div { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; border-radius: var(--radius-md); background: var(--surface-2); border: 1px solid var(--border); }
.recv__sum dt { font-size: var(--fs-xs); color: var(--tx60); }
.recv__sum dd { overflow: hidden; font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.recv__sum .is-paid dd { color: var(--pos); }
.recv__sum .is-due dd { color: var(--warn); }
.recv__note { display: flex; align-items: center; gap: 7px; font-size: var(--fs-sm); color: var(--tx60); }
.recv__more { justify-self: stretch; height: 42px; }
.recv__form { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.recv__formhead { display: grid; gap: 1px; }
.recv__formhead b { font-size: var(--fs-md); }
.recv__formhead span { font-size: var(--fs-xs); color: var(--tx60); }
.recv__quick .chip.is-active { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.recv__left { min-height: 1.2em; margin: -4px 0 0; font-size: var(--fs-sm); color: var(--tx60); }
.recv__left.is-bad { color: var(--neg); font-weight: 600; }
.recv__go { width: 100%; height: 46px; font-size: var(--fs-md); }
.recv__go:disabled { opacity: 0.5; cursor: not-allowed; }
.recv__done { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: var(--radius-lg); background: color-mix(in oklab, var(--pos) 12%, var(--surface)); color: var(--pos); }
.recv__done div { display: grid; }
.recv__done span { font-size: var(--fs-sm); color: var(--tx60); }
.recv__hist { display: grid; gap: 8px; }
.recv__hist h5 { margin: 0; font-size: var(--fs-sm); font-weight: 700; color: var(--tx72); }
.recv__hist ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.recv__hist li { display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.recv__hist li > div { display: grid; flex: 1; min-width: 0; }
.recv__hist li b { font-variant-numeric: tabular-nums; }
.recv__hist li small { overflow: hidden; font-size: var(--fs-xs); color: var(--tx60); text-overflow: ellipsis; white-space: nowrap; }
.recv__hico { display: grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in oklab, var(--pos) 16%, transparent); color: var(--pos); }
.recv__hist .link-btn { justify-self: start; display: inline-flex; align-items: center; gap: 5px; }
.form-grid.is-off { opacity: 0.5; }

/* ---------- Design controls (Settings → Invoice design) ---------- */

.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 2px solid transparent;
  border-radius: 50%;
  transition: border-color var(--dur), transform 0.2s var(--ease);
}
.swatch span { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--a) 50%, var(--b) 50%); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.08); }
.swatch:hover { transform: scale(1.08); }
.swatch.is-active { border-color: var(--accent); }
.swatch.is-active span { box-shadow: 0 0 0 2px var(--surface); }
.swatches--compact { display: grid; grid-template-columns: repeat(auto-fill, minmax(28px, 1fr)); gap: 4px; }
.swatches--compact .swatch { width: 100%; max-width: 34px; height: auto; aspect-ratio: 1; justify-self: center; border-width: 2px; }
.swatches--compact .swatch span { width: 76%; height: 76%; }
.pal-name { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }

.color-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 8px; margin-top: 4px; }
.color-swap { width: 36px; height: 40px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); }
.color-field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 6px;
  border: 1px solid var(--input-border);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.color-field input { width: 28px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.color-field input::-webkit-color-swatch-wrapper { padding: 0; }
.color-field input::-webkit-color-swatch { border: 0; border-radius: 6px; }
.color-field code { font-size: var(--fs-xs); color: var(--tx60); text-transform: uppercase; }

.tpl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.tpl {
  display: grid;
  gap: 6px;
  padding: 6px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.tpl:hover { border-color: var(--border-strong); }
.tpl.is-active { border-color: var(--accent); box-shadow: var(--focus-ring); }
.tpl__label { font-size: 0.6875rem; font-weight: 600; color: var(--tx72); }
.tpl.is-active .tpl__label { color: var(--accent); }

/* Mini paper thumbnails for the template pickers */
.tpl__thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background:
    repeating-linear-gradient(#0000 0 7px, #e7ecf3 7px 9px) 18% 46% / 64% 30% no-repeat,
    #fff;
  border: 1px solid #e3e8ef;
}
/* "None" sits in the live header/footer grids: match the miniature shape. */
.tpl-grid--live .tpl__thumb { aspect-ratio: 2 / 1; }
.tpl__thumb i, .tpl__thumb b { position: absolute; left: 0; right: 0; }
.tpl__thumb i { top: 0; height: 26%; }
.tpl__thumb b { bottom: 0; height: 14%; }
.tpl__thumb--background-default { background: radial-gradient(circle at 100% 0, #1e9bd722 0 30%, #0000 31%), radial-gradient(circle at 0 100%, #14213a18 0 30%, #0000 31%), #fff; }
.tpl__thumb--background-dots { background: radial-gradient(#1e9bd740 1px, #0000 1.5px) 0 0 / 8px 8px, #fff; }
.tpl__thumb--background-custom { background: linear-gradient(135deg, #dbe9f7, #f6e7d8); }
.tpl__thumb--background-custom::after { content: "🖼"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 18px; opacity: 0.5; }

/* Live header/footer miniatures (real templates, scaled down) */
.tpl-grid--live .tpl { padding: 5px; }
.tpl__mini {
  position: relative;
  display: block;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  border: 1px solid #e3e8ef;
  border-radius: 6px;
  background: #fff;
  pointer-events: none;
}
.tpl__mini .tpl__paper {
  position: absolute;
  left: 0;
  width: 794px;
  min-height: 0 !important;
  height: calc(100% / var(--mini, 0.14));
  box-shadow: none !important;
  transform: scale(var(--mini, 0.14));
}
.tpl__mini--header .tpl__paper { top: 0; transform-origin: 0 0; }
.tpl__mini--footer .tpl__paper { bottom: 0; transform-origin: 0 100%; }
.tpl__paper .inv-powered { display: none; }
.tpl__lines {
  display: block;
  flex: 1;
  margin: 26px var(--pad);
  background: repeating-linear-gradient(#0000 0 26px, #e8edf3 26px 34px);
}
.tpl__paper .inv-placeholder { height: 140px; font-size: 22px; }

/* Totals-style previews: a 340px-wide paper scaled to the card */
.tpl__mini--totals { aspect-ratio: 340 / 292; }
.tpl__mini .tpl__paper--totals {
  top: 0;
  width: 340px;
  height: auto;
  padding: 20px;
  transform: scale(var(--mini-t, 0.32));
  transform-origin: 0 0;
}
.tpl__paper--totals .inv-totals { font-size: 13px; }

/* Uploader */
.uploader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-2);
}
.uploader__img { width: 72px; height: 48px; object-fit: contain; border-radius: var(--radius-xs); background: #fff; border: 1px solid var(--border); }
.uploader__ph { display: grid; place-items: center; flex: none; width: 72px; height: 48px; border-radius: var(--radius-xs); background: var(--surface); color: var(--tx45); }
.uploader__body { display: grid; gap: 6px; min-width: 0; }
.uploader__body p { font-size: var(--fs-xs); color: var(--tx60); }

.switch-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.segmented--full { display: flex; }
.segmented--full button { flex: 1; }

input[type="range"] { width: 100%; accent-color: var(--accent); }

/* ---------- Payments dialog ---------- */

.pay-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.pay-sum div { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-2); }
.pay-sum span { font-size: var(--fs-xs); color: var(--tx45); }
.pay-sum b { font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.pay-sum .is-pos { color: var(--pos); }
.pay-sum .is-due { border-color: color-mix(in oklab, var(--warn) 40%, var(--border)); background: color-mix(in oklab, var(--warn) 8%, var(--surface)); }
.pay-sum .is-due b { color: var(--warn); }
.pay-sum .is-settled { border-color: color-mix(in oklab, var(--pos) 40%, var(--border)); background: color-mix(in oklab, var(--pos) 8%, var(--surface)); }
.pay-sum .is-settled b { color: var(--pos); }
.pay-pct { margin-top: 6px; font-size: var(--fs-xs); color: var(--tx45); text-align: right; }
.pay-h { margin: 18px 0 10px; font-size: var(--fs-sm); font-weight: 700; }
.pay-list { display: grid; gap: 6px; }
.pay-list li { display: flex; align-items: center; gap: 12px; padding: 9px 10px 9px 12px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.pay-list__ico { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: color-mix(in oklab, var(--pos) 14%, transparent); color: var(--pos); }
.pay-list__main { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.pay-list__main small { color: var(--tx45); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pay-done { display: flex; align-items: center; gap: 10px; margin-top: 16px; padding: 14px; border-radius: var(--radius-md); background: color-mix(in oklab, var(--pos) 10%, transparent); color: var(--pos); font-weight: 600; }
.field .chips { margin-top: 4px; }

/* ==========================================================================
   Catalog: list / grid views
   ========================================================================== */

.catalog-tools { display: flex; align-items: center; gap: 8px; }
.catalog-tools .search { flex: 1; min-width: 0; }
.segmented--icons { flex: none; padding: 2px; }
.segmented--icons button { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; }

.catalog__empty { grid-column: 1 / -1; }

/* Category tint shared by both views (--h is set per product). */
.product, .pcard { --tint: oklch(0.62 0.12 var(--h, 232)); }
.product__avatar { position: relative; background: color-mix(in oklab, var(--tint) 13%, var(--surface)); border-color: color-mix(in oklab, var(--tint) 22%, var(--border)); color: var(--tint); }
.product.is-added { background: var(--accent-tint); border-color: color-mix(in oklab, var(--accent) 25%, transparent); }
.product__meta .is-low { color: var(--warn); font-weight: 600; }
.product__meta .is-out { color: var(--neg); font-weight: 600; }

/* "Already on this invoice" count */
.product__qty {
  position: absolute;
  top: -7px;
  right: -7px;
  z-index: 1;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  box-sizing: border-box;
  border-radius: 99px;
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: 0 0 0 2px var(--surface);
  font-size: 0.6875rem;
  font-weight: 800;
  line-height: 20px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.catalog--grid {
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 8px;
  padding: 6px 4px 4px;
}

.pcard {
  display: grid;
  gap: 4px;
  width: 100%;
  height: 100%;
  padding: 6px 6px 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  text-align: left;
  transition: border-color var(--dur), box-shadow var(--dur), transform 0.2s var(--ease);
}
.pcard:hover { border-color: color-mix(in oklab, var(--tint) 45%, var(--border)); box-shadow: var(--shadow-card); transform: translateY(-2px); }
.pcard:active { transform: none; }
.pcard.is-added { border-color: color-mix(in oklab, var(--accent) 55%, var(--border)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 35%, transparent); }

.pcard__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  margin-bottom: 4px;
  overflow: hidden;
  border-radius: calc(var(--radius-md) - 4px);
  background:
    radial-gradient(circle at 85% 15%, color-mix(in oklab, var(--tint) 30%, transparent) 0 22%, transparent 23%),
    linear-gradient(140deg, color-mix(in oklab, var(--tint) 18%, var(--surface)), color-mix(in oklab, var(--tint) 6%, var(--surface)));
}
.pcard__art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #fff; }
.pcard__ini { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.02em; color: var(--tint); }
.pcard__cat {
  position: absolute;
  left: 5px;
  bottom: 5px;
  max-width: calc(100% - 10px);
  padding: 0 6px;
  border-radius: 99px;
  background: color-mix(in oklab, var(--surface) 82%, transparent);
  color: var(--tx60);
  font-size: 0.5625rem;
  font-weight: 700;
  line-height: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pcard .product__qty { top: 5px; right: 5px; box-shadow: none; }
.pcard__name {
  display: -webkit-box;
  min-height: 2.5em;
  padding: 0 2px;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
}
.pcard__meta { padding: 0 2px; font-size: 0.6875rem; color: var(--tx45); }
.pcard__meta.is-low { color: var(--warn); font-weight: 600; }
.pcard__meta.is-out { color: var(--neg); font-weight: 600; }
.pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 2px; padding-left: 2px; }
.pcard__foot b { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pcard__foot .product__add { width: 26px; height: 26px; }
.pcard:hover .product__add { background: var(--accent); color: var(--accent-fg); }

/* ==========================================================================
   Tablet + phone: the panel head and actions stay on top, then section tabs
   (Invoice / Details / Items / Payment) show one pane at a time; a dock
   pinned to the bottom shows the total.
   ========================================================================== */

.mtabs, .mdock { display: none; }

@media (max-width: 1180px) {
  .content:has(> .view--editor) { padding: var(--gutter); }
  .editor { display: flex; flex-direction: column; height: auto; min-height: 0; gap: 12px; padding-bottom: 76px; }
  .editor__panel { order: -1; overflow: visible; }
  .ep-tabs, .ep-foot { display: none; }
  /* The top bar always shows here, so its search / toggle shortcuts aren't needed. */
  .ep-tools [data-act="search"], .ep-hdr { display: none !important; }
  .tab-panel { overflow: visible; padding-top: 0; }
  .sheet-stage { flex: none; overflow-x: auto; padding: 10px; }

  /* One pane at a time. */
  .editor[data-pane="preview"] .tab-panel { display: none; }
  .editor:not([data-pane="preview"]) .editor__preview { display: none; }

  .mtabs {
    display: flex;
    gap: 4px;
    margin: 0 14px 12px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface-2);
  }
  .editor:not([data-pane="preview"]) .mtabs { margin-bottom: 4px; }
  .mtabs__btn {
    position: relative;
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    height: 42px;
    padding: 0 6px;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--tx60);
    white-space: nowrap;
    transition: background-color var(--dur), color var(--dur), box-shadow var(--dur);
  }
  .mtabs__btn span { overflow: hidden; text-overflow: ellipsis; }
  .mtabs__btn:hover { color: var(--txt); }
  .mtabs__btn.is-active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-card); }
  .mtabs__btn .mtabs__n {
    flex: none;
    min-width: 20px;
    padding: 0 6px;
    border-radius: 99px;
    background: var(--accent);
    color: var(--accent-fg);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
  }

  .catalog, .catalog--grid { max-height: none; overflow: visible; }
  .catalog--grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }

  .mdock {
    position: fixed;
    left: 50%;
    bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 12px;
    width: min(560px, calc(100% - 24px));
    padding: 8px 8px 8px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--surface) 92%, transparent);
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-pop);
    transform: translateX(-50%);
  }
  .mdock__sum { display: grid; flex: 1; min-width: 0; line-height: 1.2; }
  .mdock__sum small { overflow: hidden; color: var(--tx60); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
  .mdock__sum b { font-size: 1.0625rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .mdock .btn { flex: none; height: 42px; }
  .mdock.is-bump { animation: dock-bump 0.5s var(--ease); }
  .mdock.is-bump .mdock__sum small { color: var(--pos); font-weight: 600; }
}

/* Sidebar still on screen: centre the dock over the content, not the window. */
@media (max-width: 1180px) and (min-width: 961px) {
  .mdock { left: calc(50% + var(--sidebar-w) / 2); width: min(560px, calc(100% - var(--sidebar-w) - 24px)); }
  .app.is-collapsed .mdock { left: calc(50% + var(--sidebar-w-collapsed) / 2); }
}

@media (max-width: 640px) {
  .tpl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .line__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, 0.8fr); }
}

@media (max-width: 520px) {
  .pay-sum { grid-template-columns: minmax(0, 1fr); }
  .ep-bar { flex-wrap: wrap; }
  .zoom { display: none; }
  .mtabs__btn { flex-direction: column; gap: 2px; height: 50px; font-size: 0.6875rem; }
  .mtabs__btn .mtabs__n { position: absolute; top: 4px; right: calc(50% - 26px); min-width: 18px; padding: 0 5px; font-size: 0.625rem; line-height: 18px; }
  .catalog--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdock .btn { padding: 0 14px; }
  .recv__sum--3 { grid-template-columns: 1fr 1fr; }
  .recv__sum--3 > :first-child { grid-column: 1 / -1; }
}

@keyframes dock-bump {
  30% { transform: translateX(-50%) scale(1.035); }
}

@media print {
  .mtabs, .mdock { display: none !important; }
}

/* Catalog toolbar: search, view toggle and "new product" on one row */
.catalog-tools .catalog-new { flex: none; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--accent-tint); color: var(--accent); }
.catalog-tools .catalog-new:hover { background: var(--accent-tint-strong); }

/* Category chips: a single swipeable / draggable row (no wrapping) */
.cats-row { margin: 10px 0 2px; padding: 2px; overflow-x: auto; scrollbar-width: none; cursor: grab; user-select: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.cats-row::-webkit-scrollbar { display: none; }
.cats-row .chips { flex-wrap: nowrap; width: max-content; }
.cats-row .chip { flex: none; }
.cats-row:active { cursor: grabbing; }

/* Tighter product rows */
.catalog { gap: 2px; }
.product { gap: 9px; padding: 4px 8px; }
.product__avatar { width: 34px; height: 34px; }
.product__add { width: 26px; height: 26px; }
.product__info { line-height: 1.2; }
.product__qty { top: -6px; right: -6px; }

/* Compact search + category row */
.tab-panel[data-panel="items"] { padding-top: 0; }
.tab-panel[data-panel="items"] .panel-sec { margin-bottom: 4px; }
.catalog-tools { gap: 6px; }
.catalog-tools .search .input { height: 34px; padding-top: 0; padding-bottom: 0; font-size: var(--fs-sm); }
.catalog-tools .search .icon { left: 10px; }
.catalog-tools .segmented--icons { padding: 2px; }
.catalog-tools .segmented--icons button { width: 30px; height: 30px; }
.catalog-tools .catalog-new { width: 34px; height: 34px; }
.cats-row { margin: 6px 0 0; padding: 1px; }
.cats-row .chips { gap: 6px; }
.cats-row .chip { height: 24px; padding: 0 10px; font-size: var(--fs-xs); }
.catalog { padding-top: 6px; }

/* Smaller product cards in grid view */
.catalog--grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; }
.pcard { gap: 2px; padding: 4px 4px 6px; }
.pcard__art { aspect-ratio: 2 / 1; margin-bottom: 2px; }
.pcard__ini { font-size: 0.9375rem; }
.pcard__cat { display: none; }
.pcard__name { min-height: 2.4em; font-size: var(--fs-xs); line-height: 1.2; }
.pcard__meta { font-size: 0.625rem; }
.pcard__foot { margin-top: 0; }
.pcard__foot b { font-size: var(--fs-xs); }
.pcard__foot .product__add { width: 22px; height: 22px; }
.pcard .product__qty { top: 3px; right: 3px; min-width: 18px; height: 18px; }
@media (max-width: 1180px) { .catalog--grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); } }

/* Status + amount in the panel footer */
.ep-foot { display: grid; gap: 6px; padding: 10px 14px 8px; text-align: left; }
.ep-foot__sum { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ep-foot__sum .doc-amt { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-lg); font-weight: 800; color: var(--txt); }
.ep-foot__sum .doc-amt.is-due { color: var(--warn); }
.ep-foot__sum .doc-amt.is-paid { color: var(--pos); }
.ep-foot__by { margin: 0; text-align: right; font-size: 0.6875rem; opacity: .8; }

/* Finish the sale: Baki (keep as due) / Nagad (paid now) — editor footer and phone dock */
.ep-close { display: grid; gap: 6px; }
.ep-close:empty { display: none; }
.ep-close__btns { display: grid; grid-template-columns: 1fr 1fr auto; gap: 6px; }
.ep-close__btns .btn { justify-content: flex-start; height: 48px; padding: 0 12px; gap: 9px; text-align: left; }
.ep-close__btns .btn span { display: grid; line-height: 1.15; }
.ep-close__btns .btn b { font-size: var(--fs-md); }
.ep-close__btns .btn small { font-size: 0.6875rem; font-weight: 600; opacity: 0.85; white-space: nowrap; }
.ep-close__nagad { background: var(--pos); color: #fff; box-shadow: 0 6px 16px -8px var(--pos); }
.ep-close__nagad:hover { background: color-mix(in oklab, var(--pos) 88%, #000); }
.ep-close__baki { border: 1px solid color-mix(in oklab, var(--warn) 45%, transparent); background: color-mix(in oklab, var(--warn) 12%, var(--surface)); color: color-mix(in oklab, var(--warn) 80%, var(--txt)); }
.ep-close__baki:hover { background: color-mix(in oklab, var(--warn) 20%, var(--surface)); }
.ep-close__method { height: 48px; max-width: 92px; padding: 0 6px; border: 1px solid var(--input-border); border-radius: var(--radius-sm); background: var(--input-bg); color: var(--txt); font: inherit; font-size: var(--fs-xs); }
.ep-close__one { width: 100%; height: 42px; }
.ep-close__note { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--fs-xs); color: var(--tx60); }
.ep-close__note.is-bad { color: var(--neg); font-weight: 600; }
.mdock__close { display: flex; gap: 6px; }
.mdock__close .btn { height: 40px; padding: 0 16px; font-weight: 700; }

/* Receive payment (Invoices list) and Send (WhatsApp / SMS) dialogs */
.rp-who { display: grid; gap: 2px; margin: 0 0 10px; }
.rp-who span { font-size: var(--fs-sm); color: var(--tx60); }
.rp-due { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; padding: 12px 14px; border-radius: var(--radius-md); background: color-mix(in oklab, var(--warn) 12%, var(--surface)); }
.rp-due b { font-size: var(--fs-xl); color: color-mix(in oklab, var(--warn) 85%, var(--txt)); font-variant-numeric: tabular-nums; }
.share-msg { margin: 10px 0; padding: 12px; max-height: 200px; overflow: auto; border-radius: var(--radius-md); background: var(--surface-2); font: inherit; font-size: var(--fs-sm); white-space: pre-wrap; }
.share-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.share-btn { display: flex; align-items: center; gap: 10px; height: 46px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--txt); font-weight: 600; text-decoration: none; }
.share-btn:hover { background: var(--surface-hover); }
.share-btn--wa { border-color: transparent; background: #1fa855; color: #fff; }
.share-btn--wa:hover { background: #188f47; }
/* Six document buttons + zoom + Save fit the panel width */
.ep-bar { gap: 6px; }
.bar-btn { width: 34px; }
.zoom .icon-btn { width: 29px; }
.zoom__val { min-width: 44px; }
.ep-save { padding: 0 10px; gap: 6px; }
.ep-close__btns .ep-close__nagad, .ep-close__btns .ep-close__nagad b, .ep-close__btns .ep-close__nagad small, .mdock__close .ep-close__nagad { color: #fff; }

/* ==========================================================================
   Counter (POS) panel: zoom on the preview, hold, customer box, scan box,
   after-sale actions, small menus.
   ========================================================================== */

/* Zoom floats on the preview, so the panel keeps its room for the bill. */
.editor__preview { position: relative; }
.zoom--float { position: absolute; right: 22px; bottom: 14px; z-index: 2; height: 38px; background: color-mix(in oklab, var(--surface) 94%, transparent); box-shadow: var(--shadow-card); backdrop-filter: blur(8px); }
.zoom--float .icon-btn { width: 30px; height: 32px; }
.zoom--float .zoom__val { height: 32px; min-width: 46px; }
@media (max-width: 1180px) { .zoom--float { display: none; } }

.ep-bar .bar-group:first-child { flex: none; }
.ep-save { min-width: 84px; }
.bar-btn { position: relative; }
.bar-btn__n {
  position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 99px; background: var(--warn); color: #fff; font-size: 0.625rem; font-weight: 800; line-height: 16px; text-align: center;
}

/* Customer: shows who the bill is for; type a phone number or name to change it. */
.ep-cust { position: relative; flex: none; padding: 0 14px 10px; }
.cpick {
  display: flex; align-items: center; gap: 10px; height: 50px; padding: 0 6px 0 7px;
  border: 1px solid var(--input-border); border-radius: var(--radius-md); background: var(--input-bg);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.cpick:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.cpick.is-locked { background: var(--surface-2); }
.cpick__ico {
  display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-tint); color: var(--accent); font-size: var(--fs-xs); font-weight: 800;
}
.cpick__field { position: relative; display: block; flex: 1; min-width: 0; height: 100%; cursor: text; }
.cpick__val { position: absolute; inset: 0; display: grid; align-content: center; gap: 1px; min-width: 0; pointer-events: none; }
.cpick__val b { overflow: hidden; font-size: var(--fs-md); font-weight: 700; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; }
.cpick__val b.is-empty { color: var(--tx60); font-weight: 600; }
.cpick__val small { overflow: hidden; color: var(--tx60); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.cpick__val em { font-style: normal; font-weight: 700; }
.cpick__val .is-due { color: var(--warn); }
.cpick__val .is-credit { color: var(--pos); }
.cpick__input {
  position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; outline: 0;
  background: transparent; color: var(--txt); font: inherit; font-size: var(--fs-md);
}
.cpick__input::-webkit-search-cancel-button { display: none; }
.cpick__field:not(:focus-within):not(.has-q) .cpick__input { color: transparent; }
.cpick__field:not(:focus-within) .cpick__input::placeholder { color: transparent; }
.cpick__field:focus-within .cpick__val, .cpick__field.has-q .cpick__val { visibility: hidden; }
.cpick__walk { flex: none; height: 28px; font-size: var(--fs-xs); }
.cpick__lock { display: grid; place-items: center; width: 28px; color: var(--tx45); }
.cpick__list {
  position: absolute; left: 14px; right: 14px; top: calc(100% - 6px); z-index: 20; display: grid; gap: 1px;
  max-height: min(380px, 52vh); margin: 0; padding: 5px; overflow-y: auto; list-style: none;
  border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-pop);
}
.cpick__opt { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); cursor: pointer; }
.cpick__opt:hover, .cpick__opt.is-cursor { background: var(--accent-tint); }
.cpick__ini { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--surface-2); color: var(--tx72); font-size: 0.6875rem; font-weight: 800; }
.cpick__txt { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.cpick__txt b { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.cpick__txt small { color: var(--tx60); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.cpick__due { flex: none; color: var(--warn); font-size: var(--fs-xs); font-weight: 700; }
.cpick__opt--new { border-top: 1px dashed var(--border); margin-top: 3px; padding-top: 9px; }
.cpick__opt--new .cpick__ini { background: var(--accent-tint); color: var(--accent); }

/* Scan box: barcode scanner, product code ("R5", "3*R5") or name. */
.scan {
  display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 4px 0 12px;
  border: 1.5px solid color-mix(in oklab, var(--accent) 45%, var(--input-border)); border-radius: var(--radius-md); background: var(--input-bg);
  transition: border-color var(--dur), box-shadow var(--dur);
}
.scan:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint); }
.scan__ico { display: inline-flex; flex: none; color: var(--accent); }
.scan__input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--txt); font: inherit; font-size: var(--fs-md); font-weight: 500; }
.scan__input::placeholder { color: var(--tx45); font-weight: 400; }
.scan__keys { flex: none; width: 36px; height: 36px; color: var(--tx60); }
.scan__hint { min-height: 17px; margin: 5px 2px 0; overflow: hidden; color: var(--tx60); font-size: 0.6875rem; line-height: 17px; text-overflow: ellipsis; white-space: nowrap; }
.scan__hint b { color: var(--tx72); font-weight: 700; }
kbd, .scan__hint kbd, .ed-keys kbd {
  display: inline-block; min-width: 18px; padding: 0 4px; margin: 0 1px; border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 4px; background: var(--surface-2); color: var(--tx72); font: inherit; font-size: 0.625rem; font-weight: 700; line-height: 14px; text-align: center;
}
.cats-bar { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.cats-bar .cats-row { flex: 1; min-width: 0; margin: 0; }
.cats-bar .segmented--icons { flex: none; padding: 2px; }
.cats-bar .segmented--icons button { width: 28px; height: 28px; }
.cats-bar .catalog-new { flex: none; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--accent-tint); color: var(--accent); }
.product.is-cursor, .pcard.is-cursor { background: var(--accent-tint); box-shadow: inset 0 0 0 1.5px var(--accent); }
.product__code { margin-right: 5px; padding: 0 5px; border-radius: 4px; background: var(--surface-2); color: var(--tx72); font-size: 0.625rem; font-weight: 800; letter-spacing: 0.02em; }
.catalog__empty .btn { margin: 4px auto 8px; }

/* Finish the sale: cash given → change; return credit; after the sale. */
.ep-close__cash { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; margin: 0; font-size: var(--fs-xs); color: var(--tx60); }
.ep-close__cash[hidden] { display: none; }
.ep-close__cash > span:first-child { flex: none; font-weight: 600; }
.ep-close__cash .money-input { grid-column: 1 / -1; width: 100%; min-width: 0; }
.ep-close__cash .input { height: 34px; font-size: var(--fs-md); font-weight: 700; }
.ep-close__cash b { flex: none; min-width: 92px; color: var(--pos); font-size: var(--fs-sm); text-align: right; }
.ep-close__cash > b[data-change] { grid-column: 1 / -1; min-width: 0; }
.ep-close__cash b.is-short { color: var(--neg); }
.ep-close__credit {
  display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 8px; padding: 7px 10px; text-align: left;
  border: 1px dashed color-mix(in oklab, var(--pos) 55%, transparent); border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--pos) 8%, var(--surface)); color: color-mix(in oklab, var(--pos) 75%, var(--txt));
}
.ep-close__credit span { font-size: var(--fs-sm); font-weight: 700; }
.ep-close__credit small { grid-column: 2; color: var(--tx60); font-size: 0.6875rem; }
.ep-close__credit:hover { background: color-mix(in oklab, var(--pos) 14%, var(--surface)); }
.ep-close__after { display: grid; grid-template-columns: auto auto 1fr; gap: 6px; }
.ep-close__after .btn { height: 40px; padding: 0 12px; gap: 6px; font-size: var(--fs-sm); }
.ep-close__after:not(:has([data-act="return"])) { grid-template-columns: auto 1fr; }

/* Small menus under the bar (held bills, keyboard). */
.ed-pop {
  position: fixed; z-index: 80; width: min(360px, calc(100vw - 16px)); max-height: min(520px, calc(100vh - 24px)); overflow-y: auto; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-pop);
  animation: ed-pop-in 0.14s var(--ease);
}
@keyframes ed-pop-in { from { opacity: 0; transform: translateY(-4px); } }
.ed-pop__head { display: grid; gap: 2px; padding: 2px 4px 8px; }
.ed-pop__head b { font-size: var(--fs-md); }
.ed-pop__head small { color: var(--tx60); font-size: var(--fs-xs); line-height: 1.35; }
.ed-pop__act {
  display: flex; align-items: center; gap: 10px; width: 100%; margin-bottom: 6px; padding: 9px 10px; text-align: left;
  border-radius: var(--radius-md); background: var(--accent-tint); color: var(--accent);
}
.ed-pop__act span { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.ed-pop__act b { font-size: var(--fs-sm); }
.ed-pop__act small { color: var(--tx60); font-size: var(--fs-xs); }
.ed-pop__act:hover { background: var(--accent-tint-strong); }
.ed-pop__list { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.ed-pop__list button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border-radius: var(--radius-sm); text-align: left; }
.ed-pop__list button:hover, .ed-pop__list button:focus-visible { background: var(--surface-hover); }
.ed-pop__ico { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); background: color-mix(in oklab, var(--warn) 14%, transparent); color: var(--warn); }
.ed-pop__txt { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.ed-pop__txt b { overflow: hidden; font-size: var(--fs-sm); text-overflow: ellipsis; white-space: nowrap; }
.ed-pop__txt small { overflow: hidden; color: var(--tx60); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.ed-pop__amt { flex: none; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.ed-pop__empty { margin: 0; padding: 10px 6px 6px; color: var(--tx60); font-size: var(--fs-sm); }
.ed-keys { display: grid; gap: 1px; margin: 0; }
.ed-keys > div { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 8px; padding: 4px 4px; border-radius: 6px; }
.ed-keys > div:nth-child(odd) { background: var(--surface-2); }
.ed-keys dt { margin: 0; }
.ed-keys dd { margin: 0; color: var(--tx72); font-size: var(--fs-xs); }
.ed-keys kbd { font-size: 0.6875rem; line-height: 16px; }
.ed-pop__opts { display: grid; gap: 10px; margin-top: 10px; padding: 10px 4px 2px; border-top: 1px solid var(--border); font-size: var(--fs-sm); }
.ed-pop__roll { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px; }
.ed-pop__roll .input { height: 34px; }

/* Unit after the quantity on the sheet ("2.5 kg"); a pack-able product gets a switch. */
.inv-unit { margin-left: 3px; color: inherit; font-size: 0.85em; opacity: 0.8; }
.inv-unit--pick {
  display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 0 4px; border: 1px dashed currentColor; border-radius: 4px;
  font: inherit; font-size: 0.78em; opacity: 0.85; cursor: pointer;
}
.inv-unit--pick:hover { opacity: 1; color: var(--inv-primary); }

@media (max-width: 1180px) {
  .ep-cust { padding-bottom: 12px; }
  .cpick__list { max-height: 60vh; }
}
@media (max-width: 520px) {
  .ep-bar .bar-group:last-of-type { flex: 1; justify-content: space-between; }
  .ep-close__after { grid-template-columns: 1fr 1fr; }
  .ep-close__after .btn--primary { grid-column: 1 / -1; }
}
/* The boxes draw their own focus ring around icon + field. */
.scan__input:focus, .scan__input:focus-visible, .cpick__input:focus, .cpick__input:focus-visible { outline: none; box-shadow: none; }
.scan__input::-webkit-search-cancel-button, .cpick__input::-webkit-search-cancel-button { display: none; }
.ep-close__btns { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.ep-close__btns .btn { min-width: 0; overflow: hidden; }
.ep-close__btns .btn span { min-width: 0; }
.ep-close__btns .btn small { overflow: hidden; text-overflow: ellipsis; }
.ep-close__method { max-width: 84px; }
.ep-close__credit.is-on { border-style: solid; background: color-mix(in oklab, var(--pos) 16%, var(--surface)); }

/* bKash / Nagad form (Payment tab) */
.pq-wrap { display: grid; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.pq-form { display: grid; gap: 8px; }
.pq-form.is-off { opacity: 0.55; }
.pq-f { display: grid; grid-template-columns: 58px minmax(0, 1fr) 96px 38px auto; align-items: center; gap: 6px; }
.pq-f__name { color: var(--c); font-size: var(--fs-sm); font-weight: 800; }
.pq-f .input { height: 38px; }
.pq-f__qr { display: grid; place-items: center; width: 38px; height: 38px; overflow: hidden; border: 1px dashed var(--input-border); border-radius: var(--radius-sm); color: var(--tx60); cursor: pointer; }
.pq-f__qr:hover { border-color: var(--c); color: var(--c); }
.pq-f__qr img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1180px) { .scan__hint { display: none; } }
.pq-f select.input { padding-left: 8px; padding-right: 22px; font-size: var(--fs-xs); }
.pq-wrap--set { margin-top: 18px; }
.pq-wrap--set .pq-f { grid-template-columns: 70px minmax(0, 1fr) 130px 38px auto; }
.pq-f--bq { grid-template-columns: 58px minmax(0, 1fr) auto auto; row-gap: 4px; padding-bottom: 6px; border-bottom: 1px dashed var(--border); }
.pq-wrap--set .pq-f--bq { grid-template-columns: 70px minmax(0, 1fr) auto auto; }
.pq-f__qr--wide { display: inline-flex; gap: 5px; width: auto; min-width: 38px; padding: 0 9px; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; }
.pq-f__qr--wide img { width: 34px; height: 34px; }
.pq-f__payload { grid-column: 2 / -1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--fs-xs) !important; }
.pq-f__payload.is-bad { border-color: var(--neg); }
.pq-f__msg { grid-column: 2 / -1; color: var(--tx60); font-size: 0.6875rem; line-height: 1.35; }
.pq-f__msg.is-bad { color: var(--neg); }
.pq-f--bq .pq-f__name { font-size: var(--fs-xs); white-space: nowrap; }
.pq-f { grid-template-columns: 58px minmax(0, 1fr) 96px 38px auto auto; }
.pq-wrap--set .pq-f { grid-template-columns: 70px minmax(0, 1fr) 130px 38px auto auto; }
.pq-wrap--set .pq-f--bq { grid-template-columns: 70px minmax(0, 1fr) auto auto auto; }
.pq-f__show { flex: none; gap: 6px; font-size: var(--fs-xs); font-weight: 600; }

/* ---------- One panel: products above, the bill (paid, due, receive, history) below ---------- */
.editor__panel .tab-panel[data-panel="items"] { padding-top: 2px; }
.ep-cust { padding-bottom: 8px; }
.cpick__collect { border-color: color-mix(in oklab, var(--warn) 45%, transparent); background: color-mix(in oklab, var(--warn) 12%, var(--surface)); color: color-mix(in oklab, var(--warn) 80%, var(--txt)); gap: 4px; }
.ep-close__note { flex-wrap: nowrap; }
.ep-close__note span { flex: 1; min-width: 0; }
.ep-close__note .link-btn { flex: none; font-size: var(--fs-xs); font-weight: 700; }
.ep-paid {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "bar n" "txt n"; align-items: center; column-gap: 10px; row-gap: 4px;
  width: 100%; padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); text-align: left;
}
.ep-paid:hover { border-color: var(--border-strong); background: var(--surface-hover); }
.ep-paid__bar { grid-area: bar; height: 5px; overflow: hidden; border-radius: 99px; background: color-mix(in oklab, var(--warn) 22%, transparent); }
.ep-paid__bar i { display: block; height: 100%; border-radius: inherit; background: var(--pos); }
.ep-paid__txt { grid-area: txt; overflow: hidden; color: var(--tx72); font-size: var(--fs-xs); text-overflow: ellipsis; white-space: nowrap; }
.ep-paid__txt b { color: var(--pos); }
.ep-paid__txt em { color: var(--warn); font-style: normal; font-weight: 700; }
.ep-paid__n { grid-area: n; display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-size: var(--fs-xs); font-weight: 700; }
.ep-rcv { display: grid; gap: 6px; padding: 8px; border: 1px solid color-mix(in oklab, var(--accent) 30%, var(--border)); border-radius: var(--radius-md); background: color-mix(in oklab, var(--accent) 5%, var(--surface)); }
.ep-rcv__row { display: grid; grid-template-columns: minmax(0, 1fr) 104px auto; gap: 6px; align-items: center; }
.ep-rcv__row .input { height: 38px; }
.ep-rcv__row .money-input .input { font-size: var(--fs-md); font-weight: 700; }
.ep-rcv__row .btn { height: 38px; padding: 0 12px; gap: 6px; }
.ep-rcv__method { padding-left: 8px; font-size: var(--fs-xs); }
.ep-rcv__row--sub { display: flex; flex-wrap: wrap; gap: 6px; }
.ep-rcv__row--sub .input { flex: 1 1 120px; height: 30px; font-size: var(--fs-xs); }
.ep-rcv__row--sub small { flex: 1 1 100%; min-height: 0; color: var(--tx60); font-size: 0.6875rem; }
.ep-rcv__row--sub small:empty { display: none; }
.ep-rcv__row--sub small.is-bad { color: var(--neg); font-weight: 600; }
.ep-close__cash > .input { flex: 1; min-width: 0; height: 34px; }
.pay-list__ico.is-credit { background: var(--accent-tint); color: var(--accent); }
.pay-none { margin: 10px 0 0; }
.pay-add { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--border); }
.ep-rcv__chip { height: 26px; padding: 0 10px; font-size: var(--fs-xs); }
.cpick__collect { display: inline-flex; align-items: center; white-space: nowrap; }

/* ==========================================================================
   Panel footer (Nov 2026): status sits at the top next to the number;
   the amount and the Received / Baki buttons share one line.
   ========================================================================== */

.ep-foot__sum[hidden] { display: none; }
.ep-foot__lbl { font-size: var(--fs-xs); font-weight: 600; color: var(--tx60); text-transform: uppercase; letter-spacing: 0.04em; }
.ep-close__btns--sum { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr); align-items: stretch; }
.ep-close__total { display: grid; align-content: center; min-width: 0; line-height: 1.15; }
.ep-close__total small { font-size: 0.6875rem; font-weight: 600; color: var(--tx60); text-transform: uppercase; letter-spacing: 0.04em; }
.ep-close__total b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-xl, 1.25rem); font-weight: 800; color: var(--txt); font-variant-numeric: tabular-nums; }
.ep-close__btns--sum .ep-close__baki { padding: 0 10px; }
.ep-close__btns--sum .ep-close__nagad { justify-content: center; }
.ep-close__cash .ep-close__method { flex: none; height: 34px; max-width: 110px; }
.ep-close__cash > .ep-close__gave { flex: none; font-weight: 600; }
.ep-close__cash > .input[data-trx] { flex: 1; min-width: 0; height: 34px; }

/* Invoice design in the right column (palette button): the invoice on the left updates live. */
.editor__design { display: none; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.editor[data-design="on"] .editor__design { display: flex; }
.editor[data-design="on"] .editor__panel { display: none; }
.ed-design__head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; border-bottom: 1px solid var(--border); }
.ed-design__title { flex: 1; margin: 0; font-size: var(--fs-lg); font-weight: 800; }
.ed-design__head .link-btn { font-size: var(--fs-xs); white-space: nowrap; }
.ed-design__body { flex: 1 1 auto; min-height: 0; padding: 12px 14px 16px; overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 1180px) { .editor__design { order: -1; min-height: 70dvh; } }
@media print { .editor__design { display: none !important; } }

/* Products header in the panel: Custom line · New product */
.ep-prodhead { display: flex; align-items: center; gap: 6px; }
.ep-prodhead__t { flex: 1; margin: 0; font-size: var(--fs-md); font-weight: 700; }
.ep-prodhead .btn { height: 30px; padding: 0 10px; gap: 5px; font-size: var(--fs-xs); }
.doc-sub .status-pick { margin-right: 2px; }
.ep-close__cash b:empty { display: none; }
.ep-close__cash .ep-close__method { max-width: 96px; }
.ep-close__cash .money-input { flex: 1 1 120px; }

/* ==========================================================================
   Calm editor (Nov 2026 review)
   ========================================================================== */

/* Toolbar: three labelled actions + "More" (new, hold, receipt, watermark, keys) + Save. */
.ep-bar .bar-group { flex: 1 1 auto; min-width: 0; justify-content: space-between; }
.bar-btn--lbl, .bar-btn--more { display: inline-flex; flex: 1 1 0; gap: 5px; width: auto; min-width: 0; padding: 0 6px; font-size: var(--fs-xs); font-weight: 600; color: var(--tx72); white-space: nowrap; }
.bar-btn--lbl span, .bar-btn--more span:not(.bar-btn__n) { overflow: hidden; text-overflow: ellipsis; }
.bar-btn--more[aria-expanded="true"] { background: var(--accent-tint); color: var(--accent); }
.ed-pop--more { width: min(300px, calc(100vw - 16px)); padding: 6px; }
.ed-pop--more .ed-pop__act { width: 100%; }
.ed-pop__switch { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: var(--radius-sm); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; }
.ed-pop__switch:hover { background: var(--surface-hover); }
.ed-pop__switch > span:not(.switch__track) { flex: 1; }
.ed-pop__switch > svg { color: var(--tx60); flex: none; }

/* Idle scan box: no hint line. */
.scan__hint:empty { display: none; }

/* Desktop panel: customer, products header and scan box stay put; only the product list scrolls. */
@media (min-width: 1181px) {
  .editor__panel .tab-panel[data-panel="items"]:not([hidden]) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  .editor__panel .tab-panel[data-panel="items"] > .panel-sec { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 10px; padding: 6px 2px 0; border-bottom: 0; }
  .editor__panel .tab-panel[data-panel="items"] > .panel-sec > :not(.catalog) { flex: none; }
  .editor__panel .catalog { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; overscroll-behavior: contain; padding-bottom: 10px; }
}

/* Catalog: an added product gets a thin accent edge and its quantity, not a blue block. */
.product.is-added { background: transparent; border-color: transparent; box-shadow: inset 3px 0 0 var(--accent); }
.product.is-added:hover { background: var(--surface-hover); }
.product__in { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: var(--accent-tint); color: var(--accent); font-size: 0.6875rem; font-weight: 800; line-height: 18px; vertical-align: 1px; }
.product__meta .is-none, .pcard__meta.is-none { color: var(--tx45); font-weight: 500; }

/* Footer: one line for the total when no payment buttons are shown. */
.ep-foot { padding-bottom: 12px; }

/* Tablet / phone: a slim top (number, status, customer, Save); the total lives in the bottom dock only. */
@media (max-width: 1180px) {
  .editor .ep-foot__sum { display: none; }
  .editor .ep-foot:has(.ep-close:empty) { display: none; }
  .ep-bar { flex-wrap: nowrap; }
  .ep-bar .ep-save { flex: none; min-width: 0; padding: 0 16px; }
}
@media (max-width: 520px) {
  .ep-head .doc-icon { display: none; }
  .ep-head { padding: 12px 12px 8px 14px; }
  .ep-bar { padding: 0 12px 10px; }
  .bar-btn--lbl span { display: none; }

  .bar-btn--lbl, .bar-btn--more { justify-content: center; }
}
.bar-btn--more { flex: 0 0 34px; padding: 0; justify-content: center; }
.bar-btn__dots { font-size: 11px; letter-spacing: 1px; color: var(--tx60); }
.bar-btn--lbl { gap: 4px; padding: 0 4px; }
.ed-pop--more .ed-pop__act { margin: 0; background: transparent; color: var(--txt); }
.ed-pop--more .ed-pop__act > svg { color: var(--tx60); flex: none; }
.ed-pop--more .ed-pop__act:hover, .ed-pop--more .ed-pop__act:focus-visible { background: var(--surface-hover); }
.ep-bar .ep-save { flex: none; min-width: 0; padding: 0 16px; }
.ep-bar .bar-group:first-child { flex: 1 1 auto; }

/* Quotation / proforma: convert to invoice from the panel header. */
.ep-tools .ep-convert { color: var(--accent); background: var(--accent-tint); }
.ep-tools .ep-convert:hover { background: var(--accent-tint-strong); }
.ep-tools .ep-convert[hidden] { display: none; }

/* Catalog chips: Popular first (star), and a second row for the picked category's sub-categories */
.cats-row .chip--ico { display: inline-flex; align-items: center; gap: 4px; }
.cats-row .chip--ico svg { width: 12px; height: 12px; color: var(--warn); }
.cats-row .chip--ico.is-active svg { color: currentColor; }
.cats-row .chips--sub { margin-top: 6px; }
.cats-row .chips--sub .chip { height: 22px; border-style: dashed; }
.cats-row .chips--sub .chip.is-active { border-style: solid; }

/* Invoice design: title size and colours from the logo */
.title-size__row { display: flex; align-items: center; gap: 10px; }
.title-size__row input { flex: 1; accent-color: var(--accent); }
.title-size__row small { font-size: 11px; font-weight: 700; color: var(--tx60); }
.title-size__row b { font-size: 18px; color: var(--tx60); }
.logo-pal { display: grid; gap: 8px; margin-top: 12px; padding: 10px 12px; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); }
.logo-pal__head { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; }
.logo-pal__head img { width: 26px; height: 26px; object-fit: contain; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1px var(--border); }
.logo-pal__sw { display: flex; flex-wrap: wrap; gap: 8px; min-height: 28px; align-items: center; }
.logo-pal__c { width: 28px; height: 28px; padding: 0; border: 2px solid var(--surface); border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; }
.logo-pal__c:hover { transform: scale(1.08); }
.logo-pal__c.is-active { box-shadow: 0 0 0 2px var(--accent); }
.logo-picker { display: grid; place-items: center; margin: 12px 0; padding: 16px; border-radius: var(--radius-md); background: repeating-conic-gradient(#f1f3f6 0 25%, #fff 0 50%) 0 0 / 16px 16px; }
.logo-picker canvas { max-width: 100%; height: auto; cursor: crosshair; }
.logo-picker__out { display: flex; align-items: center; gap: 10px; }
.logo-picker__chip { width: 32px; height: 32px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--border-strong); }
.logo-picker__out code { min-width: 72px; font-weight: 600; }
.logo-picker__out .btn { margin-left: auto; }

/* Wallet logos in the payment form: click to upload, ✕ to go back to the standard logo */
.pq-f { grid-template-columns: 92px minmax(0, 1fr) 96px 38px auto auto; }
.pq-wrap--set .pq-f { grid-template-columns: 112px minmax(0, 1fr) 130px 38px auto auto; }
.pq-f__brand { position: relative; display: flex; align-items: center; gap: 8px; min-width: 0; }
.pq-f__brand .pq-f__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pq-f__logo { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border: 1px dashed var(--input-border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; }
.pq-f__logo:hover { border-color: var(--c); }
.pq-f__logo.has-logo { border-style: solid; }
.pq-f__logo .wallet-mark { width: 28px; height: 28px; }
.pq-f__logo-x { position: absolute; top: -5px; left: 26px; z-index: 2; display: grid; place-items: center; width: 16px; height: 16px; padding: 0; border: 0; border-radius: 50%; background: var(--tx60); color: var(--surface); cursor: pointer; }
.pq-f__logo-x:hover { background: var(--neg); }

/* assets/css/invoice.css */
/* ==========================================================================
   Invoice sheet (A4 @ 96dpi = 794 × 1123 px)
   Always rendered as white paper, independent of the app theme.
   Colours come from --inv-primary / --inv-dark set inline from the Design tab.
   ========================================================================== */

.inv-sheet {
  --inv-primary: #1e9bd7;
  --inv-dark: #14213a;
  --inv-ink: #1d2636;
  --inv-muted: #687384;
  --inv-line: #e6ebf1;
  --inv-row: #f4f7fa;
  --pad: 44px;

  position: relative;
  display: flex;
  flex-direction: column;
  width: 794px;
  min-height: 1123px;
  overflow: hidden;
  background: #fff;
  color: var(--inv-muted);
  font-family: "Taka Glyph", var(--font);
  font-size: 12px;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 1px 3px rgb(15 30 60 / 0.08), 0 24px 60px -24px rgb(15 30 60 / 0.35);
  color-scheme: light;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.inv-sheet > :not(.inv-bg):not(.inv-wm) {
  position: relative;
  z-index: 1;
}

.inv-sheet p { margin: 0; }
.inv-sheet .icon { display: block; }

/* ---------- Brand + contact fragments (shared by headers and footers) ---------- */

.inv-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: var(--inv-dark);
}
.inv-brand__text { min-width: 0; }

.inv-brand__logo {
  max-width: 150px;
  max-height: 56px;
  object-fit: contain;
}

/* No logo uploaded: a monogram tile with the company initials. */
.inv-brand__mark {
  display: grid;
  place-items: center;
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--inv-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.inv-brand__name {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.inv-brand__tag {
  margin-top: 4px !important;
  color: var(--inv-muted);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.inv-brand--light { color: #fff; }
.inv-brand--light .inv-brand__tag { color: rgb(255 255 255 / 0.66); }
.inv-brand--stack { flex-direction: column; gap: 10px; text-align: center; }
.inv-brand--tile .inv-brand__mark { width: 58px; height: 58px; border-radius: 15px; font-size: 20px; }
.inv-brand--tile .inv-brand__logo { max-height: 62px; }

/* Stacked contact lines (first line slightly stronger). */
.inv-lines {
  display: grid;
  gap: 2px;
  flex: none;
  max-width: 300px;
  color: var(--inv-muted);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}
.inv-lines li:first-child { color: var(--inv-ink); font-weight: 600; }
.inv-lines--light { color: rgb(255 255 255 / 0.72); }
.inv-lines--light li:first-child { color: #fff; }

/* Small-caps label + value pairs. */
.inv-labelled { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px 12px; flex: none; margin: 0; }
.inv-labelled div { display: contents; }
.inv-labelled dt {
  color: var(--inv-primary);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.inv-labelled dt { text-align: right; }
.inv-labelled dd { max-width: 270px; margin: 0; color: var(--inv-ink); font-size: 11px; }

/* One line, dot-separated. */
.inv-inline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 2px;
  color: var(--inv-muted);
  font-size: 10.5px;
}
.inv-inline span + span::before { content: "·"; margin: 0 10px; color: var(--inv-primary); font-weight: 800; }
.inv-inline--end { justify-content: flex-end; text-align: right; }
.inv-inline--light { color: rgb(255 255 255 / 0.75); }
.inv-inline--light span + span::before { color: rgb(255 255 255 / 0.45); }

/* Columns with small-caps headings. */
.inv-cols { display: flex; gap: 28px; }
.inv-col { min-width: 0; max-width: 200px; color: var(--inv-ink); font-size: 10.5px; line-height: 1.5; }
.inv-col__h {
  margin-bottom: 3px !important;
  color: var(--inv-primary);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------- Headers ---------- */

.inv-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}

/* A hairline inset to the page margins, used under several headers. */
.inv-h--accent::after,
.inv-h--monogram::after,
.inv-h--siderule::after {
  content: "";
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 0;
  height: 1px;
  background: var(--inv-line);
}

/* Accent bar: a thin colour bar along the top edge. */
.inv-h--accent { padding: 36px var(--pad) 26px; border-top: 6px solid var(--inv-primary); }

/* Minimal: hairline with a short accent segment. */
.inv-h--minimal { margin: 0 var(--pad); padding: 42px 0 24px; border-bottom: 1px solid var(--inv-line); }
.inv-h--minimal::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 2px; background: var(--inv-primary); }

/* Letterhead: brand beside labelled columns, closed by a strong rule. */
.inv-h--letterhead { align-items: flex-end; margin: 0 var(--pad); padding: 42px 0 20px; border-bottom: 2px solid var(--inv-dark); }

/* Monogram: large initials tile + labelled contacts. */
.inv-h--monogram { padding: 36px var(--pad) 26px; }

/* Classic centred: everything on the axis, short accent under the rule. */
.inv-h--centered { flex-direction: column; gap: 12px; margin: 0 var(--pad); padding: 38px 0 20px; border-bottom: 1px solid var(--inv-line); }
.inv-h--centered::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 48px; height: 2px; background: var(--inv-primary); transform: translateX(-50%); }

/* Side rule: a vertical accent line beside the brand. */
.inv-h--siderule { padding: 36px var(--pad) 26px; }
.inv-h--siderule .inv-brand { padding-left: 16px; border-left: 4px solid var(--inv-primary); }
.inv-h--siderule .inv-brand__mark { display: none; }
.inv-h--siderule .inv-brand__logo { max-height: 48px; }

/* Soft tint: a pale wash of the accent colour. */
.inv-h--tinted {
  padding: 32px var(--pad);
  background: color-mix(in srgb, var(--inv-primary) 7%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--inv-primary) 20%, #fff);
}

/* Solid band: dark full-width block with a thin accent edge. */
.inv-h--band { padding: 32px var(--pad); background: var(--inv-dark); border-bottom: 3px solid var(--inv-primary); }

.inv-h--custom { display: block; }
.inv-h--custom .inv-custom-img,
.inv-f--custom .inv-custom-img {
  display: block;
  width: 100%;
  height: auto;
}

.inv-placeholder {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 120px;
  margin: 16px var(--pad);
  border: 2px dashed #c8d3e0;
  border-radius: 10px;
  background: #f6f9fc;
  color: #8693a5;
  font-size: 13px;
  font-weight: 500;
}
.inv-foot .inv-placeholder { height: 72px; }

/* ---------- Footers ---------- */

.inv-foot { position: relative; }
.inv-f__name { color: var(--inv-ink); font-size: 11.5px; font-weight: 800; }

/* Accent bar: contacts over a thin colour bar along the bottom edge. */
.inv-f--accent { padding: 16px var(--pad) 18px; border-bottom: 6px solid var(--inv-primary); }
.inv-f--accent::before { content: ""; position: absolute; left: var(--pad); right: var(--pad); top: 0; height: 1px; background: var(--inv-line); }

.inv-f--minimal { margin: 0 var(--pad); padding: 14px 0 26px; border-top: 1px solid var(--inv-line); }

.inv-f--columns {
  display: flex;
  gap: 28px;
  margin: 0 var(--pad);
  padding: 16px 0 26px;
  border-top: 1px solid var(--inv-line);
}
.inv-col--brand { flex: 1; max-width: none; color: var(--inv-muted); }
.inv-col__name { color: var(--inv-ink); font-size: 12px; font-weight: 800; }

.inv-f--twosided {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin: 0 var(--pad);
  padding: 14px 0 24px;
  border-top: 2px solid var(--inv-dark);
  font-size: 10.5px;
}
.inv-f--twosided > div { min-width: 0; color: var(--inv-muted); }

.inv-f--centered {
  display: grid;
  justify-items: center;
  gap: 5px;
  margin: 0 var(--pad);
  padding: 16px 0 26px;
  border-top: 1px solid var(--inv-line);
  text-align: center;
}
.inv-f--centered .inv-f__name span { color: var(--inv-muted); font-weight: 500; }

.inv-f--tinted {
  padding: 16px var(--pad) 18px;
  background: color-mix(in srgb, var(--inv-primary) 7%, #fff);
  border-top: 1px solid color-mix(in srgb, var(--inv-primary) 20%, #fff);
}

.inv-f--band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--pad);
  background: var(--inv-dark);
  border-top: 3px solid var(--inv-primary);
}
.inv-f--band .inv-f__name { flex: none; color: #fff; }


/* ---------- Body ---------- */

.inv-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 28px var(--pad) 0;
}

.inv-meta { display: block; }
/* Invoice no. / dates on the left and the customer on the right share one row, so they line up. */
.inv-meta__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 32px; }

.inv-title {
  margin: 0;
  font-size: calc(46px * var(--inv-title-scale, 1));
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--inv-dark);
}

.inv-title::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  margin: 12px 0 14px;
  border-radius: 2px;
  background: var(--inv-primary);
}

.inv-meta__list { display: grid; gap: 3px; margin: 0; }
.inv-meta__list div { display: flex; gap: 8px; }
.inv-meta__list dt { min-width: 84px; }
.inv-meta__list dt::after { content: ":"; }
.inv-meta__list dd { margin: 0; font-weight: 700; color: var(--inv-ink); }

.inv-to {
  display: grid;
  align-content: start;
  gap: 2px;
  max-width: 300px;
  padding-top: 0;
  text-align: right;
}

.inv-to__name {
  margin-bottom: 4px !important;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
  color: var(--inv-dark);
}

.inv-label {
  margin-bottom: 6px !important;
  font-size: 13px;
  font-weight: 800;
  color: var(--inv-primary);
}

.inv-strong {
  font-weight: 700;
  color: var(--inv-ink);
}

/* ---------- Items table ---------- */

.inv-table {
  width: 100%;
  margin-top: 28px;
  border-collapse: collapse;
}

.inv-table thead tr { background: var(--inv-primary); }

.inv-table th {
  height: 40px;
  padding: 0 12px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  white-space: nowrap;
}

.inv-table th i {
  display: inline-grid;
  place-items: center;
  width: 17px;
  height: 17px;
  margin-right: 6px;
  border-radius: 50%;
  background: #fff;
  color: var(--inv-primary);
  vertical-align: -4px;
}

.inv-table__h-desc {
  width: 52%;
  padding-left: 18px !important;
  text-align: left;
  background: var(--inv-dark);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}

.inv-table th:nth-child(2) { width: 17%; }
.inv-table th:nth-child(3) { width: 12%; }
.inv-table th:nth-child(4) { width: 19%; }

.inv-table td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--inv-line);
  text-align: center;
  color: var(--inv-ink);
}

.inv-table tbody tr:nth-child(even) { background: var(--inv-row); }
.inv-table td:last-child { font-weight: 700; }

.inv-table__desc {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  text-align: left !important;
}

.inv-table__no {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  background: var(--inv-dark);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.inv-table__name { font-weight: 700; color: var(--inv-ink); }
.inv-table__sub { font-size: 10.5px; color: var(--inv-muted); }

.inv-table__empty td {
  padding: 34px 12px;
  border: 2px dashed var(--inv-line);
  color: #97a2b1;
}
.inv-table__empty td { text-align: center; }
.inv-table__empty .icon { display: inline-block; margin-right: 8px; vertical-align: -4px; }

/* ---------- Summary + closing ---------- */

.inv-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 32px;
  margin-top: 26px;
}

.inv-block { display: grid; align-content: start; gap: 2px; }

.inv-totals {
  overflow: hidden;
  border-radius: 4px;
  background: var(--inv-dark);
  color: rgb(255 255 255 / 0.82);
}

.inv-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 18px;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.inv-totals > div span:last-child { font-weight: 700; color: #fff; }

.inv-totals__grand {
  padding: 13px 18px !important;
  border: 0 !important;
  background: var(--inv-primary);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.inv-closing {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 32px;
  margin-top: 30px;
}

.inv-sign {
  align-self: end;
  padding-top: 36px;
  text-align: center;
}

.inv-sign__line {
  display: block;
  margin-bottom: 8px;
  border-top: 1.5px solid var(--inv-dark);
}

/* Sits at the very bottom of the body, just above the footer, centred. */
.inv-thanks {
  margin: auto 0 0 !important;
  padding: 28px 0 18px;
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  color: var(--inv-primary);
}

/* ---------- Watermark ---------- */

.inv-wm {
  --wm: #16a36a;
  position: absolute;
  z-index: 2 !important;
  pointer-events: none;
  color: var(--wm);
  font-weight: 900;
  text-transform: uppercase;
  white-space: nowrap;
}
.inv-wm--pos { --wm: #16a36a; }
.inv-wm--warn { --wm: #d98a12; }
.inv-wm--neg { --wm: #d64545; }
.inv-wm--muted { --wm: #8a94a3; }
.inv-wm--accent { --wm: var(--inv-primary); }

/* A rubber stamp in the title block, to the right of the dates: it moves with the header and the title
   size, so it never lands on the table. */
.inv-meta--split .inv-meta__main { position: relative; flex: 1 1 auto; }
.inv-wm--stamp {
  right: 4%;
  bottom: 0;
  padding: 3px 13px;
  border: 3px double var(--wm);
  border-radius: 8px;
  font-size: 16px;
  letter-spacing: 0.14em;
  opacity: 0.6;
  transform: rotate(-10deg);
  transform-origin: 100% 100%;
}

/* A large faint word across the middle of the page */
.inv-wm--diagonal {
  top: 56%;
  left: 50%;
  font-size: 84px;
  letter-spacing: 0.08em;
  opacity: 0.08;
  transform: translate(-50%, -50%) rotate(-32deg);
}

/* ---------- Payments on the sheet ---------- */

.inv-title--long { font-size: calc(34px * var(--inv-title-scale, 1)); }

.inv-totals__paid { background: rgb(255 255 255 / 0.04); }
.inv-totals__due {
  padding: 11px 18px !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--inv-dark) 82%, #000);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inv-totals__due span:last-child { color: #ffd27a !important; font-size: 15px; }
.inv-totals__due.is-settled span:last-child { color: #7ee2b0 !important; }

.inv-paid-list { margin-top: 18px; }
.inv-paid-list p { display: flex; justify-content: space-between; gap: 16px; max-width: 330px; }
.inv-paid-list b { color: var(--inv-ink); }

/* ---------- Backgrounds ---------- */

.inv-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.inv-bg--default { overflow: hidden; }

.inv-bg__mark {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 320px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--inv-dark);
  opacity: 0.035;
  transform: translate(-50%, -45%) rotate(-12deg);
}

.inv-bg__shape { position: absolute; border-radius: 50%; }
.inv-bg__shape--a {
  top: 240px;
  right: -190px;
  width: 420px;
  height: 420px;
  border: 70px solid var(--inv-primary);
  opacity: 0.05;
}
.inv-bg__shape--b {
  bottom: 60px;
  left: -140px;
  width: 300px;
  height: 300px;
  background: var(--inv-dark);
  opacity: 0.035;
}

.inv-bg--dots {
  background-image: radial-gradient(color-mix(in srgb, var(--inv-primary) 22%, transparent) 1.2px, transparent 1.7px);
  background-size: 16px 16px;
  background-repeat: repeat;
  -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%);
  mask-image: linear-gradient(160deg, #000, transparent 70%);
}

/* ==========================================================================
   Editable preview (screen only; print uses the plain render)
   ========================================================================== */

.is-editable .inv-ed {
  display: inline-block;
  min-width: 2ch;
  margin: -1px -4px;
  padding: 1px 4px;
  border-radius: 4px;
  outline: 1px dashed transparent;
  cursor: text;
  transition: outline-color 0.15s, background-color 0.15s;
}
.is-editable .inv-ed:hover {
  outline-color: color-mix(in srgb, var(--inv-primary) 60%, transparent);
  background: color-mix(in srgb, var(--inv-primary) 6%, transparent);
}
.is-editable .inv-ed:focus,
.is-editable .inv-ed:focus-within {
  outline: 1.5px solid var(--inv-primary);
  background: #fff;
}
.is-editable .inv-ed:empty::before {
  content: attr(data-ph);
  color: #a3adbb;
  font-weight: 400;
  font-style: italic;
}
.is-editable .inv-ed--multi { display: block; white-space: pre-wrap; }

/* Editable numbers inside the dark totals box */
.is-editable .inv-totals .inv-ed:hover { outline-color: rgb(255 255 255 / 0.5); background: rgb(255 255 255 / 0.08); }
.is-editable .inv-totals .inv-ed:focus { outline-color: #fff; background: rgb(255 255 255 / 0.14); }
.inv-ed--num { min-width: 1.5ch; text-align: center; }
.is-editable .inv-ed--wide { min-width: 6ch; }

.inv-notes { margin-bottom: 4px !important; color: var(--inv-ink); }

/* Date: pretty text with a transparent native picker on top */
.inv-date { display: inline-flex !important; align-items: center; gap: 5px; cursor: pointer !important; font-weight: 700; color: var(--inv-ink); }
.inv-date__ico { color: var(--inv-primary); opacity: 0.55; transition: opacity 0.15s; }
.inv-date:hover .inv-date__ico, .inv-date.is-open .inv-date__ico { opacity: 1; }
.inv-date.is-open { background: color-mix(in oklab, var(--inv-primary) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--inv-primary) 35%, transparent); }

/* Bill-to: the whole block is a transparent customer select */
.inv-to__pick { position: relative; display: grid !important; gap: 2px; margin: -4px -8px !important; padding: 4px 8px !important; cursor: pointer !important; }
.inv-to__pick select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.inv-to__chev { display: inline-grid; vertical-align: 1px; margin-left: 6px; color: var(--inv-primary); }
.inv-to__pick:has(select.is-open) { background: color-mix(in oklab, var(--inv-primary) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--inv-primary) 35%, transparent); }
.inv-to__pick:has(select.is-open) .inv-to__chev { transform: rotate(180deg); }
.inv-to__chev { transition: transform 0.15s; }

/* Quantity stepper + remove button on line rows */
.inv-qty { display: inline-flex; align-items: center; gap: 8px; }
.inv-qty b { min-width: 2ch; font-weight: 700; }
.inv-qty button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid #d5dce6;
  border-radius: 50%;
  background: #fff;
  color: var(--inv-ink);
  opacity: 0.55;
  cursor: pointer;
  transition: all 0.15s;
}
.inv-table tr:hover .inv-qty button { opacity: 1; }
.inv-qty button:hover { border-color: var(--inv-primary); background: var(--inv-primary); color: #fff; }

.inv-table__desc { position: relative; }
.inv-del {
  position: absolute;
  top: 50%;
  left: -36px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid #f3c9c9;
  border-radius: 50%;
  background: #fff;
  color: #d64545;
  opacity: 0;
  transform: translateY(-50%) scale(0.85);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.15s, background-color 0.15s;
}
.inv-table tr:hover .inv-del,
.inv-del:focus-visible { opacity: 1; transform: translateY(-50%) scale(1); }
.inv-del:hover { background: #d64545; border-color: #d64545; color: #fff; }
.is-editable .inv-table tbody tr:hover { box-shadow: inset 3px 0 0 var(--inv-primary); }

.is-editable button:focus-visible { outline: 2px solid var(--inv-primary); outline-offset: 1px; }

/* ==========================================================================
   Totals box styles (Design → Totals). `dark` is the base look above.
   ========================================================================== */

.inv-totals__paid.is-empty { opacity: 0.55; }

/* Light variants share: ink text, no dark fill */
.inv-totals--light,
.inv-totals--accent,
.inv-totals--outline,
.inv-totals--ledger,
.inv-totals--minimal { background: transparent; color: var(--inv-muted); }
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) > div {
  border-bottom-color: var(--inv-line);
}
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) > div span:last-child { color: var(--inv-ink); }
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) > .inv-totals__grand span:last-child { color: #fff; }
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-totals__paid { background: transparent; }
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-totals__paid span:last-child { color: #13915f; }
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-totals__due {
  background: color-mix(in srgb, #e8930c 12%, #fff);
  color: #9a5b00;
}
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-totals__due span:last-child { color: #b86a00 !important; }
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-totals__due.is-settled {
  background: color-mix(in srgb, #13915f 12%, #fff);
  color: #0f7a50;
}
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-totals__due.is-settled span:last-child { color: #0f7a50 !important; }

/* Clean lines: hairlines, total framed by a heavy rule */
.inv-totals--light { border-radius: 0; }
.inv-totals--light > div { padding: 8px 4px; }
.inv-totals--light .inv-totals__grand {
  margin-top: 4px;
  padding: 12px 4px !important;
  border-top: 2.5px solid var(--inv-dark) !important;
  border-bottom: 2.5px solid var(--inv-dark) !important;
  background: transparent;
  color: var(--inv-dark);
}
.inv-totals--light .inv-totals__grand span:last-child { color: var(--inv-primary); font-size: 18px; }
.inv-totals--light .inv-totals__due { margin-top: 8px; border-radius: 6px; }

/* Soft tint: rounded tinted card, solid accent total pill */
.inv-totals--accent {
  padding: 8px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--inv-primary) 8%, #fff);
}
.inv-totals--accent > div { padding: 7px 10px; border-bottom: 0; }
.inv-totals--accent .inv-totals__grand { margin-top: 6px; border-radius: 9px; }
.inv-totals--accent .inv-totals__due { margin-top: 6px; border-radius: 9px; }

/* Outlined: accent border, dark total band */
.inv-totals--outline {
  border: 1.5px solid var(--inv-primary);
  border-radius: 10px;
}
.inv-totals--outline .inv-totals__grand { background: var(--inv-dark); box-shadow: inset 6px 0 0 var(--inv-primary); }

/* Ledger: zebra rows, dark total bar */
.inv-totals--ledger { border: 1px solid var(--inv-line); border-radius: 6px; }
.inv-totals--ledger > div:nth-child(odd):not(.inv-totals__grand):not(.inv-totals__due) { background: var(--inv-row); }
.inv-totals--ledger > div { border-bottom: 0; }
.inv-totals--ledger .inv-totals__grand { background: var(--inv-dark); }
.inv-totals--ledger .inv-totals__grand span:last-child { color: color-mix(in srgb, var(--inv-primary) 55%, #fff); }

/* Minimal: no box; big accent total with a double rule */
.inv-totals--minimal { border-radius: 0; }
.inv-totals--minimal > div { padding: 5px 0; border-bottom: 0; }
.inv-totals--minimal .inv-totals__grand {
  margin-top: 6px;
  padding: 10px 0 8px !important;
  border-top: 1px solid var(--inv-line) !important;
  border-bottom: 3px double var(--inv-primary) !important;
  background: transparent;
  color: var(--inv-dark);
}
.inv-totals--minimal .inv-totals__grand span:last-child { color: var(--inv-primary); font-size: 20px; }
.inv-totals--minimal .inv-totals__due { margin-top: 8px; padding: 8px 10px !important; border-radius: 6px; }

/* Editable affordance on light totals uses the normal (dark) outline */
.is-editable :is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-ed:hover {
  outline-color: color-mix(in srgb, var(--inv-primary) 60%, transparent);
  background: color-mix(in srgb, var(--inv-primary) 8%, transparent);
}
.is-editable :is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-ed:focus {
  outline-color: var(--inv-primary);
  background: #fff;
}

/* ==========================================================================
   Line items: product images, warranty, editable price / quantity
   ========================================================================== */

.inv-table__text { min-width: 0; }
.inv-table__img {
  flex: none;
  width: 40px;
  height: 40px;
  margin-top: -2px;
  border: 1px solid var(--inv-line);
  border-radius: 6px;
  background: #fff;
  object-fit: cover;
}
.inv-table__warranty {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 3px !important;
  padding: 1px 7px 1px 5px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--inv-primary) 10%, #fff);
  color: color-mix(in srgb, var(--inv-primary) 75%, var(--inv-ink));
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.inv-table__warranty .icon { flex: none; }
button.inv-warranty-btn { border: 0; font-family: inherit; cursor: pointer; }
button.inv-warranty-btn:hover { background: color-mix(in srgb, var(--inv-primary) 18%, #fff); }
button.inv-warranty-btn.is-empty { background: transparent; border: 1px dashed #c3ccd9; color: #8a95a6; font-weight: 600; }
/* Warranty popover (lives on <body>, so it uses app tokens, not invoice ones) */
.w-pop {
  position: fixed;
  z-index: 1000;
  display: grid;
  gap: 10px;
  width: 260px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--txt);
  box-shadow: var(--shadow-pop);
}
.w-pop__row { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 8px; }
.w-pop .btn { justify-self: end; }
.inv-money { display: inline-flex; align-items: baseline; justify-content: center; white-space: nowrap; }
.inv-money .inv-ed { margin-left: 0; }
.inv-qty .inv-ed--num { min-width: 2.2ch; font-weight: 700; }

/* ---------- Company name: long names wrap cleanly instead of squeezing ---------- */

.inv-brand__text { flex: 1 1 auto; min-width: 150px; }
.inv-brand__name { overflow-wrap: anywhere; }
.inv-brand__name--sm { font-size: 19px; }
.inv-brand__name--xs { font-size: 16px; }
.inv-head .inv-lines { flex: 0 1 auto; min-width: 170px; }
.inv-brand--stack .inv-brand__text { min-width: 0; }

/* ---------- Editable preview: every editable spot is visibly marked ---------- */

.is-editable .inv-ed { outline: 1px dashed color-mix(in srgb, var(--inv-primary) 32%, transparent); }
.is-editable .inv-totals--dark .inv-ed,
.is-editable .inv-totals .inv-ed { outline-color: rgb(255 255 255 / 0.32); }
.is-editable :is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-ed {
  outline-color: color-mix(in srgb, var(--inv-primary) 32%, transparent);
}
.is-editable .inv-h--band .inv-ed,
.is-editable .inv-brand--light .inv-ed { outline-color: rgb(255 255 255 / 0.35); }
.is-editable .inv-brand--light .inv-ed:focus { background: rgb(255 255 255 / 0.12); }

/* ---------- Powered by ---------- */

.inv-powered {
  padding: 6px 0 8px;
  color: #a3adbb;
  font-size: 8.5px;
  letter-spacing: 0.06em;
  text-align: center;
}
.inv-powered b { color: #7b8698; font-weight: 700; }
.inv-powered__page + .inv-powered__by::before { content: " · "; }

/* ==========================================================================
   Compact line items: one tight row per product, warranty inline with the name
   ========================================================================== */

.inv-table td { padding: 5px 10px; line-height: 1.35; }
.inv-table__desc { align-items: center; gap: 9px; }
.inv-table__no { width: 20px; height: 20px; border-radius: 3px; font-size: 9px; }
.inv-table__img { width: 26px; height: 26px; margin-top: 0; border-radius: 4px; }
.inv-table__line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
}
.inv-table__sub { font-size: 10px; line-height: 1.3; }
.inv-table__warranty {
  flex: none;
  margin-top: 0 !important;
  padding: 0 6px 0 4px;
  font-size: 9px;
  line-height: 15px;
  white-space: nowrap;
}
.inv-table__tag {
  flex: none;
  padding: 0 5px;
  border-radius: 99px;
  background: #fdecec;
  color: #c43d3d;
  font-size: 9px;
  font-weight: 700;
  line-height: 15px;
}
.inv-qty { gap: 6px; }
.inv-qty button { width: 17px; height: 17px; }

/* ==========================================================================
   A4 pages: every page is exactly one A4 sheet; rows flow on to the next page
   ========================================================================== */

.inv-doc {
  display: grid;
  gap: 20px;
  width: 794px;
}
.inv-doc > .inv-sheet { height: 1123px; min-height: 0; }

/* Continuation pages: a slim strip instead of the full header. */
.inv-body--cont { padding-top: 26px; }
.inv-cont {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--inv-line);
  color: var(--inv-muted);
  font-size: 11px;
}
.inv-cont b { color: var(--inv-ink); font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; }
.inv-cont__page { margin-left: auto; }
.inv-carry {
  margin-top: 10px !important;
  color: #97a2b1;
  font-size: 10px;
  font-style: italic;
  text-align: right;
}

/* Off-screen layout pass used to measure rows before splitting them into pages. */
.inv-measure,
.inv-offscreen {
  position: absolute;
  top: 0;
  left: -10000px;
  visibility: hidden;
  pointer-events: none;
}
.inv-measure .inv-sheet { height: auto; min-height: 0; }

/* ==========================================================================
   Product pictures: softer, larger thumbnails and a livelier catalog
   ========================================================================== */
.cell-thumb {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border-color: color-mix(in oklab, var(--border) 70%, transparent);
  box-shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 4px 10px -4px rgb(15 23 42 / 0.18);
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
tr:hover .cell-thumb { transform: scale(1.06) rotate(-1.5deg); box-shadow: 0 2px 4px rgb(15 23 42 / 0.1), 0 10px 18px -6px rgb(15 23 42 / 0.28); }
.cell-thumb img { background: transparent; }

.pcard { border-radius: 14px; }
.pcard__art { border-radius: 10px; }
.pcard__art > img { background: transparent; transition: transform 0.45s var(--ease); }
.pcard:hover .pcard__art > img { transform: scale(1.09); }
.pcard.has-img .pcard__cat { backdrop-filter: blur(6px); box-shadow: 0 1px 3px rgb(15 23 42 / 0.12); }
.pcard:hover { box-shadow: 0 12px 24px -12px rgb(15 23 42 / 0.28); }

.product__avatar.has-img { border-radius: 10px; box-shadow: 0 2px 6px -2px rgb(15 23 42 / 0.25); } /* no overflow clip: the qty badge sits on the corner */
.line__img.has-img { background: transparent; box-shadow: 0 2px 6px -2px rgb(15 23 42 / 0.25); }
.inv-table__img { background: transparent; border-radius: 8px; }

/* "+" in the editable sheet's item table: opens the add-product popup */
.inv-add {
  display: inline-grid; place-items: center; width: 26px; height: 26px; vertical-align: middle;
  border-radius: 50%; border: 1.5px solid var(--inv-primary, currentColor); background: transparent;
  color: var(--inv-primary, currentColor); cursor: pointer; transition: background .15s, color .15s, transform .15s;
}
.inv-add:hover, .inv-add:focus-visible { background: var(--inv-primary, currentColor); color: #fff; transform: scale(1.1); }
.inv-add .icon { display: block; margin: 0; vertical-align: baseline; }
.inv-table__empty .inv-add { margin: 0 10px 0 0; }
.inv-table__empty td > span { vertical-align: middle; line-height: 26px; font-weight: 600; }
.inv-table__add td { text-align: center; padding: 8px 0; border-bottom: 0; }
@media print { .inv-add, .inv-table__add { display: none; } }

/* Due-date shortcuts under the dates (editor only) */
.inv-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.inv-terms__chip {
  height: 24px; padding: 0 10px; border-radius: 999px; border: 1px solid var(--inv-line);
  background: transparent; color: var(--inv-muted); font: 600 10.5px/1 inherit; cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.inv-terms__chip:hover { background: var(--inv-primary); border-color: var(--inv-primary); color: #fff; }
@media print { .inv-terms { display: none; } }

/* Editable item fields use the full width of their cell */
.is-editable .inv-table__text { flex: 1 1 auto; }
.is-editable .inv-table__name { flex: 1 1 140px; min-width: 0; }
.is-editable .inv-table__name .inv-ed,
.is-editable .inv-table__sub .inv-ed { display: block; width: calc(100% + 8px); }
.is-editable .inv-table__sub { display: block; }
.is-editable .inv-money { display: flex; width: 100%; }
.is-editable .inv-money .inv-ed--num { flex: 1; min-width: 6ch; }
.is-editable .inv-qty { display: flex; width: 100%; justify-content: center; }
.is-editable .inv-qty .inv-ed--num { flex: 1; min-width: 4ch; }

/* Editable document type (title) and status pill */
.inv-title-pick { position: relative; display: inline-block !important; margin: 0 !important; padding: 0 !important; }
.inv-title-pick select, .inv-status select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.inv-title__chev { display: inline-grid; vertical-align: middle; margin-left: 10px; color: var(--inv-primary); opacity: .75; transition: transform .15s, opacity .15s; }
.inv-title-pick:hover .inv-title__chev, .inv-title-pick:has(select.is-open) .inv-title__chev { opacity: 1; }
.inv-title-pick:has(select.is-open) .inv-title__chev { transform: rotate(180deg); }
.is-editable .inv-status {
  position: relative; display: inline-flex !important; align-items: center; gap: 4px; margin: 0 !important; padding: 2px 8px 2px 10px !important;
  border-radius: 999px; outline: 0 !important; font-size: 11px; font-weight: 700; cursor: default; background: #e3e7ee; color: #475163;
}
.inv-status .inv-to__chev { margin-left: 0; color: inherit; }
.inv-status--sent { background: #dcebff; color: #1f5fbf; }
.inv-status--confirmed { background: #ece6ff; color: #5b3fc4; }
.inv-status--partial { background: #ffefcf; color: #a86500; }
.inv-status--paid { background: #d6f3e4; color: #0f7a4a; }
.inv-status--overdue { background: #fde0e0; color: #b42a2a; }
.inv-status--cancelled { background: #e9e9ec; color: #6b6f78; text-decoration: line-through; }
@media print { .inv-title__chev, .inv-status { display: none !important; } }

/* No branding line: the footer strip only exists on multi-page invoices (page x of y) */
.inv-powered:empty { margin: 0; padding: 0; height: 0; min-height: 0; border: 0; }

/* Product name / description: plain text spanning the whole description cell */
.inv-table__desc .inv-table__text { flex: 1 1 auto; min-width: 0; }
.inv-table__desc .inv-table__name, .inv-table__desc .inv-table__sub { max-width: none; }
.inv-table__desc .inv-table__sub { display: block; width: 100%; }

/* Price / Qty / Total: right-aligned. Editable numbers hug their content and widen while being edited. */
.inv-table th:nth-child(n + 2), .inv-table td:nth-child(n + 2) { text-align: right; }
.inv-table td:nth-child(n + 2) { padding-right: 14px; }
.inv-table th:nth-child(n + 2) { padding-right: 14px; }
.is-editable .inv-money, .is-editable .inv-qty { display: inline-flex; width: auto; justify-content: flex-end; }
.is-editable .inv-money .inv-ed--num,
.is-editable .inv-qty .inv-ed--num { flex: none; width: auto; min-width: 2ch; text-align: right; transition: min-width .18s var(--ease, ease); }
.is-editable .inv-money .inv-ed--num:focus { min-width: 10ch; }
.is-editable .inv-qty .inv-ed--num:focus { min-width: 6ch; }

/* Same right alignment for the printed / PDF copy (and tabular figures so amounts line up digit by digit) */
.inv-table td:nth-child(n + 2) { font-variant-numeric: tabular-nums; }
@media print {
  #print-root .inv-table th:nth-child(n + 2),
  #print-root .inv-table td:nth-child(n + 2) { text-align: right !important; padding-right: 14px; }
  #print-root .inv-table th:nth-child(n + 2) { white-space: nowrap; }
}

/* Column headings: icon and label share one centre line */
.inv-th { display: inline-flex; align-items: center; gap: 7px; line-height: 1; vertical-align: middle; }
.inv-th i { margin: 0 !important; vertical-align: baseline !important; flex: none; }
.inv-table th { vertical-align: middle; }

/* Line items: running number (1, 2, 3…) then a larger product picture */
.inv-table__no { width: 22px; height: 22px; border-radius: 50%; font-size: 10px; background: var(--inv-dark); }
.inv-table__img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; margin-top: 0; }
.inv-table td { padding-top: 7px; padding-bottom: 7px; }

/* Line number: outlined circle, no solid fill */
.inv-table__no {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--inv-primary) 70%, transparent);
  color: var(--inv-primary);
  font-weight: 600;
  box-sizing: border-box;
}

/* Previous due + total payable (customer's other unpaid invoices) */
.inv-totals__prev span:last-child { color: #ffd27a; }
.inv-totals__payable {
  padding: 11px 18px !important;
  border: 0 !important;
  background: color-mix(in srgb, var(--inv-primary) 85%, #000);
  color: #fff;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.inv-totals__payable span:last-child { font-size: 15px; }
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-totals__prev span:last-child { color: #b86a00; }
:is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-totals__payable {
  background: color-mix(in srgb, var(--inv-primary) 14%, #fff);
  color: color-mix(in srgb, var(--inv-primary) 70%, #000);
}

/* Status on the sheet (read-only): keep its colour over the grey base pill */
.is-editable .inv-status--sent { background: #dcebff; color: #1f5fbf; }
.is-editable .inv-status--confirmed { background: #ece6ff; color: #5b3fc4; }
.is-editable .inv-status--partial { background: #ffefcf; color: #a86500; }
.is-editable .inv-status--paid { background: #d6f3e4; color: #0f7a4a; }
.is-editable .inv-status--overdue { background: #fde0e0; color: #b42a2a; }
.is-editable .inv-status--cancelled { background: #e9e9ec; color: #6b6f78; }

/* ==========================================================================
   Many items (more than 4): tighter spacing so 12–15 products fit on one A4 page
   with the totals, terms and signature. Same look, less air.
   ========================================================================== */
.inv-sheet--dense .inv-body { padding-top: 16px; }
.inv-sheet--dense .inv-title { font-size: calc(34px * var(--inv-title-scale, 1)); }
.inv-sheet--dense .inv-title--long { font-size: calc(26px * var(--inv-title-scale, 1)); }
.inv-sheet--dense .inv-title::after { margin: 8px 0 10px; }
.inv-sheet--dense .inv-meta__list { gap: 1px; }
.inv-sheet--dense .inv-terms { margin-top: 4px; }
.inv-sheet--dense .inv-table { margin-top: 14px; }
.inv-sheet--dense .inv-table th { height: 32px; }
.inv-sheet--dense .inv-table td { padding: 3px 10px; line-height: 1.25; }
.inv-sheet--dense .inv-table__no { width: 18px; height: 18px; font-size: 8.5px; }
.inv-sheet--dense .inv-table__img { width: 22px; height: 22px; }
.inv-sheet--dense .inv-table__sub { font-size: 9.5px; line-height: 1.2; }
.inv-sheet--dense .inv-summary { margin-top: 14px; }
.inv-sheet--dense .inv-totals > div { padding-top: 6px; padding-bottom: 6px; }
.inv-sheet--dense .inv-totals__grand, .inv-sheet--dense .inv-totals__due, .inv-sheet--dense .inv-totals__payable { padding-top: 8px !important; padding-bottom: 8px !important; }
.inv-sheet--dense .inv-closing { margin-top: 14px; }
.inv-sheet--dense .inv-sign { padding-top: 18px; }
.inv-sheet--dense .inv-thanks { padding: 10px 0 8px; font-size: 16px; }
.inv-sheet--dense .inv-paid-list { margin-top: 10px; }

/* bKash / Nagad numbers and QR on the invoice */
.inv-payqr .pq-row { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 4px; }
.inv-payqr .pq-item { display: flex; align-items: center; gap: 7px; }
.inv-payqr .pq-qr { flex: none; width: 52px; height: 52px; border-radius: 3px; object-fit: contain; background: #fff; }
.inv-payqr .pq-txt { display: grid; line-height: 1.25; }
.inv-payqr .pq-txt b { font-size: 1em; font-weight: 800; }
.inv-payqr .pq-txt span { font-weight: 600; font-variant-numeric: tabular-nums; }
.inv-payqr .pq-txt small { font-size: 0.85em; opacity: 0.75; }
.inv-sheet--dense .inv-payqr .pq-qr { width: 44px; height: 44px; }
.inv-summary__left .inv-payqr { margin-top: 10px; }
.inv-payqr .pq-item--bq .pq-qr { width: 64px; height: 64px; }
.inv-sheet--dense .inv-payqr .pq-item--bq .pq-qr { width: 56px; height: 56px; }

/* Quantity and its unit on one line, so a "kg" / "dozen" line is no taller than the others. */
.inv-table td:has(.inv-qty) { white-space: nowrap; }
.is-editable .inv-table td:has(.inv-qty) { display: table-cell; }
.is-editable td:has(> .inv-qty) { text-align: center; }
.is-editable .inv-qty { display: inline-flex; width: auto; }
.is-editable .inv-qty .inv-ed--num { flex: none; min-width: 2.6ch; }
.inv-unit, .inv-unit--pick { vertical-align: middle; }

/* Bangla QR / bKash / Nagad: side by side, QR above its name, one short row. */
.inv-payqr .pq-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px 10px; }
.inv-payqr .pq-item { display: grid; justify-items: start; gap: 2px; }
.inv-payqr .pq-qr, .inv-payqr .pq-item--bq .pq-qr { width: 46px; height: 46px; }
.inv-payqr .pq-txt { gap: 0; font-size: 0.92em; line-height: 1.2; }
.inv-payqr .pq-txt small { display: none; }
.inv-sheet--dense .inv-payqr .pq-qr, .inv-sheet--dense .inv-payqr .pq-item--bq .pq-qr { width: 40px; height: 40px; }
.inv-summary__left .inv-payqr { margin-top: 6px; }
/* Bangla QR holds more data than a number QR: a little bigger so phones read it from paper. */
.inv-payqr .pq-item--bq .pq-qr { width: 58px; height: 58px; }
.inv-sheet--dense .inv-payqr .pq-item--bq .pq-qr { width: 54px; height: 54px; }

/* ==========================================================================
   Editable sheet (Nov 2026): wide click targets for line fields, discount and VAT.
   ========================================================================== */
.is-editable .inv-table__line { display: flex; align-items: flex-start; gap: 6px; }
.is-editable .inv-table__name { flex: 1 1 auto; min-width: 0; }
.is-editable .inv-table__line > :not(.inv-table__name) { flex: none; }
.is-editable .inv-table__text { flex: 1 1 auto; min-width: 0; }
.is-editable .inv-ed--fill { display: block; width: 100%; margin: -2px 0; padding: 2px 6px; box-sizing: border-box; outline-color: color-mix(in srgb, var(--inv-primary) 22%, transparent); }
.is-editable .inv-table__sub .inv-ed--fill { margin-top: 2px; }
.is-editable .inv-money { display: flex; align-items: center; gap: 3px; width: 100%; }
.is-editable .inv-money > i { flex: none; font-style: normal; }
.is-editable .inv-money .inv-ed--fill { flex: 1; text-align: right; }
.is-editable .inv-qty { display: flex; width: 100%; gap: 4px; }
.is-editable .inv-qty .inv-ed--fill { flex: 1; min-width: 3ch; text-align: center; }
.is-editable .inv-qty button { flex: none; }
.is-editable .inv-totals .inv-ed--wide { min-width: 9ch; margin-left: 4px; margin-right: 2px; text-align: center; outline-color: rgb(255 255 255 / 0.28); }
.is-editable :is(.inv-totals--light, .inv-totals--accent, .inv-totals--outline, .inv-totals--ledger, .inv-totals--minimal) .inv-ed--wide { outline-color: color-mix(in srgb, var(--inv-primary) 30%, transparent); }
.is-editable .inv-meta__list [data-edit="inv.number"] { min-width: 10ch; }

/* ==========================================================================
   Calm editable sheet (Nov 2026 review): the invoice looks like an invoice.
   Edit outlines appear on hover / focus only; table rows and the totals box
   hint their fields while the mouse is over them.
   ========================================================================== */
.inv-sheet.is-editable .inv-ed:not(:hover):not(:focus):not(:focus-within):not(.is-open) { outline-color: transparent !important; background: transparent; }
.inv-sheet.is-editable tr:hover .inv-ed:not(:focus) { outline-color: color-mix(in srgb, var(--inv-primary) 30%, transparent) !important; }
.inv-sheet.is-editable .inv-totals:hover .inv-ed:not(:focus) { outline-color: color-mix(in srgb, currentColor 35%, transparent) !important; }
.inv-sheet.is-editable .inv-ed:empty::before { color: #b9c1cc; }

/* Warranty: shown when set; the empty "No warranty" tag only while the row is hovered. */
.inv-sheet.is-editable button.inv-warranty-btn.is-empty { opacity: 0; transition: opacity 0.15s; }
.inv-sheet.is-editable tr:hover button.inv-warranty-btn.is-empty,
.inv-sheet.is-editable button.inv-warranty-btn.is-empty:focus-visible { opacity: 1; }

/* No logo yet: an upload slot in place of the initials tile (editor only). */
.inv-brand__upload { display: grid !important; place-items: center; align-content: center; gap: 1px; border: 1.5px dashed color-mix(in srgb, var(--inv-primary) 45%, transparent) !important; background: color-mix(in srgb, var(--inv-primary) 6%, #fff) !important; color: var(--inv-primary) !important; cursor: pointer; }
.inv-brand__upload small { font-size: 9px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.inv-brand__upload:hover { background: color-mix(in srgb, var(--inv-primary) 12%, #fff) !important; }

/* ==========================================================================
   Meta (Nov 2026): the customer sits level with the document title, on the
   right, with more room; the signature hangs under the totals box, as wide.
   ========================================================================== */
.inv-meta--split { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; }
.inv-meta--split .inv-meta__main { min-width: 0; }
.inv-meta--split .inv-to { flex: 0 1 46%; max-width: 46%; min-width: 220px; padding-top: 4px; }
.inv-meta--split .inv-to__name { overflow-wrap: break-word; }
.inv-meta--split .inv-to__pick .inv-to__name { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.inv-meta--split .inv-to__pick .inv-to__chev { flex: none; margin-left: 0; }
.inv-closing { grid-template-columns: minmax(0, 1fr) 280px; gap: 32px; }
.inv-sign { align-self: start; padding-top: 64px; }
.inv-sheet--dense .inv-sign { padding-top: 40px; }
.inv-sign__line { width: 100%; }

/* No customer yet (editor only): a prompt instead of a dropdown — the side panel chooses the customer. */
.inv-to__empty { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 6px 10px; border: 1px dashed color-mix(in oklab, var(--inv-primary) 45%, transparent); border-radius: 8px; background: none; color: var(--inv-primary); font: inherit; font-size: 15px; font-weight: 700; cursor: pointer; }
.inv-to__empty:hover { background: color-mix(in oklab, var(--inv-primary) 8%, transparent); }
.inv-to__empty kbd { padding: 1px 5px; border: 1px solid currentColor; border-radius: 4px; font-size: 10px; opacity: 0.7; }
@media print { .inv-to__empty { display: none; } }

/* assets/css/ai.css */
/* ==========================================================================
   SofBill AI — chat assistant in the invoice editor
   Opens in the right column in place of the control panel (.editor[data-ai="on"]).
   ========================================================================== */

/* Toggle button in the panel header */
.ai-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; margin-right: 4px;
  border-radius: 99px; border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  background: linear-gradient(135deg, var(--accent-tint), color-mix(in srgb, var(--accent-2, var(--accent)) 14%, transparent));
  color: var(--accent); font-size: var(--fs-sm); font-weight: 700; cursor: pointer;
  transition: transform var(--dur), box-shadow var(--dur), background var(--dur);
}
.ai-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 25%, transparent); }
.ai-btn[aria-pressed="true"] { background: var(--accent); color: #fff; }

/* Right column swap */
.editor__ai { display: none; flex-direction: column; min-height: 0; padding: 0; overflow: hidden; }
.editor[data-ai="on"] .editor__ai { display: flex; }
.editor[data-ai="on"] .editor__panel { display: none; }
@media (max-width: 1180px) { .editor__ai { order: -1; min-height: 70dvh; } }

/* Header */
.ai-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 18px; }
.ai-logo { display: grid; place-items: center; color: var(--accent); }
.ai-title { margin: 0; font-size: var(--fs-lg); font-weight: 800; }
.ai-badge { margin-left: auto; padding: 4px 12px; border-radius: 99px; background: var(--accent-tint); color: var(--accent); font-size: var(--fs-xs); font-weight: 700; }

/* Scroll area */
.ai-scroll { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px; overflow-y: auto; overscroll-behavior: contain; }
.ai-welcome { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--accent-tint); }
.ai-welcome h3 { margin: 0 0 4px; font-size: var(--fs-md, 1rem); font-weight: 800; }
.ai-welcome p { margin: 0; color: var(--tx72, var(--tx60)); font-size: var(--fs-sm); line-height: 1.45; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-chip {
  padding: 7px 14px; border-radius: 99px; border: 1px solid var(--border); background: var(--surface);
  color: var(--accent); font-size: var(--fs-sm); font-weight: 600; cursor: pointer; transition: background var(--dur), border-color var(--dur);
}
.ai-chip:hover { background: var(--accent-tint); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }

/* Messages */
.ai-msg { display: flex; gap: 8px; align-items: flex-start; animation: ai-in .22s var(--ease); }
.ai-msg--user { justify-content: flex-end; }
.ai-av { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accent-tint); color: var(--accent); }
.ai-col { min-width: 0; flex: 1; display: grid; gap: 8px; }
.ai-bubble { position: relative; max-width: 100%; padding: 10px 12px 8px; border-radius: var(--radius-lg); font-size: var(--fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
.ai-msg--user .ai-bubble { max-width: 88%; background: var(--accent-tint); color: var(--txt); border-bottom-right-radius: 4px; }
.ai-msg--bot .ai-bubble { border: 1px solid var(--border); background: var(--surface); border-top-left-radius: 4px; }
.ai-bubble time { display: block; margin-top: 4px; text-align: right; font-size: .6875rem; color: var(--tx45); }
.ai-after { margin: 8px 0 0; color: var(--tx60); }
.ai-muted { margin: 0; color: var(--tx45); }
.ai-eg { margin: 8px 0 0; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-2); color: var(--tx72, var(--txt)); font-style: italic; }
.ai-warn { margin: 6px 0 0; padding: 6px 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); font-size: var(--fs-xs); }
.ai-list { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ai-cust { margin: 8px 0 0; display: grid; }
.ai-cust small { color: var(--tx60); }

/* Typing */
.ai-typing { display: flex; gap: 4px; padding: 14px 14px; }
.ai-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--tx45); animation: ai-dot 1s infinite; }
.ai-typing i:nth-child(2) { animation-delay: .15s; }
.ai-typing i:nth-child(3) { animation-delay: .3s; }

/* Invoice summary card */
.ai-sum { margin-top: 8px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface); }
.ai-sum__ok { display: flex; align-items: center; gap: 8px; margin: 0; padding: 9px 12px; background: color-mix(in srgb, var(--pos) 14%, transparent); color: var(--pos); font-weight: 700; }
.ai-sum__ok .icon { padding: 2px; border-radius: 50%; background: var(--pos); color: #fff; box-sizing: content-box; }
.ai-sum__body { display: grid; gap: 10px; padding: 10px 12px 12px; }
.ai-row { display: flex; justify-content: space-between; gap: 12px; }
.ai-row span { color: var(--tx60); }
.ai-row b { font-variant-numeric: tabular-nums; text-align: right; }
.ai-items { display: grid; gap: 8px; }
.ai-item { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.ai-item__img { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; overflow: hidden; background: var(--surface-2); font-style: normal; font-weight: 700; color: var(--tx60); }
.ai-item__img img { width: 100%; height: 100%; object-fit: cover; }
.ai-item__img i { font-style: normal; }
.ai-item__name small { color: var(--tx60); margin-left: 4px; }
.ai-item b { font-variant-numeric: tabular-nums; }
.ai-tot { display: grid; gap: 4px; padding-top: 10px; border-top: 1px solid var(--border); }
.ai-row--grand { margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--border); font-size: 1.0625rem; }
.ai-row--grand span { color: var(--txt); font-weight: 800; }
.ai-row--grand b { color: var(--accent); font-size: 1.25rem; }

/* Action buttons under a message */
.ai-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ai-acts--wrap { display: flex; flex-wrap: wrap; }
.ai-act {
  padding: 9px 12px; border-radius: var(--radius-md); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--surface);
  color: var(--accent); font-size: var(--fs-sm); font-weight: 700; cursor: pointer; transition: background var(--dur), transform var(--dur);
}
.ai-act:hover { background: var(--accent-tint); }
.ai-act--primary { grid-column: 1 / -1; background: var(--accent); border-color: var(--accent); color: #fff; }
.ai-act--primary:hover { background: var(--accent-hover, var(--accent)); filter: brightness(1.07); }
.ai-acts--wrap .ai-act--primary { grid-column: auto; }
.ai-acts.is-done { opacity: .45; pointer-events: none; }

/* Composer */
.ai-composer { margin: 0 14px 14px; padding: 10px 12px 8px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); transition: border-color var(--dur), box-shadow var(--dur); }
.ai-composer:focus-within { border-color: var(--accent); box-shadow: var(--focus-ring); }
.ai-composer textarea { display: block; width: 100%; min-height: 24px; max-height: 120px; padding: 2px 0; border: 0; outline: 0; resize: none; background: transparent; color: var(--txt); font: inherit; font-size: var(--fs-sm); line-height: 1.5; }
.ai-composer__bar { display: flex; align-items: center; gap: 4px; margin-top: 6px; }
.ai-composer__bar .icon-btn { color: var(--tx60); }
.ai-composer__bar .icon-btn.is-live { color: var(--neg); animation: ai-pulse 1s infinite; }
.ai-send { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border-radius: 50%; background: var(--accent); color: #fff; cursor: pointer; transition: transform var(--dur), filter var(--dur); }
.ai-send:hover { transform: scale(1.06); filter: brightness(1.08); }

@keyframes ai-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ai-dot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
@keyframes ai-pulse { 50% { opacity: .45; } }
@media print { .editor__ai, .ai-btn { display: none !important; } }

/* Icon-only AI button in the panel header (keeps the title row uncluttered) */
.ep-tools .ai-btn { width: 34px; height: 34px; padding: 0; margin: 0 2px 0 0; justify-content: center; border-radius: var(--radius-md); }
.ep-tools .ai-btn .icon { flex: none; }

/* Composer: one clean focus ring on the whole box, never on the textarea inside it */
.ai-composer { padding: 12px 14px 10px; border-radius: 16px; background: var(--surface-2); box-shadow: 0 1px 2px rgb(0 0 0 / .06); }
.ai-composer:focus-within { border-color: color-mix(in srgb, var(--accent) 70%, transparent); background: var(--surface); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }
.ai-composer textarea,
.ai-composer textarea:hover,
.ai-composer textarea:focus,
.ai-composer textarea:focus-visible {
  padding: 2px 0; border: 0 !important; border-radius: 0; outline: 0 !important; box-shadow: none !important; background: transparent !important;
  caret-color: var(--accent);
}
.ai-composer textarea::placeholder { color: var(--tx45); }
.ai-composer__bar { margin-top: 8px; }
.ai-composer__bar .icon-btn { width: 34px; height: 34px; border-radius: 10px; }
.ai-composer__bar .icon-btn:hover { background: var(--accent-tint); color: var(--accent); }
.ai-send { width: 38px; height: 38px; box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 35%, transparent); }
.ai-send:focus-visible, .ai-composer__bar .icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Eye-catching AI button: flowing gradient, soft pulsing halo and a twinkling sparkle */
.ep-tools .ai-btn {
  position: relative; isolation: isolate; overflow: visible; color: #fff; border-color: transparent;
  background: linear-gradient(120deg, var(--accent), oklch(0.62 0.17 295), oklch(0.7 0.14 200), var(--accent));
  background-size: 300% 300%;
  animation: ai-flow 5s ease-in-out infinite;
}
.ep-tools .ai-btn::before {
  content: ""; position: absolute; inset: -4px; z-index: -1; border-radius: calc(var(--radius-md) + 4px);
  background: inherit; filter: blur(9px); opacity: .55; animation: ai-halo 2.4s ease-in-out infinite;
}
.ep-tools .ai-btn .icon { animation: ai-twinkle 2.4s ease-in-out infinite; }
.ep-tools .ai-btn:hover { transform: translateY(-1px) scale(1.06); }
.ep-tools .ai-btn[aria-pressed="true"] { animation: none; background: var(--accent); }
.ep-tools .ai-btn[aria-pressed="true"]::before, .ep-tools .ai-btn[aria-pressed="true"] .icon { animation: none; opacity: 0; }
.ep-tools .ai-btn[aria-pressed="true"] .icon { opacity: 1; }

@keyframes ai-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes ai-halo { 0%, 100% { opacity: .3; transform: scale(.96); } 50% { opacity: .75; transform: scale(1.1); } }
@keyframes ai-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 45% { transform: scale(1.22) rotate(14deg); } 70% { transform: scale(.94) rotate(-6deg); } }
@media (prefers-reduced-motion: reduce) {
  .ep-tools .ai-btn, .ep-tools .ai-btn::before, .ep-tools .ai-btn .icon { animation: none; }
}

/* Settings → AI assistant → Company AI */
.cai-h { margin: 18px 0 6px; font-size: var(--fs-md, 1rem); }
.cai-h small { color: var(--tx60); font-weight: 500; }
.cai-list { display: grid; gap: 8px; margin: 8px 0; }
.cai-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid var(--line, rgba(0,0,0,.08)); border-radius: var(--radius-sm, 8px); background: var(--surface); }
.cai-row.is-off { opacity: .6; }
.cai-n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); font-weight: 700; font-size: .8rem; flex: none; }
.cai-main { flex: 1 1 220px; min-width: 0; display: grid; gap: 2px; }
.cai-main small { color: var(--tx60); overflow-wrap: anywhere; }
.cai-err { color: var(--neg) !important; }
.cai-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cai-form { margin: 10px 0; padding: 14px; border: 1px dashed var(--accent); border-radius: var(--radius-sm, 8px); }
.cai-form h4 { margin: 0 0 10px; }

/* assets/css/chat.css */
/* ==========================================================================
   Team chat (ui/team-chat.js) — the Team chat page and the chat popup.
   Conversations on the left, the conversation on the right; compact = one pane at a time.
   ========================================================================== */

.tc-page {
  height: calc(100dvh - var(--topbar-h) - 2 * var(--gutter));
  min-height: 460px;
}

.tc {
  --tc-side: 320px;
  --tc-canvas: color-mix(in oklab, var(--bg) 70%, var(--surface));
  --tc-mine: var(--accent);
  --tc-mine-fg: var(--accent-fg);
  position: relative;
  display: grid;
  grid-template-columns: var(--tc-side) minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* ---------- conversations ---------- */

.tc-side {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--border);
  background: var(--surface);
}
.tc-side__head { display: flex; align-items: baseline; gap: 8px; padding: 16px 16px 10px; }
.tc-side__title { margin: 0; font-size: var(--fs-xl); font-weight: 700; letter-spacing: -0.01em; }
.tc-side__count { font-size: var(--fs-xs); font-weight: 600; color: var(--accent); }

.tc-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 12px 10px;
  padding: 0 10px;
  height: 38px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--tx45);
  transition: border-color var(--dur), background var(--dur);
}
.tc-search:focus-within { border-color: var(--accent); background: var(--input-bg); box-shadow: var(--focus-ring); }
.tc .tc-search input, .tc .tc-search input:focus-visible, .tc .tc-search input:focus, .tc .tc-find input, .tc .tc-find input:focus, .tc .tc-find input:focus-visible { height: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none; outline: 0; }
.tc-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; color: var(--txt); font: inherit; font-size: var(--fs-md); }
.tc-search input::-webkit-search-cancel-button { display: none; }
.tc-search__x { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--tx60); }
.tc-search__x:hover { background: var(--surface-hover); }

.tc-rooms { flex: 1; min-height: 0; overflow-y: auto; padding: 0 8px 10px; overscroll-behavior: contain; }
.tc-rooms__label { margin: 14px 10px 6px; font-size: var(--fs-xs); font-weight: 700; color: var(--tx45); }
.tc-empty-list { margin: 16px 10px; font-size: var(--fs-sm); color: var(--tx45); }

.tc-room, .tc-hit {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 12px;
  text-align: left;
  color: var(--txt);
}
.tc-room:hover, .tc-hit:hover { background: var(--surface-hover); }
.tc-room:focus-visible, .tc-hit:focus-visible { outline: 0; box-shadow: var(--focus-ring); }
.tc-room.is-active { background: var(--accent-tint-strong); }
.tc-room__main { display: grid; gap: 2px; flex: 1; min-width: 0; }
.tc-room__top, .tc-room__bottom { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tc-room__top b { flex: 0 1 auto; overflow: hidden; font-size: var(--fs-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.tc-room__top time { margin-left: auto; flex: none; font-size: 0.6875rem; color: var(--tx45); }
.tc-room__last { flex: 1; overflow: hidden; font-size: var(--fs-sm); color: var(--tx60); text-overflow: ellipsis; white-space: nowrap; }
.tc-room.is-unread .tc-room__top b { font-weight: 700; }
.tc-room.is-unread .tc-room__last { color: var(--txt); font-weight: 500; }
.tc-room.is-unread .tc-room__top time { color: var(--accent); font-weight: 600; }
.tc-badge {
  flex: none;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--accent-fg);
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
.tc-tag { flex: none; padding: 0 6px; border-radius: 6px; background: var(--surface-2); font-size: 0.625rem; color: var(--tx45); }

.tc-hit { display: grid; gap: 3px; }
.tc-hit__top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tc-hit__top b { font-size: var(--fs-sm); }
.tc-hit__top small { overflow: hidden; font-size: 0.6875rem; color: var(--tx45); text-overflow: ellipsis; white-space: nowrap; }
.tc-hit__text { display: -webkit-box; overflow: hidden; font-size: var(--fs-sm); color: var(--tx72); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.tc mark { padding: 0 1px; border-radius: 3px; background: color-mix(in oklab, var(--warn) 32%, transparent); color: inherit; }

/* ---------- avatars ---------- */

.tc-av {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: oklch(0.62 0.11 var(--h));
  color: oklch(0.99 0.01 var(--h));
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
}
[data-theme="dark"] .tc-av { background: oklch(0.5 0.1 var(--h)); }
.tc-av--sm { width: 30px; height: 30px; font-size: 0.6875rem; }
.tc-av-gap { flex: none; width: 30px; }
.tc-dot {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 11px;
  height: 11px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--border-strong);
}
.tc-dot.is-on { background: var(--pos); }

/* ---------- conversation ---------- */

.tc-main { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--tc-canvas); }
.tc-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 64px;
  padding: 10px 14px 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.tc-head__who { display: grid; flex: 1; min-width: 0; line-height: 1.3; }
.tc-head__who b { overflow: hidden; font-size: var(--fs-lg); text-overflow: ellipsis; white-space: nowrap; }
.tc-head__who small { font-size: var(--fs-xs); color: var(--tx60); }
.tc-online { color: var(--pos); font-weight: 600; }
.tc-back { display: none; }

.tc-find {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  color: var(--tx45);
}
.tc-find[hidden] { display: none; }
.tc-find input { flex: 1; min-width: 0; height: 32px; border: 0; outline: 0; background: none; color: var(--txt); font: inherit; font-size: var(--fs-sm); }
.tc-find__n { font-size: var(--fs-xs); white-space: nowrap; }

.tc-log {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  padding: 8px clamp(12px, 3vw, 28px) 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-padding: 48px 0;
}
.tc-log:focus-visible { outline: 0; box-shadow: inset var(--focus-ring); }

.tc-day {
  position: sticky;
  top: 4px;
  z-index: 2;
  display: flex;
  justify-content: center;
  margin: 14px 0 8px;
  pointer-events: none;
}
.tc-day span {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--tx60);
}
.tc-new { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; color: var(--neg); font-size: 0.6875rem; font-weight: 700; }
.tc-new::before, .tc-new::after { content: ""; flex: 1; border-top: 1px solid color-mix(in oklab, var(--neg) 45%, transparent); }

.tc-msg { position: relative; display: flex; align-items: flex-end; gap: 8px; max-width: min(78%, 620px); margin-top: 10px; }
.tc-msg.is-cont { margin-top: 2px; }
.tc-msg--me { flex-direction: row-reverse; align-self: flex-end; }
.tc-msg__col { display: grid; min-width: 0; }
.tc-msg--me .tc-msg__col { justify-items: end; }
.tc-msg__from { margin: 0 0 3px 12px; font-size: 0.75rem; font-weight: 700; color: oklch(0.5 0.12 var(--h)); }
[data-theme="dark"] .tc-msg__from { color: oklch(0.78 0.1 var(--h)); }

.tc-bubble {
  position: relative;
  min-width: 64px;
  padding: 7px 12px 6px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: var(--fs-md);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.tc-msg:not(.tc-msg--me):not(.is-cont) .tc-bubble { border-top-left-radius: 6px; }
.tc-msg--me .tc-bubble { border-color: transparent; background: var(--tc-mine); color: var(--tc-mine-fg); }
.tc-msg--me:not(.is-cont) .tc-bubble { border-top-right-radius: 6px; }
.tc-text { white-space: pre-wrap; }
.tc-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tc-text--gone { display: flex; align-items: center; gap: 6px; font-style: italic; color: var(--tx45); }
.tc-msg--me .tc-text--gone { color: color-mix(in oklab, var(--tc-mine-fg) 75%, transparent); }
.tc-msg.is-emoji .tc-bubble { padding: 0 2px; border: 0; background: none; box-shadow: none; color: var(--txt); }
.tc-text--emoji { font-size: 2.25rem; line-height: 1.2; }

.tc-meta {
  display: inline-flex;
  float: right;
  align-items: center;
  gap: 3px;
  margin: 6px 0 -2px 10px;
  font-size: 0.6875rem;
  line-height: 1;
  color: var(--tx45);
  white-space: nowrap;
}
.tc-msg--me .tc-meta { color: color-mix(in oklab, var(--tc-mine-fg) 78%, transparent); }
.tc-msg.is-emoji .tc-meta { float: none; display: flex; justify-content: flex-end; color: var(--tx45); }
.tc-st { display: inline-grid; }

.tc-quote {
  display: grid;
  gap: 1px;
  width: 100%;
  margin: 1px 0 6px;
  padding: 5px 9px;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-tint);
  text-align: left;
  color: inherit;
  font-size: var(--fs-sm);
}
.tc-quote b { font-size: 0.75rem; color: var(--accent); }
.tc-quote span { overflow: hidden; color: var(--tx72); text-overflow: ellipsis; white-space: nowrap; }
.tc-msg--me .tc-quote { border-left-color: var(--tc-mine-fg); background: color-mix(in oklab, var(--tc-mine-fg) 16%, transparent); }
.tc-msg--me .tc-quote b, .tc-msg--me .tc-quote span { color: var(--tc-mine-fg); }

/* message actions: on hover / keyboard focus */
.tc-acts {
  display: flex;
  align-self: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s;
}
.tc-acts button { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; color: var(--tx60); }
.tc-acts button:hover { background: var(--surface-hover); color: var(--txt); }
.tc-acts [data-act="delete"]:hover { color: var(--neg); }
.tc-msg:hover .tc-acts, .tc-msg:focus-within .tc-acts { opacity: 1; pointer-events: auto; }
@media (hover: none) {
  .tc-msg:hover .tc-acts, .tc-msg:focus-within .tc-acts { opacity: 0; pointer-events: none; }
  .tc-msg.is-open .tc-acts { opacity: 1; pointer-events: auto; }
}

.tc-msg.is-hit .tc-bubble { box-shadow: 0 0 0 2px var(--warn); }
.tc-msg.is-flash .tc-bubble { animation: tc-flash 1.4s var(--ease); }
@keyframes tc-flash { 0%, 40% { box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 45%, transparent); } }

.tc-empty { display: grid; justify-items: center; gap: 4px; margin: auto; padding: 24px; max-width: 340px; text-align: center; color: var(--tx60); font-size: var(--fs-sm); }
.tc-empty .tc-av { width: 64px; height: 64px; margin-bottom: 8px; }
.tc-empty p { margin: 0; }
.tc-empty b { color: var(--txt); font-size: var(--fs-md); }

.tc-jump {
  position: absolute;
  right: 20px;
  bottom: 96px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  min-width: 38px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: 19px;
  background: var(--surface);
  box-shadow: var(--shadow-pop);
  color: var(--txt);
  font-size: var(--fs-xs);
  font-weight: 700;
}
.tc-jump[hidden] { display: none; }
.tc-jump.has-new { border-color: transparent; background: var(--accent); color: var(--accent-fg); }

/* ---------- composer ---------- */

.tc-compose { padding: 10px 14px 8px; border-top: 1px solid var(--border); background: var(--surface); }
.tc-compose__row { display: flex; align-items: flex-end; gap: 8px; }
.tc-input {
  flex: 1;
  min-width: 0;
  min-height: 42px;
  max-height: 160px;
  padding: 10px 14px;
  border: 1px solid var(--input-border);
  border-radius: 21px;
  outline: 0;
  background: var(--input-bg);
  color: var(--txt);
  font: inherit;
  font-size: var(--fs-md);
  line-height: 1.4;
  resize: none;
}
.tc-input:focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.tc-input:disabled { background: var(--surface-2); cursor: not-allowed; }
.tc-send {
  display: grid;
  place-items: center;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-fg);
  box-shadow: var(--shadow-primary);
  transition: background var(--dur), opacity var(--dur), transform 0.12s;
}
.tc-send:hover:not(:disabled) { background: var(--accent-hover); }
.tc-send:active:not(:disabled) { transform: scale(0.94); }
.tc-send:disabled { opacity: 0.4; box-shadow: none; cursor: default; cursor: not-allowed; filter: grayscale(1); }
.tc-compose__hint { margin: 5px 4px 0; font-size: 0.6875rem; color: var(--tx45); }
.tc-compose__hint kbd { padding: 0 4px; border: 1px solid var(--border); border-radius: 4px; background: var(--surface-2); font: inherit; font-size: 0.625rem; }
.tc-warn { color: var(--neg); font-weight: 600; }
.tc-ctx {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 6px 6px 6px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--accent-tint);
  color: var(--accent);
}
.tc-ctx[hidden] { display: none; }
.tc-ctx div { display: grid; flex: 1; min-width: 0; font-size: var(--fs-sm); }
.tc-ctx b { font-size: 0.75rem; }
.tc-ctx span { overflow: hidden; color: var(--tx72); text-overflow: ellipsis; white-space: nowrap; }

/* ---------- compact: popup and phones — one pane at a time ---------- */

.tc--compact { grid-template-columns: minmax(0, 1fr); border: 0; border-radius: 0; box-shadow: none; }
.tc--compact[data-view="room"] .tc-side,
.tc--compact[data-view="list"] .tc-main { display: none; }
.tc--compact .tc-side { border-right: 0; }
.tc--compact .tc-back { display: inline-grid; }
.tc--compact .tc-head { padding-left: 8px; padding-right: 88px; }
.tc--compact .tc-side__head { padding-right: 88px; }
.tc--compact .tc-msg { max-width: 88%; }
.tc--compact .tc-compose__hint { display: none; }
.tc--compact .tc-jump { bottom: 76px; }

@media (max-width: 860px) {
  .tc-page { height: calc(100dvh - var(--topbar-h) - 24px); }
  .tc:not(.tc--compact) { grid-template-columns: minmax(0, 1fr); }
  .tc:not(.tc--compact) .tc-side { display: none; }
  .tc:not(.tc--compact) .tc-back { display: inline-grid; }
  .tc:not(.tc--compact)[data-view="list"] .tc-side { display: flex; border-right: 0; }
  .tc:not(.tc--compact)[data-view="list"] .tc-main { display: none; }
  .tc-msg { max-width: 88%; }
  .tc-compose__hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tc-msg.is-flash .tc-bubble { animation: none; box-shadow: 0 0 0 3px var(--accent); }
  .tc-acts, .tc-send, .tc-search { transition: none; }
}
.tc-note { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 6px 10px; border-radius: 8px; background: var(--surface-2); font-size: var(--fs-xs); color: var(--tx60); }
.tc-note[hidden] { display: none; }
.tc-note.is-err { background: color-mix(in oklab, var(--neg) 10%, var(--surface)); color: var(--neg); }

/* assets/css/print.css */
/* ==========================================================================
   Print: only the invoice sheet (copied into #print-root) goes to paper / PDF.
   ========================================================================== */

#print-root { display: none; }

@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html, body {
    width: auto;
    background: #fff !important;
  }

  body > *:not(#print-root) { display: none !important; }

  #print-root { display: block !important; overflow: visible !important; }
  #print-root .print-doc--thermal,
  #print-root .tr { width: 100%; max-width: 100%; overflow: visible; height: auto; }

  #print-root .inv-doc { display: block; width: 210mm; }

  /* One A4 sheet per printed page. */
  #print-root .inv-sheet {
    width: 210mm;
    height: 297mm;
    min-height: 0;
    break-after: page;
    page-break-after: always;
    box-shadow: none;
    transform: none !important;
  }

  #print-root .inv-sheet:last-child { break-after: auto; page-break-after: auto; }

  /* Statements, receipts and reports: as long as their content, at least one page. */
  #print-root .pd-sheet {
    height: auto;
    min-height: calc(297mm - 12mm);
    overflow: visible;
    break-after: auto;
    page-break-after: auto;
  }
  #print-root .pd-sheet.pd-sheet--fit { min-height: 0; height: auto; }
  #print-root .pd-sheet .pd-table tr { break-inside: avoid; }
  #print-root .pd-sheet .pd-table thead { display: table-header-group; }

  .no-print { display: none !important; }

  /* "Powered by" stays on screen only; a multi-page invoice still prints its page numbers. */
  #print-root .inv-powered__by { display: none; }
  #print-root .inv-powered:not(:has(.inv-powered__page)) { display: none; }
}

/* Price / Qty / Total columns stay right-aligned on paper and in PDF */
@media print {
  #print-root .inv-table th:nth-child(n + 2),
  #print-root .inv-table td:nth-child(n + 2) { text-align: right !important; }
}

/* Direct PDF download (ui/pdf.js): the same pages laid out off screen, then drawn into the PDF. */
.pdf-stage { position: fixed; top: 0; left: -10000px; width: 210mm; background: #fff; color: #000; pointer-events: none; }
.pdf-stage .inv-doc { display: block; width: 210mm; }
.pdf-stage .inv-sheet { width: 210mm; height: 297mm; min-height: 0; margin: 0; box-shadow: none; transform: none !important; }
.pdf-stage .pd-sheet { height: auto; min-height: 297mm; overflow: visible; }
.pdf-stage .pd-sheet.pd-sheet--fit { min-height: 0; height: auto; }
.pdf-stage .no-print, .pdf-stage .inv-powered__by { display: none !important; }
.pdf-stage .inv-powered:not(:has(.inv-powered__page)) { display: none; }
.pdf-stage .inv-table th:nth-child(n + 2), .pdf-stage .inv-table td:nth-child(n + 2) { text-align: right !important; }
/* The PDF drawer measures text word by word: tabular digits and kerning there leave stray gaps ("INV- 1001"). */
.pdf-stage, .pdf-stage * { font-variant-numeric: normal !important; font-kerning: none !important; }

/* assets/css/hallmark.css */
/* Hallmark · v2.0.0 · redesign: restyle · scope: app · shape: app screen · genre: modern-minimal · theme: brand (SoftBill blue, Inter, the navy sidebar) · out of scope by request: the invoice editor, the invoice sheet and printed documents */
/* critique: the gradient top band, tracked-capital labels and dotted status pills read as a template; the navy sidebar, the blue accent, the tables and the forms carry the product and stay */
/* waive 24b · the app keeps its 2px-step spacing: re-spacing thirty working screens would move every table and form the team already knows */
/* waive 48 · colour literals left in editor.css, invoice.css, ai.css and print.css belong to the invoice editor and printed documents, out of scope by request; this file uses tokens only */
/* waive 62 · a signed-in single-page app: every screen is drawn by script; the two hover-revealed panels already show at rest on touch screens (hover: none) */
/* waive 34 for .popover and .qs__pop · they hang off a small button (position: absolute), so a percentage width would shrink them to the button; they are capped at the viewport width instead */
/* waive 56 · the sidebar and the top bar are sticky in different scroll containers (the sidebar column and the main column), they never stack */
/* waive 67 for .print-doc and .tr-title · printed receipts and statements, out of scope by request */

/* ---------- Floor 4: no sideways page scroll, without breaking sticky bars ---------- */
html { overflow-x: clip; }

/* ---------- Logo: a link home ---------- */
.sidebar__home { display: inline-flex; align-items: center; min-width: 0; border-radius: var(--radius-sm); text-decoration: none; }
.sidebar__home:hover { opacity: 0.9; }
.sidebar__home:focus-visible { outline: 2px solid var(--chrome-accent); outline-offset: 3px; }

/* ---------- Floor 9: labels in the body face, a step smaller, sentence case (fixed in the source rules) ---------- */
.table th { font-size: var(--fs-sm); font-weight: 600; color: var(--tx60); }
.kpi__label { font-size: var(--fs-xs); font-weight: 600; color: var(--tx60); }
.nav-group__label { font-size: var(--fs-xs); font-weight: 600; }
.pf-row--head, .alloc__row--head, .line-ed__row--head { font-size: var(--fs-xs); font-weight: 600; color: var(--tx60); }

/* ---------- Floor 10: status pills without decorative dots (the editor's own pickers keep theirs) ---------- */
.badge:not(.editor *)::before { display: none; }

/* ---------- Floor 6: focus rings appear at once, never fade in ---------- */
:focus-visible:not(.editor *) { transition-property: none !important; }

/* ---------- Motion is state, never decoration: no hover lifts or zooms on cards ---------- */
.rcard:hover, .plan:hover { transform: none; }
.rcard:hover .rcard__art > img, .pcard:not(.editor *):hover .pcard__art > img { transform: none; }

/* ---------- Phones ---------- */
@media (max-width: 640px) {
  /* Figures in a two-column grid instead of a sideways strip that cut the labels off. */
  .grid:is(.grid--kpi, .grid--kpi-3, .grid--kpi-6) {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
    margin: 0 0 12px; padding: 0; overflow: visible;
  }
  .grid:is(.grid--kpi, .grid--kpi-3, .grid--kpi-6) > .kpi { width: auto; max-width: none; min-width: 0; }
  .kpi__label { white-space: normal; }
  /* Filters wrap into two columns: every filter visible, none hidden off screen. */
  .filter-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; }
  .filter-row .field, .filter-row .field--date { min-width: 0; }
  .filter-row .btn { justify-content: center; }
  /* Table rows as cards: the label on the left, every value of the cell stacked on the right. */
  .table td:not(.t-actions) { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr); column-gap: 12px; align-items: baseline; justify-items: end; }
  .table td:not(.t-actions)::before { grid-row: 1; justify-self: start; }
  .table td:not(.t-actions) > * { grid-column: 2; }
}