/* TDS Salon Suite - the shared look of every screen (TDS-0017).
   Colours, type and shapes follow the owner's reference design: cream paper, near-black ink, a lime accent,
   the DM Sans typeface, large rounded cards. Every device opens in the cream version; a matching dark version is
   used only when someone chooses it with the switch in the top bar (owner's decision, 12 November 2026).
   Every screen takes its colours from the tokens below. */

@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("fonts/dm-sans-latin-wght-normal.7c87a648293f.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url("fonts/dm-sans-latin-ext-wght-normal.49935c4b6235.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Amounts in tables: DM Sans has no digits of one common width, so a column of money would not line up. The ten
   digits (and only those) are therefore drawn with the typeface Outfit, which has such digits; number columns ask
   for them with font-variant-numeric: tabular-nums. The file holds nothing but those digits (4 KB, every weight) and
   is served by the application itself, so every device draws the same digits (owner's decisions of 12 November 2026:
   digits lined up; the same on every device). Pair spacing is off in number columns (font-kerning: none): a
   typeface that pulls a pair such as "11" together would spoil the columns again. */
@font-face {
  font-family: "TDS Figures"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/outfit-digits-wght-normal.2f2454283fec.woff2") format("woff2");
  unicode-range: U+0030-0039;
}

/* ---------- Tokens: light (the reference) ---------- */
:root {
  color-scheme: light;
  --bg: #f4f1e9;            /* the page: cream paper */
  --surface: #fffcf4;       /* cards */
  --surface-2: #eeebe2;     /* insets, table heads, quiet fills */
  --surface-3: #e6e2d6;     /* a step darker, for a pressed or hovered quiet fill */
  --text: #0b0b0a;          /* ink */
  --muted: #5f5e58;         /* secondary text: at least 5.4 to 1 against every surface above */
  --soft: #77766f;          /* the grey second line of large headings only (too light for small text) */
  --border: #e1ddd2;
  --border-strong: #cdc8ba;
  --accent: #0b0b0a;        /* main buttons and selected tabs: ink ... */
  --accent-text: #fffcf4;   /* ... with paper-coloured lettering */
  --accent-soft: #e9f3bd;   /* selected rows and chips: a wash of the lime */
  --link: #4d6009;          /* links: the lime's dark sibling, readable on paper */
  --lime: #d7ff45;          /* the accent: a fill, never lettering on paper */
  --on-lime: #0b0b0a;
  --feature: #0b0b0a;       /* the one block meant to catch the eye: the current menu entry, the headline figure */
  --on-feature: #f4f1e9;
  --feature-accent: #d7ff45;
  --ring: rgba(170, 205, 30, .55);   /* halo around the field or button in use */
  --good: #2c6a1d; --good-soft: #e2efc9;
  --warn: #7d5100; --warn-soft: #f8e8bf;
  --bad: #b3261e;  --bad-soft: #fadfd9;
  --radius: 20px;
  --radius-sm: 12px;
  --shadow: 0 1px 0 rgba(11, 11, 10, .03), 0 14px 34px -22px rgba(11, 11, 10, .22);
  --shadow-pop: 0 2px 6px rgba(11, 11, 10, .06), 0 24px 60px -18px rgba(11, 11, 10, .32);
  --sidebar-w: 260px;
  --rail-w: 76px;
  --topbar-h: 64px;
  font-size: 15px;
}
/* ---------- Tokens: dark. Only ever chosen with the switch; a device set to dark does not turn it on. ---------- */
:root[data-theme="dark"] {
    color-scheme: dark;
    --bg: #0d0d0b; --surface: #171714; --surface-2: #20201c; --surface-3: #2a2a25;
    --text: #f4f1e9; --muted: #a9a69a; --soft: #8d8a7f;
    --border: #2c2c27; --border-strong: #3f3f38;
    --accent: #d7ff45; --accent-text: #0b0b0a; --accent-soft: #2b3312;
    --link: #d7ff45;
    --feature: #d7ff45; --on-feature: #0b0b0a; --feature-accent: #0b0b0a;
    --ring: rgba(215, 255, 69, .45);
    --good: #9bd67a; --good-soft: #1e2c16;
    --warn: #f0c060; --warn-soft: #35290f;
    --bad: #ff8f85; --bad-soft: #3a1b18;
    --shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 18px 40px -24px rgba(0, 0, 0, .8);
    --shadow-pop: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 60px -18px rgba(0, 0, 0, .9);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--lime); color: var(--on-lime); }
a { color: var(--link); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin: 0; }
h2 { font-size: 1.1rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; margin: 0; }
h3 { font-weight: 650; letter-spacing: -.01em; }
code { background: var(--surface-2); padding: 1px 6px; border-radius: 6px; font-size: .85em; overflow-wrap: anywhere; }
.muted { color: var(--muted); }
.ico { flex: none; display: block; }
.eyebrow { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.display { margin: 0; font-size: clamp(2.5rem, 5vw, 4.1rem); font-weight: 700; letter-spacing: -.055em; line-height: .96; }
.display-soft { display: block; color: var(--soft); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.skip-link { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 18px; border-radius: 999px; background: var(--text); color: var(--bg); font-weight: 600; }
.skip-link:focus { top: 12px; }

/* ---------- Frame: top bar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; height: var(--topbar-h); padding: 0 20px 0 18px;
  background: var(--bg); border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 11px; min-width: 0; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark {
  flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--feature); color: var(--feature-accent);
  font-size: .74rem; font-weight: 800; letter-spacing: -.03em; text-transform: uppercase;
}
.brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.brand-name { font-size: .86rem; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-sub { font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb { margin-left: 8px; padding-left: 18px; border-left: 1px solid var(--border-strong); font-size: .88rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crumb:empty { display: none; }
.crumb b { color: var(--text); font-weight: 600; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.topbar-right form { margin: 0; }
.icon-btn { border: 0; border-radius: 50%; background: transparent; color: var(--text); font-size: 1.2rem; line-height: 1; cursor: pointer; padding: 6px; }
.icon-btn:hover { background: var(--surface-2); }
.topbar .icon-btn { flex: none; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; }
/* The switch shows what a click will give: a moon while the page is light, a sun while it is dark. */
.theme-toggle .t-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .t-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .t-moon { display: none; }
.user-chip { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 5px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); font-size: .88rem; font-weight: 500; white-space: nowrap; }
.user-chip:hover { background: var(--surface-2); border-color: var(--text); text-decoration: none; }
.avatar { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lime); color: var(--on-lime); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: -.02em; }

/* ---------- Frame: menu ---------- */
.layout { display: flex; min-height: calc(100vh - var(--topbar-h)); }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; padding: 14px 12px 28px; border-right: 1px solid var(--border); background: var(--bg);
  position: sticky; top: var(--topbar-h); z-index: 20; height: calc(100vh - var(--topbar-h)); height: calc(100dvh - var(--topbar-h));
  overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; transition: width .18s ease;
}   /* z-index: the sub-menus belong to the menu, and must open over the page beside it */
.nav-group { margin-bottom: 2px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 0 10px 0 16px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--text); font: inherit; font-size: .95rem; font-weight: 500; text-align: left; cursor: pointer;
}
.nav-item:hover, .nav-group.open > .nav-item { background: var(--surface-2); text-decoration: none; }
.nav-item .ico { color: var(--muted); }
.nav-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-item .nav-caret { width: 15px; height: 15px; opacity: .5; transition: transform .15s, opacity .15s; }
.nav-group.open > .nav-item .nav-caret { opacity: 1; transform: translateX(2px); }
.nav-group.current > .nav-item, .nav-group.current.open > .nav-item { background: var(--feature); color: var(--on-feature); font-weight: 600; }
.nav-group.current > .nav-item .ico { color: var(--feature-accent); opacity: 1; }
/* The sub-menu: opens beside its heading when the cursor rests there, or when the heading is clicked or tapped. */
.nav-fly {
  display: none; position: fixed; z-index: 40; min-width: 236px; max-width: 320px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 18px; box-shadow: var(--shadow-pop);
}
.nav-group.open > .nav-fly { display: block; animation: fly-in .13s ease-out; }
.nav-fly::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; }   /* lets the cursor cross the gap */
.nav-fly-title { padding: 8px 12px 7px; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.nav-fly a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--text); font-weight: 500; }
.nav-fly a:hover { background: var(--surface-2); text-decoration: none; }
.nav-fly a.active { background: var(--accent-soft); font-weight: 650; }
/* A heading with a single page is a plain link; folded to icons, its name appears as a small label. */
.nav-group.single > .nav-fly {
  min-width: 0; padding: 7px 12px; border: 0; border-radius: 10px; background: var(--text); color: var(--bg);
  font-size: .84rem; font-weight: 600; white-space: nowrap; pointer-events: none;
}
.nav-group.single > .nav-fly::before { display: none; }
@keyframes fly-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
/* If scripts are switched off or fail to load, every page is simply listed under its heading, so nothing is out of reach. */
:root:not(.js) .nav-group:not(.single) > .nav-fly { display: block; position: static; min-width: 0; max-width: none; padding: 0 0 6px 48px; background: transparent; border: 0; box-shadow: none; }
:root:not(.js) .nav-fly::before, :root:not(.js) .nav-fly-title, :root:not(.js) .nav-caret { display: none; }
.nav-backdrop { display: none; }
.content { flex: 1; min-width: 0; padding: 28px 32px 72px; max-width: 1480px; }

@media (min-width: 901px) {
  /* Folded: a rail of icons. Each name, and each sub-menu, appears beside its icon. */
  :root.nav-collapsed .sidebar { width: var(--rail-w); padding-left: 14px; padding-right: 14px; }
  :root.nav-collapsed .nav-label, :root.nav-collapsed .nav-caret { display: none; }
  :root.nav-collapsed .nav-item { justify-content: center; padding: 0; min-height: 44px; }
  :root:not(.nav-collapsed) .nav-group.single > .nav-fly { display: none; }
}
@media (max-width: 900px) {
  /* Phones and small tablets: the menu slides in over the page, and each heading opens in place. */
  .topbar { padding: 0 12px 0 8px; gap: 8px; }
  .brand-sub, .crumb { display: none; }
  .sidebar {
    position: fixed; left: 0; top: var(--topbar-h); z-index: 26; width: min(86vw, 320px); transform: translateX(-102%);
    visibility: hidden; transition: transform .2s, visibility 0s .2s;   /* hidden while closed: no stray shadow, and the keyboard skips it */
  }
  body.nav-open .sidebar { transform: none; visibility: visible; transition: transform .2s; box-shadow: var(--shadow-pop); }
  body.nav-open .nav-backdrop { display: block; position: fixed; inset: var(--topbar-h) 0 0 0; z-index: 25; padding: 0; border: 0; background: rgba(11, 11, 10, .45); }
  .nav-item { min-height: 46px; }
  .nav-fly { position: static; min-width: 0; max-width: none; padding: 2px 0 8px 48px; background: transparent; border: 0; border-radius: 0; box-shadow: none; }
  .nav-group.open > .nav-fly { animation: none; }
  .nav-fly::before, .nav-fly-title, .nav-group.single > .nav-fly { display: none; }
  .nav-group.open > .nav-item .nav-caret { transform: rotate(90deg); }
  .nav-fly a { padding: 11px 12px; }
  .content { padding: 20px 16px 64px; }
  .hide-sm { display: none; }
  .user-chip { padding: 0 5px; border-color: transparent; }
}
@media (max-width: 520px) { .brand-text { display: none; } }
@media (min-width: 901px) and (max-width: 1280px) { .content { padding: 24px 20px 64px; } }   /* small laptops and tablets on their side: a little more room for the page */

/* ---------- Building blocks ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 20px; }
.page-head .actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.section-title { margin: 30px 0 10px; }
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); margin-bottom: 18px; }
@media (max-width: 640px) { .card { padding: 16px; border-radius: 16px; } }   /* phones: less margin, more content */
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.small-link { font-size: .84rem; font-weight: 600; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font: inherit; font-size: .93rem; font-weight: 600;
  letter-spacing: -.005em; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s, box-shadow .15s;
}
.btn:hover { background: var(--surface-2); border-color: var(--text); text-decoration: none; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); }
.btn.accent { background: var(--lime); border-color: var(--lime); color: var(--on-lime); }
.btn.accent:hover { background: var(--lime); border-color: var(--on-lime); box-shadow: 0 0 0 3px var(--ring); }
.btn.danger { background: transparent; color: var(--bad); border-color: var(--bad); }
.btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); }
.btn.good { background: var(--good); border-color: var(--good); color: var(--surface); }
.btn.good:hover { background: var(--good); border-color: var(--good); box-shadow: 0 0 0 3px var(--ring); }
.btn.small { min-height: 32px; padding: 0 13px; font-size: .84rem; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.btn .ico { width: 17px; height: 17px; }
.push-right { margin-left: auto; }
.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: .74rem; font-weight: 700; letter-spacing: .01em; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.badge-active, .badge-present, .badge-completed, .badge-paid, .badge-confirmed, .badge-matched, .badge-sent, .badge-delivered, .badge-read, .badge-finalized, .badge-open, .badge-done { background: var(--good-soft); color: var(--good); }
.badge-late, .badge-half-day, .badge-booked, .badge-draft, .badge-queued, .badge-unmatched, .badge-low, .badge-leave, .badge-awaiting, .badge-awaiting-advance, .badge-warn { background: var(--warn-soft); color: var(--warn); }
.badge-absent, .badge-cancelled, .badge-no-show, .badge-voided, .badge-failed, .badge-out, .badge-forfeited { background: var(--bad-soft); color: var(--bad); }
.messages { margin-bottom: 16px; }
.msg { padding: 12px 16px; border-radius: 14px; margin-bottom: 8px; background: var(--surface-2); font-weight: 500; transition: opacity .6s; }
.msg-success, .msg-good { background: var(--good-soft); color: var(--good); }
.msg-error { background: var(--bad-soft); color: var(--bad); }
.msg-warning, .msg-warn { background: var(--warn-soft); color: var(--warn); }
.msg.fade { opacity: 0; }

/* ---------- Figures and panels ---------- */
.stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; margin-bottom: 20px; }
.stat {
  position: relative; display: flex; flex-direction: column; gap: 3px; padding: 16px 18px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px; color: var(--text); box-shadow: var(--shadow); transition: border-color .15s, transform .15s;
}
a.stat[href]:hover { border-color: var(--text); text-decoration: none; }
.stat-label { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stat-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -.04em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stat-hint { font-size: .82rem; color: var(--muted); }
.stat.tone-good .stat-value { color: var(--good); }
.stat.tone-warn .stat-value { color: var(--warn); }
.stat.tone-bad .stat-value { color: var(--bad); }
.panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 18px; }
.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.plain-list li:last-child { border-bottom: 0; }
@media (max-width: 520px) {
  /* Phones: figures sit two to a row instead of one long column. */
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .stat { padding: 13px 14px; }
  .stat-value { font-size: 1.3rem; }
}

/* ---------- Tables ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: end; }
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; }
.table th { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: var(--surface-2); white-space: nowrap; }
.table tbody tr:last-child td { border-bottom: 0; }
:where(.table tbody tr:hover) > td { background: var(--surface-2); }   /* no weight of its own, so any cell colour set elsewhere wins */
.table tfoot td { font-weight: 700; background: var(--surface-2); }
.table .num { text-align: right; font-family: "TDS Figures", "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-variant-numeric: tabular-nums; font-kerning: none; white-space: nowrap; }
.table .empty { text-align: center; color: var(--muted); padding: 38px 16px; background: transparent; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions a { margin-left: 12px; font-weight: 600; }
.pager { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 16px; }
@media (max-width: 640px) {
  .table th, .table td { padding: 10px 12px; }
  .table.stack thead { display: none; }
  .table.stack tr { display: block; border-bottom: 1px solid var(--border); }
  .table.stack td { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 0; padding: 6px 12px; }
  .table.stack td::before { content: attr(data-label); color: var(--muted); font-size: .85rem; }
  .table.stack td > input:not([type=checkbox]):not([type=radio]), .table.stack td > select { width: auto; max-width: 62%; }
  .table.stack tbody tr { padding: 6px 0; }
  .table.stack tbody tr:last-child { border-bottom: 0; }
}

/* ---------- Forms ---------- */
.form { max-width: 920px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px 20px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field.wide { grid-column: 1 / -1; }
.field label { font-weight: 500; font-size: .86rem; }
.field > label { font-weight: 600; }   /* the field's own name; the choices inside a field stay lighter */
.field.check label { display: flex; align-items: center; gap: 9px; font-weight: 500; margin-top: 24px; }
.req { color: var(--bad); }
input[type=text], input[type=number], input[type=email], input[type=password], input[type=search], input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=tel], input[type=url], input[type=file], input:not([type]), select, textarea {
  width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font: inherit;
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .85; }
.toolbar input, .toolbar select { width: auto; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--text); box-shadow: 0 0 0 3px var(--ring); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }
select[multiple] { min-height: 120px; }
.field ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 6px; }
.field ul label { font-weight: 400; display: flex; gap: 8px; align-items: center; }
.help { color: var(--muted); font-size: .8rem; }
.error { color: var(--bad); font-size: .85rem; font-weight: 500; }
.has-error input, .has-error select, .has-error textarea { border-color: var(--bad); }
.form-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.grid-2.roomy { grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); }   /* for a card holding a table of fields: side by side only where both fit */
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 7px 18px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }
.right { text-align: right; }
.big-number { font-size: 2.1rem; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }

/* ---------- Signing in, choosing a password ---------- */
.login-wrap { display: flex; justify-content: center; padding-top: 7vh; }
.login-card { width: 100%; max-width: 400px; padding: 28px; }
.login-card h1 { font-size: 1.4rem; letter-spacing: -.025em; margin-bottom: 4px; }
.login-card .form-grid { grid-template-columns: 1fr; margin-top: 18px; }
.login-wrap.split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 400px); gap: 56px; align-items: center; max-width: 1060px; margin: 0 auto; padding-top: 9vh; }
.login-intro .eyebrow { margin-bottom: 16px; }
@media (max-width: 800px) {
  .login-wrap.split { grid-template-columns: 1fr; gap: 24px; padding-top: 2vh; justify-items: center; }
  .login-intro { width: 100%; max-width: 400px; }
}

/* ---------- Dashboard ---------- */
.dash-hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 32px; margin: 6px 0 30px; }
.dash-hero .eyebrow { margin-bottom: 14px; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-actions .btn { min-height: 44px; padding: 0 20px; }
.stats-dash .stat { min-height: 108px; padding: 16px 18px 18px; }
.stats-dash .stat-hint { margin-top: auto; padding-top: 6px; }
.stats-dash a.stat[href]:hover { transform: translateY(-2px); }
.stat-go { position: absolute; right: 12px; top: 12px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: var(--muted); opacity: 0; transition: opacity .15s; }
.stat-go .ico { width: 15px; height: 15px; }
a.stat[href]:hover .stat-go, a.stat[href]:focus-visible .stat-go { opacity: 1; background: var(--surface-2); }
/* Warnings (a missed backup, booking limits not working) stand out from the day's figures. */
.stats-dash .stat.tone-bad { background: var(--bad-soft); border-color: var(--bad); }
.stats-dash .stat.tone-bad .stat-label { color: var(--bad); }
.stats-dash .stat.tone-bad .stat-hint { color: var(--text); }
/* The day's takings: the one dark block on the page, with the figure in the accent colour. */
.stats-dash .stat-sales-today { grid-column: span 2; min-height: 132px; padding: 20px 24px 22px; background: var(--feature); border-color: var(--feature); color: var(--on-feature); }
.stats-dash .stat-sales-today .stat-label, .stats-dash .stat-sales-today .stat-hint { color: var(--on-feature); opacity: .74; }
.stats-dash .stat-sales-today .stat-value { color: var(--feature-accent); font-size: 2.8rem; letter-spacing: -.055em; line-height: 1.1; }
.stats-dash .stat-sales-today .stat-go { opacity: 1; right: 16px; top: 16px; width: 36px; height: 36px; background: var(--feature-accent); color: var(--feature); }
.stats-dash .stat-sales-today .stat-go .ico { width: 18px; height: 18px; }
.stats-dash a.stat-sales-today[href]:hover { border-color: var(--feature); box-shadow: 0 0 0 3px var(--ring); }
.stats-dash a.stat-sales-today[href]:hover .stat-go { background: var(--feature-accent); }
@media (max-width: 520px) {
  .stats-dash .stat { min-height: 92px; padding: 13px 14px 14px; }
  .stats-dash .stat-sales-today { grid-column: 1 / -1; min-height: 118px; padding: 18px 18px 20px; }
  .stats-dash .stat-sales-today .stat-value { font-size: 2.4rem; }
}
.panel-card { margin-bottom: 0; padding: 20px 22px 10px; }
.panel-card .card-head { margin-bottom: 6px; }
.panel-card .small-link { padding: 4px 12px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--text); }
.panel-card .small-link:hover { border-color: var(--text); background: var(--surface-2); text-decoration: none; }
.panel-card .plain-list li { align-items: baseline; padding: 11px 0; }
.panel-card .plain-list a { color: var(--text); font-weight: 500; }
.panel-card .plain-list a:hover { color: var(--link); }
.panel-card .plain-list li > .muted { text-align: right; font-size: .9rem; }
.panel-card .plain-list li.panel-empty { justify-content: center; padding: 26px 0 30px; }
@media (max-width: 640px) { .panel-card { padding: 16px 16px 6px; } }

@media print {
  /* Paper: black on white, whichever colours the screen is using. */
  :root, :root[data-theme="dark"] {
    color-scheme: light;
    --bg: #fff; --surface: #fff; --surface-2: #f2f2f2; --surface-3: #e8e8e8; --text: #000; --muted: #444; --soft: #555; --border: #bbb; --border-strong: #999;
    --accent: #000; --accent-text: #fff; --accent-soft: #eee; --link: #000; --feature: #fff; --on-feature: #000; --feature-accent: #000;
    --good: #000; --good-soft: #eee; --warn: #000; --warn-soft: #eee; --bad: #000; --bad-soft: #eee; --shadow: none; --shadow-pop: none;
  }
  .topbar, .sidebar, .nav-backdrop, .skip-link, .page-head .actions, .dash-actions, .no-print { display: none !important; }
  .content { padding: 0; max-width: none; }
  .card, .table-wrap { box-shadow: none; border: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }