/* Portal appearance. Keep public marketing pages and printable documents independent. */
html[data-theme] { background: var(--bg-c); }
html[data-theme="dark"], html[data-theme="dark"] body.team-app {
  color-scheme: dark;
  --bg-c: #101010; --bg-alt-c: #161718; --panel-c: #1d1e20;
  --ink-c: #f5f1e8; --text-c: #dedbd3; --muted-c: #b1aea6;
  --line-c: #37393c; --line-2-c: #65666a;
  --accent-c: #f0b454; --accent-hover-c: #ffd28d; --on-accent-c: #17120a;
  --portal-blue: #8abaff; --portal-blue-soft: #192d46;
  --portal-green: #8ad5ac; --portal-green-soft: #18372b;
  --portal-amber: #f0b454; --portal-amber-soft: #382b17;
  --portal-purple: #c5acff; --portal-purple-soft: #302441;
  --portal-teal: #75d6d6; --portal-teal-soft: #153738;
  --portal-red: #ffa294; --portal-red-soft: #422722;
  --portal-rose: #f7a9d3; --portal-rose-soft: #3e2434;
  --app-wash: #ffffff08; --app-scrim: #000b; --app-ink-line: #f5f1e857;
}
html[data-theme="light"], html[data-theme="light"] body.team-app {
  color-scheme: light;
  --bg-c: #f5f4f0; --bg-alt-c: #eeede8; --panel-c: #ffffff;
  --ink-c: #20252b; --text-c: #343a43; --muted-c: #5f6670;
  --line-c: #d6d8dc; --line-2-c: #858b94;
  --accent-c: #8b530c; --accent-hover-c: #673b04; --on-accent-c: #ffffff;
  --portal-blue: #205da8; --portal-blue-soft: #e8f1ff;
  --portal-green: #226d48; --portal-green-soft: #e6f4eb;
  --portal-amber: #885108; --portal-amber-soft: #fff0d5;
  --portal-purple: #7142a7; --portal-purple-soft: #f2eafb;
  --portal-teal: #086d72; --portal-teal-soft: #e0f3f2;
  --portal-red: #ad352c; --portal-red-soft: #ffece7;
  --portal-rose: #a03774; --portal-rose-soft: #fdebf5;
  --app-wash: #20252b06; --app-scrim: #16202a88; --app-ink-line: #20252b57;
}
html[data-theme] body.team-app {
  --ok: var(--portal-green); --bad: var(--portal-red); --error-c: var(--bad);
  --bg: var(--bg-c); --bg-alt: var(--bg-alt-c); --surface: var(--panel-c);
  --ink: var(--ink-c); --text: var(--text-c); --muted: var(--muted-c);
  --line: var(--line-c); --line-2: var(--line-2-c); --border: var(--line-c);
  --accent: var(--accent-c); --app-tint: var(--portal-amber-soft); --app-tint-2: var(--portal-amber-soft);
  --app-ok-line: var(--portal-green); --app-bad-line: var(--portal-red); --app-bad-tint: var(--portal-red-soft);
  background: var(--bg-c); color: var(--text-c); accent-color: var(--accent-c);
}
html[data-theme] body.team-app :is(input, textarea)::placeholder { color: var(--muted-c); opacity: 1; }
html[data-theme] body.team-app :is(button, a, select, input, textarea, summary):focus-visible { outline: 3px solid var(--portal-blue); outline-offset: 3px; }
.portal-theme-control { display: inline-flex; align-items: center; gap: 7px; flex: none; color: var(--muted-c); font: 500 12px/1.3 var(--font-body); }
html[data-theme] body.team-app .portal-theme-control select { min-height: 44px; width: auto; min-width: 83px; margin: 0; padding: 8px; border: 1px solid var(--line-2-c); border-radius: 7px; color: var(--ink-c); background: var(--panel-c); font: 500 14px/1.3 var(--font-body); cursor: pointer; }
/* Every section retains its name and icon; colour adds an extra navigation cue. */
html[data-theme] body.team-app :where(.tab, .tabsheet__cell, .app-dock button) { --section-colour: var(--portal-amber); --section-soft: var(--portal-amber-soft); }
html[data-theme] body.team-app :is([aria-controls="panel-bookings"], [aria-controls="panel-diary"], [data-screen="bookings"], [data-screen="diary"]) { --section-colour: var(--portal-blue); --section-soft: var(--portal-blue-soft); }
html[data-theme] body.team-app :is([aria-controls="panel-rota"], [aria-controls="panel-shifts"], [data-screen="rota"], [data-screen="shifts"]) { --section-colour: var(--portal-green); --section-soft: var(--portal-green-soft); }
html[data-theme] body.team-app :is([aria-controls="panel-events"], [aria-controls="panel-promotions"], [aria-controls="panel-leave"], [aria-controls="panel-promoters"], [data-screen="events"], [data-screen="leave"]) { --section-colour: var(--portal-purple); --section-soft: var(--portal-purple-soft); }
html[data-theme] body.team-app :is([aria-controls="panel-team"], [aria-controls="panel-workforce"], [aria-controls="panel-stock"], [aria-controls="panel-onboarding"], [data-screen="team"]) { --section-colour: var(--portal-teal); --section-soft: var(--portal-teal-soft); }
html[data-theme] body.team-app :is([aria-controls="panel-docs"], [aria-controls="panel-account"], [aria-controls="panel-me"], [aria-controls="panel-company-docs"], [data-screen="account"], [data-screen="me"], [data-screen="docs"]) { --section-colour: var(--portal-rose); --section-soft: var(--portal-rose-soft); }
html[data-theme] body.team-app :is(.rail__tabs .tab, .tabsheet__cell) { box-shadow: inset 3px 0 var(--section-colour); }
html[data-theme] body.team-app :is(.rail__tabs .tab, .tabsheet__cell) .tab__icon { color: var(--section-colour); }
html[data-theme] body.team-app :is(.rail__tabs .tab, .tabsheet__cell):hover { background: var(--section-soft); color: var(--ink-c); }
html[data-theme] body.team-app :is(.rail__tabs .tab, .tabsheet__cell)[aria-selected="true"],
html[data-theme] body.team-app .tabsheet__cell[aria-current="page"],
html[data-theme] body.team-app .app-dock button[aria-current="page"] { background: var(--section-soft); color: var(--section-colour); font-weight: 700; }
html[data-theme] body.team-app .app-dock button svg { color: var(--section-colour); }
html[data-theme] body.team-app .rail__tabs .tab__count { background: var(--section-soft); color: var(--section-colour); }
html[data-theme="light"] body.team-app :is(.dashboard-logo, .appbar__brand>img) { mix-blend-mode: normal; }
/* The wordmark source is amber on black: give its crop a deliberate dark backing. */
html[data-theme="light"] body.team-app :is(.dashboard-wordmark, .appbar__brand>img) { background: #101010; border-radius: 6px; }
@media (max-width: 1199px) { .portal-theme-control>span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); } }
@media (max-width: 760px) {
  html[data-theme] body.team-app.is-authed #dashHead { gap: 8px; }
  html[data-theme] body.team-app.is-authed #dashHead .shell__right { gap: 6px; }
  html[data-theme] body.team-app .portal-theme-control select { min-width: 77px; font-size: 16px; }
  html[data-theme] body.team-app .appbar { flex-wrap: wrap; gap: 8px; }
  html[data-theme] body.team-app .appbar__actions { gap: 8px; }
}
@media (max-width: 390px) {
  html[data-theme] body.team-app.is-authed #dashHead { grid-template-columns: minmax(0, 1fr); padding-bottom: 8px; }
  html[data-theme] body.team-app.is-authed #dashHead .shell__right { justify-self: stretch; justify-content: flex-end; }
}
@media print { .portal-theme-control { display: none !important; } }