/* ==========================================================================
   Invoice Builder — Design System Implementation
   Premium glass & gradient style. See DESIGN-SYSTEM.md.
   ========================================================================== */

/* ---- Fonts (self-hosted, see assets/fonts/dmsans/) ----
   DM Sans is a variable font — one file serves every weight below;
   each @font-face just pins a different point on its weight axis. */
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans/DMSans-Variable.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans/DMSans-Variable.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans/DMSans-Variable.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans/DMSans-Variable.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }

:root {
  --font-base: "DM Sans", -apple-system, "Segoe UI", sans-serif;

  --color-bg: #0A0E1B;
  --color-bg-soft: #F4F6FB;
  --gradient-primary: linear-gradient(135deg, #2F6FED 0%, #13205C 100%);
  --gradient-accent: linear-gradient(135deg, #5B9CFF 0%, #2F6FED 100%);
  /* Multi-hue premium wash behind the whole app: a deep navy base drifting
     through indigo and a hint of violet, rather than one flat color. */
  --gradient-mesh-wash: linear-gradient(160deg, #0A0E1B 0%, #0D1330 45%, #0F1233 72%, #0A0E1F 100%);
  --gradient-popup: linear-gradient(165deg, rgba(32, 42, 74, 0.94) 0%, rgba(19, 24, 43, 0.92) 55%, rgba(26, 21, 56, 0.92) 100%);

  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.18);
  --glass-blur: 12px;

  --paper-bg: #FFFFFF;
  --paper-border: rgba(17, 24, 39, 0.06);

  --text-primary: #0F172A;
  --text-secondary: #475569;
  --text-muted: #94A3B8;
  --text-on-dark: #F8FAFC;
  --text-on-dark-muted: rgba(248, 250, 252, 0.64);

  --success: #10B981;
  --success-bg: #ECFDF5;
  --success-border: #A7F3D0;
  --warning: #F59E0B;
  --warning-bg: #FFFBEB;
  --warning-border: #FDE68A;
  --danger: #EF4444;
  --danger-bg: #FEF2F2;
  --danger-border: #FECACA;

  --shadow-soft: 0 6px 20px rgba(15, 23, 42, 0.10);
  --shadow-glow: 0 6px 24px rgba(47, 111, 237, 0.26);
  /* Tighter radii read as precise/fintech-premium (Stripe, Linear, Mercury
     sit in the 8-12px range); the old 22px on cards leaned consumer-app
     "friendly" rather than the crisp, engineered feel that was asked for. */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --text-hero: 700 24px/1.2 var(--font-base);
  --text-h2: 700 16px/1.3 var(--font-base);
  --text-body: 400 14px/1.5 var(--font-base);
  --text-small: 400 12.5px/1.4 var(--font-base);
  --text-label: 500 11px/1.3 var(--font-base);
  --text-money: 700 14.5px/1.3 var(--font-base);
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font-base);
  font-size: 14px;
  color: var(--text-on-dark);
  background: var(--gradient-mesh-wash);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, p, dl, dd { margin: 0; }
button { font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Kill the native up/down spinner on every number input in the app
   (item qty/price, discount, tax, payment amount, etc.) — it's the
   browser's own unstyled control and doesn't match anything else here. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; }
img { max-width: 100%; display: block; }

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

:focus-visible {
  outline: 2px solid #60A5FA;
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- Background mesh ---- */
.bg-mesh {
  position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--gradient-mesh-wash);
}
/* Static by design — these used to drift forever via an infinite transform
   animation. Every backdrop-filter layer in the app (header, buttons,
   editor cards, modals) sits on top of this and has to re-sample whatever
   is moving underneath on every single frame, forever, even at total idle.
   A moving blur behind several stacked blurred glass panels is one of the
   most expensive things you can ask a browser to composite continuously;
   holding the blobs still turns that into a one-time paint.
   Four distinct hues (blue / violet / teal / indigo) instead of three
   shades of the same blue — reads as a deliberate premium mesh gradient
   rather than a single tinted glow. */
.bg-mesh__blob {
  position: absolute;
  width: 38vw; height: 38vw;
  min-width: 320px; min-height: 320px;
  border-radius: 50%;
  filter: blur(64px);
  opacity: 0.32;
}
.bg-mesh__blob--a { top: -12%; left: -8%; background: #2F6FED; }
.bg-mesh__blob--b { bottom: -16%; right: -10%; background: #7C3AED; opacity: 0.28; }
.bg-mesh__blob--c { top: 26%; right: 12%; width: 30vw; height: 30vw; min-width: 260px; min-height: 260px; background: #06B6D4; opacity: 0.20; }
.bg-mesh__blob--d { bottom: 8%; left: 6%; width: 28vw; height: 28vw; min-width: 240px; min-height: 240px; background: #4338CA; opacity: 0.26; }

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ---- App shell ---- */
.app-shell { position: relative; z-index: 1; min-height: 100%; display: flex; flex-direction: column; }
.app-shell[hidden] { display: none; }

.app-header {
  position: sticky; top: 12px; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  width: calc(100% - clamp(32px, 8vw, 80px));
  max-width: 620px;
  margin: 12px auto 0;
  padding: 9px clamp(14px, 3vw, 22px);
  background: rgba(11, 18, 32, 0.68);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: 0 6px 24px rgba(47, 111, 237, 0.14), inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-soft);
}
.app-header__brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--gradient-primary);
  box-shadow: var(--shadow-glow);
  overflow: hidden;
  flex: none;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; display: block; }
.app-header__title { font: var(--text-h2); font-size: 15.5px; letter-spacing: -0.01em; color: var(--text-on-dark); }
.app-header__actions { display: flex; align-items: center; gap: 6px; }

/* ---- Buttons ----
   No borders on any button — flat fills / tints carry the shape instead
   of a stroke. In exchange every button gets a matching hover "lift":
   a diagonal light sweep (the ::after sheen below) plus a small
   raise+scale, so the interaction still feels tactile without a ring. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  position: relative; overflow: hidden; isolation: isolate;
  height: 36px; padding: 0 14px;
  border-radius: var(--radius-sm);
  border: none;
  font: var(--text-label);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0;
  cursor: pointer;
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1), box-shadow 220ms ease, background 200ms ease, opacity 150ms ease;
  white-space: nowrap;
  min-height: 44px;
}
@media (min-width: 640px) { .btn { min-height: 36px; } }

/* Keep label/icon above the sheen sweep. */
.btn > svg, .btn > span { position: relative; z-index: 1; }

.btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.45) 48%, rgba(255,255,255,0.45) 54%, transparent 72%);
  transform: translateX(-140%);
  transition: transform 650ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(140%); }
.btn:active { transform: scale(0.97) !important; }

.btn--primary {
  background: var(--gradient-primary);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn--primary:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 12px 36px rgba(47, 111, 237, 0.42); }

.btn--secondary {
  /* Flat tint, not backdrop-filter: this button is small and re-rendered
     often (hover/press), so it isn't worth its own blur compositing layer
     on top of the ones already covering the header and editor cards. */
  background: rgba(255, 255, 255, 0.11);
  color: var(--text-on-dark);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn--secondary:hover { transform: translateY(-2px) scale(1.015); background: var(--glass-bg-strong); box-shadow: 0 10px 24px rgba(0,0,0,0.28), inset 0 1px 0 rgba(255,255,255,0.12); }

.btn--ghost {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-on-dark);
}
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 22px rgba(0,0,0,0.24); }

.btn--danger-ghost { color: #FCA5A5; background: rgba(239, 68, 68, 0.08); }
.btn--danger-ghost:hover { background: rgba(239, 68, 68, 0.18); transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 22px rgba(239,68,68,0.22); }

.btn--danger { background: var(--danger); color: #fff; }
.btn--danger:hover { transform: translateY(-2px) scale(1.015); box-shadow: 0 10px 24px rgba(239,68,68,0.35); }

.btn--icon { width: 36px; padding: 0; }
.btn--full { width: 100%; }
.btn--small { height: 30px; padding: 0 11px; font-size: 11.5px; min-height: 34px; }
@media (min-width: 640px) { .btn--small { min-height: 30px; } }

.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }
.btn:disabled::after { display: none; }
.btn svg { flex: none; }

.link-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #8FB8FF; font: var(--text-small); font-weight: 600;
  text-decoration: none;
  min-height: 32px;
}
.link-btn:hover { text-decoration: underline; }
.link-btn--danger { color: #FCA5A5; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden; isolation: isolate;
  width: 32px; height: 32px; min-width: 44px; min-height: 44px;
  border-radius: 9px; border: none; background: transparent;
  color: inherit; cursor: pointer;
  transition: transform 200ms cubic-bezier(.34,1.56,.64,1), background 150ms ease, color 150ms ease;
}
@media (min-width: 640px) { .icon-btn { min-width: 32px; min-height: 32px; } }
.icon-btn::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.4) 48%, rgba(255,255,255,0.4) 54%, transparent 72%);
  transform: translateX(-140%);
  transition: transform 550ms cubic-bezier(.22,1,.36,1);
  pointer-events: none;
}
.icon-btn > svg { position: relative; z-index: 1; }
.icon-btn:hover { background: rgba(255,255,255,0.12); transform: translateY(-1px) scale(1.08); }
.icon-btn:hover::after { transform: translateX(140%); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn--danger:hover { background: rgba(239,68,68,0.16); color: #FCA5A5; }

/* ---- Mobile edit/preview toggle ---- */
.mobile-toggle {
  display: none;
  position: sticky; top: 92px; z-index: 20;
  margin: 12px auto 0; padding: 4px;
  width: max-content;
  gap: 4px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
}
.mobile-toggle__btn {
  border: none; background: transparent; color: var(--text-on-dark-muted);
  padding: 7px 18px; min-height: 44px; border-radius: 999px; cursor: pointer;
  font: var(--text-label); font-size: 12.5px; font-weight: 600;
  transition: background 150ms ease, color 150ms ease;
}
.mobile-toggle__btn.is-active { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-glow); }

/* ---- Layout ---- */
.layout {
  flex: 1;
  display: grid;
  gap: 20px;
  padding: 82px clamp(16px, 4vw, 40px) 48px;
  max-width: 1360px;
  width: 100%;
  margin: 0 auto;
  align-items: start;
}

@media (min-width: 1024px) {
  .layout { grid-template-columns: 45fr 55fr; }
  .preview-pane { position: sticky; top: 82px; max-height: calc(100vh - 104px); overflow-y: auto; }
}

/* One shared blur behind the whole stack of editor cards, instead of each
   card blurring independently — same frosted look, a fraction of the
   compositing cost (this sits above an always-animating background). */
.editor-pane {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-lg);
}
.preview-pane { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

/* ---- Glass card ---- */
.card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 14px;
  box-shadow: var(--shadow-soft);
}
@media (min-width: 640px) { .card { padding: 16px 18px; } }
.card__title { font: var(--text-h2); color: var(--text-on-dark); margin-bottom: 12px; }
.card__subtitle { font: var(--text-label); font-size: 12px; color: var(--text-on-dark); text-transform: none; }
.card__header-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card__header-row .card__title { margin-bottom: 0; }

/* ---- Collapsible card sections ---- */
.card__toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-width: 0;
  background: none; border: none; padding: 0; margin: 0;
  color: inherit; font: inherit; text-align: left;
  cursor: pointer;
}
.card__toggle:focus-visible { outline: 2px solid #4C8DFF; outline-offset: 5px; border-radius: 9px; }

/* Raised, gradient-lit tile — the inset highlight along the top edge and the
   darker inner shadow along the bottom are what read as a physical, 3D chip
   rather than a flat swatch. */
.card__toggle-icon {
  display: grid; place-items: center; flex: none;
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(145deg, #6BA5FF 0%, #2F6FED 48%, #1C47B0 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 4px 10px rgba(30, 80, 200, 0.42),
    0 1px 2px rgba(0,0,0,0.32);
  transition: transform 240ms cubic-bezier(.4,0,.2,1), box-shadow 240ms ease;
}
.card__toggle-icon svg { filter: drop-shadow(0 1px 1.5px rgba(10, 26, 70, 0.45)); }
.card__toggle:hover .card__toggle-icon {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 9px 20px rgba(30, 80, 200, 0.5),
    0 1px 2px rgba(0,0,0,0.32);
}
.card__toggle:active .card__toggle-icon { transform: translateY(0); }

/* Each card gets its own tile hue instead of all five sharing one blue —
   easier to tell the sections apart at a glance, and it echoes the
   multi-color mesh gradient used for the page background. Inset
   highlight/shadow stays the same for every color (that's what reads as
   "raised tile" regardless of hue); only the background and the colored
   outer glow change per section. */
.card__toggle-icon--from {
  background: linear-gradient(145deg, #C4A5FF 0%, #7C3AED 48%, #4C1D95 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 4px 10px rgba(124, 58, 237, 0.42),
    0 1px 2px rgba(0,0,0,0.32);
}
.card__toggle:hover .card__toggle-icon--from {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 9px 20px rgba(124, 58, 237, 0.5),
    0 1px 2px rgba(0,0,0,0.32);
}
.card__toggle-icon--to {
  background: linear-gradient(145deg, #7DF0DE 0%, #06B6D4 48%, #0E7490 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 4px 10px rgba(6, 182, 212, 0.42),
    0 1px 2px rgba(0,0,0,0.32);
}
.card__toggle:hover .card__toggle-icon--to {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 9px 20px rgba(6, 182, 212, 0.5),
    0 1px 2px rgba(0,0,0,0.32);
}
.card__toggle-icon--summary {
  background: linear-gradient(145deg, #85EFC0 0%, #10B981 48%, #065F46 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 4px 10px rgba(16, 185, 129, 0.42),
    0 1px 2px rgba(0,0,0,0.32);
}
.card__toggle:hover .card__toggle-icon--summary {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 9px 20px rgba(16, 185, 129, 0.5),
    0 1px 2px rgba(0,0,0,0.32);
}
.card__toggle-icon--notes {
  background: linear-gradient(145deg, #FDB4BE 0%, #F43F5E 48%, #9F1239 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 4px 10px rgba(244, 63, 94, 0.42),
    0 1px 2px rgba(0,0,0,0.32);
}
.card__toggle:hover .card__toggle-icon--notes {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 9px 20px rgba(244, 63, 94, 0.5),
    0 1px 2px rgba(0,0,0,0.32);
}
.card__toggle-icon--items {
  background: linear-gradient(145deg, #FDD48B 0%, #F59E0B 48%, #92400E 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.55),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 4px 10px rgba(245, 158, 11, 0.42),
    0 1px 2px rgba(0,0,0,0.32);
}
.card__toggle:hover .card__toggle-icon--items {
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.6),
    inset 0 -2px 5px rgba(8, 20, 60, 0.45),
    0 9px 20px rgba(245, 158, 11, 0.5),
    0 1px 2px rgba(0,0,0,0.32);
}

/* Pushed to the far edge so the whole header row reads as one wide control. */
.card__chevron {
  flex: none; margin-left: auto;
  color: var(--text-on-dark-muted);
  transition: transform 320ms cubic-bezier(.4,0,.2,1), color 200ms ease;
}
.card__toggle:hover .card__chevron { color: var(--text-on-dark); }
.card.is-collapsed .card__chevron { transform: rotate(-90deg); }

.card__collapse {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 340ms cubic-bezier(.4,0,.2,1);
}
.card.is-collapsed .card__collapse { grid-template-rows: 0fr; }
.card__collapse-inner { overflow: hidden; min-height: 0; }

/* Without this the header keeps its 16px bottom margin while collapsed, so a
   closed card sits with a dead gap under its title and never looks shut. */
.card__header-row { transition: margin-bottom 340ms cubic-bezier(.4,0,.2,1); }
.card.is-collapsed .card__header-row { margin-bottom: 0; }

.card__reset-row { display: flex; justify-content: flex-end; margin-bottom: 10px; }

.payment-link-field { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }

/* ---- Form fields ---- */
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field--full { grid-column: 1 / -1; }

.field label {
  font: var(--text-label);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-on-dark-muted);
}

.field input,
.field select,
.field textarea,
.input-combo input,
.input-combo select {
  appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  min-height: 44px;
  font-size: 13.5px;
  color: var(--text-on-dark);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.field textarea { min-height: 58px; resize: vertical; }
@media (min-width: 640px) {
  .field input, .field select, .input-combo input, .input-combo select {
    min-height: 32px;
    padding: 6px 9px;
  }
  .field textarea { min-height: 64px; padding: 6px 9px; }
}
.field input::placeholder, .field textarea::placeholder { color: var(--text-on-dark-muted); }
.field input:hover, .field select:hover, .field textarea:hover { border-color: rgba(255,255,255,0.28); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: #4C8DFF;
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.28);
}
.field select { cursor: pointer; }
.field select option { color: #0F172A; background: #fff; }

.input-combo { display: grid; grid-template-columns: 108px 1fr; gap: 8px; }

/* ---- Custom select & date picker ----
   Native <select> option lists and the <input type="date"> calendar are
   unstyled OS/browser chrome — CSS can't reach into them. customControls.js
   hides the native control and drives a themed proxy in front of it, so
   these rules only style that proxy: a trigger shaped exactly like
   .field input, and a portaled panel that matches the app's glass/gradient
   popups (same treatment as .modal/.panel). */
.csel { width: 100%; }
.csel--compact { width: auto; flex: none; }

.csel__trigger, .cdate__trigger {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 9px 11px;
  min-height: 44px;
  font: inherit;
  font-size: 13.5px;
  color: var(--text-on-dark);
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
@media (min-width: 640px) {
  .csel__trigger, .cdate__trigger { min-height: 32px; padding: 6px 9px; }
}
.csel--compact .csel__trigger {
  min-height: 30px; padding: 5px 7px; border-radius: 7px; min-width: 64px;
}
.csel__trigger:hover, .cdate__trigger:hover { border-color: rgba(255,255,255,0.28); }
.csel__trigger.is-open, .cdate__trigger.is-open,
.csel__trigger:focus-visible, .cdate__trigger:focus-visible {
  outline: none; border-color: #4C8DFF; background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.28);
}
.csel__value {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.csel__chevron, .cdate__icon { flex: none; color: var(--text-on-dark-muted); }
.csel__chevron { transition: transform 150ms ease; }
.csel__trigger.is-open .csel__chevron { transform: rotate(180deg); }
.cdate__value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.csel__panel, .cdate__panel {
  position: fixed; z-index: 70;
  background: var(--gradient-popup);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  animation: customPopupIn 140ms ease;
}
@keyframes customPopupIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.csel__panel {
  min-width: 160px;
  max-height: 260px; overflow-y: auto;
  margin: 0; padding: 6px;
  list-style: none;
}
.csel__option {
  padding: 8px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--text-on-dark);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.csel__option[aria-selected="true"] { color: #8FB8FF; font-weight: 600; }
.csel__option[aria-selected="true"]::after { content: '✓'; font-size: 12px; }
.csel__option:hover, .csel__option.is-active { background: rgba(255,255,255,0.10); }

.cdate__panel { width: 260px; padding: 14px; }
.cdate__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cdate__nav-btn {
  display: grid; place-items: center;
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--glass-border); background: rgba(255,255,255,0.06);
  color: var(--text-on-dark); cursor: pointer;
}
.cdate__nav-btn:hover { background: rgba(255,255,255,0.14); }
.cdate__month-label { font-weight: 700; font-size: 13px; color: var(--text-on-dark); }
.cdate__weekdays, .cdate__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cdate__weekdays { margin-bottom: 4px; }
.cdate__weekdays span {
  text-align: center; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-on-dark-muted);
}
.cdate__day {
  aspect-ratio: 1; display: grid; place-items: center;
  border: none; border-radius: 7px; background: transparent;
  color: var(--text-on-dark); font-size: 12.5px; cursor: pointer;
}
.cdate__day:hover { background: rgba(255,255,255,0.10); }
.cdate__day.is-today { box-shadow: inset 0 0 0 1px #4C8DFF; }
.cdate__day.is-selected { background: var(--gradient-primary); color: #fff; font-weight: 700; }
.cdate__day--empty { cursor: default; }
.cdate__footer {
  margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: center;
}

/* ---- Client section (Bill To) ---- */
.client-select-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.client-select-row .field { flex: 1; min-width: 180px; }
.client-select-row__links { display: flex; gap: 14px; padding-bottom: 11px; }
.client-preview {
  margin-top: 14px; padding: 12px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font: var(--text-small);
  color: var(--text-on-dark-muted);
  line-height: 1.6;
}
.client-preview strong { color: var(--text-on-dark); font-weight: 600; }
.client-empty { font: var(--text-small); color: var(--text-on-dark-muted); padding: 4px 2px; }

/* ---- Items table (editor) ---- */
.items-table { display: flex; flex-direction: column; }
.items-table__head {
  display: grid;
  grid-template-columns: minmax(0,50fr) minmax(46px,10fr) minmax(74px,15fr) minmax(84px,20fr) minmax(40px,5fr);
  gap: 10px;
  padding: 0 6px 8px;
  font: var(--text-label);
  color: var(--text-on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.items-table__head span:nth-child(n+2):nth-child(-n+4) { text-align: right; }
@media (max-width: 640px) { .items-table__head { display: none; } }

.items-table__body { display: flex; flex-direction: column; gap: 8px; }

.item-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 5px;
  border-top: 1px solid rgba(255,255,255,0.08);
  animation: rowIn 200ms ease;
}
.item-row:first-child { border-top: none; }

/* Row 1: name + qty + unit price + amount + delete, full width.
   Row 2 (below): description, full width. */
.item-row__top {
  display: grid;
  grid-template-columns: minmax(0,50fr) minmax(46px,10fr) minmax(74px,15fr) minmax(84px,20fr) minmax(40px,5fr);
  gap: 8px;
  align-items: center;
}

@keyframes rowIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.item-row.is-removing { animation: rowOut 200ms ease forwards; }
@keyframes rowOut { to { opacity: 0; transform: translateY(-4px); max-height: 0; } }

.item-row input, .item-row__desc {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  color: var(--text-on-dark);
  padding: 7px 9px;
  min-height: 40px;
  font-size: 13.5px;
  width: 100%;
}
@media (min-width: 640px) { .item-row input, .item-row__desc { min-height: 30px; padding: 5px 8px; } }
.item-row input:focus, .item-row__desc:focus { outline: none; border-color: #4C8DFF; box-shadow: 0 0 0 3px rgba(47,111,237,0.28); }
.item-row__top input[data-item-field="name"] { font-weight: 600; }
.item-row__desc { font-size: 12px; color: var(--text-on-dark-muted); }
.item-row input[data-item-field="quantity"],
.item-row input[data-item-field="unitPrice"] { text-align: right; font-variant-numeric: tabular-nums; }
.item-row__amount {
  font: var(--text-money);
  font-variant-numeric: tabular-nums;
  color: var(--text-on-dark);
  text-align: right;
  padding-right: 4px;
}

@media (max-width: 600px) {
  .item-row__top {
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) 40px;
    gap: 8px;
    row-gap: 8px;
  }
  .item-row__top input[data-item-field="name"] { grid-column: 1 / -1; }
}

/* ---- Payments ---- */
.payments-section { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.08); }
.payments-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.payment-row { display: grid; grid-template-columns: 1.3fr 120px 100px 36px; gap: 6px; align-items: center; animation: rowIn 200ms ease; }
@media (max-width: 640px) {
  .payment-row { grid-template-columns: 1fr 1fr; grid-template-areas: "label label" "date amount" "remove remove"; row-gap: 5px; }
  .payment-row [data-payment-field="label"] { grid-area: label; }
  .payment-row [data-payment-field="date"] { grid-area: date; }
  .payment-row [data-payment-field="amount"] { grid-area: amount; }
  .payment-row .icon-btn { grid-area: remove; justify-self: end; }
}
.payment-row input {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  color: var(--text-on-dark);
  padding: 7px 9px;
  min-height: 40px;
  width: 100%;
}
@media (min-width: 640px) { .payment-row input { min-height: 30px; padding: 5px 8px; } }
.payment-row input:focus { outline: none; border-color: #4C8DFF; box-shadow: 0 0 0 3px rgba(47,111,237,0.28); }
.payment-row input[data-payment-field="amount"] { text-align: right; font-variant-numeric: tabular-nums; }
.payments-empty { font: var(--text-small); color: var(--text-on-dark-muted); padding: 4px 2px 8px; }

/* ---- Totals list (Subtotal/Discount/Tax/Total, Paid/Balance) ---- */
.totals-list { display: flex; flex-direction: column; }
.totals-list--secondary { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.08); }

.totals-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px 2px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font: var(--text-small);
}
.totals-row[hidden] { display: none; }
.totals-row:first-child { border-top: none; }
.totals-list--secondary .totals-row:first-child { border-top: none; }

.totals-row__label { color: var(--text-on-dark-muted); flex: none; }
.totals-row__value {
  margin-left: auto;
  font-weight: 700;
  color: var(--text-on-dark);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.totals-row__value--positive { color: var(--success); }

.totals-row--editable { gap: 8px; }
.totals-row--editable .totals-row__label { min-width: 54px; }
.totals-row__input-group { display: flex; align-items: center; gap: 5px; flex: 1; max-width: 140px; }
.totals-row__input-group input {
  width: 100%; min-width: 0;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  color: var(--text-on-dark);
  padding: 5px 7px;
  min-height: 30px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.totals-row__input-group select {
  appearance: none;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border);
  border-radius: 7px;
  color: var(--text-on-dark);
  padding: 5px 7px;
  min-height: 30px;
  flex: none;
  cursor: pointer;
}
.totals-row__input-group select option { color: #0F172A; background: #fff; }
.totals-row__input-group--suffix input { text-align: right; }
.totals-row__suffix { color: var(--text-on-dark-muted); font-size: 12px; flex: none; }
.totals-row__input-group input:focus, .totals-row__input-group select:focus {
  outline: none; border-color: #4C8DFF; box-shadow: 0 0 0 3px rgba(47,111,237,0.28);
}

.totals-row--total {
  border-top: 2px solid rgba(255,255,255,0.16);
  margin-top: 4px;
  padding-top: 14px;
}
.totals-row--total .totals-row__label { color: #5B9CFF; font-weight: 700; font-size: 14px; }
.totals-row--total .totals-row__value { color: #5B9CFF; font: var(--text-money); font-size: 18px; }

/* ==========================================================================
   Invoice paper (preview) — stays solid, opaque, high-contrast. No glass.
   ========================================================================== */

.preview-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.preview-toolbar__spacer { flex: 1; }

.paper-wrap { border-radius: var(--radius-lg); overflow: visible; }

.paper {
  background: var(--paper-bg);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.35), var(--shadow-soft);
  padding: clamp(18px, 3vw, 36px);
  min-height: 560px;
}

.paper__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--paper-border); }

.paper__brand { display: flex; gap: 12px; align-items: center; }
.paper__logo {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  object-fit: cover; background: #fff;
}
.paper__logo-placeholder {
  width: 48px; height: 48px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  background: var(--gradient-primary);
  color: #fff; font-weight: 900; font-size: 18px;
  padding: 2px;
}
.paper__logo-placeholder-inner {
  width: 100%; height: 100%; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.4);
}
.paper__brand-text strong { display: block; font: var(--text-h2); font-size: 17px; color: var(--text-primary); }
.paper__brand-text span { display: block; font: var(--text-small); color: var(--text-secondary); }

.paper__meta { text-align: right; }
.paper__meta-title { font: var(--text-hero); letter-spacing: -0.01em; color: var(--text-primary); margin-bottom: 6px; }
.paper__meta-row { display: flex; justify-content: flex-end; gap: 8px; font: var(--text-small); padding: 2px 0; }
.paper__meta-row dt { color: var(--text-muted); }
.paper__meta-row dd { margin: 0; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; }

.paper__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--paper-border); }
.paper__party-label { font: var(--text-label); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px; }
.paper__party-name { font-weight: 700; color: var(--text-primary); margin-bottom: 2px; }
.paper__party-line { font: var(--text-small); color: var(--text-secondary); line-height: 1.6; white-space: pre-line; }

.paper__items { padding: 16px 0 4px; }
.paper__items-head {
  display: grid; grid-template-columns: minmax(0,2.6fr) 70px 120px 130px;
  gap: 10px; padding: 0 0 8px;
  font: var(--text-label); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted);
  border-bottom: 1px solid var(--paper-border);
}
.paper__item-row {
  display: grid; grid-template-columns: minmax(0,2.6fr) 70px 120px 130px;
  gap: 10px; padding: 12px 0;
  border-bottom: 1px solid var(--paper-border);
  align-items: start;
}
.paper__items-head span:nth-child(n+2) { text-align: right; }
.paper__item-name { font-weight: 600; color: var(--text-primary); }
.paper__item-desc { font: var(--text-small); color: var(--text-muted); margin-top: 2px; }
.paper__item-num { font-variant-numeric: tabular-nums; color: var(--text-secondary); text-align: right; }
.paper__item-amount { font: var(--text-money); font-variant-numeric: tabular-nums; text-align: right; color: var(--text-primary); }

.paper__bottom { display: flex; justify-content: space-between; gap: 26px; padding-top: 28px; flex-wrap: wrap; }
.paper__notes { flex: 1 1 280px; min-width: 0; }
.paper__notes-block + .paper__notes-block { margin-top: 14px; }
.paper__notes-label { font: var(--text-label); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 6px; }
.paper__notes-text { font: var(--text-small); color: var(--text-secondary); white-space: pre-line; line-height: 1.6; }

.paper__summary {
  flex: 0 0 280px;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFBFE 100%);
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-md);
  padding: 20px 22px 22px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 14px 32px rgba(15, 23, 42, 0.07);
}

.paper__summary-lines {
  margin: 0; display: flex; flex-direction: column; gap: 9px;
  padding-bottom: 16px; border-bottom: 1px solid var(--paper-border);
}
.paper__summary-row { display: flex; justify-content: space-between; align-items: baseline; font: var(--text-body); font-size: 13.5px; color: var(--text-secondary); }
.paper__summary-row dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text-primary); letter-spacing: -0.005em; }

.paper__summary-total {
  margin: 0; display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--paper-border);
}
.paper__summary-total dt { font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-primary); font-size: 12.5px; }
.paper__summary-total dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 23px; letter-spacing: -0.015em; color: var(--text-primary); }

.paper__summary-payments {
  margin: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 14px 0; border-bottom: 1px solid var(--paper-border);
}
.paper__summary-payments .paper__summary-row dt { font-style: italic; color: var(--text-muted); }
.paper__summary-payments .paper__summary-row dd { font-weight: 600; color: var(--text-secondary); }

.paper__summary-balance { padding-top: 18px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.paper__summary-balance-label { display: flex; align-items: center; gap: 6px; font: var(--text-label); text-transform: uppercase; letter-spacing: 0.09em; font-size: 10.5px; font-weight: 700; color: var(--text-muted); }
.paper__summary-balance-amount { margin: 0; font-variant-numeric: tabular-nums; font-weight: 800; font-size: 32px; letter-spacing: -0.02em; line-height: 1; }
.paper__summary-balance-amount--paid { color: #0B7A5C; }
.paper__summary-balance-amount--partial { color: #B45309; }
.paper__summary-balance-amount--unpaid { color: #B91C1C; }

.paper__pay-btn {
  display: block; margin-top: 16px; padding: 11px;
  border-radius: var(--radius-sm);
  background: var(--gradient-primary);
  color: #fff; text-decoration: none; text-align: center;
  font-weight: 700; font-size: 13.5px; letter-spacing: 0.01em;
  box-shadow: 0 8px 20px rgba(47, 111, 237, 0.28);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.paper__pay-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 26px rgba(47, 111, 237, 0.36); }

.status-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; }
.status-dot--paid { background: #0B7A5C; }
.status-dot--partial { background: #B45309; }
.status-dot--unpaid { background: #B91C1C; }

.badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  font: var(--text-money); font-size: 13px;
  border: 1px solid transparent;
}
.badge--paid { background: var(--success-bg); color: #067A55; border-color: var(--success-border); }
.badge--partial { background: var(--warning-bg); color: #92650B; border-color: var(--warning-border); }
.badge--unpaid { background: var(--danger-bg); color: #B91C1C; border-color: var(--danger-border); }

@media (max-width: 640px) {
  .paper__meta { text-align: left; width: 100%; }
  .paper__meta-title { font-size: 22px; }
  .paper__meta-row { justify-content: flex-start; }
  .paper__parties { grid-template-columns: 1fr; }
  .paper__items-head { display: none; }
  .paper__item-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "name name" "qty price" "amount amount";
    row-gap: 4px;
  }
  .paper__item-row > :nth-child(1) { grid-area: name; }
  .paper__item-row > :nth-child(2) { grid-area: qty; }
  .paper__item-row > :nth-child(3) { grid-area: price; }
  .paper__item-row > :nth-child(4) { display: none; }
  .paper__item-row > :nth-child(5) { grid-area: amount; text-align: left; }
  .paper__bottom { flex-direction: column; }
  .paper__summary { flex-basis: auto; }
}

/* ==========================================================================
   Modals, panels, toasts
   ========================================================================== */

.modal-scrim {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(5, 8, 16, 0.6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 200ms ease;
}
.modal-scrim.is-visible { opacity: 1; }
.modal-scrim[hidden] { display: none; }

.modal {
  position: fixed; z-index: 50;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.97);
  width: min(560px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 48px));
  display: flex; flex-direction: column;
  background: var(--gradient-popup);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  opacity: 0;
  transition: opacity 200ms ease, transform 200ms ease;
}
.modal.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.modal[hidden] { display: none; }

.modal--confirm { width: min(420px, calc(100vw - 32px)); }

.modal__header, .panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 22px; border-bottom: 1px solid var(--glass-border); flex: none;
}
.modal__header h2, .panel__header h2 { font: var(--text-h2); color: var(--text-on-dark); }
.modal__body { padding: 22px; overflow-y: auto; flex: 1; }
.modal__body h2 { font: var(--text-h2); margin-bottom: 8px; }
.modal__body p { font: var(--text-body); color: var(--text-on-dark-muted); }
.modal__footer, .panel__footer {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 18px 22px; border-top: 1px solid var(--glass-border); flex: none;
}

.modal__account-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 22px; border-top: 1px solid var(--glass-border);
  font: var(--text-small); color: var(--text-on-dark-muted); flex: none;
}
.modal__account-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modal__account-email { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.modal__account-stat { font-size: 11px; color: var(--text-on-dark-muted); opacity: 0.75; }

/* ---- Auth screen (magic-link sign-in) ---- */
.auth-screen {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.auth-screen[hidden] { display: none; }
.auth-card {
  width: 100%; max-width: 380px;
  background: var(--gradient-popup);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5);
  padding: 32px 28px;
  text-align: center;
}
.auth-card__mark {
  width: 44px; height: 44px; border-radius: 12px;
  margin: 0 auto 16px;
}
.auth-card__title { font: var(--text-hero); color: var(--text-on-dark); margin-bottom: 8px; }
.auth-card__subtitle { font: var(--text-small); color: var(--text-on-dark-muted); margin-bottom: 22px; line-height: 1.5; }
#loginForm .field { text-align: left; margin-bottom: 16px; }
.auth-card__sent { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.auth-card__sent[hidden] { display: none; }
.auth-card__sent p { font: var(--text-small); color: var(--text-on-dark-muted); line-height: 1.5; margin: 0; }
.auth-card__sent strong { color: var(--text-on-dark); }
.auth-card__error { margin-top: 14px; font: var(--text-small); color: #FCA5A5; }

.panel {
  position: fixed; z-index: 50;
  top: 0; right: 0; bottom: 0;
  width: min(440px, 100vw);
  display: flex; flex-direction: column;
  background: var(--gradient-popup);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-left: 1px solid var(--glass-border);
  box-shadow: -24px 0 64px rgba(0,0,0,0.4);
  transform: translateX(100%);
  transition: transform 220ms ease;
}
.panel.is-open { transform: translateX(0); }
.panel[hidden] { display: none; }
.panel__body { flex: 1; overflow-y: auto; padding: 12px; }
.panel__footer { border-top: 1px solid var(--glass-border); }

@media (max-width: 640px) {
  .modal { width: 100vw; height: 100vh; max-height: 100vh; top: 0; left: 0; transform: none; border-radius: 0; }
  .modal.is-open { transform: none; }
  .panel { width: 100vw; }
}

/* Invoice list rows (My Invoices panel) */
.invoice-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 10px; border-radius: var(--radius-sm);
  transition: background 150ms ease;
}
.invoice-row:hover { background: rgba(255,255,255,0.05); }
.invoice-row__main { flex: 1 1 200px; min-width: 0; background: none; border: none; text-align: left; cursor: pointer; color: inherit; padding: 4px; }
.invoice-row__number { display: block; font-weight: 700; color: var(--text-on-dark); }
.invoice-row__client { display: block; font: var(--text-small); color: var(--text-on-dark-muted); margin-top: 2px; }
.invoice-row__date { display: block; font: var(--text-small); color: var(--text-on-dark-muted); }
.invoice-row__amounts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.invoice-row__total { font: var(--text-money); color: var(--text-on-dark); font-variant-numeric: tabular-nums; }
.invoice-row__actions { display: flex; gap: 4px; }
.invoice-row + .invoice-row { border-top: 1px solid rgba(255,255,255,0.08); }

.badge--sm { padding: 3px 9px; font-size: 11px; }

.empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 48px 22px; gap: 12px; color: var(--text-on-dark-muted); }
.empty-state svg { opacity: 0.5; }
.empty-state p { font: var(--text-body); }

/* Clients list */
.client-list-row { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--radius-sm); transition: background 150ms ease; }
.client-list-row:hover { background: rgba(255,255,255,0.05); }
.client-list-row + .client-list-row { border-top: 1px solid rgba(255,255,255,0.08); }
.client-list-row__info { flex: 1; min-width: 0; }
.client-list-row__name { font-weight: 700; color: var(--text-on-dark); }
.client-list-row__meta { font: var(--text-small); color: var(--text-on-dark-muted); }
.client-list-row__actions { display: flex; gap: 4px; flex: none; }

.clients-header-row { display: flex; justify-content: flex-end; padding: 4px 4px 12px; }

/* Logo upload */
.logo-upload { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.logo-preview {
  width: 56px; height: 56px; border-radius: 14px; flex: none;
  background: var(--gradient-primary);
  display: grid; place-items: center;
  background-size: cover; background-position: center;
  border: 1px solid var(--glass-border);
}
.logo-upload__actions { display: flex; align-items: center; gap: 12px; }

/* ---- Toasts ---- */
.toast-region {
  position: fixed; z-index: 60; bottom: 16px; right: 16px;
  display: flex; flex-direction: column; gap: 8px;
  max-width: min(360px, calc(100vw - 32px));
}
.toast {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 12px 14px;
  background: var(--gradient-popup);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(0,0,0,0.4);
  color: var(--text-on-dark);
  font: var(--text-small);
  animation: toastIn 220ms ease;
}
.toast.is-leaving { animation: toastOut 180ms ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(6px); } }
.toast__icon { flex: none; margin-top: 1px; }
.toast--success .toast__icon { color: var(--success); }
.toast--error .toast__icon { color: var(--danger); }
.toast--info .toast__icon { color: #60A5FA; }

/* ---- Responsive: layout collapse ---- */
@media (max-width: 1023px) {
  .mobile-toggle { display: inline-flex; }
  .layout { grid-template-columns: 1fr; padding-top: 74px; }
  .editor-pane, .preview-pane { display: none; }
  .editor-pane.is-active, .preview-pane.is-active { display: flex; }
}

@media (max-width: 640px) {
  .field-grid { grid-template-columns: 1fr; }
  .app-header__actions span:not(.sr-only) { display: none; }
  .app-header__actions .btn { padding: 0 12px; }
  .app-header__title { font-size: 16px; }
}

/* ---- Print ---- */
@media print {
  .bg-mesh, .app-header, .mobile-toggle, .editor-pane, .preview-toolbar,
  .modal-scrim, .modal, .panel, .toast-region { display: none !important; }
  body, .app-shell, .layout { background: #fff !important; }
  .layout { display: block; padding: 0; }
  /* A printed page is narrower than the 1023px breakpoint that gates the
     mobile edit/preview toggle, so that rule's "hidden unless .is-active"
     default was matching here too — and .preview-pane only ever gets
     .is-active from tapping the mobile Preview tab. On a desktop session
     that never happened, so the pane it hid was the one with the invoice
     in it, leaving an entirely blank page. Force it visible for print
     regardless of which mobile tab was last selected. */
  .preview-pane { display: flex !important; position: static; max-height: none; overflow: visible; }
  .paper { box-shadow: none; border-radius: 0; padding: 0; }
  /* Safari's print pipeline (macOS "Print > Save as PDF") applies its own
     color-economy pass to anything not explicitly marked "exact", washing
     out the muted grays used for labels/secondary text — dates, party
     info, item descriptions, table headers — even though they render at
     full contrast in Chrome/Windows. Force the whole invoice to print at
     its real colors instead of just the two elements this covered before. */
  .paper, .paper * {
    print-color-adjust: exact; -webkit-print-color-adjust: exact;
  }
}