/* Inter, self-hosted (was @fontsource/inter) */
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('/fonts/inter-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 400; src: url('/fonts/inter-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('/fonts/inter-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 500; src: url('/fonts/inter-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('/fonts/inter-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 600; src: url('/fonts/inter-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('/fonts/inter-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 700; src: url('/fonts/inter-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800; src: url('/fonts/inter-latin-800-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Inter'; font-style: normal; font-display: swap; font-weight: 800; src: url('/fonts/inter-latin-ext-800-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
:root {
  --text: #6b6375;
  --text-h: #374151;
  --bg: #fff;
  --border: #e5e4e7;
  --code-bg: #F6F1E6;
  --accent: #006A4E;
  --accent-bg: rgba(0, 106, 78, 0.1);
  --accent-border: rgba(0, 106, 78, 0.5);
  --social-bg: rgba(246, 241, 230, 0.5);
  --shadow:
    rgba(17, 24, 39, 0.1) 0 10px 15px -3px, rgba(17, 24, 39, 0.05) 0 4px 6px -2px;

  --sans: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --heading: 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, Consolas, monospace;

  font: 18px/145% var(--sans);
  letter-spacing: 0.18px;
  color-scheme: light dark;
  color: var(--text);
  background: var(--bg);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  @media (max-width: 1024px) {
    font-size: 16px;
  }
}

/* Forms are light-themed everywhere; without this, macOS dark mode draws the
   date/time picker icon pale on a white field, so the field looks locked. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #9ca3af;
    --text-h: #f3f4f6;
    --bg: #374151;
    --border: #374151;
    --code-bg: #374151;
    --accent: #006A4E;
    --accent-bg: rgba(0, 106, 78, 0.15);
    --accent-border: rgba(0, 106, 78, 0.5);
    --social-bg: rgba(17, 24, 39, 0.5);
    --shadow:
      rgba(17, 24, 39, 0.4) 0 10px 15px -3px, rgba(17, 24, 39, 0.25) 0 4px 6px -2px;
  }

  #social .button-icon {
    filter: invert(1) brightness(2);
  }
}

body {
  margin: 0;
  font-family: var(--sans);
}

input,
select,
textarea,
button {
  font-family: inherit;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#app {
  width: 100%;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

h1,
h2 {
  font-family: var(--heading);
  font-weight: 500;
  color: var(--text-h);
}

h1 {
  font-size: 56px;
  letter-spacing: -1.68px;
  margin: 32px 0;
  @media (max-width: 1024px) {
    font-size: 36px;
    margin: 20px 0;
  }
}
h2 {
  font-size: 24px;
  line-height: 118%;
  letter-spacing: -0.24px;
  margin: 0 0 8px;
  @media (max-width: 1024px) {
    font-size: 20px;
  }
}
p {
  margin: 0;
}

code,
.counter {
  font-family: var(--mono);
  display: inline-flex;
  border-radius: 4px;
  color: var(--text-h);
}

/* Invoice PDF / print view */
.invoice-pdf-doc {
  max-width: 820px;
  margin: 0 auto;
  background: white;
  padding: 22px;
}

/* Status stamp across the invoice. Font size stays 120px; to fit A4, a
   two-word status ("PARTIALLY PAID") stacks on two lines, letter spacing is
   tight, and the angle is steeper, so every status stays inside the page
   and crosses the invoice details, items and totals. */
.pdf-watermark {
  position: absolute;
  transform: translate(-50%, -50%) rotate(-38deg);
  font-size: 120px;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-align: center;
  color: rgba(17, 24, 39, 0.14);
  white-space: pre;
  pointer-events: none;
  z-index: 5;
}

@media screen and (max-width: 600px) {
  .invoice-pdf-doc {
    padding: 20px;
  }
  .pdf-watermark {
    font-size: 52px;
    letter-spacing: 0.08em;
  }
  .invoice-view-page {
    padding: 12px !important;
  }
}

@page {
  size: A4;
  margin: 8mm;
}

@media print {
  /* The app shell (Production/Hospital/etc.) is a fixed 100vh flex layout
     with overflow:hidden + internal overflow-y:auto scroll panes — a real
     screen-only choice that has nothing to do with print, but since it's set
     inline on every ancestor of the printable doc, visibility:hidden alone
     doesn't undo it: the ancestor's box stays clipped to one viewport's
     height, so only whatever fit on-screen at print time came out, cutting
     the rest of a taller report/invoice off instead of flowing onto page 2+.
     Overriding overflow/height everywhere here removes that clip so the full
     document paginates normally. */
  * { overflow: visible !important; height: auto !important; max-height: none !important; }
  .no-print { display: none !important; }
  body * { visibility: hidden; }
  .invoice-pdf-doc, .invoice-pdf-doc * { visibility: visible; }
  /* relative (not static) so the status watermark stays positioned on the invoice, not the page */
  .invoice-pdf-doc { position: relative; margin: 0; width: 100%; max-width: 100%; padding: 0; box-shadow: none; border: none; }
  /* visibility:hidden keeps the box (unlike display:none) — without this the
     screen-only 32px wrapper padding still pushed the whole document down
     and in from the page edge even though it's invisible. */
  .invoice-view-page { padding: 0 !important; background: none !important; }
  .hospital-invoice-print, .hospital-invoice-print * { visibility: visible; }
  .hospital-invoice-print { position: static; margin: 0; width: 100%; max-width: 100%; padding: 0; box-shadow: none; border: none; }
  .qc-report-doc, .qc-report-doc * { visibility: visible; }
  .qc-report-doc { position: static; margin: 0 !important; width: 100%; max-width: 100%; padding: 0 !important; box-shadow: none !important; border: none !important; }
  .overall-report-doc, .overall-report-doc * { visibility: visible; }
  .overall-report-doc { position: static; margin: 0; width: 100%; max-width: 100%; padding: 0; box-shadow: none; border: none; }
  .delivery-note-doc, .delivery-note-doc * { visibility: visible; }
  .delivery-note-doc { position: static; margin: 0 !important; width: 100%; max-width: 100%; padding: 0 !important; box-shadow: none !important; border: none !important; }
  /* Same screen-only ancestor-padding gotcha as .invoice-view-page above —
     Hospital's/Logistics' main content pane has inline padding that survives
     visibility:hidden and pushes the note off the page edge during print. */
  .hospital-content-print { padding: 0 !important; }
  .receipts-compilation-doc, .receipts-compilation-doc * { visibility: visible; }
  .receipts-compilation-doc { position: static; margin: 0; width: 100%; max-width: 100%; padding: 0; box-shadow: none; border: none; }
  /* Audiology performance report: one slide per landscape page (the page
     size itself is set by PerformanceReportPrint.jsx). Colours are forced on
     because the site pills and card tints are backgrounds, which browsers
     drop from print by default. */
  .report-deck-doc, .report-deck-doc * { visibility: visible; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .report-deck-doc { margin: 0 !important; }
  .report-deck-page { padding: 0 !important; background: none !important; }
  .report-deck-sheet { margin: 0 !important; break-after: page; break-inside: avoid; }
  .report-deck-sheet:last-child { break-after: auto; }
}

code {
  font-size: 15px;
  line-height: 135%;
  padding: 4px 8px;
  background: var(--code-bg);
}
/* Trial theme — see HuierTheme.jsx. Only active while <body> has .huier-theme.
   Only the wave banner and the contact line; the screens keep their own colours
   (Imelda reverted the green recolouring, 2026-10-23). */

body.huier-theme {
  --theme-head: min(calc(100vw * 260 / 4001), 110px);
  --theme-foot: 26px;
  --theme-green: #004D39;
  --theme-green-dark: #004D39;
  --theme-tint: #E6F0EC;
  --theme-tint-2: #B3D4C7;
  --theme-slate: #44546A;
  padding-top: var(--theme-head);
  padding-bottom: var(--theme-foot);
  box-sizing: border-box;
}

.huier-theme-header {
  position: fixed; top: 0; left: 0; right: 0;
  height: var(--theme-head);
  background: #fff url('/huier-theme-header.jpg') left top / 100% auto no-repeat;
  z-index: 1;
  pointer-events: none;
}
.huier-theme-footer {
  position: fixed; bottom: 0; left: 0; right: 0;
  height: var(--theme-foot);
  display: flex; align-items: center; justify-content: center; gap: 22px;
  background: #fff; border-top: 1px solid #eef0ee;
  color: #8a8a8a; font: 700 12px/1 'Inter', 'Segoe UI', sans-serif; letter-spacing: 0.02em;
  z-index: 1;
}

/* Full-screen shells now sit between the banner and the contact line. */
body.huier-theme [style^="height: 100vh"],
body.huier-theme [style*=" height: 100vh"]:not([style*="min-height: 100vh"]) {
  height: calc(100vh - var(--theme-head) - var(--theme-foot)) !important;
}
body.huier-theme [style*="min-height: 100vh"] {
  min-height: calc(100vh - var(--theme-head) - var(--theme-foot)) !important;
}

@media print {
  body.huier-theme { padding: 0 !important; }
  .huier-theme-header, .huier-theme-footer { display: none !important; }
}

/* Alpine: hide until initialised */
[x-cloak] { display: none !important; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes spin { to { transform: rotate(360deg) } }
.hover-row:hover { background: #f9fafb; }

/* ── Page frame (2026-10-27): left column, thin top bar over the right side,
   grey right side with a green band and the page in a white card. The frame
   (components/sidebar.blade.php) marks the page's outer box and content box. ── */
[data-shell-wrap] { padding: 0 !important; box-sizing: border-box !important; height: 100vh !important; overflow: hidden !important; display: flex !important; background: #E8E7E7 !important; }
[data-shell-main] { margin-top: 52px !important; height: calc(100vh - 52px) !important; min-height: 0 !important; overflow-y: auto !important; flex: 1 1 auto !important; min-width: 0 !important; padding: 0 !important; background: #E8E7E7 !important; position: relative; display: block !important; }
.hu-topbar { position: fixed; top: 0; left: 256px; right: 0; height: 52px; background: #fff; border-bottom: 1px solid #e5e7eb; display: flex; align-items: center; gap: 14px; padding: 0 20px 0 24px; z-index: 3000; font-family: 'Inter', 'Segoe UI', sans-serif; box-sizing: border-box; }
.hu-band { background: #006A4E; padding: 14px 24px 58px; min-height: 28px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hu-card { position: relative; margin: -44px 20px 20px; background: #fff; border-radius: 14px; padding: 18px 22px 22px; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06); min-height: calc(100% - 64px); box-sizing: border-box; }
/* A full-screen view inside a page (Production's open order): no band, no card. */
[data-shell-main]:has(.hu-fullview) .hu-band { display: none; }
[data-shell-main]:has(.hu-fullview) .hu-card { margin: 0; border-radius: 0; padding: 0; box-shadow: none; min-height: 100%; height: 100%; display: flex; flex-direction: column; }
.hu-pop { position: absolute; top: calc(100% + 8px); right: 0; width: 340px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; box-shadow: 0 12px 32px rgba(17, 24, 39, 0.12); padding: 12px; z-index: 3100; text-align: left; }
.hu-nav-row:hover { background: #E6F0EC; }
.hu-nav-row.on:hover { background: #006A4E; }
@media print { [data-shell-main] { margin-top: 0 !important; height: auto !important; overflow: visible !important; background: #fff !important; } [data-shell-wrap] { height: auto !important; overflow: visible !important; } .hu-card { margin: 0; box-shadow: none; padding: 0; } }

/* Every table on a page is centred, headings and cells (Imelda, 2026-10-27).
   Printed documents keep their own layout. Same rule as the React index.css. */
.hu-card th:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *) {
  text-align: center !important;
  vertical-align: middle !important;
}

/* Inside tables, colour goes on the words only (Imelda, 2026-10-27: "such
   bold colours no — just the words"): labels such as Pending/Paid and buttons
   such as Process lose their filled or shaded background and keep their
   coloured text. Printed documents are left as they are. */
.hu-card td [style*="background:#006A4E" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background: #006A4E" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color:#006A4E" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color: #006A4E" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: #006A4E !important; font-weight: 700 !important;
}
.hu-card td [style*="background:#004D39" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background: #004D39" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color:#004D39" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color: #004D39" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: #004D39 !important; font-weight: 700 !important;
}
.hu-card td [style*="background:#B19758" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background: #B19758" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color:#B19758" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color: #B19758" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: #B19758 !important; font-weight: 700 !important;
}
.hu-card td [style*="background:#7A6634" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background: #7A6634" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color:#7A6634" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color: #7A6634" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important; color: #7A6634 !important; font-weight: 700 !important;
}
.hu-card td [style*="background:#E6F0EC" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background: #E6F0EC" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color:#E6F0EC" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color: #E6F0EC" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
.hu-card td [style*="background:#B3D4C7" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background: #B3D4C7" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color:#B3D4C7" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color: #B3D4C7" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
.hu-card td [style*="background:#F6F1E6" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background: #F6F1E6" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color:#F6F1E6" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color: #F6F1E6" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}
.hu-card td [style*="background:#E7DCC2" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background: #E7DCC2" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color:#E7DCC2" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *),
.hu-card td [style*="background-color: #E7DCC2" i]:not(:is(.invoice-pdf-doc, .delivery-note-doc, .qc-report-doc, .report-slide) *) {
  background: transparent !important; border-color: transparent !important; box-shadow: none !important;
}

/* Gold filters: the placeholder words are gold too (H.GOLD_FILTER). */
.hu-gold-filter::placeholder { color: #B19758; opacity: 1; }
.hu-gold-filter::-webkit-datetime-edit { color: #B19758; }

/* Every filter is gold: gold words on a plain white box (H.markFilters tags them). */
.hu-card .hu-gold-filter { background-color: #fff !important; border-color: #e5e7eb !important; color: #B19758 !important; font-weight: 600 !important; }
.hu-card select.hu-gold-filter option { color: #374151; }