/* ---------------------------------------------------------------------------
   Theme: surgical-drape green, steel and cool paper.
   Font: Atkinson Hyperlegible (made for low-vision readers), stored locally
   because the hospital LAN has no internet. SIL Open Font License.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../vendor/fonts/atkinson-hyperlegible-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("../vendor/fonts/atkinson-hyperlegible-700.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
:root {
  --drape: #1F5E57;        /* surgical drape green: brand, buttons, links */
  --drape-dark: #164742;
  --drape-light: #DCEBE7;  /* tag, highlights */
  --steel: #5B6770;        /* secondary text */
  --paper: #F6F8F7;        /* page background */
  --ink: #1B2428;          /* main text */
  --amber: #A86A12;        /* waiting / needs action */
  --bs-body-font-family: "Atkinson Hyperlegible", "Segoe UI", Arial, sans-serif;
  --bs-body-color: var(--ink);
  --bs-link-color-rgb: 31, 94, 87;
  --bs-link-hover-color-rgb: 22, 71, 66;
}
.navbar-store { background: var(--drape); }
.navbar-store .nav-link { white-space: nowrap; }
.btn-primary {
  --bs-btn-bg: var(--drape); --bs-btn-border-color: var(--drape);
  --bs-btn-hover-bg: var(--drape-dark); --bs-btn-hover-border-color: var(--drape-dark);
  --bs-btn-active-bg: var(--drape-dark); --bs-btn-active-border-color: var(--drape-dark);
  --bs-btn-disabled-bg: var(--drape); --bs-btn-disabled-border-color: var(--drape);
}
.btn-outline-primary {
  --bs-btn-color: var(--drape); --bs-btn-border-color: var(--drape);
  --bs-btn-hover-bg: var(--drape); --bs-btn-hover-border-color: var(--drape);
  --bs-btn-active-bg: var(--drape-dark); --bs-btn-active-border-color: var(--drape-dark);
}
.form-control:focus, .form-select:focus { border-color: var(--drape); box-shadow: 0 0 0 .2rem rgba(31, 94, 87, .25); }

body { background: var(--paper); }
.card { border: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.lines-table select { min-width: 160px; }
.lines-table .item-code { min-width: 360px; }
.lines-table input[type=number] { min-width: 90px; max-width: 130px; }
.lines-table input[type=text] { min-width: 120px; }

/* Distribution register: keep header row and first columns visible while scrolling */
.register-wrap { max-height: 75vh; overflow: auto; background: #fff; }
.register { font-size: .8rem; border-collapse: separate; border-spacing: 0; }
.register th, .register td { border: 1px solid #dee2e6; padding: 2px 5px; white-space: nowrap; background: #fff; }
.register thead th { position: sticky; top: 0; z-index: 2; background: #ddebf7; vertical-align: bottom; }
.register .unit-head { writing-mode: vertical-rl; transform: rotate(180deg); max-height: 160px; white-space: nowrap; }
.register .sticky-1 { position: sticky; left: 0; z-index: 1; min-width: 95px; }
.register .sticky-2 { position: sticky; left: 95px; z-index: 1; min-width: 260px; white-space: normal; }
.register thead .sticky-1, .register thead .sticky-2 { z-index: 3; }
.register .num { text-align: right; }
.register .store { background: #e2efda; }
.register .total { background: #fff2cc; font-weight: 600; }
.register .total-row td { background: #fff2cc; font-weight: 700; }

@media print {
  body { background: #fff; }
  .register-wrap { max-height: none; overflow: visible; }
  .register { font-size: 7pt; }
  .register thead th, .register .sticky-1, .register .sticky-2 { position: static; }
  .card { box-shadow: none; }
}

/* Summary at the end of a report: keep it in one piece and narrow */
.summary-card { max-width: 520px; break-inside: avoid; page-break-inside: avoid; }

/* Hospital / store heading on reports */
.report-header { line-height: 1.25; }
.report-hospital { font-size: 1.15rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.report-store { font-size: 1rem; font-weight: 600; }
.report-title { font-size: 1.05rem; font-weight: 700; margin-top: .35rem; text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Home page
   --------------------------------------------------------------------------- */
.home { max-width: 1180px; margin: 0 auto; }
.letterhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem;
  padding-bottom: .9rem; margin-bottom: 1.6rem; border-bottom: 3px double var(--drape); }
.letterhead-hospital { font-size: clamp(1.45rem, 2.6vw, 2.1rem); font-weight: 700; line-height: 1.15;
  margin: 0; color: var(--ink); }
.letterhead-store { font-size: 1.15rem; margin: .2rem 0 0; color: var(--drape); }
.letterhead-date { margin: 0; color: var(--steel); white-space: nowrap; }

/* The inventory tag: notched left end with a punched hole, like the tags tied to trays */
.tag { display: flex; align-items: stretch; background: var(--drape-light); border: 2px solid var(--drape);
  border-radius: 0 14px 14px 0; position: relative; margin-bottom: 1rem;
  clip-path: polygon(30px 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px), 0 30px); }
.tag-hole { flex: 0 0 74px; position: relative; border-right: 2px dashed rgba(31, 94, 87, .45); }
.tag-hole::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px;
  transform: translate(-40%, -50%); border-radius: 50%; background: var(--paper); border: 2px solid var(--drape); }
.tag-body { flex: 1; padding: 1.1rem 1.4rem 1rem; }
.tag-label { display: block; font-size: 1.3rem; font-weight: 700; color: var(--drape-dark); margin-bottom: .45rem; }
.tag-row { display: flex; gap: .6rem; }
.tag-input { flex: 1; min-width: 0; font: inherit; font-size: 1.25rem; padding: .65rem .9rem; color: var(--ink);
  background: #fff; border: 2px solid #9fbfb8; border-radius: 8px; }
.tag-input:focus { outline: 3px solid var(--drape); outline-offset: 1px; border-color: var(--drape); }
.tag-button { font: inherit; font-size: 1.15rem; font-weight: 700; padding: .6rem 1.6rem; color: #fff;
  background: var(--drape); border: 0; border-radius: 8px; }
.tag-button:hover { background: var(--drape-dark); }
.tag-button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.tag-hint { margin: .5rem 0 0; color: var(--steel); font-size: .95rem; }

.position { font-size: 1.1rem; line-height: 1.6; max-width: 70ch; margin: 0 0 2rem; color: var(--ink); }
.position strong { color: var(--drape-dark); }

.home-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem 2rem;
  margin-bottom: 2rem; }
.home-columns-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.home-section h2 { font-size: 1.15rem; font-weight: 700; margin: 0 0 .7rem; color: var(--ink); }
.home-section.quiet h2 { font-size: 1rem; color: var(--steel); }
.waiting { border-left: 4px solid var(--amber); padding-left: 1rem; align-self: start; }
.waiting h2 { color: var(--amber); }

.doc-list { list-style: none; padding: 0; margin: 0 0 .5rem; }
.doc-list li { padding: .4rem 0; border-bottom: 1px solid #e3e8e6; }
.doc-list li:last-child { border-bottom: 0; }
.doc-list a { font-weight: 700; text-decoration: none; }
.doc-list a:hover, .doc-list a:focus-visible { text-decoration: underline; }
.doc-meta { display: block; color: var(--steel); font-size: .92rem; }
.empty { color: var(--steel); }

.start-list { display: grid; gap: .6rem; }
.start-link { display: block; padding: .75rem 1rem; text-decoration: none; color: var(--ink); background: #fff;
  border: 1px solid #cfdcd8; border-radius: 8px; }
.start-link:hover { border-color: var(--drape); }
.start-link:focus-visible { outline: 3px solid var(--drape); outline-offset: 2px; }
.start-title { display: block; font-weight: 700; color: var(--drape-dark); }
.start-desc { display: block; color: var(--steel); font-size: .93rem; }

.category-table { width: 100%; }
.category-table td { padding: .3rem 0; border-bottom: 1px solid #e3e8e6; }
.category-table td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 575.98px) {
  .letterhead { flex-direction: column; align-items: flex-start; }
  .tag { clip-path: none; border-radius: 12px; }
  .tag-hole { display: none; }
  .tag-row { flex-direction: column; }
}

/* Scan box in the top bar: a USB scanner types the number and presses Enter */
.scan-box .form-control { width: 11rem; background: rgba(255, 255, 255, .92); border: 0; }
@media (min-width: 1200px) { .scan-box .form-control { width: 15rem; } }
.scan-box .form-control:focus { background: #fff; box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .45); }

/* Stock verification: scanning page */
.scan-page { max-width: 760px; }
.scan-entry .form-control-lg { font-size: 1.4rem; letter-spacing: .02em; }
.scan-status { border-radius: 10px; padding: 1rem 1.2rem; background: #fff; border: 2px solid #cfdcd8; }
.scan-status-title { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.scan-status-detail { color: var(--steel); }
.scan-good { border-color: var(--drape); background: var(--drape-light); }
.scan-good .scan-status-title { color: var(--drape-dark); }
.scan-warn { border-color: var(--amber); background: #fbf1e1; }
.scan-warn .scan-status-title { color: var(--amber); }
.scan-bad { border-color: #b02a37; background: #f8e1e3; }
.scan-bad .scan-status-title { color: #b02a37; }
.camera-box { max-width: 420px; margin-bottom: 1rem; }
#camera-view { border-radius: 8px; overflow: hidden; }
/* Results table colours */
.verify-table .result-short td { background: #f8e1e3; }
.verify-table .result-extra td { background: #fbf1e1; }
.verify-table .result-not_counted td { color: var(--steel); }
@media print { .verify-table .result-short td, .verify-table .result-extra td { background: none; } }