/* A One Mart — billing portal.
   Deliberately plain and small: this runs on a shop counter machine where
   speed of first paint and of every keystroke matters more than decoration.
   No web fonts, no framework, no icon set — system fonts only, so there is
   nothing to fetch before the page is usable. */

[hidden] { display: none !important; }

:root {
  --navy: #0f1a4d;
  --navy2: #17255f;
  --green: #1f8a3d;
  --green2: #16682d;
  --red: #c62828;
  --amber: #a75b00;
  --bg: #eef1f6;
  --card: #fff;
  --text: #172033;
  --muted: #63708a;
  --border: #d5dce8;
  --radius: 10px;
}

* { box-sizing: border-box; }

html {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
}
body { margin: 0; min-width: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }

/* --- Boot splash ------------------------------------------------------- */
/* Painted from the very first byte and removed on DOMContentLoaded, so the
   counter never sees a half-built page. Opacity-only transition (no layout
   properties) so removing it cannot cause a reflow jank on a slow machine. */
.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--navy);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  transition: opacity .25s ease;
}
.boot-splash.done { opacity: 0; pointer-events: none; }
.boot-mark { font-size: 1.1rem; font-weight: 800; letter-spacing: .22em; }
.boot-bar { width: 168px; height: 3px; background: rgba(255,255,255,.18); border-radius: 3px; overflow: hidden; }
.boot-bar span {
  display: block; width: 40%; height: 100%; background: #58c46f; border-radius: 3px;
  animation: bootSlide 1s ease-in-out infinite;
}
@keyframes bootSlide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .boot-bar span { animation: none; width: 100%; }
  .boot-splash { transition: none; }
}

/* --- Shell ------------------------------------------------------------- */
.shell { min-height: 100vh; }
.topbar {
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 16px;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 50;
}
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; white-space: nowrap; }
.brand img { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.nav { display: flex; gap: 3px; flex: 1 1 auto; flex-wrap: wrap; }
.nav a {
  padding: 8px 11px;
  border-radius: 7px;
  font-size: .85rem;
  font-weight: 600;
  color: #ccd6f5;
  white-space: nowrap;
}
.nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.nav a.active { background: rgba(255,255,255,.18); color: #fff; }
.who { display: flex; align-items: center; gap: 10px; font-size: .8rem; white-space: nowrap; }
.who em { font-style: normal; opacity: .65; text-transform: capitalize; }

.main { max-width: 1240px; margin: 0 auto; padding: 18px 16px 60px; }

/* --- Blocks ------------------------------------------------------------ */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
  min-width: 0;
}
.card h2, .card h3 { margin: 0 0 4px; color: var(--navy); font-size: 1.05rem; }
.muted { color: var(--muted); font-size: .85rem; }

.grid { display: grid; gap: 14px; }
.stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat strong { display: block; font-size: 1.55rem; color: var(--navy); margin-top: 5px; }
.stat .label { font-size: .78rem; color: var(--muted); font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 0; border-radius: 8px; min-height: 40px; padding: 8px 16px;
  font-weight: 700; font-size: .88rem; cursor: pointer;
}
.btn.primary { background: var(--green); color: #fff; }
.btn.primary:hover { background: var(--green2); }
.btn.navy { background: var(--navy); color: #fff; }
.btn.light { background: #e6ebf4; color: var(--navy); }
.btn.light:hover { background: #d8e0ee; }
.btn.danger { background: #ffeaea; color: var(--red); }
.btn.sm { min-height: 32px; padding: 5px 11px; font-size: .8rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; min-width: 0; }
.field label { font-size: .78rem; font-weight: 700; color: var(--navy); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 42px;
  border: 1px solid #c3cddd; border-radius: 8px;
  padding: 9px 11px; background: #fff; color: var(--text); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus {
  border-color: var(--green); box-shadow: 0 0 0 3px rgba(31,138,61,.14);
}
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.field.full { grid-column: 1 / -1; }

.flash { padding: 11px 14px; border-radius: 9px; margin-bottom: 14px; font-size: .88rem; font-weight: 600; }
.flash.success { background: #e7f5e9; color: #1d6b28; border: 1px solid #bfe3c5; }
.flash.error { background: #ffeaea; color: #9d1f1f; border: 1px solid #f3c4c4; }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 9px; }
table.data { width: 100%; border-collapse: collapse; }
table.data th, table.data td {
  text-align: left; padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: .85rem; vertical-align: middle;
}
table.data th {
  background: #f5f7fb; color: var(--navy);
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
}
table.data tr:last-child td { border-bottom: 0; }
/* Money columns line up digit-for-digit rather than drifting by glyph width. */
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }

.badge { display: inline-block; border-radius: 999px; padding: 3px 9px; font-size: .72rem; font-weight: 700; }
.badge.green { background: #e2f3e5; color: #1d6b28; }
.badge.red { background: #ffe7e7; color: #a51d1d; }
.badge.amber { background: #fff2df; color: #8a4b00; }
.badge.gray { background: #eaeef5; color: #5c667c; }

.empty { padding: 34px 14px; text-align: center; color: var(--muted); }

/* --- Login ------------------------------------------------------------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 20px; background: linear-gradient(150deg, var(--navy), #22307a); }
.auth-card { width: min(420px, 100%); background: #fff; border-radius: 14px; padding: 26px; }
.auth-card h1 { margin: 0 0 4px; color: var(--navy); font-size: 1.3rem; }
.auth-card .logo { width: 54px; height: 54px; border-radius: 12px; object-fit: cover; margin-bottom: 14px; }

@media (max-width: 900px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .topbar { gap: 8px; padding: 8px 12px; }
  .nav a { padding: 7px 9px; font-size: .8rem; }
  .main { padding: 14px 12px 50px; }
  .card { padding: 14px; }
}


/* =======================================================================
   A4 INVOICE
   Sized in millimetres so what the counter sees on screen is the sheet that
   comes out of the printer, rather than a screen layout that gets reflowed at
   print time and surprises them. Browser Print → "Save as PDF" is the PDF
   route: no server-side PDF library to install, keep patched, or have go
   stale, and the output is identical to the paper copy.
   ======================================================================= */
.a4-sheet {
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto 24px;
  background: #fff;
  color: #14203a;
  border: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(15,26,77,.10);
}
.a4-inner {
  padding: 14mm 13mm;
  min-height: 297mm;
  display: flex;
  flex-direction: column;
  font-size: 10.5pt;
  line-height: 1.45;
}

.inv-top { display: flex; justify-content: space-between; gap: 10mm; align-items: flex-start; }
.inv-seller { min-width: 0; }
.inv-shop { font-size: 16pt; font-weight: 800; color: var(--navy); letter-spacing: .01em; }
.inv-line { font-size: 9pt; color: #4a5570; }
.inv-strong { font-weight: 700; color: #14203a; }
.inv-muted { color: #7a8299; }
.inv-k { font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #7a8299; display: block; }
.inv-v { font-weight: 700; font-size: 9.5pt; }

.inv-docbox { text-align: right; border: 1.5px solid var(--navy); border-radius: 3px; padding: 5px 12px; flex: 0 0 auto; }
.inv-doctitle { font-size: 12pt; font-weight: 800; letter-spacing: .1em; color: var(--navy); white-space: nowrap; }
.inv-docsub { font-size: 8pt; text-transform: uppercase; letter-spacing: .12em; color: #7a8299; }

.inv-strip {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6mm;
  margin-top: 6mm; padding: 3mm 0;
  border-top: 1.5px solid var(--navy); border-bottom: 1px solid #ccd3e2;
}

.inv-void {
  margin-top: 4mm; padding: 2mm; text-align: center;
  border: 2px solid var(--red); color: var(--red);
  font-weight: 800; letter-spacing: .3em; font-size: 12pt;
}

.inv-party { margin-top: 5mm; }
.inv-partyname { font-size: 12pt; font-weight: 700; }

/* Items table. Fixed layout so a long product name widens its own column
   instead of squeezing the money columns into an unreadable strip. */
.inv-items { width: 100%; border-collapse: collapse; margin-top: 5mm; table-layout: fixed; }
.inv-items th, .inv-items td {
  border: 1px solid #b9c2d6; padding: 2mm 2.5mm;
  font-size: 9.5pt; vertical-align: top; word-break: break-word;
}
.inv-items thead th {
  background: #eef1f8; color: var(--navy);
  font-size: 8pt; text-transform: uppercase; letter-spacing: .05em; font-weight: 800;
}
.inv-items .c-sn { width: 8mm; text-align: center; }
.inv-items .c-hsn { width: 18mm; }
.inv-items .c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-items thead .c-num { text-align: right; }
.inv-items td.c-num { width: 22mm; }
.inv-filler td { height: 7mm; }

.inv-bottom { display: flex; gap: 8mm; margin-top: 5mm; align-items: flex-start; }
.inv-left { flex: 1 1 auto; min-width: 0; }
.inv-right { flex: 0 0 72mm; }

.inv-words { border: 1px solid #b9c2d6; padding: 2.5mm 3mm; }
.inv-note { margin-top: 3mm; font-size: 9pt; color: #4a5570; }

.inv-hsn { width: 100%; border-collapse: collapse; margin-top: 3mm; }
.inv-hsn th, .inv-hsn td { border: 1px solid #b9c2d6; padding: 1.6mm 2.5mm; font-size: 8.5pt; }
.inv-hsn thead th { background: #eef1f8; color: var(--navy); font-size: 7.5pt; text-transform: uppercase; letter-spacing: .05em; }
.inv-hsn .c-num { text-align: right; font-variant-numeric: tabular-nums; }

.inv-sum { width: 100%; border-collapse: collapse; }
.inv-sum td { padding: 1.8mm 3mm; font-size: 10pt; border-bottom: 1px solid #e2e7f1; }
.inv-sum .c-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-sum .inv-total td {
  border-top: 1.5px solid var(--navy); border-bottom: 1.5px solid var(--navy);
  font-size: 12pt; font-weight: 800; color: var(--navy);
}
.inv-sum .inv-due td { font-weight: 800; color: var(--red); }

/* Pushed to the bottom of the sheet by margin-top:auto, so the signature line
   sits where it belongs on the page however short the bill is. */
.inv-foot { margin-top: auto; padding-top: 8mm; }
.inv-terms { font-size: 8.5pt; color: #4a5570; }
.inv-signs { display: flex; justify-content: space-between; gap: 10mm; margin-top: 14mm; }
.inv-sign { text-align: center; min-width: 55mm; border-top: 1px solid #8f9ab5; padding-top: 1.5mm; }
.inv-sign span { font-size: 8.5pt; color: #4a5570; display: block; }
.inv-sign em { font-size: 7.5pt; color: #7a8299; font-style: normal; }

/* On a phone the fixed 210mm sheet would force a sideways scroll, so it is
   scaled down to fit while keeping its exact proportions. */
@media (max-width: 820px) {
  .a4-sheet { width: 100%; min-height: 0; }
  .a4-inner { padding: 6mm 5mm; min-height: 0; font-size: 10pt; }
  .inv-bottom { flex-direction: column; }
  .inv-right { flex: 1 1 auto; width: 100%; }
  .inv-strip { grid-template-columns: repeat(2, 1fr); gap: 3mm; }
}

@media print {
  @page { size: A4; margin: 0; }
  .topbar, .no-print, .flash, .boot-splash { display: none !important; }
  html, body { background: #fff; }
  .shell, .main { padding: 0; margin: 0; max-width: none; }
  /* The sheet IS the page now: no border, no shadow, no rounded corners. */
  .a4-sheet { width: 210mm; min-height: 297mm; margin: 0; border: 0; box-shadow: none; }
  .a4-inner { padding: 12mm 12mm; }
  /* Header shading must survive the printer's default of dropping backgrounds,
     or the table loses the banding that makes it readable on paper. */
  .inv-items thead th, .inv-hsn thead th {
    background: #eef1f8 !important;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .inv-items { page-break-inside: auto; }
  .inv-items tr { page-break-inside: avoid; }
  .inv-bottom, .inv-foot { page-break-inside: avoid; }
}

/* --- Help / staff manual ------------------------------------------------ */
/* Read as a document, not operated as a screen, so it gets document typography:
   a comfortable measure, real heading hierarchy, and room between ideas. */
.help-doc { max-width: 760px; line-height: 1.75; }
.help-doc h3 {
  margin: 30px 0 8px;
  padding-top: 16px;
  border-top: 2px solid var(--border);
  color: var(--navy);
  font-size: 1.12rem;
}
.help-doc h3:first-of-type { border-top: 0; padding-top: 0; margin-top: 8px; }
.help-doc h4 { margin: 18px 0 4px; color: var(--navy2); font-size: .95rem; }
.help-doc p { margin: 0 0 10px; }
.help-doc ul { margin: 0 0 12px; padding-left: 22px; }
.help-doc li { margin-bottom: 6px; }
.help-doc ul ul { margin: 6px 0 0; }
.help-doc strong { color: var(--navy); }
.help-doc code {
  background: #eef1f8; border-radius: 4px; padding: 1px 6px;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .88em;
}
.help-lead { font-size: 1.02rem; color: var(--text); }
/* The things that cause real mistakes if skimmed past, marked so they are not. */
.help-note {
  background: #fff8e8;
  border-left: 3px solid var(--amber);
  border-radius: 0 8px 8px 0;
  padding: 10px 14px;
  margin: 12px 0;
  font-size: .93rem;
}
@media print {
  .help-doc { max-width: none; }
  .help-doc h3 { page-break-after: avoid; }
  .help-note { background: #f6f6f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* --- Minimum price floor on the billing screen -------------------------- */
/* The offending line is marked in place, so with several items on the bill
   the operator can see WHICH one is under the floor without reading the
   message and hunting for it. */
tr.line-under-floor { background: #fff3f3; }
tr.line-under-floor .pRate,
tr.line-under-floor .pDisc { border-color: var(--red) !important; background: #fff; }
.floor-warn {
  margin: 10px 0 0;
  padding: 10px 13px;
  background: #ffeaea;
  border-left: 3px solid var(--red);
  border-radius: 0 8px 8px 0;
  color: #9d1f1f;
  font-size: .87rem;
  font-weight: 600;
}