/* EWKC Link web - shared UI. Brand tokens from brand/brand.css; this file adds
   app surfaces, dark mode, and the dashboard pieces. */
@import url("brand/brand.css");

:root {
  --bg: var(--ew-paper);
  --panel: var(--ew-panel);
  --ink: var(--ew-ink);
  --ink-2: #5b6570;
  --border: var(--ew-border);
  --accent: var(--ew-blue);
  --accent-text: var(--ew-blue-dark);
  --good-bg: var(--ew-green-tint);  --good-text: #4f7a1c;
  --warn-bg: #FFF4E0;               --warn-text: #8a5a00;
  --serious-bg: #FDEAE4;            --serious-text: #a3341b;
  --meter-track: #e6ecf0;
  --stripe: #E7EDF1;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181c; --panel: #1d2329; --ink: #e8edf1; --ink-2: #9aa6b0;
    --border: #303a43; --accent: #29ABE2; --accent-text: #5fc4ee;
    --good-bg: #1d3312; --good-text: #a4d96c;
    --warn-bg: #3a2c0d; --warn-text: #ffce6b;
    --serious-bg: #401d14; --serious-text: #ff9d80;
    --meter-track: #2a333b;
    --stripe: #242d35;
  }
  .ew-header { background: var(--panel); }
}

* { box-sizing: border-box; }
html, body { max-width: 100%; overflow-x: hidden; }   /* wide tables scroll inside .tablewrap, never the page */
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--ew-font-body); font-size: 15px;
}
a { color: var(--accent-text); text-decoration: none; }

.ew-header { border-bottom: 3px solid var(--ew-blue); }
.ew-header .title { font-size: 18px; font-weight: 600; }
.ew-header { position: relative; }
.ew-header nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.ew-header nav a { padding: 6px 12px; border-radius: 6px; color: var(--ink-2); font-size: 14px; }
.ew-header nav a.active, .ew-header nav a:hover { background: var(--ew-blue-tint); color: var(--ew-blue-dark); }
@media (prefers-color-scheme: dark) {
  .ew-header nav a.active, .ew-header nav a:hover { background: #123c50; color: #7dd0f5; }
}
/* Sign out + the active-login label sit apart from the page links, so they
   don't read as a 21st page in a long nav row. */
.ew-header nav .whoami {
  align-self: center; margin-left: 12px; padding-left: 12px;
  border-left: 1px solid var(--border);
  color: var(--ink-2); font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
}
/* An outlined button, not another nav link - it must not read as a page. */
.ew-header nav .signout {
  margin-left: 8px; padding: 5px 14px; border: 1px solid var(--accent);
  border-radius: 6px; color: var(--accent-text); font-weight: 600;
}
.ew-header nav a.signout:hover { background: var(--accent); color: #fff; }
/* "Install app" — same outlined treatment as Sign out (it is an action, not a
   page), but green so the two never get mis-tapped on a phone: one puts the app
   on your home screen, the other throws you out of it. */
.ew-header nav .installapp {
  margin-left: 12px; padding: 5px 14px; border: 1px solid var(--ew-green-dark);
  border-radius: 6px; color: var(--ew-green-dark); font-weight: 600;
}
.ew-header nav a.installapp:hover { background: var(--ew-green-dark); color: #fff; }
@media (prefers-color-scheme: dark) {
  .ew-header nav .installapp { border-color: #8DC63F; color: #a4d96c; }
  .ew-header nav a.installapp:hover { background: #6FA32C; color: #fff; }
}

/* Install instructions dialog (nav.js). Plain-language steps for the platforms
   that cannot do a one-tap install — which, on the plant's http:// LAN URL, is
   most of them. */
.installhelp {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(12, 20, 26, .55);
}
.installhelp .ihbox {
  background: var(--panel); color: var(--ink); border: 1px solid var(--border);
  border-radius: 12px; max-width: 420px; width: 100%; padding: 20px 22px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.installhelp h3 { margin: 0 0 12px; font-size: 17px; }
.installhelp ol { margin: 0; padding-left: 20px; line-height: 1.65; font-size: 14.5px; }
.installhelp .ihnote {
  margin: 14px 0 0; padding: 9px 11px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn-text); font-size: 13px; line-height: 1.5;
}
.installhelp .ihclose {
  margin-top: 16px; width: 100%; padding: 9px 14px; border: 0; border-radius: 8px;
  background: var(--accent); color: #fff; font: inherit; font-weight: 600; cursor: pointer;
}
@media print { .installhelp { display: none !important; } }

/* hamburger: hidden on desktop, the only nav control on phones/tablets */
.ew-header .navtoggle { display: none; }
.ew-header .navhere { display: none; }
@media (max-width: 860px) {
  .ew-header { flex-wrap: nowrap; padding: 10px 14px; position: sticky; top: 0; z-index: 60; }
  main { padding: 16px 12px 40px; }
  .controls { gap: 8px; }
  .controls input[type=search] { min-width: 0; width: 100%; }
  #presets { display: flex; flex-wrap: wrap; gap: 6px; }
  .ew-header .ew-logo { height: 32px; }
  .ew-header .title { font-size: 16px; }
  .ew-header .navhere {
    display: block; margin-left: 10px; color: var(--ink-2); font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ew-header .navtoggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    margin-left: auto; width: 44px; height: 40px; padding: 0 10px;
    background: none; border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
  }
  .ew-header .navtoggle span { display: block; height: 2px; background: var(--ink); border-radius: 2px; }
  .ew-header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 50;
    flex-direction: column; gap: 0; margin: 0; padding: 6px;
    background: var(--panel); border-bottom: 3px solid var(--ew-blue);
    box-shadow: 0 12px 24px rgba(0, 0, 0, .18); max-height: 75vh; overflow-y: auto;
  }
  .ew-header.nav-open nav { display: flex; }
  .ew-header nav a { padding: 13px 14px; font-size: 16px; border-radius: 8px; }
  .ew-header nav a + a { border-top: 1px solid var(--border); }
}

main { max-width: 1240px; margin: 0 auto; padding: 20px 16px 48px; }
h1 { font-size: 20px; margin: 6px 0 2px; }

/* Phone-size polish (the 860px block above handles the nav; this tightens the
   content itself). Tables keep their columns and scroll inside .tablewrap. */
@media (max-width: 640px) {
  h1 { font-size: 18px; }
  table { font-size: 13px; }
  th, td { padding: 6px 8px; }
  .tile { padding: 12px 14px; }
  .tile .big { font-size: 26px; }
  .controls .spacer { display: none; }        /* buttons wrap under the search box */
  .controls .ew-btn { flex: 1 1 auto; }
  .notice { padding: 12px 14px; }
}
.sub { color: var(--ink-2); font-size: 13px; margin-bottom: 18px; }

/* Stat tiles */
/* min(230px, 100%) so a track can never be wider than the phone screen */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.tile { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; }
.tile .name { font-size: 13px; color: var(--ink-2); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }
.tile .big { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.tile .big small { font-size: 15px; font-weight: 500; color: var(--ink-2); }
.tile .meta { font-size: 12.5px; color: var(--ink-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.meter { height: 6px; border-radius: 4px; background: var(--meter-track); margin: 10px 0 6px; overflow: hidden; }
.meter > i { display: block; height: 100%; border-radius: 4px; background: var(--ew-green-dark); }
.meter > i.low { background: var(--ew-blue); }

/* Tables */
.tablewrap { overflow-x: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { padding: 7px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-2); position: sticky; top: 0; background: var(--panel); }
tr:last-child td { border-bottom: none; }
/* zebra striping - every table: odd rows white, even rows panel gray.
   :where() keeps specificity at zero so status cells (scan-y, chips) still win.
   Hover uses an inset overlay so it shows even on colored cells. */
:where(tbody td) { background: var(--bg); }
:where(tbody tr:nth-child(even) td) { background: var(--stripe); }
tbody tr:hover td { box-shadow: inset 0 0 0 99px rgba(41, 171, 226, 0.10); }

/* Status + scan cells (never color-alone: text rides along) */
.chip { display: inline-block; padding: 2px 9px; border-radius: 20px; font-size: 12px; font-weight: 600; }
.chip.good { background: var(--good-bg); color: var(--good-text); }
.chip.warn { background: var(--warn-bg); color: var(--warn-text); }
.chip.serious { background: var(--serious-bg); color: var(--serious-text); }
.chip.info { background: var(--ew-blue-tint); color: var(--ew-blue-dark); }
@media (prefers-color-scheme: dark) { .chip.info { background: #123c50; color: #7dd0f5; } }
/* ECLIPSE = the native BLACK EXTRUSION (OJ Color option answered "Black").
   Deliberately reads as the thing it flags - a black frame - but carries a
   light rim so it stays a visible chip in dark mode instead of a hole. */
.chip.eclipse { background: #23292e; color: #eef2f5; box-shadow: inset 0 0 0 1px #5b666f; }
@media (prefers-color-scheme: dark) { .chip.eclipse { background: #0e1317; color: #dbe3e9; box-shadow: inset 0 0 0 1px #737f89; } }
/* $$ / RUSH markers that prefix a customer name (Access convention) */
.chip.mkr { padding: 1px 6px; border-radius: 4px; font-weight: 800; margin-right: 5px; font-size: 11px; letter-spacing: .03em; }
td.scan-y { background: var(--good-bg); color: var(--good-text); font-weight: 600; text-align: center; }
td.scan-n { color: var(--ink-2); text-align: center; }

/* Controls */
.controls { display: flex; gap: 10px; align-items: center; margin: 14px 0; flex-wrap: wrap; }
.controls input[type=search] {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--bg); color: var(--ink); min-width: 260px; font-size: 14px;
}
.spacer { flex: 1; }

/* Login */
.login-box { max-width: 360px; margin: 12vh auto; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 28px; text-align: center; }
.login-box input { width: 100%; padding: 10px 12px; margin: 14px 0; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--ink); font-size: 15px; }
.login-box .err { color: var(--serious-text); font-size: 13px; min-height: 18px; }

.notice { background: var(--panel); border: 1px solid var(--border); border-left: 4px solid var(--ew-blue); border-radius: 8px; padding: 14px 18px; margin: 16px 0; font-size: 14px; }

/* "Printed <date>" line - PRINT ONLY (see the print block); hidden on screen. */
.printstamp { display: none; }
/* Extra copies injected by printCopies() - never visible on screen, and each
   starts its own page on paper. */
.print-copy { display: none; }
/* Masthead wrapper nav.js builds around the report title: a plain block on
   screen (nothing moves), two columns in print. */
.reporthead { display: block; }

/* ===========================================================================
   PRINT / PDF
   One coherent report design, not a set of screen overrides. Rules of thumb:
   sizes in POINTS (a printer has no pixels), horizontal rules only (a full
   grid reads as a spreadsheet; rules read as a report), one accent colour,
   and every state legible in grayscale.
   =========================================================================== */
@media print {
  @page { size: landscape; margin: 11mm 10mm 10mm; }

  /* Interactive chrome has no meaning on paper. .navtoggle is the hamburger,
     which printed as an empty box in the corner. */
  /* .navtoggle = the hamburger (printed as an empty box in the corner).
     .navhere is the page-name label, which only shows at narrow widths - and a
     print layout can land either side of that breakpoint, so pin it off: the
     report title below already names the page, and "EWKC Link R2S / Ready to
     Ship" said it twice. */
  .ew-header nav, .ew-header .navtoggle, .ew-header .navhere,
  .controls, .no-print { display: none !important; }

  body {
    background: #fff; color: #1b2126;
    font-family: var(--ew-font-body);
    font-size: 8.2pt; line-height: 1.35;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  main { max-width: none; padding: 0; }

  /* --- letterhead: logo, wordmark, then the report's own title block -------
     A hairline brand rule replaces the screen's 3px bar, which printed as a
     heavy blue stripe. */
  .ew-header {
    border-bottom: .75pt solid var(--ew-blue) !important;
    padding: 0 0 5pt !important; margin: 0 0 7pt !important;
    display: flex; align-items: center; gap: 9pt;
    background: none !important; position: static !important;
  }
  .ew-header .ew-logo { height: 30pt; }
  .ew-header .title {
    font-family: var(--ew-font-brand); font-size: 10.5pt; font-weight: 600;
    color: #5b6570; letter-spacing: .01em;
  }
  /* Report identity. Access stamped Date()/Time() into every report header;
     ours also survives the browser's own header/footer being switched off. */
  h1 {
    font-family: var(--ew-font-brand); font-size: 15pt; font-weight: 700;
    letter-spacing: -.005em; margin: 0 0 1.5pt; color: #14191d;
  }
  .sub { font-size: 8.2pt; color: #3d464e; margin: 0 0 1pt; }
  /* Title left, printed-on right, sharing one baseline - the stamp stacked
     under the title left three ragged lines against acres of empty right
     margin. */
  .reporthead {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 18pt; margin: 0 0 7pt;
  }
  .printstamp {
    display: block !important; font-size: 7pt; color: #7b858d;
    letter-spacing: .03em; text-align: right; white-space: nowrap; padding-bottom: 1.5pt;
  }
  .reporthead, h1, .sub, .printstamp { break-after: avoid; page-break-after: avoid; }

  /* --- tables ------------------------------------------------------------
     width:100% + wrapping is what keeps a table on the page: a column can
     shrink to its longest WORD, so 100% always fits. Layout stays AUTO so
     columns size to content - a fixed layout hands every column an equal
     slice, which cramped "0/8" and split headers ("APPLICATIO / N") on R2S.
     Only the 17-column schedule grid opts into fixed, supplying real
     per-column percentages. */
  .tablewrap { border: none !important; overflow: visible !important; background: none !important; }
  table {
    width: 100%; table-layout: auto; border-collapse: collapse;
    font-size: 8.4pt; font-variant-numeric: tabular-nums;
  }
  /* Header band: small caps, tracked out, closed by the one heavy rule on the
     page. Reads as a header even in grayscale, where colour alone would not. */
  thead th {
    background: #eef2f5; color: #2b3238;
    font-size: 7pt; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    text-align: left; padding: 4pt 5pt; white-space: normal;
    border-top: .5pt solid #c3ccd2; border-bottom: 1pt solid #7d8890;
    position: static; overflow-wrap: normal; word-break: keep-all;
  }
  tbody td {
    padding: 3.4pt 5pt; vertical-align: top; background: #fff;
    border-bottom: .4pt solid #e2e7ea;
    white-space: normal; overflow-wrap: break-word;
  }
  /* Vertical rules stay. A ruled grid is what the Access reports print and what
     the plant reads a wide row across without losing its place - dropping them
     for horizontal hairlines alone looked tidier but read worse on paper
     (Tyler, 2026-08-12). Keep them LIGHTER than the row rules so the grid
     recedes behind the data. */
  thead th, tbody td { border-right: .4pt solid #dfe4e8; }
  tr > :last-child { border-right: none; }
  /* Close the table with the same weight that opens it. */
  tbody tr:last-child td { border-bottom: 1pt solid #7d8890; }
  tbody tr:hover td { box-shadow: none; }
  /* Numbers, money and dates are short and unreadable when broken. */
  td.num, th.num { text-align: right; white-space: nowrap; }
  /* Totals row, where a report has one. */
  tfoot td, tr.total td { border-top: 1pt solid #7d8890; font-weight: 700; background: #fff; }
  /* Links are navigation, not meaning - an order number must not read as
     highlighted text. */
  main a { color: #1b2126 !important; text-decoration: none; }

  /* Status pills: outlined and tiny in print. Filled pills print as heavy
     blobs and dominate a page of small type; the ink still carries the state. */
  .chip {
    background: #fff !important; color: #2b3238 !important;
    border: .4pt solid #aeb8bf; border-radius: 2pt;
    padding: 0 3pt; font-size: 6.4pt; font-weight: 700; letter-spacing: .04em;
  }
  .chip.serious { border-color: #b8391f; color: #a3341b !important; }   /* RUSH, overdue */
  .chip.good    { border-color: #6c9a2e; color: #4f7a1c !important; }   /* NEW, done */
  .chip.eclipse { border-color: #2b3238; color: #1b2126 !important; box-shadow: none; }  /* black extrusion */
  .chip.mkr     { padding: 0 2.5pt; font-size: 6pt; }

  thead { display: table-header-group; }   /* column headers on EVERY page */
  tr { break-inside: avoid; page-break-inside: avoid; }
  /* Each extra copy starts a fresh page. */
  .print-copy { display: block !important; break-before: page; page-break-before: always; }

  /* Panels and notices flatten - borders and fills belong to the screen. */
  .notice, .tile { border: .5pt solid #d5dbdf !important; background: #fff !important; box-shadow: none !important; }
  .tiles { gap: 6pt; }
  .tile .big { font-size: 15pt; }
  .tile .name { font-size: 6.6pt; }
}