/* org-admin — Sweetspot design system, direction "A" (sidebar shell, templUI/shadcn-faithful).
 * Colours, radii, type and shadows come only from the vendored tokens (ds/tokens.css);
 * this file never carries a hex value of its own. Components mirror templUI's
 * button/card/table/badge/input so a later templ port keeps the same look. */
@import url("ds/tokens.css");

@font-face { font-family: "DM Sans"; src: url("ds/fonts/dm-sans/dm-sans-latin-wght-normal.woff2") format("woff2-variations"); font-weight: 100 1000; font-style: normal; font-display: swap; 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"; src: url("ds/fonts/dm-sans/dm-sans-latin-ext-wght-normal.woff2") format("woff2-variations"); font-weight: 100 1000; font-style: normal; font-display: swap; 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; }
@font-face { font-family: "Sweetspot Mono"; src: url("ds/fonts/sweetspot-mono/SweetspotMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Sweetspot Mono"; src: url("ds/fonts/sweetspot-mono/SweetspotMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
:root { color-scheme: light; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font-family: var(--font-body); font-size: var(--text-sm); line-height: var(--text-sm--line-height);
  color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased;
}
a { color: var(--foreground); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--border); }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--ring) 50%, transparent); border-radius: var(--radius-md); }
h1, h2, h3 { font-family: var(--font-heading); letter-spacing: var(--tracking-tight); margin: 0; }
h1 { font-size: var(--text-2xl); line-height: var(--text-2xl--line-height); font-weight: var(--font-weight-semibold); }
h2 { font-size: var(--text-base); line-height: var(--text-base--line-height); font-weight: var(--font-weight-semibold); }
h3 { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
p { margin: 0 0 .75rem; }
p:last-child { margin-bottom: 0; }
code, .mono { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.note, .muted { color: var(--muted-foreground); }

/* ---- Shell: sidebar + top bar + content ---- */
.shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  background: var(--sidebar); color: var(--sidebar-foreground); border-right: 1px solid var(--sidebar-border);
  padding: .75rem; display: flex; flex-direction: column; gap: .125rem; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar .brand { display: flex; align-items: center; gap: .625rem; padding: .5rem; margin-bottom: .5rem; text-decoration: none; border-radius: var(--radius-md); }
.sidebar .brand:hover { background: var(--sidebar-accent); }
.sidebar .brand img { width: 1.5rem; height: 1.5rem; }
.sidebar .brand img.brand-logo { width: auto; max-width: 6rem; height: 1.5rem; }
.sidebar .brand b { color: var(--brand-primary, inherit); }
.sidebar .brand b { display: block; font-weight: var(--font-weight-semibold); line-height: 1.2; }
.sidebar .brand small { display: block; font-size: var(--text-xs); color: var(--muted-foreground); }
.sidebar nav { display: contents; }
.sidebar .group { font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--muted-foreground); padding: .75rem .5rem .25rem; text-transform: uppercase; letter-spacing: var(--tracking-wide); }
.sidebar nav a {
  display: flex; align-items: center; gap: .625rem; padding: .5rem; border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium); color: var(--sidebar-foreground); text-decoration: none;
}
.sidebar nav a:hover { background: var(--sidebar-accent); color: var(--sidebar-accent-foreground); }
.sidebar nav a[aria-current="page"] { background: var(--sidebar-accent); font-weight: var(--font-weight-semibold); }
.sidebar nav a svg { width: 1rem; height: 1rem; flex: none; opacity: .75; }
.sidebar .who { margin-top: auto; display: flex; align-items: center; gap: .625rem; padding: .5rem; font-size: var(--text-xs); line-height: 1.3; }
.sidebar .who .avatar { width: 2rem; height: 2rem; border-radius: var(--radius-md); background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); display: inline-flex; align-items: center; justify-content: center; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); flex: none; }
.sidebar .who b { display: block; font-weight: var(--font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 10rem; }
.sidebar .who span { color: var(--muted-foreground); }
.topbar {
  height: 3.5rem; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--background); z-index: var(--z-sticky);
}
.topbar .crumbs { color: var(--muted-foreground); }
.topbar .crumbs b { color: var(--foreground); font-weight: var(--font-weight-medium); }
.topbar .crumbs span { margin: 0 .5rem; }
.topbar .grow { flex: 1; }
.topbar form { margin: 0; }
main { padding: 1.5rem; max-width: 72rem; display: flex; flex-direction: column; gap: 1.25rem; }
main > h1 { margin-bottom: -.25rem; }
main > p:not([role]) { color: var(--muted-foreground); max-width: 64rem; }
main > p > a:only-child, .toolbar a, .actions a { font-weight: var(--font-weight-medium); }

/* ---- Card (section) ---- */
section { background: var(--card); color: var(--card-foreground); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xs); padding: 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
section > h2, section > h3 { margin: 0; }
section section { box-shadow: none; }
details { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .75rem 1rem; }
summary { cursor: pointer; font-weight: var(--font-weight-medium); }

/* ---- Buttons (templUI: default / outline) ---- */
button, .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; white-space: nowrap;
  height: 2.25rem; padding: 0 1rem; font: inherit; font-weight: var(--font-weight-medium); border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--background); color: var(--foreground); box-shadow: var(--shadow-xs);
  cursor: pointer; transition: background-color var(--motion-duration-fast) var(--motion-ease-out);
}
button:hover, .btn:hover { background: var(--muted); }
button[type="submit"], .btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
button[type="submit"]:hover, .btn-primary:hover { background: color-mix(in srgb, var(--primary) 90%, transparent); }
button:disabled { opacity: var(--opacity-disabled); pointer-events: none; }
.actions form, .inline { display: inline-block; margin: 0 .25rem .25rem 0; }
.actions button { height: 2rem; padding: 0 .75rem; font-size: var(--text-xs); }
.topbar button { height: 2rem; padding: 0 .75rem; }

/* ---- Forms (templUI input/select/textarea/label) ---- */
form { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; }
form > input[type="hidden"] { display: none; }
label { display: inline-flex; flex-direction: column; gap: .375rem; font-size: var(--text-sm); font-weight: var(--font-weight-medium); line-height: 1; }
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { flex-direction: row; align-items: center; height: 2.25rem; font-weight: var(--font-weight-normal); }
label:has(> textarea) { flex: 1 1 100%; }
label:not(:has(input, select, textarea)) { height: 2.25rem; justify-content: center; }
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]), select, textarea {
  height: 2.25rem; min-width: 8rem; border: 1px solid var(--input); border-radius: var(--radius-md); background: transparent;
  padding: 0 .75rem; font: inherit; font-size: var(--text-sm); color: var(--foreground); box-shadow: var(--shadow-xs);
}
textarea { height: auto; min-height: 5rem; padding: .5rem .75rem; width: 100%; line-height: var(--text-sm--line-height); }
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--ring); box-shadow: 0 0 0 var(--focus-ring-width) color-mix(in srgb, var(--ring) 50%, transparent); }
input::placeholder, textarea::placeholder { color: var(--muted-foreground); }
input[type="checkbox"], input[type="radio"] { width: 1rem; height: 1rem; accent-color: var(--primary); margin: 0; }
input[type="number"], input[type="time"], input[type="date"] { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; }
input[aria-invalid="true"], .input-error { border-color: var(--destructive); }
fieldset { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .75rem 1rem; margin: 0; display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-end; flex: 1 1 100%; }
legend { padding: 0 .375rem; font-weight: var(--font-weight-medium); font-size: var(--text-xs); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* ---- Table (templUI) ---- */
.table-scroll { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-xl); background: var(--card); }
section .table-scroll { border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: var(--card); }
caption { text-align: left; padding: .75rem; font-weight: var(--font-weight-medium); }
th { text-align: left; font-weight: var(--font-weight-medium); color: var(--muted-foreground); height: 2.5rem; padding: 0 .75rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
td { padding: .625rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--muted); }
tfoot th, tfoot td { border-top: 1px solid var(--border); border-bottom: 0; color: var(--foreground); font-weight: var(--font-weight-semibold); }
td:has(> form), td.actions { white-space: nowrap; }
td form { display: inline-flex; gap: .5rem; }
dl { display: grid; grid-template-columns: max-content 1fr; gap: .375rem 1.5rem; margin: 0; }
dt { color: var(--muted-foreground); font-weight: var(--font-weight-medium); }
dd { margin: 0; }

/* ---- Badge / alert / toolbar / tabs ---- */
.badge { display: inline-flex; align-items: center; gap: .25rem; border-radius: var(--radius-md); padding: .125rem .5rem; font-size: var(--text-xs); font-weight: var(--font-weight-semibold); line-height: 1rem; background: var(--secondary); color: var(--secondary-foreground); border: 1px solid transparent; }
[role="alert"], [role="status"], .flash, .notice, .warning, .error, .alert-error, .dispensed-warning {
  display: block; padding: .75rem 1rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--card); margin: 0;
}
[role="status"], .flash, .notice { border-color: color-mix(in srgb, var(--info) 30%, transparent); background: color-mix(in srgb, var(--info) 8%, var(--card)); color: var(--info-700); }
.warning, .dispensed-warning { border-color: color-mix(in srgb, var(--warning) 30%, transparent); background: color-mix(in srgb, var(--warning) 8%, var(--card)); color: var(--warning-700); }
[role="alert"], .error, .alert-error { border-color: color-mix(in srgb, var(--destructive) 30%, transparent); background: color-mix(in srgb, var(--destructive) 8%, var(--card)); color: var(--destructive-700); }
.toolbar { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; border-bottom: 1px solid var(--border); margin: 0; }
.toolbar a { text-decoration: none; padding: .5rem .75rem; border-bottom: 2px solid transparent; margin-bottom: -1px; color: var(--muted-foreground); font-weight: var(--font-weight-medium); }
.toolbar a:hover { color: var(--foreground); }
.toolbar [aria-current="page"] { color: var(--foreground); border-bottom-color: var(--primary); font-weight: var(--font-weight-semibold); }
.toolbar form { margin-left: auto; }

/* ---- Calendar, venue map and legends (status never by colour alone: labels stay in the SVG) ---- */
.legend { display: flex; flex-wrap: wrap; gap: 1rem; color: var(--muted-foreground); font-size: var(--text-xs); }
.legend .swatch { display: inline-block; width: .875rem; height: .875rem; border-radius: var(--radius-md); vertical-align: middle; margin-left: .375rem; border: 1px solid var(--border); }
.swatch.booked, .swatch.map-booked { background: var(--chart-1); }
.swatch.walk-in, .swatch.map-in-play { background: var(--chart-2); }
.swatch.blocked { background: repeating-linear-gradient(45deg, var(--muted-foreground) 0 3px, var(--secondary) 3px 6px); }
.swatch.map-free { background: var(--card); }
.swatch.map-closed { background: var(--secondary); }
.calendar-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); }
svg.calendar { display: block; font-size: 12px; font-family: var(--font-body); }
svg.calendar .bay-name { font-weight: var(--font-weight-semibold); fill: var(--foreground); }
svg.calendar .bay-badge rect { fill: var(--secondary); stroke: var(--border); stroke-width: 1; }
svg.calendar .bay-badge text { font-size: 10px; font-weight: var(--font-weight-semibold); fill: var(--foreground); }
.calendar-filters { display: inline-flex; gap: .4rem; align-items: center; border: 0; margin: 0; padding: 0; flex: none; }
.calendar-filters legend { float: left; margin-right: .3rem; padding: 0; }
.calendar-filters .chip { display: inline-flex; gap: .25rem; align-items: center; padding: .125rem .625rem; border: 1px solid var(--border); border-radius: var(--radius-full); background: var(--secondary); color: var(--secondary-foreground); font-size: var(--text-xs); font-weight: var(--font-weight-medium); cursor: pointer; }
svg.calendar .hour { fill: var(--muted-foreground); font-family: var(--font-numeric); }
svg.calendar .hour-rule { stroke: var(--border); }
svg.calendar .bay-rule { stroke: var(--border); }
svg.calendar .open-window { fill: var(--muted); }
svg.calendar .bay-block rect { fill: var(--secondary); stroke: var(--muted-foreground); stroke-dasharray: 4 3; }
svg.calendar .bay-block text { font-weight: var(--font-weight-semibold); fill: var(--foreground); }
svg.calendar .slot-link rect { fill: transparent; cursor: pointer; }
svg.calendar .slot-link:hover rect { fill: var(--accent); }
svg.calendar .booking rect { fill: var(--chart-1); rx: 4; }
svg.calendar .booking.walk-in rect { fill: var(--chart-2); }
svg.calendar .booking text { fill: var(--on-brand-light); }
svg.calendar .booking-time { font-size: 11px; font-family: var(--font-numeric); }
svg.calendar .now { stroke: var(--destructive); stroke-width: 2; }

/* ---- Layout primitives: section tabs, master–detail, split list + peek panel, side sheet ---- */
.tabs { margin: -.5rem 0 .5rem; }
td.num, th.num, .num { font-family: var(--font-numeric); font-variant-numeric: tabular-nums; white-space: nowrap; }
th.num { text-align: right; }
td.num { text-align: right; }
.master-detail { display: grid; grid-template-columns: 17rem minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.master-detail > nav { position: sticky; top: 4.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: .5rem; display: flex; flex-direction: column; gap: .125rem; }
.master-detail > nav .group { font-size: .6875rem; font-weight: var(--font-weight-medium); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .04em; padding: .75rem .625rem .25rem; }
.master-detail > nav a { display: flex; align-items: center; gap: .5rem; padding: .5rem .625rem; border-radius: var(--radius-md); text-decoration: none; color: var(--foreground); font-size: .875rem; }
.master-detail > nav a:hover { background: var(--accent); }
.master-detail > nav a[aria-current="page"] { background: var(--accent); font-weight: var(--font-weight-semibold); }
.master-detail > nav a.child { padding-left: 1.75rem; }
.master-detail > nav a .badge { margin-left: auto; }
.split { display: grid; grid-template-columns: minmax(0, 1fr) 22rem; gap: 1.25rem; align-items: start; }
.peek { position: sticky; top: 4.5rem; }
.peek dl { display: grid; grid-template-columns: 7rem 1fr; gap: .25rem .75rem; margin: 0; font-size: .875rem; }
.peek dt { color: var(--muted-foreground); }
.peek dd { margin: 0; }
tr[data-href] { cursor: pointer; }
tr[aria-selected="true"] td { background: var(--accent); }
.sheet { position: fixed; top: 0; right: 0; height: 100vh; width: min(30rem, 100vw); background: var(--background); border-left: 1px solid var(--border); box-shadow: var(--shadow-overlay); z-index: 200; display: flex; flex-direction: column; }
.sheet > header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.sheet > header h2 { margin: 0; font-size: 1rem; }
.sheet > header a.close { margin-left: auto; text-decoration: none; color: var(--muted-foreground); font-size: 1.25rem; line-height: 1; }
.sheet > form, .sheet > div { padding: 1.25rem; overflow: auto; flex: 1; display: flex; flex-direction: column; align-items: stretch; gap: 1rem; }
.sheet > form > *, .sheet > div > * { max-width: 100%; }
.sheet > form > fieldset, .sheet > form > label, .sheet > div > fieldset, .sheet > div > label { flex: none; }
.sheet > footer, .sheet .sheet-actions { padding: 1rem 1.25rem; border-top: 1px solid var(--border); display: flex; gap: .5rem; justify-content: flex-end; background: var(--muted); }
.scrim { position: fixed; inset: 0; background: rgb(0 0 0 / .25); z-index: 150; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.actions .sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 .25rem; }
.empty { padding: 2rem 1rem; text-align: center; color: var(--muted-foreground); border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.empty p { margin: 0 0 .75rem; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.stat { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 1rem 1.25rem; }
.stat .label { font-size: .75rem; font-weight: var(--font-weight-medium); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .025em; }
.stat .value { font-family: var(--font-numeric); font-size: 1.75rem; font-weight: var(--font-weight-medium); line-height: 2.25rem; margin-top: .25rem; }
.stat .delta { font-size: .75rem; color: var(--muted-foreground); }
.stat.attention { border-color: var(--brand-yellow); box-shadow: 0 0 0 1px var(--brand-yellow); }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); gap: 1.25rem; align-items: start; }
.today-head { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; justify-content: space-between; }
.today-head p, .today-head h2 { margin: 0; }
.today-btn { text-decoration: none; }
.today-stat { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.today-stat:hover { border-color: var(--primary); }
.today-column { display: flex; flex-direction: column; gap: 1.25rem; }
.today-gaps, .today-next { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.today-gaps li, .today-next li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between; }
.badge.today-collect { background: color-mix(in srgb, var(--warning) 18%, var(--card)); color: var(--warning-700); }
.badge.today-incident { background: color-mix(in srgb, var(--destructive) 18%, var(--card)); color: var(--destructive-700); }
.badge.today-hold { background: color-mix(in srgb, var(--info) 18%, var(--card)); color: var(--info-700); }
.badge.today-paid { background: color-mix(in srgb, var(--success) 18%, var(--card)); color: var(--success-700); }


/* ---- Week grid (opening hours) ---- */
.week { display: grid; grid-template-columns: 2.5rem repeat(7, minmax(0, 1fr)); gap: 2px; font-size: var(--text-xs); }
.week > [role="columnheader"] { text-align: center; color: var(--muted-foreground); font-weight: var(--font-weight-medium); padding-bottom: .25rem; }
.week > .week-hour { color: var(--muted-foreground); font-family: var(--font-numeric); text-align: right; padding-right: .375rem; line-height: 1rem; }
.week > .open, .week > .peak, .week > .closed { height: 1rem; border-radius: var(--radius-md); }
.week > .open, .week-key.open { background: color-mix(in srgb, var(--brand-sand-light) 88%, var(--foreground) 12%); }
.week > .peak, .week-key.peak { background: var(--brand-yellow); }
.week > .closed, .week-key.closed { background: var(--card); border: 1px solid var(--border); }
.week-legend { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; color: var(--muted-foreground); font-size: var(--text-xs); }
.week-legend .week-key { display: inline-block; width: .875rem; height: .875rem; border-radius: var(--radius-md); border: 1px solid var(--border); margin-left: .625rem; }
.week-legend .week-key:first-child { margin-left: 0; }
.week-sheet { width: min(64rem, 100vw); }
.week-sheet .demand-grid select { min-width: 2.75rem; width: 2.75rem; padding: 0 .25rem; }
.week-sheet .demand-grid th, .week-sheet .demand-grid td { padding: .125rem .25rem; }
.pricing-hint { color: var(--muted-foreground); font-size: var(--text-xs); }

/* ---- Structure page: master-detail panes, bay table and its bulk footer ---- */
.structure-pane { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.structure-pane section > .actions h2, .structure-pane section > .actions h3 { margin: 0; }
.structure-pane ul { margin: 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: .375rem; }
.structure-pane tbody td { white-space: nowrap; }
.structure-pane td .badge { margin-right: .25rem; }
.structure-bulk { display: block; }
.structure-bulk-actions { margin-top: .75rem; font-size: var(--text-sm); }
.structure-bulk-actions fieldset { flex: 0 1 auto; }
.structure-add { color: var(--muted-foreground); font-size: .8125rem; }
.structure-sheet { align-items: stretch; flex-wrap: nowrap; }
.structure-sheet fieldset { flex: none; display: grid; grid-template-columns: 1fr; gap: .5rem; align-items: start; }
.structure-sheet fieldset.structure-chips, .structure-bulk-actions fieldset.structure-chips { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; }
.structure-sheet label { align-items: flex-start; }
.structure-sheet dl { grid-template-columns: 6rem 1fr; font-size: var(--text-sm); }
.structure-sheet-footer { align-items: center; }
.structure-sheet-footer form { margin: 0 auto 0 0; }
.structure-sheet-footer a { padding: 0 .5rem; font-weight: var(--font-weight-medium); }

/* ---- Small screens: the sidebar collapses to a top strip ---- */
@media (max-width: 56rem) {
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; border-right: 0; border-bottom: 1px solid var(--sidebar-border); }
  .sidebar .brand { margin: 0; }
  .sidebar .group { display: none; }
  .sidebar nav a { padding: .375rem .5rem; }
  .sidebar .who { margin-top: 0; }
  main { padding: 1rem; }
  .master-detail, .split { grid-template-columns: 1fr; }
  .master-detail > nav, .peek { position: static; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---- Bookings list, peek panel and booking actions ---- */
.badge.bookings-ok { background: color-mix(in srgb, var(--success) 15%, var(--card)); color: var(--success-700); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.badge.bookings-due { background: color-mix(in srgb, var(--warning) 15%, var(--card)); color: var(--warning-700); border-color: color-mix(in srgb, var(--warning) 30%, transparent); }
.badge.bookings-info { background: color-mix(in srgb, var(--info) 15%, var(--card)); color: var(--info-700); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.badge.bookings-off, .badge.bookings-neutral { background: var(--muted); color: var(--muted-foreground); border-color: var(--border); }
.badge.bookings-ok, .badge.bookings-due, .badge.bookings-info, .badge.bookings-off, .badge.bookings-neutral { white-space: nowrap; }
td.bookings-bay { white-space: nowrap; }
td.bookings-when { min-width: 9.5rem; }
.bookings-actions { margin: 0; }
.bookings-actions a.btn { height: 2rem; padding: 0 .75rem; font-size: var(--text-xs); text-decoration: none; }
.bookings-actions a.bookings-destructive { color: var(--destructive); }
.peek > h2 { margin: 0; font-size: 1rem; }
.peek > p { margin: 0; }
.peek > form { margin: 0; }

/* ---- Products and Offers: list-first pages ---- */
.products-head, .offers-head { justify-content: flex-end; }
.products-filters, .offers-filters { align-items: flex-end; padding: 0 .125rem; }
.products-sub { display: block; color: var(--muted-foreground); font-size: var(--text-xs); }
.products-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.products-sheet > form { align-items: stretch; }
.products-sheet > form > label { align-items: stretch; }
.products-sheet fieldset { flex: 0 0 auto; }
.products-sheet label:not(:has(> input[type="checkbox"])) > input, .products-sheet label > select, .products-sheet label > textarea { width: 100%; }
.products-sheet > footer form { margin: 0; }

/* ---- Integrations › Toptracer: screen profiles ---- */
.h1row { display: flex; align-items: center; gap: .75rem; }
.pill { display: inline-block; font-size: var(--text-xs); padding: .125rem .5rem; border-radius: var(--radius-full, 999px); background: var(--muted); color: var(--muted-foreground); font-weight: var(--font-weight-medium); }
.pill.site { font-family: var(--font-numeric); }
.pill.exp { background: color-mix(in srgb, var(--warning) 20%, var(--card)); color: var(--warning-700); }
p.note.warn { background: color-mix(in srgb, var(--warning) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--warning) 30%, transparent); color: var(--foreground); padding: .625rem .875rem; border-radius: var(--radius-md); }
.twocol { display: grid; grid-template-columns: minmax(0, 1fr) 26rem; gap: 1.5rem; align-items: start; }
.twocol .lead { color: var(--muted-foreground); font-size: var(--text-xs); margin: 0 0 .625rem; }
.twocol .grid3 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .875rem 1.125rem; margin-bottom: .75rem; }
.twocol fieldset > .lead, .twocol fieldset > .grid3 { grid-column: 1 / -1; width: 100%; }
label.f { display: flex; flex-direction: column; gap: .25rem; }
label.f .l, label.c .l { font-weight: var(--font-weight-medium); }
label.f small, label.c small { color: var(--muted-foreground); font-size: var(--text-xs); }
.unit { display: flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--card); max-width: 11rem; }
.unit input { border: 0 !important; flex: 1; min-width: 0; box-shadow: none !important; }
.unit i { font-style: normal; color: var(--muted-foreground); padding: 0 .625rem; font-size: var(--text-xs); }
label.c { display: flex; gap: .625rem; align-items: flex-start; }
label.c > span { display: flex; flex-direction: column; }
.c-wrap { display: flex; flex-direction: column; gap: .5rem; }
.hidden { display: none !important; }
.actions { display: flex; gap: .75rem; align-items: center; margin: .5rem 0 1.5rem; }
button.sw { display: inline-flex; align-items: center; gap: .5rem; background: none; border: 0; padding: 0; cursor: pointer; height: auto; }
button.sw > span { width: 2.125rem; height: 1.25rem; border-radius: var(--radius-full, 999px); background: color-mix(in srgb, var(--success) 35%, var(--card)); position: relative; }
button.sw > span::after { content: ""; position: absolute; top: .125rem; left: .125rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--card); }
button.sw[aria-pressed="true"] > span { background: var(--muted-foreground); }
button.sw[aria-pressed="true"] > span::after { left: 1rem; }
button.sw em { font-style: normal; font-size: var(--text-xs); color: var(--foreground); }
.screen-switch { margin: 0; }
.profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 1.25rem; }
.profile { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: .875rem 1rem; background: var(--card); display: flex; flex-direction: column; gap: .5rem; margin: 0; }
.profile.current { border-color: var(--foreground); box-shadow: 0 0 0 3px var(--muted); }
.profile h3 { margin: 0; font-size: var(--text-base); text-align: left; align-self: stretch; }
.profile p { margin: 0; color: var(--muted-foreground); font-size: var(--text-sm); flex: 1; }
.profile button { align-self: flex-start; }
.pill.on { background: color-mix(in srgb, var(--success) 18%, var(--card)); color: var(--success-700); }
.customise > summary { cursor: pointer; font-weight: var(--font-weight-medium); margin-bottom: .75rem; }
.previewcol { position: sticky; top: 1rem; }
.baycol h2 { margin-top: 0; }
.baycol .lead { color: var(--muted-foreground); font-size: var(--text-xs); }
@media (max-width: 70rem) { .twocol { grid-template-columns: minmax(0, 1fr); } .profiles { grid-template-columns: minmax(0, 1fr); } .previewcol { position: static; } }
p.flash { background: color-mix(in srgb, var(--success) 12%, var(--card)); border: 1px solid color-mix(in srgb, var(--success) 30%, transparent); padding: .625rem .875rem; border-radius: var(--radius-md); }

/* ---- Integrations › RS Pay ---- */
.setup { list-style: none; padding: 0; margin: 0; display: grid; gap: .625rem; }
.setup li { padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card); font-size: var(--text-sm); }
.setup li small { color: var(--muted-foreground); }
.setup li.done b { color: var(--muted-foreground); font-weight: var(--font-weight-medium); }
.desk-basket-sold { display: grid; gap: 1rem; justify-items: start; }
.desk-basket-qr { margin: 0; display: grid; gap: .5rem; justify-items: center; }
.desk-basket-qr img { border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.desk-basket-pin { font-size: var(--text-2xl, 1.5rem); letter-spacing: .2em; font-weight: var(--font-weight-semibold); }
.desk-basket-sold .toolbar { border-bottom: 0; gap: 1rem; }
@media print { body > header, body > nav, .crumbs, .tabs, .desk-basket-sold .toolbar { display: none !important; } .desk-basket-sold { justify-items: center; } }