/* Wow Menu Boards dashboard design system (T1). Mobile-first; light canvas; Inter.
   Colors from brand/BRAND_GUIDE.md. Rules baked in:
   - orange #E8462A only for big text, fills and graphics; small orange text/links use Deep Orange #B93821
   - every tap target >= 44px; no sideways page scroll at 390px; status never shown by colour alone
   Packages add static/css/<package>.css only -- they do not edit this file. */

@font-face {
  font-family: "Inter";
  src: url("../fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --cream: #F6F1E7;
  --white: #FFFFFF;
  --ink: #1F1F1F;
  --mute: #3F3C36;
  --line: #E3DCCD;
  --orange: #E8462A;
  --orange-deep: #B93821;
  --ok: #1E6B3A;     --ok-bg: #E4F1E8;
  --warn: #8A5200;   --warn-bg: #FBEFD5;
  --bad: #A02417;    --bad-bg: #FBE4E0;
  --idle: #4A4A4A;   --idle-bg: #ECEAE4;
  --radius: 14px;
  --tap: 44px;
  --gap: 16px;
  --shadow: 0 1px 2px rgba(31, 31, 31, .06), 0 4px 14px rgba(31, 31, 31, .05);
  --maxw: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--cream); color: var(--ink);
  font: 400 17px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }
a { color: var(--orange-deep); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; border-radius: 4px; }
.muted { color: var(--mute); }
.pad { padding: 12px 16px; display: block; }
.eyebrow { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin-bottom: .4em; }
.center { text-align: center; }

.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: var(--cream); padding: 12px 16px; z-index: 100; }
.skip:focus { left: 8px; top: 8px; }

/* ---- top bar (phone/tablet) + left menu ------------------------------------------ */
.topbar { background: var(--white); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; }
.topbar-in { max-width: var(--maxw); margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; gap: 12px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); min-height: var(--tap); }
.brand-name { font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
.topbar .help-q { margin-left: auto; }
.menu-btn { width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--white); cursor: pointer; flex: none; padding: 0; }
.burger, .burger::before, .burger::after { display: block; width: 18px; height: 2px; background: var(--ink); position: relative; content: ""; }
.burger::before { position: absolute; top: -6px; }
.burger::after { position: absolute; top: 6px; }
.caret { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); display: inline-block; margin-left: auto; transition: transform .15s; }
.shell { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.side .help-side { display: inline-flex; margin-left: auto; }

.scrim { position: fixed; inset: 0; background: rgba(31, 31, 31, .45); z-index: 40; }
.side {
  position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 300px); z-index: 50; background: var(--white);
  border-right: 1px solid var(--line); display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(-100%); visibility: hidden; transition: transform .22s ease, visibility 0s linear .22s;
  box-shadow: var(--shadow);
}
.side.open { transform: none; visibility: visible; transition: transform .22s ease, visibility 0s; }
html.nav-open, html.nav-open body { overflow: hidden; }
.side-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 16px 10px; min-height: 64px; }
.side-close { margin-left: auto; width: var(--tap); height: var(--tap); border: 0; background: transparent; font-size: 2rem; line-height: 1; cursor: pointer; color: var(--ink); border-radius: 10px; }
.side-nav { padding: 6px 12px 12px; display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.side-nav > a, .side-more summary {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 0 14px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 1.02rem; cursor: pointer; list-style: none;
}
.side-more summary::-webkit-details-marker { display: none; }
.side-nav > a:hover, .side-more summary:hover, .side-sub a:hover { background: var(--cream); color: var(--ink); }
.side-nav > a[aria-current], .side-sub a[aria-current] { background: #FCEBE5; box-shadow: inset 4px 0 0 var(--orange); font-weight: 700; }
.side-more[open] > summary .caret { transform: rotate(-135deg) translate(-2px, -2px); }
.side-sub { display: flex; flex-direction: column; padding: 2px 0 6px 52px; }
.side-sub a { display: flex; align-items: center; min-height: var(--tap); padding: 0 12px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 500; }
.ico { flex: none; }
.side-foot { flex: none; border-top: 1px solid var(--line); padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
.side-account { padding: 6px 6px 8px 14px; display: flex; align-items: center; gap: 8px; }
.side-acct-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; flex: 1; }
.side-acct-name { font-weight: 700; }
.side-account .who-user { font-size: .82rem; color: var(--mute); overflow-wrap: anywhere; }
.side-foot nav { display: flex; flex-direction: row; gap: 4px; }
.side-foot nav a { flex: 1; justify-content: center; border: 1.5px solid var(--line); font-size: .9rem; padding: 0 6px; white-space: nowrap; }
.side-foot a { display: flex; align-items: center; min-height: var(--tap); padding: 0 14px; border-radius: 10px; color: var(--ink); text-decoration: none; font-weight: 600; }
.side-foot a:hover, .side-foot a[aria-current] { background: var(--cream); }

/* ---- page frame ---------------------------------------------------------- */
.page { flex: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 20px 16px 40px; }
.page-head { margin-bottom: 20px; }
.page-head .lede { color: var(--mute); margin-bottom: 12px; }
.page-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.foot { padding: 20px 16px 28px; text-align: center; font-size: .85rem; color: var(--mute); }

.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; margin-bottom: var(--gap); }
.card > :last-child { margin-bottom: 0; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.empty { background: var(--white); border: 1.5px dashed var(--line); border-radius: var(--radius); padding: 28px 20px; text-align: center; }

/* ---- buttons (>= 44px) ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tap); padding: 0 20px; border-radius: 10px; border: 2px solid transparent;
  font: 700 1.1rem/1 "Inter", sans-serif; text-decoration: none; cursor: pointer; text-align: center;
}
.btn-primary { background: var(--orange); color: var(--white); } /* large bold label: AA-large on orange */
.btn-primary:hover { background: var(--orange-deep); color: var(--white); }
.btn-secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-secondary:hover { background: var(--ink); color: var(--cream); }
.btn-danger { background: var(--bad); color: var(--white); }
.btn-danger:hover { background: #7d1a10; color: var(--white); }
.btn-small { font-size: .95rem; padding: 0 14px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---- forms ----------------------------------------------------------------- */
.field label { display: block; font-weight: 600; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; min-height: var(--tap); padding: 10px 14px; font: inherit; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--mute); border-radius: 10px;
}
.field .hint { color: var(--mute); font-size: .9rem; margin: 6px 0 0; }
.field .err { color: var(--bad); font-weight: 600; font-size: .95rem; margin: 6px 0 0; }
.field.has-error input, .field.has-error select { border-color: var(--bad); }

/* ---- status pills: dot shape + words ---------------------------------------- */
.pill { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 2px 12px 2px 10px; border-radius: 999px; font-weight: 600; font-size: .9rem; }
.pill i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.pill-ok { color: var(--ok); background: var(--ok-bg); }
.pill-warn { color: var(--warn); background: var(--warn-bg); }
.pill-warn i { border-radius: 2px; transform: rotate(45deg); }
.pill-bad { color: var(--bad); background: var(--bad-bg); }
.pill-bad i { border-radius: 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.pill-idle { color: var(--idle); background: var(--idle-bg); }
.pill-idle i { background: transparent; border: 2px solid currentColor; }

/* ---- compact tables ------------------------------------------------------------ */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; }
.tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tbl th { text-align: left; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding: 8px 10px; border-bottom: 2px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.tbl tr:last-child td { border-bottom: 0; }

/* Phones: table rows become stacked cards (use <td data-label="Column name">) -- no sideways scrolling. */
@media (max-width: 599px) {
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { position: absolute; left: -9999px; }
  .tbl tr { border: 1px solid var(--line); border-radius: 12px; padding: 6px 12px; margin-bottom: 10px; background: var(--white); }
  .tbl td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 7px 0; text-align: right; }
  .tbl td::before { content: attr(data-label); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); font-weight: 600; text-align: left; flex: none; }
  .tbl td:first-child { font-weight: 700; font-size: 1.05rem; }
  .tbl td:first-child::before { display: none; }
  .table-wrap { margin: 0; overflow: visible; }
}

/* ---- desktop ------------------------------------------------------------------- */
@media (min-width: 900px) {
  body { font-size: 16px; }
  h1 { font-size: 2rem; }
  .page { padding: 32px 24px 56px; }
  .btn { font-size: 1rem; }
}
@media (min-width: 1024px) {
  body.has-side .topbar { display: none; }
  body.has-side .shell { margin-left: 240px; display: flex; flex-direction: column; flex: 1; }
  .side { width: 240px; transform: none; visibility: visible; box-shadow: none; z-index: 30; }
  .side-close { display: none; }
  .side-sub a { min-height: 40px; }
  .scrim { display: none; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* "?" help link in the top bar (T14) */
.help-q { display: inline-flex; align-items: center; justify-content: center; width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid var(--line, #d8d2c8); color: inherit; text-decoration: none; font-weight: 600; flex: none; }

/* sidebar account text: never wrap mid-word (Kahu, Nov 4) */
.side-acct-text{min-width:0;flex:1 1 auto}
.side-acct-text .who-user,.side-acct-text .side-acct-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.help-side{flex:0 0 auto}