/*
 * Flavor – Standalone Admin Panel shell (2.0)
 * All rules are scoped under #flavor-app / .flv-* so they never touch wp-admin or the
 * legacy feature pages that are embedded (unchanged) inside .flv-content.
 */

/* ---------- full takeover (only on our screen) ---------- */
body.flavor-app-active #adminmenumain,
body.flavor-app-active #adminmenuback,
body.flavor-app-active #adminmenuwrap,
body.flavor-app-active #wpadminbar,
body.flavor-app-active #wpfooter,
body.flavor-app-active #screen-meta,
body.flavor-app-active #screen-meta-links { display: none !important; }

body.flavor-app-active #wpcontent { margin-left: 0 !important; padding-left: 0 !important; }
body.flavor-app-active #wpbody-content { padding-bottom: 0 !important; }
body.flavor-app-active #wpbody-content > .wrap { margin: 0; }
html.wp-toolbar.flavor-app-active,
body.flavor-app-active.wp-toolbar { padding-top: 0 !important; }
body.flavor-app-active #wpcontent { padding-top: 0; }

/* ---------- design tokens (scoped) ---------- */
#flavor-app{
  --bg:#FAF7F2; --surface:#FFFFFF; --surface-2:#F3EEE7; --inset:#F6F1EA;
  --line:#EAE3D9; --line-strong:#DDD3C6;
  --ink:#2A2320; --ink-2:#6F655C; --muted:#9C9086;
  --accent:#B44E27; --accent-ink:#8F3D1E; --accent-soft:rgba(180,78,39,.10);
  --good:#5C6A33; --good-bg:rgba(92,106,51,.13);
  --warn:#B07A1E; --warn-bg:rgba(176,122,30,.15);
  --bad:#B23B3B; --bad-bg:rgba(178,59,59,.12);
  --radius:12px;
  --shadow:0 1px 2px rgba(42,35,32,.05),0 10px 26px rgba(42,35,32,.06);
  --font-head:'Schibsted Grotesk',system-ui,sans-serif;
  --font-body:'Hanken Grotesk',system-ui,-apple-system,sans-serif;
  --font-mono:ui-monospace,'Space Mono',monospace;
}
#flavor-app[data-theme="dark"]{
  --bg:#17130F; --surface:#221C18; --surface-2:#2C2621; --inset:#1E1815;
  --line:#372F29; --line-strong:#473C34;
  --ink:#F3ECE3; --ink-2:#C3B7AA; --muted:#8E8175;
  --accent:#D6693F; --accent-ink:#E9906B; --accent-soft:rgba(214,105,63,.16);
  --good:#A6B764; --good-bg:rgba(166,183,100,.15);
  --warn:#D9A441; --warn-bg:rgba(217,164,65,.16);
  --bad:#E06A6A; --bad-bg:rgba(224,106,106,.15);
  --shadow:0 1px 2px rgba(0,0,0,.3),0 12px 34px rgba(0,0,0,.38);
}

/* ---------- shell ---------- */
#flavor-app.flv-app{
  display:grid; grid-template-columns:98px 216px 1fr;
  min-height:100vh; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
#flavor-app.flv-app--no-subnav{ grid-template-columns:98px 1fr; }
#flavor-app *{ box-sizing:border-box; }
#flavor-app h1,#flavor-app h3{ font-family:var(--font-head); font-weight:600; margin:0; letter-spacing:-.01em; }
#flavor-app a{ color:inherit; }

/* rail */
#flavor-app .flv-rail{ background:var(--surface); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; padding:16px 8px; gap:3px; position:sticky; top:0; height:100vh; }
#flavor-app .flv-rail__logo{ width:44px; height:44px; display:grid; place-items:center; margin-bottom:10px; }
#flavor-app .flv-rail__logo .flv-mark{ width:38px; height:38px; object-fit:contain; display:block; }
/* Mark swaps with the panel theme: black F on the light rail, white F on the dark rail. */
#flavor-app .flv-rail__logo .flv-mark--ondark{ display:none; }
@media (prefers-color-scheme:dark){
  #flavor-app:not([data-theme]) .flv-rail__logo .flv-mark--onlight{ display:none; }
  #flavor-app:not([data-theme]) .flv-rail__logo .flv-mark--ondark{ display:block; }
}
#flavor-app[data-theme="dark"] .flv-rail__logo .flv-mark--onlight{ display:none; }
#flavor-app[data-theme="dark"] .flv-rail__logo .flv-mark--ondark{ display:block; }
#flavor-app[data-theme="light"] .flv-rail__logo .flv-mark--onlight{ display:block; }
#flavor-app[data-theme="light"] .flv-rail__logo .flv-mark--ondark{ display:none; }
#flavor-app .flv-nav{ display:flex; flex-direction:column; gap:3px; width:100%; }
#flavor-app .flv-nav__item{ display:flex; flex-direction:column; align-items:center; gap:5px; padding:9px 4px; border-radius:12px; color:var(--ink-2); text-decoration:none; transition:background .15s,color .15s; }
#flavor-app .flv-nav__item svg{ width:21px; height:21px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#flavor-app .flv-nav__item span{ font-size:10.5px; font-weight:500; text-align:center; line-height:1.15; }
#flavor-app .flv-nav__item:hover{ background:var(--surface-2); color:var(--ink); }
#flavor-app .flv-nav__item.is-active{ background:var(--accent-soft); color:var(--accent); }
#flavor-app .flv-rail__spacer{ flex:1; }
#flavor-app .flv-rail__exit{ margin-top:6px; padding-top:12px; border-top:1px solid var(--line); border-radius:0 0 12px 12px; }
#flavor-app .flv-rail__mini{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--muted); border:0; background:none; text-decoration:none; cursor:pointer; }
#flavor-app .flv-rail__mini:hover{ background:var(--surface-2); color:var(--ink); }
#flavor-app .flv-rail__mini svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }

/* subnav */
#flavor-app .flv-subnav{ background:var(--surface); border-right:1px solid var(--line); position:sticky; top:0; height:100vh; overflow-y:auto; padding:20px 12px; }
#flavor-app .flv-subnav__title{ font-family:var(--font-head); font-weight:600; font-size:17px; padding:2px 10px 14px; }
#flavor-app .flv-subnav__link{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:9px; font-size:13.5px; color:var(--ink-2); text-decoration:none; margin-bottom:1px; }
#flavor-app .flv-subnav__link:hover{ background:var(--surface-2); color:var(--ink); }
#flavor-app .flv-subnav__link.is-active{ background:var(--accent-soft); color:var(--accent); font-weight:500; }
#flavor-app .flv-subnav__link svg{ width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; flex:none; }
#flavor-app .flv-pro{ margin-left:auto; font-family:var(--font-mono); font-size:8.5px; font-weight:700; letter-spacing:.05em; background:var(--accent-soft); color:var(--accent-ink); padding:2px 5px; border-radius:5px; }

/* main + topbar */
#flavor-app .flv-main{ min-width:0; display:flex; flex-direction:column; }
#flavor-app .flv-topbar{ position:sticky; top:0; z-index:5; background:var(--bg); border-bottom:1px solid var(--line); padding:15px 30px; display:flex; align-items:center; gap:16px; }
#flavor-app .flv-topbar__title h1{ font-size:22px; }
#flavor-app .flv-topbar__title p{ margin:2px 0 0; color:var(--ink-2); font-size:13px; }
#flavor-app .flv-topbar__actions{ margin-left:auto; display:flex; align-items:center; gap:6px; }
#flavor-app .flv-iconbtn{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; color:var(--ink-2); border:1px solid transparent; background:none; text-decoration:none; }
#flavor-app .flv-iconbtn:hover{ background:var(--surface); border-color:var(--line); color:var(--ink); }
#flavor-app .flv-iconbtn svg{ width:19px; height:19px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#flavor-app .flv-content{ padding:26px 30px 60px; max-width:1180px; width:100%; }

/* primitives */
#flavor-app .flv-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); margin-bottom:20px; }
#flavor-app .flv-card__head{ display:flex; align-items:center; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line); }
#flavor-app .flv-card__head h3{ font-size:15.5px; }
#flavor-app .flv-card__link{ margin-left:auto; color:var(--accent); font-size:13px; font-weight:500; text-decoration:none; }
#flavor-app .flv-card__body{ padding:16px 18px; }
#flavor-app .flv-muted{ color:var(--muted); }
#flavor-app .flv-note{ color:var(--muted); font-size:12.5px; margin:4px 2px 0; }

/* dish form */
#flavor-app .flv-field{ margin-bottom:16px; }
#flavor-app .flv-field:last-child{ margin-bottom:0; }
#flavor-app .flv-field > label{ display:block; font-size:12.5px; font-weight:500; color:var(--ink-2); margin-bottom:6px; }
#flavor-app .flv-dishform .flv-card{ max-width:820px; }

/* confirm modal */
#flavor-app .flv-modal-backdrop{ position:fixed; inset:0; background:rgba(20,15,12,.45); display:flex; align-items:center; justify-content:center; padding:20px; z-index:100000; opacity:0; visibility:hidden; transition:opacity .15s,visibility .15s; }
#flavor-app .flv-modal-backdrop.open{ opacity:1; visibility:visible; }
#flavor-app .flv-modal{ background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.28); width:100%; max-width:400px; padding:22px; }
#flavor-app .flv-modal__msg{ font-size:15px; line-height:1.5; color:var(--ink); margin-bottom:20px; white-space:pre-line; }
#flavor-app .flv-modal__actions{ display:flex; justify-content:flex-end; gap:10px; }
#flavor-app .flv-modal__ok{ margin-left:0; background:var(--bad); border-color:var(--bad); color:#fff; }
#flavor-app .flv-modal__ok:hover{ background:color-mix(in srgb,var(--bad) 85%,#000); border-color:color-mix(in srgb,var(--bad) 85%,#000); color:#fff; }

#flavor-app .flv-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:22px; }
#flavor-app .flv-kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow); }
#flavor-app .flv-kpi__label{ font-size:13px; color:var(--ink-2); }
#flavor-app .flv-kpi__num{ font-family:var(--font-head); font-weight:700; font-size:30px; line-height:1; letter-spacing:-.02em; margin:12px 0 10px; }
#flavor-app .flv-kpi__link{ font-size:12.5px; color:var(--accent); text-decoration:none; font-weight:500; }

#flavor-app .flv-list{ display:flex; flex-direction:column; }
#flavor-app .flv-list__row{ display:flex; align-items:center; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
#flavor-app .flv-list__row:last-child{ border-bottom:0; }
#flavor-app .flv-list__name{ font-weight:500; }
#flavor-app .flv-list__edit{ margin-left:auto; color:var(--accent); font-size:13px; text-decoration:none; }

/* review request (dashboard) */
#flavor-app .flv-review{ border-color:color-mix(in srgb,var(--accent) 26%,var(--line)); background:linear-gradient(var(--accent-soft),var(--accent-soft)),var(--surface); }
#flavor-app .flv-review__body{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
#flavor-app .flv-review__icon{ flex:none; width:42px; height:42px; border-radius:11px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); color:var(--accent); }
#flavor-app .flv-review__icon svg{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#flavor-app .flv-review__text{ flex:1 1 320px; min-width:0; }
#flavor-app .flv-review__text h3{ font-size:15.5px; margin:0 0 3px; }
#flavor-app .flv-review__text p{ margin:0; color:var(--ink-2); font-size:13.5px; line-height:1.5; }
#flavor-app .flv-review__actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#flavor-app .flv-review__dismiss{ color:var(--muted); font-size:12.5px; text-decoration:none; margin-left:6px; }
#flavor-app .flv-review__dismiss:hover{ color:var(--ink-2); text-decoration:underline; }

#flavor-app .flv-toolbar{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
#flavor-app .flv-btn{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); background:var(--surface); color:var(--ink); padding:8px 14px; border-radius:10px; font-size:13.5px; font-weight:500; text-decoration:none; cursor:pointer; }
#flavor-app .flv-btn:hover{ background:var(--surface-2); }
#flavor-app .flv-btn svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#flavor-app .flv-btn--primary{ background:var(--accent); border-color:var(--accent); color:#fff; }
#flavor-app .flv-btn--primary:hover{ background:var(--accent-ink); }
#flavor-app .flv-btn--small{ padding:5px 11px; font-size:12.5px; }
#flavor-app .flv-btn--danger{ color:var(--bad); border-color:color-mix(in srgb,var(--bad) 40%,var(--line-strong)); margin-left:6px; }
#flavor-app .flv-btn--danger:hover{ background:var(--bad-bg); border-color:var(--bad); }

/* dishes list — filter/sort bar + pager */
#flavor-app .flv-filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 18px; }
#flavor-app .flv-content .flv-filters input[type="search"],
#flavor-app .flv-content .flv-filters select,
#flavor-app .flv-filters .flv-btn{ height:38px; min-height:38px; box-sizing:border-box; font-size:13.5px; line-height:1.2; white-space:nowrap; }
#flavor-app .flv-content .flv-filters input[type="search"]{ min-width:190px; background-color:var(--surface); border:1px solid var(--line-strong); border-radius:10px; color:var(--ink); padding:0 12px; }
#flavor-app .flv-content .flv-filters input[type="search"]:focus{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); outline:none; }
#flavor-app .flv-content .flv-filters select{ background-color:var(--surface); border:1px solid var(--line-strong); border-radius:10px; color:var(--ink); padding:0 30px 0 10px; }
#flavor-app .flv-pager{ display:flex; align-items:center; gap:14px; margin-top:16px; }
#flavor-app .flv-pager__info{ font-size:12.5px; color:var(--muted); }

/* locations — inline rename popover (JS-free <details>) */
#flavor-app .flv-loc-rename{ position:relative; display:inline-block; }
#flavor-app .flv-loc-rename > summary{ list-style:none; cursor:pointer; }
#flavor-app .flv-loc-rename > summary::-webkit-details-marker{ display:none; }
#flavor-app .flv-loc-rename__form{ position:absolute; top:100%; right:0; z-index:20; margin-top:6px; display:flex; gap:6px; align-items:center; padding:10px; background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.16); }
#flavor-app .flv-loc-rename__form input[type="text"]{ min-width:180px; background:var(--inset); border:1px solid var(--line-strong); border-radius:9px; color:var(--ink); padding:7px 10px; min-height:36px; }
#flavor-app .flv-loc-rename__form input[type="text"]:focus{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); outline:none; }

/* dishes list — location filter popover (JS-free <details>, multi-select) */
#flavor-app .flv-locfilter{ position:relative; display:inline-block; }
#flavor-app .flv-locfilter > summary{ list-style:none; cursor:pointer; }
#flavor-app .flv-locfilter > summary::-webkit-details-marker{ display:none; }
#flavor-app .flv-locfilter > summary svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.7; }
#flavor-app .flv-locfilter[open] > summary{ border-color:var(--accent); }
#flavor-app .flv-locfilter__panel,
#flavor-app .flv-bulkmenu__panel{ position:absolute; top:100%; left:0; z-index:20; margin-top:6px; min-width:230px; max-height:300px; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; gap:8px; padding:12px 14px; background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.16); }
#flavor-app .flv-locfilter__panel label,
#flavor-app .flv-bulkmenu__panel label{ display:flex; align-items:center; gap:9px; font-size:13px; line-height:1.35; cursor:pointer; }
#flavor-app .flv-locfilter__sep,
#flavor-app .flv-bulkmenu__sep{ height:1px; background:var(--line); margin:1px 0; }
#flavor-app .flv-locfilter__panel input[type="radio"],
#flavor-app .flv-bulkmenu__panel input[type="radio"]{ width:15px; height:15px; margin:0; flex:none; }
#flavor-app .flv-locfilter__hint,
#flavor-app .flv-bulkmenu__hint{ font-size:11.5px; color:var(--muted); }

/* dishes list -- "with selected" bar + its popover */
#flavor-app .flv-bulkbar{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
#flavor-app .flv-bulkbar__hint{ font-size:12px; color:var(--muted); }
#flavor-app .flv-bulkmenu{ position:relative; display:inline-block; }
#flavor-app .flv-bulkmenu > summary{ list-style:none; cursor:pointer; height:38px; min-height:38px; box-sizing:border-box; white-space:nowrap; }
#flavor-app .flv-bulkmenu > summary::-webkit-details-marker{ display:none; }
#flavor-app .flv-bulkmenu[open] > summary{ border-color:var(--accent); }
#flavor-app .flv-bulkmenu__panel{ min-width:400px; max-height:480px; }
#flavor-app .flv-bulkmenu__row{ display:flex; flex-wrap:wrap; gap:8px; }
#flavor-app .flv-content .flv-bulkmenu__panel select{ width:100%; }
#flavor-app .flv-bulkmenu__panel .flv-btn{ align-self:flex-start; margin-top:2px; }
/* the pick column only ever holds a checkbox */
#flavor-app .flv-table__pick{ width:34px; padding-right:0; }
#flavor-app .flv-table{ width:100%; border-collapse:collapse; font-size:13.5px; }
#flavor-app .flv-table th{ text-align:left; font-family:var(--font-mono); font-weight:400; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); padding:0 12px 10px; border-bottom:1px solid var(--line); }
#flavor-app .flv-table td{ padding:12px; border-bottom:1px solid var(--line); vertical-align:middle; }
#flavor-app .flv-table tr:last-child td{ border-bottom:0; }
#flavor-app .flv-table__end{ text-align:right; }

#flavor-app .flv-pill{ display:inline-flex; align-items:center; gap:5px; font-family:var(--font-mono); font-size:11px; padding:3px 9px; border-radius:20px; }
#flavor-app .flv-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
#flavor-app .flv-pill--good{ background:var(--good-bg); color:var(--good); }
#flavor-app .flv-pill--warn{ background:var(--warn-bg); color:var(--warn); }

#flavor-app .flv-rowline{ display:flex; align-items:center; gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
#flavor-app .flv-rowline:last-child{ border-bottom:0; }
#flavor-app .flv-rowline:first-child{ padding-top:0; }
#flavor-app .flv-rowline__t{ font-weight:500; }
#flavor-app .flv-rowline__d{ font-size:12.5px; color:var(--muted); }
#flavor-app .flv-rowline > .flv-btn,
#flavor-app .flv-rowline > .flv-pill{ margin-left:auto; }

/* ---------- skin for embedded legacy wp-admin pages (no PHP changes) ---------- */
#flavor-app .flv-content > .wrap,
#flavor-app .flv-content .wrap{ margin:0; max-width:none; }
/* the topbar already shows the title — hide the embedded page's own H1 */
#flavor-app .flv-content .wrap > h1{ display:none; }
#flavor-app .flv-content h2{ font-family:var(--font-head); font-size:18px; }
#flavor-app .flv-content h3{ font-family:var(--font-head); }

/* buttons */
#flavor-app .flv-content .button,
#flavor-app .flv-content .button-secondary,
#flavor-app .flv-content .page-title-action,
#flavor-app .flavor-seat-scrim .button,
#flavor-app .flavor-seat-scrim .button-secondary{
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  border-radius:10px; padding:6px 13px; font-size:13px; font-weight:500; line-height:1.7;
  box-shadow:none; text-decoration:none; height:auto; vertical-align:middle;
}
#flavor-app .flv-content .button:hover,
#flavor-app .flv-content .button-secondary:hover,
#flavor-app .flv-content .page-title-action:hover,
#flavor-app .flavor-seat-scrim .button:hover,
#flavor-app .flavor-seat-scrim .button-secondary:hover{ background:var(--surface-2); border-color:var(--line-strong); color:var(--ink); }
#flavor-app .flv-content .button-primary,
#flavor-app .flavor-seat-scrim .button-primary{
  border:1px solid var(--accent); background:var(--accent); color:#fff;
  border-radius:10px; padding:6px 14px; font-size:13px; font-weight:500; box-shadow:none; text-shadow:none;
}
#flavor-app .flv-content .button-primary:hover,
#flavor-app .flavor-seat-scrim .button-primary:hover{ background:var(--accent-ink); border-color:var(--accent-ink); color:#fff; }

/* form fields (colour-picker inputs left native) */
#flavor-app .flv-content input[type="text"]:not(.wp-color-picker),
#flavor-app .flv-content input[type="search"],
#flavor-app .flv-content input[type="email"],
#flavor-app .flv-content input[type="url"],
#flavor-app .flv-content input[type="number"],
#flavor-app .flv-content input[type="password"],
#flavor-app .flv-content select,
#flavor-app .flv-content textarea{
  background:var(--inset); border:1px solid var(--line-strong); border-radius:9px;
  color:var(--ink); padding:7px 10px; box-shadow:none; min-height:36px; max-width:100%;
  /* wp-admin sets line-height:38px on a 36px-tall select: the line box does not fit
     the content box, so the text sits low and is clipped through the middle. */
  height:auto; line-height:1.4;
}
#flavor-app .flv-content select{
  /* Our background shorthand above wipes the arrow wp-admin draws, which left every
     select in the panel looking like a text field. Grey reads on both themes. */
  -webkit-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 8px center; background-size:16px 16px;
  padding-right:30px;
}
/* Radios: wp-admin fills the whole control blue when checked, so the dot is lost in
   it. Ring plus dot in the Flavor accent -- accent-color does nothing here, the
   control is drawn with appearance:none. */
#flavor-app .flv-content input[type="radio"]{ background-color:var(--surface); border-color:var(--line-strong); }
#flavor-app .flv-content input[type="radio"]:checked{ background-color:var(--surface); border-color:var(--accent); }
#flavor-app .flv-content input[type="radio"]:checked::before{ background-color:var(--accent); }
#flavor-app .flv-content input[type="text"]:not(.wp-color-picker):focus,
#flavor-app .flv-content input[type="search"]:focus,
#flavor-app .flv-content input[type="email"]:focus,
#flavor-app .flv-content input[type="url"]:focus,
#flavor-app .flv-content input[type="number"]:focus,
#flavor-app .flv-content select:focus,
#flavor-app .flv-content textarea:focus{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); outline:none; background:var(--surface); }

/* settings form table */
#flavor-app .flv-content .form-table th{ color:var(--ink-2); font-weight:500; }
#flavor-app .flv-content .form-table td{ color:var(--ink); }

/* WP admin cards */
#flavor-app .flv-content .card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); max-width:none; margin-top:0; padding:16px 18px;
}

/* list tables */
#flavor-app .flv-content .wp-list-table,
#flavor-app .flv-content .widefat{
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface);
}
#flavor-app .flv-content .wp-list-table thead th,
#flavor-app .flv-content .widefat thead th{ background:var(--surface-2); color:var(--ink-2); }

/* notices */
#flavor-app .flv-content .notice{ border-radius:10px; box-shadow:none; background:var(--surface); }

/* nav tabs + subsubsub (reservations module) */
#flavor-app .flv-content .nav-tab-wrapper{ border-bottom:1px solid var(--line); margin-bottom:18px; }
#flavor-app .flv-content .nav-tab{ background:transparent; border:0; border-bottom:2px solid transparent; color:var(--ink-2); margin:0 6px -1px 0; padding:9px 4px; font-size:14px; font-weight:500; border-radius:0; }
#flavor-app .flv-content .nav-tab:hover{ background:none; color:var(--ink); }
#flavor-app .flv-content .nav-tab-active,
#flavor-app .flv-content .nav-tab-active:hover,
#flavor-app .flv-content .nav-tab-active:focus{ background:none; color:var(--accent); border-bottom-color:var(--accent); }
#flavor-app .flv-content .subsubsub{ color:var(--muted); }
#flavor-app .flv-content .subsubsub a{ color:var(--ink-2); text-decoration:none; }
#flavor-app .flv-content .subsubsub a.current,
#flavor-app .flv-content .subsubsub a:hover{ color:var(--accent); }

/* reservations timeline (Gantt) */
#flavor-app .flv-segmented{ display:inline-flex; background:var(--surface-2); border:1px solid var(--line); border-radius:10px; padding:3px; gap:2px; }
#flavor-app .flv-seg{ padding:6px 14px; border-radius:8px; font-size:13px; color:var(--ink-2); text-decoration:none; }
#flavor-app .flv-seg.is-on{ background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.08); font-weight:500; }
#flavor-app .flv-tl-bar{ display:flex; align-items:center; gap:16px; margin-bottom:16px; flex-wrap:wrap; }
#flavor-app .flv-tl-day{ display:inline-flex; align-items:center; gap:6px; }
#flavor-app .flv-tl-day input[type="date"]{ min-height:34px; margin:0; }
#flavor-app .flv-tl-day .flv-btn--small{ padding:4px 10px; font-size:15px; line-height:1; }
#flavor-app .flv-tl-locs{ display:inline-flex; gap:5px; flex-wrap:wrap; }
#flavor-app .flv-tl-loc{ padding:6px 11px; border:1px solid var(--line-strong); border-radius:20px; font-size:12.5px; color:var(--ink-2); text-decoration:none; }
#flavor-app .flv-tl-loc.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); }
#flavor-app .flv-tl{ border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow); }
#flavor-app .flv-tl__head,#flavor-app .flv-tl__row{ display:grid; grid-template-columns:130px 1fr; }
#flavor-app .flv-tl__head{ background:var(--surface-2); border-bottom:1px solid var(--line); }
#flavor-app .flv-tl__corner{ padding:11px 14px; border-right:1px solid var(--line); font-family:var(--font-mono); font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
#flavor-app .flv-tl__axis{ display:grid; }
#flavor-app .flv-tl__tick{ border-left:1px solid var(--line); padding:11px 0 9px 7px; font-family:var(--font-mono); font-size:10.5px; color:var(--muted); }
#flavor-app .flv-tl__row{ border-bottom:1px solid var(--line); }
#flavor-app .flv-tl__row:last-child{ border-bottom:0; }
#flavor-app .flv-tl__tbl{ display:flex; align-items:center; gap:8px; padding:0 14px; border-right:1px solid var(--line); font-size:13px; }
#flavor-app .flv-tl__tbl .id{ font-family:var(--font-mono); font-weight:700; }
#flavor-app .flv-tl__tbl .seats{ margin-left:auto; font-size:11px; color:var(--muted); }
#flavor-app .flv-tl__lane{ position:relative; height:46px; }
#flavor-app .flv-tl__bar{ position:absolute; top:9px; height:28px; border-radius:7px; display:flex; align-items:center; padding:0 9px; font-size:11.5px; font-weight:500; color:var(--ink); white-space:nowrap; overflow:hidden; background:var(--good-bg); border-left:3px solid var(--good); box-shadow:var(--shadow); }
#flavor-app .flv-tl__bar.arrived{ background:var(--accent-soft); border-color:var(--accent); }
/* The guest has gone — the bar ends where they left, greyed out and no longer movable. */
#flavor-app .flv-tl__bar.left{ background:var(--surface-2); border-color:var(--line-strong); color:var(--muted); box-shadow:none; }
/* Movable bars: click opens the move dialog, drag onto another row. */
#flavor-app .flv-tl__bar[data-seat-res]{ cursor:grab; }
#flavor-app .flv-tl__bar[data-seat-res]:hover,
#flavor-app .flv-tl__bar[data-seat-res]:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; z-index:2; }
#flavor-app .flv-tl__bar.is-dragging{ opacity:.45; }
#flavor-app .flv-tl__lane.is-drop{ background:var(--accent-soft); border-radius:8px; }

/* Reservation Settings — per-location switcher (Flavor pills, replaces the WP .subsubsub) */
#flavor-app .flavor-loc-pills{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin:2px 0 18px; }
#flavor-app .flavor-loc-pills__label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-right:4px; }
#flavor-app .flavor-loc-pill{ padding:6px 13px; border:1px solid var(--line-strong); border-radius:20px; font-size:12.5px; font-weight:500; color:var(--ink-2); text-decoration:none; background:var(--surface); cursor:pointer; font-family:inherit; line-height:normal; }
#flavor-app .flavor-loc-pill:hover{ border-color:var(--accent); color:var(--accent); }
#flavor-app .flavor-loc-pill.is-on{ background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink); }
#flavor-app .flavor-avail__locs{ margin:0; }

/* Reservation Overview board — shared action bar (+Add / +Walk-in) + view switch */
#flavor-app .flv-ops-bar{ display:flex; align-items:center; gap:14px 28px; flex-wrap:wrap; margin:0 0 18px; }
#flavor-app .flv-ops-bar__actions{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
#flavor-app .flv-ops-bar .flv-segmented{ margin-left:auto; }

/* Reservation Tasks — subnav badge, section counts, inbox rows */
#flavor-app .flv-subnav__badge{ margin-left:auto; min-width:18px; height:18px; padding:0 6px; border-radius:9px; background:var(--accent); color:#fff; font-family:var(--font-mono); font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
#flavor-app .flv-count{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-soft); padding:1px 8px; border-radius:10px; margin-left:6px; }
#flavor-app .flv-task{ display:flex; align-items:center; gap:14px; padding:12px 0; border-bottom:1px solid var(--line); }
#flavor-app .flv-task:last-child{ border-bottom:0; }
#flavor-app .flv-task__when{ font-family:var(--font-mono); font-weight:700; font-size:13px; min-width:118px; color:var(--ink); }
#flavor-app .flv-task__who{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
#flavor-app .flv-task__meta{ color:var(--muted); font-size:12.5px; }
#flavor-app .flv-task__actions{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
#flavor-app .flv-seat-filters{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 16px; }

/* Pro upsell — self-sufficient here in case the legacy admin CSS is not loaded */
#flavor-app .flv-content .flavor-pro-locked{ opacity:.45; pointer-events:none; }
#flavor-app .flv-content .flavor-pro-notice{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:var(--accent-soft); border:1px solid var(--accent); color:var(--accent-ink);
  border-radius:10px; padding:12px 14px; margin:0 0 16px;
}

@media (max-width:1080px){
  #flavor-app.flv-app{ grid-template-columns:92px 200px 1fr; }
  #flavor-app.flv-app--no-subnav{ grid-template-columns:92px 1fr; }
  #flavor-app .flv-kpis{ grid-template-columns:1fr 1fr; }
}
@media (max-width:782px){
  #flavor-app.flv-app{ grid-template-columns:60px 1fr; }
  #flavor-app .flv-subnav{ display:none; }
  #flavor-app .flv-nav__item span{ display:none; }
  #flavor-app .flv-content{ padding:20px 14px 50px; }
}

/* Setup drawer (Get Started checklist) */
#flavor-app .flv-iconbtn.has-dot{ position:relative; }
#flavor-app .flv-iconbtn.has-dot::after{ content:""; position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--accent); border:1.5px solid var(--surface); }
#flavor-app .flv-drawer-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.28); z-index:99998; }
#flavor-app .flv-drawer{ position:fixed; top:0; right:0; height:100vh; width:384px; max-width:92vw; background:var(--surface); border-left:1px solid var(--line); box-shadow:-8px 0 30px rgba(0,0,0,.14); z-index:99999; transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column; overflow-y:auto; }
#flavor-app .flv-drawer.is-open{ transform:translateX(0); }
#flavor-app .flv-drawer__head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 12px; }
#flavor-app .flv-drawer__head h2{ margin:0; font-size:17px; color:var(--ink); }
#flavor-app .flv-drawer__close{ background:none; border:0; font-size:26px; line-height:1; color:var(--muted); cursor:pointer; padding:0 4px; }
#flavor-app .flv-drawer__close:hover{ color:var(--ink); }
#flavor-app .flv-drawer__progress{ display:flex; align-items:center; gap:10px; padding:0 20px 14px; }
#flavor-app .flv-drawer__bar{ flex:1; height:7px; border-radius:6px; background:var(--surface-2); overflow:hidden; }
#flavor-app .flv-drawer__bar span{ display:block; height:100%; background:var(--accent); border-radius:6px; transition:width .3s ease; }
#flavor-app .flv-drawer__count{ font-family:var(--font-mono); font-size:11px; color:var(--muted); white-space:nowrap; }
#flavor-app .flv-drawer__alldone{ margin:0 20px 8px; padding:10px 12px; border-radius:8px; background:var(--good-bg); color:var(--good); font-size:13px; }
#flavor-app .flv-drawer__steps{ list-style:none; margin:0; padding:6px 20px 8px; }
#flavor-app .flv-drawer__step{ display:flex; gap:12px; padding:14px 0; border-top:1px solid var(--line); }
#flavor-app .flv-drawer__check{ flex:0 0 24px; width:24px; height:24px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; background:var(--surface-2); color:var(--muted); border:1px solid var(--line-strong); }
#flavor-app .flv-drawer__step.is-done .flv-drawer__check{ background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent); }
#flavor-app .flv-drawer__stepbody{ flex:1; min-width:0; }
#flavor-app .flv-drawer__title{ font-size:14px; font-weight:600; color:var(--ink); }
#flavor-app .flv-drawer__step.is-done .flv-drawer__title{ color:var(--muted); text-decoration:line-through; }
#flavor-app .flv-drawer__desc{ font-size:12.5px; color:var(--muted); margin:2px 0 8px; }
#flavor-app .flv-drawer__ctaform{ margin:0; }
#flavor-app .flv-drawer__docs{ margin:auto 20px 20px; padding-top:12px; font-size:13px; color:var(--accent); text-decoration:none; }
#flavor-app .flv-drawer__docs:hover{ text-decoration:underline; }

/* ---------- dark mode: readability of embedded feature surfaces ----------
   The reservation analytics + floor-plan CSS use hard-coded WP-admin greys
   (#1d2327, #50575e, #646970, #787c82…) meant for a light background. On the
   panel's dark surface those headings/labels turn dark-on-dark. Remap them to
   the panel tokens (scoped to dark mode only, so the standalone light wp-admin
   rendering is untouched). */
#flavor-app .flv-topbar__title h1{ color:var(--ink); }
#flavor-app[data-theme="dark"] .flv-content h1,
#flavor-app[data-theme="dark"] .flv-content h2,
#flavor-app[data-theme="dark"] .flv-content h3,
#flavor-app[data-theme="dark"] .flv-content h4,
#flavor-app[data-theme="dark"] .flv-content .flavor-an-h2,
#flavor-app[data-theme="dark"] .flv-content .flavor-fp__panel-title,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__detail h4{ color:var(--ink); }

/* Analytics widget — cards, charts and status bars follow the dark theme. */
#flavor-app[data-theme="dark"] .flv-content .flavor-an-kpi,
#flavor-app[data-theme="dark"] .flv-content .flavor-an-chart{ background:var(--inset); border-color:var(--line); }
#flavor-app[data-theme="dark"] .flv-content .flavor-an-kpi__num,
#flavor-app[data-theme="dark"] .flv-content .flavor-an-status__val{ color:var(--ink); }
#flavor-app[data-theme="dark"] .flv-content .flavor-an-kpi__lab,
#flavor-app[data-theme="dark"] .flv-content .flavor-an-lab,
#flavor-app[data-theme="dark"] .flv-content .flavor-an-barval,
#flavor-app[data-theme="dark"] .flv-content .flavor-an-status__lab{ color:var(--ink-2); }
#flavor-app[data-theme="dark"] .flv-content .flavor-an-status__track{ background:var(--surface-2); }
#flavor-app[data-theme="dark"] .flv-content .flavor-an-bar{ background:var(--accent); }

/* Floor-plan editor + day-view chrome (the drawn stage stays light like paper). */
#flavor-app[data-theme="dark"] .flv-content .flavor-fp__toolbar,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__controls{ background:var(--surface); border-color:var(--line); }
#flavor-app[data-theme="dark"] .flv-content .flavor-fp__body,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__body{ border-color:var(--line); }
#flavor-app[data-theme="dark"] .flv-content .flavor-fp__panel,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__side{ background:var(--inset); border-color:var(--line); }
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__chip{ background:var(--surface); border-color:var(--line); }
#flavor-app[data-theme="dark"] .flv-content .flavor-fp__field label,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__ctl,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__time,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__legend,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__chip-name{ color:var(--ink); }
#flavor-app[data-theme="dark"] .flv-content .flavor-fp__status,
#flavor-app[data-theme="dark"] .flv-content .flavor-fp__panel-empty,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__hint,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__empty,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__chip-meta,
#flavor-app[data-theme="dark"] .flv-content .flavor-fpday__detail p{ color:var(--ink-2); }

/* ---------- reservations: shared day + location context ---------- */
#flavor-app{ --info:#3E6DA6; --info-bg:rgba(62,109,166,.12); }
/* The panel follows its own toggle, not the OS — keep --info on the same rule. */
#flavor-app[data-theme="dark"]{ --info:#78A6DA; --info-bg:rgba(120,166,218,.16); }

#flavor-app .flv-ctx{ display:flex; align-items:center; gap:12px 16px; flex-wrap:wrap; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:10px 14px; box-shadow:var(--shadow); margin:0 0 14px; }
#flavor-app .flv-ctx__day{ display:flex; align-items:center; gap:5px; }
#flavor-app .flv-ctx__step{ width:30px; height:30px; border-radius:9px; border:1px solid var(--line-strong); background:var(--surface); display:grid; place-items:center; font-size:15px; color:var(--ink-2); text-decoration:none; }
#flavor-app .flv-ctx__step:hover{ background:var(--surface-2); color:var(--ink); }
#flavor-app .flv-ctx__date{ margin:0; }
#flavor-app .flv-ctx__datelabel{ position:relative; display:block; min-width:164px; text-align:center; cursor:pointer; }
#flavor-app .flv-ctx__dateline{ display:block; font-family:var(--font-head); font-weight:600; font-size:14.5px; color:var(--ink); }
#flavor-app .flv-ctx__datelabel small{ display:block; font-family:var(--font-mono); font-size:10px; color:var(--muted); letter-spacing:.06em; }
#flavor-app .flv-ctx__datelabel input[type="date"]{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; border:0; padding:0; }
#flavor-app .flv-ctx__datelabel:focus-within{ outline:2px solid var(--accent); outline-offset:3px; border-radius:8px; }
#flavor-app .flv-ctx__sep{ width:1px; height:26px; background:var(--line); }
#flavor-app .flv-ctx .flavor-loc-pills{ margin:0; }
#flavor-app .flv-ctx__end{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#flavor-app .flv-ctx__cap{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); background:var(--inset); border:1px solid var(--line); padding:5px 10px; border-radius:8px; }
#flavor-app .flv-ctx__cap b{ color:var(--ink); }
/* peak above capacity: the one number in the bar that is worth flagging */
#flavor-app .flv-ctx__cap.is-over{ color:var(--warn); background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 45%,var(--line)); }
#flavor-app .flv-ctx__cap.is-over b{ color:var(--warn); }

/* ---------- reservations: approval strip (the folded-in Tasks screen) ---------- */
#flavor-app .flv-tasks{ border:1px solid var(--accent); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow); margin:0 0 16px; overflow:hidden; }
#flavor-app .flv-tasks__bar{ display:flex; align-items:center; gap:12px; background:var(--accent-soft); padding:11px 16px; cursor:pointer; list-style:none; }
#flavor-app .flv-tasks__bar::-webkit-details-marker{ display:none; }
#flavor-app .flv-tasks__bar svg{ width:18px; height:18px; flex:none; stroke:var(--accent); fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#flavor-app .flv-tasks__txt{ font-size:13.5px; font-weight:500; color:var(--accent-ink); }
#flavor-app .flv-tasks__bar::after{ content:"\25BE"; margin-left:auto; color:var(--accent); font-size:13px; line-height:1; }
#flavor-app .flv-tasks[open] .flv-tasks__bar::after{ content:"\25B4"; }
#flavor-app .flv-tasks__body{ padding:4px 16px 12px; }
#flavor-app .flv-tasks__group{ padding-top:10px; }
#flavor-app .flv-tasks__group .flv-eyebrow{ display:block; padding:6px 0 2px; }

#flavor-app .flv-eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); }
#flavor-app .flv-num{ font-family:var(--font-mono); font-variant-numeric:tabular-nums; }

/* ---------- reservations: view bar ---------- */
#flavor-app .flv-viewbar{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 14px; }
#flavor-app .flv-viewbar__end{ margin-left:auto; display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

/* ---------- reservations: search, overdue arrivals, approval load ---------- */
#flavor-app .flv-searchbox{ display:flex; align-items:center; gap:6px; margin-left:8px; }
#flavor-app .flv-searchbox input[type=search]{ width:210px; height:28px; font-size:12.5px; padding:0 9px; border:1px solid var(--line-strong); border-radius:8px; background:var(--surface); color:var(--ink); }
#flavor-app .flv-searchbox input[type=search]:focus{ outline:none; border-color:var(--accent); }
@media (max-width:780px){ #flavor-app .flv-searchbox{ margin-left:0; width:100%; } #flavor-app .flv-searchbox input[type=search]{ flex:1; width:auto; } }
#flavor-app .flv-searchsum{ margin:0 0 10px; font-size:12.5px; color:var(--muted); }

/* An arrival nobody has ticked off yet — the list's answer to the timeline's now line. */
#flavor-app .flv-resrow.is-overdue > td:first-child{ box-shadow:inset 3px 0 0 0 var(--warn); }
#flavor-app .flv-pill--overdue{ background:var(--warn-bg); color:var(--warn); }

/* "→ 38/50" beside a pending request: what approving it would do to the room. */
#flavor-app .flv-task__load{ font-family:var(--font-mono); font-size:11.5px; color:var(--ink-2); background:var(--inset); border:1px solid var(--line); padding:3px 8px; border-radius:20px; white-space:nowrap; cursor:help; }
#flavor-app .flv-task__load.is-over{ color:var(--warn); background:var(--warn-bg); border-color:color-mix(in srgb,var(--warn) 45%,var(--line)); }
#flavor-app .flv-tasks__hint{ font-size:12px; margin:2px 0 8px; }
#flavor-app .flv-viewbar .flavor-loc-pills{ margin:0; }
#flavor-app .flv-filterlink{ font-size:12.5px; color:var(--ink-2); text-decoration:none; padding:5px 10px; border-radius:8px; }
#flavor-app .flv-filterlink:hover{ background:var(--surface-2); color:var(--ink); }
#flavor-app .flv-filterlink.is-on{ color:var(--accent); font-weight:500; background:var(--accent-soft); }

/* ---------- reservations: the day list ---------- */
#flavor-app .flv-pill--info{ background:var(--info-bg); color:var(--info); }
#flavor-app .flv-pill--bad{ background:var(--bad-bg); color:var(--bad); }
#flavor-app .flv-pill--mute{ background:var(--surface-2); color:var(--muted); }
#flavor-app .flv-restable td{ vertical-align:middle; }
#flavor-app .flv-resrow{ cursor:pointer; }
#flavor-app .flv-resrow:hover > td{ background:var(--surface-2); }
#flavor-app .flv-resrow:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
#flavor-app .flv-resrow__note{ display:block; font-size:12px; }
#flavor-app .flv-resrow__detail > td{ background:var(--inset); padding:14px 16px; }
#flavor-app .flv-resdetail{ display:flex; gap:34px; flex-wrap:wrap; }
#flavor-app .flv-resdetail__col{ min-width:220px; flex:1; }
#flavor-app .flv-resdetail__col .flv-eyebrow{ display:block; margin-bottom:6px; }
#flavor-app .flv-dline{ display:flex; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); font-size:13px; }
#flavor-app .flv-dline:last-child{ border-bottom:0; }
#flavor-app .flv-dline .k{ color:var(--muted); width:96px; flex:none; font-size:12.5px; }
#flavor-app .flv-dline .v{ min-width:0; word-break:break-word; }
#flavor-app .flv-tblchip{ display:inline-block; font-family:var(--font-mono); font-size:11.5px; background:var(--inset); border:1px solid var(--line); padding:3px 9px; border-radius:7px; color:var(--ink-2); }
#flavor-app .flv-tblchip--free{ color:var(--accent); border-style:dashed; border-color:var(--accent); background:none; }

/* ---------- reservations: row actions + overflow menu ---------- */
#flavor-app .flv-resactions{ display:inline-flex; align-items:center; gap:6px; justify-content:flex-end; }
#flavor-app .flv-rowmenu{ position:relative; }
#flavor-app .flv-rowmenu__btn{ width:28px; height:28px; border-radius:8px; border:1px solid transparent; display:grid; place-items:center; font-size:15px; line-height:1; color:var(--ink-2); cursor:pointer; list-style:none; }
#flavor-app .flv-rowmenu__btn::-webkit-details-marker{ display:none; }
#flavor-app .flv-rowmenu__btn:hover{ background:var(--surface); border-color:var(--line-strong); color:var(--ink); }
#flavor-app .flv-rowmenu__list{ position:absolute; right:0; top:32px; z-index:30; background:var(--surface); border:1px solid var(--line-strong); border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.18); padding:5px; min-width:184px; text-align:left; }
#flavor-app .flv-rowmenu__list button,
#flavor-app .flv-rowmenu__list a{ display:block; width:100%; text-align:left; border:0; background:none; padding:7px 10px; border-radius:7px; font-size:13px; color:var(--ink-2); text-decoration:none; cursor:pointer; font-family:inherit; }
#flavor-app .flv-rowmenu__list button:hover,
#flavor-app .flv-rowmenu__list a:hover{ background:var(--surface-2); color:var(--ink); }
#flavor-app .flv-rowmenu__list .flv-danger{ color:var(--bad); }
#flavor-app .flv-rowmenu__list hr{ border:0; border-top:1px solid var(--line); margin:4px 2px; }

/* ---------- reservations: empty states, room head, table list ---------- */
#flavor-app .flv-empty{ text-align:center; padding:38px 24px; }
#flavor-app .flv-empty h3{ font-size:16px; margin:0 0 6px; }
#flavor-app .flv-empty p{ max-width:440px; margin:0 auto 16px; font-size:13.5px; }
#flavor-app .flv-roomhead{ display:flex; justify-content:flex-end; margin:0 0 10px; }
#flavor-app .flv-card__note{ font-size:12.5px; color:var(--muted); }
#flavor-app .flv-tablelist{ margin-top:18px; }
#flavor-app .flv-note--ok{ color:var(--good); background:var(--good-bg); border-radius:9px; padding:9px 13px; margin:0 0 14px; font-size:13px; }
#flavor-app .flv-note--warn{ color:var(--warn); background:var(--warn-bg); border-radius:9px; padding:9px 13px; margin:12px 0 0; font-size:12.5px; }
#flavor-app .flv-note--warn a{ color:inherit; }

/* ---------- reservations: settings cards ---------- */
#flavor-app .flv-content input[type="time"],
#flavor-app .flv-content input[type="date"]{
  background:var(--inset); border:1px solid var(--line-strong); border-radius:9px;
  color:var(--ink); padding:7px 10px; box-shadow:none; min-height:36px; max-width:100%;
  font-family:inherit;
}
#flavor-app .flv-content input[type="time"]:focus,
#flavor-app .flv-content input[type="date"]:focus{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); outline:none; background:var(--surface); }

#flavor-app .flv-setcard{ margin-bottom:18px; }
#flavor-app .flv-setcard:last-child{ margin-bottom:0; }
#flavor-app .flv-fieldgrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px 24px; }
#flavor-app .flv-setcols{ display:grid; grid-template-columns:1fr 1fr; gap:20px 28px; align-items:start; }
#flavor-app .flv-field{ display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
#flavor-app .flv-field:last-child{ margin-bottom:0; }
#flavor-app .flv-fieldgrid .flv-field{ margin-bottom:0; }
#flavor-app .flv-field > label{ font-size:12.5px; font-weight:500; color:var(--ink-2); }
#flavor-app .flv-field input,
#flavor-app .flv-field select,
#flavor-app .flv-field textarea{ width:100%; }
/* number inputs sitting inside a sentence ("covers parties up to [4] guests") --
   they must escape the full-width rule above without becoming a separate field */
#flavor-app .flv-field .flv-inlinefields{ margin:0; font-size:12.5px; line-height:2.1; color:var(--ink-2); }
#flavor-app .flv-field .flv-inlinefields input{ width:62px; display:inline-block; margin:0 3px; text-align:center; }
#flavor-app .flv-help{ font-size:11.5px; color:var(--muted); line-height:1.45; }
#flavor-app .flv-help a{ color:var(--accent); }

#flavor-app .flv-hours{ display:flex; flex-direction:column; gap:7px; }
#flavor-app .flv-hrow{ display:grid; grid-template-columns:minmax(84px,1fr) 22px minmax(0,1fr) 12px minmax(0,1fr); align-items:center; gap:8px; }
#flavor-app .flv-hrow__d{ font-size:13px; color:var(--ink-2); }
#flavor-app .flv-hrow__on{ display:grid; place-items:center; }
#flavor-app .flv-hrow__sep{ text-align:center; color:var(--muted); font-size:12px; }
#flavor-app .flv-hrow.is-off input[type="time"]{ opacity:.4; }
#flavor-app .flv-hrow input[type="time"]{ min-width:0; }

#flavor-app .flv-chips{ display:flex; flex-wrap:wrap; gap:7px; }
#flavor-app .flv-chip{ display:inline-flex; align-items:center; gap:8px; background:var(--inset); border:1px solid var(--line-strong); border-radius:8px; padding:5px 7px 5px 11px; font-family:var(--font-mono); font-size:12px; color:var(--ink-2); }
#flavor-app .flv-chip button{ border:0; background:none; color:var(--muted); font-size:15px; line-height:1; padding:0 2px; cursor:pointer; }
#flavor-app .flv-chip button:hover{ color:var(--bad); }
#flavor-app .flv-chipadd{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
#flavor-app .flv-chipadd input[type="date"]{ width:auto; }
#flavor-app .flv-chips:empty::after{ content:attr(data-empty); font-size:12.5px; color:var(--muted); }

#flavor-app .flv-savebar{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid var(--line); background:var(--inset); border-radius:0 0 var(--radius) var(--radius); }
#flavor-app .flv-savebar .flv-muted{ margin-right:auto; font-size:12.5px; }

@media (max-width:900px){
  #flavor-app .flv-setcols{ grid-template-columns:1fr; }
}

/* ------------------------------------------------------------------------- *
 * Panel skin for the embedded reservation screens
 *
 * The floor plan and analytics stylesheets were written for wp-admin and use
 * hardcoded WordPress greys (#fff / #f6f7f7 / #dcdcde / #1d2327 / #646970 /
 * #2271b1). Inside the panel those read as a foreign UI, and they ignore the
 * light/dark tokens. Everything below re-points them at the panel tokens and is
 * scoped to #flavor-app, so the legacy standalone page keeps its wp-admin look.
 * ------------------------------------------------------------------------- */

/* --- floor plan: editor --- */
#flavor-app .flavor-fp__toolbar{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius) var(--radius) 0 0; }
#flavor-app .flavor-fp__status{ color:var(--muted); }
#flavor-app .flavor-fp__body{ border:1px solid var(--line); border-top:0; border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
#flavor-app .flavor-fp__stage{ background:var(--inset); background-image:radial-gradient(var(--line-strong) 1px,transparent 1px); background-size:20px 20px; }
#flavor-app .flavor-fp__panel{ background:var(--surface-2); border-left:1px solid var(--line); border-top-color:var(--line); }
#flavor-app .flavor-fp__panel-title{ color:var(--ink); font-family:var(--font-head); }
#flavor-app .flavor-fp__field label{ color:var(--ink-2); }

/* --- floor plan: day board --- */
#flavor-app .flavor-fpday__controls{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius) var(--radius) 0 0; }
#flavor-app .flavor-fpday__time{ color:var(--ink); font-family:var(--font-mono); }
#flavor-app .flavor-fpday__body{ border:1px solid var(--line); border-top:0; border-radius:0 0 var(--radius) var(--radius); overflow:hidden; }
#flavor-app .flavor-fpday__side{ background:var(--surface-2); border-left:1px solid var(--line); border-top-color:var(--line); }
#flavor-app .flavor-fpday__chip{ background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--accent); border-radius:9px; }
#flavor-app .flavor-fpday__chip.is-selected{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); background:var(--accent-soft); }
#flavor-app .flavor-fpday__chip-name{ color:var(--ink); }
#flavor-app .flavor-fpday__chip-meta{ color:var(--muted); font-family:var(--font-mono); }
#flavor-app .flavor-fpday__detail p,
#flavor-app .flavor-fpday__hint{ color:var(--ink-2); }
#flavor-app .flavor-fpday__walkin input{ border:1px solid var(--line-strong); background:var(--inset); color:var(--ink); border-radius:9px; }
#flavor-app .flavor-fpday__slider{ accent-color:var(--accent); }

/* --- analytics --- */
#flavor-app .flavor-an-kpi{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
#flavor-app .flavor-an-kpi__num{ color:var(--ink); font-family:var(--font-head); letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
#flavor-app .flavor-an-kpi__lab{ color:var(--ink-2); }
#flavor-app .flavor-an-h2{ color:var(--ink); font-family:var(--font-head); }
#flavor-app .flavor-an-chart{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
/* .flavor-an-bar is already the Flavor accent — left alone on purpose. */
#flavor-app .flavor-an-bar{ border-radius:5px 5px 0 0; }
#flavor-app .flavor-an-barval,
#flavor-app .flavor-an-lab{ color:var(--muted); font-family:var(--font-mono); }
#flavor-app .flavor-an-status__val{ color:var(--ink-2); font-family:var(--font-mono); }
#flavor-app .flavor-an-status__track{ background:var(--surface-2); border-radius:20px; }
#flavor-app .flavor-an-status__fill{ border-radius:20px; }

/* --- the operator's "add reservation" form ---
   It is the module's wp-admin form-table. Rather than fork the shared markup, the
   table is re-laid out here as the panel's own label-over-field pairs. */
#flavor-app .flv-addform .form-table,
#flavor-app .flv-addform .form-table tbody,
#flavor-app .flv-addform .form-table tr,
#flavor-app .flv-addform .form-table th,
#flavor-app .flv-addform .form-table td{ display:block; width:auto; padding:0; border:0; background:none; }
#flavor-app .flv-addform .form-table tr{ margin-bottom:16px; max-width:420px; }
#flavor-app .flv-addform .form-table th{ font-size:12.5px; font-weight:500; color:var(--ink-2); margin-bottom:5px; text-align:left; }
#flavor-app .flv-addform .form-table th label{ font-weight:500; }
#flavor-app .flv-addform .form-table td input[type="text"],
#flavor-app .flv-addform .form-table td input[type="email"],
#flavor-app .flv-addform .form-table td input[type="date"],
#flavor-app .flv-addform .form-table td input[type="time"],
#flavor-app .flv-addform .form-table td input[type="number"],
#flavor-app .flv-addform .form-table td select,
#flavor-app .flv-addform .form-table td textarea{ width:100%; max-width:100%; }
#flavor-app .flv-addform .form-table td .description,
#flavor-app .flv-addform .form-table td p.description{ font-size:11.5px; color:var(--muted); margin:4px 0 0; }
#flavor-app .flv-addform .flavor-add-title{ font-family:var(--font-head); font-size:17px; margin:0 0 6px; }
#flavor-app .flv-addform > .description{ color:var(--ink-2); font-size:13.5px; margin:0 0 18px; }
#flavor-app .flv-addform .submit{ margin:4px 0 0; padding:0; }
#flavor-app .flv-addform .flavor-add-avail{ font-size:12.5px; color:var(--ink-2); }
#flavor-app .flv-addform .flavor-add-err{ color:var(--bad) !important; font-size:12px; }

/* ------------------------------------------------------------------------- *
 * Checkboxes as switches
 *
 * Every single on/off setting in the panel renders as a switch: dish published,
 * opening day, guest ratings, "disable Google Fonts", "send confirmation e-mail".
 * It stays a real <input type="checkbox">, so keyboard, labels and screen readers
 * are unchanged — only the paint is different, which also means the module's own
 * screens get it without touching their markup.
 *
 * Deliberately excluded: the three multi-select groups (allergens, badges,
 * categories). A row of switches reads as five independent settings; those are
 * one question with several answers and must stay checkboxes.
 * ------------------------------------------------------------------------- */
#flavor-app .flv-content input[type="checkbox"]:not([name="flavor_allergens[]"]):not([name="flavor_badges[]"]):not([name="flavor_menu_cat[]"]):not(.flv-check){
  -webkit-appearance:none; appearance:none;
  position:relative; flex:none; vertical-align:middle;
  width:38px; min-width:38px; height:22px; margin:0 4px 0 0; padding:0;
  border:0; border-radius:20px; background:var(--line-strong);
  box-shadow:none; cursor:pointer; transition:background .18s ease;
}
#flavor-app .flv-content input[type="checkbox"]:not([name="flavor_allergens[]"]):not([name="flavor_badges[]"]):not([name="flavor_menu_cat[]"]):not(.flv-check)::before,
#flavor-app .flv-content input[type="checkbox"]:not([name="flavor_allergens[]"]):not([name="flavor_badges[]"]):not([name="flavor_menu_cat[]"]):not(.flv-check):checked::before{
  content:""; position:absolute; top:2px; left:2px;
  width:18px; height:18px; margin:0; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform .18s ease;
  /* wp-admin draws a dashicon checkmark here — neutralised. */
  font-size:0; line-height:0; color:transparent; float:none;
}
#flavor-app .flv-content input[type="checkbox"]:not([name="flavor_allergens[]"]):not([name="flavor_badges[]"]):not([name="flavor_menu_cat[]"]):not(.flv-check):checked{
  background:var(--accent);
}
#flavor-app .flv-content input[type="checkbox"]:not([name="flavor_allergens[]"]):not([name="flavor_badges[]"]):not([name="flavor_menu_cat[]"]):not(.flv-check):checked::before{
  transform:translateX(16px);
}
#flavor-app .flv-content input[type="checkbox"]:not([name="flavor_allergens[]"]):not([name="flavor_badges[]"]):not([name="flavor_menu_cat[]"]):not(.flv-check):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}
#flavor-app .flv-content input[type="checkbox"]:not([name="flavor_allergens[]"]):not([name="flavor_badges[]"]):not([name="flavor_menu_cat[]"]):not(.flv-check):disabled{
  opacity:.45; cursor:not-allowed;
}

/* The opening-hours grid reserved a checkbox-sized column — widen it for the switch. */
#flavor-app .flv-hrow{ grid-template-columns:minmax(84px,1fr) 44px minmax(0,1fr) 12px minmax(0,1fr); }

/* The three multi-select groups stay checkboxes (one question, several answers)
   but get the Flavor accent instead of the native WordPress blue. */
#flavor-app .flv-content input[type="checkbox"][name="flavor_allergens[]"],
#flavor-app .flv-content input[type="checkbox"][name="flavor_badges[]"],
#flavor-app .flv-content input[type="checkbox"][name="flavor_menu_cat[]"],
#flavor-app .flv-content input[type="checkbox"].flv-check{
  -webkit-appearance:none; appearance:none;
  position:relative; flex:none; vertical-align:middle;
  width:18px; min-width:18px; height:18px; margin:0 2px 0 0; padding:0;
  border:1px solid var(--line-strong); border-radius:5px;
  background:var(--surface); box-shadow:none; cursor:pointer;
  transition:background .15s, border-color .15s;
}
#flavor-app .flv-content input[type="checkbox"][name="flavor_allergens[]"]:checked,
#flavor-app .flv-content input[type="checkbox"][name="flavor_badges[]"]:checked,
#flavor-app .flv-content input[type="checkbox"][name="flavor_menu_cat[]"]:checked,
#flavor-app .flv-content input[type="checkbox"].flv-check:checked{
  background:var(--accent); border-color:var(--accent);
}
#flavor-app .flv-content input[type="checkbox"][name="flavor_allergens[]"]::before,
#flavor-app .flv-content input[type="checkbox"][name="flavor_badges[]"]::before,
#flavor-app .flv-content input[type="checkbox"][name="flavor_menu_cat[]"]::before,
#flavor-app .flv-content input[type="checkbox"].flv-check::before,
#flavor-app .flv-content input[type="checkbox"][name="flavor_allergens[]"]:checked::before,
#flavor-app .flv-content input[type="checkbox"][name="flavor_badges[]"]:checked::before,
#flavor-app .flv-content input[type="checkbox"][name="flavor_menu_cat[]"]:checked::before,
#flavor-app .flv-content input[type="checkbox"].flv-check:checked::before{
  /* wp-admin puts a dashicon checkmark here; replaced by a drawn tick. */
  content:""; position:absolute; top:2px; left:5.5px;
  width:5px; height:9px; margin:0; float:none;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg);
  opacity:0; transition:opacity .12s; font-size:0; line-height:0; color:transparent;
  background:none;
}
#flavor-app .flv-content input[type="checkbox"][name="flavor_allergens[]"]:checked::before,
#flavor-app .flv-content input[type="checkbox"][name="flavor_badges[]"]:checked::before,
#flavor-app .flv-content input[type="checkbox"][name="flavor_menu_cat[]"]:checked::before,
#flavor-app .flv-content input[type="checkbox"].flv-check:checked::before{
  opacity:1;
}
#flavor-app .flv-content input[type="checkbox"][name="flavor_allergens[]"]:focus-visible,
#flavor-app .flv-content input[type="checkbox"][name="flavor_badges[]"]:focus-visible,
#flavor-app .flv-content input[type="checkbox"][name="flavor_menu_cat[]"]:focus-visible,
#flavor-app .flv-content input[type="checkbox"].flv-check:focus-visible{
  outline:2px solid var(--accent); outline-offset:2px;
}

/* ---------- "Delete location" dialog ---------- */
/* Eine Entscheidung mit Folgen -- die Optionen bekommen darum echte Flaeche
   statt einer Radiogruppe in einer Zeile. */
#flavor-app .flv-card--inset{ background:var(--inset); box-shadow:none; margin:0 0 18px; }
#flavor-app .flv-delloc__counts{ margin:6px 0 0; font-size:14px; }
#flavor-app .flv-delloc__counts strong{ font-family:var(--font-head); }
#flavor-app .flv-delloc__standdown{ margin:2px 0 0 26px; font-size:13px; line-height:1.5; }

#flavor-app .flv-choices{ display:flex; flex-direction:column; gap:10px; margin:8px 0 4px; }
#flavor-app .flv-choice{ display:flex; gap:11px; align-items:flex-start; padding:12px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; }
#flavor-app .flv-choice:hover{ border-color:var(--line-strong); }
#flavor-app .flv-choice:has(input:checked){ border-color:var(--accent); background:var(--accent-soft); }
#flavor-app .flv-choice > span{ display:flex; flex-direction:column; gap:4px; }
#flavor-app .flv-choice strong{ font-weight:500; }
#flavor-app .flv-choice small{ font-size:12px; line-height:1.5; }
#flavor-app .flv-choice select{ align-self:flex-start; margin-top:2px; max-width:260px; }
/* Der Umschalter-Stil von oben gilt nur fuer Checkboxen -- Radios bleiben Radios,
   nur im Flavor-Akzent statt WP-Blau. */
#flavor-app .flv-choice input[type=radio]{ accent-color:var(--accent); margin-top:3px; flex:none; }
#flavor-app .flv-modal__body > .submit{ margin:18px 0 0; padding:0; display:flex; gap:9px; align-items:center; }
#flavor-app #flv-delloc-modal .flv-modal__body form > .submit{ margin:18px 0 0; padding:0; display:flex; gap:9px; align-items:center; }

/* ---------- "Add reservation" dialog ---------- */
/* The backdrop paints itself with display:flex, which would beat the hidden
   attribute — so say it explicitly. */
#flavor-app .flv-modal-backdrop[hidden]{ display:none; }

#flavor-app .flv-modal--form{
  max-width:580px; padding:0; max-height:88vh;
  display:flex; flex-direction:column; overflow:hidden;
}
#flavor-app .flv-modal__head{
  display:flex; align-items:center; gap:12px;
  padding:16px 22px; border-bottom:1px solid var(--line); flex:none;
}
#flavor-app .flv-modal__head h2{
  margin:0; font-family:var(--font-head); font-size:17px; font-weight:600; color:var(--ink);
}
#flavor-app .flv-modal__x{
  margin-left:auto; width:32px; height:32px; border-radius:9px;
  display:grid; place-items:center; font-size:20px; line-height:1;
  color:var(--ink-2); text-decoration:none; border:1px solid transparent;
}
#flavor-app .flv-modal__x:hover{ background:var(--surface-2); color:var(--ink); border-color:var(--line); }
#flavor-app .flv-modal__body{ padding:18px 22px 20px; overflow-y:auto; }

/* The embedded form brings its own heading and intro — the dialog head says it. */
#flavor-app .flv-modal--form .flavor-add-title{ display:none; }
#flavor-app .flv-modal--form .flv-modal__body > .description{
  margin:0 0 16px; font-size:12.5px; color:var(--muted); max-width:none;
}
#flavor-app .flv-modal--form .form-table tr{ max-width:none; }
#flavor-app .flv-modal--form .submit{
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  margin:18px -22px -20px; padding:14px 22px;
  border-top:1px solid var(--line); background:var(--inset);
  position:sticky; bottom:-20px;
}
#flavor-app .flv-modal--form .submit .button{ margin:0; }
#flavor-app .flv-modal--form .notice{ margin:0 0 14px; }

@media (max-width:600px){
  #flavor-app .flv-modal--form{ max-height:94vh; }
}

/* ---------- seating / walk-in dialog ----------
   Same markup as on the legacy page, repainted with the panel tokens so it reads
   as the sibling of the "Add reservation" dialog rather than a wp-admin popup.
   Scoped to #flavor-app; the standalone page keeps its original look. */
#flavor-app .flavor-seat-scrim{ background:rgba(20,15,12,.45); padding:20px; }
#flavor-app .flavor-seat-modal{
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  width:min(560px,100%); max-height:88vh;
}
#flavor-app .flavor-seat-head{ padding:16px 22px 10px; border-bottom:1px solid var(--line); }
#flavor-app .flavor-seat-title{ font-family:var(--font-head); font-size:17px; font-weight:600; color:var(--ink); }
#flavor-app .flavor-seat-sub{ color:var(--ink-2); font-size:13px; margin-top:3px; }
#flavor-app .flavor-seat-body{ padding:16px 22px 4px; }
#flavor-app .flavor-seat-loading,
#flavor-app .flavor-seat-empty{ color:var(--muted); }

/* the "who am I seating" summary */
#flavor-app .flavor-seat-booking{
  background:var(--inset); border:1px solid var(--line); border-radius:10px;
  padding:12px 16px;
}
#flavor-app .flavor-seat-big{ font-family:var(--font-head); font-size:24px; font-weight:700; color:var(--ink); }
#flavor-app .flavor-seat-meta b{ color:var(--ink); }
#flavor-app .flavor-seat-meta small{ color:var(--muted); }

#flavor-app .flavor-seat-sublabel{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
}

/* table chooser */
#flavor-app .flavor-seat-pick{
  border:1px solid var(--line-strong); background:var(--surface);
  border-radius:10px; color:var(--ink-2); transition:border-color .12s, background .12s, box-shadow .12s;
}
#flavor-app .flavor-seat-pick:hover{ border-color:var(--accent); }
#flavor-app .flavor-seat-pick.is-sel{
  border-color:var(--accent); background:var(--accent-soft);
  box-shadow:0 0 0 3px var(--accent-soft);
}
#flavor-app .flavor-seat-pick.is-dim:hover{ border-color:var(--line-strong); }
#flavor-app .flavor-seat-pick b{ color:var(--ink); font-size:14.5px; }
#flavor-app .flavor-seat-pick small{ color:var(--muted); }
#flavor-app .flavor-seat-tag{ color:var(--accent); font-family:var(--font-mono); font-size:10px; }
/* Moving onto a taken or too-small table is allowed — this says what it means. */
#flavor-app .flavor-seat-warn{ margin:12px 0 0; padding:7px 10px; border-radius:8px; font-size:12.5px; line-height:1.4; font-weight:600; color:var(--bad); background:var(--bad-bg); }
#flavor-app .flavor-seat-intro{ margin:10px 0 0; color:var(--ink-2); font-size:13px; }

/* walk-in fields */
#flavor-app .flavor-seat-field{ color:var(--ink-2); font-size:12.5px; font-weight:500; }
#flavor-app .flavor-seat-field input,
#flavor-app .flavor-seat-field select{
  background:var(--inset); border:1px solid var(--line-strong); border-radius:9px;
  color:var(--ink); padding:7px 10px; min-height:36px;
}
#flavor-app .flavor-seat-field input:focus,
#flavor-app .flavor-seat-field select:focus{
  border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); outline:none; background:var(--surface);
}

/* actions bar, mirroring the Add-reservation dialog */
#flavor-app .flavor-seat-foot{
  padding:14px 22px; margin-top:16px;
  border-top:1px solid var(--line); background:var(--inset);
  border-radius:0 0 14px 14px;
}

#flavor-app .flavor-seat-toast{
  background:var(--ink); color:var(--bg);
  font-family:var(--font-body); font-size:13.5px;
}
/* =====================================================================
   Legacy-Screens auf die Panel-Token bringen: Design (Themes/Typography),
   Add-ons (Badges/Ratings), Tools (QR/CSV) und Kategorien.

   Diese Seiten rendern unveraendert ihre alten wp-admin-Stylesheets, die
   durchweg harte WordPress-Grautoene und WP-Blau (#2271b1) benutzen -- im
   Panel liest sich das als Fremdkoerper. Hier wird nur umgefaerbt, auf
   #flavor-app gescopt: das Layout der Modulseiten bleibt unangetastet, und
   die Legacy-Standalone-Seiten behalten ihr wp-admin-Aussehen.

   Weil alles ueber die Token laeuft, gilt es automatisch in hell UND dunkel.
   ===================================================================== */

/* ---------- Grundgeruest der eingebetteten Seiten ---------- */
/* WP setzt hier 20px oben, die im Panel doppelt zur Card-Marge kommen. */
#flavor-app .flv-content .flavor-admin-wrap,
#flavor-app .flv-content .flavor-qr-wrap,
#flavor-app .flv-content .flavor-csv-wrap,
#flavor-app .flv-content .fts-wrap{ margin:0; padding:0; max-width:none; }

/* Hilfetexte und Absende-Zeilen -- in WP grau-blau, hier Panel-Muted.
   Bewusst auf .wrap eingeengt: die eingebetteten Reservierungs-Dialoge bringen
   kein .wrap mit und haben unter .flv-addform eigene, feiner abgestimmte Regeln,
   die diese hier sonst per Spezifitaet bzw. Quellreihenfolge ueberstimmen wuerden. */
#flavor-app .flv-content .wrap p.description,
#flavor-app .flv-content .wrap .description{ color:var(--muted); font-size:12.5px; }
#flavor-app .flv-content .wrap p.submit{ padding:14px 0 0; margin:0; }
#flavor-app .flv-content .wrap hr{ border:0; border-top:1px solid var(--line); margin:20px 0; }
#flavor-app .flv-content .wrap code{ background:var(--inset); color:var(--ink-2); border-radius:6px; padding:2px 7px; font-family:var(--font-mono); font-size:12px; }
#flavor-app .flv-content .wrap a:not(.button):not(.button-primary):not(.page-title-action){ color:var(--accent); }
#flavor-app .flv-content .wrap a:not(.button):not(.button-primary):not(.page-title-action):hover{ color:var(--accent-ink); }

/* Die Modulseiten setzen ihre Abschnittstitel in wp-admin-Anthrazit. */
#flavor-app .flv-content .flavor-csv-card h2,
#flavor-app .flv-content .flavor-csv-info h2,
#flavor-app .flv-content .flavor-qr-section h3{ color:var(--ink); border-bottom-color:var(--line); }

/* ---------- Design -> Custom Themes (.fts-*) ---------- */
#flavor-app .flv-content .fts-wrap > .description,
#flavor-app .flv-content .fts-color-value,
#flavor-app .flv-content .fts-form th{ color:var(--ink-2); }
#flavor-app .flv-content .fts-auto-note,
#flavor-app .flv-content .fts-hint,
#flavor-app .flv-content .fts-color{ color:var(--muted); }

/* Tab-Leiste des Themes-Screens: WP-Blau -> Terrakotta. */
#flavor-app .flv-content .fts-tab-nav{ border-bottom-color:var(--line); }
#flavor-app .flv-content .fts-tab-btn{ color:var(--ink-2); font-family:var(--font-head); }
#flavor-app .flv-content .fts-tab-btn:hover{ color:var(--ink); }
#flavor-app .flv-content .fts-tab-btn.is-active{ color:var(--accent); border-bottom-color:var(--accent); }

#flavor-app .flv-content .fts-tab-panel,
#flavor-app .flv-content .fts-settings-col,
#flavor-app .flv-content .fts-preview-col{ background:var(--surface); border-color:var(--line); }
#flavor-app .flv-content .fts-shortcode-hint code{ background:var(--inset); color:var(--accent); border-radius:6px; }

/* ---------- Design -> Typography ---------- */
/* Die Schriftvorschau bleibt bewusst in ihren eigenen Farben -- sie zeigt,
   wie die Karte im Frontend aussieht, nicht wie das Panel aussieht. Nur das
   Beschriftungs-Grau wird angeglichen. */
#flavor-app .flv-content .flavor-typo-preview__label{ color:var(--muted); }

/* ---------- Add-ons -> Badges, und Menue -> Kategorien ---------- */
/* Gleiche Zeilen-Optik wie die Panel-Listen: Panel-Flaeche statt Weiss,
   Panel-Kante statt #ddd, Akzent statt WP-Blau beim Ziehen. */
#flavor-app .flv-content .flavor-badge-row,
#flavor-app .flv-content .flavor-cat-sort-item{ background:var(--surface); border-color:var(--line); border-radius:10px; color:var(--ink); }
#flavor-app .flv-content .flavor-badge-row:hover,
#flavor-app .flv-content .flavor-cat-sort-item:hover{ background:var(--surface-2); }
#flavor-app .flv-content .flavor-cat-sort-item--child{ background:var(--inset); border-color:var(--line); }
#flavor-app .flv-content .flavor-cat-sort-children{ border-left-color:var(--line); }
#flavor-app .flv-content .flavor-badge-drag,
#flavor-app .flv-content .flavor-cat-sort-handle,
#flavor-app .flv-content .flavor-cat-sort-child-indent{ color:var(--muted); }
#flavor-app .flv-content .flavor-badge-row.ui-sortable-helper,
#flavor-app .flv-content .flavor-cat-sort-item.ui-sortable-helper{ background:var(--surface); border-color:var(--accent); box-shadow:var(--shadow); }
#flavor-app .flv-content .flavor-badge-placeholder,
#flavor-app .flv-content .flavor-cat-sort-placeholder{ border-color:var(--accent); background:var(--accent-soft); }
#flavor-app .flv-content .flavor-badge-color,
#flavor-app .flv-content .flavor-badge-text-color{ border-color:var(--line-strong); }
/* Zaehler und Slug hinter dem Kategorienamen: helles Grau, auf der dunklen
   Panel-Flaeche praktisch unlesbar. */
#flavor-app .flv-content .flavor-cat-sort-count{ color:var(--ink-2); }
#flavor-app .flv-content .flavor-cat-sort-slug{ color:var(--muted); font-family:var(--font-mono); }
#flavor-app .flv-content .flavor-cat-sort-rename > summary{ color:var(--accent); }
/* Entfernen-Knopf der Badge-Zeile -- WP-Rot auf hellrot. */
#flavor-app .flv-content .flavor-badge-remove{ color:var(--bad); background:none; border-color:transparent; }
#flavor-app .flv-content .flavor-badge-remove:hover{ color:var(--bad); background:var(--bad-bg); }
#flavor-app .flv-content .flavor-cat-sort-renameform{ background:var(--surface); border-color:var(--line); box-shadow:var(--shadow); border-radius:10px; }

/* Preis-Wiederholer der Gericht-Metabox (gleiches Stylesheet). */
#flavor-app .flv-content .flavor-price-row{ background:var(--surface); border-color:var(--line); }
#flavor-app .flv-content .flavor-drag-handle{ color:var(--muted); }
/* Gleiche Spezifitaet wie die Modul-Regeln (#flavor-prices-wrap .x.y) -- deshalb
   die ID mitnehmen, damit die Entscheidung nicht an der Ladereihenfolge haengt.
   Ein weisser Drag-Helfer wuerde im dunklen Panel sonst aufblitzen. */
#flavor-app .flv-content #flavor-prices-wrap .flavor-price-row.ui-sortable-helper{ background:var(--surface); border-color:var(--accent); }
#flavor-app .flv-content #flavor-prices-wrap .flavor-price-row.ui-sortable-placeholder{ border-color:var(--accent); background:var(--accent-soft); }

/* ---------- Tools -> QR / Tischaufsteller ---------- */
#flavor-app .flv-content .flavor-qr-section{ background:var(--surface); border-color:var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
#flavor-app .flv-content .flavor-qr-form th{ color:var(--ink-2); }
#flavor-app .flv-content .fqr-style-label,
#flavor-app .flv-content .fqr-preview-note,
#flavor-app .flv-content #fqr-bg-opacity-val{ color:var(--ink-2); }
/* Die Stil-Kacheln zeigen echte Druckfarben -- nur der Auswahlring wird Flavor. */
#flavor-app .flv-content .flavor-qr-style-option input[type="radio"]:checked + .fqr-style-swatch{
  border-color:var(--accent); box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent);
}
#flavor-app .flv-content .flavor-qr-img-preview{ background:var(--inset); border-color:var(--line-strong); }
/* Das Modul setzt hier selbst !important -- sonst bliebe unsere Regel wirkungslos
   und der Knopf im dunklen Panel dunkelrot auf dunkler Flaeche. */
#flavor-app .flv-content .flavor-qr-remove-btn{ color:var(--bad) !important; border-color:var(--bad) !important; }

/* ---------- Tools -> CSV Import / Export ----------
   Hier steht bewusst nichts. Der CSV-Screen rendert schlichtes wp-admin-Markup
   und wird vom generischen Legacy-Skin oben (Buttons, Felder, Ueberschriften)
   abgedeckt. Das fruehere flavor-csv-admin.css ist seit 2.3.1 geloescht -- keine
   seiner Klassen wurde ausgegeben; die einzige lebende Regel (Lade-Spinner am
   Import-Button) steht jetzt in flavor-menu-admin.css. */

/* ---------- Verfuegbarkeits-Panel (Reservierungs-Modul, Legacy-Seite) ---------- */
#flavor-app .flv-content .flavor-avail__body{ border-top-color:var(--line); }
#flavor-app .flv-content .flavor-avail__ctrl,
#flavor-app .flv-content .flavor-avail__num{ color:var(--ink-2); }
#flavor-app .flv-content .flavor-avail__slot{ background:var(--surface-2); border-color:var(--line); }
#flavor-app .flv-content .flavor-avail__bar{ background:var(--line); }
#flavor-app .flv-content .flavor-avail__summary::before,
#flavor-app .flv-content .flavor-avail__empty{ color:var(--muted); }

/* Der Live-Hinweis im Anlege-Dialog: nur der neutrale Zustand wird angeglichen --
   gelb/orange/rot tragen dort Bedeutung (knapp / voll / ueberbucht) und bleiben. */
#flavor-app .flv-content .flavor-add-avail__now.is-ok,
#flavor-app .flv-content .flavor-add-avail__after.is-ok{ color:var(--ink-2); }
#flavor-app .flv-content .flavor-add-avail__now.is-over,
#flavor-app .flv-content .flavor-add-avail__after.is-over{ color:var(--bad); }

/* ---------- Kartenrahmen fuer die Screens ohne eigenes Geruest ----------
   Badges, Gaeste-Bewertungen und Typography rendern nackt auf die Flaeche,
   waehrend jeder Panel-Screen in einer Karte sitzt -- das allein liess sie
   nach wp-admin aussehen. Themes, QR und CSV bringen eigene Karten mit und
   bleiben aussen vor, sonst gaebe es Karte-in-Karte. */
#flavor-app .flv-content[data-screen="addons-badges"] > .wrap,
#flavor-app .flv-content[data-screen="addons-ratings"] > .wrap,
#flavor-app .flv-content[data-screen="design-typo"] > .wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 20px;
}
/* ---------- Menue -> Kategorien: der Sortier-Bereich ----------
   Flavor_Category_Sort::render_sort_page() haengt seinen EIGENEN .wrap samt <h1>
   unter die "Kategorie anlegen"-Karte -- als einzige Sektion des Screens also
   ohne Rahmen, und die globale Regel weiter oben schluckt zusaetzlich ihre
   Ueberschrift. Die Datei ist Free+Pro geteilt, deshalb hier per CSS zur Karte
   gemacht statt das Modul-Markup anzufassen. */
#flavor-app .flv-content[data-screen="categories"] > .wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px 18px; margin-bottom:20px;
}
/* Anders als bei den uebrigen Legacy-Seiten bleibt diese Ueberschrift stehen:
   die Topbar sagt "Kategorien", dieser Abschnitt heisst "Kategorien sortieren"
   -- versteckt haette die Sektion gar keinen Titel mehr. */
#flavor-app .flv-content[data-screen="categories"] > .wrap > h1{
  display:block; margin:0 0 4px; padding:0; border:0;
  font-family:var(--font-head); font-size:15.5px; font-weight:600; color:var(--ink);
}
/* Der Doku-Knopf steht im Markup hinter der Ueberschrift und faellt sonst in
   eine eigene Zeile -- er gehoert in die Kopfecke der Karte. */
#flavor-app .flv-content[data-screen="categories"] > .wrap > .page-title-action{
  float:right; margin:-2px 0 0 12px;
}
#flavor-app .flv-content[data-screen="categories"] > .wrap > p.description{ margin:0 0 14px; }
#flavor-app .flv-content[data-screen="categories"] .flavor-cat-sort-list{ margin:0; }

/* In der Karte braucht die erste Ueberschrift keinen WP-Abstand mehr. */
#flavor-app .flv-content[data-screen="addons-badges"] > .wrap > h2:first-of-type,
#flavor-app .flv-content[data-screen="addons-ratings"] > .wrap > h2:first-of-type,
#flavor-app .flv-content[data-screen="design-typo"] > .wrap > h2:first-of-type{ margin-top:0; }
/* form-table klebt in WP oben an -- in der Karte sitzt sie sonst schief. */
#flavor-app .flv-content[data-screen="addons-ratings"] .form-table,
#flavor-app .flv-content[data-screen="design-typo"] .form-table{ margin-top:0; }

/* Bewusst NICHT umgefaerbt:
   .fqr-swatch-minimal / -elegant / -branded   echte Druckfarben des Aufstellers
   .flavor-csv-btn--loading::after             weisser Spinner auf dem Akzent-Button
   .flavor-typo-preview__box                   zeigt die Frontend-Karte, nicht das Panel
   .flavor-seat-*                              schon am 03.09. gemappt
   .flavor-an-bar                              Balken sind bereits im Flavor-Akzent */