/* Print Job Card — styles. Mobile first: the shop floor uses phones. */

:root {
  /* Read off the company mark in public/om-mark.png, not guessed. */
  --brand: #e00070;
  --accent: var(--brand);

  --ink: #1d2733;
  --muted: #5e6b7a;
  --line: #d8dee6;
  --bg: #f4f6f9;
  --panel: #ffffff;
  --blue: var(--accent);
  --blue-soft: #fbe8f1;
  --blue-soft: color-mix(in srgb, var(--accent) 12%, var(--panel));
  --red: #b3261e;
  --amber: #8a5a00;
  --green: #1d6b3f;
  --side: 248px;
  --base: 15px;
}

/* Each person picks these for themselves; they are kept on their own device. */
:root[data-accent="navy"]   { --brand: #14467a; }
:root[data-accent="teal"]   { --brand: #00737f; }
:root[data-accent="indigo"] { --brand: #4f46e5; }

:root[data-font="small"]  { --base: 14px; }
:root[data-font="normal"] { --base: 15px; }
:root[data-font="medium"] { --base: 16.5px; }
:root[data-font="large"]  { --base: 18px; }

/* Dark, written once and used twice: when the device asks for it, and when
   the person has chosen it outright. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #e6ebf1;
    --muted: #9aa7b6;
    --line: #2d3845;
    --bg: #141a21;
    --panel: #1c2430;
    --accent: color-mix(in srgb, var(--brand) 55%, white);
  }
}
:root[data-theme="dark"] {
  --ink: #e6ebf1;
  --muted: #9aa7b6;
  --line: #2d3845;
  --bg: #141a21;
  --panel: #1c2430;
  --accent: color-mix(in srgb, var(--brand) 55%, white);
}

* { box-sizing: border-box; }

/* Must come before the display rules below: an author "display" rule beats the
   browser's own styling for the hidden attribute, so without this the header
   and the panels stay on screen when the code hides them. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: var(--base)/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* The logo carries dark lettering, so it keeps a white card of its own and
   reads the same in light and dark. */
.brand-logo, .side-logo {
  display: block; height: auto; background: #fff;
  border-radius: 10px; padding: 8px 10px;
}
.brand-logo { width: 100%; max-width: 230px; margin: 0 auto 16px; }
.side-logo { width: 100%; max-width: 190px; margin: 0 0 12px; }

#standalone { padding: 12px 16px 48px; max-width: 1100px; margin: 0 auto; }
.app main { min-width: 0; }
.page-body { padding: 16px 20px 48px; max-width: 1100px; margin: 0 auto; }

h1 { font-size: 1.3rem; margin: 0 0 12px; }
h2 { font-size: 1.05rem; margin: 0 0 10px; }
h3 { font-size: .95rem; margin: 14px 0 6px; }

a { color: var(--blue); }
code { background: var(--blue-soft); padding: 1px 5px; border-radius: 4px; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---------------------------------------------------------- the side panel

   A fixed panel down the left on a desktop screen, carrying the app's name,
   who is signed in, and where to go. Below 900px it stops being a column and
   sits across the top instead, because a phone has no room beside the work. */

.app {
  display: grid;
  grid-template-columns: var(--side) minmax(0, 1fr);
  min-height: 100vh;
}

aside {
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow: hidden;
  z-index: 2;
}

.drawer-head {
  background: var(--panel); color: var(--ink);
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
}
.drawer-who strong { display: block; font-size: .95rem; }
.drawer-who span,
.drawer-who small { display: block; color: var(--muted); font-size: .78rem; }

/* Scrolls on its own when the list of places outgrows the panel. */
nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 12px 10px;
  flex: 1; min-height: 0; overflow-y: auto;
}
nav > * { flex: none; }

.nav-label {
  margin: 4px 8px 4px; font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.nav-section {
  display: grid; gap: 2px; margin-top: 8px;
  padding-top: 8px; border-top: 1px solid var(--line);
}

.nav {
  display: flex; align-items: center; gap: 11px;
  text-align: left; border: 0; background: transparent; color: var(--muted);
  padding: 10px 11px; border-radius: 10px; font-weight: 600; font: inherit;
  cursor: pointer;
}
.nav svg { width: 19px; height: 19px; fill: currentColor; flex: none; }
.nav:hover { background: var(--blue-soft); color: var(--ink); }
.nav.active {
  background: var(--blue-soft); color: var(--blue);
  box-shadow: inset 3px 0 0 var(--blue);
}

.side-foot {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 14px; border-top: 1px solid var(--line);
}
.side-foot .muted { flex: 1 1 auto; min-width: 0; }

/* ---------------------------------------------------------- the header

   Stays at the top of the work area on every screen, so you always know
   which page you are on and the main action is always in the same place.
   Opaque on purpose: the list scrolls underneath it. */

.page-head {
  position: sticky; top: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 14px; flex-wrap: wrap;
  padding: 12px 20px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.head-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.page-brand { min-width: 0; }
#menuBtn { display: none; }

/* The drawer's shade. Only ever visible on a phone. */
#backdrop {
  display: none; position: fixed; inset: 0; z-index: 39;
  background: rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
body.drawer-open #backdrop { opacity: 1; pointer-events: auto; }
.page-head h1 { font-size: 1.25rem; margin: 0; }
.page-head .eyebrow { margin: 0 0 2px; }
.header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; border-radius: 8px;
}
.icon-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------------------------------------------------------- blocks */

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px; margin-bottom: 14px;
}
.narrow { max-width: 420px; margin-left: auto; margin-right: auto; }
.grid2 { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .grid2 { grid-template-columns: 1fr 1fr; } }

.toolbar {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-bottom: 10px;
}
.toolbar h2 { margin: 0; }
.grow { flex: 1 1 auto; }

label { display: block; margin-bottom: 10px; font-size: .85rem; color: var(--muted); }
input, select, textarea, button {
  font: inherit; color: var(--ink);
}
input, select, textarea {
  display: block; width: 100%; margin-top: 3px;
  padding: 9px 10px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel);
}
.toolbar input, .toolbar select { width: auto; margin-top: 0; flex: 1 1 150px; }
label.check { display: flex; gap: 6px; align-items: center; margin: 0; }
label.check input { width: auto; margin: 0; }

button {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--panel); cursor: pointer;
}
button:hover { border-color: var(--blue); }
button.primary { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }
button.link { background: none; border: 0; color: var(--blue); padding: 6px 4px; }
button.tiny { padding: 4px 8px; font-size: .8rem; }

/* ---------------------------------------------------------- job list */

.tally { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tally span {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 3px 10px; font-size: .8rem; color: var(--muted);
}
.tally b { color: var(--ink); }

.row {
  display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline;
  background: var(--panel); border: 1px solid var(--line);
  border-left: 4px solid var(--line);
  border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
}
.row:hover { border-color: var(--blue); }
.row.overdue { border-left-color: var(--red); }
.row.closed { border-left-color: var(--green); }
.row .no { font-weight: 700; min-width: 72px; }
.row .party { font-weight: 600; flex: 1 1 180px; }
.row .meta { color: var(--muted); font-size: .82rem; flex: 1 1 100%; }
.row .amt { font-variant-numeric: tabular-nums; text-align: right; min-width: 90px; }

.pill { border-radius: 999px; padding: 2px 9px; font-size: .75rem; white-space: nowrap; }
.pill.red { background: #fde8e6; color: var(--red); }
.pill.amber { background: #fdf2dd; color: var(--amber); }
.pill.green { background: #e4f3ea; color: var(--green); }
.pill.grey { background: var(--blue-soft); color: var(--muted); }

.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; }

/* ---------------------------------------------------------- items */

.item {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px; margin-bottom: 10px; background: var(--bg);
}
.item .line1 { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.item .line1 .n { font-weight: 700; color: var(--muted); }
.item .fields { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
@media (min-width: 700px) { .item .fields { grid-template-columns: repeat(4, 1fr); } }
.item .fields label { margin: 0; }
.item .wide { grid-column: 1 / -1; }
.item .fin { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.item .fin label { display: flex; gap: 4px; align-items: center; margin: 0; font-size: .8rem; }
.item .fin input { width: auto; margin: 0; }

.hist { border: 1px dashed var(--line); border-radius: 8px; padding: 8px; margin-bottom: 10px; }
.hist .h {
  padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: .85rem;
}
.hist .h:hover { background: var(--blue-soft); }

/* ---------------------------------------------------------- money */

.totals { width: 100%; border-collapse: collapse; margin: 10px 0; }
.totals th { text-align: left; font-weight: 400; color: var(--muted); padding: 4px 0; font-size: .85rem; }
.totals td { text-align: right; font-variant-numeric: tabular-nums; padding: 4px 0; }
.totals tr.strong th, .totals tr.strong td { font-weight: 700; color: var(--ink); border-top: 1px solid var(--line); }

.payrow {
  display: flex; gap: 8px; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--line); padding: 6px 0; font-size: .85rem;
}
.payAdd { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; margin-top: 10px; }
.payAdd button { grid-column: 1 / -1; }
.payAdd input, .payAdd select { margin-top: 0; }

/* ---------------------------------------------------------- bits */

.muted { color: var(--muted); }
.small { font-size: .82rem; }
.warn { color: var(--red); }
.msg { min-height: 1.2em; color: var(--red); font-size: .88rem; }
table.people { width: 100%; border-collapse: collapse; font-size: .88rem; }
table.people th, table.people td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); }
table.people select { width: auto; margin: 0; }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%);
  background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: 8px; z-index: 50; max-width: 90vw;
}

/* ---------------------------------------------------------- dashboard */

.kpi-row {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 760px) { .kpi-row { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.kpi {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px;
}
.kpi .label { color: var(--muted); font-size: .78rem; font-weight: 600; }
.kpi .value {
  font-size: 1.5rem; font-weight: 700; margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.kpi .foot { color: var(--muted); font-size: .75rem; margin-top: 2px; }
.kpi.bad .value { color: var(--red); }
.kpi.good .value { color: var(--green); }

.dash-actions {
  display: grid; gap: 12px; margin-bottom: 14px;
  grid-template-columns: 1fr;
}
@media (min-width: 700px) { .dash-actions { grid-template-columns: repeat(3, 1fr); } }
.dash-act {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
  text-align: left; padding: 13px 15px; border-radius: 10px;
}
.dash-act strong { font-size: .95rem; }
.dash-act span { color: var(--muted); font-size: .8rem; }

.mini {
  display: flex; gap: 10px; align-items: baseline; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  cursor: pointer; font-size: .86rem;
}
.mini:last-child { border-bottom: 0; }
.mini:hover { color: var(--blue); }
.mini .who { flex: 1 1 auto; min-width: 0; }
.mini .no { font-weight: 700; min-width: 56px; }

/* ---------------------------------------------------------- settings */

.set-group {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 10px; margin-bottom: 12px; overflow: hidden;
}
.set-group-head { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 13px 15px; list-style: none; }
.set-group-head::-webkit-details-marker { display: none; }
.set-group-head::marker { content: ""; }
.set-group-title { flex: 1; font-weight: 650; }
.set-chevron { color: var(--muted); transition: transform .15s ease; }
.set-group[open] .set-chevron { transform: rotate(90deg); }
.set-group-body { padding: 0 15px 15px; border-top: 1px solid var(--line); padding-top: 14px; }

.list-manager { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.list-manager:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.list-manager h3 { margin: 0 0 2px; }
.list-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
.list-add input { width: auto; flex: 1 1 140px; margin: 0; }
.list-rows { display: flex; flex-wrap: wrap; gap: 6px; }
.list-chip {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 4px 11px; font-size: .82rem; background: var(--bg);
}
.list-chip.off { opacity: .45; text-decoration: line-through; }
.list-chip input { width: auto; margin: 0; }

.choice-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 12px; }
.choice-row button { padding: 7px 13px; font-size: .85rem; }
.choice-row button.on {
  border-color: var(--accent); background: var(--blue-soft);
  color: var(--accent); font-weight: 650;
}
.accent-choice { display: inline-flex; align-items: center; gap: 7px; }
.swatch {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .18); flex: none;
}

.help-steps { margin: 6px 0 0; padding-left: 20px; }
.help-steps li { margin-bottom: 8px; }

/* ---------------------------------------------------------- about */

.eyebrow {
  margin: 0 0 4px; font-size: .68rem; font-weight: 700;
  letter-spacing: .11em; text-transform: uppercase; color: var(--muted);
}

.about-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 820px) { .about-grid { grid-template-columns: 1fr 1fr; } }

.about-grid .panel { margin: 0; }
.about-grid p { margin: 0 0 10px; }
.about-card, .developed-card { text-align: center; }
.about-card .logo-lg {
  width: 72px; height: 72px; border-radius: 18px; display: block; margin: 0 auto 12px;
}
.developed-card .dev-logo {
  display: block; height: 52px; width: auto; max-width: 200px;
  margin: 4px auto 12px; object-fit: contain;
}
.developed-card h3 { margin: 0 0 10px; }

.about-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
a.secondary {
  display: inline-block; text-decoration: none;
  padding: 8px 13px; border: 1px solid var(--line); border-radius: 7px;
  color: var(--blue); font-size: .85rem;
}
a.secondary:hover { border-color: var(--blue); }
.sub { font-size: .8rem; margin-top: 12px; }

.about-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 14px;
  margin: 12px 0 0; font-size: .85rem;
}
.about-facts dt { color: var(--muted); }
.about-facts dd { margin: 0; font-weight: 600; word-break: break-all; }

.about-list { margin: 8px 0 0; padding-left: 20px; font-size: .88rem; color: var(--muted); }
.about-list li { margin-bottom: 5px; }
.about-list strong { color: var(--ink); }

/* ---------------------------------------------------------- phones

   The side panel becomes a strip across the top. With only a few places to
   go, the buttons sit two to a row rather than in a column nobody can see
   past. */

/* On a phone the panel slides in from the left edge instead of sitting on
   top of the work. Swipe in from the edge, swipe back, tap the shade, or use
   the button in the header. It stays a proper column, not a grid of chips. */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  aside {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: 272px; max-width: 82vw; height: 100%;
    z-index: 40;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .3);
  }
  body.drawer-open aside { transform: translateX(0); }
  body.drawer-open { overflow: hidden; }
  #backdrop { display: block; }
  #menuBtn { display: inline-flex; }

  .page-head { padding: 10px 16px; align-items: center; }
  .page-head h1 { font-size: 1.1rem; }
  .page-body { padding: 14px 16px 48px; }
  .header-actions { gap: 6px; }
}