/* ============================================================
   Invoice Studio
   ============================================================
   Two designs in one stylesheet. On screen it is a dark editor.
   On paper it is a black-on-white document a client can file,
   and the print rules are not an afterthought: the PDF is the
   actual deliverable, so it gets the same care as the screen.
   ============================================================ */

:root {
  color-scheme: dark;

  --bg: #08090a;
  --bg-2: #0e1012;
  --bg-3: #16191c;
  --text: #f2f3f5;
  --muted: #a2a8b0;
  --faint: #7b828b;
  --line: #1d2024;
  --line-firm: #2e3238;
  --accent: #5b9dff;
  --accent-bg: #0f1b33;

  --sans: "Inter Tight", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --pad: clamp(1rem, 3vw, 2.25rem);
  --radius: 10px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- controls ---------- */

.bar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.5) blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar__in {
  max-width: 1180px; margin-inline: auto; padding: .8rem var(--pad);
  display: flex; align-items: center; gap: 1rem 1.5rem; flex-wrap: wrap;
}
.bar__tools { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-left: auto; }

.brand { display: flex; align-items: center; gap: .7rem; }
.brand__mark {
  width: 30px; height: 30px; border-radius: 7px; flex: none;
  display: grid; place-items: center;
  background: var(--accent); color: #04203f;
  font-weight: 700; font-size: .78rem; letter-spacing: .02em;
}
.brand b { display: block; font-size: .95rem; letter-spacing: -.01em; }
.brand i {
  display: block; font-style: normal; color: var(--faint);
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase;
}

.btn {
  font: inherit; font-size: .82rem;
  color: var(--text); background: var(--bg-3);
  border: 1px solid var(--line-firm); border-radius: 7px;
  padding: .45rem .85rem; cursor: pointer;
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.btn:hover { border-color: var(--accent); }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn--solid { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 600; }
.btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #04203f; }
.btn--ghost { background: none; border-style: dashed; color: var(--muted); width: 100%; margin-top: .6rem; }

.saved {
  max-width: 1180px; margin: .8rem auto 0; padding-inline: var(--pad);
  font-family: var(--mono); font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}

/* ---------- fields ---------- */

.field { display: grid; gap: .3rem; }
.field > span {
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
.field--inline { grid-auto-flow: column; align-items: center; gap: .5rem; }

input, textarea, select {
  font: inherit; color: var(--text);
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: 6px;
  padding: .45rem .6rem; width: 100%;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
input:hover, textarea:hover, select:hover { border-color: var(--line-firm); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--accent);
  background: var(--bg-3);
}
textarea { resize: vertical; line-height: 1.5; }
select { cursor: pointer; }

/* ---------- the document ---------- */

.sheet {
  max-width: 1180px; margin: 1.25rem auto 3rem; padding: var(--pad);
  background: var(--bg-2);
  border: 1px solid var(--line); border-radius: var(--radius);
}

.head {
  display: grid; grid-template-columns: 1fr 1fr auto;
  gap: 1.5rem 2rem; align-items: start;
  padding-bottom: 1.5rem; border-bottom: 1px solid var(--line);
}
.head__meta { min-width: 15rem; }
.doc-title {
  margin: 0 0 .8rem; font-size: 2rem; font-weight: 700;
  letter-spacing: -.03em; line-height: 1;
}
.meta-grid { display: grid; gap: .6rem; }

/* ---------- lines ---------- */

.lines { margin-top: 1.5rem; }
.tbl { width: 100%; border-collapse: collapse; }
.tbl th {
  text-align: left; font-weight: 400;
  font-family: var(--mono); font-size: .62rem;
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  padding: 0 .5rem .5rem; border-bottom: 1px solid var(--line);
}
.tbl td { padding: .3rem .25rem; vertical-align: middle; }
.t-num { text-align: right; }
.t-num input { text-align: right; font-variant-numeric: tabular-nums; }
.t-desc { width: 42%; }
.t-act { width: 2.2rem; }
.t-amt {
  font-variant-numeric: tabular-nums; white-space: nowrap;
  padding-inline: .6rem; color: var(--text);
}

.tbl thead th:nth-child(2), .tbl thead th:nth-child(3),
.tbl thead th:nth-child(4), .tbl thead th:nth-child(5) { width: 6.5rem; }

.x {
  width: 1.9rem; height: 1.9rem; border-radius: 6px; cursor: pointer;
  background: none; border: 1px solid transparent; color: var(--faint);
  font-size: 1.1rem; line-height: 1;
}
.x:hover { color: #ff6b5e; border-color: color-mix(in srgb, #ff6b5e 40%, transparent); }

/* ---------- totals ---------- */

.foot {
  display: grid; grid-template-columns: 1fr minmax(0, 22rem);
  gap: 2rem; margin-top: 2rem;
  padding-top: 1.5rem; border-top: 1px solid var(--line);
}
.foot__totals { display: grid; gap: 0; align-content: start; }

.tot {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1.5rem; padding: .5rem 0; border-bottom: 1px solid var(--line);
}
.tot span { color: var(--muted); font-size: .85rem; }
.tot b { font-variant-numeric: tabular-nums; font-weight: 500; }
.tot--grand { border-bottom: 0; border-top: 2px solid var(--line-firm); margin-top: .4rem; padding-top: .9rem; }
.tot--grand span { color: var(--text); font-size: .95rem; }
.tot--grand b { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; }

.disc { display: flex; align-items: center; gap: .35rem; }
.disc input { width: 5rem; text-align: right; font-variant-numeric: tabular-nums; }
.disc__sym { color: var(--faint); font-family: var(--mono); font-size: .75rem; }

.legal {
  max-width: 1180px; margin: 0 auto 4rem; padding-inline: var(--pad);
  color: var(--faint); font-size: .8rem; max-width: 62ch;
}
.legal b { color: var(--muted); font-weight: 500; }
.legal a { color: var(--accent); }

@media (max-width: 860px) {
  .head { grid-template-columns: 1fr; }
  .foot { grid-template-columns: 1fr; }
  .t-desc { width: auto; }
  /* The table cannot usefully compress below its columns, so it scrolls in its
     own box rather than forcing the whole page sideways. */
  .lines { overflow-x: auto; }
  .tbl { min-width: 640px; }
}

/* ============================================================
   Paper
   ============================================================
   The PDF is what actually gets sent, so this is the real
   deliverable rather than a courtesy. Black on white, the
   editing chrome gone, and the inputs rendered as plain text:
   a printed page with visible form fields looks like a
   screenshot of software, not like an invoice.
   ============================================================ */

@media print {
  @page { size: A4; margin: 16mm 14mm; }

  :root {
    --bg: #fff; --bg-2: #fff; --bg-3: #fff;
    --text: #000; --muted: #333; --faint: #555;
    --line: #ccc; --line-firm: #888; --accent: #000;
  }

  html, body { background: #fff !important; color: #000 !important; font-size: 11pt; }

  .no-print, .saved, .legal, .bar { display: none !important; }

  .sheet {
    max-width: none; margin: 0; padding: 0;
    background: #fff; border: 0; border-radius: 0;
  }

  /* Fields become text. Borders and backgrounds off, padding collapsed so the
     printed line sits where a typed line would. */
  input, textarea, select {
    border: 0 !important; background: none !important;
    padding: 0 !important; color: #000 !important;
    -webkit-appearance: none; appearance: none;
    resize: none; overflow: hidden;
  }
  textarea { height: auto; min-height: 0; }

  .field > span {
    color: #666; font-size: 7pt; letter-spacing: .08em;
  }

  .doc-title { font-size: 22pt; }

  /* A4 is about 794px wide at 96dpi, which is inside the 860px breakpoint, so
     the screen's mobile layout was being applied to paper and the header
     printed as one tall column. Paper always gets the full layout: it has a
     fixed width and it is never a phone. */
  .head { grid-template-columns: 1fr 1fr auto; gap: 1rem 1.5rem; padding-bottom: 1rem; }
  .foot { grid-template-columns: 1fr minmax(0, 20rem); gap: 1.5rem; margin-top: 1.25rem; padding-top: 1rem; }
  .lines { overflow-x: visible; margin-top: 1rem; }
  .tbl { min-width: 0; }

  /* A textarea keeps its rows attribute on paper, so an address of three lines
     printed five lines tall and pushed the totals down the page. */
  textarea { height: auto; display: block; }

  .tbl th { color: #444; font-size: 7pt; border-bottom: 1px solid #000; }
  .tbl td { padding: .28rem .25rem; border-bottom: 1px solid #e3e3e3; }

  /* A row split across a page break is unreadable, and a total stranded alone
     on page two looks like a mistake. */
  tr, .tot, .foot { break-inside: avoid; }
  thead { display: table-header-group; }     /* repeat headers on every page */
  .foot { border-top: 1px solid #000; }
  .tot--grand { border-top: 2px solid #000; }
}