:root {
  /* Siam Gold — jade, temple gold, ivory (build 069) */
  --brand: #0a4a3c;
  --brand-700: #073a2e;
  --brand-50: #e6efe9;
  --accent: #b08628;
  --accent-50: #f5ecd5;
  --ink: #1c2620;
  --muted: #6c7468;
  --bg: #f6f1e6;
  --surface: #fffdf8;
  --line: rgba(46, 34, 12, 0.13);
  --line-strong: rgba(46, 34, 12, 0.22);
  --danger: #a32d2d;
  --danger-50: #fbecec;
  --ok: #1d9e75;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(60, 48, 18, 0.05), 0 10px 26px -14px rgba(60, 48, 18, 0.2);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "Spline Sans Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Fluid type scale (build 168) — clamp(min @360px wide, fluid middle, max @>=1280px).
     Max equals the prior fixed desktop px, so >=1280px renders identically to before;
     only narrower viewports scale down. One source of truth, no per-width overrides. */
  --fs-display: clamp(20px, calc(18.04px + 0.543vw), 25px); /* dashboard greeting */
  --fs-h1:      clamp(19px, calc(17.43px + 0.435vw), 23px); /* every module page title */
  --fs-sub:     clamp(11.5px, calc(11.11px + 0.109vw), 12.5px); /* title subtitles */
  --fs-kpi:     clamp(18px, calc(15.26px + 0.761vw), 25px); /* big KPI numbers */
  --fs-body:    clamp(15px, calc(14.61px + 0.109vw), 16px); /* base inherited text */
  --fs-btn:     clamp(14px, calc(13.61px + 0.109vw), 15px); /* button label */
  --fs-widget:  clamp(19px, calc(16.26px + 0.761vw), 26px); /* dashboard widget value */
  --fs-tile:    clamp(13px, calc(12.41px + 0.163vw), 14.5px); /* dashboard tile name */
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  color: var(--ink);
  font-size: var(--fs-body);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand); }

.hidden { display: none !important; }

/* ---------- brand mark ---------- */
.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--brand);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-size: 14px;
  flex: none;
}
.mark.lg { width: 46px; height: 46px; border-radius: 12px; font-size: 18px; }

/* Brand wordmark logo (build 052) */
.brand-logo { height: 30px; width: auto; display: block; flex: none; }
.brand-logo.lg { height: auto; width: 188px; max-width: 72%; margin: 0 auto 6px; display: block; }
.topbar .brand-logo { height: 28px; }

.brand-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-row .title { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-row .sub { color: var(--muted); font-size: 13px; }
.brand-sub { color: var(--muted); font-size: 13px; font-weight: 600; padding: 2px 8px; border: 1px solid var(--line); border-radius: 999px; }

/* ---------- centered auth screens ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px;
}
.auth-card h1 { font-size: 20px; margin: 18px 0 4px; letter-spacing: -0.01em; }
.auth-card .lead { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

/* ---------- forms ---------- */
.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--ink);
}
.field input {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.field input:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-50);
}
.field .err { color: var(--danger); font-size: 12px; margin-top: 5px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  font-size: var(--fs-btn);
  font-weight: 600;
  font-family: inherit;
  color: #fff;
  background: var(--brand);
  border: 1px solid var(--brand);
  border-radius: var(--radius-sm);
  touch-action: manipulation;
  cursor: pointer;
  transition: background 0.12s, transform 0.04s;
}
.btn:hover { background: var(--brand-700); border-color: var(--brand-700); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }
.btn.secondary {
  color: var(--ink);
  background: #fff;
  border-color: var(--line-strong);
}
.btn.secondary:hover { background: #faf9f6; }
.btn.small { width: auto; padding: 7px 12px; font-size: 13px; }
.btn.danger { color: var(--danger); background: #fff; border-color: var(--line-strong); }
.btn.danger:hover { background: var(--danger-50); border-color: var(--danger); }

.form-error {
  background: var(--danger-50);
  color: var(--danger);
  border: 1px solid rgba(163, 45, 45, 0.25);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: 13px;
  margin-bottom: 14px;
}
.muted-foot { color: var(--muted); font-size: 13px; text-align: center; margin-top: 16px; }
.build-tag { color: var(--muted); font-size: 11px; text-align: center; margin-top: 28px; opacity: 0.6; }

/* ---------- app shell ---------- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(246, 241, 230, 0.82);
  backdrop-filter: saturate(1.1) blur(8px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.who { display: flex; align-items: center; gap: 12px; position: relative; }
.who .name { font-weight: 600; font-size: 14px; }
.acct-kebab { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); color: var(--ink); cursor: pointer; flex: 0 0 auto; }
.acct-kebab:hover { border-color: var(--accent); }
.acct-actions { display: none; position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; flex-direction: column; align-items: stretch; gap: 6px; min-width: 212px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 14px 34px rgba(40,30,12,.20); padding: 8px; }
.acct-actions.open { display: flex; }
.acct-actions .btn { width: 100% !important; justify-content: flex-start; text-align: left; flex: none; }
.pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.pill.owner { background: var(--brand-50); color: var(--brand-700); }
.pill.admin { background: #eef4fb; color: #185fa5; }
.pill.employee { background: var(--accent-50); color: #854f0b; }
.pill.soon { background: #f0efe9; color: var(--muted); }
.pill.suspended { background: var(--danger-50); color: var(--danger); }
.pill.active { background: var(--brand-50); color: var(--brand-700); }

.container { max-width: 960px; margin: 0 auto; padding: 28px 20px 64px; }
.section-head { margin: 8px 0 16px; }
.section-head h2 { font-size: 15px; margin: 0; letter-spacing: 0.01em; }
.section-head p { color: var(--muted); font-size: 13px; margin: 4px 0 0; }

/* ---------- module grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.module {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform 0.1s, border-color 0.1s;
}
.module.live:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.module.soon { opacity: 0.72; }
.module .icon {
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: var(--brand-50);
  color: var(--brand);
}
.module .icon.accent { background: var(--accent-50); color: var(--accent); }
.module .m-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.module .m-name { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 8px; }
.module .m-desc { color: var(--muted); font-size: 13px; }

/* ---------- team panel ---------- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
  margin-top: 28px;
}
.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}
.row:first-of-type { border-top: none; }
.row .who-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row .who-cell .n { font-weight: 600; font-size: 14px; }
.row .who-cell .e { color: var(--muted); font-size: 13px; overflow: hidden; text-overflow: ellipsis; }
.row .actions { display: flex; align-items: center; gap: 8px; flex: none; }

.invite-box {
  background: var(--accent-50);
  border: 1px solid rgba(176, 134, 40, 0.32);
  border-radius: var(--radius-sm);
  padding: 12px;
  margin-top: 12px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.invite-box input {
  flex: 1;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
}
.invite-controls { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 4px; }
.invite-controls select,
.invite-controls input {
  padding: 9px 11px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
}
.invite-controls input { min-width: 180px; flex: 1; }

.empty { color: var(--muted); font-size: 13px; padding: 8px 0; }

.spinner {
  width: 22px; height: 22px;
  border: 2px solid var(--line-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
.center-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }

.toast {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  text-align: center;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: 13px;
  box-shadow: var(--shadow);
  z-index: 50;
}

/* ---------- mobile & tablet ---------- */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

@media (max-width: 640px) {
  /* Inputs at 16px stop iOS from zooming the page on focus. */
  .field input, .modal-body input, .modal-body textarea, .modal-body select,
  .invite-controls input, .invite-controls select { font-size: 16px; }

  /* Header stays in flow (not pinned), but keeps a stacking context above the
     page so the account / module-switcher dropdowns render over the tiles
     instead of behind them. */
  .topbar { position: relative; z-index: 30; }
  .topbar-inner { padding: 12px 14px; gap: 10px; }
  .brand-row { flex: 1 1 100%; }
  .who { flex: 1 1 100%; flex-wrap: wrap; gap: 8px; }
  .who .name { display: none; }

  /* Modals use more of the narrow screen and never shift sideways. */
  .modal-overlay { padding: 12px; }
  .modal-body { padding: 16px; overflow-x: hidden; }
  .who .btn.small { flex: 1 1 auto; }

  .container { padding: 18px 14px 84px; }

  /* Modules: single-column compact rows (icon left, text right). */
  .grid { grid-template-columns: 1fr; gap: 10px; }
  .module { flex-direction: row; align-items: center; gap: 14px; padding: 14px 16px; }
  .module .icon { flex: none; }
  .module .m-text { flex: 1; }

  .panel { padding: 16px; margin-top: 20px; }
  .invite-controls { gap: 6px; }
  .invite-controls input, .invite-controls select { flex: 1 1 100%; }
  .invite-box input { font-size: 13px; }

  /* Team rows: let actions wrap under the person instead of overflowing. */
  .row { flex-wrap: wrap; gap: 8px; }
  .row .who-cell { flex: 1 1 100%; }
  .row .actions { flex: 1 1 100%; flex-wrap: wrap; gap: 6px; justify-content: flex-start; }
  .icon-btn { width: 36px; height: 36px; }

  .modal-overlay { padding: 10px; align-items: flex-end; }
  .modal { max-width: 100%; max-height: 92vh; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
  .modal-body { padding: 16px; }
  .auth-card { padding: 20px; }
}

@media (max-width: 380px) {
  .who .btn.small { font-size: 12px; padding: 7px 8px; }
}

@media (max-width: 520px) {
  .auth-card { padding: 22px; }
  .topbar-inner, .container { padding-left: 16px; padding-right: 16px; }
}

/* ---------- supply module ---------- */
.sup-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 16px;
}
.sup-bar .spacer { flex: 1; }
/* unified dropdowns across the app (build 154) — one chevron, one look */
select {
  appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08628' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 14px !important;
  padding-right: 30px !important;
}
select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(176, 134, 40, 0.16); }

.sup-bar select {
  padding: 9px 12px;
  font-size: 14px;
  font-family: inherit;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  font-weight: 600;
  color: var(--ink);
}
.sup-cat-head {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 18px 0 8px;
}
.sup-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 8px;
}
.sup-item.checked { border-color: var(--brand); background: var(--brand-50); }
.sup-check {
  appearance: none;
  -webkit-appearance: none;
  width: 22px; height: 22px;
  flex: none;
  border: 2px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.sup-check:checked { background: var(--brand); border-color: var(--brand); }
.sup-check:checked::after {
  content: '';
  position: absolute;
  left: 6px; top: 2px;
  width: 6px; height: 11px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.sup-item-main { flex: 1; min-width: 0; }
.sup-item-name { font-weight: 600; font-size: 14px; }
.sup-item-sub { color: var(--muted); font-size: 12.5px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sup-item-controls { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.qty-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 8px; overflow: hidden; background: #fff; }
.qty-stepper button {
  width: 30px; height: 30px; border: none; background: #fff;
  font-size: 18px; line-height: 1; cursor: pointer; color: var(--ink);
}
.qty-stepper button:active { background: var(--brand-50); }
.qty-stepper .qv { min-width: 30px; text-align: center; font-weight: 700; font-size: 14px; }
.unit-select {
  padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em; background: #fff;
  color: var(--ink); font-family: inherit;
}
.note-chip { color: var(--muted); font-size: 12px; }
.ctrl-gap { width: 2px; }
.sup-select {
  padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: 8px;
  font-size: 12px; font-weight: 600; background: #fff; color: var(--ink); font-family: inherit;
  max-width: 160px;
}
.sup-select.unset { color: var(--muted); border-style: dashed; }
.send-to { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.send-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.order-sup {
  padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; background: #fff; font-family: inherit; color: var(--ink);
}
.remember { font-size: 12px; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.remember input { width: 15px; height: 15px; }
.file-pick {
  display: inline-block; margin-bottom: 12px; padding: 9px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600; cursor: pointer; background: #fff; color: var(--ink);
}
.file-pick:hover { background: #faf9f6; }

@media (max-width: 560px) {
  .sup-item { gap: 8px; padding: 11px 12px; }
  .sup-item-controls { gap: 6px; }
  .unit-select, .sup-select { font-size: 11px; padding: 5px 6px; max-width: 118px; }
  .qty-stepper button { width: 32px; height: 32px; }
  .sup-bar { gap: 6px; }
  .sup-bar .btn { font-size: 13px; padding: 8px 12px; }
  .sup-item .actions { gap: 4px; }
}
.sup-item .actions { display: flex; gap: 6px; flex: none; }
.icon-btn {
  border: 1px solid var(--line-strong);
  background: #fff;
  border-radius: 7px;
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--muted);
  font-size: 14px;
}
.icon-btn:hover { background: #faf9f6; color: var(--ink); }
.icon-btn.danger:hover { background: var(--danger-50); color: var(--danger); border-color: var(--danger); }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: #f0efe9;
  color: var(--muted);
}

.order-bar {
  position: sticky;
  bottom: 0;
  background: rgba(245, 243, 237, 0.92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
}

/* modal */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 26, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 100;
}
.modal {
  background: var(--surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
  max-width: 440px;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal.wide { max-width: 560px; }
.modal-head {
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.modal-head h2 { margin: 0; font-size: 16px; }
.modal-body { padding: 20px; overflow-y: auto; }
.modal-foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; }
.modal-body textarea {
  width: 100%;
  min-height: 140px;
  padding: 10px 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  resize: vertical;
}
.modal-body select {
  width: 100%;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
}
.btn.row-wide { width: 100%; margin-bottom: 8px; }
.qty-row { display: flex; gap: 10px; }
.qty-row .field { flex: 1 1 0; min-width: 0; }
.qty-row input { width: 100%; }
.qty-row input[type="number"] { width: 100%; }
/* Morning/Evening quick-fill chips in the time-entry modal */
.shift-pick { display: flex; gap: 8px; }
.shift-chip { flex: 1 1 0; min-width: 0; padding: 10px 8px; font-size: 14px; font-weight: 600; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; }
.shift-chip:hover { border-color: var(--brand); }
.shift-chip.on { background: var(--brand-50); border-color: var(--brand); color: var(--brand-700); }
.shift-chip .hint { display: block; font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.shift-chip.on .hint { color: var(--brand-700); }

/* assistant */
.chat-log { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.bubble { padding: 10px 13px; border-radius: 12px; font-size: 14px; max-width: 85%; white-space: pre-wrap; }
.bubble.user { background: var(--brand); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.bubble.ai { background: #f0efe9; color: var(--ink); align-self: flex-start; border-bottom-left-radius: 4px; }
.order-group { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; margin-bottom: 10px; }
.order-group h3 { margin: 0 0 4px; font-size: 14px; }
.order-group .items { color: var(--muted); font-size: 13px; margin-bottom: 10px; white-space: pre-line; }
.order-group .channels { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---------- Timecard module ---------- */
.clock-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 20px; box-shadow: var(--shadow); text-align: center; margin-top: 8px;
}
.clock-status {
  font-size: 16px; color: var(--muted); margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
}
.clock-status.on { color: var(--brand); font-weight: 600; }
.clock-status .dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent);
  animation: pulse 1.8s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .45 } }
.clock-big {
  font-size: 22px; padding: 22px; border-radius: var(--radius); width: 100%;
  max-width: 320px; margin: 0 auto; letter-spacing: .02em;
}
.clock-big.out { background: var(--danger); }
.ts-shift {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 8px; background: var(--surface); font-size: 14px;
}
.ts-shift .hrs { font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.ts-shift .live { color: var(--ok); font-weight: 600; }
.icon-btn.danger:hover { color: var(--danger); }

.tcl-tabs { display: flex; gap: 6px; margin-bottom: 18px; border-bottom: 1px solid var(--line); }
.tcl-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  padding: 12px 14px; font: inherit; font-weight: 600; color: var(--muted);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tcl-tab.on { color: var(--brand); border-bottom-color: var(--brand); }
/* timecard control-room: pill tabs in header + scrolling panel (build 152) */
.cr-head .tcl-tabs{margin:0;border-bottom:0;gap:4px}
.cr-head .tcl-tab{padding:7px 13px;border:1px solid var(--line-strong);border-radius:9px;margin:0;font-size:13px;font-weight:600;background:var(--surface);color:var(--ink)}
.cr-head .tcl-tab.on{color:#fff;background:var(--brand);border-color:var(--brand)}
.tc-panel{flex:1;min-height:0;overflow-y:auto;padding-top:4px}
.tc-panel .section-head:first-child{margin-top:0}
/* timesheet payroll/detail cards in 2 columns on wide screens */
.tc-panel .pay-list{display:grid;grid-template-columns:1fr;gap:14px;align-items:start}
@media (min-width:1080px){ .tc-panel .pay-list{grid-template-columns:1fr 1fr} }
/* shift-detail: equal-height cards that scroll inside (build 154) */
.tc-panel .pay-detail-list{align-items:stretch}
@media (min-width:1080px){
  .tc-panel .pay-detail-list .pay-card{height:400px;display:flex;flex-direction:column;overflow:hidden}
  .tc-panel .pay-detail-list .pay-card .pay-head{flex:0 0 auto}
  .tc-panel .pay-detail-list .pay-shifts{flex:1;min-height:0;overflow-y:auto}
}

.active-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  margin-bottom: 8px; background: var(--surface);
}
.active-row .n { font-weight: 600; }
.active-row .e { font-size: 13px; color: var(--muted); }
.active-row .elapsed {
  font-weight: 700; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  padding: 6px 12px; border-radius: 999px; font-size: 14px;
}

.ts-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.ts-controls select, .ts-controls input { padding: 9px 10px; }
.ts-range { font-size: 13px; color: var(--muted); margin: 4px 2px 12px; font-weight: 600; }
.ts-export { display: flex; gap: 8px; margin-bottom: 16px; }

.ts-emp { margin-bottom: 18px; }
.ts-emp-head {
  display: flex; justify-content: space-between; align-items: center;
  font-weight: 700; padding: 8px 2px; border-bottom: 2px solid var(--line-strong); margin-bottom: 8px;
}
.ts-shift .chip {
  font-size: 11px; background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--ink); padding: 1px 7px; border-radius: 999px; margin-left: 4px;
}

.set-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 6px 0; }
.set-row input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--brand); }
.set-geo-detail { margin-top: 12px; padding: 14px; background: var(--bg); border-radius: var(--radius-sm); }

@media (max-width: 520px) {
  .ts-controls { gap: 6px; }
  .ts-controls select, .ts-controls #ts-custom input { flex: 1 1 auto; min-width: 0; }
  .ts-export .btn { flex: 1; }
}

/* ---------- Timecard: PIN keypad + tips ---------- */
.pin-wrap { text-align: center; }
.pin-sub { color: var(--muted); margin-bottom: 14px; }
.pin-dots { display: flex; gap: 14px; justify-content: center; margin: 6px 0 20px; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line-strong); transition: all .12s; }
.pin-dot.on { background: var(--brand); border-color: var(--brand); transform: scale(1.05); }
.keypad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 300px; margin: 0 auto; touch-action: manipulation; }
.key {
  appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
  font-size: 24px; font-weight: 600; padding: 16px 0; border-radius: var(--radius-sm); cursor: pointer;
  font-family: inherit;
  /* Stop the browser's double-tap-to-zoom gesture when the same digit is
     tapped twice quickly; keeps normal taps and pinch-zoom intact. */
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
}
.key:active { background: var(--bg); transform: scale(.97); }
.key.ghost { font-size: 15px; font-weight: 600; color: var(--muted); }
.pin-note { margin-top: 12px; font-size: 13px; color: var(--muted); }

.muted-inline { color: var(--muted); font-size: 13px; }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--muted); box-shadow: none; }

.tip-field { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 6px 14px; margin: 8px 0 12px; }
.tip-cur { font-size: 26px; color: var(--muted); }
.tip-field input { border: none; font-size: 30px; font-weight: 700; padding: 8px 0; width: 100%; background: none; }
.tip-field input:focus { outline: none; }
.tip-quick { display: flex; gap: 8px; }
.tip-quick .btn { flex: 1; }

/* ---------- module scope + position + schedule editor (build 044) ---------- */
.chip.warn { background: var(--accent-50); color: #92560a; border-color: #f1d49a; }
.pill.pos { background: var(--brand-50); color: var(--brand-700); border-color: #bfe0d5; text-transform: capitalize; }

.invite-access { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 10px 0 4px; }
.access-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.access-check { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink); cursor: pointer; }
.access-check input { width: 17px; height: 17px; accent-color: var(--brand); }
.access-check.block { display: flex; padding: 9px 0; border-bottom: 1px solid var(--line); }
.access-check.block .muted-inline { margin-left: auto; }
.access-note { font-size: 13px; color: var(--muted); margin: 8px 0 2px; }
.access-tag { display: inline-block; margin-top: 3px; font-size: 12px; color: var(--brand-700); background: var(--brand-50); border: 1px solid #cfe6dd; padding: 1px 8px; border-radius: 999px; }

.win-note { margin-top: 12px; text-align: center; font-size: 14px; color: #92560a; background: var(--accent-50); border: 1px solid #f1d49a; border-radius: var(--radius-sm); padding: 10px 12px; }

.set-h { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.set-h .muted-inline { font-weight: 400; }
.set-note { color: var(--muted); font-size: 13px; margin: 0 0 14px; }
.sched-list { border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; }
.sched-row { display: grid; gap: 8px; padding: 12px 14px; }
.sched-row + .sched-row { border-top: 1px solid var(--line); }
.sched-lab { font-size: 14px; font-weight: 600; color: var(--ink); }
/* Grid tracks (not flex) so native time inputs are forced to share the row and
   never overflow on a phone. minmax(0,1fr) lets each field shrink below its
   intrinsic width; the inputs fill their column. */
.sched-times { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px; }
.sched-times input[type=time] { width: 100%; min-width: 0; }
.sched-times .to { color: var(--muted); font-size: 13px; text-align: center; }
.sched-times.single { grid-template-columns: minmax(0, 1fr); }
/* laptop: two-up cards (build 157) */
@media (min-width: 860px) {
  .sched-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; border: 0; border-radius: 0; overflow: visible; }
  .sched-row { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 13px 15px; }
  .sched-row + .sched-row { border-top: 1px solid var(--line); }
}

/* ---------- tips prompt banner (build 045) ---------- */
.tips-prompt { background: var(--accent-50); border: 1px solid #f1d49a; color: #7a4d08;
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 14px; font-size: 14px; }
.tips-prompt .chip.warn { margin-left: 4px; }
.tips-prompt-h { font-weight: 700; margin-bottom: 8px; }
.tips-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px solid #f1d49a; }
.tips-row:first-of-type { border-top: 0; }
.tips-row-when { font-size: 13px; }
.tips-prompt-note { font-size: 11.5px; color: #9a7a3a; margin-top: 8px; }
.tips-sum { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.tips-sum-cell { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; text-align: center; }
.tips-sum-v { display: block; font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--brand); font-variant-numeric: tabular-nums; }
.tips-sum-l { display: block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }

/* ---------- address lookup row (build 046) ---------- */
.addr-row { display: flex; gap: 8px; align-items: stretch; }
.addr-row input { flex: 1 1 auto; }
.addr-row .btn { flex: 0 0 auto; white-space: nowrap; }

/* ---------- live clock + password help (build 047) ---------- */
.now-clock { text-align: center; margin-bottom: 14px; }
.now-time { display: block; font-size: 34px; font-weight: 700; letter-spacing: 0.5px; color: var(--ink); font-variant-numeric: tabular-nums; }
.now-date { display: block; font-size: 13px; color: var(--muted); margin-top: 2px; }

.req-banner { background: var(--brand-50); border: 1px solid #cfe6dd; border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; }
.req-banner h3 { margin: 0 0 8px; font-size: 14px; color: var(--brand-700); }
.req-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: 14px; }
.req-item + .req-item { border-top: 1px solid #d9ece5; }

.temp-pass { background: var(--accent-50); border: 1px solid #f1d49a; border-radius: var(--radius); padding: 14px; margin-top: 10px; }
.temp-pass .code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 22px; font-weight: 700; letter-spacing: 1px; color: #7a4d08; text-align: center; padding: 8px 0; }
.temp-pass .row2 { display: flex; gap: 8px; margin-top: 8px; }
.temp-pass .row2 .btn { flex: 1 1 auto; }

/* ---------- supply search (build 048) ---------- */
.sup-search {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px; padding: 0 14px; height: 48px;
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: 12px; box-shadow: var(--shadow);
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}
.sup-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(176, 134, 40, 0.16); }
.sup-search-ic { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sup-search input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-family: inherit; font-size: 15px; color: var(--ink); padding: 0; }
.sup-search input::placeholder { color: var(--muted); }
.sup-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.sup-search-clear { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 5px; border-radius: 6px; transition: color 0.12s, background 0.12s; }
.sup-search-clear:hover { color: var(--ink); background: rgba(46, 34, 12, 0.07); }
.sup-search-clear[hidden] { display: none; }

/* ---------- payroll summary + pay pill (build 049) ---------- */
.pill.pay { background: #eef4ff; color: #2c4a7c; border-color: #cdddf5; }
.ts-payroll { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 4px; }
.ts-pr-head { font-size: 13px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 6px; }
.pr-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 0; font-size: 14px; }
.pr-row + .pr-row { border-top: 1px solid var(--line); }
.pr-name { color: var(--ink); }
.pr-fig { color: var(--muted); text-align: right; white-space: nowrap; }
.pr-fig b { color: var(--ink); }

/* Schedule module */
.sc-wk { text-align: center; }
.sc-wk-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sc-wk-label { font-weight: 650; font-size: 16px; color: var(--ink); }
.sc-wk-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.sc-labor { font-size: 13px; color: var(--muted); }
.sc-labor strong { color: var(--ink); }
.sc-day { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-top: 12px; box-shadow: var(--shadow); }
.sc-day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 650; color: var(--ink); margin-bottom: 8px; }
.sc-day-head > span { font-size: 16px; white-space: nowrap; }
.sc-chips { display: flex; flex-direction: column; gap: 8px; }
/* schedule control-room (build 152) */
.sc-scroll{flex:1;min-height:0;overflow-y:auto;padding-top:2px}
.sc-days{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:10px}
.sc-days .sc-day{margin-top:0}
.sc-wk-sub{display:flex;align-items:center;gap:9px;font-family:var(--font-display);font-size:15px;font-weight:600;color:var(--brand-700);margin:18px 2px 0;padding-top:2px}
.sc-wk-sub:first-child{margin-top:6px}
.sc-wk-tag{font-family:var(--font-mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:2px 9px}
.sc-wk-tag.next{color:var(--accent);background:var(--accent-50);border-color:#e6d4a8}
.cr-body .sc-reqs{margin:0 0 12px}
.sc-chip { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: left;
  background: var(--brand-50); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 8px 12px; cursor: pointer; position: relative; }
.sc-chip:hover { border-color: var(--line-strong); }
.sc-chip.draft { background: #faf8f2; border-style: dashed; }
.sc-chip-name { font-weight: 600; color: var(--ink); }
.sc-chip-meta { font-size: 12px; color: var(--muted); }
.sc-draft-tag { position: absolute; top: 8px; right: 10px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--accent); background: var(--accent-50); padding: 1px 6px; border-radius: 999px; }
.sc-mine { padding: 10px 2px; border-bottom: 1px solid var(--line); }
.sc-mine:last-child { border-bottom: 0; }
.sc-mine-day { font-weight: 650; color: var(--ink); }
.sc-mine-meta { font-size: 13px; color: var(--muted); margin-top: 2px; }
.sc-mine-note { font-size: 12px; color: var(--muted); margin-top: 3px; font-style: italic; }

/* Schedule — copy/publish actions, requests, time-off markers */
.sc-actions { display: flex; gap: 8px; margin-top: 12px; }
.sc-actions .btn { flex: 1; }
.sc-off { font-size: 12px; color: var(--accent); margin-bottom: 6px; }
.sc-reqs-head { font-weight: 650; color: var(--ink); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.sc-badge { background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; border-radius: 999px; padding: 1px 7px; }
.sc-req { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sc-req:last-child { border-bottom: 0; }
.sc-req-who { font-weight: 600; color: var(--ink); font-size: 14px; }
.sc-req-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.sc-req-actions { display: flex; gap: 6px; flex-shrink: 0; }
.sc-drop-info { font-size: 14px; color: var(--ink); margin: 0 0 12px; font-weight: 600; }
.sc-status { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.sc-status.pending { background: var(--accent-50); color: #854f0b; }
.sc-status.approved { background: var(--brand-50); color: var(--brand-700); }
.sc-status.denied { background: var(--danger-50); color: var(--danger); }

/* Today summary */
.td-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow); text-align: center; }
.stat-num { font-size: 24px; font-weight: 750; color: var(--brand); line-height: 1.1; }
.stat-lab { font-size: 12px; color: var(--muted); margin-top: 3px; }
.card-head { font-weight: 650; color: var(--ink); margin-bottom: 8px; }
.td-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.td-row:last-child { border-bottom: 0; }
.td-name { font-weight: 600; color: var(--ink); }
.td-meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.td-elapsed { font-weight: 650; color: var(--brand); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.td-tag { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; flex-shrink: 0; }
.td-tag.in { background: var(--brand-50); color: var(--brand-700); }
.td-tag.out { background: var(--accent-50); color: #854f0b; }

/* Daily report + Sales (financial trackers) */
.fin-stats .stat-num { font-size: 19px; }
/* Sales — net bento (in-house / third-party / total) */
.sl-bento { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
.sl-bt { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 13px; }
.sl-bt.total { grid-column: 1 / 3; background: var(--brand); border-color: var(--brand); }
.sl-bt.gold { background: var(--accent-50); border-color: #e6d3a3; }
.sl-bt-lab { font-size: 12px; font-weight: 600; color: var(--ink); }
.sl-bt.total .sl-bt-lab { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #9fc8ba; font-weight: 500; }
.sl-bt-num { font-size: 21px; line-height: 1.1; margin-top: 4px; color: var(--brand); font-variant-numeric: tabular-nums; }
.sl-bt-num.green { color: var(--brand); }
.sl-bt.total .sl-bt-num { font-size: 31px; color: #fff; margin-top: 3px; }
.sl-bt-sub { font-size: 11px; color: var(--muted); margin-top: 6px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.sl-strip { display: flex; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; margin-bottom: 14px; box-shadow: var(--shadow); }
.sl-strip > div { text-align: center; }
.sl-strip-v { font-size: 15px; color: var(--brand); line-height: 1.1; font-variant-numeric: tabular-nums; }
.sl-strip-l { font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-top: 3px; }
.ge-rl.strong { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 6px; margin-top: 1px; }
.ge-rl.strong span { color: #fff; font-weight: 650; }
.fin-month-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fin-month-label { font-weight: 650; font-size: 16px; color: var(--ink); }
.fin-list { padding: 2px 0; }
.fin-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: transparent; border: 0; border-bottom: 1px solid var(--line); padding: 11px 4px; cursor: pointer; }
.fin-row:last-child { border-bottom: 0; }
.fin-row:hover { background: #faf9f6; }
.fin-day { font-weight: 650; color: var(--ink); min-width: 58px; }
.fin-day small { color: var(--muted); font-weight: 500; margin-left: 3px; }
.fin-figs { font-size: 13px; color: var(--brand-700); font-variant-numeric: tabular-nums; text-align: right; }
.fin-empty { font-size: 12px; color: var(--muted); }

/* Day-card month overview (build 068) */
.fin-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 10px; margin-top: 12px; }
.fin-card { display: flex; align-items: center; gap: 13px; width: 100%; text-align: left; font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; box-shadow: var(--shadow); cursor: pointer; transition: transform .08s ease, border-color .12s ease; }
.fin-card:hover { border-color: var(--brand); }
.fin-card:active { transform: scale(.99); }
.fin-badge { flex: none; width: 50px; height: 50px; border-radius: 13px; background: var(--brand-50); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fin-badge b { font-weight: 800; font-size: 20px; line-height: 1; color: var(--brand-700); }
.fin-badge i { font-style: normal; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--brand); margin-top: 2px; }
.fin-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.fin-clab { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.fin-cnum { font-weight: 700; font-size: 21px; line-height: 1.12; color: var(--brand-700); font-variant-numeric: tabular-nums; }
.fin-csub { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fin-card.empty { background: transparent; border-style: dashed; box-shadow: none; }
.fin-card.empty .fin-badge { background: rgba(20, 32, 26, 0.05); }
.fin-card.empty .fin-badge b { color: var(--muted); }
.fin-add { color: var(--muted); font-size: 14px; }
.fin-preview { background: var(--brand-50); border-radius: var(--radius-sm); padding: 10px 12px; margin: 6px 0 14px; }
.fin-pr-row { display: flex; justify-content: space-between; font-size: 13px; padding: 2px 0; color: var(--ink); }
.fin-pr-row span:last-child { font-variant-numeric: tabular-nums; }
.fin-pr-row.strong { font-weight: 700; border-top: 1px solid var(--line); margin-top: 5px; padding-top: 6px; }

/* Grouped-card entry (Daily report + Sales modals) */
.ge-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 2px 14px; margin-bottom: 12px; }
.ge-eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8a560f; font-weight: 700; padding: 11px 2px 4px; }
.ge-f { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 2px; border-top: 1px solid var(--line); }
.ge-card .ge-eyebrow + .ge-f { border-top: 0; }
.ge-f label { font-size: 14px; color: #39433e; }
.ge-f input { max-width: 132px; font-size: 16px; text-align: right; border: 0; background: transparent; outline: none; color: var(--ink); font-variant-numeric: tabular-nums; padding: 2px 0; }
.ge-result { background: var(--brand); color: #fff; border-radius: 16px; padding: 18px; margin: 2px 0 14px; box-shadow: 0 12px 24px -14px rgba(10, 74, 60, 0.5); }
.ge-res-lab { font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: #bfe2d7; }
.ge-res-num { font-size: 34px; font-weight: 750; line-height: 1.1; margin: 3px 0 12px; font-variant-numeric: tabular-nums; }
.ge-res-lines { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 10px; display: grid; gap: 5px; }
.ge-rl { display: flex; justify-content: space-between; font-size: 12.5px; color: #d3e8e0; font-variant-numeric: tabular-nums; }
.ge-rl span:last-child { color: #fff; font-weight: 600; }
.ge-rl.warn span:last-child { color: #ffd9a8; }

/* ============ Siam Gold — type system & signature (build 069) ============ */
/* Display serif (Fraunces) for headings + figures, used with restraint */
.brand-row .title, .auth-card h1, .section-head h2, .card-head,
.fin-month-label, .module .m-name, .order-group h3,
.stat-num, .fin-cnum, .ge-res-num, .fin-badge b, .sl-bt-num, .sl-strip-v {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: 0;
}
.stat-num { font-weight: 600; }
.ge-res-num { font-weight: 600; }

/* Monospace for utility labels, eyebrows, pills, data tags */
.pill, .td-tag, .build-tag, .stat-lab, .fin-clab, .fin-badge i,
.ge-eyebrow, .ge-res-lab, .brand-sub, .sl-bt.total .sl-bt-lab, .sl-bt-sub, .sl-strip-l {
  font-family: var(--font-mono);
}
.stat-lab { text-transform: uppercase; letter-spacing: 0.07em; font-size: 10.5px; }
.ge-eyebrow { color: var(--accent); }

/* Signature: a temple-gold hairline crowning every surface */
.module, .stat, .panel, .clock-card {
  border-top: 2px solid var(--accent);
}
.module .icon { background: rgba(176, 134, 40, 0.14); color: var(--accent); border-radius: 8px; }
.module .icon.accent { background: rgba(10, 74, 60, 0.1); color: var(--brand); }
.fin-card { border-radius: 10px; }
.fin-badge { border-radius: 8px; }
.ge-card, .ge-result { border-radius: 10px; }

/* ---------- Menu module (build 072) ---------- */
.menu-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.menu-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow);
  transition: transform .08s ease, border-color .12s ease; }
.menu-item:hover { border-color: var(--brand); }
.menu-item:active { transform: scale(.995); }
.menu-item.off { opacity: 0.6; }
.menu-item .mi-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-item .mi-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.menu-item .mi-sub { font-family: var(--font-mono); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.menu-item .mi-price { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--brand-700); font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item .mi-off-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--danger); }
.menu-toggle { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink); margin: 4px 2px 12px; cursor: pointer; }
.menu-var { gap: 8px; }

/* ---------- Timecards payroll: metric-tile cards (build 076) ---------- */
.pay-list { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 4px; align-items: start; }
@media (min-width: 1100px) { .pay-list { grid-template-columns: 1fr 1fr; } }
.pay-card { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--accent); border-radius: 13px; box-shadow: var(--shadow); padding: 13px 14px; }
.pay-head { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.pay-name { font-weight: 600; font-size: 15px; line-height: 1.2; min-width: 0; }
.pay-badge { margin-left: auto; flex-shrink: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); white-space: nowrap; }
.pay-badge.h { color: var(--brand-700); background: var(--brand-50); border-color: #cfe0d6; }
.pay-badge.s { color: #8a6a1f; background: var(--accent-50); border-color: #e6d4a8; }
.pay-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pay-tile { background: var(--brand-50); border-radius: 9px; padding: 8px 9px; text-align: center; }
.pay-tile.pay-wide { grid-column: 1 / -1; text-align: left; display: flex; justify-content: space-between; align-items: center; }
.pay-tlab { display: block; font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.pay-wide .pay-tlab { display: inline; }
.pay-tval { display: block; font-family: var(--font-mono); font-weight: 600; font-size: 14px; margin-top: 3px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pay-wide .pay-tval { margin-top: 0; }
.pay-totalbar { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; background: var(--brand); color: #fff; border-radius: 9px; padding: 9px 13px; }
.pay-tl { font-size: 12px; letter-spacing: 0.04em; color: #d9e6df; }
.pay-tv { font-family: var(--font-mono); font-weight: 700; font-size: 17px; color: #ffe9b0; font-variant-numeric: tabular-nums; }
.pay-zero { opacity: 0.55; }
/* Payroll-tax (W-4 withholding) block on each pay card */
.pay-tax { margin-top: 10px; border: 1px solid var(--line); border-radius: 10px; padding: 9px 11px 10px; background: var(--bg); }
.pay-tax-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.pay-tax-t { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pay-w4 { font-family: var(--font-mono); font-size: 10.5px; color: var(--brand-700); background: var(--brand-50); border: 1px solid #cfe0d6; border-radius: 999px; padding: 3px 9px; cursor: pointer; white-space: nowrap; }
.pay-w4:hover { background: #dcebe2; }
.ptx { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 12.5px; color: var(--ink); padding: 3px 0; }
.ptx span:first-child { color: var(--muted); }
.ptx-v { font-family: var(--font-mono); color: var(--danger); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pay-net { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; padding-top: 7px; border-top: 1px solid var(--line); }
.pay-net span:first-child { font-weight: 600; font-size: 13px; color: var(--ink); }
.pay-net span:last-child { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--brand); font-variant-numeric: tabular-nums; }
.pay-tax-none { font-size: 12px; color: var(--muted); padding: 2px 0; }
.pay-tax-foot { font-size: 11px; color: var(--muted); line-height: 1.5; margin: 10px 2px 0; }
/* Employer match block + fully-loaded labor */
.pay-load { margin-top: 8px; border: 1px solid #e6d3a3; border-radius: 10px; padding: 9px 11px 10px; background: var(--accent-50); }
.pay-load-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #8a6a1f; margin-bottom: 4px; }
.ptx-add { font-family: var(--font-mono); color: #8a6a1f; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.pay-cost { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-top: 6px; padding-top: 7px; border-top: 1px solid #e6d3a3; }
.pay-cost span:first-child { font-weight: 600; font-size: 13px; color: var(--ink); }
.pay-cost span:last-child { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: #8a6a1f; font-variant-numeric: tabular-nums; }
.pay-loadbar { background: var(--brand); border-radius: 12px; padding: 11px 14px; margin-bottom: 12px; box-shadow: var(--shadow); }
.plb-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.plb-lab { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: #d9e6df; }
.plb-num { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: #fff; font-variant-numeric: tabular-nums; }
.plb-sub { font-family: var(--font-mono); font-size: 11px; color: #9fc8ba; margin-top: 3px; font-variant-numeric: tabular-nums; }
.w4-check { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--ink); margin: 4px 0 12px; cursor: pointer; }
.w4-check input { margin-top: 2px; flex-shrink: 0; }
.w4-hint { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.pay-emp .pay-head { margin-bottom: 6px; }
.pay-emp .pay-emptot { margin-left: auto; flex-shrink: 0; font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.pay-shifts { display: flex; flex-direction: column; }
.pay-emp .ts-shift:last-child { border-bottom: 0; padding-bottom: 0; }

/* ---------- Notifications bell + panel (build 077) ---------- */
.bell { position: relative; background: transparent; border: 0; color: var(--brand-700); padding: 6px; border-radius: 8px; cursor: pointer; display: inline-flex; align-items: center; }
.bell:hover { background: rgba(10, 74, 60, 0.08); }
.bell-badge { position: absolute; top: -1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--accent); color: #fff; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg); }
.notif-list { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow-y: auto; }
.notif { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.notif.unread { border-left: 3px solid var(--accent); background: var(--accent-50); }
.notif-title { font-weight: 600; font-size: 14px; line-height: 1.3; }
.notif-body { font-size: 13px; color: var(--muted); margin-top: 3px; line-height: 1.45; }
.notif-time { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 5px; }

/* ---------- Shift detail: shift cards (build 078) ---------- */
.sd-card { background: #fff; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; }
.sd-card:last-child { margin-bottom: 0; }
.sd-top { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.sd-date { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #8a6a1f; }
.sd-acts { margin-left: auto; display: inline-flex; gap: 2px; flex-shrink: 0; }
.sd-times { font-family: var(--font-mono); font-size: 15px; font-weight: 600; color: var(--ink); }
.sd-arrow { color: var(--muted); }
.sd-open { color: var(--ok); font-weight: 600; }
.sd-foot { display: flex; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.sd-pill { font-family: var(--font-mono); font-size: 11px; background: var(--brand-50); color: var(--brand-700); padding: 3px 9px; border-radius: 999px; }
.sd-pill.t { background: var(--accent-50); color: #8a6a1f; }
.sd-tag { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: #fff; white-space: nowrap; }
.sd-tag.live { color: #fff; background: var(--ok); border-color: var(--ok); }
.sd-tag.warn { color: #8a5a12; background: #fbeccc; border-color: #e7d3a0; }

/* ---------- Menu bulk price adjustment (build 080) ---------- */
.aj-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 13px; padding: 3px 0; }
.aj-row + .aj-row { border-top: 1px solid var(--line); }
.aj-nm { color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aj-delta { font-family: var(--font-mono); color: var(--muted); white-space: nowrap; flex-shrink: 0; }
.aj-delta b { color: var(--brand-700); }
.aj-more { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* ---------- Orders (Phase 4, build 083) ---------- */
.ord-list { display: flex; flex-direction: column; gap: 12px; }
.ord-card.ord-void { opacity: 0.6; }
.ord-time { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.ord-lines { display: flex; flex-direction: column; gap: 3px; margin: 2px 0 9px; }
.ord-line { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.ord-line .ord-lp { font-family: var(--font-mono); color: var(--muted); white-space: nowrap; }
.ord-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--line); padding-top: 9px; }
.ord-sub { font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--brand-700); }
.ord-status { font: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); text-transform: capitalize; }
.ord-status.st-ready { border-color: var(--ok); color: var(--ok); }
.ord-status.st-paid { color: var(--muted); }
/* orders control-room kanban (build 152) */
.ord-board{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;flex:1;min-height:0;margin-top:4px}
.ord-col{display:flex;flex-direction:column;min-height:0;background:var(--bg);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.ord-col-h{display:flex;align-items:center;justify-content:space-between;padding:9px 12px;font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:capitalize;border-bottom:1px solid var(--line);background:var(--surface)}
.ord-col-h.st-open{color:#4a5a6a}
.ord-col-h.st-preparing{color:#9a6a12}
.ord-col-h.st-ready{color:var(--ok)}
.ord-col-h.st-served{color:var(--brand-700)}
.ord-col-h.st-paid{color:var(--muted)}
.ord-col-n{font-family:var(--font-mono);font-size:11px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:1px 9px;color:var(--muted)}
.ord-col-body{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:10px}
.ord-col .pay-card{padding:10px 11px;border-radius:10px;box-shadow:none}
@media (max-width:1100px){ .ord-board{grid-template-columns:repeat(2,1fr);overflow-y:auto} .ord-col{height:320px} }

/* ---------- Financials module (build 083) ---------- */
.fn-periods { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.fn-period { font: inherit; font-size: 13px; font-weight: 500; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--brand-700); cursor: pointer; box-shadow: var(--shadow); }
.fn-period.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.fn-period-sel { font: inherit; font-size: 14px; font-weight: 600; color: var(--brand-700); padding: 9px 32px 9px 13px; border: 1px solid var(--line-strong); border-radius: 10px; background-color: var(--surface); box-shadow: var(--shadow); cursor: pointer; max-width: 280px; }
.fn-period-sel:hover { border-color: var(--accent); }
.fn-range { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0 2px 14px; }
.fn-tlink { background: none; border: 0; color: var(--accent-700, #8a6a1f); font: inherit; font-size: 12px; cursor: pointer; text-decoration: underline; margin-left: 6px; }
.fn-tlink.danger { color: var(--danger, #a32d2d); }

.fn-pnl { padding: 6px 14px; margin-bottom: 14px; }
.fn-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.fn-line:last-child { border-bottom: 0; }
.fn-line.head span:first-child { font-weight: 600; font-size: 15px; }
.fn-line.head .fn-amt { font-family: var(--font-display); font-weight: 600; font-size: 17px; color: var(--brand-700); }
.fn-line.sub { padding: 6px 0; }
.fn-line.sub span:first-child { color: var(--muted); font-size: 13.5px; }
.fn-line.sub em { font-style: normal; font-family: var(--font-mono); font-size: 11px; color: var(--accent-700, #8a6a1f); margin-left: 4px; }
.fn-line.tot span:first-child { font-weight: 600; }
.fn-line.tot .fn-amt { font-weight: 600; font-family: var(--font-mono); }
.fn-line.profit { border-top: 2px solid var(--brand-50); margin-top: 2px; padding-top: 11px; }
.fn-line.muted { opacity: 0.62; padding-top: 4px; border-bottom: 0; }
.fn-line.muted .fn-amt { font-family: var(--font-mono); }
.fn-line.profit span:first-child { font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.fn-line.profit em { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 6px; font-family: var(--font-mono); }
.fn-line.profit .fn-amt { font-family: var(--font-display); font-weight: 700; font-size: 20px; color: var(--brand-700); }
.fn-line.profit.loss .fn-amt { color: #b4452f; }
.fn-amt { font-family: var(--font-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn-amt.neg { color: var(--muted); }
.fn-d { font-family: var(--font-mono); font-size: 11px; margin-left: 4px; }
.fn-d.good { color: #2f7d52; } .fn-d.bad { color: #b4452f; } .fn-d.flat { color: var(--muted); }

.fn-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.fn-tile { background: var(--surface); border: 1px solid var(--line); border-top: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; box-shadow: var(--shadow); }
.fn-tile.good { border-top-color: #2f7d52; }
.fn-tile.over { border-top-color: #c9952f; }
.fn-tile.cash { border-top-color: var(--accent); }
.fn-tl { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.fn-tv { font-family: var(--font-display); font-weight: 700; font-size: 24px; color: var(--brand-700); margin-top: 4px; font-variant-numeric: tabular-nums; }
.fn-tv.money { font-size: 19px; }
.fn-tile.over .fn-tv { color: #a9701c; }
.fn-tgt { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }

.fn-exps { padding: 10px 12px 6px; }
.fn-exp { display: flex; align-items: center; gap: 10px; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--exp-spine, var(--brand)); border-radius: 13px; padding: 11px 12px; margin-bottom: 9px; box-shadow: 0 1px 2px rgba(20, 40, 30, 0.04); }
.fn-exp:last-child { margin-bottom: 0; }
.fn-exp.k-cogs { --exp-spine: #b08628; }
.fn-exp.k-opex { --exp-spine: #0a4a3c; }
.fn-exp.k-labor { --exp-spine: #3a4a86; }
.fn-exp.k-excluded { --exp-spine: #8a8475; }
.fn-exp.k-deposit { --exp-spine: #2f6d8f; }
.fn-exp-body { flex: 1; min-width: 0; }
.fn-exp-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fn-ex-cat { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand-700); white-space: nowrap; border: 0; cursor: pointer; }
.fn-ex-cat:hover { filter: brightness(0.97); }
.fn-ex-cat.cogs { background: #f7e9c8; color: #6e4f12; }
.fn-ex-cat.opex { background: #dfede7; color: #0a4a3c; }
.fn-ex-cat.labor { background: #e7e9f6; color: #3a4a86; }
.fn-ex-cat.excluded { background: #eceae2; color: #5f5a4d; }
.fn-ex-cat.deposit { background: #e1ecf2; color: #235471; }
.fn-cat-filter { font-family: inherit; font-size: 13px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 8px; max-width: 170px; }
.fn-cat-filter:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.fn-exp-tot { display: flex; justify-content: space-between; gap: 10px; margin: 4px 2px 2px; padding-top: 11px; border-top: 2px solid var(--line-strong); font-weight: 600; }
.fn-exp-tot span:last-child { font-family: var(--font-mono); }
.fn-ex-when { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 5px; font-family: var(--font-mono); }
.fn-ex-amt { font-family: var(--font-mono); font-weight: 600; font-size: 16px; color: var(--ink); white-space: nowrap; letter-spacing: -0.02em; }
.fn-exp.k-deposit .fn-ex-amt { color: #235471; }

/* ---------- Financials: Plaid bank feed (build 085) ---------- */
.fn-bank { padding: 12px 14px; }
.fn-bank-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fn-bank-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.fn-bank-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--surface); }
.fn-bank-item.needs { border-color: #f1d49a; background: var(--accent-50); }
.fn-bi-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fn-bi-name { font-weight: 600; color: var(--ink); }
.fn-bi-when { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.fn-bi-badge.warn { font-size: 11px; font-weight: 600; color: #7a4d08; background: #f7e6c0; border-radius: 999px; padding: 1px 8px; }
.fn-bi-actions { display: flex; align-items: center; gap: 8px; }
.fn-bi-bal { font-family: var(--font-display); font-weight: 600; color: var(--brand-700); font-variant-numeric: tabular-nums; }
.fn-bank-env { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 6px; margin-left: 6px; }
.fn-bank-hint { font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.fn-rev-list { display: flex; flex-direction: column; gap: 8px; max-height: 60vh; overflow-y: auto; }
.fn-rev { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.fn-rev-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.fn-rev-name { font-weight: 600; font-size: 14px; }
.fn-rev-amt { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.fn-rev-amt.in { color: #2f7d52; }
.fn-rev-meta { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 2px; }
.fn-rev-act { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.fn-rev-cat { flex: 1; }
.fn-rev-income { flex: 1; font-size: 12px; color: var(--muted); }

/* ---------- Financials: cash in bank (build 087) ---------- */
.fn-cash { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 4px 0 12px; margin-bottom: 10px; border-bottom: 1px solid var(--line); }
.fn-cash-lab { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.fn-cash-val { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--brand-700); font-variant-numeric: tabular-nums; }
.fn-cash-at { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }

/* ---------- Privacy link (build 089) ---------- */
.foot-link { color: var(--muted); text-decoration: underline; }
.foot-link:hover { color: var(--brand-700); }

/* ---------- Supply price chip (build 090) ---------- */
.price-chip { display: inline-flex; align-items: center; padding: 2px 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: #8a6a1f; background: var(--accent-50); border: 1px solid #e6d4a8; border-radius: 999px; white-space: nowrap; }

/* ---------- Cash-flow forecast (build 093) ---------- */
.fn-fc { padding: 14px 16px; }
.fn-fc-tag { font-family: var(--font-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 1px 7px; margin-left: 8px; font-weight: 600; }
.fn-fc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.fn-fc-big { font-family: var(--font-display); font-weight: 700; font-size: 26px; color: var(--brand-700, #2f7d52); font-variant-numeric: tabular-nums; line-height: 1.1; }
.fn-fc-big.neg { color: var(--danger); }
.fn-fc-lab { font-size: 12px; color: var(--muted); margin-top: 2px; }
.fn-fc-meta { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.fn-fc-sub { font-size: 12px; color: var(--muted); }
.fn-fc-svg { display: block; width: 100%; height: 96px; margin: 12px 0 8px; }
.fn-fc-band { fill: color-mix(in srgb, var(--accent) 16%, transparent); stroke: none; }
.fn-fc-line { fill: none; stroke: var(--brand-700, #2f7d52); stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.fn-fc-zero { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.fn-fc-foot { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.fn-fc-note { font-size: 11.5px; color: var(--muted); margin-top: 8px; line-height: 1.45; opacity: 0.92; }

/* ---------- Recurring expenses modal ---------- */
.fn-rec-list { display: flex; flex-direction: column; gap: 2px; }
.fn-rec { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.fn-rec-main { flex: 1 1 auto; min-width: 0; }
.fn-rec:last-of-type { border-bottom: 0; }
.fn-rec-name { font-weight: 600; font-size: 14px; }
.fn-rec-meta { display: block; font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.fn-rec-amt { font-family: var(--font-mono); font-weight: 600; white-space: nowrap; }
.fn-rec-tot { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 10px; border-top: 2px solid var(--line-strong); font-weight: 600; }

/* ---------- Bank review: bulk bar + suggestions (build 093) ---------- */
.fn-rev-bulk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 10px; margin-bottom: 10px; background: var(--accent-50); border: 1px solid var(--line); border-radius: 10px; position: sticky; top: 0; z-index: 1; }
.fn-rev-bulk .spacer { flex: 1; }
.fn-rev-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.fn-rev-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.fn-rev-bulk select { max-width: 150px; }
.fn-rev { display: flex; gap: 10px; align-items: flex-start; }
.fn-rev-pick { padding-top: 2px; }
.fn-rev-body { flex: 1; min-width: 0; }
.fn-rev-badge { font-family: var(--font-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.04em; color: #8a6a1f; background: var(--accent-50); border: 1px solid #e6d4a8; border-radius: 999px; padding: 1px 6px; margin-left: 8px; vertical-align: middle; }
.fn-rev-sug { font-style: normal; font-size: 11px; color: var(--muted); margin-left: 8px; }
.fn-rev-sug.history { color: #2f7d52; }

/* ---------- Two-factor / Security page (build 093) ---------- */
.mfa-card { text-align: left; }
.mfa-status { display: flex; align-items: center; gap: 9px; font-size: 15px; margin: 4px 0 6px; }
.mfa-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.mfa-status.on .mfa-dot { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 22%, transparent); }
.mfa-status.off .mfa-dot { background: var(--muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--muted) 18%, transparent); }
.mfa-help { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 8px 0 14px; }
.mfa-backup-line { font-size: 13.5px; margin: 0 0 14px; }
.mfa-low { color: var(--danger); font-weight: 600; }
.mfa-qr-box { display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin: 8px 0 12px; }
.mfa-qr { display: block; image-rendering: pixelated; }
.mfa-secret { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.04em; text-align: center; background: var(--accent-50); border: 1px solid #e6d4a8; border-radius: var(--radius-sm); padding: 10px; margin: 6px 0 14px; word-break: break-all; user-select: all; }
.mfa-codes { font-family: var(--font-mono); font-size: 15px; columns: 2; column-gap: 18px; list-style: none; padding: 12px 14px; margin: 8px 0 14px; background: var(--accent-50); border: 1px solid #e6d4a8; border-radius: var(--radius); }
.mfa-codes li { padding: 3px 0; break-inside: avoid; }

.invite-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }

/* ---------- Schedule: restaurant closures (build 095) ---------- */
.sc-day-actions { display: flex; gap: 6px; flex-wrap: nowrap; flex: 0 0 auto; }
.sc-day-actions .btn.small { padding: 7px 10px; }
.sc-day.closed { background: #f3efe6; border-style: dashed; }
.sc-day.closed .sc-chips { opacity: 0.5; }
.sc-closed-banner { display: inline-block; font-size: 12px; font-weight: 650; color: var(--danger); background: var(--danger-50); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); border-radius: 999px; padding: 2px 10px; margin-bottom: 8px; }
.sc-closed-note { font-size: 13.5px; color: var(--ink); }
.sc-closed-note b { color: var(--danger); }

/* ---------- Sales / Daily: restaurant closures (build 096) ---------- */
.fin-card.closed { background: var(--danger-50); border-color: color-mix(in srgb, var(--danger) 22%, transparent); border-style: solid; box-shadow: none; }
.fin-card.closed .fin-badge { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.fin-card.closed .fin-badge b { color: var(--danger); }
.fin-closed { color: var(--danger); font-size: 14px; font-weight: 650; letter-spacing: 0.01em; }
.fin-closed-banner { display: inline-block; font-size: 12px; font-weight: 650; color: var(--danger); background: var(--danger-50); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent); border-radius: 999px; padding: 3px 12px; }
.fin-close-btn { width: 100%; margin-top: 12px; color: var(--danger); }
.fin-close-btn:hover { background: var(--danger-50); border-color: var(--danger); }

/* Cancel control on a pending request (build 096) */
.sc-req-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Clickable notifications (build 098) */
.notif-link { cursor: pointer; transition: border-color .12s ease, transform .06s ease; }
.notif-link:hover { border-color: var(--brand); }
.notif-link:active { transform: scale(.995); }
.notif-link .notif-title::after { content: " ›"; color: var(--brand); font-weight: 700; }

/* Finance: pick day/week/month period (build 098) */
.fn-range { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fn-range .fn-range-lab { flex: 0 0 auto; }
.fn-step { width: 30px; height: 30px; font-size: 18px; line-height: 1; }
.seg { display: flex; width: 100%; gap: 0; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { flex: 1 1 0; min-width: 0; font: inherit; font-size: 13.5px; padding: 9px 6px; border: 0; border-right: 1px solid var(--line); background: var(--surface); color: var(--brand-700); cursor: pointer; white-space: nowrap; text-align: center; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: var(--brand); color: #fff; }

/* ---------- Team chat (build 098) ---------- */
.ch-thread { display: flex; flex-direction: column; gap: 8px; height: calc(100dvh - 210px); min-height: 240px; overflow-y: auto; padding: 8px 2px 12px; }
.ch-msg { display: flex; }
.ch-msg.mine { justify-content: flex-end; }
.ch-bubble { max-width: 78%; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px 12px; box-shadow: var(--shadow); }
.ch-msg.mine .ch-bubble { background: var(--brand); border-color: var(--brand); color: #fff; }
.ch-who { font-size: 11px; font-weight: 700; color: var(--muted); margin-bottom: 2px; }
.ch-msg.mine .ch-who { color: rgba(255, 255, 255, 0.82); }
.ch-text { font-size: 15px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.ch-time { font-size: 10.5px; color: var(--muted); margin-top: 3px; text-align: right; font-family: var(--font-mono); }
.ch-msg.mine .ch-time { color: rgba(255, 255, 255, 0.75); }
.ch-compose { display: flex; gap: 8px; align-items: flex-end; padding-top: 10px; border-top: 1px solid var(--line); }
.ch-compose textarea { flex: 1; resize: none; font: inherit; font-size: 15px; line-height: 1.4; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink); max-height: 120px; }
.ch-compose textarea:focus { outline: none; border-color: var(--brand); }
/* chat control-room room (build 152) */
.ch-room{flex:1;min-height:0;display:flex;flex-direction:column;width:100%;max-width:880px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
.ch-room .ch-thread{flex:1;min-height:0;height:auto;padding:16px 16px 12px}
.ch-room .ch-compose{padding:12px 16px;margin:0;border-top:1px solid var(--line)}
.ch-room .ch-bubble{box-shadow:none}
/* team control-room layout (build 153) */
#team{overflow-y:auto}
.cr-body .team-grid{display:grid;grid-template-columns:360px 1fr;gap:16px;align-items:start;margin-top:4px}
.team-invite{position:sticky;top:0}
.team-members{min-width:0}
.team-members > h3{margin:0 0 6px}
.team-members #userList{margin-top:6px;display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:10px;align-items:start}
.cr-body #reqBanner:not(:empty){margin-bottom:12px}
@media (max-width:900px){ .cr-body .team-grid{grid-template-columns:1fr} .team-invite{position:static} }

/* Notification panel footer: device alerts + test email (build 099) */
.notif-foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* Unread badge on the Team chat module card (build 100) */
.mod-badge { position: absolute; top: 10px; right: 12px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center; box-shadow: var(--shadow); }

/* From→to range picker in the period modal */
.fn-range-pick { display: flex; align-items: center; gap: 8px; }
.fn-range-pick input[type="date"] { flex: 1; min-width: 0; }
.fn-range-dash { color: var(--muted); font-weight: 600; }

/* Import-transactions modal */
.modal-hint { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 12px; }
.im-prev { margin: 8px 0 14px; }

/* Clickable P&L cost lines → drill into the expense list */
.fn-line-link { cursor: pointer; border-radius: 8px; transition: background 0.12s; }
.fn-line-link span:first-child { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.fn-line-link:hover { background: #fbf7ee; }
.fn-line-link:active { background: #f5efe1; }
.fn-line-link span:first-child::after { content: " ›"; color: var(--accent-700, #8a6a1f); text-decoration: none; }
.fn-exp-filter { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; margin: 2px 0 10px; background: var(--brand-50, #e3efe9); border-radius: 10px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--brand-700); }
.fn-clear-filter { background: none; border: 0; color: var(--brand-700); font-family: var(--font-mono); font-size: 12px; font-weight: 600; cursor: pointer; }

/* ---- Team roster cards (Design 1) ---- */
.trow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); margin-bottom: 10px; box-shadow: 0 1px 2px rgba(20, 40, 30, 0.04); }
.trow:last-child { margin-bottom: 0; }
.tav { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-weight: 600; font-size: 14px; color: #fff; flex: none; }
.tav.owner { background: linear-gradient(135deg, #0a4a3c, #0f6a52); }
.tav.admin { background: linear-gradient(135deg, #3a4a86, #5566ad); }
.tav.emp { background: linear-gradient(135deg, #9a7a2a, #b89033); }
.twho { min-width: 0; }
.ttop { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.tn { font-weight: 600; font-size: 15px; }
.tyou { font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--brand-700); background: var(--brand-50); border-radius: 5px; padding: 2px 6px; }
.trole { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
.trole.owner { background: var(--brand-50); color: var(--brand-700); }
.trole.admin { background: #e7e9f6; color: #3a4a86; }
.trole.emp { background: var(--accent-50); color: #8a6a1f; }
.trole.susp { background: var(--danger-50); color: var(--danger); }
.tmeta { display: flex; align-items: center; gap: 8px; margin-top: 5px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; }
.tmeta:empty { display: none; }
.tpos { text-transform: capitalize; color: var(--ink); }
.tpay { color: var(--ink); font-weight: 600; }
.tem { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tright { display: flex; align-items: center; gap: 7px; justify-self: end; }
.tmanage { font-family: inherit; font-size: 13px; font-weight: 500; color: var(--brand-700); background: transparent; border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 12px; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; }
.tmanage svg { width: 13px; height: 13px; transition: transform 0.15s; }
.tmanage.open svg { transform: rotate(180deg); }
.tmenu { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 7px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.tmenu .btn { width: 100%; }
.tmenu[hidden] { display: none; }
.trow .access-tag { margin-top: 5px; }

/* ---- Tidier invite form ---- */
.invite-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 8px; align-items: stretch; }
.invite-controls input { min-width: 0; flex: none; }
.invite-controls #inviteEmail { grid-column: 1 / -1; }
.invite-controls #makeInvite { width: auto; align-self: stretch; }

/* Caption under the P&L Labor line noting bank payroll is folded into labor */
.fn-cap { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); padding: 0 0 8px; margin-top: -6px; }
.fn-cap.warn { color: var(--accent-700, #8a6a1f); }

/* Break-even card */
.fn-be { padding: 16px 14px; }
.fn-be-big { font-family: var(--font-display); font-weight: 600; font-size: 30px; color: var(--brand-700); letter-spacing: -0.01em; }
.fn-be-per { font-family: var(--font-mono); font-size: 14px; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.fn-be-lab { font-size: 13px; color: var(--muted); margin-top: 2px; }
.fn-be-rows { margin: 12px 0 10px; border-top: 1px solid var(--line); }
.fn-be-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.fn-be-row span:first-child { color: var(--muted); }
.fn-be-row span:last-child { font-family: var(--font-mono); font-weight: 600; }
.fn-be-gap { font-size: 13.5px; font-weight: 600; padding: 9px 11px; border-radius: 10px; margin-bottom: 10px; }
.fn-be-gap.ok { background: var(--brand-50, #e3efe9); color: var(--brand-700); }
.fn-be-gap.short { background: var(--accent-50, #f7eed8); color: var(--accent-700, #8a6a1f); }

/* Menu price baseline (build 140) */
.aj-base-status { font-size: 13px; color: var(--ink-2, #5b5347); }
.aj-base-hint { font-size: 12px; color: var(--ink-3, #8a8170); margin-top: 8px; line-height: 1.4; }

/* ===== Dashboard v2 — Design 6 "control room" (build 141) ===== */
.dash-root{height:100vh;display:flex;flex-direction:column;overflow:hidden;background:#eef0ea}
.dash-root .topbar{flex:0 0 auto}
.dash{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:1fr minmax(264px,336px);gap:0}
.dash-main{min-height:0;overflow-y:auto;overflow-x:hidden;display:flex;flex-direction:column;gap:11px;padding:14px 22px 16px}
.dash-chrow{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.dash-h1{font-family:var(--font-display);font-size:var(--fs-display);font-weight:600;letter-spacing:-.01em;margin:0}
.dash-sub{font-size:var(--fs-sub);color:var(--muted);margin-top:2px}

.dash-widgets{flex:0 0 auto;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr);gap:12px}
.dwid{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px;min-width:0;text-align:center;display:flex;flex-direction:column;justify-content:center}
.dw-e{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.dw-v{font-family:var(--font-mono);font-size:var(--fs-widget);font-weight:600;color:var(--brand-700);margin-top:4px;white-space:nowrap}
.dw-d{font-size:11.5px;color:var(--muted);margin-top:4px}
.dw-skel{height:46px;margin-top:8px;border-radius:8px;background:linear-gradient(90deg,#efe9da,#f6f1e6,#efe9da);background-size:200% 100%;animation:dwsk 1.3s linear infinite}
@keyframes dwsk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.dw-spark{display:flex;align-items:flex-end;gap:5px;height:42px;margin-top:9px}
.dw-spark i{flex:1;background:var(--brand-50);border-radius:3px 3px 0 0;min-height:4px}
.dw-spark i.h{background:var(--accent)}
.dw-rows{margin-top:6px}
.dw-row{display:flex;align-items:center;justify-content:space-between;padding:5px 0;border-bottom:1px dashed var(--line);font-size:13px}
.dw-row:last-child{border:0}
.dw-row b{font-family:var(--font-mono);color:var(--brand-700)}

.dash-qhead{flex:0 0 auto;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0}
.dash-tiles{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(106px,1fr);gap:11px;flex:1.6 1 auto}
.dt{position:relative;overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:16px;height:100%;min-height:0;padding:14px;display:flex;flex-direction:column;text-align:left;transition:transform .14s,box-shadow .14s,border-color .14s;cursor:pointer}
.dt[role="button"]:hover{border-color:var(--accent);box-shadow:0 12px 26px rgba(120,90,20,.10);transform:translateY(-2px)}
.dt.soon{opacity:.62;cursor:default}
.dt-chip{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;z-index:2}
.dt.brand .dt-chip{background:var(--brand-50);color:var(--brand)}
.dt.gold .dt-chip{background:var(--accent-50);color:var(--accent)}
.dt-chip svg{width:18px;height:18px}
.dt-name{font-weight:700;font-size:var(--fs-tile);margin-top:auto;z-index:2;color:var(--ink)}
.dt-soon{font-family:var(--font-mono);font-size:9px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;background:#efe9da;color:var(--muted);border-radius:5px;padding:2px 6px;vertical-align:middle}
.dt-desc{font-size:11px;color:var(--muted);margin-top:2px;z-index:2;max-width:64%;line-height:1.3}
.dt-art{position:absolute;right:-4px;bottom:-2px;width:108px;height:78px;z-index:1}
.dt-art-icon{display:grid;place-items:end;right:6px;bottom:4px;width:auto;height:auto}
.dt-art-icon svg{width:78px;height:78px;opacity:.09;color:var(--brand)}

.dash-timeline{flex:0 0 auto;min-height:120px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 16px 12px;display:flex;flex-direction:column}
.tl-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.tl-head h3{font-family:var(--font-display);font-size:16px;font-weight:600;margin:0}
.tl-range{font-family:var(--font-mono);font-size:11px;color:var(--muted)}
.tl-axis{position:relative;height:14px;margin-left:96px;border-bottom:1px solid var(--line);flex:0 0 auto}
.tl-axis span{position:absolute;transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.tl-rows{flex:0 0 auto;overflow:visible;display:flex;flex-direction:column;justify-content:flex-start;gap:6px;padding-top:6px}
.tlrow{display:grid;grid-template-columns:96px 1fr;align-items:center}
.tlwho{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink)}
.tltrack{position:relative;height:20px}
.tlbar{position:absolute;top:2px;height:16px;border-radius:8px;display:flex;align-items:center;padding-left:9px;font-size:10px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;background:linear-gradient(90deg,var(--accent),#caa14a)}
.tlbar.in{background:linear-gradient(90deg,var(--brand),#0e6a54)}
.tlnow{position:absolute;top:-5px;bottom:-5px;width:2px;background:var(--danger)}
.tlnow:after{content:"now";position:absolute;top:-13px;left:-7px;font-family:var(--font-mono);font-size:8.5px;color:var(--danger)}
.dav{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:700;background:linear-gradient(135deg,var(--brand),#0e6a54);flex:none}
.dav.sm{width:24px;height:24px;font-size:9px}

.dash-side{min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--surface);border-left:1px solid var(--line);padding:14px 16px;display:flex;flex-direction:column;gap:12px}
.dside-card{min-height:0}
.dside-card h3,.dside-86 .d86-lab{margin:0}
.dside-card h3{font-family:var(--font-display);font-size:15.5px;font-weight:600;margin-bottom:5px;display:flex;align-items:center;justify-content:space-between}
.dside-card h3 .c{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-weight:500}
.dpr{display:flex;align-items:center;gap:10px;padding:5px 0;border-bottom:1px solid var(--line)}
.dpr:last-child{border:0}
.dpr-n{font-weight:600;font-size:12.5px;color:var(--ink)}
.dpr-m{font-size:10.5px;color:var(--muted);font-family:var(--font-mono);margin-top:1px}
.dpr-el{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--brand-700);font-weight:600}
.dside-86{background:var(--danger-50);border:1px solid #ecd8d2;border-radius:12px;padding:10px 13px;flex:0 0 auto}
.d86-lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--danger);font-weight:600}
.d86-it{font-size:12px;color:#7a3b34;margin-top:4px;line-height:1.4}
.dash-build{margin-top:auto;padding-top:8px;font-size:10.5px;color:var(--muted)}
.dash-build .foot-link{color:var(--muted)}
.empty.small{font-size:12px;color:var(--muted);padding:6px 0}

/* employee view: simple scrolling tile grid */
.dash-tiles.static{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));grid-auto-rows:auto;gap:12px;flex:none}
.dash-tiles.static .dt{height:auto;min-height:118px}

/* Medium desktops / 2-in-1s (e.g. 13" 1920x1200 scaled): give tiles more room
   so labels never clip, before the phone breakpoint takes over. */
@media (max-width:1200px){
  .dash-main{padding:14px 16px 14px}
  .dash-tiles{grid-template-columns:repeat(3,1fr)}
  .dash{grid-template-columns:1fr minmax(248px,300px)}
}

/* Short desktop viewports — e.g. a 1080p laptop at 150% scale (~1280x720 CSS).
   Tighten the dashboard's vertical rhythm so it fits without much scrolling. */
@media (min-width:981px) and (max-height:840px){
  .dash-main{gap:8px;padding:10px 20px 12px}
  .dash-h1{font-size:20px}
  .dash-sub{font-size:11.5px}
  .dash-widgets{gap:9px}
  .dwid{padding:10px 14px}
  .dw-v{font-size:21px}
  .dw-e{font-size:9.5px}
  .dw-spark{height:30px;margin-top:6px}
  .dw-d{font-size:10.5px;margin-top:2px}
  .dash-qhead{font-size:10px}
  .dash-tiles{grid-auto-rows:minmax(90px,1fr);gap:9px}
  .dt{padding:11px}
  .dt-name{font-size:13.5px}
  .dash-timeline{min-height:116px;padding:8px 14px 10px}
}

@media (max-width:980px){
  .dash-root{height:100dvh;overflow:hidden}
  .dash{display:block;overflow-y:auto;min-height:0;grid-template-columns:1fr}
  .dash-main{overflow:visible;padding:14px}
  .dash-widgets{grid-template-columns:1fr}
  .dash-tiles{grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;flex:none}
  .dash-tiles .dt{height:auto;min-height:120px}
  .dash-timeline{flex:none}
  .dash-side{border-left:0;border-top:1px solid var(--line);overflow:visible}
}

/* ===== Control-room module framework (build 142) — shared by all full-screen modules ===== */
.cr-root{height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg)}
.cr-root .topbar{flex:0 0 auto}
.cr-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:13px;padding:14px 22px 16px;overflow:hidden}
.cr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 12px;flex:0 0 auto;flex-wrap:wrap}
.cr-h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:600;letter-spacing:-.01em;margin:0}
.cr-sub{font-size:var(--fs-sub);color:var(--muted);margin-top:2px}
.cr-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end}
.cr-pill{font-family:var(--font-mono);font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:3px 10px;white-space:nowrap}
.cr-pill.ok{color:var(--ok);border-color:#bfe3d3;background:#eef8f3}
.cr-pill.warn{color:var(--accent);border-color:#e8d6a6;background:var(--accent-50)}
.cr-pill.live::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok);margin-right:6px;vertical-align:middle;animation:crpulse 1.6s ease-in-out infinite}
@keyframes crpulse{0%,100%{opacity:1}50%{opacity:.35}}
.cr-tbtn{border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-weight:600;font-size:12.5px;padding:7px 13px;border-radius:9px;cursor:pointer}
.cr-tbtn.p{background:var(--brand);color:#fff;border-color:var(--brand)}

.cr-kpis{display:grid;gap:12px;flex:0 0 auto}
.cr-kpi{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:13px 16px;min-width:0;text-align:center;display:flex;flex-direction:column;justify-content:center}
.cr-lab{font-family:var(--font-mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.cr-val{font-family:var(--font-mono);font-weight:600;color:var(--brand-700);font-size:var(--fs-kpi);margin-top:3px;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-vsub{font-size:11px;color:var(--muted);margin-top:2px}

.cr-grid{flex:1;min-height:0;display:grid;gap:13px}
.cr-card{background:var(--surface);border:1px solid var(--line);border-radius:15px;padding:15px 18px;min-height:0;min-width:0;display:flex;flex-direction:column}
.cr-card h3{font-family:var(--font-display);font-size:15px;font-weight:600;margin:0 0 6px;display:flex;align-items:center;justify-content:space-between;flex:0 0 auto}
.cr-card h3 .c{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-weight:500}
.cr-scroll{overflow:auto;min-height:0;flex:1}
.cr-scroll::-webkit-scrollbar{width:8px}.cr-scroll::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}
.cr-empty{color:var(--muted);font-size:12px;padding:8px 0}

.cr-spark{display:flex;align-items:flex-end;gap:4px;height:100%}
.cr-spark i{flex:1;background:var(--brand-50);border-radius:2px 2px 0 0;min-height:6px}
.cr-spark i.h{background:var(--accent)}
.cr-gauge-lab{text-align:center;font-size:12px;font-weight:600;margin-top:3px}

.cr-av{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;font-family:var(--font-mono);font-size:10px;font-weight:700;background:linear-gradient(135deg,var(--brand),#0e6a54);flex:none}
.cr-av.g{background:linear-gradient(135deg,var(--accent),#caa14a)}
.cr-av.sm{width:24px;height:24px;font-size:9px}

/* roster rows */
.cr-pr{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.cr-pr:last-child{border-bottom:0}
.cr-pr-n{font-weight:600;font-size:13px;color:var(--ink)}
.cr-pr-m{font-size:11px;color:var(--muted);font-family:var(--font-mono);margin-top:1px}
.cr-pr-r{margin-left:auto;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--brand-700)}
.cr-tag{font-family:var(--font-mono);font-size:10px;font-weight:600;border-radius:6px;padding:2px 8px}
.cr-tag.in{background:#eef8f3;color:var(--ok)}
.cr-tag.out{background:#efe9da;color:var(--muted)}

/* timeline */
.cr-tl-axis{position:relative;height:14px;margin-left:96px;border-bottom:1px solid var(--line);flex:0 0 auto}
.cr-tl-axis span{position:absolute;transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.cr-tl-rows{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:space-around;padding-top:4px;position:relative}
.cr-tlrow{display:grid;grid-template-columns:96px 1fr;align-items:center}
.cr-tlwho{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--ink)}
.cr-tltrack{position:relative;height:20px}
.cr-tlbar{position:absolute;top:2px;height:16px;border-radius:8px;display:flex;align-items:center;padding-left:9px;font-size:10px;color:#fff;font-weight:600;white-space:nowrap;overflow:hidden;background:linear-gradient(90deg,var(--accent),#caa14a)}
.cr-tlbar.in{background:linear-gradient(90deg,var(--brand),#0e6a54)}
.cr-tlnow{position:absolute;top:0;bottom:0;width:2px;background:var(--danger)}

/* ============ mobile / tablet ============ */
/* NOTE: the authoritative responsive layer lives at the very END of this file
   (after every base rule) so source order can never override it. */
.sup-toolbar .sup-search{flex:1;min-width:0;margin:0}

/* finance control-room specifics (build 143) */
.cr-card .panel{border:0;background:transparent;padding:0;margin:0;box-shadow:none}
.fn-gauge{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px !important}
.fn-dtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:8px;flex:0 0 auto}
.fn-dtab{border:0;background:transparent;color:var(--muted);font-weight:600;font-size:12.5px;padding:7px 12px;border-radius:8px 8px 0 0;cursor:pointer}
.fn-dtab.on{color:var(--brand-700);background:var(--brand-50)}
.cr-body .fn-periods{flex:0 0 auto;margin:0}

/* control-room topbar: full-bleed, left-aligned to match the body content (build 144) */
.cr-root .topbar-inner{max-width:none;padding:10px 22px;justify-content:flex-start;flex-wrap:nowrap}
.cr-root .topbar .brand-row{display:flex;align-items:center;gap:8px}
.cr-root .topbar .brand-sub{color:var(--muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em}

/* sales/daily control-room calendar + channel breakdown (build 145) */
.sl-cal-wd{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:6px;flex:0 0 auto}
.sl-cal-wd span{text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sl-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:minmax(62px,1fr);gap:6px}
.sl-cal .fin-card{height:100%;min-height:0;margin:0}
.sl-cal-pad{border-radius:10px}
/* Calendar cells are compact so the date badge + Net value always fit a grid
   row (they used the wide list-card sizing, which overflowed and overlapped on
   shorter/narrower screens). overflow:hidden stops any bleed into neighbours. */
.sl-cal .fin-card{gap:8px;padding:8px 10px;overflow:hidden}
.sl-cal .fin-badge{width:34px;height:34px;border-radius:9px}
.sl-cal .fin-badge b{font-size:13.5px}
.sl-cal .fin-badge i{font-size:8px;margin-top:0}
.sl-cal .fin-cnum{font-size:14px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-cal .fin-csub{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-cal .fin-clab{font-size:8px}
.sl-cal .fin-closed{font-size:12px}
.sl-chan{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.sl-chan:last-child{border-bottom:0}
.sl-chan b{margin-left:auto;font-family:var(--font-mono);font-weight:600;color:var(--brand-700)}
.sl-chan.tot{font-weight:700;border-top:2px solid var(--line-strong)}
.sl-dot{width:10px;height:10px;border-radius:3px;flex:none}

/* menu control-room (build 145) */
.mn-catnav .mn-catlink{display:flex;justify-content:space-between;align-items:center;width:100%;padding:9px 11px;border:0;background:transparent;border-radius:9px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.mn-catnav .mn-catlink:hover{background:var(--brand-50)}
.mn-catn{font-family:var(--font-mono);font-size:11px;color:var(--muted);font-weight:500}
.mn-cat-head{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--brand-700);margin:12px 0 5px;padding-bottom:3px;border-bottom:1px solid var(--line)}
.mn-cat-head:first-child{margin-top:0}
.cr-card .menu-item{margin:0 0 6px}

/* menu category jump dropdown — branded control (build 155) */
#mn-catjump{
  border:1px solid var(--line-strong);border-radius:9px;
  background-color:var(--surface);
  padding:8px 32px 8px 13px;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink);
  cursor:pointer;min-width:172px;
  transition:border-color .14s,box-shadow .14s;
}
#mn-catjump:hover{border-color:var(--accent)}

/* supply control-room (build 145) */
.sup-toolbar{display:flex;gap:10px;align-items:center;flex:0 0 auto}
.sup-toolbar #sup-filter{flex:0 0 auto;max-width:200px}
.cr-card .order-bar{flex:0 0 auto;margin-top:8px;border-top:1px solid var(--line);padding-top:10px;display:flex;justify-content:flex-end}

/* supply: grocery-list category cards — 3-up grid, fixed height, scroll inside (build 150) */
.sup-listwrap{flex:1;min-height:0;display:flex;flex-direction:column}
.sup-listwrap .order-bar{flex:0 0 auto;margin-top:6px;border-top:1px solid var(--line);padding:7px 0 7px;display:flex;justify-content:flex-end}
@media (min-width:981px){
  .sup-listwrap .order-bar{margin-top:0;border-top:0;background:none;backdrop-filter:none;padding:2px 0 0}
  .sup-listwrap .order-bar .btn{padding:7px 20px;font-size:13.5px}
}
.sup-list-grid{display:grid;grid-template-columns:1fr;gap:16px;align-content:start;padding:4px 2px 8px}
@media (min-width:880px){ .sup-list-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1280px){ .sup-list-grid{grid-template-columns:repeat(3,1fr)} }
.sup-list-grid > .cr-empty{grid-column:1/-1}
.sup-cat-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:16px 16px 14px;display:flex;flex-direction:column;height:340px}
.sup-cat-tab{flex:none;align-self:center;padding:6px 24px;border-radius:10px;font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px;box-shadow:0 1px 2px rgba(60,48,18,.12);white-space:nowrap}
.sup-cat-items{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column}
/* flat checklist rows inside the category card */
.sup-cat-items .sup-item{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;margin:0;padding:11px 4px;flex-wrap:nowrap}
.sup-cat-items .sup-item:last-child{border-bottom:0}
.sup-cat-items .sup-item.checked{background:var(--brand-50);border-radius:8px;border-bottom-color:transparent}
.sup-cat-items .sup-check{border-radius:50%}
/* one line: qty · unit · supplier · price; supplier bar shortened (build 151) */
.sup-cat-items .sup-item-controls{flex-wrap:nowrap;gap:6px}
.sup-cat-items .qty-stepper,.sup-cat-items .unit-select,.sup-cat-items .price-chip{flex:none}
.sup-cat-items .sup-select{flex:1 1 auto;min-width:84px;max-width:126px}

/* control-room filter dropdown */
.sup-toolbar select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08628' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 11px center;
  background-size:15px;
  border:1px solid var(--line-strong);border-radius:11px;
  padding:9px 34px 9px 14px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .14s,box-shadow .14s;
}
.sup-toolbar select:hover{border-color:var(--accent)}
.sup-toolbar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,134,40,.16)}

/* control-room filter dropdown */
.sup-toolbar select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b08628' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>") no-repeat right 11px center;
  background-size:15px;
  border:1px solid var(--line-strong);border-radius:11px;
  padding:9px 34px 9px 14px;font-family:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;
  transition:border-color .14s,box-shadow .14s;
}
.sup-toolbar select:hover{border-color:var(--accent)}
.sup-toolbar select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(176,134,40,.16)}

/* ---- Module topbar: centered logo + compact back + module switcher (build 157) ---- */
.topbar-inner.tb-3zone{position:relative;justify-content:space-between;flex-wrap:nowrap;gap:10px;min-height:46px}
.topbar-inner.tb-3zone > .tb-left{display:flex;align-items:center;gap:8px;flex:0 0 auto;z-index:2}
.topbar-inner.tb-3zone > .who{flex:0 0 auto;z-index:2}
.topbar-inner.tb-3zone > .brand-row{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;flex:0 0 auto;justify-content:center;pointer-events:none;z-index:1}
.tb-back{width:auto !important;padding:7px 10px !important;display:inline-flex;align-items:center;justify-content:center}
.mod-switch{position:relative;display:inline-flex}
.mod-switch-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--line-strong);border-radius:9px;background:var(--surface);color:var(--ink);cursor:pointer;transition:border-color .14s}
.mod-switch-btn:hover{border-color:var(--accent)}
.mod-switch-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;z-index:60;flex-direction:column;gap:2px;min-width:212px;max-height:70vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line-strong);border-radius:12px;box-shadow:0 14px 34px rgba(40,30,12,.20);padding:7px}
.mod-switch-menu.open{display:flex}
.mod-switch-item{display:block;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:8px;background:transparent;color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.mod-switch-item:hover{background:var(--brand-50)}
.mod-switch-item.on{color:var(--brand);font-weight:700;background:var(--brand-50)}
/* menu: category jump lives in the items-card header */
.mn-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px}
.mn-list-head h3{margin:0}
.mn-list-head #mn-catjump{flex:0 0 auto;max-width:58%;min-width:128px}

/* =====================================================================
   RESPONSIVE LAYER (build 155) — AUTHORITATIVE. Placed last on purpose so
   source order can never let a base rule override these. Tablet ≤980, phone ≤640.
   ===================================================================== */
@media (max-width:980px){
  /* Pinned header: root stays viewport-tall; .cr-body is the only scroller, so the
     topbar never scrolls away. Inner regions flow (no nested scrollbars). */
  .cr-root{height:100dvh;overflow:hidden}
  .cr-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:12px 14px;gap:12px}
  .cr-head{flex-wrap:wrap}
  .cr-acts{justify-content:flex-start;flex-wrap:wrap;gap:8px}
  .cr-kpis{grid-template-columns:1fr 1fr !important}
  .cr-grid{display:block !important;overflow:visible}
  .cr-grid > *{min-width:0;margin-bottom:12px}
  .cr-grid > *:last-child{margin-bottom:0}
  .cr-body .cr-scroll{overflow:visible;min-height:0;max-height:none}
  .cr-card{min-height:0}

  /* Topbar: compact + wraps cleanly. Back button keeps its text on one line; the
     role/owner pill drops to its own line rather than overlapping the logo. */
  .cr-root .topbar-inner{flex-wrap:wrap !important;gap:8px;padding:10px 14px}
  .cr-root .topbar .brand-row{flex:1 1 auto;gap:8px;min-width:0}
  .cr-root .topbar .btn{white-space:nowrap;padding:7px 11px;font-size:13px;line-height:1.15;width:auto;flex:0 0 auto}
  .cr-root .topbar .brand-logo{height:24px}
  .cr-root .topbar .who{margin-left:auto;flex:0 0 auto}
  .cr-root .topbar .who .name{display:none}
  /* enhanced topbar stays one centered row even on phones */
  .topbar-inner.tb-3zone{flex-wrap:nowrap !important;gap:8px}
  /* category controls stay reachable without scrolling back to the top */
  .cr-body .sup-toolbar{position:sticky;top:0;z-index:8;background:var(--bg);padding:8px 0;margin:0;border-bottom:1px solid var(--line)}
  .cr-body .mn-list-head{position:sticky;top:0;z-index:8;background:var(--surface);padding:8px 0;margin:0 0 4px}
  .mn-cat-head{scroll-margin-top:62px}

  /* wide finance tables scroll inside their card, not the page */
  .cr-body .fn-pane,.cr-body .fn-bank{overflow-x:auto;-webkit-overflow-scrolling:touch}
}

@media (max-width:640px){
  .cr-body{padding:10px 12px}
  .cr-acts{gap:7px}
  /* phone: simpler (non-admin) tile dashboard also goes 2-up, matching the admin one */
  .dash-tiles.static{grid-template-columns:repeat(2,1fr)}

  /* menu category dropdown: full-width, comfortable touch target */
  #mn-catjump{flex:1 1 100%;width:100%;font-size:15px;padding:11px 34px 11px 14px;min-width:0}

  /* SUPPLY — single-column cards; item = name + actions on top, controls wrap
     underneath; supplier takes a full row. Zero horizontal scrolling. */
  .sup-list-grid{grid-template-columns:1fr !important}
  .sup-listwrap{display:block}
  .sup-listwrap #sup-list{overflow:visible !important;max-height:none !important}
  .sup-cat-box{height:auto !important;max-height:none !important;overflow:visible}
  .sup-cat-items{overflow:visible !important}
  .sup-cat-items .sup-item{flex-wrap:nowrap;align-items:flex-start;gap:9px;padding:12px 2px}
  .sup-cat-items .sup-check{flex:0 0 auto;margin-top:3px}
  .sup-cat-items .sup-item-main{flex:1 1 0;min-width:0}
  .sup-cat-items .sup-item-name{white-space:normal;margin-bottom:8px}
  .sup-cat-items .sup-item-controls{flex-wrap:wrap;gap:7px}
  .sup-cat-items .qty-stepper,.sup-cat-items .unit-select,.sup-cat-items .price-chip{flex:0 0 auto}
  .sup-cat-items .sup-select{flex:1 1 100% !important;max-width:none !important;min-width:0}
  .sup-cat-items .actions{flex:0 0 auto}
  /* Build-order bar sticks to the bottom of the scroll as a full-width button */
  .sup-listwrap .order-bar{position:sticky;bottom:0;margin-top:0;padding:10px 0 4px;border-top:0;
    background:linear-gradient(to top,var(--bg) 72%,rgba(246,241,230,0));justify-content:stretch}
  .sup-listwrap .order-bar .btn{width:100% !important}
  .sup-toolbar{flex-wrap:wrap}
  .sup-toolbar #sup-filter{flex:1 1 100%;max-width:none}
  .sup-toolbar .sup-search{flex:1 1 100%}

  /* SALES / DAILY — single-column day list; weekday header + pad cells hidden */
  .sl-cal{grid-template-columns:1fr !important}
  .sl-cal-pad{display:none !important}
  .sl-cal-wd{display:none !important}

  /* Orders + timesheet single column */
  .ord-board{grid-template-columns:1fr !important}
  .ord-col{height:auto;max-height:none}
  .tc-panel .pay-list,.tc-panel .pay-detail-list{grid-template-columns:1fr !important}
  .tc-panel .pay-detail-list .pay-card{height:auto}
  .fn-pane{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .team-kpis{grid-template-columns:1fr 1fr !important}

  /* Dashboard tile art smaller so it never covers the labels */
  .dt-art{width:70px;height:52px;right:-6px;bottom:-4px}
  .dt-art-icon svg{width:52px;height:52px}
  .dt-desc{max-width:80%}

  /* Logo fits better in every header */
  .topbar .brand-logo{height:24px}

  /* Dashboard role pill is hidden on phones so the centered logo never collides
     with the account controls on the right. */
  .dash-topbar .who .pill{display:none}
}

@media (max-width:430px){
  .cr-kpis{grid-template-columns:1fr !important}
  .team-kpis{grid-template-columns:1fr !important}
}