/* =========================================================
   Editor chrome — the working tool around the invoice.
   Apple system-UI palette (neutral surfaces, system blue
   accent), generous spacing, soft depth. One typeface
   (Inter, standing in for SF Pro) throughout, IBM Plex Mono
   for figures. The invoice/receipt documents themselves are
   untouched — see styles/invoice.css.
   ========================================================= */

:root {
  --bg: #000000;
  --panel: #1c1c1e;
  --panel-alt: #2c2c2e;
  --panel-line: #38383a;
  --text: #f5f5f7;
  --muted: #98989d;
  --accent: #0a84ff;
  --accent-strong: #409cff;
  --on-accent: #ffffff;
  --danger: #ff453a;
  --warning: #ff9f0a;
  --radius-card: 16px;
  --radius-control: 10px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.24), 0 12px 32px rgba(0, 0, 0, 0.28);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.5);
  --cloud-opacity: 0.4;
}

:root[data-theme="light"] {
  --bg: #f5f5f7;
  --panel: #ffffff;
  --panel-alt: #f5f5f7;
  --panel-line: #d2d2d7;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --accent: #0071e3;
  --accent-strong: #0058b0;
  --on-accent: #ffffff;
  --danger: #ff3b30;
  --warning: #ff9500;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px rgba(0, 0, 0, 0.06);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.18);
  --cloud-opacity: 0.22;
}

* {
  box-sizing: border-box;
}

/* Any element's own display:flex/grid/block rule beats the UA's default
   [hidden] { display: none } regardless of selector specificity, since
   author-origin CSS always wins over user-agent CSS — so toggling the
   `hidden` attribute silently does nothing on anything styled with one of
   those. This is the one global backstop: !important is deliberate here,
   it's the only way to guarantee `hidden` always actually hides, no matter
   what display rule a component adds later. (Previously patched per
   component as this bit each one — .auth-gate[hidden], .modal-overlay
   [hidden] below, since superseded by this rule but left as-is.) */
[hidden] {
  display: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Ambient cloud background ----------
   Injected by background.js as the first child of <body>. Needs an
   explicit negative z-index, not just DOM order: a position:fixed element
   at z-index:0 actually paints ABOVE plain non-positioned block content
   (CSS stacking order puts "positioned, z-index 0" after "in-flow
   non-positioned descendants") — z-index:-1 is what puts it behind
   everything else on the page instead of covering it. Colors are drawn
   straight from the existing accent tokens (no new hues); --cloud-opacity
   is themed above. Blobs drift on independent slow loops (already
   neutralized by the reduced-motion rule above); background.js
   additionally skips the mousemove listener when that preference is set. */

.cloud-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
  --mx: 0;
  --my: 0;
  transform: translate(calc(var(--mx) * 28px), calc(var(--my) * 28px));
  transition: transform 0.6s ease-out;
}

.cloud-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: var(--cloud-opacity);
  will-change: transform;
}

.cloud-blob--a {
  top: -18vmax;
  left: -12vmax;
  width: 60vmax;
  height: 60vmax;
  background: radial-gradient(circle, var(--accent) 0%, transparent 70%);
  animation: cloud-drift-a 62s ease-in-out infinite alternate;
}

.cloud-blob--b {
  bottom: -22vmax;
  right: -14vmax;
  width: 66vmax;
  height: 66vmax;
  background: radial-gradient(circle, var(--warning) 0%, transparent 70%);
  animation: cloud-drift-b 78s ease-in-out infinite alternate;
  animation-delay: -12s;
}

.cloud-blob--c {
  top: 30vh;
  left: 40vw;
  width: 48vmax;
  height: 48vmax;
  background: radial-gradient(circle, var(--accent-strong) 0%, transparent 70%);
  animation: cloud-drift-c 95s ease-in-out infinite alternate;
  animation-delay: -30s;
}

@keyframes cloud-drift-a {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(8vw, 6vh) scale(1.12);
  }
}

@keyframes cloud-drift-b {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(-7vw, -8vh) scale(1.08);
  }
}

@keyframes cloud-drift-c {
  from {
    transform: translate(-4vw, 3vh) scale(1);
  }
  to {
    transform: translate(5vw, -5vh) scale(1.15);
  }
}

/* position:fixed elements otherwise repeat on every printed page — this
   app prints real invoices/receipts, so keep the cloud layer out of any
   print output on every page, not just the two with a print button. */
@media print {
  .cloud-layer {
    display: none !important;
  }
}

.chrome-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--panel-line);
  background: color-mix(in srgb, var(--panel) 72%, transparent);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}

.chrome-bar__brand {
  display: flex;
  align-items: baseline;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

/* Store (region) indicator in the header — a UAE | India toggle for
   admins, a single fixed pill for everyone else (see chrome.js). */
.region-switch {
  display: inline-flex;
  align-self: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  background: var(--panel-alt);
  flex: 0 0 auto;
}

.region-switch__btn {
  border: 0;
  border-radius: 999px;
  padding: 3px 10px;
  font: inherit;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  white-space: nowrap;
}

.region-switch__btn--active {
  background: var(--accent);
  color: var(--on-accent);
}

.region-switch__btn:disabled {
  cursor: default;
}

.region-notice {
  margin: 16px 24px 0;
  padding: 12px 16px;
  border: 1px solid var(--warning);
  border-radius: var(--radius-control);
  color: var(--text);
  background: var(--panel);
  font-size: 13px;
}

.chrome-bar__mark {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.chrome-bar__title {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Nav ---------- */

.chrome-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.chrome-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 999px;
  transition: color 0.15s ease, background 0.15s ease;
}

.chrome-nav__link svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.chrome-nav__link:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
}

.chrome-nav__link[aria-current="page"] {
  color: var(--on-accent);
  background: var(--accent);
}

/* ---------- Nav dropdown groups (Accounting, Settings) ---------- */

.chrome-nav__group {
  position: relative;
}

.chrome-nav__group-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  background: none;
  border: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.chrome-nav__group-trigger svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.chrome-nav__group-trigger .chrome-nav__caret {
  width: 11px;
  height: 11px;
  transition: transform 0.15s ease;
}

.chrome-nav__group-trigger:hover,
.chrome-nav__group-trigger[aria-expanded="true"] {
  color: var(--text);
  background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
}

.chrome-nav__group-trigger[aria-expanded="true"] .chrome-nav__caret {
  transform: rotate(180deg);
}

.chrome-nav__group-trigger--active {
  color: var(--on-accent);
  background: var(--accent);
}

.chrome-nav__dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 6px;
  min-width: 180px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  padding: 6px;
  z-index: 45;
}

.chrome-nav__dropdown-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 500;
  transition: color 0.15s ease, background 0.15s ease;
}

.chrome-nav__dropdown-link svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.chrome-nav__dropdown-link:hover {
  color: var(--text);
  background: color-mix(in srgb, var(--panel-alt) 80%, transparent);
}

.chrome-nav__dropdown-link[aria-current="page"] {
  color: var(--on-accent);
  background: var(--accent);
}

/* ---------- Theme toggle ---------- */

.theme-toggle {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: none;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
}

.theme-toggle:active {
  transform: scale(0.93);
}

.theme-toggle__icon {
  width: 16px;
  height: 16px;
}

.theme-toggle__icon--moon {
  display: none;
}

:root[data-theme="light"] .theme-toggle__icon--sun {
  display: none;
}

:root[data-theme="light"] .theme-toggle__icon--moon {
  display: block;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(440px, 30vw) 1fr;
  min-height: calc(100vh - 49px);
}

/* ---------- Editor panel ---------- */

.editor {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border-right: 1px solid var(--panel-line);
  overflow-y: auto;
  max-height: calc(100vh - 49px);
}

.editor__body {
  flex: 1;
  padding: 28px 28px 8px;
}

.editor__intro {
  margin-bottom: 22px;
}

.editor__intro-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.editor__intro-row h1 {
  margin: 0 0 4px;
}

.editor__intro h1 {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.editor__intro p {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}

.editor__group {
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 26px 26px 24px;
  margin-bottom: 20px;
}

.editor__group h2 {
  margin: 0 0 18px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.editor__group-hint {
  margin: -10px 0 16px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.editor__group-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.editor__group-heading h2 {
  margin: 0;
}

.editor__group-heading-actions {
  display: flex;
  gap: 8px;
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.editor__footer {
  position: sticky;
  bottom: 0;
  padding: 16px 28px 24px;
  background: linear-gradient(to top, var(--bg) 65%, transparent);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
}

.field:last-child {
  margin-bottom: 0;
}

.field span {
  font-size: 11.5px;
}

/* ---------- Search combobox (customer / item pickers) ---------- */

.search-combobox {
  position: relative;
}

.search-combobox__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 6px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-modal);
  max-height: 260px;
  overflow-y: auto;
  z-index: 5;
}

.search-combobox__item {
  padding: 12px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--panel-line);
  transition: background 0.15s ease;
}

.search-combobox__item:last-child {
  border-bottom: none;
}

.search-combobox__item:hover {
  background: var(--panel-alt);
}

.search-combobox__item strong {
  display: block;
  font-size: 12.5px;
  color: var(--text);
}

.search-combobox__item span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.search-combobox__empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--muted);
}

input[type="text"],
input[type="date"],
input[type="number"],
textarea,
select {
  background: var(--panel-alt);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-control);
  color: var(--text);
  padding: 12px 14px;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

textarea {
  resize: vertical;
  font-family: "Inter", sans-serif;
}

input:disabled,
textarea:disabled,
select:disabled {
  opacity: 0.45;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Chrome/Safari/Edge number-input spinners — hidden for a cleaner field
   that matches the rest of the refined controls. Arrow-key/typed input
   still works with no spinner shown. */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

/* ---------- Keyboard focus ring (buttons, links, clickable rows) ---------- */

.btn-ghost:focus-visible,
.btn-primary:focus-visible,
.chrome-nav__link:focus-visible,
.chrome-nav__group-trigger:focus-visible,
.chrome-nav__dropdown-link:focus-visible,
.theme-toggle:focus-visible,
.date-filter__btn:focus-visible,
.modal-panel__close:focus-visible,
.saved-invoice__info:focus-visible,
.ledger-table__particulars--link:focus-visible,
.search-combobox__item:focus-visible,
.link-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

.search-combobox__item--active {
  background: var(--panel-alt);
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--muted);
  cursor: pointer;
}

.checkbox input {
  width: 15px;
  height: 15px;
  accent-color: var(--accent);
}

/* ---------- Line item rows ---------- */

.line-items {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.line-item {
  background: var(--panel-alt);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 20px 20px 18px;
  position: relative;
}

.line-item__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}

.line-item__row:last-child {
  margin-bottom: 0;
}

.line-item__row--three {
  grid-template-columns: 1fr 1fr 1fr;
}

.line-item__row--four {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.line-item label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 11px;
  color: var(--muted);
}

.line-item__desc {
  margin-bottom: 10px;
}

.line-item .readonly {
  opacity: 0.6;
}

.line-item__badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 2px 8px;
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.line-item__remove {
  position: absolute;
  top: 14px;
  right: 16px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  color: var(--danger);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s ease;
}

.line-item__remove svg {
  width: 13px;
  height: 13px;
}

.line-item__remove:hover {
  background: color-mix(in srgb, var(--danger) 12%, transparent);
}

.line-item__total {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--panel-line);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  color: var(--muted);
}

.line-item__total strong {
  color: var(--accent-strong);
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
}

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

.btn-ghost,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: "Inter", sans-serif;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.btn-ghost svg,
.btn-primary svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.btn-ghost {
  background: var(--panel-alt);
  border: 1px solid var(--panel-line);
  color: var(--text);
  border-radius: var(--radius-control);
  padding: 9px 16px;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.btn-ghost:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--panel-line));
  background: var(--panel);
}

.btn-ghost:active,
.btn-primary:active {
  transform: scale(0.97);
}

.btn-primary {
  width: 100%;
  background: var(--accent);
  color: var(--on-accent);
  border: none;
  border-radius: var(--radius-control);
  padding: 15px;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
}

.btn-primary:hover {
  background: var(--accent-strong);
}

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.btn-primary--danger {
  background: var(--danger);
}

.btn-primary--danger:hover {
  background: color-mix(in srgb, var(--danger) 85%, black);
}

.modal-panel--confirm {
  max-width: 400px;
}

.modal-panel__message {
  margin: 4px 0 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-line;
}

.btn-block {
  width: 100%;
  text-align: center;
  margin-bottom: 10px;
  padding: 13px;
}

/* ---------- Auth gate ---------- */

.auth-gate {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  z-index: 10;
  padding: 20px;
}

.auth-gate[hidden] {
  display: none;
}

.auth-gate__card {
  width: 100%;
  max-width: 360px;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth-gate__card h1 {
  margin: 12px 0 2px;
  font-size: 21px;
  letter-spacing: -0.02em;
}

.auth-gate__card p {
  margin: 0 0 20px;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
}

.auth-gate__card .btn-primary {
  margin-top: 8px;
}

.auth-gate__error {
  color: var(--danger);
  font-size: 12.5px;
  margin: 0 0 4px;
}

/* ---------- Saved invoices ---------- */

.page-shell {
  width: 100%;
  padding: 40px 36px 56px;
}

.saved-invoices {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 220px;
  overflow-y: auto;
}

.saved-invoices--page {
  max-height: none;
}

.saved-invoices__empty {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Import hint / sample downloads ---------- */

.import-hint {
  margin: -6px 0 12px;
  font-size: 12px;
  color: var(--muted);
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent-strong);
  font-size: 12px;
  text-decoration: underline;
  cursor: pointer;
}

.link-btn:hover {
  color: var(--accent);
}

/* ---------- Add-record forms (customers / items) ---------- */

.entity-form {
  background: var(--panel-alt);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 22px 22px 6px;
  margin-bottom: 20px;
}

.entity-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: 16px;
}

.entity-form__actions .btn-primary {
  width: auto;
  padding: 9px 18px;
}

.entity-form__hint {
  margin: -8px 0 14px;
  font-size: 11.5px;
  color: var(--muted);
  min-height: 15px;
}

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

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 50;
}

.modal-overlay[hidden] {
  display: none;
}

.modal-panel {
  width: 100%;
  max-width: 540px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--panel-line);
  border-radius: 20px;
  padding: 26px 28px 28px;
  box-shadow: var(--shadow-modal);
}

.modal-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.modal-panel__header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.modal-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--panel-alt);
  border: none;
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.modal-panel__close svg {
  width: 14px;
  height: 14px;
}

.modal-panel__close:hover {
  background: var(--panel-line);
  color: var(--text);
}

.modal-panel__section {
  margin: 18px 0 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.modal-panel__section:first-of-type {
  margin-top: 4px;
}

.modal-panel__section span {
  text-transform: none;
  font-weight: 400;
  letter-spacing: normal;
  color: var(--muted);
  opacity: 0.8;
}

.saved-invoice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: var(--panel-alt);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 16px 18px;
  transition: border-color 0.15s ease;
}

.saved-invoice:hover {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--panel-line));
}

.saved-invoice__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  cursor: pointer;
}

.saved-invoice__info strong {
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-invoice__info span {
  font-size: 11px;
  color: var(--muted);
}

/* Labeled figure cluster (Total / Paid / Due) — mirrors the printed
   invoice's own totals block: a tiny tracked caption over a bold
   tabular figure, so a row reads like a torn ledger slip. */

.saved-invoice__figures {
  display: flex;
  gap: 18px;
  flex: 0 0 auto;
}

.saved-invoice__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 62px;
}

.saved-invoice__figure-label {
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.saved-invoice__figure-value {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.saved-invoice__figure--due .saved-invoice__figure-value {
  color: var(--danger);
}

.saved-invoice__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.saved-invoice--unpaid {
  border-left: 3px solid var(--danger);
}

.saved-invoice--advance_paid {
  border-left: 3px solid var(--warning);
}

.saved-invoice--paid {
  border-left: 3px solid var(--accent);
}

.status-badge {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.status-badge--unpaid {
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 15%, transparent);
}

.status-badge--advance_paid {
  color: var(--warning);
  background: color-mix(in srgb, var(--warning) 15%, transparent);
}

.status-badge--paid {
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* ---------- Ledger table (transactions page) ---------- */

.ledger-wrap {
  overflow-x: auto;
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.ledger-table th {
  text-align: left;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--panel-line);
  white-space: nowrap;
}

.ledger-table td {
  padding: 15px 14px;
  border-bottom: 1px solid var(--panel-line);
  vertical-align: top;
  white-space: nowrap;
}

.ledger-table__row:last-child td {
  border-bottom: none;
}

.ledger-table__particulars {
  white-space: normal;
  min-width: 220px;
}

.ledger-table__particulars strong {
  display: block;
  font-size: 12.5px;
}

.ledger-table__particulars span {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
}

.ledger-table__particulars--link {
  cursor: pointer;
}

.ledger-table__amount,
th.ledger-table__amount {
  text-align: right;
  font-family: "IBM Plex Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.ledger-table__debit {
  color: var(--danger);
  font-weight: 600;
}

.ledger-table__credit {
  color: var(--accent-strong);
  font-weight: 600;
}

.ledger-table__balance {
  color: var(--muted);
}

.list-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

.list-toolbar input {
  flex: 1 1 auto;
}

.list-toolbar select {
  flex: 0 0 auto;
  width: auto;
}

.list-summary {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- Stats grid ---------- */

/* Each tile crowns its figure with the invoice document's own "ruler
   rule" — a hairline with tick marks, used there once above the
   header and once above the totals. Here it sits above these totals
   too, recolored per status so it doubles as the color key. */

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.stat-tile {
  background: var(--panel-alt);
  border: 1px solid var(--panel-line);
  border-radius: var(--radius-card);
  padding: 20px 22px 19px;
}

.stat-tile--pending {
  --stat-color: var(--danger);
}

.stat-tile--collected {
  --stat-color: var(--text);
}

.stat-tile--advance {
  --stat-color: var(--warning);
}

.stat-tile--paid {
  --stat-color: var(--accent);
}

.stat-tile__label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.stat-tile__rule {
  position: relative;
  height: 1px;
  background: var(--panel-line);
  margin: 8px 0 10px;
}

.stat-tile__rule::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1px;
  height: 4px;
  background-image: repeating-linear-gradient(
    to right,
    var(--stat-color) 0,
    var(--stat-color) 1px,
    transparent 1px,
    transparent 7px
  );
  opacity: 0.65;
}

.stat-tile__value {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--stat-color);
}

.stat-tile__meta {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}

/* ---------- Date filter (segmented control) ---------- */

.list-toolbar--secondary {
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.date-filter {
  display: inline-flex;
  flex: 0 0 auto;
  background: var(--panel-alt);
  border: 1px solid var(--panel-line);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}

.date-filter__btn {
  background: none;
  border: none;
  color: var(--muted);
  font-family: "Inter", sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.date-range-picker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.date-range-picker input[type="date"] {
  width: auto;
}

.date-range-picker span {
  font-size: 11.5px;
  color: var(--muted);
}

.date-filter__btn:hover {
  color: var(--text);
  background: var(--panel);
}

.date-filter__btn--active,
.date-filter__btn--active:hover {
  background: var(--accent);
  color: var(--on-accent);
}

@media (max-width: 860px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
}

.saved-invoice__delete {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--danger);
  font-size: 11px;
  cursor: pointer;
  padding: 4px;
}

.saved-invoice__delete:hover {
  text-decoration: underline;
}

.save-status {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--muted);
  min-height: 15px;
}

.save-status--error {
  color: var(--danger);
}

.save-status--ok {
  color: var(--accent-strong);
}

/* ---------- Preview panel ---------- */

.preview {
  padding: 40px 32px;
  overflow-y: auto;
  max-height: calc(100vh - 49px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: var(--bg);
}

@media (max-width: 1100px) {
  .workspace {
    grid-template-columns: 1fr;
  }

  .editor,
  .preview {
    max-height: none;
  }

  .editor {
    border-right: none;
    border-bottom: 1px solid var(--panel-line);
  }

  .preview {
    padding: 24px 16px 48px;
  }

  /* iOS Safari auto-zooms the page on focus of any input under
     16px — keep form fields at 16px here to avoid that jump. */
  input[type="text"],
  input[type="date"],
  input[type="number"],
  textarea {
    font-size: 16px;
  }
}

/* The brand side (title + store switcher) and the full nav no longer
   fit on one line here — give the nav its own row instead of letting
   the store switcher overflow into it. */
@media (max-width: 1280px) {
  .chrome-bar {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .chrome-nav {
    order: 1;
    width: 100%;
    flex-wrap: wrap;
  }
}

@media (max-width: 640px) {
  .chrome-bar {
    padding: 12px 16px;
    flex-wrap: wrap;
  }

  .chrome-nav {
    order: 1;
    width: 100%;
  }

  .chrome-bar__title {
    font-size: 11.5px;
  }

  .list-toolbar {
    flex-direction: column;
  }

  .list-toolbar select {
    width: 100%;
  }

  .saved-invoice {
    flex-wrap: wrap;
  }

  .saved-invoice__figures {
    width: 100%;
    justify-content: space-between;
    order: 2;
  }

  .saved-invoice__figure {
    align-items: flex-start;
  }

  .saved-invoice__actions {
    width: 100%;
    justify-content: space-between;
    order: 3;
  }

  .list-toolbar--secondary {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .date-filter {
    width: 100%;
  }

  .date-filter__btn {
    flex: 1 1 0;
    text-align: center;
  }

  .date-range-picker {
    width: 100%;
  }

  .date-range-picker input[type="date"] {
    flex: 1 1 0;
  }

  .list-toolbar--secondary #exportBtn {
    width: 100%;
  }

  .editor__body {
    padding: 20px 16px 4px;
  }

  .page-shell {
    padding: 20px 16px 32px;
  }

  .editor__footer {
    padding: 14px 16px 20px;
  }

  .editor__intro h1 {
    font-size: 18px;
  }

  .editor__group {
    padding: 16px 16px 14px;
  }

  .field-row,
  .line-item__row--three,
  .line-item__row--four {
    grid-template-columns: 1fr 1fr;
  }

  .line-item__row--three label:last-child {
    grid-column: 1 / -1;
  }

  .editor__group-heading {
    flex-wrap: wrap;
    row-gap: 8px;
  }
}

/* ---------- Row insertion transition ---------- */

@keyframes row-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.row-in {
  animation: row-in 180ms ease-out;
}