/* ============================================================
   PRINTVENDO — PARTNER CONSOLE
   The same ink system as the refiller app and the student app
   (printvendo-web/styles/tokens.css): riso spot inks on toner black.
   One visual world by decision, so there is no light mode and every
   colour is painted explicitly.

   Unlike the refiller app this is read at a desk as often as on a
   phone -- a bursar reconciling a month -- so the layout widens to a
   dashboard and tables keep their columns, scrolling sideways on a
   narrow screen rather than collapsing into cards that cannot be
   compared down a column.
   ============================================================ */

:root {
  --ink: #0a0a0a;
  --ink-lift: #141416;
  --paper: #f2f2ef;
  --paper-2: #dededa;
  --orange: #ff6b47;
  --orange-ink: #0b0b0c;   /* never white on orange: that is 2.8:1 */
  --green: #00a95c;
  --yellow: #ffe800;
  --toner: #8e8e8a;
  --toner-dim: #5c5c59;    /* decorative only, 2.4:1 */

  --hair: rgba(242, 242, 239, 0.24);
  --hair-soft: rgba(242, 242, 239, 0.14);
  --wash: rgba(242, 242, 239, 0.06);

  --display: "Anton", "Roboto Condensed", "Avenir Next Condensed",
    "HelveticaNeue-CondensedBold", Impact, Haettenschweiler, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --type: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --t-meta: 12px;
  --t-small: 13px;
  --t-body: 15px;
  --d-md: 21px;
  --d-lg: 30px;
  --d-xl: 38px;

  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 26px; --s7: 34px;

  --edge: 0px;
  --line: 2px;

  --fast: 140ms;
  --base: 220ms;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);

  --halftone: radial-gradient(circle, rgba(242,242,239,0.03) 0.8px, transparent 1.3px);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--ink);
  background-image: var(--halftone);
  background-size: 6px 6px;
  color: var(--paper);
  font-family: var(--body);
  font-size: var(--t-body);
  -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}

[hidden] { display: none !important; }

/* ── the bar ─────────────────────────────────────────────── */

.bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s4);
  padding: var(--s3) var(--s4);
  padding-top: calc(var(--s3) + env(safe-area-inset-top));
  background: var(--ink);
  border-bottom: var(--line) solid var(--hair);
}
.wordmark {
  font-family: var(--display);
  font-size: var(--d-md);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--orange);
}
.who {
  font-family: var(--type);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--toner);
  margin-right: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tabs { display: flex; gap: var(--s1); }
.tab {
  background: transparent;
  color: var(--toner);
  min-height: 36px;
  padding: 7px var(--s3);
  font-size: var(--t-small);
}
.tab[aria-current="page"] { color: var(--paper); box-shadow: inset 0 -3px 0 var(--orange); }

/* ── layout ──────────────────────────────────────────────── */

main {
  max-width: 64rem;
  margin: 0 auto;
  padding: var(--s5) var(--s4) var(--s7);
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

h1 {
  font-family: var(--display);
  font-size: var(--d-lg);
  line-height: 1.02;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0;
  text-wrap: balance;
}
h2 {
  font-family: var(--display);
  font-size: var(--d-md);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0 0 var(--s3);
}
p { margin: 0; line-height: 1.55; }
.muted { color: var(--toner); }
.mono { font-family: var(--type); font-variant-numeric: tabular-nums; }
.small-print { font-size: var(--t-small); }
.loading { color: var(--toner); font-family: var(--type); font-size: var(--t-meta); }

.eyebrow {
  font-family: var(--type);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--toner);
  margin: 0 0 var(--s1);
}

.intro { display: flex; flex-direction: column; gap: var(--s2); max-width: 30rem; }

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s4);
}

.row { display: flex; flex-wrap: wrap; gap: var(--s2); }

/* ── headline figures ────────────────────────────────────── */

.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--s3);
}
.stat {
  background: var(--ink-lift);
  border: var(--line) solid var(--hair-soft);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}
.stat:first-child { border-left: 6px solid var(--orange); }
.figure {
  font-family: var(--display);
  font-size: var(--d-xl);
  line-height: 1.05;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* ── the chart ───────────────────────────────────────────── */

.chart-wrap { margin: 0; display: flex; flex-direction: column; gap: var(--s2); }
.chart {
  width: 100%;
  height: 200px;
  display: block;
  background: var(--wash);
  border-bottom: var(--line) solid var(--hair);
}
.bar-fill { fill: var(--paper); }
.bar-fill:hover { fill: var(--orange); }
.chart-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--s3);
  font-family: var(--type);
  font-size: var(--t-meta);
  color: var(--paper-2);
}

/* ── tables ──────────────────────────────────────────────── */

/* Tables keep their columns and scroll sideways on a narrow screen: the
   point of a table is reading down a column, and a stack of cards loses it. */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  min-width: 34rem;
}
th, td {
  text-align: left;
  padding: var(--s3) var(--s3);
  border-bottom: 1px solid var(--hair-soft);
  white-space: nowrap;
}
th {
  font-family: var(--type);
  font-size: var(--t-meta);
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--toner);
  border-bottom: var(--line) solid var(--hair);
}
td:first-child { white-space: normal; }
.num { text-align: right; font-family: var(--type); font-size: var(--t-small); }
.strong { color: var(--paper); font-weight: 600; }
tfoot td { border-top: var(--line) solid var(--hair); border-bottom: none; font-weight: 600; }

table.clickable tbody tr { cursor: pointer; }
table.clickable tbody tr:hover { background: var(--wash); }
table.clickable tbody tr:focus-visible { outline: var(--line) solid var(--paper); outline-offset: -2px; }

/* ── lists ───────────────────────────────────────────────── */

.kiosks, .ledger { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kiosks li, .ledger li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s3);
  padding: var(--s3) 0;
  border-bottom: 1px solid var(--hair-soft);
}
.kiosk-name {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.ledger li.total { border-top: var(--line) solid var(--hair); border-bottom: none; font-weight: 600; }

/* ── states ──────────────────────────────────────────────── */

.pill {
  font-family: var(--type);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 7px;
  border: 1px solid currentColor;
  white-space: nowrap;
}
.pill.big { font-size: var(--t-meta); padding: 6px 10px; }
.pill.is-due { color: var(--orange); }
.pill.is-low { color: var(--yellow); }
.pill.is-ok  { color: var(--green); }
.pill.is-off { color: var(--toner); }

/* ── the period picker ───────────────────────────────────── */

.picker { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.custom-range { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* ── buttons ─────────────────────────────────────────────── */

button {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  min-height: 48px;
  padding: 13px var(--s4);
  border: none;
  border-radius: var(--edge);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}
button:active:not(:disabled) { transform: translate(2px, 2px); }
button:disabled { opacity: 0.45; cursor: not-allowed; }
button:focus-visible { outline: var(--line) solid var(--paper); outline-offset: 3px; }

.accent { background: var(--orange); color: var(--orange-ink); }
.solid  { background: var(--paper); color: var(--ink); }
.ghost  {
  background: transparent;
  color: var(--paper);
  box-shadow: inset 0 0 0 var(--line) var(--hair);
}
.small {
  min-height: 36px;
  padding: 7px var(--s3);
  font-size: var(--t-meta);
}
.link {
  background: none;
  color: var(--toner);
  min-height: 36px;
  padding: var(--s1) 0;
  font-family: var(--type);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  align-self: flex-start;
}
.link:hover { color: var(--paper); }

/* ── forms ───────────────────────────────────────────────── */

form { display: flex; flex-direction: column; gap: var(--s3); }
label {
  font-family: var(--type);
  font-size: var(--t-meta);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--toner);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
input, select {
  font-family: var(--body);
  font-size: 16px; /* 16px or iOS zooms the page on focus */
  min-height: 44px;
  padding: 10px var(--s3);
  background: var(--ink-lift);
  color: var(--paper);
  border: var(--line) solid var(--hair);
  border-radius: var(--edge);
  color-scheme: dark;
}
input:focus-visible, select:focus-visible { outline: var(--line) solid var(--orange); outline-offset: 1px; }

/* ── sign in ─────────────────────────────────────────────── */

.signin { display: flex; flex-direction: column; gap: var(--s4); max-width: 24rem; }
.divider {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--type);
  font-size: var(--t-meta);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--toner);
}
.divider::before, .divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--hair-soft);
}
/* Google owns the shape of its button and will not be restyled. */
.google-slot { display: flex; justify-content: flex-start; min-height: 44px; }

/* ── errors and the toast ────────────────────────────────── */

.error {
  border-left: 6px solid var(--orange);
  background: var(--ink-lift);
  padding: var(--s3) var(--s4);
  font-size: var(--t-small);
  max-width: 34rem;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--s5) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 60;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--type);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  padding: var(--s3) var(--s4);
  max-width: calc(100vw - var(--s5) * 2);
}

@media (max-width: 40rem) {
  :root { --d-lg: 26px; --d-xl: 30px; }
  .tabs { order: 3; width: 100%; }
  .tab { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* A statement's files, under its heading. */
.downloads {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s4);
}