/* ==========================================================================
   Dimax Software Invoicing — global layout and design tokens
   ========================================================================== */

:root{
  --brand:#ff3d14;          /* Dimax orange — structural headers */
  --brand-tint:#fdeae5;     /* soft orange tint for the banking box */
  --accent:#3a3a3c;         /* charcoal — primary buttons, total row */
  --accent-dk:#222224;
  --ink:#333;
  --muted:#666;
  --line:#d8dde1;
  --bg:#f4f6f8;
  --radius:6px;

  /* line item column widths */
  --col-code:58px;
  --col-qty:46px;
  --col-price:68px;
  --col-disc:46px;
  --col-tax:50px;
  --col-nett:82px;
  --col-del:24px;
}

*{box-sizing:border-box}

/* The UA rule for [hidden] loses to any author `display`, so restate it. */
[hidden]{display:none!important}

body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:12px;
  color:var(--ink);
  background:var(--bg);
}

input,select,textarea,button{font-family:inherit;font-size:12px;color:var(--ink)}
input,select,textarea{
  border:1px solid transparent;border-radius:4px;
  padding:3px 5px;background:transparent;width:100%;
}
input:hover,select:hover,textarea:hover{border-color:var(--line)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);background:#fff}
textarea{resize:vertical;line-height:1.5;color:var(--muted)}

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */

.toolbar{
  position:sticky;top:0;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:8px}
.brand-logo{height:30px;width:auto;display:block}
.actions{display:flex;gap:8px;align-items:center}

.btn{
  cursor:pointer;border:1px solid var(--line);background:#fff;
  padding:7px 14px;border-radius:var(--radius);font-size:13px;width:auto;
}
.btn:hover{background:#f0f2f4}
.btn:active{transform:scale(.98)}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn.primary:hover{background:var(--accent-dk)}
.btn.small{padding:5px 10px;font-size:12px;margin-top:8px}
.btn-link{text-decoration:none;display:inline-block;color:var(--ink)}
.btn-link.primary{color:#fff}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px}
.icon-btn svg{display:block}

/* --------------------------------------------------------------------------
   Page shell and editorial content
   -------------------------------------------------------------------------- */

.page{max-width:820px;margin:20px auto;padding:0 16px}

.intro{margin:8px 0 20px;text-align:center}
.intro h1{font-size:30px;font-weight:700;color:var(--ink);margin:0 0 8px}
.intro p{font-size:16px;color:var(--muted);max-width:640px;margin:0 auto;line-height:1.6}

.noscript{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:16px;text-align:center;font-size:14px;
}

.seo-content{margin:36px auto 0;max-width:760px;color:var(--accent);line-height:1.7}
.seo-content h2{font-size:22px;font-weight:600;margin:28px 0 10px;color:var(--ink)}
.seo-content h3{font-size:16px;font-weight:600;margin:18px 0 4px;color:var(--ink)}
.seo-content p{margin:0 0 10px}
.seo-content ul,.seo-content ol{margin:0 0 10px;padding-left:22px}
.seo-content li{margin:4px 0}

/* Developer credit — sits below the tool, never competes with it. */
.credit{
  max-width:760px;margin:36px auto 0;
  background:#fff;border:1px solid var(--line);
  border-left:3px solid var(--brand);border-radius:8px;
  padding:20px 22px;line-height:1.7;color:var(--accent);
}
.credit h2{margin:0 0 8px;font-size:19px;font-weight:600;color:var(--ink)}
.credit p{margin:0 0 8px}
.credit-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}

.site-foot{
  max-width:760px;margin:30px auto 60px;
  font-size:13px;color:var(--muted);
  border-top:1px solid var(--line);padding-top:14px;
}
.site-foot p{margin:0}

/* guide page */
.guide{margin-top:24px}
.breadcrumb{font-size:13px;color:var(--muted)}
.guide-title{font-size:30px;font-weight:700;color:var(--ink);margin:6px 0 14px}
.cta{margin-top:6px}

/* --------------------------------------------------------------------------
   Invoice document
   -------------------------------------------------------------------------- */

/* Document settings — on-screen controls, never printed. */
.doc-settings{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  padding:12px 14px;margin-bottom:12px;
}
.doc-type{
  border:none;padding:0;margin:0 0 12px;
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
}
.doc-type legend{
  float:left;width:100%;padding:0;margin:0 0 6px;
  font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;
}
.radio{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13px;font-weight:600}
.radio input{width:auto;margin:0;accent-color:var(--brand);inline-size:16px;block-size:16px}

.toggle{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:13px;font-weight:600}
.toggle input{width:auto;margin:0;accent-color:var(--brand);inline-size:16px;block-size:16px}
.toggle-hint{margin:6px 0 0 25px;color:var(--muted);line-height:1.5;max-width:64ch}
.storage-note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line);
  color:var(--muted);line-height:1.5;
}
.storage-note span{flex:1;min-width:15rem}
.storage-note .btn{margin-top:0}

.doc{
  background:#fff;border:1px solid var(--line);border-radius:8px;
  overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);
}
.hd{
  background:var(--brand);color:#fff;text-align:center;
  font-size:20px;font-weight:600;padding:12px;margin:0;
}
.sec{padding:14px}

.top{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.box{border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.box.mt{margin-top:6px}
/* Logo slot. The image prints; the prompt and remove button do not. */
.logo-space{min-height:36px;display:flex;align-items:flex-start;gap:6px;margin-bottom:4px}
.logo{max-height:52px;max-width:200px;width:auto;height:auto;display:block;object-fit:contain}
.logo-pick{position:relative;display:inline-flex;align-items:center;cursor:pointer;width:auto}
.logo-hint{
  display:inline-block;padding:6px 10px;font-size:11px;color:var(--muted);
  border:1px dashed var(--line);border-radius:var(--radius);
}
.logo-pick:hover .logo-hint{border-color:var(--accent);color:var(--ink)}
/* Visually hidden but still focusable, so the picker is keyboard reachable. */
.logo-input{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.logo-input:focus-visible+*,.logo-pick:focus-within .logo-hint{
  border-color:var(--accent);border-style:solid;color:var(--ink);
}
.logo-remove{
  cursor:pointer;border:none;background:transparent;color:#c0392b;
  font-size:15px;line-height:1;padding:2px;width:auto;
}
.logo-remove:hover{color:#e74c3c}
.name{font-weight:600;font-size:13px;margin-bottom:3px}
.vat{color:var(--muted);margin:5px 0 0;display:flex;align-items:center;gap:4px}
.vat input{width:130px}
.vat .inline{flex:1}
.deliver-lbl{font-weight:600;margin:8px 0 0}

/* date / due / document number */
.pill{
  display:grid;grid-template-columns:110px 1fr;margin-bottom:6px;
  border:1px solid var(--brand);border-radius:5px;overflow:hidden;
}
.pill .k{background:var(--brand);color:#fff;padding:8px 9px}
.pill .v{display:flex;align-items:center;padding:0 4px;min-width:0}
.pill .v input{text-align:right;font-weight:600}
.pill .v input[type=date]{text-align:left;font-weight:600;min-width:0}

/* reference strip */
.strip{
  display:grid;grid-template-columns:72px 1fr 78px 96px 90px 92px;
  margin:12px 0 0;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
}
/* Without VAT only Account, Your Reference and Sales Code remain. */
.strip.no-vat{grid-template-columns:72px 1fr 90px}
.strip>div{border-right:1px solid var(--line);min-width:0}
.strip>div:last-child{border-right:none}
.strip .sh{background:var(--brand);color:#fff;padding:6px 8px;font-size:11px}
.strip .sv{padding:3px 5px;margin:0}

/* line items */
.items-scroll{overflow-x:auto}
.items{width:100%;min-width:560px;border-collapse:collapse;table-layout:fixed;margin-top:14px}
.items col.c-code{width:var(--col-code)}
.items col.c-qty{width:var(--col-qty)}
.items col.c-price{width:var(--col-price)}
.items col.c-disc{width:var(--col-disc)}
.items col.c-tax{width:var(--col-tax)}
.items col.c-nett{width:var(--col-nett)}
.items col.c-del{width:var(--col-del)}

.items thead th{
  background:var(--brand);color:#fff;font-size:11px;font-weight:500;
  text-align:left;padding:8px 4px;
}
.items thead th:first-child{padding-left:6px}
.items thead th:last-child{padding-right:6px}
.items thead th:first-child{border-radius:5px 0 0 5px}
.items thead th:last-child{border-radius:0 5px 5px 0}
.items th.r,.items td.r{text-align:right}
/* Tight horizontal padding: these columns are narrow and the inputs need
   every pixel, or values like "DEV-01" clip. */
.items tbody td{padding:6px 2px;border-bottom:1px solid var(--line);vertical-align:middle}
.items tbody td:first-child{padding-left:6px}
.items tbody td:last-child{padding-right:6px}
.items td input{padding:3px 3px}
.items td input.num{text-align:right}
/* The numeric columns are narrow; spin buttons would eat the digits. */
.items input[type=number]{appearance:textfield;-moz-appearance:textfield}
.items input[type=number]::-webkit-outer-spin-button,
.items input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.items td .detail{margin-top:3px;color:var(--muted)}
.items td input+input{margin-top:3px}
.nett{font-size:12px}

.del{
  cursor:pointer;border:none;background:transparent;color:#c0392b;
  font-size:15px;line-height:1;padding:0;width:auto;
}
.del:hover{color:#e74c3c}

/* footer: banking + totals */
.foot{display:grid;grid-template-columns:1fr 310px;gap:14px;margin-top:16px}
.bank{
  background:var(--brand-tint);color:var(--accent);
  border-left:3px solid var(--accent);border-radius:var(--radius);
  padding:12px;line-height:1.7;display:flex;flex-direction:column;
}
.bank input{color:var(--accent)}
.bank input:hover{border-color:#e0b6ab}
.copyright{margin:auto 0 0;padding-top:10px;opacity:.7}

.tot{margin:0}
.tot .row{display:grid;grid-template-columns:1fr 116px;border:1px solid var(--line);border-top:none}
.tot .row:first-child{border-top:1px solid var(--line);border-radius:6px 6px 0 0;overflow:hidden}
.tot .row:last-child{border-radius:0 0 6px 6px;overflow:hidden}
.tot .k{background:var(--bg);padding:9px 10px;display:flex;align-items:center;margin:0}
.tot .val{padding:9px 10px;text-align:right;font-weight:500;margin:0}
.tot .g .k,.tot .g .val{background:var(--accent);color:#fff;font-weight:600;font-size:14px}

/* --------------------------------------------------------------------------
   Preview dialog
   -------------------------------------------------------------------------- */

.overlay{
  width:100%;max-width:100%;height:100%;max-height:100%;
  padding:0;border:none;background:transparent;overflow:hidden;
}
.overlay::backdrop{background:rgba(20,30,40,.55)}
.overlay[open]{display:flex;flex-direction:column}

.overlay-bar{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 20px;background:#fff;border-bottom:1px solid var(--line);
}
.overlay-title{font-weight:600;font-size:14px;margin:0}
.overlay-scroll{flex:1;overflow:auto;padding:24px;display:flex;justify-content:center}

.preview{
  width:794px;min-height:1123px;      /* A4 at 96dpi */
  background:#fff;box-shadow:0 4px 20px rgba(0,0,0,.25);
  align-self:flex-start;flex:none;
  /* Set by openPreview() so the fixed-width page fits a narrow screen.
     `zoom` rather than `transform` so the page still occupies its real size
     and the dialog scrolls properly. Defaults to 1 if never set. */
  zoom:var(--preview-scale, 1);
}

/* --------------------------------------------------------------------------
   Mobile line entry sheet
   -------------------------------------------------------------------------- */

.sheet{
  border:none;padding:0;background:#fff;
  /* Centred in the viewport, inset from the edges at every width. */
  margin:auto;
  width:calc(100% - 32px);max-width:460px;
  max-height:calc(100dvh - 32px);overflow:auto;
  border-radius:14px;
}
.sheet::backdrop{background:rgba(20,30,40,.55)}
.sheet[open]{display:block}

.sheet-form{padding:18px;display:grid;gap:12px}
.sheet-title{margin:0;font-size:17px;font-weight:600}

.field{display:grid;gap:4px}
.field>span{
  font-size:11px;font-weight:600;color:var(--muted);
  text-transform:uppercase;letter-spacing:.03em;
}
/* 16px keeps iOS Safari from zooming the page when a field takes focus. */
.field input{
  border:1px solid var(--line);border-radius:var(--radius);
  padding:10px;font-size:16px;background:#fff;
}
.field input:focus{border-color:var(--accent);outline:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field-row.single{grid-template-columns:1fr}

.sheet-actions{display:flex;gap:10px;margin-top:4px}
.sheet-actions .btn{flex:1;padding:11px;font-size:15px}

/* Off-screen stage the PDF exporter rasterises. Must stay rendered, so it is
   moved out of view rather than hidden with display:none. */
.pdf-stage{
  position:fixed;left:-10000px;top:0;
  width:794px;background:#fff;
}

/* --------------------------------------------------------------------------
   Static (read-only) rendering, shared by the preview and the PDF
   -------------------------------------------------------------------------- */

.static{border:none;box-shadow:none;border-radius:0}
.static .sec{padding:18px}
.static .addr{white-space:pre-line;color:var(--muted);line-height:1.5}
.static .pill .v span{display:block;text-align:right;font-weight:600;padding:8px}
.static .strip .sv{padding:6px 8px}
.static .items{min-width:0}
.static .items tbody td{vertical-align:top}
.static .bank .line{color:var(--accent)}
.static .items tbody tr,.static .foot,.static .strip{page-break-inside:avoid;break-inside:avoid}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print{
  body{background:#fff}
  .no-print{display:none!important}
  .page{margin:0;max-width:none;padding:0}
  .doc{border:none;box-shadow:none;border-radius:0}
  .items-scroll{overflow:visible}
  input,select,textarea{border-color:transparent!important;background:transparent!important}
}

/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

/* Every rule that reflows the invoice is scoped to `.doc:not(.static)` — the
   EDITABLE document only.

   Media queries key off the viewport, not the element. The preview dialog and
   the PDF stage both render a fixed 794px A4 document, so on a phone these
   rules would reflow *that* too and the exported invoice would come out
   mobile-shaped. A document must print the same whatever it was made on. */

@media (max-width:640px){
  .toolbar{padding:10px 12px;gap:10px}
  .brand-logo{max-width:110px;object-fit:contain}
  .actions{flex-wrap:wrap;justify-content:flex-end}
  .btn{padding:6px 10px}

  .doc:not(.static) .top{grid-template-columns:1fr}
  .doc:not(.static) .foot{grid-template-columns:1fr}

  /* Reference strip reflows to two columns, each cell keeping its orange
     label above its value. Hairlines come from a 1px gap over a line-coloured
     background, so every cell is boxed however the grid wraps. */
  .doc:not(.static) .strip,
  .doc:not(.static) .strip.no-vat{grid-template-columns:1fr 1fr;gap:1px;background:var(--line)}
  .doc:not(.static) .strip>div{border-right:none;background:#fff}

  /* Incl/Excl drives every figure on the document, so it leads on mobile
     instead of being buried in the last cell. Visual order only — the DOM
     order is what the printed document uses. */
  .doc:not(.static) .strip>[data-strip="taxMode"]{order:-1}

  /* An odd number of cells would leave a gap showing the container's line
     colour, so the last one spans both columns. */
  .doc:not(.static) .strip>div:last-child:nth-child(odd){grid-column:1 / -1}
  .doc:not(.static) .strip .sh{padding:7px 8px}
  .doc:not(.static) .strip .sv{padding:6px 4px}

  /* iOS Safari zooms the whole page when a control with a font smaller than
     16px takes focus, which reads as the layout jumping upward. Line item
     inputs are exempt: they are not tappable here, since the entry sheet
     handles them, so they never trigger it. */
  .doc:not(.static) input,
  .doc:not(.static) select,
  .doc:not(.static) textarea{font-size:16px}
  .doc:not(.static) .items input{font-size:12px}

  /* The VAT field's fixed 130px clips at the larger font; let it fill instead. */
  .doc:not(.static) .vat input{width:auto;flex:1;min-width:0}

  /* Line item cells are too small to hit accurately, so the row itself is the
     tap target and opens the entry sheet. The inputs stay in the DOM (and
     stay keyboard-reachable) but ignore pointer events. */
  .doc:not(.static) .items tbody tr{cursor:pointer}
  .doc:not(.static) .items tbody td input{pointer-events:none;background:transparent}
  .doc:not(.static) .items tbody tr:active td{background:#f0f2f4}
  .doc:not(.static) .items tbody .c-del{pointer-events:auto}

  .intro h1{font-size:24px}
  .guide-title{font-size:24px}
}