/* Flex Desk: SSC style (ssc.mk), light + dark.
   Colour roles: orange = actions and selection, yellow = one standout CTA,
   crimson = small details (eyebrows, meta). Warm amber gradient for nav, hero and footer. */

/* ================= TOKENS (light) ================= */
:root {
  /* SSC brand palette */
  --ssc-orange:#EF8722;--ssc-orange-d:#D9741A;--ssc-yellow:#F7C01A;--ssc-crimson:#A42823;--ssc-amber:#A56E2A;
  --ssc-heading:#2C2C2C;--ssc-text:#404040;--ssc-sub:#686868;--ssc-muted:#95989A;
  --ssc-card:#FCFCFC;--ssc-band:#EEEEEE;--ssc-border:#CED4DA;
  --ssc-hero:linear-gradient(135deg,#3a2614 0%,#A56E2A 100%);

  /* semantic: text */
  --text:var(--ssc-text);--text-strong:var(--ssc-heading);--text-weak:var(--ssc-sub);--text-disabled:var(--ssc-muted);
  --text-brand:#A9560D;--text-brand-hover:#8A4508;--text-accent:#A9560D;--text-meta:var(--ssc-crimson);
  --text-success:#2E7D43;--text-error:var(--ssc-crimson);--text-warning:#A9560D;--text-info:#8A5A1F;
  --link:#A9560D;--link-hover:#8A4508;
  /* semantic: surfaces */
  --bg:#FFFFFF;--bg-paper:var(--ssc-card);--bg-hover:#F6F6F6;
  --surface:var(--ssc-band);--surface-weak:#F5F5F5;--surface-strong:#E4E4E4;
  --bg-input:var(--ssc-card);--bg-input-hover:#FFFFFF;
  --bg-brand:var(--ssc-orange);--bg-brand-hover:var(--ssc-orange-d);--bg-brand-active:#C2650F;--bg-brand-subtle:rgba(239,135,34,.12);
  --bg-selected:var(--ssc-orange);--bg-selected-subtle:rgba(239,135,34,.16);
  --bg-neutral:#DDDDDD;--bg-neutral-strong:var(--ssc-sub);--bg-subtle-hover:rgba(128,128,128,.13);
  --bg-success:#3A8F4E;--bg-error:var(--ssc-crimson);--bg-warning:var(--ssc-yellow);--bg-info:var(--ssc-amber);
  --bg-subtle-success:rgba(58,143,78,.12);--bg-subtle-error:rgba(164,40,35,.1);--bg-subtle-warning:rgba(247,192,26,.2);--bg-subtle-info:rgba(165,110,42,.12);
  --bg-disabled:#DDDDDD;
  --on-solid:#FFFFFF;--on-yellow:var(--ssc-heading);--on-neutral:#FFFFFF;
  /* semantic: borders, icons */
  --border:var(--ssc-border);--border-strong:var(--ssc-muted);--border-input:var(--ssc-border);
  --border-brand:var(--ssc-orange);--border-selected:var(--ssc-orange);--border-focus:var(--ssc-orange-d);
  --icon:var(--ssc-heading);--icon-weak:var(--ssc-sub);--icon-brand:var(--ssc-orange);
  --snack-bg:var(--ssc-heading);--snack-text:#FFFFFF;
  /* floor plan */
  --plan-floor:#FAFAFA;--plan-paper:#FFFFFF;--plan-line:#2C2C2C;--plan-text:#2C2C2C;--plan-own:#FDE3C7;--plan-rest:#E9E3D9;--plan-rest-edge:#C9BFAF;--plan-oos:rgba(240,238,235,.82);--plan-oos-mark:#8A8279;
  /* shape, depth, type, spacing */
  --radius:10px;--radius-md:20px;--radius-lg:33px;--radius-pill:50px;
  --shadow-card:0 0 7px rgba(0,0,0,.13);--shadow-lift:0 6px 18px rgba(0,0,0,.14);
  --shadow-pop:0 12px 32px rgba(0,0,0,.22);--shadow-input:0 4px 4px rgba(0,0,0,.08);
  --font:'Lato',system-ui,-apple-system,'Segoe UI',sans-serif;
  --fs-xs:.75rem;--fs-sm:.875rem;--fs-md:1rem;--fs-lg:1.375rem;--fs-xl:1.625rem;--fs-2xl:2.25rem;
  --fw-regular:400;--fw-bold:700;--fw-head:500;
  --sp-50:4px;--sp-100:8px;--sp-150:12px;--sp-200:16px;--sp-300:24px;--sp-400:32px;--sp-600:48px;
  --dur:.2s;--nav-h:72px;
  color-scheme:light;
}

/* ================= TOKENS (dark, derived: SSC has no dark theme) ================= */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --text:#E9E4DC;--text-strong:#F7F3EE;--text-weak:#BDB6AC;--text-disabled:#857E75;
  --text-brand:#F5A04F;--text-brand-hover:#F8B878;--text-accent:#F5A04F;--text-meta:#E0726C;
  --text-success:#7BC48D;--text-error:#E0726C;--text-warning:#F7C01A;--text-info:#D9A766;
  --link:#F5A04F;--link-hover:#F8B878;
  --bg:#1B1815;--bg-paper:#26221E;--bg-hover:#2E2925;
  --surface:#302B26;--surface-weak:#1B1815;--surface-strong:#3A342E;
  --bg-input:#2E2925;--bg-input-hover:#352F2A;
  --bg-brand:var(--ssc-orange);--bg-brand-hover:#F5A04F;--bg-brand-active:var(--ssc-orange-d);--bg-brand-subtle:rgba(239,135,34,.2);
  --bg-selected-subtle:rgba(239,135,34,.24);
  --bg-neutral:#3A342E;--bg-neutral-strong:#BDB6AC;--bg-subtle-hover:rgba(255,255,255,.07);
  --bg-success:#4FA463;--bg-error:#C2413A;--bg-info:#B07A36;
  --bg-subtle-success:rgba(79,164,99,.2);--bg-subtle-error:rgba(194,65,58,.22);--bg-subtle-warning:rgba(247,192,26,.18);--bg-subtle-info:rgba(176,122,54,.22);
  --bg-disabled:#3A342E;--on-neutral:#1B1815;
  --border:#3E3832;--border-strong:#857E75;--border-input:#4A433C;--border-focus:#F5A04F;
  --icon:#F7F3EE;--icon-weak:#BDB6AC;--icon-brand:#F5A04F;
  --snack-bg:#F7F3EE;--snack-text:#2C2C2C;
  --plan-floor:#201C19;--plan-paper:#2E2925;--plan-line:#A39B90;--plan-text:#F7F3EE;--plan-own:#5A3814;--plan-rest:#3A342E;--plan-rest-edge:#5A524A;--plan-oos:rgba(46,41,37,.82);--plan-oos-mark:#A39B90;
  --shadow-card:0 0 0 1px rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.5);--shadow-lift:0 0 0 1px rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.55);
  --shadow-pop:0 12px 32px rgba(0,0,0,.6);--shadow-input:0 2px 4px rgba(0,0,0,.35);
  color-scheme:dark;
} }
:root[data-theme="dark"] {
  --text:#E9E4DC;--text-strong:#F7F3EE;--text-weak:#BDB6AC;--text-disabled:#857E75;
  --text-brand:#F5A04F;--text-brand-hover:#F8B878;--text-accent:#F5A04F;--text-meta:#E0726C;
  --text-success:#7BC48D;--text-error:#E0726C;--text-warning:#F7C01A;--text-info:#D9A766;
  --link:#F5A04F;--link-hover:#F8B878;
  --bg:#1B1815;--bg-paper:#26221E;--bg-hover:#2E2925;
  --surface:#302B26;--surface-weak:#1B1815;--surface-strong:#3A342E;
  --bg-input:#2E2925;--bg-input-hover:#352F2A;
  --bg-brand:var(--ssc-orange);--bg-brand-hover:#F5A04F;--bg-brand-active:var(--ssc-orange-d);--bg-brand-subtle:rgba(239,135,34,.2);
  --bg-selected-subtle:rgba(239,135,34,.24);
  --bg-neutral:#3A342E;--bg-neutral-strong:#BDB6AC;--bg-subtle-hover:rgba(255,255,255,.07);
  --bg-success:#4FA463;--bg-error:#C2413A;--bg-info:#B07A36;
  --bg-subtle-success:rgba(79,164,99,.2);--bg-subtle-error:rgba(194,65,58,.22);--bg-subtle-warning:rgba(247,192,26,.18);--bg-subtle-info:rgba(176,122,54,.22);
  --bg-disabled:#3A342E;--on-neutral:#1B1815;
  --border:#3E3832;--border-strong:#857E75;--border-input:#4A433C;--border-focus:#F5A04F;
  --icon:#F7F3EE;--icon-weak:#BDB6AC;--icon-brand:#F5A04F;
  --snack-bg:#F7F3EE;--snack-text:#2C2C2C;
  --plan-floor:#201C19;--plan-paper:#2E2925;--plan-line:#A39B90;--plan-text:#F7F3EE;--plan-own:#5A3814;--plan-rest:#3A342E;--plan-rest-edge:#5A524A;--plan-oos:rgba(46,41,37,.82);--plan-oos-mark:#A39B90;
  --shadow-card:0 0 0 1px rgba(255,255,255,.05),0 2px 8px rgba(0,0,0,.5);--shadow-lift:0 0 0 1px rgba(255,255,255,.07),0 8px 20px rgba(0,0,0,.55);
  --shadow-pop:0 12px 32px rgba(0,0,0,.6);--shadow-input:0 2px 4px rgba(0,0,0,.35);
  color-scheme:dark;
}

/* ================= BASE ================= */
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font:var(--fw-regular) var(--fs-md)/1.5 var(--font);color:var(--text);background:var(--surface-weak);min-width:20rem;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:var(--fw-head);line-height:1.2;color:var(--text-strong)}
h1{font-size:var(--fs-2xl)} h2{font-size:var(--fs-lg)} h3{font-size:var(--fs-md)}
p{margin:0}
a{color:var(--link)} a:hover{color:var(--link-hover)}
strong{font-weight:var(--fw-bold)}
code{font-size:.9em;background:var(--surface-strong);padding:1px 6px;border-radius:6px}
.muted{color:var(--text-weak);font-size:var(--fs-sm);font-weight:var(--fw-regular)}
.small{font-size:var(--fs-xs)}
.num{font-variant-numeric:tabular-nums}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icon{font-family:'Material Symbols Outlined';font-weight:normal;font-style:normal;font-size:24px;line-height:1;display:inline-block;
  font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24;-webkit-font-smoothing:antialiased;user-select:none;flex:none;overflow:hidden;width:1em}
.icon.sm{font-size:18px}
.icon.inline{vertical-align:-4px}
:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;border-radius:var(--radius)}

/* ================= APP SHELL: SSC top bar ================= */
.app{min-height:100vh;display:flex;flex-direction:column}
.topnav{position:sticky;top:0;z-index:20;height:var(--nav-h);display:flex;align-items:center;gap:var(--sp-300);
  padding:0 clamp(16px,4vw,64px);background:var(--ssc-hero);color:#fff;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.nav-brand{display:flex;align-items:center;gap:var(--sp-150);text-decoration:none;color:#fff;flex:none}
.nav-brand img{height:48px;width:auto;display:block}
.nav-product{padding-left:var(--sp-150);border-left:1px solid rgba(255,255,255,.45);font-size:1.25rem;font-weight:var(--fw-regular);letter-spacing:.2px;white-space:nowrap;color:#fff}
.nav-panel{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-300);min-width:0}
.nav-list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:var(--sp-300)}
.nav-list a{position:relative;display:flex;align-items:center;gap:6px;color:#fff;text-decoration:none;font-size:var(--fs-md);padding:6px 0;white-space:nowrap}
.nav-list a .icon{font-size:20px;opacity:.9}
.nav-list a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;border-radius:3px;background:#fff;transform:scaleX(0);transition:transform var(--dur)}
.nav-list a:hover::after,.nav-list a[aria-current="page"]::after{transform:scaleX(1)}
.nav-count{height:20px;padding:0 7px;font-size:var(--fs-xs);font-weight:var(--fw-bold);background:var(--ssc-yellow)!important;color:var(--ssc-heading)!important}
.nav-actions{display:flex;align-items:center;gap:var(--sp-100);padding-left:var(--sp-200);border-left:1px solid rgba(255,255,255,.3)}
.user-box{display:flex;align-items:center;gap:var(--sp-100);font-size:var(--fs-sm);color:#fff;white-space:nowrap}
.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--bg-brand-subtle);color:var(--text-brand);font-size:var(--fs-sm);font-weight:var(--fw-bold);flex:none}
.topnav .avatar{background:rgba(255,255,255,.2);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.topnav .nav-burger{display:none;margin-left:auto}
.page-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.page-controls{position:sticky;top:var(--nav-h);z-index:10;display:grid;gap:var(--sp-150);padding:var(--sp-150) max(clamp(16px,4vw,64px),calc((100% - 1320px) / 2 + clamp(16px,4vw,64px)));background:var(--bg);border-bottom:1px solid var(--border)}
.content{flex:1;width:100%;max-width:1320px;margin:0 auto;display:grid;align-content:start;gap:var(--sp-300);padding:var(--sp-300) clamp(16px,4vw,64px) var(--sp-600);min-width:0}
.footer{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--sp-200);padding:var(--sp-300) clamp(16px,4vw,64px);background:var(--ssc-hero);color:#fff;font-size:var(--fs-sm)}
.footer img{height:44px;width:auto;display:block}
.footer-brand{display:flex;align-items:center;gap:var(--sp-200)}
.footer .muted{color:rgba(255,255,255,.8)}

/* ================= SURFACES ================= */
.card{background:var(--bg-paper);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.card{padding:var(--sp-300)}
.card.interactive{transition:box-shadow var(--dur),transform var(--dur);cursor:pointer}
.card.interactive:hover{box-shadow:var(--shadow-lift);transform:translateY(-2px)}
.section{display:grid;gap:var(--sp-200);min-width:0;align-content:start}
.section-heading{display:grid;gap:var(--sp-50)}
.view-header{display:flex;justify-content:space-between;align-items:end;gap:var(--sp-200);flex-wrap:wrap}
.eyebrow{color:var(--text-meta);font-size:var(--fs-xs);font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase}

/* hero band: the headline of each view, warm amber like the ssc.mk hero */
.hero-band{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--sp-200) var(--sp-300);
  padding:var(--sp-300) var(--sp-400);border-radius:var(--radius-md);background:var(--ssc-hero);color:#fff;box-shadow:var(--shadow-card)}
.context-text{display:grid;gap:var(--sp-50)}
.hero-band h1{color:#fff;font-size:clamp(1.75rem,3.2vw,2.5rem)}
.hero-band .eyebrow{color:var(--ssc-yellow)}
.hero-band .muted{color:rgba(255,255,255,.88);font-size:var(--fs-md)}
.hero-band strong{color:#fff}
.hero-band .btn-primary{background:#fff;color:var(--ssc-heading)}
.hero-band .btn-primary:hover{background:var(--ssc-yellow)}
.hero-band .btn-primary .icon{color:var(--ssc-orange)}
.hero-band .chip-neutral{background:rgba(255,255,255,.22);color:#fff}

.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));row-gap:var(--sp-200)}
.stat{display:grid;align-content:start;gap:var(--sp-50);padding-inline:var(--sp-300);border-left:1px solid var(--border)}
.stat:first-child{border-left:0;padding-left:0}
.stat-header{display:flex;align-items:center;gap:var(--sp-100)}
.stat-label{color:var(--text-weak);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.stat-icon{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--icon-brand);background:var(--bg-brand-subtle)}
.stat-icon .icon{font-size:17px}
.stat-warning .stat-icon{color:var(--text-meta);background:var(--bg-subtle-error)}
.stat-value{font-size:2.25rem;font-weight:var(--fw-head);color:var(--text-strong);font-variant-numeric:tabular-nums;line-height:1.15}
.stat-detail{color:var(--text-weak);font-size:var(--fs-sm)}

/* ================= CONTROLS ================= */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-100);height:40px;padding:0 22px;border:1px solid transparent;border-radius:var(--radius-pill);
  font:var(--fw-bold) var(--fs-sm)/1 var(--font);letter-spacing:.2px;cursor:pointer;background:transparent;color:var(--text-brand);
  transition:background var(--dur),color var(--dur),border-color var(--dur),transform var(--dur);white-space:nowrap;text-decoration:none}
.btn .icon{font-size:19px}
.btn-lg{height:49px;padding:0 30px;font-size:var(--fs-md)}
.btn-primary{background:var(--bg-brand);color:#fff}
.btn-primary:hover{background:var(--bg-brand-hover);color:#fff} .btn-primary:active{background:var(--bg-brand-active)}
.btn-yellow{background:var(--ssc-yellow);border-color:var(--ssc-yellow);color:var(--ssc-heading);box-shadow:0 4px 4px rgba(0,0,0,.17)}
.btn-yellow:hover{transform:translateY(-1px);color:var(--ssc-heading)}
.btn-secondary{border-color:var(--border-brand);color:var(--text-brand)}
.btn-secondary:hover,.btn-text:hover{background:var(--bg-brand-subtle);color:var(--text-brand-hover)}
.btn-text{color:var(--text-brand);padding:0 14px}
.btn:disabled{color:var(--text-disabled);border-color:transparent;background:transparent;cursor:not-allowed;box-shadow:none;transform:none}
.btn-secondary:disabled{border-color:var(--border)}
.btn-primary:disabled{background:var(--bg-disabled)}
.btn-icon{width:40px;padding:0;color:var(--icon-weak)}
.btn-icon:hover{background:var(--bg-subtle-hover);color:var(--icon)}
.btn-icon .icon{font-size:24px}
.on-dark{color:#fff}
.on-dark:hover{background:rgba(255,255,255,.16);color:#fff}
.btn-ghost{border-color:rgba(255,255,255,.7);color:#fff;height:36px;padding:0 16px}
.btn-ghost:hover{background:rgba(255,255,255,.16);color:#fff}
.btn-group{display:flex;align-items:center;gap:var(--sp-100);flex-wrap:wrap}

.chip{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:var(--radius-pill);font-size:var(--fs-sm);font-weight:var(--fw-bold);line-height:1;color:var(--on-solid);background:var(--bg-neutral-strong);font-variant-numeric:tabular-nums;white-space:nowrap}
.chip-success{background:var(--bg-success)} .chip-error{background:var(--bg-error)} .chip-info{background:var(--bg-info)}
.chip-warning{background:var(--bg-warning);color:var(--on-yellow)}
.chip-neutral{background:var(--bg-neutral-strong);color:var(--on-neutral)}
.chip-sm{height:18px;padding:0 7px;font-size:var(--fs-xs)}

.search{display:flex;align-items:center;gap:var(--sp-100);width:min(100%,32rem);height:44px;padding:0 18px;background:var(--bg-input);border:1px solid var(--border-input);border-radius:var(--radius-pill);box-shadow:var(--shadow-input)}
.search:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 2px var(--bg-brand-subtle)}
.search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:var(--text)}
.search input::placeholder{color:var(--text-disabled)}
.search .icon{color:var(--icon-weak)}
.field{position:relative;display:flex;align-items:center;gap:var(--sp-100);height:46px;padding:0 18px;background:var(--bg-input);border:1px solid var(--border-input);border-radius:var(--radius-pill);box-shadow:var(--shadow-input);transition:border-color var(--dur)}
.field:hover{border-color:var(--border-strong)}
.field:focus-within{border-color:var(--border-focus);box-shadow:0 0 0 2px var(--bg-brand-subtle)}
.field input,.field select{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:var(--fs-sm);color:var(--text);appearance:none;height:100%}
.field input::placeholder{color:var(--text-disabled)}
.field select{width:100%;padding-right:28px;cursor:pointer;text-overflow:ellipsis}
.field select option{background:var(--bg-paper);color:var(--text)}
.field .icon{color:var(--icon-weak)}
.field select + .icon{position:absolute;right:14px;pointer-events:none}
.filter{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;min-width:0}
.filter-label{font-size:var(--fs-sm);font-weight:var(--fw-bold);color:var(--text-weak);padding-left:6px}
.check{display:flex;align-items:center;gap:var(--sp-100);font-size:var(--fs-sm);cursor:pointer;padding:var(--sp-50) 0}
.check input{width:18px;height:18px;accent-color:var(--ssc-orange);margin:0}

.tabs{display:flex;gap:var(--sp-50);border-bottom:1px solid var(--border);overflow-x:auto}
.tab{appearance:none;background:none;border:0;border-bottom:3px solid transparent;padding:var(--sp-100) var(--sp-200);font:var(--fw-bold) var(--fs-sm)/24px var(--font);color:var(--text-weak);cursor:pointer;white-space:nowrap;border-radius:10px 10px 0 0}
.tab:hover{background:var(--bg-subtle-hover);color:var(--text-strong)}
.tab[aria-selected="true"]{color:var(--text-strong);border-bottom-color:var(--border-selected)}

.pager-bar{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-200)}
.table-count{color:var(--text-weak);font-size:var(--fs-sm);font-weight:var(--fw-bold);font-variant-numeric:tabular-nums}
.table-frame{background:var(--bg-paper);border-radius:var(--radius-md);box-shadow:var(--shadow-card);overflow:auto;max-height:70vh}
.table-frame.flat{box-shadow:none;border:1px solid var(--border);border-radius:14px}
table.hx{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
table.hx th{position:sticky;top:0;z-index:1;background:var(--surface);color:var(--text-weak);font-weight:var(--fw-bold);text-align:left;height:44px;padding:0 var(--sp-200);border-bottom:1px solid var(--border);white-space:nowrap}
table.hx td{height:46px;padding:0 var(--sp-200);border-bottom:1px solid var(--border);white-space:nowrap}
table.hx td.wrap{white-space:normal;padding-block:var(--sp-100)}
table.hx tbody tr:last-child td{border-bottom:0}
table.hx tbody tr:hover td{background:var(--bg-hover)}
table.hx tbody tr.review-approved td,table.hx tbody tr.review-approved:hover td{background:var(--bg-subtle-success)}
table.hx tbody tr.review-not-approved td,table.hx tbody tr.review-not-approved:hover td{background:var(--bg-subtle-error)}
table.hx tr.review-approved td:first-child{box-shadow:inset 4px 0 0 var(--bg-success)}
table.hx tr.review-not-approved td:first-child{box-shadow:inset 4px 0 0 var(--bg-error)}
/* Top-aligned: saving a comment makes the row taller, and a centred checkbox would move away from the mouse mid-click. */
table.hx tr[data-review] td{vertical-align:top;padding-block:var(--sp-100)}
.review-boxes{display:flex;gap:var(--sp-200)}
.review-note{display:grid;gap:2px;min-width:170px;padding-block:var(--sp-50)}
.review-meta:empty{display:none}
table.hx td.num,table.hx th.num{text-align:right;font-variant-numeric:tabular-nums}
.empty{padding:var(--sp-300);background:var(--bg-paper);border:1px dashed var(--border);border-radius:var(--radius-md);text-align:center}

/* notes (inline messages) */
.note{display:flex;gap:var(--sp-150);align-items:flex-start;padding:var(--sp-150) var(--sp-200);border-radius:14px;font-size:var(--fs-sm);line-height:1.5;background:var(--bg-subtle-info)}
.note .icon{font-size:20px;color:var(--text-info)}
.note.warning{background:var(--bg-subtle-warning)} .note.warning .icon{color:var(--text-warning)}
.note.error{background:var(--bg-subtle-error)} .note.error .icon{color:var(--text-error)}
.field-error{color:var(--text-error);font-size:var(--fs-sm);padding-left:6px}

/* ================= BOOKING BOARD ================= */
.board-controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-150) var(--sp-300)}
.week-nav{display:flex;align-items:center;gap:var(--sp-50)}
.week-label{display:grid;gap:2px;min-width:9.5rem;text-align:center;font-size:var(--fs-sm);color:var(--text-strong)}
.week-label strong{font-weight:var(--fw-bold)}
.week-label .muted{font-size:var(--fs-xs)}
.day-tabs{border-bottom:0;gap:6px}
.day-tab{display:grid;justify-items:center;gap:2px;line-height:16px;padding:6px 14px;min-width:4.5rem;border:1px solid var(--border);border-radius:16px}
.day-tab:hover{border-color:var(--border-strong)}
.day-top{display:inline-flex;align-items:center;gap:4px}
.day-tab .day-date{font-weight:var(--fw-regular);font-size:var(--fs-xs)}
.day-tab.off{color:var(--text-disabled)}
.day-tab[aria-selected="true"]{background:var(--bg-brand);border-color:var(--bg-brand);color:#fff}
.day-tab[aria-selected="true"] .day-date{color:#fff}
.day-badge{height:16px;padding:0 6px;border-radius:var(--radius-pill);background:var(--ssc-crimson);color:#fff;font-size:10px;line-height:16px;font-weight:var(--fw-bold)}
.day-badge.pending{background:var(--ssc-yellow);color:var(--ssc-heading)}
.day-tab[aria-selected="true"] .day-badge{background:#fff;color:var(--ssc-crimson)}
.segment{display:inline-flex;padding:3px;gap:2px;border-radius:var(--radius-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border)}
.segment button{appearance:none;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text);padding:5px 16px;display:grid;justify-items:center;gap:0;cursor:pointer;font-family:var(--font);transition:background var(--dur),color var(--dur)}
.segment button:hover{background:var(--bg-subtle-hover)}
.segment button[aria-checked="true"]{background:var(--bg-brand);color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.15)}
.segment button[aria-checked="true"] .seg-hours{color:rgba(255,255,255,.85)}
.seg-label{font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.seg-hours{font-size:var(--fs-xs);color:var(--text-weak);font-variant-numeric:tabular-nums}

.my-week{display:grid;gap:var(--sp-150)}
.booking-list{list-style:none;margin:0;padding:0;display:grid}
.booking-list li{display:flex;align-items:center;gap:var(--sp-150);padding:var(--sp-100) 0;border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.booking-list li:last-child{border-bottom:0}
.booking-list li > .icon{color:var(--icon-brand);font-size:20px}
.booking-text{flex:1;min-width:0}

.zone-head{display:flex;justify-content:space-between;align-items:end;gap:var(--sp-200);flex-wrap:wrap}
.zone-range{font-size:var(--fs-sm);margin-left:var(--sp-50)}
.desk-grid{display:grid;gap:var(--sp-200);grid-template-columns:repeat(auto-fill,minmax(11rem,1fr))}
.desk{display:grid;gap:var(--sp-100);padding:var(--sp-150) var(--sp-150) var(--sp-150) var(--sp-200);border-radius:14px;border-left:5px solid var(--team,var(--border))}
.desk.has-own{box-shadow:0 0 0 2px var(--bg-brand),var(--shadow-card)}
.desk-head{display:flex;justify-content:space-between;align-items:center;min-height:24px}
.desk.oos{opacity:.7;border-left-style:dashed}
.desk.oos .icon{color:var(--text-weak)}
.oos-text{margin:0}
.desk-name{font-weight:var(--fw-bold);color:var(--text-strong)}
.desk-own{color:var(--icon-brand);font-size:20px}
.slots{display:grid;gap:2px}
.slot{appearance:none;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-100);width:100%;min-height:30px;padding:3px var(--sp-100);border:0;border-radius:10px;background:transparent;color:var(--text);font:var(--fs-sm) var(--font);cursor:pointer;text-align:left;transition:background var(--dur)}
.slot:hover{background:var(--bg-subtle-hover)}
.slot.selected{background:var(--surface);box-shadow:inset 3px 0 0 var(--bg-selected)}
.slot-label{color:var(--text-weak);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.5px}
.slot.selected .slot-label{color:var(--text-strong);font-weight:var(--fw-bold)}
.slot-value{display:inline-flex;align-items:center;gap:var(--sp-50);min-width:0}
.slot-value .chip{height:20px;padding:0 9px;font-size:var(--fs-xs)}
.slot-value .chip-sm{height:16px;padding:0 6px;font-size:10px}
.slot-name{font-weight:var(--fw-bold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:6.5rem;color:var(--text-strong)}
.slot.own{background:var(--bg-brand-subtle)}
.slot.own .slot-name{color:var(--text-brand)}
.slot-blocked{display:inline-block;min-width:1.5rem;text-align:center;color:var(--text-disabled);font-weight:var(--fw-bold)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-100)}
.legend .chip{height:20px;font-size:var(--fs-xs)}
.legend-name{font-weight:var(--fw-bold);color:var(--text-strong)}
.legend-own{font-weight:var(--fw-bold);color:var(--text-brand);background:var(--bg-brand-subtle);padding:2px 8px;border-radius:var(--radius-pill)}

/* ================= FLOOR PLAN ================= */
.floor-tabs .tab{display:inline-flex;align-items:center;gap:6px}
.floor-tabs .icon{color:var(--icon-brand)}
.layout-toggle button{grid-auto-flow:column;align-items:center;justify-content:center;gap:6px;padding:7px 16px}
.layout-toggle .icon{font-size:18px}
.plan-card{display:grid;gap:var(--sp-200)}
.plan-toolbar{display:flex;justify-content:space-between;align-items:end;gap:var(--sp-200);flex-wrap:wrap}
.zoom-controls{display:flex;align-items:center;gap:var(--sp-50);padding:3px;border-radius:var(--radius-pill);background:var(--surface)}
.zoom-controls .btn{height:34px}
.zoom-controls .btn-icon{width:34px}
.zoom-level{min-width:3.25rem;text-align:center;font-size:var(--fs-sm);color:var(--text-weak)}
.plan-scroll{overflow:auto;max-height:78vh;background:var(--plan-floor);border:1px solid var(--border);border-radius:14px;-webkit-overflow-scrolling:touch}
.plan-svg{display:block;height:auto;font-family:var(--font)}
.plan-label{font-size:4.5px;fill:var(--text-weak);text-anchor:middle;dominant-baseline:central;letter-spacing:.2px;pointer-events:none}
.hatch-line{stroke:var(--plan-line);stroke-width:.6;opacity:.55}
.map-desk{cursor:pointer;outline:none}
.map-desk text{text-anchor:middle;dominant-baseline:central;pointer-events:none;font-weight:600}
.map-desk .desk-body{stroke:var(--plan-line);stroke-width:.3}
.map-desk .desk-label{fill:var(--plan-paper)}
.map-desk .desk-name{fill:var(--plan-text)}
.map-desk .desk-num-sm{fill:var(--text-weak);font-weight:400}
.map-desk .desk-name.sel{font-weight:900}
.map-desk .desk-name.free{fill:var(--text-success);font-weight:700}
.map-desk .desk-shift{fill:var(--text-weak);font-weight:400}
.map-desk .desk-blocked{opacity:.45}
.map-desk .desk-ring{fill:none;stroke:transparent;stroke-width:1.2}
.map-desk:hover .desk-body{filter:brightness(1.12)}
.map-desk:hover .desk-ring{stroke:var(--plan-line);stroke-width:.6}
.map-desk:focus-visible .desk-ring{stroke:var(--border-focus);stroke-width:1.4}
.map-desk.own .desk-body{fill:var(--ssc-orange)}
.map-desk.own .desk-label{fill:var(--plan-own)}
.map-desk.own .desk-name{fill:var(--plan-text)}
.map-desk.own .desk-ring{stroke:var(--ssc-orange);stroke-width:1.2}
.map-desk.pending .desk-ring{stroke:var(--ssc-crimson);stroke-width:1;stroke-dasharray:1.6 1}
.map-desk .desk-oos{fill:var(--plan-oos)}
.map-fixed .desk-body{stroke:var(--plan-line);stroke-width:.3}
.map-fixed .desk-num-fixed{fill:var(--text-weak);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.map-desk .oos-mark{fill:none;stroke:var(--plan-oos-mark);stroke-width:.7}
.map-desk .desk-num.oos{fill:var(--plan-oos-mark)}
.key-swatch.k-oos rect{fill:var(--plan-oos);stroke:var(--plan-oos-mark)}
.desk-pop{position:fixed;z-index:40;width:15.5rem;max-width:calc(100vw - 32px);display:grid;gap:6px;padding:var(--sp-150) var(--sp-200);
  background:var(--bg-paper);color:var(--text);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lift);
  font-size:var(--fs-sm);line-height:1.4;pointer-events:none;opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease}
.desk-pop.show{opacity:1;transform:none}
.desk-pop p{margin:0}
.pop-head{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-100)}
.pop-head strong{font-size:var(--fs-md);color:var(--text-strong)}
.pop-team{display:flex;align-items:center;gap:6px}
.pop-who{list-style:none;margin:0;padding:6px 0 0;border-top:1px solid var(--border);display:grid;gap:3px}
.pop-who li{display:flex;gap:var(--sp-100)}
.pop-shift{min-width:2.6rem;color:var(--text-weak);font-weight:var(--fw-bold)}
.plan-legend{display:grid;gap:var(--sp-100)}
.legend-row{display:flex;flex-wrap:wrap;gap:var(--sp-100) var(--sp-200);font-size:var(--fs-sm)}
.key{display:inline-flex;align-items:center;gap:6px}
.key i,.team-dot{display:inline-block;width:12px;height:12px;border-radius:4px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.team-dot{margin-right:8px;vertical-align:-1px}
.key-swatch{width:22px;height:14px;flex:none}
.key-swatch rect{stroke-width:1;fill:var(--ssc-muted);stroke:var(--plan-line)}
.key-swatch.k-booked rect{fill:var(--plan-paper);stroke:var(--ssc-muted);stroke-width:2}
.key-swatch.k-own rect{fill:var(--plan-own);stroke:var(--ssc-orange);stroke-width:2}
.key-swatch.k-pending rect{fill:var(--plan-paper);stroke:var(--ssc-crimson);stroke-width:1.5;stroke-dasharray:2 1.5}
.key-swatch.k-blocked rect{fill:var(--bg-neutral);stroke-dasharray:1 1}
.key-swatch.k-fixed rect{fill:var(--plan-paper)}
.empty-floor{display:grid;justify-items:center;text-align:center;gap:var(--sp-150);padding:var(--sp-600) var(--sp-300);border-radius:var(--radius-lg)}
.empty-icon{width:72px;height:72px;border-radius:50%;display:grid;place-items:center;background:var(--bg-brand-subtle);color:var(--icon-brand)}
.empty-icon .icon{font-size:38px}

/* ================= DIALOG / SNACKBAR ================= */
.hx-dialog{border:0;padding:0;border-radius:var(--radius-md);background:var(--bg-paper);color:var(--text);box-shadow:var(--shadow-pop);width:min(32rem,calc(100vw - 32px));max-height:calc(100vh - 32px)}
.hx-dialog::backdrop{background:rgba(35,22,8,.55)}
.dlg{display:grid}
.dlg-head{display:flex;justify-content:space-between;align-items:start;gap:var(--sp-200);padding:var(--sp-300) var(--sp-200) var(--sp-100) var(--sp-300)}
.dlg-head .muted{margin-top:var(--sp-50)}
.dlg-body{display:grid;gap:var(--sp-150);padding:var(--sp-100) var(--sp-300) var(--sp-300);line-height:1.5}
.dlg-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-100);padding:var(--sp-200) var(--sp-300);border-top:1px solid var(--border)}
.dlg-status{display:flex;align-items:center;gap:var(--sp-100);flex-wrap:wrap}
.swap{display:grid;gap:var(--sp-50)}
.swap textarea,.comment-field textarea{width:100%;resize:vertical;font:var(--fs-sm)/1.5 var(--font);color:var(--text);background:var(--bg-input);border:1px solid var(--border-input);border-radius:14px;padding:var(--sp-150) var(--sp-200)}
.comment-field{display:grid;gap:var(--sp-50)}
.comment-field textarea:focus{border-color:var(--border-focus);box-shadow:0 0 0 2px var(--bg-brand-subtle);outline:none}

.snackbar{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);z-index:1400;display:flex;align-items:center;gap:var(--sp-100);max-width:min(36rem,calc(100vw - 32px));padding:var(--sp-150) var(--sp-300);border-radius:var(--radius-pill);background:var(--snack-bg);color:var(--snack-text);box-shadow:var(--shadow-pop);font-size:var(--fs-sm);line-height:1.4;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.snackbar.show{opacity:1;transform:translate(-50%,0)}
.snackbar .icon{font-size:20px;color:#5FBF75}
.snackbar.error .icon{color:#E0726C}
.snackbar.warning .icon{color:var(--ssc-yellow)}

/* ================= SIGN-IN ================= */
.signin{min-height:100vh;display:grid;align-content:center;justify-items:center;gap:var(--sp-400);padding:var(--sp-600) 16px;background:var(--ssc-hero);position:relative}
.signin-theme{position:absolute;top:var(--sp-200);right:var(--sp-200)}
.signin-hero{display:grid;justify-items:center;gap:var(--sp-150);text-align:center;color:#fff}
.signin-hero img{height:56px;width:auto}
.signin-hero h1{color:#fff;font-size:clamp(2.5rem,6vw,3.75rem)}
.signin-hero .lead{font-size:1.25rem;line-height:1.5;color:rgba(255,255,255,.9);max-width:34rem}
.signin-card{width:min(30rem,100%);display:grid;gap:var(--sp-200);padding:var(--sp-400);border-radius:var(--radius-lg);box-shadow:var(--shadow-pop)}
.signin-body{display:grid;gap:var(--sp-200);justify-items:start}
.accounts{list-style:none;margin:0;padding:0;display:grid;gap:var(--sp-100);width:100%;max-height:55vh;overflow:auto}
.account{appearance:none;display:flex;align-items:center;gap:var(--sp-150);width:100%;padding:var(--sp-100) var(--sp-200) var(--sp-100) var(--sp-100);border:1px solid var(--border);border-radius:var(--radius-pill);background:var(--bg-paper);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:background var(--dur),border-color var(--dur)}
.account:hover{background:var(--bg-brand-subtle);border-color:var(--border-brand)}
.account-text{display:grid;gap:1px;min-width:0}
.account-text strong{font-size:var(--fs-sm);color:var(--text-strong)}
.account-groups{font-size:var(--fs-xs);color:var(--text-weak);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ================= OTHER VIEWS ================= */
.mail-list{display:grid;gap:var(--sp-150)}
.mail{display:grid;gap:var(--sp-50);font-size:var(--fs-sm);line-height:1.5}
.mail-head{display:flex;justify-content:space-between;gap:var(--sp-200);flex-wrap:wrap}
.mail-head strong{color:var(--text-strong)}
.mail-body{white-space:pre-line}
.filters{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:var(--sp-150);align-items:end}
.filters .export{height:46px}
.filters-toggle{display:none;justify-self:start}
.config-grid{display:grid;gap:var(--sp-300);grid-template-columns:repeat(auto-fill,minmax(19rem,1fr))}
.zone-config{display:grid;gap:var(--sp-150);margin:0;min-width:0;border:0}
.manager-pair{display:grid;gap:var(--sp-150);grid-template-columns:1fr 1fr}
.form-row{display:flex;gap:var(--sp-150);align-items:end;flex-wrap:wrap}
.form-row .grow,.btn-group .grow{flex:1 1 12rem}
.color-input{width:64px;height:46px;padding:4px;border:1px solid var(--border-input);border-radius:var(--radius-pill);background:var(--bg-input);cursor:pointer}
.dlg-form{display:grid;gap:var(--sp-150)}
.code-field{width:5.5rem}
.member-list{display:grid;max-height:16rem;overflow:auto;padding:var(--sp-50) var(--sp-100);border:1px solid var(--border);border-radius:14px}
.member-list .check[hidden]{display:none}
.add-note{display:flex;align-items:center;gap:var(--sp-100);margin:0}
.config-plan.placing svg{cursor:crosshair}
.config-plan .map-desk{cursor:grab;touch-action:none}
.config-plan .map-desk.dragging{cursor:grabbing;opacity:.85}
.steps{margin:0;padding-left:1.25rem;display:grid;gap:var(--sp-100);line-height:1.6}
.steps strong{color:var(--text-strong)}
.legend-list{margin:var(--sp-50) 0;padding-left:1.1rem;display:grid;gap:2px}
.shift-strip{display:flex;flex-wrap:wrap;gap:var(--sp-150)}
.shift-pill{display:grid;gap:2px;padding:var(--sp-100) var(--sp-200);border-radius:14px;background:var(--surface-weak);border:1px solid var(--border);min-width:9rem}
.shift-pill span{color:var(--text-weak);font-size:var(--fs-sm)}
table.hx tr.group-row th{position:static;height:38px;background:var(--surface-weak);color:var(--text-strong);font-size:var(--fs-sm)}
.rules{display:grid;grid-template-columns:minmax(10rem,16rem) 1fr;gap:var(--sp-150) var(--sp-300);margin:0;line-height:1.5}
.rules dt{font-weight:var(--fw-bold);color:var(--text-strong)}
.rules dd{margin:0;color:var(--text-weak)}
.faq{display:grid;gap:var(--sp-100)}
.faq-item{padding:0;border-radius:18px}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-200);padding:var(--sp-200) var(--sp-300);cursor:pointer;font-weight:var(--fw-bold);color:var(--text-strong);list-style:none;border-radius:18px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .icon{color:var(--icon-brand);transition:transform .2s}
.faq-item[open] summary .icon{transform:rotate(180deg)}
.faq-item summary:hover{background:var(--bg-subtle-hover)}
.faq-item p{padding:0 var(--sp-300) var(--sp-200);color:var(--text-weak);line-height:1.6}
.faq-search{width:min(100%,20rem)}

/* ================= RESPONSIVE ================= */
/* Top bar: app.js measures it and adds .compact (no icons/name) or .collapsed
   (hamburger menu) when the links don't fit, whatever the screen or role. */
.topnav.compact .nav-list{gap:var(--sp-200)}
.topnav.compact .nav-list a .icon,.topnav.compact .user-name{display:none}
.topnav.collapsed .nav-burger{display:inline-flex}
.topnav.collapsed .nav-panel{display:none;position:fixed;inset:var(--nav-h) 0 0 0;z-index:30;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:var(--sp-300);
  padding:var(--sp-300) 16px;background:linear-gradient(180deg,#3a2614 0%,#5c3d1d 100%);overflow:auto}
.topnav.collapsed.open .nav-panel{display:flex}
.topnav.collapsed .nav-list{flex-direction:column;align-items:stretch;gap:var(--sp-50)}
.topnav.collapsed .nav-list a{padding:var(--sp-150) var(--sp-100);font-size:1.125rem}
.topnav.collapsed .nav-list a .icon{display:inline-block}
.topnav.collapsed .nav-list a::after{left:var(--sp-100);right:auto;width:40px}
.topnav.collapsed .nav-actions{border-left:0;padding-left:0;padding-top:var(--sp-200);border-top:1px solid rgba(255,255,255,.25);justify-content:space-between}
.topnav.collapsed .user-name{display:inline}
@media (max-width:56rem){
  .page-controls{position:static}
}
@media (max-width:40rem){
  :root{--nav-h:64px}
  .nav-brand img{height:40px}
  .nav-product{font-size:1rem}
  .content{padding:var(--sp-200) 16px var(--sp-400)}
  .page-controls{padding:var(--sp-150) 16px}
  .filters-toggle{display:inline-flex}
  .filters:not(.open){display:none}
  .hero-band{padding:var(--sp-200) var(--sp-300)}
  .stat{border-left:0;padding-inline:0}
  .rules{grid-template-columns:1fr}
  .rules dd{margin-bottom:var(--sp-100)}
  .segment:not(.layout-toggle){width:100%} .segment:not(.layout-toggle) button{flex:1;padding:5px 6px}
  .seg-hours{font-size:11px}
  .day-tabs{width:100%;gap:4px} .day-tab{flex:1;min-width:0;padding:6px 4px}
  .day-top{flex-direction:column;gap:2px}
  .desk-grid{grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr));gap:var(--sp-100)}
  .card{padding:var(--sp-200)}
  .signin-card{padding:var(--sp-300)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}