/* ═══════════════════════════════════════════════
   Invoice System - Onsite IT Support London
   Palette: Navy #0F2B4C · Teal #0E7490 · White #FFFFFF
   ═══════════════════════════════════════════════ */

/* (V01.77) F07: the tenant app loads ONLY the self-hosted webfonts that ship
   with the release. No external font origin is contacted, so the app renders
   identically with no internet access and the CSP no longer needs to permit any
   external font origin. */
@import url('/assets/fonts/fonts.css');

:root {
  /* ── Emerald palette (V39.57 redesign) ───────────────────────────────
     The app was originally navy/teal. To recolour everything in one place
     we keep the original variable NAMES but point them at Emerald values,
     so every existing rule that uses --navy/--teal picks up the new scheme.
     --navy  → emerald ink (dark text / primary)
     --teal  → emerald brand (accent / actions) */
  --emerald:      #0f9d6e;
  --emerald-dark: #0a7d57;
  --emerald-soft: #e2f4ec;
  --emerald-ink:  #0c1f17;

  --navy:        #0c1f17;   /* dark ink (was navy) */
  --navy-mid:    #0a7d57;   /* used for mobile-nav bg etc. */
  --teal:        #0f9d6e;   /* primary accent (was teal) */
  --teal-dark:   #0a7d57;
  --teal-soft:   #e2f4ec;
  --white:       #ffffff;
  --off-white:   #f3f7f4;
  --border:      #e0e9e3;
  --text:        #0c1f17;
  --muted:       #5b7065;
  --error:       #c53030;
  --success:     #0a7d57;
  --radius:      0.6rem;
  --radius-lg:   1rem;
  --shadow-sm:   0 2px 8px rgba(12,31,23,.07);
  --shadow-md:   0 6px 24px rgba(12,31,23,.11);
  --shadow-lg:   0 16px 48px rgba(12,31,23,.15);
  --font:        'Plus Jakarta Sans', 'Jakarta Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
  /* (V01.77) F07: JetBrains Mono was only ever reachable from Google Fonts and no
     local copy ships, so the app uses the system monospace stack. Mono glyph shapes
     can therefore differ between hosts; that is preferred over adding a new font
     dependency at this stage. */
  --font-mono:   ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --content:     1200px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
/* (V01.77) F07: Plus Jakarta Sans ships Latin only. Cyrillic and Greek locales use
   the shipped Manrope, which covers those scripts. Serbian is Latin in V01.77, so
   sr deliberately stays on Plus Jakarta Sans. */
html[lang^='bg'], html[lang^='ru'], html[lang^='uk'], html[lang^='el'] {
  --font: 'Manrope', 'Manrope Fallback', -apple-system, BlinkMacSystemFont, sans-serif;
}

body { font-family: var(--font); font-size: 15px; line-height: 1.65; color: var(--text); background: var(--off-white); }
/* (V40.51) Sticky footer on every app page: body is a column flexbox and the
   footer is pushed to the bottom whenever content is short. Auth pages
   declare their own body flex later in the cascade, so they're unaffected. */
body { min-height: 100vh; display: flex; flex-direction: column; }
footer.footer { margin-top: auto; }
a { text-decoration: none; color: inherit; }
button { border: 0; background: none; cursor: pointer; font: inherit; }
img { display: block; max-width: 100%; }

/* ── Layout ── */
.container { width: min(calc(100% - 2rem), var(--content)); margin-inline: auto; }
.main-wrap { padding: 2.5rem 0 4rem; min-height: calc(100vh - 64px - 56px); }

/* ── Header ── */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--navy);
  box-shadow: 0 2px 20px rgba(15,43,76,.3);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 0;
}
.brand-logo { display: flex; align-items: center; gap: .75rem; }
.brand-logo-img {
  display: flex; align-items: center; flex-shrink: 0;
  height: 40px;
}
.brand-logo-img img {
  height: 40px; width: auto; max-width: 160px;
  object-fit: contain; display: block;
}
.brand-icon {
  width: 2.4rem; height: 2.4rem;
  background: var(--teal); border-radius: .5rem;
  display: grid; place-items: center; flex-shrink: 0;
}
.brand-text strong { display: block; font-size: .9rem; font-weight: 700; color: #fff; line-height: 1.2; }
.brand-text span   { display: block; font-size: .75rem; color: rgba(255,255,255,.55); }
.header-nav { display: flex; align-items: center; gap: .75rem; }
.nav-link { color: rgba(255,255,255,.75); font-size: .875rem; transition: color .2s; }
.nav-link:hover { color: #fff; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.2rem; border-radius: var(--radius);
  font-size: .875rem; font-weight: 600; font-family: var(--font);
  transition: all .2s; cursor: pointer; white-space: nowrap;
}
.btn-primary  { background: var(--teal); color: #fff; }
.btn-primary:hover { background: var(--teal-dark); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.btn-outline  { background: transparent; color: var(--navy); border: 2px solid var(--border); }
.btn-outline:hover { border-color: var(--teal); color: var(--teal); }
/* (V40.52) Secondary save buttons are green like primaries - one action
   colour across the app, per design decision. */
.btn-secondary { background: var(--teal); color: #fff; border: 2px solid var(--teal); }
.btn-secondary:hover { filter: brightness(.95); }
.btn-ghost    { background: transparent; color: var(--muted); }
.btn-ghost:hover { background: var(--border); color: var(--text); }
.btn-lg   { padding: .75rem 1.6rem; font-size: 1rem; }
.btn-sm   { padding: .45rem .9rem; font-size: .8rem; }

/* ── Page head ── */
.page-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.75rem;
}
.page-head h1 { font-size: 1.7rem; font-weight: 800; color: var(--navy); line-height: 1.15; }
.page-head p  { color: var(--muted); font-size: .9rem; margin-top: .2rem; }

/* ── Stats ── */
.stats-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-bottom: 1.75rem;
}
.stat-card {
  background: var(--white); border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem; border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.stat-label { display: block; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); margin-bottom: .4rem; }
.stat-value { display: block; font-size: 1.5rem; font-weight: 800; color: var(--navy); font-family: var(--font-mono); }
.stat-overdue .stat-value { color: var(--error); }
.stat-paid    .stat-value { color: var(--success); }

/* ── Toolbar ── */
.toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.filter-tabs { display: flex; gap: .35rem; flex-wrap: wrap; }
.filter-tab {
  padding: .45rem .9rem; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: var(--muted);
  background: var(--white); border: 1px solid var(--border);
  transition: all .2s; display: inline-flex; align-items: center; gap: .35rem;
}
.filter-tab:hover, .filter-tab.active {
  background: var(--navy); color: #fff; border-color: var(--navy);
}
.badge-danger {
  background: var(--error); color: #fff;
  font-size: .7rem; padding: .1rem .4rem; border-radius: 999px;
}
.search-form { flex-shrink: 0; }
.search-wrap {
  position: relative; display: flex; align-items: center;
}
.search-wrap svg {
  position: absolute; left: .8rem; color: var(--muted); pointer-events: none;
}
.search-wrap input {
  padding: .5rem .9rem .5rem 2.2rem; border-radius: 999px;
  border: 1.5px solid var(--border); font-size: .875rem;
  background: var(--white); width: 220px;
  transition: border-color .2s, box-shadow .2s;
}
.search-wrap input:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(14,116,144,.12);
}

/* ── Invoice table ── */
.table-wrap {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.invoice-table { width: 100%; border-collapse: collapse; }
.invoice-table thead th {
  background: var(--off-white); text-align: left;
  padding: .85rem 1.1rem; font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--border);
}
.invoice-table tbody tr { border-bottom: 1px solid var(--border); transition: background .15s; }
.invoice-table tbody tr:last-child { border-bottom: 0; }
.invoice-table tbody tr:hover { background: #fafbfd; }
.invoice-table tbody tr.row-overdue { background: #fff8f8; }
.invoice-table tbody tr.row-overdue:hover { background: #fff2f2; }
.invoice-table td { padding: .9rem 1.1rem; font-size: .875rem; vertical-align: middle; }

.inv-num { font-family: var(--font-mono); font-weight: 700; color: var(--teal); font-size: .83rem; }
.inv-num:hover { text-decoration: underline; }
.inv-num-draft { color: var(--muted); font-style: italic; font-weight: 600; }
.test-badge { display:inline-block; background:#fef3c7; color:#92400e; border:1px solid #fcd34d; font-size:.62rem; font-weight:800; letter-spacing:.05em; padding:.1rem .35rem; border-radius:4px; vertical-align:middle; margin-left:.25rem; }
.test-data-bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:#fffbeb; border:1px solid #fcd34d; color:#92400e; padding:.7rem 1rem; border-radius:8px; margin-bottom:1.25rem; font-size:.9rem; }
.client-cell { display: flex; flex-direction: column; gap: .15rem; }
.client-name  { font-weight: 600; color: var(--text); }
.client-email { font-size: .78rem; color: var(--muted); }
.amount-cell  { font-weight: 700; font-family: var(--font-mono); }
.overdue-badge {
  display: inline-block; margin-left: .4rem;
  background: #fff0f0; color: var(--error);
  font-size: .7rem; font-weight: 700; padding: .1rem .45rem;
  border-radius: 999px; border: 1px solid #fca5a5;
}

/* ── Status badges ── */
.status-badge {
  display: inline-flex; align-items: center;
  padding: .2rem .65rem; border-radius: 999px;
  font-size: .72rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; white-space: nowrap;
}
.badge-draft     { background: #f1f5f9; color: #475569; }
.badge-unpaid    { background: #fffbeb; color: #92400e; border: 1px solid #fcd34d; }
.badge-sent      { background: #eff6ff; color: #1e40af; border: 1px solid #93c5fd; }
.badge-overdue   { background: #fff0f0; color: #c53030; border: 1px solid #fca5a5; }
.badge-paid      { background: #f0fdf4; color: #276749; border: 1px solid #86efac; }
.badge-cancelled { background: #f1f5f9; color: #64748b; }
.badge-lg { padding: .35rem 1rem; font-size: .85rem; }

/* ── Action buttons ── */
.action-btns { display: flex; gap: .35rem; align-items: center; }
.btn-icon {\n  width: 2rem; height: 2rem; display: grid; place-items: center;
  border-radius: var(--radius); color: var(--muted);
  transition: all .15s; border: 1px solid transparent;
}
.btn-icon:hover      { background: var(--teal-soft); color: var(--teal); border-color: var(--teal); }
.btn-reminder:hover  { background: #eff6ff; color: #1d4ed8; border-color: #93c5fd; }
.btn-paid:hover      { background: #f0fdf4; color: #276749; border-color: #86efac; }
.btn-delete:hover    { background: #fff5f5; color: #e53e3e; border-color: #feb2b2; }

/* ── Empty state ── */
.empty-state {
  text-align: center; padding: 4rem 2rem;
  background: var(--white); border-radius: var(--radius-lg);
  border: 2px dashed var(--border);
}
.empty-state svg { margin: 0 auto 1rem; color: var(--muted); opacity: .4; }
.empty-state p   { color: var(--muted); margin-bottom: 1.25rem; }

/* ── Form layout ── */
.inv-form-grid {
  display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.5rem;
  align-items: start;
}
.form-col { display: flex; flex-direction: column; gap: 1.25rem; }
.form-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.form-card h3 {
  font-size: 1rem; font-weight: 700; color: var(--navy);
  margin-bottom: 1.1rem; padding-bottom: .75rem;
  border-bottom: 1.5px solid var(--border);
}
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: .85rem; }
.field:last-child { margin-bottom: 0; }
.field label { font-size: .8rem; font-weight: 600; color: var(--muted); }
.field input, .field select, .field textarea {
  padding: .6rem .85rem; border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: .875rem; font-family: var(--font);
  color: var(--text); background: var(--white); transition: border-color .2s, box-shadow .2s;
  width: 100%; min-width: 0;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(14,116,144,.1);
}
.field textarea { min-height: 100px; resize: vertical; line-height: 1.6; }

/* ── Line items (layout defined per-page via inline <style>) ── */
.items-card { flex: 1; }
.items-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.items-head h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

/* item-del base (page styles override layout/grid specifics) */
.item-del  { color: var(--muted); font-size: .8rem; line-height: 1; opacity: .5; transition: opacity .2s; background: none; border: none; cursor: pointer; padding: .3rem; }
.item-del:hover { opacity: 1; color: var(--error); }
.item-line { font-family: var(--font-mono); font-size: .83rem; font-weight: 600; white-space: nowrap; }

/* ── Totals ── */
.totals-box {
  margin-top: 1.25rem; padding-top: 1rem;
  border-top: 2px solid var(--border);
  width: 100%; box-sizing: border-box;
}
.totals-row {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem;
  padding: .4rem 0; font-size: .875rem; color: var(--muted);
}
.totals-row > span:first-child { min-width: 0; flex: 1; }
.totals-row > span:last-child { flex-shrink: 0; text-align: right; white-space: nowrap; }
.totals-total {
  font-size: 1.1rem; font-weight: 800; color: var(--navy);
  border-top: 2px solid var(--border); margin-top: .4rem;
  padding-top: .7rem;
}
.totals-total span:last-child { font-family: var(--font-mono); color: var(--teal); }

/* ── Form actions ── */
.form-actions { display: flex; gap: .75rem; justify-content: flex-end; padding: .25rem 0; }

/* ════════════════════════════════════════
   INVOICE DOCUMENT (view / print)
   ════════════════════════════════════════ */
.invoice-page {
  padding: 2rem 1rem 4rem;
  min-height: calc(100vh - 64px);
}
.invoice-doc {
  max-width: 820px; margin: 0 auto;
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Top banner */
.inv-header {
  background: var(--navy);
  padding: 2.25rem 2.5rem;
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: 2rem; flex-wrap: wrap;
}
.inv-brand { display: flex; flex-direction: column; gap: 1rem; }
.inv-logo {
  display: flex; align-items: center; gap: .85rem;
}
.inv-logo-icon {
  width: 48px; height: 48px; background: var(--teal);
  border-radius: 10px; display: grid; place-items: center; flex-shrink: 0;
}
.inv-logo strong { display: block; color: #fff; font-size: 1.05rem; font-weight: 800; line-height: 1.2; }
.inv-logo span   { display: block; color: rgba(255,255,255,.55); font-size: .8rem; }
.inv-from { color: rgba(255,255,255,.6); font-size: .82rem; line-height: 1.8; }
.inv-from p { margin: 0; }

.inv-meta { text-align: right; }
.inv-title-block { margin-bottom: 1rem; }
.inv-title-block h1 {
  font-size: 2.4rem; font-weight: 800; color: rgba(255,255,255,.15);
  letter-spacing: .2em; line-height: 1; margin-bottom: .5rem;
}
.inv-number {
  font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700;
  color: #fff; letter-spacing: .05em;
}
.inv-dates { color: rgba(255,255,255,.7); font-size: .83rem; }
.inv-date-row { display: flex; justify-content: flex-end; gap: 1.5rem; padding: .2rem 0; }
.inv-date-row span   { color: rgba(255,255,255,.5); }
.inv-date-row strong { color: #fff; }
.overdue-row strong.overdue-text { color: #fca5a5 !important; }

/* Bill to */
.inv-parties {
  padding: 1.75rem 2.5rem;
  border-bottom: 2px solid var(--border);
}
.inv-party {}
.party-label  { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal); margin-bottom: .5rem; }
.party-name   { font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: .35rem; }
.party-addr   { font-size: .875rem; color: var(--muted); line-height: 1.6; margin-bottom: .5rem; }
.party-contact p { font-size: .83rem; color: var(--muted); margin: .1rem 0; }

/* Items table */
.inv-items {
  width: 100%; border-collapse: collapse;
  margin: 0;
}
.inv-items thead th {
  background: var(--off-white);
  padding: .85rem 1.1rem;
  text-align: left; font-size: .75rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; color: var(--muted);
  border-bottom: 2px solid var(--border);
}
.inv-items thead th:first-child { padding-left: 2.5rem; }
.inv-items thead th:last-child  { padding-right: 2.5rem; text-align: right; }
.inv-items tbody td {
  padding: 1rem 1.1rem;
  font-size: .88rem; vertical-align: top;
  border-bottom: 1px solid var(--border);
}
.inv-items tbody tr:last-child td { border-bottom: 0; }
.inv-items tbody td.desc-col { padding-left: 2.5rem; color: var(--text); font-weight: 500; }
.inv-items tbody td.qty-col   { color: var(--muted); text-align: center; }
.inv-items tbody td.price-col { color: var(--muted); text-align: right; font-family: var(--font-mono); }
.inv-items tbody td.total-col { text-align: right; padding-right: 2.5rem; font-weight: 600; font-family: var(--font-mono); }
.inv-items .desc-col { width: 50%; }
.inv-items .qty-col  { width: 10%; text-align: center; }
.inv-items .price-col{ width: 18%; text-align: right; }
.inv-items .total-col{ width: 22%; text-align: right; }

/* Totals */
.inv-totals { padding: 1.5rem 2.5rem; border-top: 2px solid var(--border); }
.inv-totals-inner { margin-left: auto; max-width: 300px; }
.inv-total-row {
  display: flex; justify-content: space-between;
  padding: .4rem 0; font-size: .9rem; color: var(--muted);
}
.inv-grand-total {
  font-size: 1.2rem; font-weight: 800; color: var(--navy);
  border-top: 2.5px solid var(--border);
  margin-top: .6rem; padding-top: .85rem;
}
.inv-grand-total span:last-child { color: var(--teal); font-family: var(--font-mono); font-size: 1.35rem; }

/* Notes */
.inv-notes {
  margin: 0 2.5rem 1.5rem;
  background: var(--off-white);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem;
  border-left: 4px solid var(--teal);
}
.inv-notes h4 { font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--teal); margin-bottom: .5rem; }
.inv-notes p  { font-size: .83rem; color: var(--muted); line-height: 1.7; }

/* Footer stripe */
.inv-footer {
  background: var(--navy); padding: 1rem 2.5rem;
  text-align: center;
}
.inv-footer p { font-size: .8rem; color: rgba(255,255,255,.55); }
.inv-footer strong { color: rgba(255,255,255,.85); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(15,43,76,.55);
  backdrop-filter: blur(4px); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.modal-overlay[hidden] { display: none; }
.modal {
  background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); width: min(520px, 100%);
  animation: modal-in .22s ease;
}
@keyframes modal-in { from { transform: scale(.95) translateY(8px); opacity: 0; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.modal-head h3 { font-size: 1.05rem; font-weight: 700; color: var(--navy); }
.modal-close { color: var(--muted); font-size: 1.1rem; line-height: 1; padding: .25rem .5rem; border-radius: .4rem; }
.modal-close:hover { background: var(--border); color: var(--text); }
.modal-body { padding: 1.5rem; }
.modal-body p  { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.modal-body label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: .4rem; }
.modal-body textarea {
  width: 100%; padding: .7rem .9rem; border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: .875rem; font-family: var(--font);
  color: var(--text); resize: vertical;
  transition: border-color .2s;
}
.modal-body textarea:focus { outline: none; border-color: var(--teal); }
.modal-foot {
  display: flex; justify-content: flex-end; gap: .75rem;
  padding: 1rem 1.5rem; border-top: 1px solid var(--border);
}

/* ── Toast ── */
.toast {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 200;
  padding: .8rem 1.4rem; border-radius: var(--radius);
  font-size: .875rem; font-weight: 600; box-shadow: var(--shadow-md);
  animation: toast-in .25s ease;
  max-width: 360px; line-height: 1.4; word-break: break-word;
}
.toast[hidden] { display: none; }
@keyframes toast-in { from { transform: translateY(12px); opacity: 0; } }
.toast-info    { background: var(--navy); color: #fff; }
.toast-success { background: #276749; color: #fff; }
.toast-error   { background: var(--error); color: #fff; }

/* ── Misc ── */
.alert {
  border-radius: var(--radius);
  padding: .85rem 1.1rem;
  font-size: .875rem;
  font-weight: 600;
  text-align: center;
  line-height: 1.45;
  word-break: break-word;
  box-sizing: border-box;
}
.alert-success {
  background: #f0fdf4; color: #276749;
  border: 1px solid #86efac;
}
.alert-error {
  background: #fef2f2; color: #b91c1c;
  border: 1px solid #fca5a5;
}

/* ── Footer ── */
.footer {
  background: var(--navy); padding: 1rem 0;
  text-align: center;
}
.footer p { color: rgba(255,255,255,.4); font-size: .8rem; }

/* ── Settings ── */
.settings-card {
  background: var(--white); border-radius: var(--radius-lg);
  border: 1px solid var(--border); padding: 1.75rem;
  box-shadow: var(--shadow-sm); margin-bottom: 1.25rem;
}
.settings-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.5rem;
}
.settings-card-head h2 {
  font-size: 1.1rem; font-weight: 700; color: var(--navy); margin-bottom: .2rem;
}
.settings-card-head p { font-size: .875rem; color: var(--muted); }
.form-group { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1rem; }
.form-group:last-child { margin-bottom: 0; }
.form-group label {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted);
}
.form-group input, .form-group select, .form-group textarea {
  padding: .65rem .9rem; border: 1.5px solid var(--border);
  border-radius: var(--radius); font-size: .9rem; font-family: var(--font);
  color: var(--text); background: var(--white);
  transition: border-color .2s, box-shadow .2s; width: 100%;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none; border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(14,116,144,.1);
}
.form-group textarea { resize: vertical; line-height: 1.6; }
.field-hint { font-size: .78rem; color: var(--muted); margin-top: .2rem; }

/* clients page uses invoice-table + clients-tbl for mobile targeting */

/* ═══════════ SEEN BADGE ═══════════ */
.seen-badge {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 5px;
  font-size: 10px; font-weight: 700; color: #166534;
  background: #f0fdf4; border: 1px solid #86efac;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle; cursor: default;
}
.sent-badge {
  display: inline-flex; align-items: center; gap: 3px; margin-left: 5px;
  font-size: 10px; font-weight: 700; color: #1e40af;
  background: #eff6ff; border: 1px solid #93c5fd;
  padding: 2px 7px; border-radius: 999px; vertical-align: middle; cursor: default;
}

/* ═══════════ MODAL GRID HELPERS ═══════════ */
.modal-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.modal-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }

/* ═══════════ DUAL-VIEW: desktop-only / mobile-only ═══════════ */
/* These classes power the table↔card switching strategy.
   On desktop: show .desktop-only, hide .mobile-only
   On mobile:  hide .desktop-only, show .mobile-only         */
.desktop-only { display: block; }
.mobile-only  { display: none;  }


/* ═══════════ MOBILE CARD CONTAINER WRAPPER ═══════════ */
.inv-card-list,
.client-card-list {
  background: var(--white);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
/* ═══════════ MOBILE INVOICE CARDS ═══════════ */
.inv-card-list { display: flex; flex-direction: column; gap: 0; }
.inv-card {
  background: var(--white);
  border-bottom: 2px solid var(--border);
  padding: .9rem 1rem;
}
.inv-card:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: 1px solid var(--border); }
.inv-card:last-child  { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.inv-card-overdue { background: #fff8f8; }
.inv-card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.inv-card-top { margin-bottom: .3rem; }
.inv-card-mid { margin: .3rem 0; align-items: center; }
.inv-card-bot { margin-top: .45rem; align-items: center; }
.inv-card-status { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.client-cell-right { text-align: right; align-items: flex-end; }
.inv-card-due   { font-size: .78rem; color: var(--muted); }
.inv-card-amount { font-size: 1.05rem; font-weight: 800; font-family: var(--font-mono); color: var(--navy); }

/* ═══════════ MOBILE CLIENT CARDS ═══════════ */
.client-card-list { display: flex; flex-direction: column; gap: 0; }
.client-card {
  background: var(--white);
  border-bottom: 2px solid var(--border);
  padding: .9rem 1rem;
}
.client-card:first-child { border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-top: 1px solid var(--border); }
.client-card:last-child  { border-radius: 0 0 var(--radius-lg) var(--radius-lg); }
.client-card-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; }
.client-card-top { align-items: flex-start; }
.client-card-bot { margin-top: .45rem; align-items: center; }
.client-card-company { font-size: .82rem; color: var(--muted); margin-top: .2rem; }
.client-card-meta    { font-size: .78rem; color: var(--muted); }
.client-card-amount  { font-weight: 700; font-family: var(--font-mono); font-size: .9rem; }
.amount-owed { color: var(--error); }
.amount-clear{ color: var(--success); }

/* ═══════════ PRINT STYLES ═══════════ */
@media print {
  .no-print, .header, .footer { display: none !important; }
  body, .invoice-page { background: white !important; padding: 0 !important; }
  .invoice-doc {
    box-shadow: none !important; border: none !important;
    border-radius: 0 !important; max-width: 100%;
  }
  .inv-header { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .inv-footer { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .inv-notes  { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { margin: 0.5in; size: A4; }
}

/* ═══════════════════════════════════════════════
   RESPONSIVE - clean cascade, no table hacks
   ═══════════════════════════════════════════════ */

/* ── 900px: collapse multi-column layouts ── */
@media (max-width: 900px) {
  .stats-row     { grid-template-columns: 1fr 1fr; }
  .inv-form-grid { grid-template-columns: 1fr; }
}

/* ── 768px: full mobile ── */
@media (max-width: 768px) {

  /* Switch: hide table, show cards */
  .desktop-only { display: none !important; }
  .mobile-only  { display: block !important; }

  /* ── Header ── */
  .header-inner { padding: .65rem 0; }
  .brand-text span { display: none; }

  /* ── Page head ── */
  .page-head { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .page-head h1 { font-size: 1.35rem; }
  .page-head .btn-lg { width: 100%; justify-content: center; }

  /* ── Stats ── */
  .stats-row  { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .stat-card  { padding: .9rem 1rem; }
  .stat-value { font-size: 1.2rem; }

  /* ── Toolbar ── */
  .toolbar { flex-direction: column; align-items: stretch; gap: .6rem; }
  .search-form, .search-wrap, .search-wrap input { width: 100%; }

  /* ── Bigger tap targets ── */
  .btn-icon { width: 2.2rem; height: 2.2rem; }

  /* ── Invoice view ── */
  .invoice-page { padding: .75rem 0 2rem; }
  .invoice-doc  { border-radius: var(--radius); margin: 0 .5rem; }
  .inv-header   { padding: 1.25rem 1rem; flex-direction: column; gap: 1rem; }
  .inv-meta     { text-align: left; width: 100%; }
  .inv-date-row { justify-content: flex-start; }
  .inv-title-block h1 { font-size: 1.6rem; letter-spacing: .08em; }
  .inv-parties  { padding: 1rem; }
  .inv-totals   { padding: 1rem; }
  .inv-totals-inner { max-width: 100%; }
  .inv-notes    { margin: 0 1rem 1rem; }
  .inv-footer   { padding: .85rem 1rem; }

  /* Action bar in invoice-view.php */
  .inv-action-bar { flex-wrap: wrap !important; gap: .5rem !important; }
  .inv-action-bar .btn { flex: 1 1 auto; justify-content: center; min-width: 110px; }

  /* Line items in invoice view - labelled rows */
  .inv-items thead { display: none; }
  .inv-items tbody tr { display: block; padding: .75rem 1rem; border-bottom: 1px solid var(--border); }
  .inv-items tbody td {
    display: flex; justify-content: space-between;
    padding: .2rem 0; border: none; font-size: .85rem;
  }
  .inv-items tbody td::before {
    content: attr(data-label);
    font-size: .72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted); margin-right: .5rem; flex-shrink: 0;
  }
  .inv-items tbody td.desc-col  {
    font-weight: 600; padding-left: 0;
    flex-direction: column; align-items: flex-start; gap: .15rem;
  }
  .inv-items tbody td.desc-col::before { margin-right: 0; }
  .inv-items tbody td.total-col {
    border-top: 1px solid var(--border); margin-top: .3rem;
    padding-top: .45rem; font-size: .9rem; padding-right: 0;
  }

  /* ── Invoice form ── */
  .inv-form-grid { grid-template-columns: 1fr; }
  .form-row-2    { grid-template-columns: 1fr 1fr; }
  .form-card     { padding: 1.1rem; }
  .form-actions  { flex-wrap: wrap; }
  .form-actions .btn { flex: 1; justify-content: center; }

  /* ── Settings ── */
  .settings-card { padding: 1.1rem 1rem; }
  .settings-card-head { flex-wrap: wrap; }
  /* Collapse all inline-style grids inside settings cards */
  .settings-card [style*="grid-template-columns: 1fr 1fr 1fr"],
  .settings-card [style*="grid-template-columns:1fr 1fr 1fr"],
  .settings-card [style*="grid-template-columns: 1fr 1fr"],
  .settings-card [style*="grid-template-columns:1fr 1fr"] {
    display: flex !important; flex-direction: column !important;
  }
  /* Modal grids collapse too */
  .modal-grid-2, .modal-grid-3 { grid-template-columns: 1fr !important; }

  /* ── Modal & Toast ── */
  .modal { width: calc(100vw - 2rem); }
  .modal-body { padding: 1rem; }
  .toast {
    bottom: 1rem; left: 50%; right: auto; transform: translateX(-50%);
    max-width: calc(100vw - 2rem); width: max-content;
    font-size: .82rem; text-align: center;
  }
  @keyframes toast-in { from { transform: translateX(-50%) translateY(12px); opacity: 0; } }
}

/* ── 480px: small phones ── */
@media (max-width: 480px) {
  .container  { width: calc(100% - 1.25rem); }
  .stats-row  { gap: .5rem; }
  .stat-value { font-size: 1.05rem; }
  .stat-label { font-size: .7rem; }
  .form-row-2 { grid-template-columns: 1fr; }
  .item-row > .item-del { align-self: center; justify-self: end; }

  /* Let long-labelled buttons wrap instead of overflowing off-screen.
     The base .btn uses white-space:nowrap, which clips wide labels like
     "Connect Stripe & enable card payments" and the annual plan button on
     narrow phones. Allow wrapping + centre the text so multi-line buttons
     stay tidy and on-screen. */
  .btn { white-space: normal; text-align: center; max-width: 100%; }

  /* Invoice view tighten */
  .inv-header { padding: 1rem .75rem; }
  .inv-parties, .inv-totals { padding: .85rem .75rem; }
  .inv-notes  { margin: 0 .75rem .85rem; }
  .inv-footer { padding: .75rem; }
  .inv-grand-total { font-size: 1rem; }
  .inv-grand-total span:last-child { font-size: 1.15rem; }

  /* Hide lower-priority action buttons on tiny screens */
  .inv-card .action-btns .btn-icon:nth-child(n+5) { display: none; }
}

/* ── Row actions dropdown menu (invoices list) ── */
.action-menu { position: relative; display: inline-block; text-align: left; }
.action-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border: 1px solid var(--border); border-radius: var(--radius);
  background: #fff; color: var(--muted); cursor: pointer; transition: background .15s, color .15s;
}
.action-toggle:hover { background: var(--off-white); color: var(--navy); }
.action-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 60;
  min-width: 190px; background: #fff; border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: .3rem;
}
.action-dropdown[hidden] { display: none; }
.action-item {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: .55rem .7rem; font-size: .85rem; color: var(--text);
  background: none; border: 0; border-radius: calc(var(--radius) - 2px);
  cursor: pointer; font-family: inherit; white-space: nowrap;
}
.action-item:hover { background: var(--off-white); color: var(--navy); }
.action-item-danger { color: var(--error); }
.action-item-danger:hover { background: #fdecec; color: var(--error); }