/* ============================================================================
   InvoiceOS · Invoice & Quotation Generator
   styles.css
   ----------------------------------------------------------------------------
   1.  Design tokens (light + dark themes)
   2.  Base / reset
   3.  Layout (app bar, grid, sidebar, document)
   4.  Components (buttons, cards, badges, controls, table, summary…)
   5.  Utilities
   6.  Responsive breakpoints
   7.  Print (A4)
   ========================================================================== */

/* ============================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root {
  /* Brand palette (from spec) */
  --primary: #6c4ab6;
  --primary-600: #5b3ca0;
  --primary-050: #f1ecfa;
  --secondary: #3b82f6;
  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;

  /* Neutrals – light theme */
  --bg: #f4f5fb;
  --surface: #ffffff;
  --surface-2: #f8f9fd;
  --border: #e7e8f0;
  --border-strong: #d7d9e6;
  --text: #1f2430;
  --text-soft: #5a6172;
  --text-mute: #8b91a3;

  /* Effects */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --pad: 24px;
  --shadow-sm: 0 1px 2px rgba(20, 24, 40, 0.06), 0 1px 3px rgba(20, 24, 40, 0.05);
  --shadow: 0 6px 18px rgba(20, 24, 40, 0.08);
  --shadow-lg: 0 18px 48px rgba(20, 24, 40, 0.14);
  --ring: 0 0 0 3px rgba(108, 74, 182, 0.22);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
}

/* Dark theme overrides */
[data-theme="dark"] {
  --bg: #0f1117;
  --surface: #191c25;
  --surface-2: #20242f;
  --border: #2a2f3c;
  --border-strong: #363c4c;
  --text: #eef0f6;
  --text-soft: #b3b9c9;
  --text-mute: #7d8496;
  --primary-050: #241d3a;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.55);
}

/* ============================================================================
   2. BASE / RESET
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

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

a {
  color: var(--secondary);
  text-decoration: none;
}
a:hover { text-decoration: underline; }

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

button {
  font-family: inherit;
  cursor: pointer;
}

address { font-style: normal; }

::selection {
  background: rgba(108, 74, 182, 0.22);
}

/* ============================================================================
   3. LAYOUT
   ========================================================================== */

/* ---- Top app bar ---- */
.appbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px clamp(16px, 4vw, 40px);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.appbar__brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.appbar__logo {
  display: grid;
  place-items: center;
  filter: drop-shadow(0 6px 12px rgba(108, 74, 182, 0.35));
}

.appbar__title {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}
.appbar__title strong { font-size: 16px; font-weight: 800; letter-spacing: -0.01em; }
.appbar__title span { font-size: 11px; color: var(--text-mute); font-weight: 500; }

.appbar__controls {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* ---- Grid ---- */
.layout {
  display: grid;
  grid-template-columns: minmax(280px, 25%) 1fr;
  gap: clamp(16px, 2vw, 28px);
  align-items: start;
  max-width: 1520px;
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px);
}

/* ---- Sidebar ---- */
.sidebar {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}

/* ---- Document / paper ---- */
.doc { min-width: 0; }

.paper {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 3.4vw, 44px);
  overflow: hidden;
}

/* ============================================================================
   4. COMPONENTS
   ========================================================================== */

/* ---- Cards ---- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}

.card__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  margin-bottom: 12px;
}

/* ---- Sidebar summary card ---- */
.sidebar__summary {
  background:
    radial-gradient(120% 120% at 100% 0%, rgba(108, 74, 182, 0.16), transparent 55%),
    var(--surface);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.brand-mark img { border-radius: 12px; }
.brand-mark__name { font-weight: 700; }
.brand-mark__sub { font-size: 12px; color: var(--text-mute); }

.sidebar__total-label {
  font-size: 12px;
  color: var(--text-mute);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.sidebar__total {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 2px 0 12px;
}

.mini-progress {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--surface-2);
  overflow: hidden;
  margin-top: 14px;
  border: 1px solid var(--border);
}
.mini-progress__bar {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  transition: width 0.4s ease;
}
.sidebar__paid-hint {
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 8px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--surface-2);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease,
    border-color 0.2s ease, opacity 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }

.btn--primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-600));
  color: #fff;
  box-shadow: 0 8px 18px rgba(108, 74, 182, 0.32);
}
.btn--primary:hover { box-shadow: 0 12px 24px rgba(108, 74, 182, 0.42); }

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

.btn--soft {
  background: var(--primary-050);
  color: var(--primary);
  border-color: transparent;
}
.btn--soft:hover { background: color-mix(in srgb, var(--primary-050) 70%, var(--primary) 12%); }

.action-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.action-grid__full { grid-column: 1 / -1; }

/* Busy / loading button (during PDF build & Drive upload) */
.btn.is-busy {
  opacity: 0.65;
  pointer-events: none;
  cursor: progress;
}
.btn.is-busy::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Icon button (theme toggle) ---- */
.icon-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-soft);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.icon-btn:hover { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.icon { flex: none; }
.icon--moon { display: none; }
[data-theme="dark"] .icon--sun { display: none; }
[data-theme="dark"] .icon--moon { display: block; }

/* ---- Form controls ---- */
.field { display: flex; flex-direction: column; gap: 5px; }
.field--inline { min-width: 0; }
.field__label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-mute);
}

.control {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  font-family: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.control:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: var(--ring);
}
select.control {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238b91a3' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
  cursor: pointer;
}
.control--area {
  width: 100%;
  resize: vertical;
  line-height: 1.5;
}
.control--num { text-align: right; }

/* ---- Badges (status) ---- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}
.badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.badge--lg { font-size: 13px; padding: 7px 14px; }

.badge[data-status="paid"],
.badge[data-status="accepted"] { color: #128a45; background: rgba(34, 197, 94, 0.14); }
.badge[data-status="pending"] { color: #b26a04; background: rgba(245, 158, 11, 0.16); }
.badge[data-status="draft"] { color: #5b6270; background: rgba(139, 145, 163, 0.18); }
.badge[data-status="cancelled"],
.badge[data-status="rejected"] { color: #d13636; background: rgba(239, 68, 68, 0.14); }

[data-theme="dark"] .badge[data-status="paid"],
[data-theme="dark"] .badge[data-status="accepted"] { color: #4ade80; }
[data-theme="dark"] .badge[data-status="pending"] { color: #fbbf24; }
[data-theme="dark"] .badge[data-status="draft"] { color: #aeb4c4; }
[data-theme="dark"] .badge[data-status="cancelled"],
[data-theme="dark"] .badge[data-status="rejected"] { color: #f87171; }

/* ---- Key/value rows ---- */
.stack { display: flex; flex-direction: column; gap: 9px; }
.kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
}
.kv span { color: var(--text-mute); }
.kv strong { font-weight: 600; text-align: right; }
.kv--accent strong { color: var(--primary); font-size: 15px; }

/* ---- Timeline ---- */
.timeline { display: flex; flex-direction: column; }
.timeline__item {
  position: relative;
  display: flex;
  gap: 12px;
  padding-bottom: 16px;
  padding-left: 4px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__dot {
  position: relative;
  flex: none;
  width: 12px;
  height: 12px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  z-index: 1;
}
.timeline__item--done .timeline__dot {
  background: var(--primary);
  border-color: var(--primary);
}
.timeline__item::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 16px;
  bottom: -3px;
  width: 2px;
  background: var(--border);
}
.timeline__item:last-child::before { display: none; }
.timeline__item strong { font-size: 13px; font-weight: 600; display: block; }
.timeline__item time { font-size: 12px; color: var(--text-mute); }

/* ---- Attachments ---- */
.attach { display: flex; flex-direction: column; gap: 8px; }
.attach__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  font-size: 13px;
  transition: border-color 0.2s ease;
}
.attach__item:hover { border-color: var(--primary); }
.attach__item svg { color: var(--primary); flex: none; }
.attach__item span { flex: 1; font-weight: 500; }
.attach__item em { font-style: normal; font-size: 11px; color: var(--text-mute); }

/* ---- Contact ---- */
.contact { display: flex; gap: 12px; align-items: center; }
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: #fff;
  font-weight: 700;
  font-size: 14px;
}
.contact strong { display: block; font-size: 14px; }
.contact span { display: block; font-size: 12px; color: var(--text-mute); }
.contact a { font-size: 12px; }

/* ============================================================================
   4b. TAX INVOICE DOCUMENT  (ruled, Tally-style layout)
   ========================================================================== */

/* The document is ALWAYS black-on-white — even in app dark mode — so the
   preview, the PDF and the printout look like the same paper invoice. */
.tx {
  --surface: #ffffff;
  --surface-2: #f4f6f9;
  --border: #e3e6eb;
  --border-strong: #c9ced6;
  --text: #111111;
  --text-soft: #333333;
  --text-mute: #555555;
  --primary: #3a5a7d;
  --primary-600: #2c4864;
  --primary-050: #eef3f9;
  --ring: 0 0 0 2px rgba(58, 90, 125, 0.35);
  --rule: #000000;

  background: #ffffff;
  color: var(--text);
  font-family: Arial, Helvetica, "Liberation Sans", sans-serif;
  font-size: 12px;
  line-height: 1.35;
}

.tx__title { text-align: center; font-size: 17px; font-weight: 700; padding-bottom: 2px; }
.tx__small { font-size: 11px; color: var(--text-soft); }
.tx__strong { font-weight: 700; }
.tx__underline { text-decoration: underline; }
.tx__label { font-size: 11px; color: var(--text-soft); }
.tx__name { font-weight: 700; font-size: 13px; }
.tx__addr { font-style: normal; font-size: 12px; }

/* ---- Header box : parties (left) · reference grid (right) ---- */
.tx__head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
}
.tx__parties { border-right: 1px solid var(--rule); }
.tx__party { padding: 5px 6px; }
.tx__party + .tx__party { border-top: 1px solid var(--rule); }

.tx__meta { display: grid; grid-template-columns: 1fr 1fr; align-content: start; }
.tx__meta > div {
  padding: 3px 5px 4px;
  min-height: 36px;
  border-bottom: 1px solid var(--rule);
}
.tx__meta > div:nth-child(odd) { border-right: 1px solid var(--rule); }
.tx__meta > div.tx__meta-wide { grid-column: 1 / -1; border: none; min-height: 60px; }
.tx__meta dt { font-size: 11px; color: var(--text-soft); }
.tx__meta dd { min-height: 16px; }

/* ---- Items table ---- */
.tx__items { border: 1px solid var(--rule); border-top: none; }
.tx__scroll { overflow-x: auto; }
.tx__table { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12px; }
.tx__table th {
  font-weight: 400;
  text-align: center;
  padding: 4px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.tx__table td { padding: 1px 4px; vertical-align: top; }
/* Vertical rules only between columns — like Tally, no lines between rows */
.tx__table th + th,
.tx__table td + td { border-left: 1px solid var(--rule); }
.tx__table th.no-print,
.tx__table td.no-print { border-left: 1px solid var(--rule); }
.tx__table td.num { text-align: right; }
.tx__table tbody#itemsBody tr:first-child td { padding-top: 6px; }

.tx__c-sl { width: 30px; }
.tx__c-pkg { width: 68px; }
.tx__c-hsn { width: 78px; }
.tx__c-qty { width: 110px; }
.tx__c-rate { width: 92px; }
.tx__c-per { width: 48px; }
.tx__c-amt { width: 112px; }
.tx__c-act { width: 36px; }

.tx__sl { text-align: left; }
.tx .cell-input { padding: 2px 3px; margin: 0 -3px; border-radius: 4px; min-width: 0; font-weight: 400; }
.tx .cell-input.is-name { font-weight: 700; }
.tx__qty { white-space: nowrap; }
.tx__qty .cell-input { display: inline-block; width: calc(100% - 34px); font-weight: 700; }
.tx__unit { display: inline-block; width: 30px; text-align: left; padding-left: 4px; font-weight: 700; }
.tx__amt { font-weight: 700; white-space: nowrap; }
.tx .row-remove { width: 26px; height: 26px; }

.tx__sub-row td { padding-top: 6px; }
.tx__subtotal { border-top: 1px solid var(--rule); }
.tx__disc-label strong { float: right; font-style: italic; }
.tx__disc-amt { font-weight: 700; white-space: nowrap; }
.tx__disc-amt .cell-input { display: inline-block; width: 82px; font-weight: 700; }
.tx__filler td { height: 48px; }

.tx__total-row td {
  border-top: 1px solid var(--rule);
  padding: 4px;
  font-weight: 700;
}
.tx__total-label { text-align: right; font-weight: 400 !important; }
.tx__total-qty { white-space: nowrap; }
.tx__grand { font-size: 14px; white-space: nowrap; }

/* ---- Amount in words ---- */
.tx__words {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 6px 8px;
  border: 1px solid var(--rule);
  border-top: none;
}
.tx__eoe { font-style: italic; font-size: 11px; white-space: nowrap; }

/* ---- Declaration · bank details ---- */
.tx__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 4px 6px 8px;
  border: 1px solid var(--rule);
  border-top: none;
  border-bottom: none;
}
.tx__decl-text { font-size: 11.5px; margin-top: 2px; }
.tx__bank-list { margin-top: 2px; }
.tx__bank-list > div { display: grid; grid-template-columns: 120px 1fr; gap: 6px; }
.tx__bank-list dt { white-space: nowrap; }
.tx__bank-list dt::after { content: " :"; }
.tx__bank-list dd { font-weight: 700; }

/* ---- Signatures ---- */
.tx__sign { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); }
.tx__sign-cust { padding: 4px 6px; min-height: 64px; }
.tx__sign-auth {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
  padding: 4px 6px;
  border-left: 1px solid var(--rule);
  border-top: 1px solid var(--rule);
}
.tx__sign-role { font-size: 11px; }
.tx__note { text-align: center; font-size: 11px; padding-top: 6px; }

/* Shared helpers still used by the document */
.inv__add {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 10px;
  padding: 7px 14px;
  border: 1px dashed var(--border-strong);
  border-radius: 8px;
  background: transparent;
  color: var(--primary);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.inv__add:hover { background: var(--primary-050); border-color: var(--primary); }
.inv__add:focus-visible { outline: none; box-shadow: var(--ring); }

.inv__empty { padding: 28px 16px; text-align: center; color: var(--text-mute); }
.inv__empty-title { font-size: 14px; font-weight: 700; color: var(--text); }
.inv__empty-text { margin: 4px 0 12px; }

/* ---- Inline-editable text (contenteditable) ---- */
.inv__edit {
  border-radius: 4px;
  padding: 0 3px;
  margin: 0 -3px;                 /* keep text aligned; box breathes outward */
  transition: background 0.15s ease, box-shadow 0.15s ease;
  cursor: text;
}
.inv__edit:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--border-strong); }
.inv__edit:focus { outline: none; background: var(--surface); box-shadow: var(--ring); }

/* Sidebar: Amount Paid input */
.kv--input { align-items: center; }
.kv--input .control--num { width: 140px; padding: 6px 10px; }

/* ============================================================================
   LEGACY document styles below are no longer used by the current markup
   (kept harmless; superseded by .inv above)
   ========================================================================== */

/* ---- Header ---- */
.doc__header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-bottom: 22px;
  margin-bottom: 24px;
  border-bottom: 2px solid var(--border);
}
.doc__eyebrow {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
}
.doc__title {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 4px 0 12px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.doc__number { font-size: 16px; font-weight: 600; color: var(--text-mute); }

.doc__meta {
  display: grid;
  grid-template-columns: auto auto;
  gap: 10px 26px;
  align-content: start;
  text-align: right;
}
.doc__meta div { display: flex; flex-direction: column; }
.doc__meta dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  font-weight: 700;
}
.doc__meta dd { font-size: 14px; font-weight: 600; }

/* ---- Parties ---- */
.parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
}
.party {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
}
.party__brand { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.party__brand img { border-radius: 10px; }
.party__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-mute);
  margin-bottom: 6px;
}
.party__role { font-size: 11px; color: var(--text-mute); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.party__name { font-size: 16px; font-weight: 700; }
.party__body { font-size: 13px; color: var(--text-soft); line-height: 1.7; margin-top: 6px; }
.muted { color: var(--text-mute); }

/* ---- Items table ---- */
.section-title { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; }
.items__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  scrollbar-width: thin;
}
.items__table {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
  font-size: 13px;
}
.items__table thead th {
  background: var(--surface-2);
  color: var(--text-mute);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-align: left;
  padding: 12px 12px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.items__table th.num,
.items__table td.num { text-align: right; }
.items__table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.items__table tbody tr:last-child td { border-bottom: none; }
.items__table tbody tr:hover { background: var(--surface-2); }

.col-idx { width: 40px; }
.col-act { width: 44px; }

.row-index { color: var(--text-mute); font-weight: 600; }
.cell-computed { font-weight: 600; white-space: nowrap; }
.cell-subtotal { font-weight: 700; }

/* Editable cell inputs blend into the table */
.cell-input {
  width: 100%;
  min-width: 52px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 6px 8px;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.cell-input:hover { border-color: var(--border-strong); background: var(--surface); }
.cell-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: var(--ring);
}
.cell-input.is-num { text-align: right; }
.cell-input.is-name { font-weight: 600; }
.cell-input::placeholder { color: var(--text-mute); }

.row-remove {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-mute);
  transition: color 0.15s ease, background 0.15s ease;
}
.row-remove:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.row-remove:focus-visible { outline: none; box-shadow: var(--ring); }

/* ---- Empty state ---- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 48px 20px;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--radius);
  color: var(--text-mute);
  margin-top: 4px;
}
.empty-state svg { color: var(--primary); opacity: 0.7; margin-bottom: 6px; }
.empty-state__title { font-size: 15px; font-weight: 700; color: var(--text); }
.empty-state__text { max-width: 320px; }
.empty-state .btn { margin-top: 10px; }

/* ---- Finance (payment + summary) ---- */
.finance {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 420px);
  gap: 24px;
  margin-top: 28px;
  align-items: start;
}
.finance__left { display: flex; flex-direction: column; gap: 16px; }

.panel {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
}
.panel__title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-mute);
  margin-bottom: 12px;
}
.panel__text { font-size: 13px; color: var(--text-soft); line-height: 1.6; }

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.panel__head .panel__title { margin-bottom: 0; }

/* ---- Payment terms editor (add / remove) ---- */
.terms-editor { display: flex; flex-direction: column; gap: 8px; }
.term-row { display: flex; align-items: center; gap: 10px; }
.term-bullet {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary);
}
.term-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  padding: 6px 8px;
  font: inherit;
  color: var(--text);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.term-input:hover { border-color: var(--border-strong); background: var(--surface); }
.term-input:focus-visible {
  outline: none;
  border-color: var(--primary);
  background: var(--surface);
  box-shadow: var(--ring);
}
.term-remove {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-mute);
  transition: color 0.15s ease, background 0.15s ease;
}
.term-remove:hover { color: var(--danger); background: rgba(239, 68, 68, 0.1); }
.term-remove:focus-visible { outline: none; box-shadow: var(--ring); }
.empty-terms { font-size: 13px; color: var(--text-mute); font-style: italic; }

/* ---- PDF export (html2canvas) : desktop width, compact, flattened ---- */
.is-exporting .no-print { display: none !important; }
.is-exporting .layout {
  display: block !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.is-exporting .paper {
  width: 1024px !important;
  max-width: 1024px !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 13px;      /* smaller words in the PDF */
}
.is-exporting .tx { font-size: 12px; }
.is-exporting .tx__scroll { overflow: visible !important; }
.is-exporting .tx__table { min-width: 0 !important; }
.is-exporting .tx .inv__edit { box-shadow: none !important; background: transparent !important; }
/* html2canvas draws text a few px lower than the browser does; give every
   line that sits on a rule extra room so the rule never strikes through it */
.is-exporting .tx__title { padding-bottom: 8px; }
.is-exporting .tx__meta > div { padding-bottom: 9px; }
.is-exporting .tx__party { padding-bottom: 10px; }
.is-exporting .tx__table th { padding-bottom: 8px; }
.is-exporting .tx__sub-row td { padding-top: 12px; }
.is-exporting .tx__total-row td { padding-bottom: 9px; }
.is-exporting .tx__words,
.is-exporting .tx__foot { padding-bottom: 12px; }
.is-exporting .tx__sign-cust,
.is-exporting .tx__sign-auth { padding-bottom: 10px; }
.is-exporting .tx__note { padding-bottom: 8px; }
.is-exporting #itemsBody tr:last-child td { padding-bottom: 8px; }
/* Whole-pixel box edges: a fractional padding (from clamp/vw) lets html2canvas
   round the right/bottom rule off the edge of each captured section */
.is-exporting .paper { padding: 36px !important; }
/* html2canvas drops some collapsed cell borders; separate borders render reliably */
.is-exporting .tx__table { border-collapse: separate; border-spacing: 0; }
/* Flatten editable inputs to plain text */
.is-exporting .cell-input,
.is-exporting .control--num,
.is-exporting .term-input {
  border-color: transparent !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 2px 0 !important;
  min-width: 0 !important;
}
/* Let the items table use the full width so no column is clipped */
.is-exporting .table-wrap { overflow: visible !important; }
.is-exporting .items__table { min-width: 0 !important; font-size: 11px; }
.is-exporting .items__table thead th { padding: 7px 6px !important; }
.is-exporting .items__table tbody td { padding: 6px 6px !important; }

/* ---- Same PDF on every device ----
   The responsive rules below (max-width: 1024px / 640px) stack the document
   for small screens. During export we pin the desktop layout back on, so a
   phone, a tablet and a 27" monitor all produce a byte-for-byte comparable
   A4 page. These selectors are 2 classes deep, so they outrank the
   single-class rules inside the media queries regardless of source order. */
.is-exporting body { overflow-x: hidden !important; }
.is-exporting .tx__head,
.is-exporting .tx__foot,
.is-exporting .tx__sign { grid-template-columns: 1fr 1fr !important; }
.is-exporting .tx__parties { border-right: 1px solid #000 !important; border-bottom: none !important; }
.is-exporting .tx__sign-auth { border-left: 1px solid #000 !important; }
.is-exporting .parties { grid-template-columns: 1fr 1fr !important; }
.is-exporting .doc__header { flex-direction: row !important; }
.is-exporting .doc__meta { grid-template-columns: auto auto !important; text-align: right !important; }
.is-exporting .closing { grid-template-columns: 1fr minmax(240px, 300px) !important; }
.is-exporting .closing__sign { align-items: center !important; }

/* Summary */
.summary {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}
.summary__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
}
.summary__row:last-child { border-bottom: none; }
.summary__row > span:first-child,
.summary__row label { color: var(--text-soft); }
.summary__row > span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; }
.summary__row--muted { color: var(--text-mute); }
.summary__row--muted span { color: var(--text-mute) !important; }

.summary__row--input { padding: 8px 12px 8px 18px; }
.money-input { width: 130px; }
.money-input .control--num { width: 100%; padding: 7px 10px; }

.summary__row--grand {
  background: linear-gradient(135deg, rgba(108, 74, 182, 0.1), rgba(59, 130, 246, 0.08));
  padding: 15px 18px;
}
.summary__row--grand span { font-size: 17px; font-weight: 800; color: var(--text); }

.summary__row--due span:last-child { color: var(--danger); font-weight: 800; }

/* ---- Closing (note + signature) ---- */
.closing {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px);
  gap: 28px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 2px solid var(--border);
  align-items: start;
}
.closing__note {
  font-size: 13px;
  color: var(--text);
  font-weight: 500;
}
.closing__sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.signature { text-align: center; width: 100%; margin-top: 24px; }
.signature__line {
  display: block;
  height: 1px;
  background: var(--border-strong);
  margin-bottom: 8px;
}
.signature__name { font-weight: 700; font-size: 14px; }
.signature__role { font-size: 12px; color: var(--text-mute); }

/* ---- Footer ---- */
.doc__footer {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-mute);
}

/* ---- Toast ---- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%) translateY(12px);
  background: var(--text);
  color: var(--surface);
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 600;
  z-index: 60;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
}
.toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================================================
   5. UTILITIES
   ========================================================================== */
[hidden] { display: none !important; }

/* ============================================================================
   6. RESPONSIVE
   ========================================================================== */

/* Tablet – collapse sidebar below the document */
@media (max-width: 1024px) {
  .layout {
    grid-template-columns: 1fr;
  }
  .sidebar {
    position: static;
    max-height: none;
    overflow: visible;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: min-content;
  }
  .sidebar__summary { grid-column: 1 / -1; }
  .finance { grid-template-columns: 1fr; }
  .finance__right { order: -1; }
}

/* Mobile */
@media (max-width: 640px) {
  body { font-size: 13.5px; }
  .appbar { gap: 10px; }
  .appbar__controls { width: 100%; }
  .field--inline { flex: 1 1 42%; }
  .sidebar { grid-template-columns: 1fr; }
  .action-grid { grid-template-columns: 1fr; }
  .parties { grid-template-columns: 1fr; }
  .doc__header { flex-direction: column; }
  .doc__meta { grid-template-columns: 1fr 1fr; text-align: left; }
  .closing { grid-template-columns: 1fr; }
  .closing__sign { align-items: flex-start; }
  .money-input { width: 120px; }

  /* Invoice document stacks on small screens (the items table scrolls) */
  .tx__head,
  .tx__foot,
  .tx__sign { grid-template-columns: 1fr; }
  .tx__parties { border-right: none; border-bottom: 1px solid var(--rule); }
  .tx__sign-auth { border-left: none; }
}

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

/* Follow OS dark preference on first load (JS still lets the user override) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
  }
}

/* ============================================================================
   7. PRINT  (A4 Portrait · 210mm × 297mm)
   ----------------------------------------------------------------------------
   Print-first: the PDF is produced by the browser's own engine (File → Print →
   Save as PDF), so it renders the SAME CSS as the screen — typography, spacing
   and colours are identical to the preview by construction. These rules only
   strip screen chrome, lock the document to the A4 content width, and control
   where pages may break so nothing is cut, overlapped or orphaned.
   ========================================================================== */
@page {
  size: A4 portrait;
  margin: 12mm;
}

@media print {
  html, body {
    background: #ffffff !important;
    /* 210mm − 2×12mm margin = 186mm usable content width */
    width: 186mm;
    font-size: 10pt;              /* fixed, print-calibrated base size */
  }

  /* Keep every colour/background crisp on paper */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Hide all screen-only chrome (app bar, sidebar, buttons, selects) */
  .no-print { display: none !important; }

  /* Single-column, full-width, no on-screen framing */
  .layout {
    display: block !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .doc { min-width: 0 !important; }
  .paper {
    width: 100% !important;
    max-width: none !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .tx { font-size: 9pt; }
  .tx__title { font-size: 13pt; }

  /* Keep the two-column boxes side by side (A4's pixel width can trip the
     mobile breakpoint otherwise) */
  .tx__head,
  .tx__foot,
  .tx__sign { grid-template-columns: 1fr 1fr !important; }
  .tx__parties { border-right: 1px solid #000 !important; border-bottom: none !important; }
  .tx__sign-auth { border-left: 1px solid #000 !important; }
  .tx .inv__edit { box-shadow: none !important; background: transparent !important; }

  /* Editable fields render as plain, aligned text (native print shows values) */
  .cell-input,
  .control--num {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 0 !important;
    color: var(--text) !important;
    -moz-appearance: textfield;
    appearance: textfield;
  }
  .cell-input::placeholder { color: transparent !important; }
  .cell-input.is-num { text-align: right; }
  .cell-input::-webkit-outer-spin-button,
  .cell-input::-webkit-inner-spin-button,
  .control--num::-webkit-outer-spin-button,
  .control--num::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }

  /* ---- Fixed-layout items table: fits 186mm exactly, never overflows ---- */
  .tx__scroll { overflow: visible !important; }
  .tx__table {
    min-width: 0 !important;
    table-layout: fixed;
    font-size: 8.5pt;
  }
  .tx__table td { overflow-wrap: anywhere; }
  /* 8 printable columns (the action column is .no-print) */
  .tx__c-sl { width: 5%; }
  .tx__c-pkg { width: 9%; }
  .tx__c-desc { width: 28%; }
  .tx__c-hsn { width: 10%; }
  .tx__c-qty { width: 13%; }
  .tx__c-rate { width: 11%; }
  .tx__c-per { width: 7%; }
  .tx__c-amt { width: 17%; }

  /* ---- Page-break control : nothing cut or orphaned ---- */
  .tx__table tbody tr,
  .tx__head,
  .tx__words,
  .tx__foot,
  .tx__sign {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .tx__table thead { display: table-header-group; }
  .tx__foot { break-after: avoid; page-break-after: avoid; }

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