:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --theme-accent: #20c997;
  --theme-accent-hover: #19a87d;
  --theme-accent-soft: #dff8ef;
  --theme-on-accent: #06130f;
  --theme-deep: #061a14;
  --theme-deep-2: #0c2b22;
  --theme-on-deep: #fffdf8;
  --theme-focus: #8fe8cd;
  --bg: #f6f4ef;
  --surface: #ffffff;
  --surface-strong: #fdfbf7;
  --text: #17211f;
  --muted: #68716f;
  --line: #d9ddd5;
  --accent: var(--theme-accent);
  --accent-strong: var(--theme-accent-hover);
  --danger: #bc3f35;
  --danger-soft: #f7d8d4;
  --ok: #2f8a4c;
  --ok-soft: #d9ecd9;
  --warn: #bf7a1f;
  --warn-soft: #f6e3c8;
  --ink-soft: #edf0ed;
  --shadow: 0 16px 40px rgba(24, 32, 29, 0.11);
}

/* Mobile service v4: table, guests and staff are the navigation. */
.mobile-service-controls,
.service-product-send { display: none; }
.service-product-expand,
.service-product-expand-spacer { width: 36px; height: 36px; }
.service-product-expand {
  border: 1px solid #c9d7d1;
  border-radius: 9px;
  background: #f5f8f6;
  color: #17372e;
  font-size: 1.25rem;
  font-weight: 900;
}
.service-product-expand.expanded { transform: rotate(180deg); background: #d9f6eb; border-color: #20c99a; }
.mobile-cart-summary { display: none; }
.mobile-cart-content { display: contents; }
.service-action-menu {
  width: min(420px, calc(100vw - 24px));
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  color: #10211d;
  box-shadow: 0 24px 70px rgba(0,0,0,.3);
}
.service-action-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.service-action-title div { display:grid; gap:2px; }
.service-action-title small { color:#65756f; font-weight:800; }
.service-action-title strong { font-size:1.25rem; }
.service-action-title > button { width:38px; height:38px; border:0; border-radius:50%; background:#edf2ef; font-size:1.5rem; }
.service-action-list { display:grid; gap:7px; }
.service-action-list > button { display:grid; grid-template-columns:42px minmax(0,1fr); align-items:center; gap:10px; min-height:58px; padding:8px 10px; border:1px solid #d6e0db; border-radius:12px; background:#f8faf9; color:#10211d; text-align:left; }
.service-action-list > button > span { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#d9f6eb; color:#0b654f; font-size:1.1rem; font-weight:900; }
.service-action-list > button > div { display:grid; gap:2px; }
.service-action-list > button small { color:#677770; }
.service-action-cancel { width:100%; min-height:44px; margin-top:9px; border:0; border-radius:11px; background:#102d25; color:#fff; font-weight:900; }

@media (max-width: 760px) {
  body.state-account.state-staff .topbar {
    grid-template-columns: minmax(0, 1fr) 44px !important;
    gap: 5px;
    min-height: 54px !important;
    height: 54px;
    padding: 5px 6px !important;
  }
  body.state-account.state-staff .brand-block { display: none !important; }
  body.state-account.state-staff .mobile-service-controls {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    height: 44px;
  }
  body.state-account.state-staff .mobile-table-picker {
    display: block;
    flex: 0 0 104px;
    min-width: 0;
    height: 42px;
  }
  body.state-account.state-staff .mobile-table-picker select {
    width: 100%;
    height: 42px;
    padding: 0 25px 0 9px;
    border: 2px solid #edb934;
    border-radius: 10px;
    background-color: #f8cf5d;
    color: #17231f;
    font-size: .78rem;
    font-weight: 950;
  }
  body.state-account.state-staff .mobile-seat-strip {
    display: flex;
    flex: 1 1 auto;
    gap: 4px;
    min-width: 0;
    overflow-x: auto;
    padding: 1px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
  }
  body.state-account.state-staff .mobile-seat-strip::-webkit-scrollbar { display:none; }
  body.state-account.state-staff .mobile-seat-button {
    --guest: #7d8984;
    flex: 0 0 38px;
    width: 38px;
    height: 40px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 10px;
    background: #d8ddda;
    color: #43514b;
    font-size: .78rem;
    font-weight: 950;
    scroll-snap-align: center;
  }
  body.state-account.state-staff .mobile-seat-button.occupied { background: var(--guest); color:#10211d; }
  body.state-account.state-staff .mobile-seat-button.selected { border-color:#fff; outline:2px solid var(--guest); box-shadow:0 0 0 1px rgba(0,0,0,.3); }
  body.state-account.state-staff .mobile-seat-button.guest-color-empty.selected { --guest:#98a29e; }
  body.state-account.state-staff .guest-color-0 { --guest:#66b9ee; }
  body.state-account.state-staff .guest-color-1 { --guest:#ef8b45; }
  body.state-account.state-staff .guest-color-2 { --guest:#f2c44d; }
  body.state-account.state-staff .guest-color-3 { --guest:#bd9e7b; }
  body.state-account.state-staff .guest-color-4 { --guest:#8dcf9c; }
  body.state-account.state-staff .guest-color-5 { --guest:#bd91d8; }
  body.state-account.state-staff .mobile-menu-toggle {
    display: grid;
    place-items: center;
    width: 44px;
    height: 42px;
    border: 2px solid #29cfa2;
    border-radius: 11px;
    background: #123a30;
    color: #fff;
  }
  body.state-account.state-staff .mobile-menu-toggle span {
    display:block;
    width:auto;
    height:auto;
    background:transparent;
    color:inherit;
    font-size:.78rem;
    font-weight:950;
    line-height:1;
  }
  body.state-account.state-staff #serviceView .order-panel { padding: 6px 7px 76px; gap: 5px; }
  body.state-account.state-staff #serviceView .order-panel > .order-panel-heading,
  body.state-account.state-staff .seat-picker,
  body.state-account.state-staff .order-panel > .note-label,
  body.state-account.state-staff .order-submit-dock { display:none !important; }
  body.state-account.state-staff #productGrid { order:1; gap:5px; }
  body.state-account.state-staff #productGrid > .order-step-label { display:none !important; }
  body.state-account.state-staff #productGrid .service-product-tools {
    position: sticky !important;
    z-index: 20;
    top: 58px;
    display: grid;
    grid-template-columns: 82px minmax(0,1fr) 42px !important;
    gap: 5px;
    padding: 5px;
    border: 1px solid #d2ddd7;
    border-radius: 10px;
    background: rgba(255,255,255,.97);
    box-shadow: 0 5px 14px rgba(13,47,38,.08);
  }
  body.state-account.state-staff #productGrid .service-product-tools label > span { display:none; }
  body.state-account.state-staff .service-product-kind {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3px;
    min-width:0;
  }
  body.state-account.state-staff .service-product-kind button {
    display:grid;
    place-items:center;
    min-width:0;
    height:40px;
    padding:0;
    border:1px solid #cdd8d2;
    border-radius:8px;
    background:#f0f4f2;
    font-size:1.05rem;
  }
  body.state-account.state-staff .service-product-kind button.active { border-color:#0a8064; background:#d2f4e8; box-shadow:inset 0 0 0 1px #0a8064; }
  body.state-account.state-staff .service-product-kind button span { display:none; }
  body.state-account.state-staff #productGrid .service-product-tools input { height:40px; min-height:40px; padding:0 9px; font-size:.76rem; }
  body.state-account.state-staff .service-product-send {
    display:grid;
    place-items:center;
    width:42px;
    height:40px;
    padding:0;
    border:0;
    border-radius:9px;
    background:#20c99a;
    color:#061a14;
    font-size:1.25rem;
    font-weight:950;
  }
  body.state-account.state-staff .service-product-send span { display:none; }
  body.state-account.state-staff .service-product-send:disabled { opacity:.28; }
  body.state-account.state-staff #productGrid > .service-product-row,
  body.state-account.state-staff #productGrid > .service-product-row:not(:has(.service-product-modifier-dot)) {
    grid-template-columns:28px minmax(0,1fr) 54px 36px 38px !important;
    min-height:47px;
    padding:4px 5px;
  }
  body.state-account.state-staff .service-product-category-name { display:none !important; }
  body.state-account.state-staff .service-product-expand,
  body.state-account.state-staff .service-product-expand-spacer { width:34px; height:36px; }
  body.state-account.state-staff .service-product-add { width:36px; height:36px; min-height:36px; }
  body.state-account.state-staff .service-quick-modifiers {
    margin:-2px 0 2px;
    padding:8px;
    border:2px solid #20c99a;
    border-top:0;
    border-radius:0 0 10px 10px;
    background:#f6fbf8;
  }
  body.state-account.state-staff .service-quick-modifier-heading { display:none; }
  body.state-account.state-staff .service-quick-modifier-group { display:grid; gap:4px; }
  body.state-account.state-staff .service-quick-modifier-group + .service-quick-modifier-group { margin-top:7px; }
  body.state-account.state-staff .service-quick-modifier-group > span { font-size:.65rem; font-weight:900; text-transform:uppercase; }
  body.state-account.state-staff .service-quick-chip { min-height:34px; padding:5px 8px; }
  body.state-account.state-staff .service-quick-chip.removed { text-decoration:line-through; opacity:.55; }
  body.state-account.state-staff #tableGuestStatus { order:2; margin-top:4px; }
  body.state-account.state-staff .service-order-history { padding:7px; }
  body.state-account.state-staff .cart { order:3; }
  body.state-account.state-staff .cart-empty { display:none; }
  body.state-account.state-staff .mobile-cart-drawer {
    --guest:#20c99a;
    position:fixed;
    z-index:230;
    right:7px;
    bottom:7px;
    left:7px;
    overflow:hidden;
    max-height:calc(100dvh - 68px);
    border:2px solid var(--guest);
    border-radius:14px;
    background:#fff;
    box-shadow:0 -10px 35px rgba(6,26,20,.25);
  }
  body.state-account.state-staff .mobile-cart-drawer.guest-color-0 { --guest:#66b9ee; }
  body.state-account.state-staff .mobile-cart-drawer.guest-color-1 { --guest:#ef8b45; }
  body.state-account.state-staff .mobile-cart-drawer.guest-color-2 { --guest:#f2c44d; }
  body.state-account.state-staff .mobile-cart-drawer.guest-color-3 { --guest:#bd9e7b; }
  body.state-account.state-staff .mobile-cart-drawer.guest-color-4 { --guest:#8dcf9c; }
  body.state-account.state-staff .mobile-cart-drawer.guest-color-5 { --guest:#bd91d8; }
  body.state-account.state-staff .mobile-cart-summary {
    display:grid;
    grid-template-columns:38px minmax(0,1fr) auto 20px;
    align-items:center;
    gap:7px;
    width:100%;
    min-height:52px;
    padding:6px 8px;
    border:0;
    background:color-mix(in srgb, var(--guest) 28%, white);
    color:#10211d;
    text-align:left;
  }
  body.state-account.state-staff .mobile-cart-guest { display:grid; place-items:center; width:36px; height:36px; border-radius:9px; background:var(--guest); font-weight:950; }
  body.state-account.state-staff .mobile-cart-summary b { white-space:nowrap; }
  body.state-account.state-staff .mobile-cart-summary i { font-style:normal; font-size:1.1rem; transition:transform .2s; }
  body.state-account.state-staff .mobile-cart-drawer.open .mobile-cart-summary i { transform:rotate(180deg); }
  body.state-account.state-staff .mobile-cart-content { display:none; max-height:calc(100dvh - 130px); overflow:auto; padding:7px; border-top:1px solid #d5dfda; }
  body.state-account.state-staff .mobile-cart-drawer.open .mobile-cart-content { display:block; }
  body.state-account.state-staff .mobile-cart-content .cart-step { display:none; }
  body.state-account.state-staff .mobile-cart-content .cart-line { margin-bottom:6px; }
}

/* Reservation automation and public booking settings */
.owner-dashboard-view .reservation-settings{display:grid;grid-template-columns:minmax(280px,2fr) repeat(3,minmax(145px,1fr)) auto auto;gap:.75rem;align-items:end;padding:1rem;margin-bottom:1rem;border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));border-radius:1rem;background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.owner-dashboard-view .reservation-settings label{display:grid;gap:.35rem}.owner-dashboard-view .reservation-settings label>span{font-size:.72rem;font-weight:850;text-transform:uppercase}.owner-dashboard-view .reservation-settings input,.owner-dashboard-view .reservation-settings select{min-height:2.7rem;border:1px solid var(--line);border-radius:.75rem;padding:.55rem .7rem;background:var(--surface);color:var(--ink)}
.reservation-public-url{display:flex;align-items:center;min-height:2.7rem;border:1px solid var(--line);border-radius:.75rem;overflow:hidden;background:var(--surface)}.reservation-public-url b{padding-left:.7rem;white-space:nowrap;font-size:.8rem;color:var(--muted)}.reservation-public-url input{min-width:8rem;border:0!important;border-radius:0!important}
.owner-dashboard-view .reservation-controls{display:grid;gap:.4rem;min-width:230px}.owner-dashboard-view .reservation-row em{display:block;color:#a14e17;font-style:normal;font-weight:800}.owner-dashboard-view .reservation-row.status-requested,.owner-dashboard-view .reservation-row.status-waitlisted{border-color:#efb94f;background:#fff9e9}
.reservation-mailbox{margin:0 0 1rem;padding:1rem;border:1px solid var(--line);border-radius:1rem;background:var(--surface)}
.reservation-mailbox>header{display:flex;justify-content:space-between;gap:1rem;align-items:center}.reservation-mailbox>header h3{margin:.15rem 0 0}.reservation-mailbox>.meta{margin:.35rem 0 1rem}
.reservation-mail-badge{padding:.35rem .65rem;border-radius:999px;background:var(--theme-accent-soft);font-size:.75rem;font-weight:850;color:var(--theme-deep)}
.reservation-mail-list{display:grid;gap:.65rem;max-height:34rem;overflow:auto;padding-right:.25rem}.reservation-mail-row{padding:.85rem;border:1px solid var(--line);border-left:4px solid var(--line);border-radius:.85rem;background:var(--surface-strong)}.reservation-mail-row.inbound{border-left-color:var(--accent)}.reservation-mail-row.outbound{border-left-color:#87918d}.reservation-mail-row.unread{background:color-mix(in srgb,var(--accent) 8%,var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 28%,transparent)}
.reservation-mail-row>header{display:flex;justify-content:space-between;gap:1rem;align-items:start}.reservation-mail-row>header div{display:grid;gap:.15rem}.reservation-mail-row>header span{font-size:.68rem;font-weight:900;text-transform:uppercase;color:var(--muted)}.reservation-mail-row time{font-size:.75rem;color:var(--muted)}.reservation-mail-row h4{margin:.65rem 0 .25rem}.reservation-mail-row>p{margin:0;white-space:pre-wrap;color:var(--text)}.reservation-mail-row>footer{margin-top:.65rem}.reservation-mail-row>footer form{display:flex;gap:.55rem;align-items:end}.reservation-mail-row textarea{flex:1;min-height:3.2rem;resize:vertical;border:1px solid var(--line);border-radius:.7rem;padding:.6rem;background:var(--surface);color:var(--text)}
@media(max-width:1200px){.owner-dashboard-view .reservation-settings{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.owner-dashboard-view .reservation-settings{grid-template-columns:1fr}.owner-dashboard-view .reservation-controls{grid-column:1/-1;min-width:0}.reservation-mail-row>header,.reservation-mail-row>footer form{align-items:stretch;flex-direction:column}}

:root[data-color-theme="ocean"] { --theme-accent:#199bb5; --theme-accent-hover:#147f96; --theme-accent-soft:#ddf3f7; --theme-on-accent:#06130f; --theme-deep:#071b24; --theme-deep-2:#102e39; --theme-on-deep:#fffdf8; --theme-focus:#8cd5e3; }
:root[data-color-theme="cobalt"] { --theme-accent:#447dea; --theme-accent-hover:#315fc0; --theme-accent-soft:#e4ecfd; --theme-on-accent:#06130f; --theme-deep:#09172c; --theme-deep-2:#152846; --theme-on-deep:#fffdf8; --theme-focus:#a5bff3; }
:root[data-color-theme="plum"] { --theme-accent:#936bdd; --theme-accent-hover:#744fba; --theme-accent-soft:#eee8fa; --theme-on-accent:#06130f; --theme-deep:#1d122d; --theme-deep-2:#302142; --theme-on-deep:#fffdf8; --theme-focus:#c7b2ed; }
:root[data-color-theme="terracotta"] { --theme-accent:#d76b42; --theme-accent-hover:#b85632; --theme-accent-soft:#f9e7df; --theme-on-accent:#06130f; --theme-deep:#2b1510; --theme-deep-2:#44231a; --theme-on-deep:#fffdf8; --theme-focus:#efb39c; }
:root[data-color-theme="berry"] { --theme-accent:#d45378; --theme-accent-hover:#b33f62; --theme-accent-soft:#f9e2e9; --theme-on-accent:#06130f; --theme-deep:#2a1119; --theme-deep-2:#43202a; --theme-on-deep:#fffdf8; --theme-focus:#eca9bd; }
:root[data-color-theme="gold"] { --theme-accent:#d7a928; --theme-accent-hover:#b38a1c; --theme-accent-soft:#f8efd4; --theme-on-accent:#06130f; --theme-deep:#261d08; --theme-deep-2:#3d3113; --theme-on-deep:#fffdf8; --theme-focus:#ead489; }

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--bg);
  color: var(--text);
}

[hidden] {
  display: none !important;
}

button,
input {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.topbar {
  align-items: center;
  background: var(--theme-deep);
  color: #fff;
  display: flex;
  justify-content: space-between;
  min-height: 84px;
  padding: 18px clamp(18px, 4vw, 40px);
}


.brand-lockup {
  align-items: center;
  display: flex;
  gap: 16px;
}

.brand-logo {
  display: block;
  height: 54px;
  width: auto;
}

.brand-logo-tint {
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 15px;
  isolation: isolate;
  line-height: 0;
}

.brand-logo-tint::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: var(--theme-accent);
  mix-blend-mode: color;
}
.topbar h1,
.section-heading h2,
.login-panel h2 {
  letter-spacing: 0;
  margin: 0;
}

.topbar h1 {
  font-size: 28px;
}

.eyebrow {
  color: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 4px;
  opacity: 0.7;
  text-transform: uppercase;
}

.session {
  align-items: center;
  display: flex;
  gap: 12px;
}

.session-badge,
.staff-avatar,
.assignment-badge {
  align-items: center;
  border-radius: 50%;
  display: inline-flex;
  font-size: 14px;
  font-weight: 800;
  height: 42px;
  justify-content: center;
  width: 42px;
}

.session-badge,
.staff-avatar {
  background: #f0c45c;
  color: #1e2825;
}

.app-shell {
  padding: clamp(16px, 3vw, 32px);
}

.panel,
.workspace {
  margin: 0 auto;
  max-width: 1440px;
}

.login-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
  max-width: 760px;
  padding: 24px;
}

.staff-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.staff-card {
  align-items: center;
  background: var(--surface-strong);
  border: 2px solid transparent;
  border-radius: 8px;
  color: var(--text);
  display: flex;
  gap: 12px;
  min-height: 72px;
  padding: 12px;
  text-align: left;
}

.staff-card.active {
  border-color: var(--accent);
}

.staff-card span {
  display: block;
}

.staff-role,
.status-line,
.meta {
  color: var(--muted);
  font-size: 13px;
}

.pin-label,
.note-label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
}

.pin-label input,
.note-label input {
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 48px;
  padding: 0 14px;
}

.primary-action,
.secondary-action,
.status-action,
.tab-button,
.room-tab {
  border-radius: 8px;
  font-weight: 800;
  min-height: 44px;
  padding: 0 16px;
}

.primary-action {
  background: var(--accent);
  color: var(--theme-on-accent);
}

.secondary-action {
  background: var(--ink-soft);
  color: var(--text);
}

.view-tabs,
.room-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.view-tabs {
  margin-bottom: 16px;
}

.tab-button,
.room-tab {
  background: var(--surface);
  color: var(--text);
}

.tab-button.active,
.room-tab.active {
  background: var(--accent);
  color: #fff;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

#serviceView.active {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 420px);
}

.floor-column,
.order-panel,
.station-view,
.manager-view {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.section-heading {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  margin-bottom: 14px;
}

.floor-plan {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(90deg, rgba(23, 33, 31, 0.07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(23, 33, 31, 0.07) 1px, transparent 1px),
    #fbfaf6;
  background-size: 40px 40px;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 420px;
  overflow: auto;
  position: relative;
}

.table-node {
  background: transparent;
  border: 0;
  color: var(--text);
  overflow: visible;
  padding: 0;
  position: absolute;
  text-align: left;
  touch-action: manipulation;
}

.table-surface {
  background: var(--danger-soft);
  border: 2px solid var(--danger);
  border-radius: 8px;
  display: block;
  inset: 0;
  overflow: hidden;
  padding: 28px 14px 12px;
  position: absolute;
}

.table-node.occupied .table-surface {
  background: var(--ok-soft);
  border-color: var(--ok);
}

.table-node.selected .table-surface {
  outline: 4px solid rgba(31, 111, 99, 0.25);
}

.table-header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.table-label {
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 900;
  line-height: 1.05;
}

.assignment-badge {
  background: #233633;
  color: #fff;
  height: 34px;
  width: 34px;
}

.seat-chair,
.seat-choice {
  align-items: center;
  border-radius: 8px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-content: center;
  min-height: 34px;
  min-width: 42px;
}

.seat-chair {
  background: var(--danger);
  color: #fff;
  height: 38px;
  min-height: 38px;
  min-width: 38px;
  position: absolute;
  width: 38px;
  z-index: 2;
}

.seat-chair.occupied {
  background: var(--ok);
}

.seat-picker,
.product-grid,
.cart {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.seat-picker {
  grid-template-columns: repeat(auto-fit, minmax(82px, 1fr));
}

.seat-control {
  display: grid;
  gap: 6px;
}

.seat-choice {
  background: var(--ink-soft);
  color: var(--text);
  width: 100%;
}

.seat-choice.selected {
  background: var(--accent);
  color: #fff;
}

.seat-state {
  background: var(--danger-soft);
  border-radius: 8px;
  color: #81221b;
  font-size: 12px;
  font-weight: 800;
  min-height: 32px;
}

.seat-state.occupied {
  background: var(--ok-soft);
  color: #1b5d31;
}

.product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.product-button {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 70px;
  padding: 10px;
  text-align: left;
}

.product-button strong,
.ticket-title strong {
  display: block;
}

.cart-line,
.ticket,
.summary-tile {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.cart-line {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.cart-line button {
  background: var(--danger-soft);
  border-radius: 8px;
  color: #81221b;
  font-weight: 800;
  min-height: 34px;
  padding: 0 10px;
}

.ticket-list {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ticket {
  display: grid;
  gap: 10px;
}

.ticket-status {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  justify-self: start;
  padding: 4px 9px;
}

.ticket-status.sent {
  background: var(--warn-soft);
  color: #7b4a0e;
}

.ticket-status.in_progress {
  background: #dbe7f4;
  color: #214b72;
}

.ticket-status.ready {
  background: var(--ok-soft);
  color: #1b5d31;
}

.ticket-status.picked_up,
.ticket-status.delivered {
  background: var(--ink-soft);
  color: var(--muted);
}

.ticket-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.status-action {
  background: var(--ink-soft);
  color: var(--text);
}

.summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.summary-tile strong {
  display: block;
  font-size: 32px;
  line-height: 1;
  margin-bottom: 8px;
}

@media (max-width: 980px) {
  #serviceView.active {
    grid-template-columns: 1fr;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .floor-plan {
    min-height: 520px;
  }
}

@media (max-width: 640px) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }
}

.title-meta {
  color: var(--muted);
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-top: 4px;
}

.table-open-items {
  background: rgba(23, 33, 31, 0.78);
  border-radius: 999px;
  bottom: 9px;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 9px;
  position: absolute;
  right: 9px;
}

.modifier-hint {
  background: rgba(31, 111, 99, 0.11);
  border: 1px solid rgba(31, 111, 99, 0.25);
  border-radius: 999px;
  color: var(--accent-strong);
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  margin-top: 8px;
  padding: 3px 8px;
}

.dialog-backdrop {
  align-items: center;
  background: rgba(10, 15, 14, 0.54);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 16px;
  position: fixed;
  z-index: 20;
}

.modifier-dialog {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 28px 90px rgba(0, 0, 0, 0.24);
  display: grid;
  gap: 16px;
  max-height: min(760px, calc(100vh - 32px));
  max-width: 720px;
  overflow: auto;
  padding: 22px;
  width: min(720px, 100%);
}

.dialog-title-row {
  align-items: flex-start;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.dialog-title-row h3 {
  font-size: 28px;
  line-height: 1.1;
  margin: 0 0 4px;
}

.icon-action {
  align-items: center;
  background: var(--ink-soft);
  border-radius: 999px;
  color: var(--text);
  display: inline-flex;
  font-size: 28px;
  font-weight: 300;
  height: 42px;
  justify-content: center;
  line-height: 1;
  width: 42px;
}

.quantity-row {
  align-items: center;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 42px 44px 42px;
  min-height: 56px;
  padding: 8px 10px;
}

.quantity-row button {
  background: var(--ink-soft);
  border-radius: 8px;
  color: var(--text);
  font-size: 22px;
  font-weight: 900;
  height: 40px;
}

.quantity-row strong {
  text-align: center;
}

.modifier-section {
  display: grid;
  gap: 8px;
}

.modifier-section h4 {
  font-size: 18px;
  margin: 0;
}

.modifier-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.modifier-chip {
  background: var(--ink-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  color: var(--text);
  font-weight: 900;
  min-height: 40px;
  padding: 0 13px;
}

.modifier-chip.active,
.modifier-chip.selected {
  background: var(--ok-soft);
  border-color: rgba(47, 138, 76, 0.38);
  color: #164d2b;
}

.modifier-chip.removed {
  background: var(--danger-soft);
  border-color: rgba(188, 63, 53, 0.36);
  color: #81221b;
  text-decoration: line-through;
}

.modifier-preview {
  background: #20312e;
  border-radius: 8px;
  color: #fff;
  display: grid;
  gap: 4px;
  padding: 13px 14px;
}

.modifier-preview span {
  color: rgba(255, 255, 255, 0.82);
}

.dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.ticket-modifier {
  background: rgba(191, 122, 31, 0.12);
  border: 1px solid rgba(191, 122, 31, 0.24);
  border-radius: 8px;
  color: #6d410b;
  font-size: 14px;
  font-weight: 800;
  padding: 9px 10px;
}

@media (max-width: 640px) {
  .modifier-dialog {
    border-radius: 8px;
    padding: 18px;
  }

  .dialog-title-row h3 {
    font-size: 24px;
  }

  .quantity-row {
    grid-template-columns: 1fr 38px 38px 38px;
  }
}


.floor-heading {
  align-items: flex-start;
}

.floor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.floor-editor {
  background: rgba(31, 111, 99, 0.08);
  border: 1px solid rgba(31, 111, 99, 0.25);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin: 12px 0 14px;
  padding: 12px;
}

.floor-editor[hidden] {
  display: none;
}

.table-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.palette-shape {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  cursor: grab;
  display: inline-flex;
  font-weight: 900;
  gap: 9px;
  min-height: 48px;
  padding: 0 13px;
}

.palette-shape:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.palette-icon {
  background: var(--ok-soft);
  border: 2px solid var(--accent);
  display: inline-block;
  height: 24px;
  width: 34px;
}

.palette-square {
  width: 26px;
}

.palette-round {
  border-radius: 999px;
  width: 26px;
}

.palette-oval {
  border-radius: 999px;
}

.floor-help {
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
  margin: 0;
}

.table-inspector {
  border-top: 1px solid rgba(31, 111, 99, 0.24);
  display: grid;
  gap: 12px;
  grid-template-columns: 1.3fr 1fr 0.65fr 0.7fr 0.7fr auto auto;
  padding-top: 12px;
}

.table-inspector[hidden],
.table-inspector label[hidden] {
  display: none;
}

.table-inspector label {
  color: var(--muted);
  display: grid;
  font-size: 12px;
  font-weight: 800;
  gap: 6px;
}

.table-inspector input,
.table-inspector select {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 42px;
  padding: 0 10px;
}

.table-inspector .primary-action,
.table-inspector .danger-action {
  align-self: end;
  min-height: 42px;
}

.danger-action {
  background: var(--danger-soft);
  color: #81221b;
  font-weight: 900;
}

.floor-plan.editing {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px rgba(31, 111, 99, 0.15);
}

.floor-empty {
  color: var(--muted);
  font-weight: 700;
  padding: 18px;
}


.table-node.dragging {
  cursor: grabbing;
  opacity: 0.86;
  z-index: 5;
}

.floor-plan.editing .table-node {
  cursor: grab;
  touch-action: none;
}

.table-drag-handle {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--accent);
  font-weight: 900;
  left: 8px;
  line-height: 1;
  padding: 2px 6px;
  position: absolute;
  top: 8px;
}

.table-shape-label {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
  margin-top: 3px;
  text-transform: uppercase;
}

.floor-plan.editing .table-header {
  padding-left: 28px;
}

@media (max-width: 900px) {
  .floor-editor {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .floor-actions {
    justify-content: flex-start;
  }
}

/* Full-width, readable management workspace. */
body.state-account[data-active-view="manager"] .workspace,
body.state-account .manager-view.active {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

body.state-account:not(.single-view) .view-tabs {
  top: 102px;
  max-height: calc(100vh - 118px);
}

body.state-account .manager-view.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: clamp(16px, 2vw, 24px);
}

body.state-account .manager-view > .section-heading {
  width: 100%;
  min-height: 128px;
  padding: clamp(20px, 2.8vw, 32px);
  border-radius: 24px;
}

body.state-account .manager-view > .section-heading h2 {
  font-size: clamp(2.5rem, 4vw, 4.6rem);
  line-height: 0.95;
}

body.state-account .admin-overview {
  width: 100%;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

body.state-account .admin-action-card {
  min-width: 0;
  min-height: 138px;
  align-content: start;
  gap: 7px;
  padding: 17px;
  border-radius: 19px;
}

body.state-account .admin-action-card::before {
  display: none;
}

body.state-account .admin-action-card strong {
  margin: 8px 0 3px;
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.08;
}

body.state-account .admin-action-card small {
  max-width: 30ch;
  font-size: 0.8rem;
  line-height: 1.35;
}

body.state-account .restaurant-admin,
body.state-account .staff-manager,
body.state-account .menu-manager,
body.state-account .takeaway-manager {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.state-account .restaurant-admin {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  padding: 16px;
  border-radius: 20px;
}

body.state-account .restaurant-admin-grid {
  min-width: 0;
}

body.state-account .restaurant-card {
  min-width: 0;
  min-height: 68px;
  border-radius: 14px;
}

body.state-account .restaurant-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body.state-account .restaurant-card strong,
body.state-account .restaurant-card .meta {
  display: block;
}

body.state-account .restaurant-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.state-account .restaurant-admin > .status-line {
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  body.state-account .admin-overview {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
  }
}

/* Compact service catalog: scan, search and order without card-sized waste. */
body.state-account .product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

body.state-account .service-product-tools {
  position: sticky;
  top: -1px;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(130px, .45fr) auto;
  gap: 8px;
  align-items: end;
  padding: 8px 0 10px;
  background: #071b15;
}

body.state-account .service-product-tools label {
  display: grid;
  gap: 3px;
  color: rgba(255,255,255,.58);
  font-size: .68rem;
  text-transform: uppercase;
}

body.state-account .service-product-tools input,
body.state-account .service-product-tools select {
  width: 100%;
  min-height: 40px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 10px;
  background: rgba(255,255,255,.96);
  color: #07130f;
  padding: 7px 10px;
  font: inherit;
  font-weight: 750;
}

body.state-account .service-product-tools > small {
  padding-bottom: 11px;
  color: rgba(255,255,255,.52);
  white-space: nowrap;
}

body.state-account .product-grid > .product-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(90px, .42fr) auto 24px;
  gap: 10px;
  align-items: center;
  min-height: 44px;
  padding: 7px 10px 7px 12px;
  border-radius: 10px;
  text-align: left;
}

body.state-account .product-grid > .product-button strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .92rem;
}

body.state-account .service-product-category-name {
  overflow: hidden;
  color: #6c7973;
  font-size: .73rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.state-account .product-grid > .product-button .product-card-meta {
  margin: 0;
  color: #183a30;
  font-size: .8rem;
  white-space: nowrap;
}

body.state-account .service-product-modifier-dot {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #def2eb;
  color: #14684e;
  font-weight: 950;
}

@media (max-width: 720px) {
  body.state-account .service-product-tools { grid-template-columns: 1fr; }
  body.state-account .service-product-tools > small { display: none; }
  body.state-account .product-grid > .product-button { grid-template-columns: minmax(0,1fr) auto 22px; }
  body.state-account .service-product-category-name { display: none; }
}

@media (max-width: 700px) {
  body.state-account .admin-overview,
  body.state-account .restaurant-admin {
    grid-template-columns: 1fr;
  }
}

.table-shape-square .table-surface,
.table-shape-rectangle .table-surface {
  border-radius: 8px;
}

.table-shape-round .table-surface {
  border-radius: 999px;
}

.table-shape-oval .table-surface {
  border-radius: 50%;
}

.table-node.dragging {
  cursor: grabbing;
  opacity: 0.86;
  z-index: 5;
}

.floor-plan.editing .table-node {
  cursor: default;
  touch-action: none;
}

.table-drag-handle {
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--accent);
  cursor: grab;
  display: inline-flex;
  font-weight: 900;
  height: 28px;
  justify-content: center;
  left: 8px;
  line-height: 1;
  position: absolute;
  top: 8px;
  width: 30px;
  z-index: 3;
}

.table-shape-label {
  color: var(--muted);
  display: block;
  font-size: 11px;
  font-weight: 800;
  margin-top: 3px;
  text-transform: uppercase;
}

.floor-plan.editing .table-header {
  padding-left: 28px;
}

.table-resize-handle {
  background: #fff;
  border: 2px solid var(--accent);
  border-radius: 4px;
  height: 14px;
  position: absolute;
  width: 14px;
  z-index: 4;
}

.resize-nw { cursor: nwse-resize; left: -7px; top: -7px; }
.resize-ne { cursor: nesw-resize; right: -7px; top: -7px; }
.resize-sw { bottom: -7px; cursor: nesw-resize; left: -7px; }
.resize-se { bottom: -7px; cursor: nwse-resize; right: -7px; }

.table-placement-ghost {
  background: rgba(31, 111, 99, 0.16);
  border: 2px dashed var(--accent);
  pointer-events: none;
  position: fixed;
  z-index: 30;
}

.table-placement-ghost.table-shape-round {
  border-radius: 999px;
}

.table-placement-ghost.table-shape-oval {
  border-radius: 50%;
}

.table-open-items {
  z-index: 2;
}

@media (max-width: 900px) {
  .table-inspector {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


.account-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 18px;
  margin-bottom: 18px;
  max-width: 1440px;
  padding: 24px;
}

.account-login-grid {
  align-items: end;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1fr) auto;
}

.account-login-grid label,
.menu-form label,
.table-inspector label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
}

.account-login-grid input,
.menu-form input,
.menu-form select,
.menu-form textarea,
.table-inspector input,
.table-inspector select {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 46px;
  padding: 0 12px;
}

.menu-form textarea {
  line-height: 1.45;
  min-height: 108px;
  padding: 10px 12px;
  resize: vertical;
}

.seat-layout-controls {
  align-items: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(72px, 1fr)) auto;
  padding: 12px;
}

.seat-layout-controls .field-caption,
.seat-layout-controls .meta {
  grid-column: 1 / -1;
}

.seat-layout-controls input {
  min-height: 38px;
}

.seat-chair.editable {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.72), 0 0 0 5px rgba(31, 111, 99, 0.35);
  cursor: grab;
  touch-action: none;
}

.seat-chair.dragging {
  cursor: grabbing;
  transform: scale(1.08);
  z-index: 7;
}

.menu-manager {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 22px;
}

.menu-manager-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(300px, 460px) minmax(0, 1fr);
}

.menu-form {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px;
}

.menu-form .wide-field,
.menu-form-actions {
  grid-column: 1 / -1;
}

.menu-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.menu-list {
  display: grid;
  gap: 12px;
}

.menu-category-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.menu-category-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  padding: 12px 14px;
}

.menu-products {
  display: grid;
  gap: 8px;
  padding: 10px;
}

.menu-product-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 70px;
  padding: 12px;
  text-align: left;
}

.menu-product-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 111, 99, 0.12);
}

.menu-product-meta {
  background: rgba(31, 111, 99, 0.1);
  border-radius: 999px;
  color: var(--accent-strong);
  flex: 0 0 auto;
  font-size: 12px;
  font-weight: 900;
  padding: 4px 9px;
}

@media (max-width: 980px) {
  .account-login-grid,
  .menu-manager-grid {
    grid-template-columns: 1fr;
  }

  .seat-layout-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .menu-form {
    grid-template-columns: 1fr;
  }
}


/* Header/account gate refinements */
.brand-block {
  display: grid;
  gap: 2px;
}

.header-subtitle {
  color: rgba(255, 255, 255, 0.78);
  font-weight: 700;
  margin: 2px 0 0;
}

.header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: flex-end;
}

.header-account-panel,
.header-account-session {
  align-items: end;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(360px, 1fr) auto;
  padding: 10px;
}

.header-account-session {
  align-items: center;
  grid-template-columns: auto minmax(180px, auto) auto;
}

.header-login-fields {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(160px, 1fr) minmax(140px, 0.8fr);
}

.header-account-panel label {
  color: rgba(255, 255, 255, 0.72);
  display: grid;
  font-size: 11px;
  font-weight: 800;
  gap: 5px;
}

.header-account-panel input {
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text);
  min-height: 40px;
  padding: 0 11px;
}

.header-status {
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 700;
  grid-column: 1 / -1;
  margin: 0;
}

.locked-panel {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  display: grid;
  gap: 8px;
  min-height: 220px;
  padding: 30px;
  text-align: center;
}

.locked-panel h2 {
  margin: 0;
}

.restaurant-admin {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
  padding: 16px;
}

.restaurant-admin-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.restaurant-card {
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  gap: 12px;
  min-height: 76px;
  padding: 12px;
}

.restaurant-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 111, 99, 0.13);
}

.restaurant-initials {
  align-items: center;
  background: var(--accent);
  border-radius: 8px;
  color: #fff;
  display: inline-flex;
  font-weight: 900;
  height: 44px;
  justify-content: center;
  width: 44px;
}

@media (max-width: 1120px) {
  .topbar {
    align-items: stretch;
    flex-direction: column;
  }

  .header-actions {
    justify-content: flex-start;
  }

  .header-account-panel {
    width: 100%;
  }
}

@media (max-width: 700px) {
  .header-account-panel,
  .header-account-session,
  .header-login-fields {
    grid-template-columns: 1fr;
  }

  .header-actions {
    align-items: stretch;
  }

  .session {
    justify-content: flex-start;
  }
}


.admin-overview {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 22px;
}

.admin-action-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  display: grid;
  gap: 6px;
  min-height: 126px;
  padding: 16px;
  text-align: left;
}

.admin-action-card:hover,
.admin-action-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 111, 99, 0.12);
}

.admin-action-card span {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-action-card strong {
  font-size: 20px;
}

.admin-action-card small {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.35;
}

.staff-manager,
.takeaway-manager {
  border-top: 1px solid var(--line);
  margin-top: 22px;
  padding-top: 22px;
}

.staff-manager-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(300px, 460px) minmax(0, 1fr);
}

.staff-form {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  padding: 16px;
}

.staff-form label {
  color: var(--muted);
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 7px;
}

.staff-form input,
.staff-form select {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--text);
  min-height: 46px;
  padding: 0 12px;
}

.staff-form-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  grid-column: 1 / -1;
}

.staff-admin-list {
  display: grid;
  gap: 10px;
}

.staff-admin-card {
  align-items: center;
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  min-height: 72px;
  padding: 12px;
}

.staff-admin-card.active {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 111, 99, 0.12);
}

.compact-action {
  min-height: 38px;
  padding: 0 12px;
}

.takeaway-card {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 10px;
  max-width: 720px;
  padding: 16px;
}

.tab-button.disabled,
.tab-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

@media (max-width: 1100px) {
  .admin-overview {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .staff-manager-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .admin-overview,
  .staff-form {
    grid-template-columns: 1fr;
  }
}
/* Service workflow and station board refinements */
.login-panel {
  max-width: 960px;
}

.staff-start-intro {
  align-items: start;
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.staff-start-intro h2 {
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1;
}

.staff-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.staff-start-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.staff-start-grid .staff-card {
  box-shadow: 0 10px 24px rgba(24, 32, 29, 0.07);
  min-height: 92px;
  padding: 16px;
}

.staff-selected-note,
.table-care-note {
  align-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 8px;
  display: flex;
  gap: 12px;
  padding: 12px;
}

.staff-selected-note {
  justify-content: space-between;
}

.table-care-note {
  margin-bottom: 8px;
}

.table-care-note.own {
  background: var(--ok-soft);
  border-color: color-mix(in srgb, var(--ok) 40%, var(--line));
}

.mini-avatar {
  flex: 0 0 auto;
  height: 34px;
  width: 34px;
}

.table-care-note span span,
.staff-selected-note span span {
  display: block;
}

.station-board {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.ticket-column {
  align-content: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 8px;
  display: grid;
  gap: 12px;
  padding: 14px;
}

.station-column-header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-bottom: 10px;
}

.station-column-header h3 {
  font-size: clamp(24px, 3vw, 36px);
  margin: 0;
}

.station-chip {
  background: var(--ink-soft);
  border-radius: 999px;
  color: var(--muted);
  display: inline-flex;
  font-size: 12px;
  font-weight: 800;
  padding: 4px 10px;
  text-transform: uppercase;
}

.large-ticket {
  border-width: 2px;
  font-size: 18px;
}

.large-ticket .ticket-title strong {
  font-size: 24px;
  line-height: 1.1;
}

.large-ticket .meta {
  font-size: 15px;
}

.large-ticket.needs-timing {
  border-color: var(--warn);
}

.timing-warning {
  background: var(--warn-soft);
  border-radius: 8px;
  color: #6c3e0c;
  font-size: 14px;
  font-weight: 800;
  padding: 8px 10px;
}

@media (max-width: 760px) {
  .staff-start-intro {
    display: grid;
  }

  .station-board {
    grid-template-columns: 1fr;
  }
}
.staff-start-intro,
.staff-start-grid,
.staff-selected-note {
  grid-column: 1 / -1;
}

.staff-start-grid {
  display: grid;
  gap: 12px;
}

.station-column-header strong {
  font-size: clamp(24px, 3vw, 36px);
}


.language-switcher {
  align-items: center;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
}

.language-button {
  align-items: center;
  background: color-mix(in srgb, var(--surface) 86%, #fff);
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  gap: 6px;
  min-height: 44px;
  padding: 0 12px;
}

.language-button.active {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  border-color: var(--accent);
  color: var(--accent-strong);
}

@media (max-width: 780px) {
  .language-switcher {
    justify-content: flex-end;
    width: 100%;
  }

  .language-button {
    min-height: 38px;
    padding: 0 10px;
  }
}
/* Tablavo visible app-shell rebuild */
body {
  background: radial-gradient(circle at 12% 0%, rgba(31, 111, 99, 0.13), transparent 32rem), linear-gradient(180deg, #f4f1ea 0%, #fbfaf6 52%, #f4f1ea 100%);
}

.topbar {
  background: linear-gradient(135deg, #132622 0%, #213b35 72%, #152923 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 18px 38px rgba(20, 35, 32, 0.18);
  gap: 24px;
  min-height: 118px;
  position: sticky;
  top: 0;
  z-index: 80;
}

.brand-lockup {
  min-width: min(520px, 100%);
}

.brand-logo {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  height: 76px;
  object-fit: contain;
  padding: 4px;
}

.topbar h1 {
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1;
}

.header-subtitle {
  font-size: 18px;
}

.header-actions {
  flex: 1;
  min-width: min(560px, 100%);
}

.header-account-panel {
  align-items: end;
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 40px rgba(4, 16, 13, 0.14);
  grid-template-columns: minmax(380px, 1fr) auto;
  max-width: 820px;
  width: min(820px, 100%);
}

.header-account-session {
  backdrop-filter: blur(14px);
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
}

.header-login-fields input:focus,
.pin-label input:focus,
.account-login-grid input:focus,
.menu-form input:focus,
.menu-form select:focus,
.menu-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(31, 111, 99, 0.14);
  outline: none;
}

.app-shell {
  padding-block: clamp(22px, 4vw, 52px);
}

.locked-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 245, 236, 0.96)), radial-gradient(circle at 85% 18%, rgba(31, 111, 99, 0.14), transparent 18rem);
  border-radius: 18px;
  gap: 14px;
  min-height: 360px;
  padding: clamp(32px, 6vw, 70px);
}

.locked-panel h2 {
  font-size: clamp(34px, 5vw, 64px);
  letter-spacing: 0;
  line-height: 1;
  max-width: 920px;
}

.locked-panel .meta {
  font-size: clamp(16px, 2vw, 22px);
  line-height: 1.5;
  max-width: 760px;
  justify-self: center;
}

.login-panel {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(252, 250, 245, 0.98)), radial-gradient(circle at top right, rgba(31, 111, 99, 0.13), transparent 22rem);
  border-radius: 18px;
  gap: 22px;
  max-width: 1040px;
  padding: clamp(24px, 4vw, 44px);
}

.login-panel > div:first-child {
  display: grid;
  gap: 6px;
}

.login-panel h2 {
  font-size: clamp(34px, 5vw, 58px);
  line-height: 1;
}

.staff-start-intro {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  border-radius: 14px;
  padding: 16px;
}

.staff-start-intro strong {
  font-size: clamp(22px, 3vw, 34px);
}

.staff-start-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.staff-card {
  border-color: var(--line);
  border-radius: 16px;
  min-height: 108px;
  transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease;
}

.staff-card:hover,
.staff-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 12px 28px rgba(31, 111, 99, 0.14);
  outline: none;
  transform: translateY(-1px);
}

.staff-card.active {
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(31, 111, 99, 0.12);
}

.staff-card .staff-avatar,
.session-badge,
.staff-avatar {
  font-size: 17px;
  height: 52px;
  width: 52px;
}

.pin-label {
  background: var(--surface-strong);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
}

.pin-label input {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-align: center;
}

.login-panel > .primary-action {
  justify-self: start;
  min-height: 56px;
  min-width: 210px;
}

.view-tabs {
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 28px rgba(24, 32, 29, 0.08);
  margin-bottom: 22px;
  padding: 8px;
  position: sticky;
  top: 134px;
  z-index: 50;
}

.tab-button {
  border: 1px solid transparent;
  border-radius: 12px;
  font-size: 18px;
  min-height: 58px;
  padding-inline: 26px;
}

.tab-button.active {
  box-shadow: 0 10px 24px rgba(31, 111, 99, 0.2);
}

.floor-column,
.order-panel,
.station-view,
.manager-view {
  border-radius: 18px;
  padding: clamp(18px, 2vw, 28px);
}

.section-heading h2,
.order-panel h2,
.station-column-header strong {
  font-size: clamp(28px, 3vw, 42px);
}

.state-account:not(.state-staff) .login-panel {
  margin-top: clamp(12px, 3vw, 32px);
}

@media (max-width: 1120px) {
  .topbar {
    position: static;
  }

  .view-tabs {
    top: 0;
  }

  .header-account-panel {
    max-width: none;
  }
}

@media (max-width: 760px) {
  .brand-logo {
    height: 58px;
  }

  .topbar h1 {
    font-size: 30px;
  }

  .header-subtitle {
    font-size: 15px;
  }

  .header-account-panel,
  .header-account-session,
  .header-login-fields {
    grid-template-columns: 1fr;
  }

  .locked-panel,
  .login-panel {
    border-radius: 14px;
  }

  .tab-button {
    flex: 1 1 46%;
    font-size: 16px;
    min-height: 50px;
  }
}


/* Role-aware compact shell: operational staff should see an app, not the setup console. */
body.state-account .topbar {
  min-height: 76px;
  padding-block: 10px;
}

body.state-account .brand-lockup {
  min-width: 0;
}

body.state-account .brand-logo {
  height: 50px;
  max-width: 210px;
}

body.state-account .topbar h1 {
  font-size: clamp(22px, 2.2vw, 32px);
}

body.state-account .header-subtitle,
body.state-account .eyebrow {
  font-size: 13px;
}

body.state-account .header-actions {
  align-items: center;
  display: flex;
  flex: 0 1 auto;
  gap: 10px;
  justify-content: flex-end;
  min-width: 0;
}

body.state-account .language-switcher {
  display: none;
}

body.state-account .header-account-session {
  border-radius: 12px;
  gap: 10px;
  min-height: 52px;
  padding: 8px 10px;
}

body.state-account .header-account-session .secondary-action {
  min-height: 40px;
  padding-inline: 14px;
}

body.state-account .session {
  gap: 8px;
}

body.state-account .session-badge,
body.state-account .staff-avatar {
  height: 42px;
  width: 42px;
}

body.state-account .view-tabs {
  top: 84px;
}

body:not(.can-manage) .floor-actions,
body:not(.can-manage) #floorEditor,
body:not(.can-manage) #managerView,
body:not(.can-manage) [data-view="manager"],
body:not(.can-manage) [data-manager-focus] {
  display: none !important;
}

body:not(.can-manage) .section-heading.floor-heading {
  align-items: flex-start;
}

body:not(.can-manage) .floor-column,
body:not(.can-manage) .order-panel,
body:not(.can-manage) .station-view {
  box-shadow: 0 10px 24px rgba(24, 32, 29, 0.08);
}

@media (max-width: 760px) {
  body.state-account .topbar {
    align-items: flex-start;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
    min-height: auto;
    padding: 12px 14px;
    position: sticky;
  }

  body.state-account .brand-logo {
    height: 46px;
    max-width: 190px;
  }

  body.state-account .brand-lockup {
    gap: 10px;
  }

  body.state-account .header-actions {
    justify-content: space-between;
    width: 100%;
  }

  body.state-account .header-account-session {
    flex: 1 1 auto;
    min-width: 0;
  }

  body.state-account .header-account-session span:nth-child(2),
  body.state-account .session span:nth-child(2) {
    min-width: 0;
  }

  body.state-account .header-account-session strong,
  body.state-account .session strong,
  body.state-account .staff-role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.state-account .view-tabs {
    top: 118px;
  }
}


/* Tablavo service workspace refinement */
body.state-account .topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: 64px;
  padding: 10px clamp(14px, 2.2vw, 28px);
  gap: 14px;
  box-shadow: 0 8px 24px rgba(23, 33, 31, 0.16);
}

body.state-account .brand-lockup {
  gap: 12px;
}

body.state-account .brand-logo {
  height: 44px;
  max-width: 170px;
  object-fit: contain;
}

body.state-account .topbar h1 {
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.05;
}

body.state-account .topbar .eyebrow,
body.state-account .header-subtitle,
body.state-account .session small {
  font-size: 12px;
}

body.state-account .header-actions {
  gap: 10px;
}

body.state-account .header-account-session {
  min-height: 44px;
  padding: 6px 8px;
}

body.state-account .header-account-session .session-badge,
body.state-account .session .staff-avatar,
body.state-account .session .session-badge {
  height: 38px;
  width: 38px;
}

body.state-account .header-account-session button,
body.state-account .session button {
  min-height: 38px;
  padding: 8px 14px;
}

body.state-account .app-shell {
  padding: clamp(10px, 1.5vw, 18px);
}

body.single-view .view-tabs {
  display: none;
}

body.state-account:not(.single-view) .view-tabs {
  margin-bottom: 12px;
  padding: 4px;
  border-radius: 12px;
  top: 72px;
}

body.state-account:not(.single-view) .tab-button {
  min-height: 44px;
  padding-inline: 16px;
  font-size: 15px;
}

body.state-account #serviceView.active {
  align-items: start;
  gap: 12px;
  grid-template-columns: minmax(620px, 1fr) minmax(300px, 360px);
}

body.state-account .floor-column,
body.state-account .order-panel,
body.state-account .station-view,
body.state-account .manager-view {
  border-radius: 12px;
  padding: 14px;
  box-shadow: 0 8px 22px rgba(23, 33, 31, 0.09);
}

body.state-account .section-heading {
  margin-bottom: 10px;
}

body.state-account .section-heading h2 {
  font-size: clamp(24px, 2vw, 34px);
}

body.state-account .floor-plan {
  aspect-ratio: auto;
  min-height: calc(100vh - 250px);
}

body.state-account .order-panel {
  position: sticky;
  top: 82px;
  max-height: calc(100vh - 96px);
  overflow: auto;
}

body.state-account .order-panel .section-heading {
  align-items: start;
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

body.state-account #selectedTableTitle {
  min-width: 0;
}

body.state-account #assignButton {
  justify-self: stretch;
  min-height: 44px;
}

body.state-account .seat-picker {
  display: block;
  margin-bottom: 14px;
}

body.state-account .table-care-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  margin: 0 0 10px;
  padding: 10px;
  border: 1px solid rgba(47, 142, 92, 0.28);
  border-radius: 10px;
  background: var(--ok-soft);
  color: var(--text);
  box-sizing: border-box;
}

body.state-account .table-care-note .staff-avatar {
  align-self: center;
}

body.state-account .seat-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.state-account .seat-choice,
body.state-account .seat-state {
  min-height: 46px;
}

body.state-account .product-grid {
  grid-template-columns: 1fr;
  max-height: 340px;
  overflow: auto;
  padding-right: 4px;
}

body.state-account .table-surface {
  padding: 18px 12px 10px;
}

body.state-account .table-label {
  font-size: clamp(18px, 1.7vw, 22px);
}

body.state-account .assignment-badge {
  height: 40px;
  width: 40px;
}

@media (max-width: 980px) {
  body.state-account #serviceView.active {
    grid-template-columns: 1fr;
  }

  body.state-account .order-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 760px) {
  body.state-account .topbar {
    grid-template-columns: 1fr;
    padding: 10px 12px;
  }

  body.state-account .header-actions {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  body.state-account .brand-logo {
    height: 40px;
    max-width: 150px;
  }

  body.state-account .floor-plan {
    min-height: 420px;
  }

  body.state-account .seat-choice-grid,
  body.state-account .product-grid {
    grid-template-columns: 1fr;
  }
}

/* Tablavo cockpit reboot */
:root {
  --cockpit-green: #21c997;
  --cockpit-green-2: #0e7e68;
  --cockpit-ink: #07110f;
  --cockpit-ink-2: #10221d;
  --cockpit-soft: #f5f1e8;
  --cockpit-panel: rgba(255, 255, 255, 0.94);
  --cockpit-line: rgba(17, 34, 29, 0.12);
  --cockpit-shadow: 0 26px 70px rgba(10, 45, 36, 0.18);
}

body.state-account {
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 14% -8%, rgba(33, 201, 151, 0.28), transparent 34rem),
    radial-gradient(circle at 96% 12%, rgba(245, 191, 73, 0.14), transparent 28rem),
    linear-gradient(135deg, #07110f 0%, #10231e 36%, #f5f1e8 36%, #f7f4ec 100%);
}

body.state-account .topbar {
  position: sticky;
  top: 0;
  z-index: 120;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 86px;
  padding: 12px clamp(18px, 3vw, 44px);
  background: rgba(7, 17, 15, 0.84);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(22px);
}

body.state-account .brand-lockup {
  min-width: 0;
  gap: 18px;
}

body.state-account .brand-logo {
  width: clamp(172px, 18vw, 260px);
  height: 64px;
  max-width: none;
  max-height: none;
  padding: 6px 10px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.26);
}

body.state-account .topbar .eyebrow {
  color: rgba(117, 229, 188, 0.92);
  letter-spacing: 0.1em;
}

body.state-account .topbar h1 {
  color: #fff;
  font-size: clamp(22px, 2.8vw, 42px);
  line-height: 0.98;
  letter-spacing: 0;
}

body.state-account .header-subtitle {
  color: rgba(226, 238, 232, 0.74);
  font-weight: 800;
}

body.state-account .header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}

body.state-account .language-switcher {
  display: none !important;
}

body.state-account .header-account-panel {
  max-width: min(720px, 52vw);
  padding: 8px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.14);
}

body.state-account .header-account-panel input,
body.state-account .pin-label input,
body.state-account input,
body.state-account select,
body.state-account textarea {
  border-radius: 16px;
}

body.state-account .header-account-session,
body.state-account .session {
  min-height: 56px;
  padding: 8px 10px;
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

body.state-account .header-account-session strong,
body.state-account .session strong {
  color: #fff;
}

body.state-account .session .meta,
body.state-account .header-account-session .staff-role {
  color: rgba(226, 238, 232, 0.62);
}

body.state-account .session-badge,
body.state-account .staff-avatar {
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.20);
}

body.state-account .primary-action,
body.state-account .tab-button.active,
body.state-account .room-tab.active,
body.state-account .admin-action-card:hover,
body.state-account .product-card:hover {
  background: linear-gradient(135deg, #26d6a1, #14b88a);
  color: #06110f;
}

body.state-account .app-shell {
  max-width: none;
  width: 100%;
  margin: 0;
  padding: 22px 28px 34px 118px;
}

body.state-account .workspace {
  max-width: none;
  width: 100%;
  margin: 0;
}

body.state-account .view-tabs,
body.single-view.state-account .view-tabs,
body.state-account:not(.single-view) .view-tabs {
  position: fixed;
  left: 22px;
  top: 112px;
  bottom: 26px;
  z-index: 90;
  display: flex !important;
  flex-direction: column;
  gap: 10px;
  width: 76px;
  margin: 0;
  padding: 10px;
  border-radius: 30px;
  background: rgba(7, 17, 15, 0.86);
  border: 1px solid rgba(255, 255, 255, 0.11);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(20px);
}

body.state-account .tab-button,
body.state-account:not(.single-view) .tab-button {
  position: relative;
  width: 56px;
  height: 56px;
  min-height: 56px;
  padding: 0;
  border-radius: 20px;
  display: grid;
  place-items: center;
  color: rgba(230, 240, 235, 0.86);
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.10);
  font-size: 0;
}

body.state-account .tab-button::before {
  content: attr(data-icon);
  font-size: 15px;
  font-weight: 950;
  letter-spacing: 0.02em;
}

body.state-account .tab-button::after {
  content: attr(data-label);
  position: absolute;
  left: 66px;
  top: 50%;
  transform: translateY(-50%) translateX(-8px);
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  padding: 9px 12px;
  border-radius: 999px;
  color: #06110f;
  background: #f6fff9;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
  font-size: 13px;
  font-weight: 900;
  transition: 160ms ease;
}

body.state-account .tab-button:hover::after,
body.state-account .tab-button:focus-visible::after {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

body.state-account .tab-button.active {
  border-color: rgba(38, 214, 161, 0.72);
  box-shadow: 0 16px 34px rgba(33, 201, 151, 0.32);
}

body.state-account #serviceView.active {
  display: grid;
  grid-template-columns: minmax(680px, 1fr) minmax(390px, 450px);
  gap: 22px;
  align-items: start;
}

body.state-account .floor-column,
body.state-account .order-panel,
body.state-account .station-view,
body.state-account .manager-view,
body.state-account .login-panel,
body.state-account .locked-panel {
  border-radius: 30px;
  border: 1px solid rgba(13, 35, 29, 0.10);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--cockpit-shadow);
}

body.state-account .floor-column {
  min-height: calc(100vh - 152px);
  padding: clamp(18px, 2vw, 28px);
  overflow: hidden;
}

body.state-account .floor-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}

body.state-account .floor-heading h2,
body.state-account #selectedTableTitle,
body.state-account .section-heading h2 {
  font-size: clamp(34px, 4.4vw, 68px);
  line-height: 0.96;
  letter-spacing: -0.01em;
}

body.state-account .floor-heading .eyebrow,
body.state-account .order-panel .eyebrow,
body.state-account .station-view .eyebrow,
body.state-account .manager-view .eyebrow {
  color: rgba(13, 35, 29, 0.58);
}

body.state-account .floor-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

body.state-account .floor-actions .secondary-action,
body.state-account .secondary-action,
body.state-account .danger-action {
  min-height: 46px;
  border-radius: 16px;
  background: #edf2ee;
  color: #0b1714;
  border: 1px solid rgba(13, 35, 29, 0.08);
}

body.state-account .room-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}

body.state-account .room-tab {
  min-height: 48px;
  border-radius: 16px;
  padding: 10px 18px;
}

body.state-account .floor-plan {
  min-height: calc(100vh - 330px);
  border-radius: 24px;
  border: 1px solid rgba(13, 35, 29, 0.13);
  background-color: #fdfbf5;
  background-image:
    linear-gradient(rgba(9, 27, 22, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(9, 27, 22, 0.055) 1px, transparent 1px),
    radial-gradient(circle at 80% 18%, rgba(33, 201, 151, 0.10), transparent 18rem);
  background-size: 44px 44px, 44px 44px, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

body.state-account .table-surface {
  border-width: 2px;
  border-radius: 22px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.88), rgba(238, 246, 238, 0.86));
  box-shadow: 0 18px 34px rgba(23, 33, 31, 0.13);
}

body.state-account .floor-table.assigned .table-surface,
body.state-account .table-surface.assigned {
  background: linear-gradient(160deg, rgba(221, 242, 222, 0.96), rgba(190, 231, 201, 0.90));
  border-color: rgba(47, 142, 92, 0.72);
}

body.state-account .floor-table.busy .table-surface,
body.state-account .table-surface.busy {
  background: linear-gradient(160deg, rgba(255, 232, 225, 0.98), rgba(248, 201, 191, 0.90));
  border-color: rgba(188, 63, 53, 0.74);
}

body.state-account .table-label {
  color: #10211d;
  font-size: clamp(24px, 2.4vw, 38px);
  letter-spacing: -0.01em;
}

body.state-account .table-shape {
  color: rgba(16, 33, 29, 0.58);
  font-size: 12px;
  letter-spacing: 0.05em;
}

body.state-account .table-seat,
body.state-account .seat-marker {
  border-radius: 16px;
  box-shadow: 0 10px 22px rgba(141, 43, 34, 0.20);
}

body.state-account .assignment-badge {
  background: #10211d;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.58);
}

body.state-account .order-panel {
  position: sticky;
  top: 108px;
  max-height: calc(100vh - 132px);
  overflow: auto;
  padding: 24px;
  color: #f7fbf8;
  background:
    radial-gradient(circle at 90% 0%, rgba(33, 201, 151, 0.22), transparent 20rem),
    linear-gradient(180deg, #10211d, #08110f);
  border-color: rgba(255, 255, 255, 0.10);
}

body.state-account .order-panel .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

body.state-account .order-panel h2,
body.state-account .order-panel strong,
body.state-account .order-panel label {
  color: #fff;
}

body.state-account .order-panel .meta,
body.state-account .order-panel .staff-role {
  color: rgba(226, 238, 232, 0.70);
}

body.state-account #assignButton {
  justify-self: stretch;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.12);
}

body.state-account #assignButton:not(:disabled) {
  background: linear-gradient(135deg, #26d6a1, #14b88a);
  color: #06110f;
}

body.state-account .seat-picker {
  display: grid;
  gap: 12px;
}

body.state-account .seat-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

body.state-account .seat-choice,
body.state-account .seat-state,
body.state-account .product-card,
body.state-account .cart-item {
  border-radius: 18px;
}

body.state-account .product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-height: min(38vh, 420px);
  overflow: auto;
  padding: 2px 4px 2px 0;
}

body.state-account .product-card {
  background: rgba(255, 255, 255, 0.92);
  color: #10211d;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 108px;
}

body.state-account .product-card .meta {
  color: rgba(16, 33, 29, 0.62);
}

body.state-account .note-label input {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.13);
}

body.state-account .login-panel {
  max-width: 1040px;
  margin: 38px auto;
  padding: clamp(24px, 4vw, 44px);
  display: grid;
  grid-template-columns: minmax(260px, 0.76fr) minmax(320px, 1.24fr);
  gap: clamp(22px, 4vw, 54px);
  align-items: start;
  background:
    radial-gradient(circle at 0% 0%, rgba(33, 201, 151, 0.22), transparent 22rem),
    rgba(255, 255, 255, 0.94);
}

body.state-account .login-panel > div:first-child::after {
  content: 'Choose your shift profile. Admins can continue into setup; service, bar and kitchen users only see their station.';
  display: block;
  margin-top: 16px;
  color: rgba(16, 33, 29, 0.62);
  font-weight: 750;
  line-height: 1.5;
}

body.state-account .staff-grid {
  display: grid;
  gap: 14px;
}

body.state-account .staff-start-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.state-account .staff-card {
  border-radius: 22px;
  min-height: 86px;
  padding: 14px;
}

body.state-account .manager-view.active {
  display: grid;
  gap: 18px;
  padding: clamp(18px, 2vw, 28px);
}

body.state-account .manager-view > .section-heading {
  min-height: 190px;
  padding: clamp(24px, 4vw, 46px);
  border-radius: 30px;
  background:
    linear-gradient(120deg, rgba(7, 17, 15, 0.92), rgba(17, 49, 41, 0.84)),
    radial-gradient(circle at 92% 10%, rgba(33, 201, 151, 0.24), transparent 22rem);
  color: #fff;
  align-items: end;
}

body.state-account .manager-view > .section-heading h2 {
  color: #fff;
}

body.state-account .admin-overview {
  display: grid;
  grid-template-columns: repeat(4, minmax(180px, 1fr));
  gap: 14px;
}

body.state-account .admin-action-card {
  position: relative;
  min-height: 170px;
  padding: 20px;
  border-radius: 24px;
  background: #fff;
  border: 1px solid rgba(13, 35, 29, 0.10);
  box-shadow: 0 18px 46px rgba(10, 45, 36, 0.10);
  overflow: hidden;
}

body.state-account .admin-action-card::before {
  content: '';
  position: absolute;
  inset: auto 18px 18px auto;
  width: 52px;
  height: 52px;
  border-radius: 18px;
  background: rgba(33, 201, 151, 0.14);
}

body.state-account .admin-action-card span {
  color: var(--cockpit-green-2);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

body.state-account .admin-action-card strong {
  display: block;
  margin: 14px 0 8px;
  font-size: 24px;
  line-height: 1.05;
}

body.state-account .restaurant-admin,
body.state-account .staff-manager,
body.state-account .menu-manager,
body.state-account .takeaway-manager,
body.state-account .summary-panel {
  border-radius: 28px;
  background: #fff;
  border: 1px solid rgba(13, 35, 29, 0.10);
  box-shadow: 0 16px 42px rgba(10, 45, 36, 0.08);
  padding: 22px;
}

body.state-account .ticket-list {
  grid-template-columns: repeat(2, minmax(300px, 1fr));
  gap: 18px;
}

body.state-account .ticket-column {
  min-height: 360px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 16px 42px rgba(10, 45, 36, 0.08);
}

@media (max-width: 1180px) {
  body.state-account #serviceView.active {
    grid-template-columns: 1fr;
  }

  body.state-account .order-panel {
    position: static;
    max-height: none;
  }

  body.state-account .admin-overview {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 820px) {
  body.state-account {
    background: #f7f4ec;
  }

  body.state-account .topbar {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 12px 14px;
  }

  body.state-account .brand-logo {
    width: 146px;
    height: 48px;
  }

  body.state-account .topbar h1 {
    font-size: 24px;
  }

  body.state-account .header-actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  body.state-account .header-account-session,
  body.state-account .session {
    width: 100%;
    box-sizing: border-box;
  }

  body.state-account .app-shell {
    padding: 14px 12px 96px;
  }

  body.state-account .view-tabs,
  body.single-view.state-account .view-tabs,
  body.state-account:not(.single-view) .view-tabs {
    top: auto;
    left: 50%;
    right: auto;
    bottom: 14px;
    transform: translateX(-50%);
    width: auto;
    max-width: calc(100vw - 24px);
    height: 72px;
    flex-direction: row;
    border-radius: 26px;
    padding: 8px;
  }

  body.state-account .tab-button,
  body.state-account:not(.single-view) .tab-button {
    width: 58px;
    height: 56px;
    min-height: 56px;
  }

  body.state-account .tab-button::after {
    display: none;
  }

  body.state-account .floor-column,
  body.state-account .order-panel,
  body.state-account .station-view,
  body.state-account .manager-view,
  body.state-account .login-panel {
    border-radius: 24px;
    padding: 16px;
  }

  body.state-account .floor-heading {
    grid-template-columns: 1fr;
  }

  body.state-account .floor-heading h2,
  body.state-account #selectedTableTitle,
  body.state-account .section-heading h2 {
    font-size: clamp(32px, 12vw, 52px);
  }

  body.state-account .floor-actions {
    justify-content: stretch;
  }

  body.state-account .floor-actions .secondary-action {
    flex: 1 1 100%;
  }

  body.state-account .floor-plan {
    min-height: 520px;
  }

  body.state-account .product-grid,
  body.state-account .seat-choice-grid,
  body.state-account .staff-start-grid,
  body.state-account .admin-overview,
  body.state-account .ticket-list {
    grid-template-columns: 1fr;
  }

  body.state-account .login-panel {
    grid-template-columns: 1fr;
    margin: 16px auto;
  }
}

/* Tablavo service cockpit clarity pass */
body.state-account {
  --tablavo-ink: #081712;
  --tablavo-muted: #63756e;
  --tablavo-line: rgba(8, 23, 18, 0.12);
  --tablavo-green: #21c997;
  --tablavo-green-dark: #0c3d30;
  --tablavo-surface: #fffefa;
  --tablavo-soft: #f3f2eb;
  background:
    radial-gradient(circle at 4% 12%, rgba(33, 201, 151, 0.16), transparent 30rem),
    linear-gradient(135deg, #f7f4ec 0%, #f1f0e8 100%);
  color: var(--tablavo-ink);
}

body.state-account .topbar {
  min-height: 116px;
  padding: 18px clamp(22px, 3vw, 42px);
  display: grid;
  grid-template-columns: minmax(360px, 0.9fr) minmax(420px, 1fr);
  align-items: center;
  gap: 24px;
  background:
    radial-gradient(circle at 80% 14%, rgba(255, 255, 255, 0.12), transparent 24rem),
    linear-gradient(110deg, #061610 0%, #12382d 56%, #26332e 100%);
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.state-account .brand-block,
body.state-account .brand-lockup {
  min-width: 0;
}

body.state-account .brand-lockup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

body.state-account .brand-logo {
  width: clamp(190px, 18vw, 300px);
  height: 70px;
  object-fit: contain;
  border-radius: 18px;
  background: rgba(0, 0, 0, 0.28);
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.22);
}

body.state-account .topbar .eyebrow {
  color: rgba(33, 201, 151, 0.82);
  letter-spacing: 0.12em;
}

body.state-account .topbar h1 {
  margin: 0;
  font-size: clamp(2.2rem, 3.4vw, 4rem);
  line-height: 0.9;
  color: #fff;
}

body.state-account .header-subtitle {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.72);
  font-size: 1.05rem;
}

body.state-account .header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-width: 0;
}

body.state-account .header-account-session,
body.state-account .session {
  min-height: 62px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: none;
  color: #fff;
}

body.state-account .app-shell {
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  gap: 24px;
  padding: 22px clamp(22px, 3vw, 42px) 44px;
}

body.state-account.single-view .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

body.state-account.single-view .view-tabs {
  display: none;
}

body.state-account .workspace {
  min-width: 0;
}

body.state-account .view-tabs {
  position: sticky;
  top: 22px;
  align-self: start;
  min-height: calc(100vh - 162px);
  width: 76px;
  padding: 12px;
  border-radius: 32px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: linear-gradient(180deg, rgba(5, 30, 22, 0.96), rgba(2, 15, 12, 0.96));
  box-shadow: 0 22px 58px rgba(4, 18, 13, 0.22);
}

body.state-account .tab-button {
  width: 52px;
  height: 58px;
  min-height: 58px;
  padding: 0;
  border-radius: 20px;
  display: grid;
  place-items: center;
  font-size: 0;
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.8);
}

body.state-account .tab-button::before {
  content: attr(data-icon);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.03em;
}

body.state-account .tab-button::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  padding: 8px 10px;
  border-radius: 12px;
  background: #081712;
  color: #fff;
  font-size: 13px;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);
}

body.state-account .tab-button:hover::after,
body.state-account .tab-button:focus-visible::after {
  opacity: 1;
}

body.state-account .tab-button.active {
  background: var(--tablavo-green);
  color: #061610;
  box-shadow: 0 14px 34px rgba(33, 201, 151, 0.32);
}

body.state-account #serviceView.active {
  display: grid;
  grid-template-columns: minmax(620px, 1.42fr) minmax(380px, 0.72fr);
  gap: 26px;
  align-items: start;
}

body.state-account .floor-column {
  min-width: 0;
  padding: clamp(22px, 2.4vw, 34px);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(249, 248, 240, 0.96)),
    radial-gradient(circle at 95% 0%, rgba(33, 201, 151, 0.16), transparent 24rem);
  border: 1px solid rgba(8, 23, 18, 0.08);
  box-shadow: 0 26px 70px rgba(10, 45, 36, 0.14);
}

body.state-account .floor-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 18px;
  margin-bottom: 18px;
}

body.state-account .floor-heading h2 {
  color: var(--tablavo-ink);
  font-size: clamp(3rem, 5vw, 5.2rem);
  line-height: 0.88;
  letter-spacing: 0;
}

body.state-account .floor-actions {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
}

body.state-account .room-tabs {
  margin: 8px 0 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

body.state-account .room-tab {
  min-height: 54px;
  padding: 0 22px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(8, 23, 18, 0.08);
  color: var(--tablavo-ink);
  box-shadow: 0 10px 24px rgba(8, 23, 18, 0.06);
}

body.state-account .room-tab.active {
  background: var(--tablavo-green);
  border-color: transparent;
  color: #061610;
}

body.state-account .floor-plan {
  min-height: 660px;
  border-radius: 30px;
  border: 1px solid rgba(8, 23, 18, 0.10);
  overflow: hidden;
  background-color: #fffdf7;
  background-image:
    linear-gradient(rgba(8, 23, 18, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8, 23, 18, 0.07) 1px, transparent 1px),
    radial-gradient(circle at 74% 12%, rgba(33, 201, 151, 0.12), transparent 24rem);
  background-size: 42px 42px, 42px 42px, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.82);
}

body.state-account .table-node {
  overflow: visible;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--tablavo-ink);
}

body.state-account .table-surface {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 18px;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid #c9463d;
  box-shadow: 0 18px 42px rgba(10, 45, 36, 0.10);
  backdrop-filter: blur(12px);
}

body.state-account .table-node.occupied .table-surface {
  background: linear-gradient(155deg, rgba(222, 244, 223, 0.96), rgba(250, 255, 250, 0.92));
  border-color: #2f965e;
}

body.state-account .table-node.selected .table-surface {
  border-color: #2f965e;
  box-shadow: 0 0 0 5px rgba(33, 201, 151, 0.22), 0 24px 54px rgba(10, 45, 36, 0.18);
}

body.state-account .table-shape-round .table-surface,
body.state-account .table-shape-oval .table-surface {
  border-radius: 999px;
}

body.state-account .table-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

body.state-account .table-label {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  max-width: calc(100% - 52px);
  overflow: hidden;
  color: var(--tablavo-ink);
  font-size: clamp(1.55rem, 3vw, 2.55rem);
  font-weight: 950;
  line-height: 0.96;
  letter-spacing: 0;
  text-align: left;
}

body.state-account .table-shape-label {
  margin-top: 8px;
  color: rgba(8, 23, 18, 0.55);
  font-size: 11px;
  font-weight: 950;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
}

body.state-account .assignment-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0b251d;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.72);
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 12px 22px rgba(5, 20, 15, 0.18);
}

body.state-account .table-open-items {
  position: absolute;
  top: -12px;
  left: -12px;
  min-width: 44px;
  height: 44px;
  padding: 0 10px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #c9443b;
  color: #fff;
  font-size: 17px;
  font-weight: 950;
  box-shadow: 0 14px 26px rgba(138, 39, 33, 0.28);
  z-index: 5;
}

body.state-account .seat-chair {
  position: absolute;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: #c9443b;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.78);
  font-size: 15px;
  font-weight: 950;
  box-shadow: 0 12px 24px rgba(8, 23, 18, 0.16);
  z-index: 6;
}

body.state-account .seat-chair.occupied {
  background: #2f965e;
}

body.state-account .table-drag-handle {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 44px;
  height: 44px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(8, 23, 18, 0.72);
  box-shadow: 0 10px 20px rgba(8, 23, 18, 0.12);
  z-index: 7;
}

body.state-account .order-panel {
  position: sticky;
  top: 22px;
  max-height: calc(100vh - 44px);
  overflow: auto;
  padding: clamp(22px, 2.2vw, 30px);
  border-radius: 34px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbf7 100%);
  border: 1px solid rgba(8, 23, 18, 0.10);
  color: var(--tablavo-ink);
  box-shadow: 0 26px 70px rgba(10, 45, 36, 0.18);
}

body.state-account .order-panel .section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

body.state-account .order-panel .eyebrow {
  color: rgba(8, 23, 18, 0.58);
}

body.state-account #selectedTableTitle {
  margin: 0;
  color: var(--tablavo-ink);
  font-size: clamp(2.6rem, 4.7vw, 5rem);
  line-height: 0.92;
  letter-spacing: 0;
}

body.state-account #selectedTableTitle .title-meta {
  display: block;
  margin-top: 8px;
  font-size: 0.28em;
  line-height: 1.25;
  color: var(--tablavo-muted);
}

body.state-account #assignButton {
  width: 100%;
  min-height: 58px;
  border-radius: 20px;
  background: var(--tablavo-green);
  color: #061610;
  border: 0;
  box-shadow: 0 18px 38px rgba(33, 201, 151, 0.22);
}

body.state-account #assignButton:disabled {
  background: #e9eee8;
  color: rgba(8, 23, 18, 0.36);
  box-shadow: none;
}

body.state-account .seat-picker {
  margin-bottom: 18px;
  padding: 14px;
  border-radius: 24px;
  background: #f0f5ef;
  border: 1px solid rgba(8, 23, 18, 0.08);
}

body.state-account .table-care-note {
  min-height: 108px;
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(145deg, #dbf1dd, #f9fff9);
  color: var(--tablavo-ink);
  box-shadow: inset 0 0 0 1px rgba(47, 150, 94, 0.12);
}

body.state-account .seat-choice-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr 1fr;
  gap: 10px;
}

body.state-account .seat-choice,
body.state-account .seat-state {
  min-height: 56px;
  border-radius: 18px;
  padding: 10px 12px;
  display: grid;
  place-items: center;
  text-align: center;
  background: #ffffff;
  color: var(--tablavo-ink);
  border: 1px solid rgba(8, 23, 18, 0.08);
  font-weight: 900;
  box-shadow: 0 8px 18px rgba(8, 23, 18, 0.05);
}

body.state-account .seat-choice.selected,
body.state-account .seat-state.occupied {
  background: #dff3df;
  color: #126139;
  border-color: rgba(47, 150, 94, 0.22);
}

body.state-account .seat-state.free {
  background: #f7dcd7;
  color: #9b2f28;
  border-color: rgba(201, 68, 59, 0.20);
}

body.state-account .product-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

body.state-account .product-button {
  min-height: 92px;
  padding: 16px;
  border-radius: 20px;
  background: #fffefa;
  color: var(--tablavo-ink);
  border: 1px solid rgba(8, 23, 18, 0.10);
  box-shadow: 0 12px 28px rgba(8, 23, 18, 0.06);
  text-align: left;
}

body.state-account .product-button strong,
body.state-account .product-button span {
  color: inherit;
}

body.state-account .cart {
  display: grid;
  gap: 10px;
}

body.state-account .cart-line {
  padding: 12px 14px;
  border-radius: 16px;
  background: #f2f5ef;
  border: 1px solid rgba(8, 23, 18, 0.08);
}

body.state-account .note-label input {
  background: #fffefa;
  border: 1px solid rgba(8, 23, 18, 0.12);
  color: var(--tablavo-ink);
}

body.state-account #sendOrderButton {
  width: 100%;
  min-height: 58px;
  border-radius: 20px;
  margin-top: 14px;
}

@media (max-width: 1180px) {
  body.state-account .topbar {
    grid-template-columns: 1fr;
  }

  body.state-account .header-actions {
    justify-content: flex-start;
  }

  body.state-account #serviceView.active {
    grid-template-columns: 1fr;
  }

  body.state-account .order-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 820px) {
  body.state-account .topbar {
    min-height: 0;
    padding: 14px;
  }

  body.state-account .brand-lockup {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  body.state-account .brand-logo {
    width: min(250px, 80vw);
    height: 58px;
  }

  body.state-account .header-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  body.state-account .app-shell,
  body.state-account.single-view .app-shell {
    grid-template-columns: 1fr;
    padding: 14px 12px 96px;
  }

  body.state-account .view-tabs,
  body.single-view.state-account .view-tabs,
  body.state-account:not(.single-view) .view-tabs {
    display: flex;
    position: fixed;
    top: auto;
    left: 50%;
    right: auto;
    bottom: 14px;
    transform: translateX(-50%);
    width: auto;
    min-height: 0;
    height: 72px;
    flex-direction: row;
    border-radius: 26px;
    padding: 8px;
    z-index: 50;
  }

  body.state-account.single-view .view-tabs {
    display: none;
  }

  body.state-account .floor-column,
  body.state-account .order-panel {
    border-radius: 24px;
    padding: 16px;
  }

  body.state-account .floor-heading {
    grid-template-columns: 1fr;
  }

  body.state-account .floor-heading h2,
  body.state-account #selectedTableTitle {
    font-size: clamp(2.2rem, 12vw, 4rem);
  }

  body.state-account .floor-plan {
    min-height: 520px;
  }

  body.state-account .seat-choice-grid,
  body.state-account .product-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Tablavo service cockpit wow pass */
body.state-account {
  --tablavo-bg: #07130f;
  --tablavo-panel: #0d1c17;
  --tablavo-green: #28d39d;
  --tablavo-green-dark: #0f7d61;
  --tablavo-amber: #f7c851;
  --tablavo-coral: #e65c4f;
  --tablavo-ink: #07130f;
  --tablavo-muted: #718178;
  background:
    linear-gradient(135deg, #06110d 0%, #10281f 42%, #eceae2 42.2%, #f5f2e9 100%);
}

body.state-account .topbar {
  min-height: 104px;
  padding: 16px clamp(20px, 3vw, 46px);
  grid-template-columns: minmax(410px, 1fr) minmax(520px, auto);
  background: linear-gradient(90deg, #07130f 0%, #102820 100%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

body.state-account .brand-logo {
  width: clamp(220px, 19vw, 330px);
  height: 66px;
  border-radius: 18px;
  object-fit: contain;
  background: #090d0f;
  box-shadow: 0 16px 42px rgba(0, 0, 0, 0.35);
}

body.state-account .brand-block h1 {
  font-size: clamp(2rem, 3vw, 3.3rem);
  line-height: 0.95;
}

body.state-account .header-account-session,
body.state-account .session {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fffdf5;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
}

body.state-account .app-shell {
  padding: clamp(18px, 3vw, 34px);
  gap: 22px;
}

body.state-account .view-tabs {
  background: linear-gradient(180deg, #09241a, #04100c);
  border: 1px solid rgba(40, 211, 157, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04), 0 28px 60px rgba(0,0,0,0.24);
}

body.state-account .tab-button {
  color: rgba(255,255,255,0.72);
}

body.state-account .tab-button.active {
  background: var(--tablavo-green);
  color: #06130f;
  transform: translateX(2px);
}

body.state-account #serviceView.active {
  grid-template-columns: minmax(660px, 1fr) minmax(430px, 520px);
  align-items: start;
  gap: clamp(18px, 2vw, 34px);
}

body.state-account .floor-column {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 38px;
  padding: clamp(22px, 3vw, 38px);
  background: linear-gradient(145deg, rgba(255,255,255,0.95), rgba(239,245,238,0.9));
  box-shadow: 0 32px 80px rgba(7, 19, 15, 0.18);
}

body.state-account .floor-column::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 52%;
  height: 100%;
  background: linear-gradient(128deg, rgba(255,255,255,0) 0 48%, rgba(7,19,15,0.08) 48.2% 49.4%, rgba(255,255,255,0) 49.6%);
  pointer-events: none;
}

body.state-account .floor-heading h2 {
  font-size: clamp(3rem, 5vw, 5.4rem);
  color: #07130f;
  line-height: 0.9;
}

body.state-account .room-tabs button {
  border-radius: 18px;
  min-height: 56px;
  background: #fffdf7;
  color: #07130f;
  box-shadow: 0 12px 26px rgba(7,19,15,0.08);
}

body.state-account .room-tabs button.active {
  background: var(--tablavo-green);
  color: #06130f;
  box-shadow: 0 20px 34px rgba(40, 211, 157, 0.2);
}

body.state-account .floor-plan {
  min-height: 720px;
  border-radius: 34px;
  border: 1px solid rgba(7, 19, 15, 0.10);
  background-color: #fffdf7;
  background-image:
    linear-gradient(rgba(7,19,15,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,19,15,0.055) 1px, transparent 1px);
  background-size: 44px 44px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), inset 0 0 60px rgba(40,211,157,0.08);
}

body.state-account .table-node {
  overflow: visible;
  color: #07130f;
}

body.state-account .table-surface {
  inset: 0;
  padding: 14px 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  border-radius: 28px;
  border: 2px solid rgba(196, 58, 49, 0.78);
  background: linear-gradient(150deg, #fff9f5, #f7dfda);
  box-shadow: 0 20px 38px rgba(7, 19, 15, 0.15);
}

body.state-account .table-node.free .table-surface {
  border-color: rgba(39, 121, 91, 0.74);
  background: linear-gradient(150deg, #fbfff8, #e3f4df);
}

body.state-account .table-node.occupied .table-surface {
  border-color: rgba(39, 121, 91, 0.86);
  background: linear-gradient(150deg, #e8f8e5, #cdebd1);
}

body.state-account .table-node.selected .table-surface {
  border-color: var(--tablavo-green);
  box-shadow: 0 0 0 7px rgba(40, 211, 157, 0.16), 0 26px 48px rgba(7, 19, 15, 0.22);
}

body.state-account .table-topline,
body.state-account .table-status-row,
body.state-account .product-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.state-account .table-number,
body.state-account .table-party,
body.state-account .status-pill,
body.state-account .station-pill {
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
}

body.state-account .table-number {
  background: #07130f;
  color: #fffdf6;
}

body.state-account .table-party {
  background: rgba(255,255,255,0.72);
  color: #315043;
}

body.state-account .table-body {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 78px;
}

body.state-account .table-label {
  max-width: 72%;
  font-size: clamp(2rem, 3vw, 3.5rem);
  line-height: 0.92;
  white-space: normal;
}

body.state-account .assignment-badge {
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #07130f;
  color: #fffdf6;
  border: 3px solid rgba(255,255,255,0.72);
  box-shadow: 0 12px 24px rgba(7,19,15,0.22);
}

body.state-account .assignment-badge.empty {
  background: rgba(255,255,255,0.76);
  color: rgba(7,19,15,0.42);
}

body.state-account .table-status-row {
  color: #59685f;
  font-size: 0.8rem;
  font-weight: 950;
  text-transform: uppercase;
}

body.state-account .status-pill.free {
  background: #e9f8e7;
  color: #267956;
}

body.state-account .status-pill.occupied {
  background: #fff1cf;
  color: #8a5a00;
}

body.state-account .seat-chair {
  width: 44px;
  height: 44px;
  border-radius: 15px;
  background: #c74036;
  border: 2px solid rgba(255,255,255,0.72);
  color: #fffdf6;
  box-shadow: 0 14px 26px rgba(7,19,15,0.18);
}

body.state-account .seat-chair.occupied {
  background: var(--tablavo-green-dark);
}

body.state-account .order-panel {
  overflow: hidden auto;
  border: 0;
  border-radius: 40px;
  background: linear-gradient(180deg, #082018 0%, #07130f 100%);
  color: #fffdf6;
  box-shadow: 0 32px 80px rgba(7, 19, 15, 0.32);
}

body.state-account .order-panel .section-heading {
  gap: 12px;
  margin-bottom: 18px;
}

body.state-account #selectedTableTitle {
  display: grid;
  gap: 6px;
  color: #fffdf6;
}

body.state-account .order-title-kicker,
body.state-account .order-step-label {
  color: rgba(255,255,255,0.52);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: 0;
}

body.state-account .order-title-main {
  font-size: clamp(3rem, 5.5vw, 5.8rem);
  line-height: 0.9;
}

body.state-account .order-title-meta {
  color: rgba(255,255,255,0.56);
  font-size: 1rem;
}

body.state-account #assignButton {
  background: var(--tablavo-green);
  color: #06130f;
  box-shadow: 0 20px 42px rgba(40, 211, 157, 0.25);
}

body.state-account .seat-picker {
  padding: 0;
  background: transparent;
  border: 0;
}

body.state-account .table-care-note,
body.state-account .table-care-note.own,
body.state-account .table-care-note.open {
  min-height: auto;
  margin-bottom: 14px;
  padding: 16px;
  border-radius: 24px;
  background: rgba(255,255,255,0.08);
  color: #fffdf6;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: none;
}

body.state-account .table-care-note .meta {
  color: rgba(255,255,255,0.58);
}

body.state-account .order-step-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 10px;
}

body.state-account .order-step-label span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: rgba(40,211,157,0.14);
  color: var(--tablavo-green);
}

body.state-account .seat-choice-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

body.state-account .seat-choice,
body.state-account .seat-state {
  min-height: 56px;
  border: 0;
  background: rgba(255,255,255,0.92);
  color: #07130f;
  box-shadow: none;
}

body.state-account .seat-choice small {
  display: block;
  margin-top: 2px;
  color: rgba(7,19,15,0.5);
  font-size: 0.72rem;
}

body.state-account .seat-choice.selected {
  background: var(--tablavo-green-dark);
  color: #fffdf6;
}

body.state-account .seat-state.occupied {
  background: #dff2d9;
  color: #1e6d42;
}

body.state-account .seat-state.free {
  background: #f6d8d1;
  color: #9a3128;
}

body.state-account .product-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

body.state-account .product-step {
  grid-column: 1 / -1;
  margin: 2px 0 0;
}

body.state-account .product-button {
  min-height: 112px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.94);
  color: #07130f;
  box-shadow: none;
}

body.state-account .product-button:active {
  transform: translateY(1px) scale(0.99);
}

body.state-account .station-pill {
  background: rgba(7,19,15,0.08);
  color: #264138;
}

body.state-account .product-card-meta {
  display: block;
  margin-top: 12px;
  color: #627268;
  font-weight: 800;
}

body.state-account .cart-empty {
  padding: 18px;
  border-radius: 22px;
  border: 1px dashed rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.7);
}

body.state-account .cart-empty strong,
body.state-account .cart-empty span {
  display: block;
}

body.state-account .cart-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.12);
  color: #fffdf6;
}

body.state-account .cart-line .meta {
  display: block;
  color: rgba(255,255,255,0.58);
}

body.state-account .cart-line-note {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.72);
  font-size: 0.72rem;
  font-weight: 850;
}

body.state-account .cart-line-note input {
  min-width: 0;
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 10px;
  background: rgba(255,255,255,0.94);
  color: #07130f;
}

body.state-account .cart-remove {
  border: 0;
  border-radius: 14px;
  padding: 10px 12px;
  background: rgba(230, 92, 79, 0.18);
  color: #ffb2aa;
  font-weight: 900;
}

body.state-account .note-label {
  color: rgba(255,255,255,0.62);
}

body.state-account .note-label input {
  min-height: 56px;
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  color: #07130f;
}

body.state-account .order-empty-state {
  display: grid;
  gap: 8px;
  padding: 22px;
  border-radius: 26px;
  background: rgba(255,255,255,0.08);
  border: 1px dashed rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.72);
}

body.state-account .order-empty-state strong {
  color: #fffdf6;
}

@media (max-width: 1180px) {
  body.state-account .topbar {
    grid-template-columns: 1fr;
  }

  body.state-account #serviceView.active {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 820px) {
  body.state-account {
    background: #f3f0e8;
  }

  body.state-account .brand-logo {
    width: min(230px, 78vw);
  }

  body.state-account .floor-plan {
    min-height: 560px;
  }

  body.state-account .table-label {
    font-size: 1.9rem;
  }

  body.state-account .order-title-main {
    font-size: clamp(2.5rem, 13vw, 4rem);
  }

  body.state-account .seat-choice-grid,
  body.state-account .product-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* Service cockpit cleanup v3 */
body.state-account #serviceView.active {
  display: grid !important;
  grid-template-columns: minmax(0, 1.42fr) minmax(360px, 0.78fr) !important;
  gap: clamp(1rem, 1.8vw, 1.45rem) !important;
  align-items: start !important;
  max-width: 100% !important;
  padding: clamp(1rem, 1.8vw, 1.55rem) !important;
}

body.state-account .service-rail,
body.state-account .service-step-rail,
body.state-account .guided-rail,
body.state-account #serviceView .service-guide {
  display: none !important;
}

body.state-account #serviceView .floor-column,
body.state-account #serviceView .order-panel {
  min-width: 0;
}

body.state-account #serviceView .floor-column {
  grid-column: 1;
}

body.state-account #serviceView .order-panel {
  grid-column: 2;
  position: static !important;
  top: auto !important;
  max-height: none !important;
  overflow: visible !important;
  border-radius: 1.8rem;
}

body.state-account #serviceView .floor-column > .room-tabs {
  display: flex !important;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin: 0 0 0.9rem;
}

body.state-account #serviceView .floor-plan {
  min-height: min(68vh, 760px);
}

body.state-account #serviceView .floor-heading,
body.state-account #serviceView .order-panel {
  box-shadow: 0 18px 50px rgba(6, 26, 20, 0.1);
}

@media (max-width: 1180px) {
  body.state-account #serviceView.active {
    grid-template-columns: 1fr !important;
  }

  body.state-account #serviceView .floor-column,
  body.state-account #serviceView .order-panel {
    grid-column: 1;
  }
}

@media (max-width: 720px) {
  body.state-account #serviceView.active {
    padding: 0.75rem !important;
    gap: 0.85rem !important;
  }

  body.state-account #serviceView .floor-plan {
    min-height: 430px;
  }
}

/* Keep table content inside compact floor-plan dimensions. */
body.state-account .table-surface {
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 4px;
  padding: 9px 10px;
}

body.state-account .table-number,
body.state-account .table-party,
body.state-account .status-pill {
  padding: 4px 7px;
  font-size: 0.68rem;
}

body.state-account .table-body {
  min-height: 0;
}

body.state-account .table-label {
  max-width: calc(100% - 40px);
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  line-height: 1.05;
  overflow-wrap: anywhere;
}

body.state-account .assignment-badge {
  right: 0;
  width: 34px;
  height: 34px;
  border-width: 2px;
}

body.state-account .table-status-row {
  gap: 4px;
  font-size: 0.66rem;
}

/* Operational service layout: compact chrome, readable tables, fast seat choice. */
body.state-account .topbar {
  min-height: 88px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 2.5vw, 36px);
  padding-block: 10px;
}

body.state-account .brand-lockup {
  display: flex;
}

body.state-account .brand-lockup > div {
  display: none;
}

body.state-account .brand-logo {
  width: clamp(210px, 18vw, 280px);
  height: 64px;
}

body.state-account .app-shell {
  grid-template-columns: 58px minmax(0, 1fr);
  gap: 14px;
  padding: 14px clamp(14px, 2vw, 28px) 32px;
}

body.state-account .view-tabs,
body.single-view.state-account .view-tabs,
body.state-account:not(.single-view) .view-tabs {
  top: 14px;
  width: 58px;
  min-height: 0;
  height: auto;
  padding: 7px;
  border-radius: 22px;
  gap: 7px;
}

body.state-account .tab-button {
  width: 44px;
  height: 46px;
  min-height: 46px;
  border-radius: 16px;
}

body.state-account #serviceView.active {
  grid-template-columns: minmax(580px, 1.55fr) minmax(420px, 0.85fr) !important;
  gap: clamp(14px, 1.5vw, 22px) !important;
  padding: 0 !important;
}

body.state-account .floor-column {
  padding: clamp(18px, 2vw, 26px);
  border-radius: 28px;
}

body.state-account .floor-heading h2 {
  font-size: clamp(2.5rem, 3.5vw, 4rem);
  line-height: 0.95;
}

body.state-account .room-tab,
body.state-account .room-tabs button {
  min-height: 46px;
  padding-inline: 18px;
  border-radius: 15px;
}

body.state-account .floor-plan,
body.state-account #serviceView .floor-plan {
  min-height: min(68vh, 720px);
  border-radius: 24px;
}

body.state-account .table-surface {
  gap: 3px;
  padding: 8px 9px;
  border-radius: 20px;
}

body.state-account .table-number,
body.state-account .table-party,
body.state-account .status-pill {
  padding: 3px 6px;
  font-size: 0.62rem;
}

body.state-account .table-topline {
  gap: 4px;
}

body.state-account .table-party {
  white-space: nowrap;
}

body.state-account .table-label {
  max-width: calc(100% - 34px);
  overflow: hidden;
  font-size: 0.98rem;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.state-account .assignment-badge {
  width: 30px;
  height: 30px;
}

body.state-account .table-status-row > span:first-child {
  display: none;
}

body.state-account .table-status-row {
  justify-content: flex-end;
}

body.state-account .seat-chair {
  width: 38px;
  min-width: 38px;
  height: 38px;
  min-height: 38px;
  border-radius: 12px;
  background: #f7fbf7;
  color: #185d43;
  border: 2px solid #7db79d;
  box-shadow: 0 8px 16px rgba(7, 19, 15, 0.13);
}

body.state-account .seat-chair.occupied {
  background: #d55347;
  color: #fff;
  border-color: #f5b0a8;
}

body.state-account #serviceView .order-panel {
  padding: clamp(18px, 1.8vw, 26px);
  border-radius: 28px;
}

body.state-account .order-panel .section-heading {
  gap: 10px;
  margin-bottom: 12px;
}

body.state-account .order-title-main {
  font-size: clamp(2.2rem, 3.2vw, 3.5rem);
  line-height: 0.95;
}

body.state-account .order-title-meta {
  font-size: 0.88rem;
}

body.state-account #assignButton {
  min-height: 52px;
}

body.state-account .seat-picker {
  padding: 0;
  background: transparent;
}

body.state-account .table-care-note,
body.state-account .table-care-note.own,
body.state-account .table-care-note.open {
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 16px;
}

body.state-account .table-care-note .staff-avatar {
  flex: 0 0 auto;
}

body.state-account .table-care-note .meta {
  display: block;
  margin-top: 2px;
  font-size: 0.76rem;
  line-height: 1.3;
}

body.state-account .order-step-label {
  margin: 10px 0 8px;
}

body.state-account .seat-choice-grid {
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: 8px;
}

body.state-account .seat-control {
  position: relative;
  display: block;
}

body.state-account .seat-choice {
  min-height: 70px;
  padding: 10px 34px 10px 12px;
  border-radius: 15px;
  align-content: center;
  gap: 4px;
}

body.state-account .seat-choice.table-choice {
  padding-right: 12px;
}

body.state-account .seat-availability {
  display: block;
  margin: 0;
  font-size: 0.7rem;
  font-weight: 800;
}

body.state-account .seat-availability.free {
  color: #267956;
}

body.state-account .seat-availability.occupied {
  color: #a63b31;
}

body.state-account .seat-choice.selected .seat-availability {
  color: rgba(255, 255, 255, 0.76);
}

body.state-account .seat-state {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  min-width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border-radius: 999px;
  font-size: 0.72rem;
  box-shadow: none;
}

body.state-account .seat-state.free {
  background: #e7f5e9;
  color: #267956;
  border-color: #9acbad;
}

body.state-account .seat-state.occupied {
  background: #f8ddd8;
  color: #a63b31;
  border-color: #e7a198;
}

@media (max-width: 1120px) {
  body.state-account #serviceView.active {
    grid-template-columns: 1fr !important;
  }

  body.state-account #serviceView .floor-column,
  body.state-account #serviceView .order-panel {
    grid-column: 1;
  }
}

/* Final compact-table and seat-picker corrections. */
body.state-account .table-topline,
body.state-account .table-status-row {
  display: none;
}

body.state-account .table-body {
  height: 100%;
  min-height: 0;
  align-items: center;
  padding-right: 30px;
}

body.state-account .table-label {
  max-width: none;
  overflow: visible;
  font-size: 0.9rem;
  text-overflow: clip;
  white-space: nowrap;
}

body.state-account .seat-picker {
  display: block;
}

/* Guest-question workflow and deliberate order targeting. */
body.state-account .table-body {
  display: flex;
  grid-row: 1;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  justify-content: center;
  padding-right: 0;
  text-align: center;
}

body.state-account .table-surface {
  grid-template-rows: 1fr;
}

body.state-account .assignment-badge {
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  transform: none;
  border-width: 1px;
  font-size: 0.68rem;
}

body.state-account .table-label {
  font-size: 0.92rem;
  line-height: 1;
}

body.state-account .seat-choice-grid .table-choice {
  grid-column: 1 / -1;
  min-height: 54px;
  padding: 9px 14px;
  border: 1px dashed rgba(255, 255, 255, 0.24);
  background: rgba(255, 255, 255, 0.08);
  color: #fffdf6;
}

body.state-account .seat-choice-grid .table-choice small {
  color: rgba(255, 255, 255, 0.56);
}

body.state-account .seat-choice-grid .table-choice.selected {
  border-style: solid;
  border-color: var(--tablavo-green);
  background: var(--tablavo-green-dark);
}

body.state-account .seat-choice-grid .table-choice.selected small {
  color: rgba(255, 255, 255, 0.78);
}

body.state-account .seat-target-hint {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(247, 200, 81, 0.3);
  border-radius: 14px;
  background: rgba(247, 200, 81, 0.1);
  color: #f7d982;
  font-size: 0.82rem;
  font-weight: 800;
}

body.state-account .product-button:disabled {
  opacity: 0.42;
}

body.state-account #tableGuestStatus:empty {
  display: none;
}

body.state-account .guest-status-panel {
  display: grid;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.055);
}

body.state-account .guest-status-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

body.state-account .guest-status-heading > span {
  color: #fffdf6;
  font-weight: 950;
}

body.state-account .guest-status-heading small {
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.68rem;
  text-align: right;
}

body.state-account .guest-answer-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

body.state-account .guest-answer-grid article {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}

body.state-account .guest-answer-grid span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.7rem;
  line-height: 1.25;
}

body.state-account .guest-answer-grid strong {
  color: #fffdf6;
  font-size: 0.82rem;
  line-height: 1.25;
}

body.state-account .guest-order-history {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 8px;
}

body.state-account .guest-order-history summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fffdf6;
  font-size: 0.8rem;
  font-weight: 900;
  cursor: pointer;
}

body.state-account .guest-order-history summary span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(40, 211, 157, 0.14);
  color: var(--tablavo-green);
}

body.state-account .guest-order-history > div {
  display: grid;
  gap: 6px;
  margin-top: 8px;
}

body.state-account .guest-order-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.06);
}

body.state-account .guest-order-main,
body.state-account .guest-order-state {
  display: grid;
  gap: 3px;
}

body.state-account .guest-order-main {
  min-width: 0;
}

body.state-account .guest-order-main strong {
  color: #fffdf6;
  font-size: 0.78rem;
}

body.state-account .guest-order-main > span,
body.state-account .guest-order-state small,
body.state-account .guest-order-empty {
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.68rem;
}

body.state-account .guest-order-state {
  flex: 0 0 auto;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-items: end;
}

body.state-account .guest-order-state small {
  grid-column: 1 / -1;
}

body.state-account .guest-status-pill {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fffdf6;
  font-size: 0.65rem;
  font-weight: 900;
}

body.state-account .guest-status-pill.ready {
  background: rgba(40, 211, 157, 0.2);
  color: #72e7c4;
}

body.state-account .guest-status-pill.in_progress {
  background: rgba(247, 200, 81, 0.18);
  color: #f7d982;
}

body.state-account .guest-order-action,
body.state-account .table-ready-alert-heading button {
  min-height: 28px;
  padding: 4px 9px;
  border: 1px solid rgba(40, 211, 157, 0.34);
  border-radius: 999px;
  background: rgba(40, 211, 157, 0.16);
  color: #8af0d1;
  font: inherit;
  font-size: 0.66rem;
  font-weight: 900;
  cursor: pointer;
}

body.state-account .guest-order-action:hover,
body.state-account .table-ready-alert-heading button:hover {
  background: rgba(40, 211, 157, 0.28);
}

body.state-account .guest-order-action:disabled,
body.state-account .table-ready-alert-heading button:disabled {
  cursor: wait;
  opacity: 0.55;
}

@media (max-width: 560px) {
  body.state-account .guest-answer-grid {
    grid-template-columns: 1fr;
  }

  body.state-account .guest-order-item {
    align-items: flex-start;
    flex-direction: column;
  }

  body.state-account .guest-order-state {
    justify-items: start;
  }
}

/* Final management layout overrides: keep the owner workspace readable at every width. */
body.state-account[data-active-view="manager"] .workspace,
body.state-account[data-active-view="manager"] .manager-view.active {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

body.state-account[data-active-view="manager"]:not(.single-view) .view-tabs {
  top: 102px;
  max-height: calc(100vh - 118px);
}

body.state-account[data-active-view="manager"] .manager-view.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: clamp(16px, 2vw, 24px);
}

body.state-account[data-active-view="manager"] .manager-view > .section-heading {
  width: 100%;
  min-height: 128px;
  padding: clamp(20px, 2.8vw, 32px);
  border-radius: 24px;
}

body.state-account[data-active-view="manager"] .manager-view > .section-heading h2 {
  font-size: clamp(2.5rem, 4vw, 4.6rem);
  line-height: 0.95;
}

body.state-account[data-active-view="manager"] .admin-overview {
  width: 100%;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

body.state-account[data-active-view="manager"] .admin-action-card {
  min-width: 0;
  min-height: 138px;
  align-content: start;
  gap: 7px;
  padding: 17px;
  border-radius: 19px;
}

body.state-account[data-active-view="manager"] .admin-action-card::before {
  display: none;
}

body.state-account[data-active-view="manager"] .admin-action-card strong {
  margin: 8px 0 3px;
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.08;
}

body.state-account[data-active-view="manager"] .admin-action-card small {
  max-width: 30ch;
  font-size: 0.8rem;
  line-height: 1.35;
}

body.state-account[data-active-view="manager"] .restaurant-admin,
body.state-account[data-active-view="manager"] .staff-manager,
body.state-account[data-active-view="manager"] .menu-manager,
body.state-account[data-active-view="manager"] .takeaway-manager {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.state-account[data-active-view="manager"] .restaurant-admin {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  padding: 16px;
  border-radius: 20px;
}

body.state-account[data-active-view="manager"] .restaurant-admin-grid {
  min-width: 0;
}

body.state-account[data-active-view="manager"] .restaurant-card {
  min-width: 0;
  min-height: 68px;
  border-radius: 14px;
}

body.state-account[data-active-view="manager"] .restaurant-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body.state-account[data-active-view="manager"] .restaurant-card strong,
body.state-account[data-active-view="manager"] .restaurant-card .meta {
  display: block;
}

body.state-account[data-active-view="manager"] .restaurant-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.state-account[data-active-view="manager"] .restaurant-admin > .status-line {
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  body.state-account[data-active-view="manager"] .admin-overview {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
  }
}

@media (max-width: 700px) {
  body.state-account[data-active-view="manager"] .admin-overview,
  body.state-account[data-active-view="manager"] .restaurant-admin {
    grid-template-columns: 1fr;
  }
}

/* Staff activation is a short handoff, not a second setup screen. */
body.state-account:not(.state-staff) {
  min-height: 100vh;
  background:
    radial-gradient(circle at 9% 4%, rgba(40, 211, 157, 0.14), transparent 26rem),
    linear-gradient(145deg, #07130f 0%, #102820 34%, #f2f0e8 34.2%, #f8f5ed 100%);
}

body.state-account:not(.state-staff) .topbar {
  min-height: 78px;
  padding: 10px clamp(18px, 3vw, 44px);
}

body.state-account:not(.state-staff) .brand-logo {
  width: clamp(190px, 18vw, 250px);
  height: 56px;
}

body.state-account:not(.state-staff) .app-shell {
  display: block;
  min-height: calc(100vh - 78px);
  padding: clamp(24px, 4vw, 54px) 18px;
}

body.state-account:not(.state-staff) .login-panel {
  display: grid;
  width: min(100%, 980px);
  max-width: 980px;
  margin: 0 auto;
  grid-template-columns: 1fr;
  gap: 22px;
  padding: clamp(26px, 4vw, 42px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 0 0, rgba(40, 211, 157, 0.13), transparent 23rem),
    rgba(255, 255, 255, 0.97);
}

body.state-account:not(.state-staff) .login-panel > div:first-child::after {
  content: none;
}

body.state-account:not(.state-staff) .staff-login-heading {
  display: grid;
  gap: 7px;
}

body.state-account:not(.state-staff) .staff-login-heading .eyebrow {
  color: #178664;
}

body.state-account:not(.state-staff) .login-panel h2 {
  color: #07130f;
  font-size: clamp(2.1rem, 4vw, 3.5rem);
  line-height: 1;
}

body.state-account:not(.state-staff) .staff-login-heading .meta {
  margin: 0;
  font-size: 0.95rem;
}

body.state-account:not(.state-staff) .staff-grid {
  display: grid;
  gap: 12px;
}

body.state-account:not(.state-staff) .staff-start-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

body.state-account:not(.state-staff) .staff-card {
  min-height: 82px;
  padding: 12px;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(7, 19, 15, 0.07);
}

body.state-account:not(.state-staff) .staff-card .staff-avatar {
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
}

body.state-account:not(.state-staff) .staff-card strong {
  font-size: 1rem;
}

body.state-account:not(.state-staff) .staff-selected-note {
  margin: 0;
  padding: 9px 12px;
  border-radius: 14px;
}

body.state-account:not(.state-staff) .staff-login-actions {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(190px, auto);
  align-items: end;
  gap: 12px;
}

body.state-account:not(.state-staff) .pin-label {
  padding: 0;
  border: 0;
  background: transparent;
}

body.state-account:not(.state-staff) .pin-label input {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  background: #f7f9f7;
  font-size: 1.35rem;
}

body.state-account:not(.state-staff) #activateButton {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
}

body.state-account:not(.state-staff) #loginStatus {
  margin: -4px 0 0;
  font-size: 0.76rem;
  text-align: center;
}

@media (max-width: 820px) {
  body.state-account:not(.state-staff) .topbar {
    grid-template-columns: 1fr;
  }

  body.state-account:not(.state-staff) .header-actions {
    justify-content: stretch;
  }

  body.state-account:not(.state-staff) .header-account-session {
    width: 100%;
  }

  body.state-account:not(.state-staff) .staff-start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  body.state-account:not(.state-staff) .topbar {
    gap: 8px;
    padding: 8px 12px;
  }

  body.state-account:not(.state-staff) .brand-logo {
    width: 180px;
    height: 50px;
  }

  body.state-account:not(.state-staff) .header-account-session {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 18px;
  }

  body.state-account:not(.state-staff) .header-account-session .staff-role {
    display: none;
  }

  body.state-account:not(.state-staff) .header-account-session .secondary-action {
    width: auto;
    min-height: 38px;
    padding: 7px 10px;
  }

  body.state-account:not(.state-staff) .staff-login-actions {
    grid-template-columns: 1fr;
  }

  body.state-account:not(.state-staff) .staff-start-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.state-account:not(.state-staff) .login-panel {
    padding: 25px 20px;
    border-radius: 22px;
  }
}

@media (max-width: 360px) {
  body.state-account:not(.state-staff) .staff-start-grid {
    grid-template-columns: 1fr;
  }
}

/* Compact floor header, safe seat edges, and dense station boards. */
body.state-account .floor-column {
  overflow: hidden;
}

body.state-account .floor-heading {
  margin-bottom: 7px;
}

body.state-account:not(.can-manage) .floor-heading {
  display: none;
}

body.state-account .floor-heading .eyebrow {
  font-size: 0.68rem;
}

body.state-account .floor-heading h2 {
  font-size: clamp(2rem, 2.8vw, 3rem);
  line-height: 1;
}

body.state-account .room-tabs {
  gap: 7px;
}

body.state-account .floor-plan,
body.state-account #serviceView .floor-plan {
  margin-top: 24px;
  overflow: visible;
}

body.state-account .station-view {
  padding: clamp(16px, 2vw, 24px);
}

body.state-account .station-view > .section-heading {
  margin-bottom: 14px;
}

body.state-account .station-view > .section-heading h2 {
  font-size: clamp(2.3rem, 4vw, 4.2rem);
  line-height: 0.95;
}

body.state-account #kitchenTickets {
  display: block;
}

body.state-account #kitchenTickets .station-board {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

body.state-account .ticket-column {
  min-width: 0;
  min-height: 240px;
  align-content: start;
  gap: 12px;
  padding: 14px;
  border-radius: 22px;
}

body.state-account .station-column-header {
  padding-bottom: 9px;
}

body.state-account .station-column-header strong {
  font-size: clamp(1.55rem, 2.4vw, 2.4rem);
}

body.state-account .station-ticket-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
  min-width: 0;
}

body.state-account .station-empty {
  grid-column: 1 / -1;
  margin: 10px 2px;
}

body.state-account .large-ticket {
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border-width: 1px;
  border-radius: 15px;
  font-size: 0.9rem;
}

body.state-account .large-ticket .ticket-title {
  display: grid;
  gap: 3px;
}

body.state-account .large-ticket .ticket-title strong {
  font-size: 1.08rem;
  line-height: 1.15;
}

body.state-account .large-ticket .meta {
  font-size: 0.76rem;
  line-height: 1.3;
}

body.state-account .large-ticket .station-chip {
  justify-self: start;
  padding: 4px 7px;
  font-size: 0.62rem;
}

body.state-account .ticket-modifier,
body.state-account .timing-warning {
  padding: 7px 9px;
  border-radius: 10px;
  font-size: 0.76rem;
}

body.state-account .ticket-actions {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
}

body.state-account .ticket-actions .status-action {
  min-width: 0;
  min-height: 36px;
  padding: 5px 4px;
  border-radius: 9px;
  font-size: 0.68rem;
  line-height: 1.1;
}

@media (max-width: 900px) {
  body.state-account #kitchenTickets .station-board {
    grid-template-columns: 1fr;
  }
}

/* Calm restaurant login and non-redundant table ownership. */
body.state-locked {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 8%, rgba(40, 211, 157, 0.13), transparent 25rem),
    linear-gradient(145deg, #07130f 0%, #102820 36%, #f2f0e8 36.2%, #f8f5ed 100%);
}

body.state-locked .topbar {
  min-height: 76px;
  padding: 10px clamp(18px, 3vw, 44px);
  background: rgba(7, 19, 15, 0.96);
  box-shadow: 0 12px 32px rgba(7, 19, 15, 0.16);
}

body.state-locked .brand-lockup > div,
body.state-locked .header-account-session,
body.state-locked .session {
  display: none;
}

body.state-locked .header-actions {
  display: flex;
  flex: 0 0 auto;
  min-width: 0;
  margin-left: auto;
}

body.state-locked .brand-lockup {
  min-width: 0;
}

body.state-locked .brand-logo {
  width: clamp(190px, 18vw, 250px);
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 15px;
  background: #05090a;
  box-shadow: none;
}

body.state-locked .brand-logo-tint {
  border: 1px solid color-mix(in srgb, var(--theme-accent) 72%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--theme-accent) 18%, transparent);
}

body.state-locked .app-shell {
  display: grid;
  min-height: calc(100vh - 76px);
  padding: clamp(24px, 5vw, 64px) 18px;
  place-items: center;
}

body.state-locked .locked-panel {
  display: grid;
  width: min(100%, 620px);
  min-height: 0;
  box-sizing: border-box;
  gap: 22px;
  padding: clamp(28px, 5vw, 48px);
  border: 1px solid rgba(13, 35, 29, 0.1);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 28px 70px rgba(7, 19, 15, 0.18);
  text-align: left;
}

body.state-locked .login-card-heading {
  display: grid;
  gap: 8px;
}

body.state-locked .login-card-heading .eyebrow {
  color: #178664;
}

body.state-locked .locked-panel h2 {
  max-width: none;
  color: #07130f;
  font-size: clamp(2rem, 5vw, 3.4rem);
  line-height: 1;
}

body.state-locked .locked-panel .login-card-heading .meta {
  max-width: 470px;
  margin: 0;
  color: #68776f;
  font-size: 1rem;
  line-height: 1.45;
  justify-self: start;
}

body.state-locked .header-account-panel {
  display: grid;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  grid-template-columns: 1fr;
  gap: 14px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

body.state-locked .header-login-fields {
  grid-template-columns: 1fr;
  gap: 12px;
}

body.state-locked .header-account-panel label {
  color: #42534b;
  font-size: 0.78rem;
}

body.state-locked .header-account-panel input {
  min-height: 52px;
  padding-inline: 15px;
  border: 1px solid #cad4cf;
  border-radius: 14px;
  background: #f7f9f7;
}

body.state-locked #accountLoginButton {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
}

body.state-locked .header-status {
  color: #68776f;
  font-size: 0.76rem;
  text-align: center;
}

body.state-locked .login-language-block {
  display: grid;
  gap: 9px;
  padding-top: 2px;
}

body.state-locked .login-language-block > span {
  color: #68776f;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

body.state-locked .language-switcher {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 7px;
}

body.state-locked .language-button {
  min-width: 0;
  min-height: 42px;
  padding: 7px 5px;
  border-radius: 12px;
}

body.state-locked .login-footnote {
  margin: 0;
  color: #76847d;
  font-size: 0.78rem;
  line-height: 1.45;
  text-align: center;
}

body.state-account #assignButton[hidden] {
  display: none !important;
}

body.state-account .table-surface > .assignment-badge {
  top: 7px;
  right: 7px;
  transform: none;
}

body.state-account .table-shape-round .table-surface > .assignment-badge {
  top: 18px;
  right: 18px;
}

body.state-account .table-shape-oval .table-surface > .assignment-badge {
  top: 12px;
  right: 22px;
}

body.state-account .table-shape-round .table-ready-badge {
  top: 18px;
  left: 18px;
}

body.state-account .table-shape-oval .table-ready-badge {
  top: 12px;
  left: 22px;
}

body.state-account .guest-view-label {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(40, 211, 157, 0.14);
  color: #72e7c4;
  font-size: 0.66rem;
  vertical-align: middle;
}

body.state-account .order-step-label.cart-step {
  display: flex;
  align-items: center;
  gap: 9px;
}

body.state-account .order-step-label.cart-step small {
  margin-left: auto;
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.7rem;
  letter-spacing: 0;
  text-transform: none;
}

body.state-account .cart-view-note {
  margin: 8px 0 0;
  padding: 9px 11px;
  border-radius: 12px;
  background: rgba(40, 211, 157, 0.09);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.72rem;
  line-height: 1.4;
}

@media (max-width: 560px) {
  body.state-locked .topbar {
    justify-content: center;
  }

  body.state-locked .locked-panel {
    padding: 26px 20px;
    border-radius: 22px;
  }

  body.state-locked .language-switcher {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Owner setup is one full-width workspace with an independent side navigation. */
body.state-account.state-staff[data-active-view="manager"] .app-shell {
  display: block;
  width: 100%;
  max-width: none;
  padding: 14px clamp(14px, 2vw, 28px) 32px 100px;
}

body.state-account.state-staff[data-active-view="manager"] .workspace,
body.state-account.state-staff[data-active-view="manager"] .manager-view.active {
  width: 100%;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

body.state-account.state-staff[data-active-view="manager"] .view-tabs,
body.state-account.state-staff[data-active-view="manager"]:not(.single-view) .view-tabs {
  position: fixed;
  top: 102px;
  left: 22px;
  bottom: auto;
  width: 58px;
  max-height: calc(100vh - 118px);
}

body.state-account.state-staff[data-active-view="manager"] .manager-view.active {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 0;
}

body.state-account.state-staff[data-active-view="manager"] .manager-view > .section-heading {
  width: 100%;
  min-height: 118px;
  padding: clamp(20px, 2.5vw, 30px);
  border-radius: 24px;
}

body.state-account.state-staff[data-active-view="manager"] .manager-view > .section-heading h2 {
  font-size: clamp(2.4rem, 3.5vw, 4rem);
  line-height: 0.98;
}

body.state-account.state-staff[data-active-view="manager"] .admin-overview {
  width: 100%;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 12px;
  margin-bottom: 0;
}

body.state-account.state-staff[data-active-view="manager"] .admin-action-card {
  min-width: 0;
  min-height: 132px;
  align-content: start;
  gap: 7px;
  padding: 17px;
  border-radius: 19px;
}

body.state-account.state-staff[data-active-view="manager"] .admin-action-card::before {
  display: none;
}

body.state-account.state-staff[data-active-view="manager"] .admin-action-card strong {
  margin: 8px 0 3px;
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.08;
}

body.state-account.state-staff[data-active-view="manager"] .admin-action-card small {
  max-width: 30ch;
  font-size: 0.8rem;
  line-height: 1.35;
}

body.state-account.state-staff[data-active-view="manager"] .restaurant-admin,
body.state-account.state-staff[data-active-view="manager"] .staff-manager,
body.state-account.state-staff[data-active-view="manager"] .menu-manager,
body.state-account.state-staff[data-active-view="manager"] .takeaway-manager {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

body.state-account.state-staff[data-active-view="manager"] .restaurant-admin {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  align-items: center;
  gap: 16px;
  margin-bottom: 0;
  padding: 16px;
  border-radius: 20px;
}

body.state-account.state-staff[data-active-view="manager"] .restaurant-admin-grid {
  min-width: 0;
}

body.state-account.state-staff[data-active-view="manager"] .restaurant-card {
  min-width: 0;
  min-height: 68px;
  border-radius: 14px;
}

body.state-account.state-staff[data-active-view="manager"] .restaurant-card > span:last-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body.state-account.state-staff[data-active-view="manager"] .restaurant-card strong,
body.state-account.state-staff[data-active-view="manager"] .restaurant-card .meta {
  display: block;
}

body.state-account.state-staff[data-active-view="manager"] .restaurant-card strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.state-account.state-staff[data-active-view="manager"] .restaurant-admin > .status-line {
  margin: 0;
  line-height: 1.45;
}

@media (max-width: 1100px) {
  body.state-account.state-staff[data-active-view="manager"] .admin-overview {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
  }
}

@media (max-width: 760px) {
  body.state-account.state-staff[data-active-view="manager"] .app-shell {
    padding: 14px 12px 96px;
  }

  body.state-account.state-staff[data-active-view="manager"] .view-tabs,
  body.state-account.state-staff[data-active-view="manager"]:not(.single-view) .view-tabs {
    position: fixed;
    top: auto;
    left: 50%;
    bottom: 12px;
    width: auto;
    max-height: none;
    transform: translateX(-50%);
  }

  body.state-account.state-staff[data-active-view="manager"] .admin-overview,
  body.state-account.state-staff[data-active-view="manager"] .restaurant-admin {
    grid-template-columns: 1fr;
  }
}

body.state-account.state-staff[data-active-view="manager"] .staff-admin-card > span:nth-child(2) {
  display: grid;
  min-width: 0;
  gap: 3px;
}

body.state-account.state-staff[data-active-view="manager"] .staff-admin-card strong,
body.state-account.state-staff[data-active-view="manager"] .staff-admin-card .meta {
  display: block;
}

/* Center table names independently from badges and seat geometry. */
body.state-account .table-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0;
  pointer-events: none;
  text-align: center;
}

body.state-account .table-label {
  width: 100%;
  max-width: none;
  text-align: center;
}

/* A completed kitchen ticket must be visible before the server opens a person. */
body.state-account .table-node.has-ready-items {
  z-index: 4;
}

body.state-account .table-node.has-ready-items .table-surface {
  border-color: #dfa72b;
  box-shadow: 0 0 0 5px rgba(223, 167, 43, 0.17), 0 20px 42px rgba(31, 61, 50, 0.18);
}

body.state-account .table-ready-badge {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 6px 3px 3px;
  border: 1px solid rgba(103, 70, 7, 0.2);
  border-radius: 999px;
  background: #f3c65f;
  color: #493309;
  box-shadow: none;
  font-size: 0.58rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

body.state-account .table-ready-badge strong {
  display: grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #102d24;
  color: #fff;
}

body.state-account .seat-chair.ready {
  border-color: #a8760b;
  background: #f3c65f;
  color: #2f2208;
  box-shadow: 0 0 0 4px rgba(243, 198, 95, 0.24), 0 8px 18px rgba(91, 61, 4, 0.18);
}

body.state-account .seat-choice.has-ready-items:not(.selected) {
  border-color: #d4a32f;
  background: #fff6dc;
}

body.state-account .seat-availability.ready {
  color: #9b6800;
  font-weight: 950;
}

body.state-account .table-ready-alert {
  display: grid;
  gap: 8px;
  padding: 10px 11px;
  border: 1px solid rgba(232, 183, 68, 0.55);
  border-left: 4px solid #e8b744;
  border-radius: 14px;
  background: rgba(255, 244, 210, 0.09);
  color: #fffdf6;
  box-shadow: none;
}

body.state-account .table-ready-alert-heading {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.state-account .table-ready-alert-icon {
  display: grid;
  flex: 0 0 24px;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e8b744;
  color: #17271f;
  font-size: 0.78rem;
  font-weight: 950;
}

body.state-account .table-ready-alert-heading > strong {
  font-size: 0.84rem;
}

body.state-account .ready-count {
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: auto;
  border-radius: 999px;
  background: rgba(232, 183, 68, 0.18);
  color: #f4ca68;
  font-size: 0.7rem;
  font-weight: 900;
}

body.state-account .table-ready-alert-list {
  display: grid;
  gap: 5px;
  min-width: 0;
}

body.state-account .table-ready-alert-list > div {
  display: grid;
  grid-template-columns: minmax(64px, auto) minmax(0, 1fr);
  gap: 8px;
  padding-top: 5px;
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  font-size: 0.7rem;
  line-height: 1.3;
}

body.state-account .table-ready-alert-list strong {
  color: #f4ca68;
}

body.state-account .table-ready-alert-list span {
  color: rgba(255, 255, 255, 0.88);
  overflow-wrap: anywhere;
}

body.state-account .table-ready-alert.picked-up {
  border-color: rgba(81, 170, 219, 0.52);
  border-left-color: #51aadb;
  background: rgba(81, 170, 219, 0.09);
}

body.state-account .table-ready-alert.picked-up .table-ready-alert-icon {
  background: #51aadb;
}

body.state-account .table-ready-alert.picked-up .ready-count {
  background: rgba(81, 170, 219, 0.18);
  color: #9ddcff;
}

/* Compact menu administration: hierarchy, search and inline product editing. */
body.state-account[data-active-view="manager"] .menu-manager > .section-heading {
  min-height: 0;
  padding: 4px 0 14px;
}

body.state-account[data-active-view="manager"] .menu-manager > .section-heading h2 {
  font-size: clamp(2rem, 3vw, 3.2rem);
}

body.state-account[data-active-view="manager"] .menu-manager-grid {
  display: grid;
  grid-template-columns: minmax(210px, 260px) minmax(0, 1fr);
  align-items: start;
  gap: 16px;
}

.menu-category-panel {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 10px;
  max-height: calc(100vh - 112px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #f8faf7;
}

.menu-category-panel > strong {
  font-size: 1.05rem;
}

#menuCategoryNav,
.menu-family {
  display: grid;
  gap: 5px;
}

.menu-family {
  padding: 4px 0;
  border-bottom: 1px solid rgba(13, 35, 29, 0.08);
}

.menu-family summary,
#menuCategoryNav button {
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: #10211d;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
}

.menu-family summary,
#menuCategoryNav button,
#menuCategoryNav button > span {
  display: flex;
}

.menu-family button {
  margin-left: 10px;
  font-size: 0.78rem;
}

#menuCategoryNav button.active,
#menuCategoryNav button:hover {
  background: rgba(31, 170, 132, 0.14);
  color: #08785e;
}

#menuCategoryNav small {
  color: #718078;
  font-weight: 700;
}

.menu-catalog {
  min-width: 0;
}

.menu-search-label {
  position: sticky;
  top: 86px;
  z-index: 4;
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  color: #52635c;
  font-size: 0.78rem;
  font-weight: 850;
}

.menu-search-label input {
  min-height: 44px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 0.95rem;
}

.menu-category-card {
  border-radius: 14px;
}

.menu-category-header {
  padding: 9px 12px;
}

.menu-products {
  gap: 5px;
  padding: 7px;
}

.menu-product-row {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
}

.menu-product-row.active {
  border-color: #1faa84;
  box-shadow: 0 0 0 2px rgba(31, 170, 132, 0.12);
}

.menu-product-card {
  display: grid;
  grid-template-columns: minmax(190px, 1.5fr) minmax(90px, 0.6fr) 92px auto 24px;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 9px 11px;
  border: 0;
  border-radius: 0;
  background: #fff;
}

.menu-product-name {
  display: grid;
  gap: 2px;
}

.menu-product-name small,
.menu-product-station {
  color: #718078;
  font-size: 0.75rem;
}

.menu-product-price {
  text-align: right;
  white-space: nowrap;
}

.menu-product-chevron {
  color: #08785e;
  font-size: 1.3rem;
  font-weight: 900;
  text-align: center;
}

.menu-inline-editor {
  margin: 0;
  padding: 14px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: #f5f8f5;
}

.menu-inline-editor textarea {
  min-height: 94px;
  resize: vertical;
}

.menu-new-product {
  margin-bottom: 12px;
  overflow: hidden;
  border: 1px solid #1faa84;
  border-radius: 14px;
  background: #fff;
}

.menu-new-product h3 {
  margin: 0;
  padding: 12px 14px;
}

.menu-empty-result {
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: #718078;
  text-align: center;
}

/* Kitchen production board: one table group, one compact row per dish. */
body.state-account #kitchenView.station-view > .section-heading,
body.state-account #barView.station-view > .section-heading {
  margin-bottom: 10px;
}

body.state-account #kitchenView.station-view > .section-heading h2,
body.state-account #barView.station-view > .section-heading h2 {
  font-size: clamp(2.2rem, 3.4vw, 3.6rem);
}

.production-board {
  display: grid;
  gap: 10px;
}

.production-board-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.88);
}

.production-board-summary > span {
  padding: 6px 9px;
  border-radius: 999px;
  background: #e9f1ed;
}

.production-board-summary small {
  margin-left: auto;
  color: #718078;
}

.production-table-list {
  display: grid;
  gap: 9px;
}

.production-column-headings,
.production-line {
  grid-template-columns: minmax(230px, 1.15fr) minmax(140px, 0.62fr) minmax(140px, 0.62fr) minmax(170px, 0.76fr) minmax(145px, 0.62fr) 82px minmax(132px, 0.52fr);
}

.production-column-headings {
  display: grid;
  align-items: end;
  gap: 12px;
  padding: 0 14px 2px;
  color: #718078;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.production-column-headings .added {
  color: #1b7958;
}

.production-column-headings .removed {
  color: #a13b31;
}

.production-table {
  overflow: hidden;
  border: 1px solid rgba(13, 35, 29, 0.13);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(10, 45, 36, 0.06);
}

.production-table-header {
  display: grid;
  grid-template-columns: minmax(230px, 1.15fr) minmax(140px, 0.62fr) minmax(140px, 0.62fr) minmax(170px, 0.76fr) minmax(145px, 0.62fr) 82px minmax(132px, 0.52fr);
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  background: #eef4f0;
}

.production-table-title {
  display: flex;
  align-items: baseline;
  gap: 9px;
  grid-column: 1 / 6;
}

.production-table-title > strong {
  font-size: 1.15rem;
}

.production-table-header span {
  color: #66766f;
  font-size: 0.76rem;
}

.production-table-time {
  display: grid;
  grid-column: 6;
  gap: 3px;
  justify-items: stretch;
  text-align: center;
}

.production-table-time > span {
  font-size: 0.62rem;
  line-height: 1.15;
}

.production-table-status-control {
  display: grid;
  grid-column: 7;
  gap: 3px;
  min-width: 0;
}

.production-table-status-control > span {
  color: #718078;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.production-table-status-control select {
  width: 100%;
  min-height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid rgba(13, 35, 29, 0.14);
  border-radius: 9px;
  background: #edf2ef;
  color: #10211d;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 850;
  cursor: pointer;
}

.production-table-status-control.sent select,
.production-table-status-control.mixed select {
  background: #fff0d4;
  color: #855300;
}

.production-table-status-control.in_progress select {
  background: #e7f1ec;
  color: #17664d;
}

.production-table-status-control.ready select {
  background: #dcefdc;
  color: #216a35;
}

.production-lines {
  display: grid;
}

.production-line {
  display: grid;
  align-items: center;
  gap: 12px;
  min-height: 68px;
  padding: 9px 14px;
  border-bottom: 1px solid rgba(13, 35, 29, 0.08);
}

.production-line:last-child {
  border-bottom: 0;
}

.production-dish,
.production-adjustment,
.production-remarks,
.production-meta {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.production-dish > strong {
  overflow: hidden;
  font-size: 1.03rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.production-adjustment,
.production-remarks {
  align-content: center;
  font-size: 0.72rem;
}

.production-adjustment small,
.production-remarks small {
  display: none;
}

.production-adjustment > span:not(.empty) {
  width: fit-content;
  max-width: 100%;
  padding: 3px 7px;
  border-radius: 7px;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.production-adjustment.added > span:not(.empty) {
  background: #e1f3e9;
  color: #176c4d;
}

.production-adjustment.removed > span:not(.empty) {
  background: #fde5e0;
  color: #9b362d;
}

.production-adjustment .empty,
.production-remarks .empty {
  color: #b1bbb6;
}

.production-remarks > span:not(.empty) {
  color: #4d5d56;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.production-meta {
  color: #718078;
  font-size: 0.71rem;
}

.production-meta > strong {
  color: #10211d;
  font-size: 0.8rem;
}

.production-age,
.production-table-time > strong {
  padding: 5px 7px;
  border-radius: 8px;
  background: #e8f4ee;
  color: #08785e;
  font-size: 0.76rem;
  text-align: center;
  white-space: nowrap;
}

.production-age.warning,
.production-table-time > strong.warning {
  background: #fff0bd;
  color: #7a5500;
}

.production-age.critical,
.production-table-time > strong.critical {
  background: #ffd9d2;
  color: #9c2e24;
}

.production-status-control {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.production-status-control > span {
  color: #718078;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
}

.production-status-control select {
  width: 100%;
  min-height: 36px;
  padding: 0 28px 0 10px;
  border: 1px solid rgba(13, 35, 29, 0.14);
  border-radius: 9px;
  background: #edf2ef;
  color: #10211d;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 850;
  cursor: pointer;
}

.production-status-control.sent select {
  background: #fff0d4;
  color: #855300;
}

.production-status-control.in_progress select {
  background: #e7f1ec;
  color: #17664d;
}

.production-status-control.ready select {
  background: #dcefdc;
  color: #216a35;
}

.production-status-control.picked_up select,
.production-status-control.delivered select {
  background: #e8edf0;
  color: #405058;
}

.production-empty {
  padding: 32px;
  border: 1px dashed var(--line);
  border-radius: 14px;
  color: #718078;
  text-align: center;
}

@media (max-width: 1180px) {
  .production-column-headings,
  .production-line,
  .production-table-header {
    grid-template-columns: minmax(200px, 1.1fr) minmax(115px, 0.58fr) minmax(115px, 0.58fr) minmax(140px, 0.7fr) minmax(125px, 0.6fr) 72px minmax(115px, 0.55fr);
    gap: 8px;
  }
}

@media (max-width: 820px) {
  body.state-account[data-active-view="manager"] .menu-manager-grid {
    grid-template-columns: 1fr;
  }

  .menu-category-panel,
  .menu-search-label {
    position: static;
    max-height: none;
  }

  .menu-product-card {
    grid-template-columns: minmax(0, 1fr) auto 22px;
  }

  .menu-product-station,
  .menu-product-price {
    display: none;
  }

  .production-line {
    grid-template-columns: minmax(0, 1fr) 72px;
  }

  .production-column-headings {
    display: none;
  }

  .production-adjustment,
  .production-remarks,
  .production-meta {
    grid-column: 1;
  }

  .production-adjustment small,
  .production-remarks small {
    display: block;
    color: #718078;
    font-size: 0.6rem;
    font-weight: 850;
    text-transform: uppercase;
  }

  .production-meta {
    grid-column: 1;
  }

  .production-status-control {
    grid-column: 1 / -1;
  }
}

/* Multi-view manager accounts keep the same full-width canvas in every station. */
body.state-account.state-staff.can-manage .app-shell {
  display: block;
  width: 100%;
  max-width: none;
  padding: 14px clamp(14px, 2vw, 28px) 32px 100px;
}

body.state-account.state-staff.can-manage .workspace {
  width: 100%;
  max-width: none;
  min-width: 0;
}

body.state-account.state-staff.can-manage .view-tabs,
body.state-account.state-staff.can-manage:not(.single-view) .view-tabs {
  position: fixed;
  top: 102px;
  left: 22px;
  bottom: auto;
  width: 58px;
  max-height: calc(100vh - 118px);
}

@media (max-width: 760px) {
  body.state-account.state-staff.can-manage .app-shell {
    padding: 14px 12px 96px;
  }

  body.state-account.state-staff.can-manage .view-tabs,
  body.state-account.state-staff.can-manage:not(.single-view) .view-tabs {
    top: auto;
    left: 50%;
    bottom: 12px;
    width: auto;
    max-height: none;
    transform: translateX(-50%);
  }
}
.kitchen-language-controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.kitchen-language-buttons {
  display: flex;
  gap: 0.35rem;
}

.kitchen-language-buttons button,
.kitchen-carousel-toggle {
  min-height: 44px;
  border: 1px solid rgba(8, 71, 57, 0.18);
  border-radius: 999px;
  background: #f5f7f4;
  color: #052d24;
  font-weight: 800;
  padding: 0.55rem 0.8rem;
}

.kitchen-language-buttons button.active,
.kitchen-carousel-toggle.active {
  background: var(--mint, #21cfa2);
  border-color: transparent;
}

.kitchen-language-buttons button span { margin-left: 0.25rem; }
.kitchen-language-hint { color: #687a74; font-size: 0.82rem; }

.language-settings {
  display: grid;
  grid-template-columns: minmax(220px, 1.3fr) minmax(180px, 1fr) minmax(320px, 2fr) minmax(150px, .7fr) auto;
  gap: 1rem;
  align-items: end;
  margin-top: 1rem;
  padding: 1.2rem;
  border: 1px solid rgba(8, 71, 57, 0.16);
  border-radius: 1.2rem;
  background: rgba(255,255,255,.82);
}

.language-settings > div span { display: block; color: #66766f; margin-top: .25rem; }
.language-settings label, .language-settings fieldset { display: grid; gap: .4rem; font-weight: 750; }
.language-settings select { min-height: 44px; border: 1px solid #ccd7d2; border-radius: .8rem; padding: .55rem; background: white; }
.language-settings fieldset { grid-template-columns: repeat(3, auto); border: 0; padding: 0; margin: 0; }
.language-settings fieldset label { display: flex; align-items: center; gap: .25rem; }

@media (max-width: 1100px) {
  .language-settings { grid-template-columns: 1fr 1fr; }
  .kitchen-view .section-heading { align-items: flex-start; }
}

/* Service status guide: one urgency color, separate food/drink signals. */
body.state-account .floor-status-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin: 8px 0 10px;
  padding: 8px 10px;
  border: 1px solid rgba(13, 35, 29, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  color: #51645c;
  font-size: 0.68rem;
}

body.state-account .floor-status-legend strong {
  color: #10211d;
  font-size: 0.72rem;
}

body.state-account .floor-status-legend > span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

body.state-account .floor-status-legend i {
  width: 10px;
  height: 10px;
  border: 1px solid rgba(13, 35, 29, 0.18);
  border-radius: 50%;
}

body.state-account .floor-status-legend .legend-channel {
  padding-right: 4px;
  color: #10211d;
  font-weight: 800;
}

.floor-status-legend i.flow-free { background: #fff; }
.floor-status-legend i.flow-occupied { background: #ef8c80; }
.floor-status-legend i.flow-ordered { background: #78aee8; }
.floor-status-legend i.flow-ready { background: #f3c65f; }
.floor-status-legend i.flow-picked_up { background: #a98be8; }
.floor-status-legend i.flow-delivered { background: #69c99a; }

body.state-account .table-node.flow-free .table-surface {
  border-color: #78ae9c;
  background: #f8fbf8;
}

body.state-account .table-node.flow-occupied .table-surface {
  border-color: #d96c61;
  background: #fff0ed;
}

body.state-account .table-node.flow-ordered .table-surface {
  border-color: #4f8dce;
  background: #edf5ff;
}

body.state-account .table-node.flow-ready .table-surface {
  border-color: #dfa72b;
  background: #fff5d8;
  box-shadow: 0 0 0 5px rgba(223, 167, 43, 0.17), 0 20px 42px rgba(31, 61, 50, 0.18);
}

body.state-account .table-node.flow-picked_up .table-surface {
  border-color: #8062c4;
  background: #f4efff;
}

body.state-account .table-node.flow-delivered .table-surface {
  border-color: #31966a;
  background: #e8f8ef;
}

body.state-account .table-node.selected .table-surface {
  box-shadow: 0 0 0 5px rgba(40, 211, 157, 0.22), 0 20px 42px rgba(31, 61, 50, 0.18);
}

body.state-account .table-flow-badge.flow-occupied { background: #ef8c80; color: #4f1e19; }
body.state-account .table-flow-badge.flow-ordered { background: #78aee8; color: #163d68; }
body.state-account .table-flow-badge.flow-picked_up { background: #a98be8; color: #302052; }
body.state-account .table-flow-badge.flow-delivered { background: #69c99a; color: #123f2b; }

body.state-account .seat-chair.flow-free { border-color: #78ae9c; background: #fff; color: #155f48; }
body.state-account .seat-chair.flow-occupied { border-color: #d96c61; background: #ef8c80; color: #4f1e19; }
body.state-account .seat-chair.flow-ordered { border-color: #4f8dce; background: #78aee8; color: #163d68; }
body.state-account .seat-chair.flow-ready { border-color: #a8760b; background: #f3c65f; color: #2f2208; }
body.state-account .seat-chair.flow-picked_up { border-color: #8062c4; background: #a98be8; color: #302052; }
body.state-account .seat-chair.flow-delivered { border-color: #31966a; background: #69c99a; color: #123f2b; }

body.state-account .seat-chair .seat-number {
  transform: translateY(-4px);
}

body.state-account .seat-channel-markers {
  position: absolute;
  right: 2px;
  bottom: 1px;
  left: 2px;
  display: flex;
  justify-content: center;
  gap: 2px;
  font-size: 0.48rem;
  line-height: 1;
}

body.state-account .seat-channel-markers i,
body.state-account .seat-choice-channels i {
  font-style: normal;
  filter: grayscale(0.1);
}

body.state-account .seat-choice.flow-occupied { background: #fff0ed; }
body.state-account .seat-choice.flow-ordered { background: #edf5ff; border-color: #78aee8; }
body.state-account .seat-choice.flow-ready { background: #fff5d8; border-color: #dfa72b; }
body.state-account .seat-choice.flow-picked_up { background: #f4efff; border-color: #a98be8; }
body.state-account .seat-choice.flow-delivered { background: #e8f8ef; border-color: #69c99a; }

body.state-account .seat-choice-channels {
  display: flex;
  justify-content: center;
  gap: 5px;
  font-size: 0.72rem;
  line-height: 1;
}

body.state-account .seat-availability.flow-occupied { color: #a73d32; }
body.state-account .seat-availability.flow-ordered { color: #326fae; }
body.state-account .seat-availability.flow-ready { color: #9b6800; }
body.state-account .seat-availability.flow-picked_up { color: #6a4aaa; }
body.state-account .seat-availability.flow-delivered { color: #21784e; }

@media (max-width: 760px) {
  body.state-account .floor-status-legend {
    align-items: flex-start;
  }
}

body.state-account #assignButton.release-mode {
  border: 1px solid rgba(40, 211, 157, 0.42);
  background: rgba(40, 211, 157, 0.12);
  color: #b9f5e2;
}

body.state-account #assignButton.release-mode:not(:disabled):hover {
  background: rgba(40, 211, 157, 0.22);
}

body.state-account #assignButton.release-mode:disabled {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.4);
}

body.state-account .table-release-hint {
  margin: 0 16px 10px;
  padding: 8px 12px;
  border: 1px solid rgba(243, 198, 95, 0.38);
  border-radius: 10px;
  background: rgba(243, 198, 95, 0.12);
  color: #ffe29a;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.35;
}

body.state-account .table-care-note.releasable {
  border-color: rgba(40, 211, 157, 0.28);
  background: rgba(40, 211, 157, 0.09);
}

body.state-account .table-care-note.blocked {
  border-color: rgba(243, 198, 95, 0.22);
  background: rgba(243, 198, 95, 0.06);
}

/* Multi-server responsibility: primary, support and seat-level ownership. */
body.state-account .table-care-note .care-manage-button {
  margin-left: auto;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.08);
  color: #fffdf6;
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
}

body.state-account .support-badges {
  position: absolute;
  top: 7px;
  right: 34px;
  z-index: 4;
  display: flex;
  flex-direction: row-reverse;
}

body.state-account .support-badges span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: -5px;
  border: 1px solid #07130f;
  border-radius: 50%;
  background: #fffdf6;
  color: #07130f;
  font-size: 0.58rem;
  font-weight: 950;
}

body.state-account .seat-responsibility {
  position: absolute;
  right: -6px;
  bottom: -7px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 3px;
  border: 1px solid #07130f;
  border-radius: 999px;
  background: #fffdf6;
  color: #07130f;
  font-size: 0.5rem;
  font-weight: 950;
}

body.state-account .seat-owner-chip {
  display: inline-flex;
  align-self: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(7,19,15,0.1);
  font-size: 0.58rem;
  font-style: normal;
  line-height: 1;
}

.responsibility-dialog {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}

#responsibilityDialog {
  z-index: 200;
}

.responsibility-current,
.responsibility-help,
.responsibility-seats {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-strong);
}

.responsibility-current {
  grid-template-columns: auto 1fr;
  align-items: baseline;
}

.responsibility-current > span:last-child {
  grid-column: 1 / -1;
  color: var(--muted);
}

.responsibility-dialog select {
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.responsibility-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.responsibility-seat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 8px;
}

.responsibility-seat-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  font-weight: 800;
}

@media (max-width: 620px) {
  .responsibility-actions { grid-template-columns: 1fr; }
  body.state-account .table-care-note { flex-wrap: wrap; }
  body.state-account .table-care-note .care-manage-button { width: 100%; margin-left: 0; }
}

/* Must remain last: the order panel is narrow even on a wide desktop. */
body.state-account #productGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

body.state-account #productGrid .service-product-tools {
  grid-template-columns: minmax(0, 1fr) 122px;
  width: 100%;
  min-width: 0;
}

body.state-account #productGrid .service-product-tools > small {
  grid-column: 1 / -1;
  padding: 0;
}

body.state-account #productGrid > .product-button {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(74px, auto) 76px 22px !important;
  column-gap: 8px;
  min-height: 48px;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

body.state-account #productGrid > .product-button > * { min-width: 0; }
body.state-account #productGrid > .product-button > strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.state-account #productGrid > .product-button:not(:has(.service-product-modifier-dot)) {
  grid-template-columns: minmax(0, 1fr) minmax(74px, auto) 76px !important;
}

body.state-account .order-submit-error {
  margin: 10px 0;
  padding: 10px 12px;
  border: 1px solid rgba(201, 68, 59, .36);
  border-radius: 10px;
  background: #f9dfda;
  color: #8d2922;
  font-weight: 850;
}

@media (max-width: 520px) {
  body.state-account #productGrid .service-product-tools { grid-template-columns: 1fr; }
  body.state-account #productGrid > .product-button { grid-template-columns: minmax(0, 1fr) 70px 22px !important; }
  body.state-account #productGrid > .product-button:not(:has(.service-product-modifier-dot)) { grid-template-columns: minmax(0, 1fr) 70px !important; }
  body.state-account #productGrid .service-product-category-name { display: none; }
}

/* Compact service header and balanced table/chair proportions. */
body.state-account .order-panel > .order-panel-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

body.state-account .order-panel > .order-panel-heading > div:first-child {
  min-width: 0;
}

body.state-account #selectedTableTitle {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin: 0;
}

body.state-account #selectedTableTitle .order-title-main {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  white-space: nowrap;
}

body.state-account #selectedTableTitle .order-title-meta {
  font-size: 0.72rem;
  line-height: 1.2;
}

body.state-account .order-header-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

body.state-account .order-header-actions > button {
  width: auto;
  min-height: 38px;
  padding: 8px 9px;
  border-radius: 12px;
  box-shadow: none;
  font-size: 0.64rem;
  line-height: 1.1;
  white-space: nowrap;
}

body.state-account .order-manage-button {
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: #fffdf6;
}

body.state-account .order-manage-button[hidden] {
  display: none !important;
}

body.state-account .order-panel .seat-picker > .order-step-label:first-child {
  margin-top: 6px;
}

body.state-account .table-node:not(.table-shape-round):not(.table-shape-oval) .table-label {
  font-size: clamp(0.82rem, 1.5vw, 1.05rem);
}

@media (max-width: 760px) {
  body.state-account .order-panel > .order-panel-heading {
    grid-template-columns: 1fr;
  }
  body.state-account .order-header-actions {
    flex-wrap: wrap;
  }
}

/* Selected seats retain their status color and use a high-contrast outline. */
body.state-account .seat-choice.selected:not(.table-choice) {
  border-color: #20c997;
  background: #f7faf8;
  color: #07130f;
  box-shadow: inset 0 0 0 3px #20c997, 0 0 0 1px rgba(255,255,255,0.72);
}

body.state-account .seat-choice.selected.flow-occupied:not(.table-choice) { background: #ffe4df; }
body.state-account .seat-choice.selected.flow-ordered:not(.table-choice) { background: #e4f1ff; }
body.state-account .seat-choice.selected.flow-ready:not(.table-choice) { background: #fff0bd; }
body.state-account .seat-choice.selected.flow-picked_up:not(.table-choice) { background: #eee5ff; }
body.state-account .seat-choice.selected.flow-delivered:not(.table-choice) { background: #dcf5e7; }

body.state-account .seat-choice.selected.flow-occupied .seat-availability { color: #8f281f; }
body.state-account .seat-choice.selected.flow-ordered .seat-availability { color: #245f9d; }
body.state-account .seat-choice.selected.flow-ready .seat-availability { color: #795000; }
body.state-account .seat-choice.selected.flow-picked_up .seat-availability { color: #583a98; }
body.state-account .seat-choice.selected.flow-delivered .seat-availability { color: #17633e; }

body.state-account .seat-choice.selected:not(.table-choice) .seat-owner-chip {
  background: rgba(7,19,15,0.1);
  color: #07130f;
}

/* Compact person selector: color communicates state; labels only identify seat and time. */
body.state-account .seat-choice-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}

body.state-account .seat-choice-grid .table-choice {
  grid-column: 1 / -1;
  min-height: 46px;
  padding: 7px 10px;
}

body.state-account .seat-control {
  min-width: 0;
}

body.state-account .seat-choice:not(.table-choice) {
  min-height: 42px;
  padding: 7px 24px 7px 9px;
  border-radius: 11px;
}

body.state-account .seat-compact-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 100%;
  white-space: nowrap;
  font-size: 0.86rem;
  font-weight: 900;
  line-height: 1;
}

body.state-account .seat-compact-label small {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  color: currentColor;
  font-size: 0.68rem;
  font-weight: 850;
  opacity: .92;
}

body.state-account .seat-choice:not(.table-choice) .seat-owner-chip,
body.state-account .seat-choice:not(.table-choice) .seat-choice-channels {
  display: none;
}

body.state-account .seat-control .seat-state {
  top: 50%;
  right: 6px;
  width: 18px;
  height: 18px;
  transform: translateY(-50%);
  font-size: 0.64rem;
}

body.state-account #selectedTableTitle .order-title-time {
  color: rgba(255, 253, 246, .72);
  font-size: .66rem;
  font-weight: 800;
  white-space: nowrap;
}

body.state-account #tableGuestStatus:empty {
  display: none;
}

@media (max-width: 520px) {
  body.state-account .seat-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Compact kitchen title and monitor-specific language controls. */
body.state-account #kitchenView.station-view > .section-heading {
  position: relative;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  margin-bottom: 8px;
}

body.state-account #kitchenView.station-view > .section-heading .eyebrow {
  margin-bottom: 2px;
  font-size: .54rem;
}

body.state-account #kitchenView.station-view > .section-heading h2 {
  font-size: clamp(1.65rem, 2.5vw, 2.35rem);
  line-height: 1;
}

.kitchen-language-controls {
  position: relative;
  flex-wrap: nowrap;
  gap: 6px;
}

.kitchen-language-buttons {
  gap: 5px;
}

.kitchen-language-buttons button,
.kitchen-carousel-toggle,
.kitchen-language-settings-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid rgba(8, 71, 57, .18);
  border-radius: 999px;
  background: #f5f7f4;
  color: #052d24;
  font-weight: 850;
  line-height: 1;
}

.kitchen-language-buttons button.default {
  border-color: #0b5c49;
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1px #0b5c49;
}

.kitchen-language-buttons button.active,
.kitchen-carousel-toggle.active,
.kitchen-language-settings-toggle.active {
  background: var(--mint, #21cfa2);
  border-color: #08735a;
}

.kitchen-carousel-toggle,
.kitchen-language-settings-toggle {
  width: 36px;
  padding: 0;
  font-size: 1.15rem;
}

.kitchen-carousel-toggle.active span {
  animation: kitchen-carousel-spin 1.4s linear infinite;
}

@keyframes kitchen-carousel-spin {
  to { transform: rotate(360deg); }
}

.kitchen-language-settings-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 8px);
  right: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  width: min(520px, calc(100vw - 48px));
  padding: 15px;
  border: 1px solid rgba(8, 71, 57, .2);
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 18px 46px rgba(3, 38, 29, .24);
  color: #09251f;
}

.kitchen-settings-heading,
.kitchen-language-settings-panel fieldset,
.kitchen-settings-actions {
  grid-column: 1 / -1;
}

.kitchen-settings-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.kitchen-settings-heading small { color: #687a74; }
.kitchen-language-settings-panel > label { display: grid; gap: 5px; font-weight: 800; }
.kitchen-language-settings-panel select {
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid #cbd8d2;
  border-radius: 10px;
  background: #fff;
}

.kitchen-language-settings-panel fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 14px;
  margin: 0;
  padding: 10px 0 0;
  border: 0;
  border-top: 1px solid #dce5e0;
}

.kitchen-language-settings-panel fieldset label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
}

.kitchen-settings-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.kitchen-settings-actions button {
  width: auto;
  min-height: 38px;
  padding: 7px 14px;
}

@media (max-width: 760px) {
  body.state-account #kitchenView.station-view > .section-heading { align-items: flex-start; }
  .kitchen-language-controls { flex-wrap: wrap; }
  .kitchen-language-settings-panel { position: fixed; top: 86px; right: 12px; left: 12px; width: auto; }
}

/* Service ordering: dense numbered rows, visible action and floor-plan timings. */
body.state-account .floor-table-time { display:block; margin-top:3px; color:#536e66; font-size:10px; font-weight:850; line-height:1; }
body.state-account .seat-chair .floor-seat-time { display:block; margin-top:-1px; font-size:8px; font-weight:850; line-height:1; opacity:.82; }
body.state-account .order-submit-dock { position:sticky; top:0; z-index:20; margin:6px 0 10px; }
body.state-account .order-submit-dock:has(#sendOrderButton[hidden]) { display:none; }
body.state-account .order-submit-dock #sendOrderButton { width:100%; min-height:46px; margin:0; box-shadow:0 8px 18px rgba(0,40,32,.24); }
body.state-account #productGrid .service-product-tools { grid-template-columns:118px minmax(0,1fr) !important; align-items:end; }
body.state-account #productGrid .service-product-note-slot { grid-column:1 / -1; }
body.state-account #productGrid .service-product-note-slot .note-label { display:grid; grid-template-columns:118px minmax(0,1fr); align-items:center; gap:8px; margin:0; }
body.state-account #productGrid .service-product-note-slot .note-label > span { font-size:11px; font-weight:850; text-transform:uppercase; }
body.state-account #productGrid .service-product-note-slot input { min-height:42px; }
body.state-account #productGrid > .service-product-row,
body.state-account #productGrid > .service-product-row:not(:has(.service-product-modifier-dot)) { display:grid !important; grid-template-columns:82px 34px minmax(0,1fr) 70px 34px !important; align-items:center; gap:7px; min-height:46px; padding:6px 8px; cursor:default; }
body.state-account #productGrid > .service-product-row > * { min-width:0; }
body.state-account #productGrid > .service-product-row > strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.state-account .service-product-number { color:#58736b; font-size:12px; font-weight:900; }
body.state-account .service-product-customize { min-width:0; padding:0; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
body.state-account .service-product-customize strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body.state-account .service-product-customize:disabled { cursor:not-allowed; }
body.state-account .service-product-add { display:grid; width:32px; height:32px; padding:0; place-items:center; border:0; border-radius:50%; background:#20c99b; color:#00271f; font-size:23px; font-weight:950; line-height:1; cursor:pointer; }
body.state-account .service-product-add:disabled { cursor:not-allowed; opacity:.35; }

@media (max-width:520px) {
  body.state-account #productGrid .service-product-tools { grid-template-columns:104px minmax(0,1fr) !important; }
  body.state-account #productGrid .service-product-note-slot .note-label { grid-template-columns:1fr; }
  body.state-account #productGrid > .service-product-row,
  body.state-account #productGrid > .service-product-row:not(:has(.service-product-modifier-dot)) { grid-template-columns:30px minmax(0,1fr) 64px 32px !important; }
  body.state-account #productGrid .service-product-category-name { display:none; }
}

/* Service refinements: readable floor times and tap-friendly recipe changes. */
body.state-account .table-body {
  flex-direction: column;
  gap: 5px;
}

body.state-account .floor-table-time {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 3px 6px;
  border: 1px solid rgba(24, 93, 67, .14);
  border-radius: 999px;
  background: rgba(255, 255, 255, .74);
  color: #315f51;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 2px 6px rgba(7, 19, 15, .08);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

body.state-account .seat-chair .floor-seat-time {
  position: absolute;
  z-index: 8;
  top: calc(100% + 3px);
  right: auto;
  bottom: auto;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  margin: 0;
  padding: 3px 4px;
  border: 1px solid rgba(24, 93, 67, .18);
  border-radius: 999px;
  background: #fffdf8;
  color: #184f40;
  font-size: 8px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: 0;
  opacity: 1;
  box-shadow: 0 3px 8px rgba(7, 19, 15, .16);
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Billing overview opened by holding a table or seat. */
#billingDialog {
  z-index: 260;
}

.billing-dialog {
  background: var(--surface, #fffdf9);
  border: 1px solid var(--line, #d9ded8);
  border-radius: 22px;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .32);
  color: var(--text, #10211d);
  display: grid;
  gap: 18px;
  max-height: calc(100vh - 32px);
  overflow: auto;
  padding: 24px;
  width: min(980px, 100%);
}

.billing-title-row {
  align-items: center;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 42px;
}

.billing-title-row h3 {
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 3px;
}

.billing-grand-total {
  align-items: flex-end;
  background: color-mix(in srgb, var(--theme-accent, #22cda0) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--theme-accent, #22cda0) 38%, #ccd8d2);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  padding: 10px 14px;
}

.billing-grand-total span,
.billing-price-field span,
.billing-adjustment-form small {
  color: #52635e;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.billing-grand-total strong {
  color: #10211d;
  font-size: 25px;
}

.billing-groups,
.billing-lines {
  display: grid;
  gap: 9px;
}

.billing-group {
  border: 1px solid #d8dfda;
  border-radius: 16px;
  overflow: hidden;
}

.billing-group > header {
  align-items: center;
  background: #edf4f0;
  color: #10211d;
  display: flex;
  gap: 16px;
  justify-content: space-between;
  padding: 11px 14px;
}

.billing-group > header > strong {
  font-size: 20px;
}

.billing-lines {
  background: #fff;
  padding: 8px;
}

.billing-line {
  align-items: center;
  background: #f7f9f7;
  border: 1px solid #e3e8e4;
  border-radius: 11px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(210px, 1fr) 120px 120px auto;
  padding: 10px 12px;
}

.billing-adjustment-line {
  background: #fff8e8;
}

.billing-line-name {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.billing-line-name strong,
.billing-line-name small {
  overflow-wrap: anywhere;
}

.billing-line-name small {
  color: #64736e;
}

.billing-price-field {
  display: grid;
  gap: 3px;
}

.billing-price-field input,
.billing-adjustment-form input {
  background: #fff;
  border: 1px solid #bdcac3;
  border-radius: 9px;
  color: #10211d;
  font: inherit;
  font-weight: 800;
  min-width: 0;
  padding: 9px 10px;
  width: 100%;
}

.billing-line-total {
  color: #10211d;
  text-align: right;
  white-space: nowrap;
}

.billing-remove {
  background: #4c332d;
  border: 1px solid #6f4940;
  border-radius: 9px;
  color: #fff2ee;
  font-weight: 900;
  padding: 10px 12px;
}

.billing-adjustment-form {
  align-items: end;
  background: #eef5f1;
  border: 1px dashed #9bb4a8;
  border-radius: 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 1.4fr) 120px auto;
  padding: 14px;
}

.billing-adjustment-form > div {
  display: grid;
  gap: 3px;
}

.billing-adjustment-form .primary-action {
  min-height: 44px;
  white-space: nowrap;
}

.billing-table-discount {
  align-items: center;
  background: color-mix(in srgb, var(--theme-accent, #22cda0) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--theme-accent, #22cda0) 34%, #ccd8d2);
  border-radius: 16px;
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(210px, 1fr) 78px 130px auto;
  padding: 14px;
}

.billing-table-discount > div {
  display: grid;
  gap: 2px;
}

.billing-table-discount small {
  color: #52635e;
}

.billing-table-discount input,
.billing-table-discount select {
  background: #fff;
  border: 1px solid #bdcac3;
  border-radius: 10px;
  color: #10211d;
  font: inherit;
  font-weight: 850;
  min-height: 44px;
  padding: 8px 10px;
}

.billing-applied-discounts {
  display: grid;
  gap: 8px;
}

.billing-applied-discount {
  align-items: center;
  background: #fff7e5;
  border: 1px solid #e8cf96;
  border-radius: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  padding: 10px 12px;
}

.billing-applied-discount > div {
  display: grid;
  gap: 2px;
}

.billing-applied-discount small {
  color: #625947;
}

.billing-person-summary {
  background: #f6f9f7;
  border: 1px solid #d8dfda;
  border-radius: 16px;
  padding: 12px 14px;
}

.billing-person-summary h4 {
  margin: 0 0 9px;
}

.billing-person-summary > div {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
}

.billing-person-summary > div > div {
  align-items: center;
  background: #fff;
  border: 1px solid #dbe3de;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  padding: 9px 11px;
}

.billing-discount-share {
  background: #effaf5;
  border-color: #b8decf;
}

.billing-checkout-bar {
  align-items: center;
  background: #102d25;
  border-radius: 16px;
  color: #fff;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  padding: 13px 14px;
  position: sticky;
  bottom: -24px;
  z-index: 2;
}

.billing-checkout-bar > div {
  display: grid;
}

.billing-checkout-bar span {
  color: #b9cdc6;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.billing-checkout-bar strong {
  font-size: 22px;
}

.billing-payment-form fieldset {
  border: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin: 0;
  padding: 0;
}

.billing-payment-form legend {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 10px;
}

.billing-payment-form label {
  align-items: center;
  background: #f5f8f6;
  border: 2px solid #d8e0db;
  border-radius: 14px;
  cursor: pointer;
  display: flex;
  gap: 10px;
  padding: 16px;
}

.billing-payment-form label:has(input:checked) {
  background: color-mix(in srgb, var(--theme-accent, #22cda0) 12%, #fff);
  border-color: var(--theme-accent, #22cda0);
}

.billing-payment-form label span { font-size: 24px; }
.billing-payment-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.billing-payment-result { justify-items: center; max-width: 520px; text-align: center; }
.billing-payment-check { align-items: center; background: var(--theme-accent, #22cda0); border-radius: 50%; color: #05261d; display: flex; font-size: 44px; font-weight: 950; height: 82px; justify-content: center; width: 82px; }
.billing-payment-result h3 { font-size: 30px; margin: 0; }
.billing-payment-result-total { font-size: 42px; }

.billing-empty,
.billing-help {
  color: #60706a;
  padding: 16px;
  text-align: center;
}

.billing-help {
  font-size: 13px;
  padding: 0;
}

body.state-account .table-node,
body.state-account .seat-chair,
body.state-account .seat-choice {
  touch-action: manipulation;
}

@media (max-width: 720px) {
  .billing-dialog { border-radius: 16px; padding: 15px; }
  .billing-title-row { align-items: start; grid-template-columns: minmax(0, 1fr) 38px; }
  .billing-grand-total { align-items: flex-start; grid-column: 1 / -1; min-width: 0; }
  .billing-title-row .icon-action { grid-column: 2; grid-row: 1; }
  .billing-line { grid-template-columns: minmax(0, 1fr) 105px; }
  .billing-line-total { text-align: left; }
  .billing-adjustment-form { grid-template-columns: 1fr 100px; }
  .billing-adjustment-form > div { grid-column: 1 / -1; }
  .billing-adjustment-form > input[name="label"] { grid-column: 1 / -1; }
  .billing-adjustment-form .primary-action { grid-column: 1 / -1; }
  .billing-table-discount { grid-template-columns: 78px 1fr; }
  .billing-table-discount > div { grid-column: 1 / -1; }
  .billing-table-discount button { grid-column: 1 / -1; }
  .billing-checkout-bar { align-items: stretch; bottom: -15px; flex-direction: column; }
  .billing-payment-form fieldset { grid-template-columns: 1fr; }
  .billing-payment-actions { flex-direction: column-reverse; }
}

/* A single search result exposes the everyday recipe changes without opening the dialog. */
body.state-account #productGrid > .service-quick-modifiers {
  grid-column: 1 / -1;
  display: grid;
  gap: 9px;
  margin-top: 2px;
  padding: 11px 12px;
  border: 1px solid rgba(79, 198, 156, .3);
  border-radius: 14px;
  background: rgba(255, 255, 255, .07);
  color: #fffdf6;
}

body.state-account .service-quick-modifier-heading,
body.state-account .service-quick-modifier-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.state-account .service-quick-modifier-heading {
  justify-content: space-between;
}

body.state-account .service-quick-modifier-heading strong { font-size: .84rem; }
body.state-account .service-quick-modifier-heading small { color: rgba(255,255,255,.68); font-size: .68rem; }
body.state-account .service-quick-modifier-group > span {
  flex: 0 0 74px;
  color: rgba(255,255,255,.72);
  font-size: .64rem;
  font-weight: 900;
  text-transform: uppercase;
}

body.state-account .service-quick-modifier-group > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.state-account .service-quick-chip {
  width: auto;
  min-height: 31px;
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  background: #dcefe2;
  color: #124d36;
  font-size: .75rem;
  font-weight: 850;
  cursor: pointer;
}

body.state-account .service-quick-chip.removed {
  border-color: #e88a7f;
  background: #ffe0db;
  color: #9a2e22;
  text-decoration: line-through;
}

body.state-account .service-quick-chip.extra {
  border-color: #48bb8b;
  background: #ccefdc;
  color: #075b3a;
}

body.state-account .service-quick-chip.available { background: rgba(255,255,255,.92); }

/* Sent items stay compactly editable until their station starts production. */
body.state-account .service-editable-orders {
  display: grid;
  gap: 6px;
  padding: 9px;
  border: 1px solid rgba(255, 206, 91, .26);
  border-radius: 13px;
  background: rgba(255, 255, 255, .05);
}

body.state-account .service-editable-orders-heading,
body.state-account .service-editable-order {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

body.state-account .service-editable-orders-heading strong { font-size: .78rem; }
body.state-account .service-editable-orders-heading small { color: rgba(255,255,255,.62); font-size: .62rem; text-align: right; }
body.state-account .service-editable-order {
  min-height: 38px;
  padding: 5px 6px 5px 9px;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
}
body.state-account .service-editable-order > span { display: grid; min-width: 0; }
body.state-account .service-editable-order strong,
body.state-account .service-editable-order small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
body.state-account .service-editable-order strong { font-size: .75rem; }
body.state-account .service-editable-order small { color: rgba(255,255,255,.66); font-size: .62rem; }
body.state-account .service-editable-order-actions { display: flex; gap: 5px; flex: 0 0 auto; }
body.state-account .service-editable-order button {
  width: auto;
  min-height: 30px;
  padding: 4px 9px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: #fff4d5;
  color: #533c00;
  font-size: .7rem;
  font-weight: 900;
}
body.state-account .service-editable-order button.danger { background: #f8ded8; color: #7f281b; }

@media (max-width: 520px) {
  body.state-account .service-quick-modifier-heading,
  body.state-account .service-quick-modifier-group { align-items: flex-start; flex-direction: column; gap: 5px; }
  body.state-account .service-quick-modifier-group > span { flex-basis: auto; }
}

body.state-account .service-product-add {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(0, 69, 52, .18);
  border-radius: 9px;
  background: linear-gradient(145deg, #2cdaad, #18bb90);
  color: #002c22;
  font-size: 21px;
  line-height: 1;
  box-shadow: 0 4px 9px rgba(5, 93, 69, .2);
}

body.state-account .service-product-add:hover:not(:disabled) {
  background: #39dfb5;
  transform: translateY(-1px);
}

body.state-account .cart-ingredient-editor,
body.state-account .cart-extra-editor {
  grid-column: 1 / -1;
}

body.state-account .cart-ingredient-editor {
  display: grid;
  gap: 7px;
  padding-top: 9px;
  border-top: 1px solid rgba(255, 255, 255, .1);
}

body.state-account .cart-ingredient-help {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

body.state-account .cart-ingredient-help small {
  color: rgba(255, 255, 255, .58);
  font-size: 10px;
}

body.state-account .cart-ingredient-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

body.state-account .cart-ingredient-chip {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 900;
  cursor: pointer;
  user-select: none;
}

body.state-account .cart-ingredient-chip.included {
  border-color: #74c7a7;
  background: #dff5e9;
  color: #145f43;
}

body.state-account .cart-ingredient-chip.removed {
  border-color: #ef9d94;
  background: #ffe1dc;
  color: #9e3028;
  text-decoration: line-through;
}

body.state-account .cart-ingredient-chip.extra {
  border-color: #28c997;
  background: #28c997;
  color: #052d22;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .32);
}

body.state-account .cart-extra-editor {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
}

body.state-account .cart-extra-editor label {
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  font-weight: 850;
}

body.state-account .cart-extra-editor input {
  min-width: 0;
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 9px;
  background: rgba(255, 255, 255, .94);
  color: #07130f;
}

body.state-account .cart-extra-editor button {
  min-height: 34px;
  padding: 6px 10px;
  border: 0;
  border-radius: 9px;
  background: #dff5e9;
  color: #145f43;
  font-weight: 900;
}

@media (max-width: 520px) {
  body.state-account .cart-ingredient-help { align-items: flex-start; flex-direction: column; gap: 2px; }
  body.state-account .cart-extra-editor { grid-template-columns: 1fr auto; }
  body.state-account .cart-extra-editor label { grid-column: 1 / -1; }
}

/* Site-wide color concepts and WCAG-safe foregrounds. Keep this layer last. */
body.state-account .topbar,
body.state-locked .topbar,
body.state-account:not(.state-staff) .topbar,
body.state-account #serviceView .order-panel,
body.state-account .order-panel,
body.state-account .view-tabs,
body.single-view.state-account .view-tabs,
body.state-account:not(.single-view) .view-tabs { background:linear-gradient(180deg,var(--theme-deep-2),var(--theme-deep))!important; }

body.state-account { background:linear-gradient(145deg,var(--theme-deep) 0%,var(--theme-deep-2) 34%,#f2f0e8 34.2%,#f8f5ed 100%) fixed!important; }
body.state-locked { background:linear-gradient(145deg,var(--theme-deep) 0%,var(--theme-deep-2) 36%,#f2f0e8 36.2%,#f8f5ed 100%) fixed!important; }

body.state-account,body.state-locked { --mint:var(--theme-accent);--tablavo-green:var(--theme-accent);--tablavo-green-dark:var(--theme-accent-hover);--accent:var(--theme-accent);--accent-strong:var(--theme-accent-hover); }
body.state-account .primary-action,body.state-account .tab-button.active,body.state-account .room-tab.active,body.state-account .service-product-add,body.state-account .order-submit-dock .primary-action,.primary-action {
  background:var(--theme-accent)!important;color:var(--theme-on-accent)!important;
}
body.state-account .staff-card.active,body.state-account .seat-choice.selected:not(.table-choice) { border-color:var(--theme-accent)!important;box-shadow:inset 0 0 0 3px var(--theme-accent),0 0 0 1px rgba(255,255,255,.76)!important; }
body.state-account .table-node.selected .table-surface { border-color:var(--theme-accent)!important;box-shadow:0 0 0 5px color-mix(in srgb,var(--theme-accent) 24%,transparent),0 20px 42px rgba(31,61,50,.18)!important; }

/* Status cards are intentionally pale; their content must always remain dark. */
body.state-account .seat-choice:not(.table-choice),body.state-account .seat-choice:not(.table-choice) strong,body.state-account .seat-choice:not(.table-choice) .seat-compact-label,body.state-account .seat-choice:not(.table-choice) .seat-compact-label small {
  color:#10211d!important;text-shadow:none!important;
}
body.state-account .seat-choice.selected:not(.table-choice) { color:#10211d!important; }
body.state-account .seat-choice.selected:not(.table-choice):focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible { outline:3px solid var(--theme-focus);outline-offset:2px; }

.theme-picker-mount { position:relative;z-index:250;flex:0 0 auto; }
.theme-picker-toggle { display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.09);color:var(--theme-on-deep);font-weight:850; }
.theme-picker-toggle>span:first-child { display:grid;place-items:center;width:21px;height:21px;border:3px solid var(--theme-accent);border-radius:50%;background:linear-gradient(90deg,var(--theme-accent) 50%,#fff 50%);color:transparent; }
.theme-picker-panel { position:absolute;top:calc(100% + 10px);right:0;width:min(360px,calc(100vw - 28px));padding:16px;border:1px solid rgba(255,255,255,.18);border-radius:18px;background:#fffdf8;color:#10211d;box-shadow:0 22px 60px rgba(0,0,0,.3); }
.theme-picker-heading { display:grid;gap:2px;margin-bottom:12px; }.theme-picker-heading strong{font-size:1rem}.theme-picker-heading small{color:#62706b}.theme-preset-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.theme-preset{display:flex;align-items:center;gap:9px;min-height:44px;padding:7px 9px;border:2px solid transparent;border-radius:12px;background:#f1f3f0;color:#10211d;font-weight:800;text-align:left}.theme-preset.active{border-color:var(--theme-accent);background:var(--theme-accent-soft)}.theme-preset i{width:30px;height:30px;border-radius:9px;background:linear-gradient(135deg,var(--swatch) 0 50%,var(--swatch-deep) 50%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)}
.theme-custom-row{display:grid;grid-template-columns:1fr 42px auto;align-items:center;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid #d9ddd5;font-size:.78rem;font-weight:800}.theme-custom-row input{width:42px;height:38px;padding:2px;border:1px solid #ccd4cf;border-radius:9px;background:#fff}.theme-custom-row button{min-height:38px;padding:0 11px;border-radius:9px;background:var(--theme-accent);color:var(--theme-on-accent);font-weight:850}
@media(max-width:820px){.theme-picker-toggle-label{display:none}.theme-picker-toggle{width:40px;padding:0;justify-content:center}}

/* One canonical brand treatment in every app state (variant 1). */
.topbar,
body.state-account .topbar,
body.state-account:not(.state-staff) .topbar,
body.state-locked .topbar {
  min-height: 78px !important;
  padding: 10px clamp(18px, 3vw, 44px) !important;
}

.topbar .brand-lockup,
body.state-account .brand-lockup,
body.state-account:not(.state-staff) .brand-lockup,
body.state-locked .brand-lockup {
  min-width: 0;
}

.topbar .brand-logo-tint {
  width: clamp(190px, 18vw, 250px);
  height: 56px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 38%, transparent);
  border-radius: 15px;
  background: #05090a;
  box-shadow: none;
}

.topbar .brand-logo,
body.state-account .brand-logo,
body.state-account:not(.state-staff) .brand-logo,
body.state-locked .brand-logo {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  max-height: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  object-fit: fill;
}

body.state-account .header-account-session {
  min-height: 56px !important;
  height: 56px !important;
  padding: 5px 10px !important;
}

/* Owner cockpit: operational dashboard separated from setup/administration. */
body.state-account[data-active-view="dashboard"] .view-tabs {
  display: none !important;
}

body.state-account .owner-dashboard-view.active {
  display: block;
  width: min(1660px, calc(100% - 32px));
  margin: 16px auto 54px;
}

.owner-dashboard-view {
  color: #10211d;
}

.owner-dashboard-view .dashboard-heading,
.owner-dashboard-view .dashboard-card,
.owner-dashboard-view .dashboard-kpi {
  border: 1px solid #d7dfda;
  background: rgba(255, 253, 248, .96);
  box-shadow: 0 12px 30px rgba(16, 33, 29, .09);
}

.owner-dashboard-view .dashboard-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 22px;
  border-radius: 22px;
}

.owner-dashboard-view .dashboard-heading h2 {
  margin: 2px 0;
  font-size: clamp(1.7rem, 3vw, 3rem);
  line-height: 1;
}

.owner-dashboard-view .dashboard-heading p:last-child { margin: 5px 0 0; color: #5e6e68; }
.owner-dashboard-view .dashboard-heading-actions { display: flex; align-items: center; gap: 12px; }
.owner-dashboard-view .dashboard-heading-actions time { min-width: 92px; color: #2b443c; font-size: 1.1rem; font-weight: 850; font-variant-numeric: tabular-nums; }

.owner-dashboard-view .dashboard-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin: 10px 0;
}

.owner-dashboard-view .dashboard-kpi {
  display: grid;
  min-height: 104px;
  padding: 14px 16px;
  border-radius: 17px;
  color: #10211d;
  text-align: left;
}

.owner-dashboard-view .dashboard-kpi span,
.owner-dashboard-view .dashboard-kpi small { color: #5d6c67; }
.owner-dashboard-view .dashboard-kpi span { font-size: .78rem; font-weight: 900; letter-spacing: .03em; text-transform: uppercase; }
.owner-dashboard-view .dashboard-kpi strong { align-self: center; font-size: 2rem; line-height: 1; }
.owner-dashboard-view .dashboard-kpi.attention { border-color: color-mix(in srgb, var(--theme-accent) 50%, #d7dfda); background: var(--theme-accent-soft); }

.owner-dashboard-view .dashboard-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(310px, .75fr);
  grid-template-areas:
    "room room bar"
    "kitchen kitchen service";
  gap: 10px;
}

.owner-dashboard-view .dashboard-card { padding: 17px; border-radius: 20px; }
.owner-dashboard-view .dashboard-card > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.owner-dashboard-view .dashboard-card h3 { margin: 1px 0 0; font-size: 1.35rem; }
.owner-dashboard-view .dashboard-card .text-action { color: #17463a; font-weight: 850; }
.owner-dashboard-view .dashboard-room-control { grid-area: room; }
.owner-dashboard-view .dashboard-bar-card { grid-area: bar; }
.owner-dashboard-view .dashboard-kitchen-card { grid-area: kitchen; }
.owner-dashboard-view .dashboard-service-card { grid-area: service; }
.owner-dashboard-view .dashboard-room-tabs { display: flex; gap: 7px; margin-bottom: 12px; overflow-x: auto; scrollbar-width: thin; }
.owner-dashboard-view .dashboard-room-tab { display: grid; flex: 0 0 auto; min-width: 135px; padding: 9px 12px; border: 1px solid #ccd7d1; border-radius: 12px; background: #f3f6f3; color: #18312a; text-align: left; }
.owner-dashboard-view .dashboard-room-tab span { color: #64736e; font-size: .76rem; }
.owner-dashboard-view .dashboard-room-tab.active { border-color: var(--theme-accent); background: var(--theme-accent-soft); box-shadow: inset 0 0 0 1px var(--theme-accent); }
.owner-dashboard-view .dashboard-room-overview { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: stretch; gap: 14px; }
.owner-dashboard-view .dashboard-utilization-gauge { display: grid; place-content: center; align-content: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at center, #fff 0 56%, transparent 57%), conic-gradient(var(--theme-accent) calc(var(--dashboard-value) * 1%), #e5ebe7 0); text-align: center; }
.owner-dashboard-view .dashboard-utilization-gauge strong { font-size: 1.8rem; }
.owner-dashboard-view .dashboard-utilization-gauge span { color: #60706a; font-size: .72rem; line-height: 1.25; }
.owner-dashboard-view .dashboard-mini-floor { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 8px; min-height: 154px; padding: 10px; border: 1px solid #e0e6e2; border-radius: 15px; background-color: #fbfcf9; background-image: linear-gradient(#edf0eb 1px, transparent 1px), linear-gradient(90deg, #edf0eb 1px, transparent 1px); background-size: 32px 32px; }
.owner-dashboard-view .dashboard-table-tile { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; min-height: 64px; padding: 10px 34px 10px 11px; border: 2px solid #7a978e; border-radius: 13px; background: #fff; color: #112820; text-align: left; }
.owner-dashboard-view .dashboard-table-tile > span { display: grid; }
.owner-dashboard-view .dashboard-table-tile small { color: #62716b; }
.owner-dashboard-view .dashboard-table-tile > b { font-size: .72rem; }
.owner-dashboard-view .dashboard-table-tile > i { position: absolute; top: 7px; right: 7px; display: grid; place-items: center; width: 25px; height: 25px; border-radius: 50%; background: #10211d; color: #fff; font-size: .66rem; font-style: normal; }
.owner-dashboard-view .dashboard-table-tile > time { grid-column: 1 / -1; margin-top: 3px; color: #53665f; font-size: .7rem; font-weight: 850; }
.owner-dashboard-view .dashboard-table-tile.flow-occupied { border-color: #e1786e; background: #fff0ed; }
.owner-dashboard-view .dashboard-table-tile.flow-ordered { border-color: #5d9bd7; background: #edf5ff; }
.owner-dashboard-view .dashboard-table-tile.flow-ready { border-color: #e6b13d; background: #fff6d9; }
.owner-dashboard-view .dashboard-table-tile.flow-picked_up { border-color: #8e77d4; background: #f3efff; }
.owner-dashboard-view .dashboard-table-tile.flow-delivered { border-color: #59b98c; background: #e9f8f0; }
.owner-dashboard-view .dashboard-queue { display: grid; gap: 7px; }
.owner-dashboard-view .dashboard-queue-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 10px 11px; border-left: 4px solid #ddb04c; border-radius: 11px; background: #f4f6f3; }
.owner-dashboard-view .dashboard-queue-row > div { display: grid; min-width: 0; }
.owner-dashboard-view .dashboard-queue-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-dashboard-view .dashboard-queue-row small { color: #66736e; }
.owner-dashboard-view .dashboard-queue-row > b { grid-column: 2; color: #6a5420; font-size: .72rem; text-align: right; }
.owner-dashboard-view .dashboard-queue-age { font-weight: 850; font-variant-numeric: tabular-nums; }
.owner-dashboard-view .dashboard-queue-age.warning { color: #956400; }
.owner-dashboard-view .dashboard-queue-age.critical { color: #aa2d23; }
.owner-dashboard-view .dashboard-queue-row.status-ready { border-left-color: #deb027; background: #fff7dc; }
.owner-dashboard-view .dashboard-queue-row.status-in_progress { border-left-color: var(--theme-accent); }
.owner-dashboard-view .dashboard-queue-empty { display: grid; place-items: center; min-height: 115px; color: #4d685e; text-align: center; }
.owner-dashboard-view .dashboard-queue-empty span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #e4f5eb; color: #25805b; font-size: 1.35rem; }
.owner-dashboard-view .dashboard-service-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 10px; }
.owner-dashboard-view .dashboard-service-summary > div { display: grid; padding: 9px; border-radius: 11px; background: var(--theme-accent-soft); text-align: center; }
.owner-dashboard-view .dashboard-service-summary strong { font-size: 1.35rem; }
.owner-dashboard-view .dashboard-service-summary span { color: #5f6f69; font-size: .67rem; }
.owner-dashboard-view .dashboard-staff-list { display: grid; gap: 7px; }
.owner-dashboard-view .dashboard-empty { display: grid; gap: 4px; color: #586a64; }
.owner-dashboard-view .dashboard-staff-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid #dde4df; border-radius: 11px; background: #f6f7f5; }
.owner-dashboard-view .dashboard-staff-row > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #dfe5e1; color: #2f4940; font-weight: 900; }
.owner-dashboard-view .dashboard-staff-row.working > span { background: var(--theme-accent); color: #071a15; }
.owner-dashboard-view .dashboard-staff-row > div { display: grid; min-width: 0; }
.owner-dashboard-view .dashboard-staff-row > div small,
.owner-dashboard-view .dashboard-staff-row > small { color: #66736e; font-size: .7rem; }
.owner-dashboard-view .dashboard-staff-row > small { grid-column: 3; }
.owner-dashboard-view .reservation-list { display: grid; gap: 9px; }
.owner-dashboard-view .dashboard-reservations { margin-top: 10px; }
.owner-dashboard-view .reservation-row { display: grid; grid-template-columns: 66px 1fr minmax(120px, auto); align-items: center; gap: 12px; padding: 12px; border-radius: 15px; background: #f2f5f2; }
.owner-dashboard-view .reservation-row time strong { display: block; font-size: 1.2rem; }
.owner-dashboard-view .reservation-row > div { display: grid; }
.owner-dashboard-view .reservation-row small { color: #66736e; }
.owner-dashboard-view .reservation-row select { min-height: 40px; border: 1px solid #ccd6d0; border-radius: 10px; background: #fff; color: #10211d; font-weight: 800; }
.owner-dashboard-view .reservation-form { display: grid; grid-template-columns: 1.4fr .55fr 1fr 1fr 1fr; gap: 9px; margin: 14px 0; padding: 14px; border: 1px dashed var(--theme-accent); border-radius: 16px; background: var(--theme-accent-soft); }
.owner-dashboard-view .reservation-form label { display: grid; gap: 5px; font-size: .75rem; font-weight: 850; }
.owner-dashboard-view .reservation-form input,
.owner-dashboard-view .reservation-form select { min-width: 0; min-height: 44px; padding: 0 11px; border: 1px solid #cbd5cf; border-radius: 10px; background: #fff; color: #10211d; }
.owner-dashboard-view .reservation-form .reservation-notes { grid-column: 1 / -2; }

/* Person-level discount and checkout inside the complete table invoice. */
.billing-group > header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
}

.billing-person-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.billing-person-discount {
  display: grid;
  grid-template-columns: auto 70px 92px auto;
  align-items: center;
  gap: 7px;
}

.billing-person-discount select,
.billing-person-discount input {
  min-width: 0;
  height: 42px;
  padding: 0 10px;
  border: 1px solid #c7d3cd;
  border-radius: 11px;
  background: #fff;
  color: #10211d;
  font-weight: 800;
}

.billing-person-discount .secondary-action,
.billing-person-pay { min-height: 42px; padding: 0 14px; white-space: nowrap; }

.billing-discount-line {
  display: block;
  padding: 9px;
}

.billing-discount-edit {
  display: grid;
  grid-template-columns: minmax(170px, 1fr) minmax(120px, .35fr) auto auto;
  align-items: end;
  gap: 9px;
  width: 100%;
}

.billing-discount-edit > input,
.billing-discount-edit label input {
  min-width: 0;
  width: 100%;
  height: 42px;
  padding: 0 10px;
  border: 1px solid #bdcac3;
  border-radius: 10px;
  background: #fff;
  color: #10211d;
  font: inherit;
  font-weight: 800;
}

.billing-discount-edit label {
  display: grid;
  gap: 3px;
}

.billing-discount-edit label span,
.billing-discount-edit > small {
  color: #64736e;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.billing-discount-edit > small {
  grid-column: 1 / -1;
}

.billing-discount-edit .secondary-action,
.billing-discount-edit .billing-remove {
  min-height: 42px;
  white-space: nowrap;
}

.billing-applied-discount .billing-discount-edit {
  flex: 1 1 100%;
}

@media (max-width: 1150px) {
  .owner-dashboard-view .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .owner-dashboard-view .dashboard-control-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "room room"
      "bar service"
      "kitchen kitchen";
  }
  .billing-group > header { grid-template-columns: 1fr auto; }
  .billing-person-actions { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; flex-wrap: wrap; }
}

@media (max-width: 720px) {
  body.state-account .owner-dashboard-view.active { width: min(100% - 20px, 1540px); margin-top: 10px; }
  .owner-dashboard-view .dashboard-heading { align-items: flex-start; flex-direction: column; padding: 20px; }
  .owner-dashboard-view .dashboard-heading-actions { justify-content: space-between; width: 100%; }
  .owner-dashboard-view .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-dashboard-view .dashboard-control-grid { display: grid; grid-template-columns: 1fr; grid-template-areas: "room" "bar" "kitchen" "service"; }
  .owner-dashboard-view .dashboard-room-overview { grid-template-columns: 1fr; }
  .owner-dashboard-view .dashboard-utilization-gauge { width: 132px; justify-self: center; }
  .owner-dashboard-view .dashboard-mini-floor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .owner-dashboard-view .reservation-form { grid-template-columns: 1fr 1fr; }
  .owner-dashboard-view .reservation-form label:first-child,
  .owner-dashboard-view .reservation-form .reservation-notes,
  .owner-dashboard-view .reservation-form button { grid-column: 1 / -1; }
  .owner-dashboard-view .reservation-row { grid-template-columns: 58px 1fr; }
  .owner-dashboard-view .reservation-row select { grid-column: 1 / -1; }
  .billing-person-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  .billing-person-discount { grid-template-columns: 1fr 64px 82px; }
  .billing-person-discount strong { grid-column: 1 / -1; }
  .billing-person-discount .secondary-action { grid-column: 1 / -1; }
  .billing-discount-edit { grid-template-columns: 1fr 110px; }
  .billing-discount-edit > input { grid-column: 1 / -1; }
}
.billing-external-reference{display:grid;gap:7px;margin-top:16px;padding:16px;border:1px solid #cddbd4;border-radius:12px;background:#f5f8f6}.billing-external-reference>span{font-weight:900}.billing-external-reference input{min-height:48px;padding:0 12px;border:1px solid #bfcfc7;border-radius:9px;background:#fff;color:#10211d;font:inherit}.billing-external-reference small{color:#61706a;line-height:1.45}
/* 2026-09 final simplification layer */
.auth-progress{display:flex;gap:8px;margin:0 0 8px;padding:0;list-style:none}.auth-progress li{display:flex;align-items:center;gap:7px;color:#7a8983;font-size:.76rem;font-weight:850}.auth-progress li+li::before{width:28px;height:1px;margin-right:1px;background:#d6dfda;content:""}.auth-progress span{display:grid;place-items:center;width:26px;height:26px;border:1px solid #c8d4ce;border-radius:50%;background:#fff}.auth-progress .active{color:#0b4938}.auth-progress .active span,.auth-progress .done span{border-color:var(--theme-accent);background:var(--theme-accent);color:#052018}
body.state-locked{background:#f4f2eb}body.state-locked::before{position:fixed;inset:76px 0 0 58%;z-index:-1;background:#0a3328;clip-path:polygon(30% 0,100% 0,100% 100%,0 100%);content:""}body.state-locked .topbar{box-shadow:none}body.state-locked .topbar h1,body.state-locked .header-subtitle{display:none}body.state-locked .header-actions .theme-picker-mount,body.state-locked .session{display:none}body.state-locked .app-shell{display:grid;place-items:center;min-height:calc(100vh - 76px);padding:34px 20px}body.state-locked .locked-panel{width:min(100%,540px);min-height:0;margin:0;padding:clamp(26px,4vw,42px);border:1px solid #dce4df;border-radius:18px;background:#fff;box-shadow:0 28px 75px rgba(5,31,23,.14)}body.state-locked .locked-panel h2{font-size:clamp(2rem,5vw,3.15rem);letter-spacing:-.045em}body.state-locked .locked-panel .login-card-heading .meta{font-size:1rem;line-height:1.55}body.state-locked .header-account-panel{width:100%}body.state-locked .header-login-fields{display:grid;gap:14px}body.state-locked .header-login-fields label{display:grid;gap:7px;font-size:.8rem;font-weight:850}body.state-locked .header-login-fields input{width:100%;min-height:52px;border:1px solid #cbd6d0;border-radius:10px;background:#fff;font-size:1rem}body.state-locked #accountLoginButton{width:100%;min-height:52px;margin-top:16px;border-radius:10px}body.state-locked .login-language-block{padding-top:16px;border-top:1px solid #e4e9e6}.login-footnote{color:#74817c;font-size:.8rem}
body.state-account:not(.state-staff){background:#f4f2eb}body.state-account:not(.state-staff) .app-shell{padding-top:28px}body.state-account:not(.state-staff) .login-panel{display:grid;width:min(100% - 32px,820px);max-width:820px;margin:0 auto;padding:clamp(24px,4vw,38px);gap:20px;border:1px solid #dce4df;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(5,31,23,.11)}body.state-account:not(.state-staff) .login-panel h2{font-size:clamp(2rem,4vw,3.1rem);letter-spacing:-.045em}.staff-grid{gap:10px}.staff-card{border-radius:12px!important}.staff-login-actions{display:grid!important;grid-template-columns:minmax(220px,1fr) minmax(230px,.7fr)!important;align-items:start!important;gap:18px!important}.staff-login-actions .pin-label{grid-column:1}.staff-login-actions .pin-keypad{grid-column:1}.staff-login-actions>#activateButton{grid-column:2;grid-row:1 / span 2;align-self:stretch;min-height:100%}.pin-keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.pin-keypad button{min-height:48px;border:1px solid #d3ddd7;border-radius:9px;background:#f4f7f5;color:#10211d;font:inherit;font-size:1.05rem;font-weight:900}.pin-keypad button:hover{border-color:var(--theme-accent);background:var(--theme-accent-soft)}.pin-keypad .pin-clear,.pin-keypad .pin-delete{color:#65736e;font-size:.86rem}
body.state-account:not(.state-staff) .locked-panel{width:min(100% - 32px,620px);min-height:0;margin:0 auto;padding:clamp(26px,4vw,42px);gap:20px;border:1px solid #dce4df;border-radius:18px;background:#fff;box-shadow:0 24px 70px rgba(5,31,23,.11);text-align:left}
body.state-account:not(.state-staff) #passwordChangePanel{display:grid;width:100%;max-width:none;grid-template-columns:1fr;gap:16px;padding:0;border:0;border-radius:0;background:transparent}
body.state-account:not(.state-staff) #passwordChangePanel .header-login-fields{display:grid;grid-template-columns:1fr;gap:12px}
body.state-account:not(.state-staff) #passwordChangePanel label{display:grid;gap:7px;color:#42534b;font-size:.8rem;font-weight:850}
body.state-account:not(.state-staff) #passwordChangePanel input{width:100%;min-height:52px;padding:0 14px;border:1px solid #cbd6d0;border-radius:10px;background:#fff;color:#10211d}
body.state-account:not(.state-staff) #passwordChangeButton{width:100%;min-height:52px;border-radius:10px}
body.state-account:not(.state-staff) #passwordChangeStatus{min-height:1.2em;color:#68776f;text-align:left}
body.state-account.state-staff .topbar{min-height:72px;padding:9px 20px;grid-template-columns:auto 1fr;box-shadow:none}body.state-account.state-staff .brand-logo-tint{height:52px;width:176px}body.state-account.state-staff .brand-lockup>div{display:none}body.state-account.state-staff .header-actions{justify-content:flex-end}body.state-account.state-staff .view-tabs,body.state-account.state-staff.can-manage .view-tabs,body.state-account.state-staff.can-manage:not(.single-view) .view-tabs{width:64px;padding:6px;border-radius:14px}.view-tabs .tab-button{min-height:44px;border-radius:9px;font-size:.7rem}.panel,.restaurant-admin,.staff-manager,.menu-manager,.takeaway-manager{border-radius:14px!important}.primary-action,.secondary-action,.danger-action{border-radius:9px!important}.section-heading{gap:14px}.section-heading h2{letter-spacing:-.025em}
@media(max-width:720px){body.state-locked::before{display:none}body.state-locked .app-shell{align-items:start;padding:16px 10px}body.state-locked .locked-panel{padding:24px 18px}.staff-login-actions{grid-template-columns:1fr!important}.staff-login-actions>#activateButton{grid-column:1;grid-row:auto;min-height:54px}.auth-progress li+li::before{width:14px}body.state-account.state-staff .topbar{grid-template-columns:1fr}.pin-keypad button{min-height:52px}}

/* Service flow v2: clear table/person context, direct checkout and mobile-first touch targets. */
body.state-account #serviceView.active {
  grid-template-columns: minmax(360px, .86fr) minmax(540px, 1.14fr) !important;
  gap: 16px !important;
  padding: 16px !important;
}

body.state-account #serviceView .floor-column,
body.state-account #serviceView .order-panel {
  border: 1px solid #dbe4df;
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(10, 45, 35, .09);
}

body.state-account #serviceView .order-panel {
  display: grid;
  gap: 12px;
  padding: 18px;
  background: #f7f9f6;
  color: #10211d;
  scroll-margin-top: 82px;
}

body.state-account #serviceView .order-panel > .order-panel-heading {
  position: sticky;
  z-index: 12;
  top: 6px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  margin: -6px -6px 0;
  padding: 12px;
  border: 1px solid #d6e0da;
  border-radius: 15px;
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 8px 26px rgba(8, 42, 32, .1);
  backdrop-filter: blur(12px);
}

body.state-account #serviceView #selectedTableTitle,
body.state-account #serviceView #selectedTableTitle .order-title-main,
body.state-account #serviceView #selectedTableTitle .order-title-meta,
body.state-account #serviceView #selectedTableTitle .order-title-time {
  color: #10211d;
}

body.state-account #serviceView #selectedTableTitle .order-title-meta,
body.state-account #serviceView #selectedTableTitle .order-title-time { opacity: .65; }

body.state-account .order-header-actions { justify-content: flex-end; flex-wrap: wrap; }
body.state-account .order-header-actions > button {
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid #cbd8d2;
  background: #fff;
  color: #17372e;
  font-size: .72rem;
}
body.state-account .order-header-actions .order-bill-button {
  border-color: #102d25;
  background: #102d25;
  color: #fff;
}

body.state-account .seat-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 10px;
}
body.state-account .seat-picker > * { grid-column: 1 !important; min-width: 0; }
body.state-account .seat-selection-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 10px;
  align-items: center;
  padding: 11px 13px;
  border: 1px solid color-mix(in srgb, var(--theme-accent) 45%, #c9d6d0);
  border-radius: 13px;
  background: color-mix(in srgb, var(--theme-accent) 10%, #fff);
}
body.state-account .seat-selection-banner > span {
  grid-row: 1 / 3;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--theme-accent);
  color: #06231a;
  font-size: .66rem;
  font-weight: 950;
  text-transform: uppercase;
}
body.state-account .seat-selection-banner strong { color: #10211d; font-size: 1rem; }
body.state-account .seat-selection-banner small { color: #61716b; line-height: 1.3; }
body.state-account .seat-selection-banner.needs-selection { border-color: #e0b34f; background: #fff8e3; }
body.state-account .seat-selection-banner.needs-selection > span { background: #f4c95f; }

body.state-account .seat-choice-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
body.state-account .seat-choice-grid .table-choice {
  min-height: 58px;
  border: 1px solid #cdd9d3;
  background: #fff;
  color: #10211d;
}
body.state-account .seat-choice-grid .table-choice small { color: #66756f; }
body.state-account .seat-choice-grid .table-choice.selected,
body.state-account .seat-choice-grid .table-choice.selected small { color: #fff; }
body.state-account .seat-control {
  display: grid;
  grid-template-rows: minmax(74px, auto) auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d7e0db;
  border-radius: 14px;
  background: #fff;
}
body.state-account .seat-choice:not(.table-choice) {
  min-height: 74px;
  padding: 10px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body.state-account .seat-choice-summary { display: grid; gap: 2px; text-align: center; font-size: .68rem; }
body.state-account .seat-choice-summary small { color: #536760; font-weight: 850; }
body.state-account .seat-card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border-top: 1px solid #dde5e0;
  background: #dde5e0;
}
body.state-account .seat-card-actions > button,
body.state-account .seat-control .seat-state,
body.state-account .seat-control .seat-pay {
  position: static;
  display: inline-flex;
  width: auto;
  height: auto;
  min-height: 42px;
  padding: 7px 8px;
  transform: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  border-radius: 0;
  background: #f4f7f5;
  color: #25443a;
  font-size: .7rem;
  font-weight: 900;
}
body.state-account .seat-card-actions > button:only-child { grid-column: 1 / -1; }
body.state-account .seat-control .seat-state.occupied { background: #eef6f1; color: #17603f; }
body.state-account .seat-control .seat-pay { background: #102d25; color: #fff; }

body.state-account .guest-status-panel { display: grid; gap: 9px; }
body.state-account .service-order-history {
  display: grid;
  gap: 6px;
  padding: 12px;
  border: 1px solid #d8e1dc;
  border-radius: 14px;
  background: #fff;
}
body.state-account .service-order-history-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8e4;
}
body.state-account .service-order-history-heading > div { display: grid; }
body.state-account .service-order-history-heading small { color: #697871; }
body.state-account .service-order-history-heading > span {
  display: grid;
  place-items: center;
  min-width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #e8f1ec;
  font-weight: 950;
}
body.state-account .service-order-history-line {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 7px 8px;
  border-radius: 10px;
  background: #f5f7f5;
}
body.state-account .service-order-history-line > span:nth-child(2) { display: grid; min-width: 0; }
body.state-account .service-order-history-line strong { color: #10211d; }
body.state-account .service-order-history-line small { color: #68766f; overflow-wrap: anywhere; }
body.state-account .service-order-history-status { width: 9px; height: 9px; border-radius: 50%; background: #6096d5; }
body.state-account .service-order-history-line.flow-ready .service-order-history-status { background: #d8a321; }
body.state-account .service-order-history-line.flow-picked_up .service-order-history-status { background: #8c6cd2; }
body.state-account .service-order-history-line.flow-delivered .service-order-history-status { background: #42a877; }
body.state-account .service-editable-order-actions { display: flex; gap: 5px; }
body.state-account .service-editable-order-actions button {
  min-height: 36px;
  padding: 6px 9px;
  border: 1px solid #cbd7d1;
  border-radius: 8px;
  background: #fff;
  color: #244238;
  font-weight: 850;
}
body.state-account .service-editable-order-actions button.danger { color: #8a3028; }

body.state-account .order-submit-dock {
  position: sticky;
  z-index: 10;
  top: 90px;
  margin: 0;
  padding: 8px;
  border: 1px solid rgba(45, 92, 75, .2);
  border-radius: 13px;
  background: rgba(241, 247, 243, .96);
  box-shadow: 0 8px 20px rgba(8, 42, 32, .09);
  backdrop-filter: blur(10px);
}
body.state-account .order-submit-dock #sendOrderButton { width: 100%; min-height: 48px; }

.billing-mode-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.billing-mode-strip > div { display: grid; gap: 2px; padding: 12px; border: 1px solid #d8e1dc; border-radius: 12px; background: #f7f9f7; }
.billing-mode-strip > div.active { border-color: #75b69d; background: #eaf7f0; }
.billing-mode-strip small { color: #607169; }
.billing-group > header > div { display: grid; gap: 1px; }
.billing-group > header > div small { color: #68776f; }
.billing-person-actions { padding: 11px; border-top: 1px solid #dde5e0; background: #f8faf8; }

#serviceQuickCard { z-index: 270; }
.service-quick-card {
  display: grid;
  gap: 16px;
  width: min(680px, 100%);
  max-height: calc(100dvh - 30px);
  overflow: auto;
  padding: 24px;
  border: 1px solid #d6dfda;
  border-radius: 20px;
  background: #fff;
  color: #10211d;
  box-shadow: 0 30px 100px rgba(0, 0, 0, .28);
}
.service-quick-card h3 { margin: 0; font-size: clamp(1.8rem, 5vw, 2.7rem); }
.service-quick-card ol { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 0; padding: 0; list-style: none; }
.service-quick-card li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start; padding: 11px; border-radius: 12px; background: #f3f7f4; }
.service-quick-card li > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--theme-accent); color: #06231a; font-weight: 950; }
.service-quick-card li div { display: grid; gap: 2px; }
.service-quick-card li small { color: #607169; line-height: 1.35; }
.service-quick-card-tip { display: grid; gap: 3px; padding: 12px; border-left: 4px solid var(--theme-accent); background: #eff8f3; }

@media (max-width: 1180px) {
  body.state-account #serviceView.active { grid-template-columns: 1fr !important; }
  body.state-account #serviceView .floor-column,
  body.state-account #serviceView .order-panel { grid-column: 1; }
  body.state-account #serviceView .floor-plan { min-height: 420px; }
}

@media (max-width: 760px) {
  body.state-account .app-shell,
  body.state-account.single-view .app-shell {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    padding: 10px 10px 94px !important;
  }
  body.state-account .workspace { width: 100%; min-width: 0; }
  body.state-account #serviceView.active { gap: 10px !important; padding: 10px !important; }
  body.state-account #serviceView .floor-column,
  body.state-account #serviceView .order-panel { border-radius: 15px; padding: 12px; }
  body.state-account #serviceView .floor-plan { min-height: 340px; margin-top: 14px; }
  body.state-account #serviceView .order-panel > .order-panel-heading { position: sticky; top: 4px; grid-template-columns: 1fr; }
  body.state-account .order-header-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  body.state-account .order-header-actions > button { width: 100%; min-height: 46px; }
  body.state-account .seat-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.state-account .seat-selection-banner { grid-template-columns: 1fr; }
  body.state-account .seat-selection-banner > span { grid-row: auto; justify-self: start; }
  body.state-account .service-order-history-line { grid-template-columns: 10px minmax(0, 1fr); }
  body.state-account .service-editable-order-actions { grid-column: 2; }
  body.state-account .service-editable-order-actions button { flex: 1; min-height: 42px; }
  body.state-account .order-submit-dock { top: 8px; }
  .billing-dialog { width: 100%; max-height: 100dvh; padding: 13px; border-radius: 15px 15px 0 0; }
  .billing-mode-strip { grid-template-columns: 1fr; }
  .billing-group > header { align-items: flex-start; }
  .billing-person-actions { display: grid; grid-template-columns: 1fr; }
  .billing-person-discount { grid-template-columns: 1fr 66px 88px; }
  .billing-line { grid-template-columns: minmax(0, 1fr) 104px; }
  .billing-remove { min-height: 42px; }
  .service-quick-card { width: 100%; max-height: 100dvh; padding: 17px; border-radius: 15px; }
  .service-quick-card ol { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  body.state-account .seat-choice-grid { grid-template-columns: 1fr 1fr; }
  body.state-account .seat-card-actions { grid-template-columns: 1fr; }
  body.state-account .seat-card-actions > button,
  body.state-account .seat-card-actions > button:only-child { grid-column: 1; }
  .billing-line { grid-template-columns: 1fr; }
  .billing-price-field { width: 100%; }
  .billing-line-total { text-align: right; }
  .billing-person-discount { grid-template-columns: 1fr 1fr; }
  .billing-person-discount strong,
  .billing-person-discount .secondary-action { grid-column: 1 / -1; }
}

/* Mobile service v3: a compact order-entry screen instead of a scaled desktop cockpit. */
.mobile-service-context,
.mobile-menu-toggle,
.mobile-table-picker,
.mobile-change-staff { display: none; }
.seat-selection-copy { display: grid; gap: 2px; min-width: 0; }
.seat-selection-actions { display: flex; align-items: center; gap: 6px; }
.seat-selection-actions button { min-height: 38px; padding: 7px 10px; border: 0; border-radius: 8px; font-weight: 900; }
.seat-selection-actions .seat-state { background: #eef4f0; color: #315348; }
.seat-selection-actions .seat-pay { background: #102d25; color: #fff; }

@media (max-width: 760px) {
  body.state-account.state-staff { background: #f4f6f3 !important; }
  body.state-account.state-staff .topbar {
    position: sticky;
    z-index: 240;
    top: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 42px !important;
    align-items: center;
    width: 100%;
    min-height: 50px !important;
    height: 50px;
    padding: 4px 8px !important;
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  body.state-account.state-staff .brand-lockup { display: none !important; }
  body.state-account.state-staff .brand-block { min-width: 0; }
  body.state-account.state-staff .mobile-service-context {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    color: #fff;
  }
  body.state-account.state-staff .mobile-service-context strong {
    overflow: hidden;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.state-account.state-staff .mobile-service-context span {
    overflow: hidden;
    color: rgba(255,255,255,.66);
    font-size: .75rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.state-account.state-staff .mobile-menu-toggle {
    display: grid;
    place-content: center;
    gap: 4px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 10px;
    background: rgba(255,255,255,.08);
  }
  body.state-account.state-staff .mobile-menu-toggle span { width: 19px; height: 2px; border-radius: 2px; background: #fff; }
  body.state-account.state-staff .header-actions { display: none !important; }
  body.state-account.state-staff .topbar.mobile-menu-open .header-actions {
    position: absolute;
    z-index: 250;
    top: 54px;
    right: 8px;
    left: 8px;
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 10px;
    border: 1px solid #cbd8d2;
    border-radius: 14px;
    background: #fff;
    color: #10211d;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
  }
  body.state-account.state-staff .topbar.mobile-menu-open .theme-picker-mount { display: block; width: 100%; }
  body.state-account.state-staff .topbar.mobile-menu-open .theme-picker-toggle { width: 100%; min-height: 42px; justify-content: flex-start; border-color: #cbd8d2; background: #f3f6f4; color: #17372e; }
  body.state-account.state-staff .topbar.mobile-menu-open .theme-picker-toggle-label { display: inline; }
  body.state-account.state-staff .topbar.mobile-menu-open .theme-picker-panel { right: auto; left: 0; width: 100%; }
  body.state-account.state-staff .topbar.mobile-menu-open .header-account-session,
  body.state-account.state-staff .topbar.mobile-menu-open .session {
    display: grid !important;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    width: 100%;
    min-height: 46px !important;
    height: auto !important;
    padding: 6px 8px !important;
    border: 1px solid #d4ded8;
    border-radius: 11px;
    background: #f5f7f5;
    color: #10211d;
    box-shadow: none;
  }
  body.state-account.state-staff .topbar.mobile-menu-open .session { grid-template-columns: 34px minmax(0, 1fr); }
  body.state-account.state-staff .topbar.mobile-menu-open .session-badge { width: 34px; height: 34px; }
  body.state-account.state-staff .topbar.mobile-menu-open #accountLogoutButton { min-height: 38px; padding: 6px 10px; background: #fff; color: #17372e; }
  body.state-account.state-staff .mobile-change-staff { display: block; width: 100%; min-height: 42px; border: 1px solid #cbd8d2; background: #fff; color: #17372e; }

  body.state-account.state-staff .app-shell,
  body.state-account.state-staff.single-view .app-shell { padding: 0 0 82px !important; }
  body.state-account.state-staff .workspace { width: 100%; }
  body.state-account.state-staff #serviceView.active {
    display: block !important;
    width: 100%;
    padding: 0 !important;
    background: #f4f6f3;
  }
  body.state-account.state-staff #serviceView .floor-column { display: none !important; }
  body.state-account.state-staff #serviceView .order-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    padding: 8px;
    border: 0;
    border-radius: 0;
    background: #f4f6f3 !important;
    box-shadow: none;
  }
  body.state-account.state-staff #serviceView .order-panel > .order-panel-heading {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 7px;
    order: 1;
    margin: 0;
    padding: 7px;
    border-radius: 11px;
    box-shadow: none;
  }
  body.state-account.state-staff .mobile-table-picker {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    min-width: 0;
    color: #53665f;
    font-size: .68rem;
    font-weight: 900;
    text-transform: uppercase;
  }
  body.state-account.state-staff .mobile-table-picker select {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 34px 0 10px;
    border: 1px solid #c8d5ce;
    border-radius: 9px;
    background: #fff;
    color: #10211d;
    font: inherit;
    font-size: .9rem;
    font-weight: 900;
    text-transform: none;
  }
  body.state-account.state-staff #serviceView #selectedTableTitle { display: none; }
  body.state-account.state-staff .order-header-actions { display: flex; grid-column: auto !important; grid-row: auto !important; flex-wrap: nowrap; gap: 5px; width: auto; }
  body.state-account.state-staff .order-header-actions > button { width: auto; min-height: 42px; padding: 6px 9px; font-size: .68rem; }
  body.state-account.state-staff .order-header-actions .order-help-button,
  body.state-account.state-staff .order-header-actions .order-manage-button,
  body.state-account.state-staff .order-header-actions #assignButton { display: none !important; }

  body.state-account.state-staff .seat-picker { order: 2; gap: 6px; }
  body.state-account.state-staff .seat-picker .order-step-label { display: none; }
  body.state-account.state-staff .seat-choice-grid {
    display: flex;
    order: 1;
    gap: 6px;
    width: 100%;
    overflow-x: auto;
    padding: 1px 1px 4px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  body.state-account.state-staff .seat-choice-grid .table-choice,
  body.state-account.state-staff .seat-control {
    flex: 0 0 82px;
    width: 82px;
    min-width: 82px;
    min-height: 56px;
    scroll-snap-align: start;
  }
  body.state-account.state-staff .seat-choice-grid .table-choice { grid-column: auto; padding: 5px; border-style: solid; }
  body.state-account.state-staff .seat-control { display: block; border-radius: 10px; }
  body.state-account.state-staff .seat-choice:not(.table-choice) { min-height: 56px; padding: 5px; border-radius: 9px; }
  body.state-account.state-staff .seat-compact-label { font-size: .82rem; }
  body.state-account.state-staff .seat-choice-summary { font-size: .59rem; line-height: 1.15; }
  body.state-account.state-staff .seat-choice-summary small { font-size: .58rem; }
  body.state-account.state-staff .seat-card-actions { display: none; }
  body.state-account.state-staff .seat-selection-banner {
    grid-template-columns: minmax(0, 1fr) auto;
    order: 2;
    min-height: 44px;
    padding: 7px 9px;
    border-radius: 10px;
  }
  body.state-account.state-staff .seat-selection-banner > span,
  body.state-account.state-staff .seat-selection-banner small { display: none; }
  body.state-account.state-staff .seat-selection-banner strong {
    display: block;
    overflow: hidden;
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  body.state-account.state-staff .seat-selection-actions { gap: 4px; }
  body.state-account.state-staff .seat-selection-actions button { min-height: 34px; padding: 5px 8px; font-size: .65rem; }

  body.state-account.state-staff #tableGuestStatus { order: 3; }
  body.state-account.state-staff .guest-status-panel {
    gap: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  body.state-account.state-staff .service-order-history { padding: 8px; border-radius: 10px; }
  body.state-account.state-staff .service-order-history-heading { padding-bottom: 5px; }
  body.state-account.state-staff .service-order-history-line { min-height: 40px; padding: 5px 6px; }
  body.state-account.state-staff .service-order-history-line small { font-size: .68rem; }

  body.state-account.state-staff #productGrid { order: 4; gap: 6px; margin: 0; }
  body.state-account.state-staff #productGrid .service-product-tools {
    position: static !important;
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr) !important;
    gap: 6px;
    padding: 7px;
    border: 1px solid #d7e1dc;
    border-radius: 10px;
    background: #fff;
    color: #10211d;
  }
  body.state-account.state-staff #productGrid .service-product-tools label { color: #4e635b; }
  body.state-account.state-staff #productGrid .service-product-tools input,
  body.state-account.state-staff #productGrid .service-product-tools select { min-height: 40px; }
  body.state-account.state-staff #productGrid .service-product-note-slot { grid-column: 1 / -1; }
  body.state-account.state-staff #productGrid .service-product-note-slot .note-label { grid-template-columns: 1fr; gap: 3px; }
  body.state-account.state-staff #productGrid > .service-product-row,
  body.state-account.state-staff #productGrid > .service-product-row:not(:has(.service-product-modifier-dot)) {
    min-height: 48px;
    padding: 5px 7px;
    border-radius: 9px;
  }
  body.state-account.state-staff #productGrid > .service-product-row { grid-template-columns: 28px minmax(0, 1fr) 62px 36px !important; }
  body.state-account.state-staff #productGrid > .service-product-row:not(:has(.service-product-modifier-dot)) { grid-template-columns: 28px minmax(0, 1fr) 62px 36px !important; }
  body.state-account.state-staff .cart { order: 5; }
  body.state-account.state-staff .order-submit-dock {
    position: static;
    order: 6;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
  }
  body.state-account.state-staff .order-submit-dock:has(#sendOrderButton:disabled) { display: none; }
  body.state-account.state-staff .order-submit-dock #sendOrderButton { min-height: 46px; }
  body.state-account.state-staff .order-panel > .note-label { display: none !important; }
}

/* Keep the v4 mobile composition above the legacy v3 compatibility rules. */
@media (max-width: 760px) {
  html,
  body.state-account.state-staff { width:100%; max-width:100vw; overflow-x:hidden; }
  body.state-account.state-staff .app-shell,
  body.state-account.state-staff .workspace,
  body.state-account.state-staff #serviceView.active,
  body.state-account.state-staff #serviceView .order-panel,
  body.state-account.state-staff #productGrid { width:100%; max-width:100vw; min-width:0; overflow-x:hidden; }
  body.state-account.state-staff .topbar { height:54px !important; grid-template-columns:minmax(0,1fr) 44px !important; gap:5px; padding:5px 6px !important; }
  body.state-account.state-staff .brand-block { display:none !important; }
  body.state-account.state-staff .mobile-service-controls { display:flex !important; }
  body.state-account.state-staff .mobile-table-picker { display:block !important; flex:0 0 104px; height:42px; }
  body.state-account.state-staff .mobile-table-picker select { height:42px; padding:0 25px 0 9px; border:2px solid #edb934; border-radius:10px; background-color:#f8cf5d; font-size:.78rem; }
  body.state-account.state-staff .mobile-menu-toggle { display:grid !important; position:relative; z-index:2; }
  body.state-account.state-staff .mobile-menu-toggle span { width:auto; height:auto; background:transparent; font-size:.78rem; line-height:1; }
  body.state-account.state-staff #serviceView .order-panel { padding:6px 7px 76px; gap:5px; }
  body.state-account.state-staff #serviceView .order-panel > .order-panel-heading,
  body.state-account.state-staff .seat-picker,
  body.state-account.state-staff .order-submit-dock { display:none !important; }
  body.state-account.state-staff #productGrid { order:1; gap:5px; }
  body.state-account.state-staff #productGrid > .order-step-label { display:none !important; }
  body.state-account.state-staff #productGrid .service-product-tools { position:sticky !important; top:58px; grid-template-columns:82px minmax(0,1fr) 42px !important; gap:5px; padding:5px; }
  body.state-account.state-staff #productGrid .service-product-tools label > span { display:none; }
  body.state-account.state-staff #productGrid > .service-product-row,
  body.state-account.state-staff #productGrid > .service-product-row:not(:has(.service-product-modifier-dot)) { width:100%; overflow:hidden; grid-template-columns:26px minmax(0,1fr) 50px 32px 36px !important; gap:3px; }
  body.state-account.state-staff .service-product-number { grid-column:1; }
  body.state-account.state-staff .service-product-customize { grid-column:2; }
  body.state-account.state-staff .product-card-meta { grid-column:3; }
  body.state-account.state-staff .service-product-expand,
  body.state-account.state-staff .service-product-expand-spacer { grid-column:4; width:32px; }
  body.state-account.state-staff .service-product-add { grid-column:5; width:36px; }
  body.state-account.state-staff #tableGuestStatus { order:2; }
  body.state-account.state-staff .cart { order:3; }
}

.table-orders-dialog {
  width:min(680px, calc(100vw - 24px));
  max-height:calc(100dvh - 24px);
  overflow:auto;
  padding:16px;
  border-radius:18px;
  background:#fff;
  color:#10211d;
  box-shadow:0 24px 70px rgba(0,0,0,.3);
}
.table-orders-groups { display:grid; gap:10px; }
.table-orders-groups > section { overflow:hidden; border:1px solid #d7e1dc; border-radius:12px; }
.table-orders-groups header { display:flex; justify-content:space-between; padding:9px 11px; background:#edf4f0; }
.table-orders-groups header span { display:grid; place-items:center; min-width:26px; height:26px; border-radius:50%; background:#173d32; color:#fff; font-weight:900; }
.table-orders-groups section > div { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:7px; align-items:center; padding:8px 11px; border-top:1px solid #e4ebe7; }
.table-orders-groups section > div small { color:#687770; }
.pending-billing-copy { margin:6px 0 14px; color:#52635d; line-height:1.45; }
.pending-billing-confirm { width:100%; min-height:48px; }
.billing-checkout-bar.split-hint { grid-template-columns:1fr; }
.billing-checkout-bar.split-hint p { margin:0; color:#576861; }
.service-show-all-products { width:100%; min-height:42px; border:1px solid #cbd8d2; border-radius:10px; background:#fff; color:#174235; font-weight:900; }
.service-product-variants { display:flex; flex-wrap:wrap; gap:4px; grid-column:3 / -1; }
.service-product-variants button { min-height:28px; padding:3px 7px; border:1px solid #bdcec6; border-radius:7px; background:#fff; color:#1c4237; font-weight:850; }
.service-product-variants button.active { border-color:#079875; background:#d5f5ea; box-shadow:inset 0 0 0 1px #079875; }
.mobile-cart-preview { display:none; }

@media (max-width:760px) {
  body.state-account.state-staff .mobile-table-picker select { padding-top:0; }
  body.state-account.state-staff .service-product-kind { grid-template-columns:1fr 1fr; gap:4px; }
  body.state-account.state-staff .service-product-kind button {
    height:42px;
    border-width:2px;
    background:#e9efec;
    opacity:.58;
  }
  body.state-account.state-staff .service-product-kind button.active {
    border-color:#087c61;
    background:#c9f2e5;
    color:#063f32;
    opacity:1;
    box-shadow:inset 0 0 0 1px #087c61, 0 2px 8px rgba(0,70,53,.12);
  }
  body.state-account.state-staff .service-product-row:has(.service-product-variants) { grid-template-rows:auto auto; }
  body.state-account.state-staff .service-product-variants { grid-column:2 / 6; grid-row:2; padding:3px 0 2px; }
  body.state-account.state-staff .service-product-variants button { min-height:30px; }
  body.state-account.state-staff .service-show-all-products { margin-top:2px; }
  body.state-account.state-staff .mobile-cart-drawer { max-height:calc(100dvh - 66px); }
  body.state-account.state-staff .mobile-cart-summary {
    min-height:48px;
    background:color-mix(in srgb, var(--guest) 36%, white);
  }
  body.state-account.state-staff .mobile-cart-summary strong,
  body.state-account.state-staff .mobile-cart-summary b { color:#10211d !important; font-size:.88rem; opacity:1; }
  body.state-account.state-staff .mobile-cart-preview {
    display:grid;
    max-height:calc(100dvh - 130px);
    overflow-y:auto;
    padding:5px;
    gap:4px;
    border-top:1px solid color-mix(in srgb, var(--guest) 55%, #d7e1dc);
    background:#fff;
  }
  body.state-account.state-staff .mobile-cart-line {
    display:grid;
    grid-template-columns:28px minmax(0,1fr) auto 32px 32px;
    align-items:center;
    gap:4px;
    min-height:40px;
    padding:4px 5px;
    border:1px solid #dbe4df;
    border-left:4px solid var(--guest);
    border-radius:9px;
    background:#fafcfb;
  }
  body.state-account.state-staff .mobile-cart-line > strong { overflow:hidden; color:#10211d; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
  body.state-account.state-staff .mobile-cart-line > b { color:#173d32; font-size:.74rem; white-space:nowrap; }
  body.state-account.state-staff .mobile-cart-quantity { display:grid; place-items:center; height:28px; border-radius:7px; background:color-mix(in srgb, var(--guest) 42%, white); font-size:.72rem; font-weight:950; }
  body.state-account.state-staff .mobile-cart-line-toggle,
  body.state-account.state-staff .mobile-cart-line-remove { display:grid; place-items:center; width:30px; height:30px; padding:0; border-radius:8px; font-size:1.05rem; font-weight:950; }
  body.state-account.state-staff .mobile-cart-line-toggle { border:1px solid #c8d5cf; background:#fff; color:#173d32; }
  body.state-account.state-staff .mobile-cart-line.expanded .mobile-cart-line-toggle { transform:rotate(180deg); border-color:#12a57e; background:#d9f6ec; }
  body.state-account.state-staff .mobile-cart-line-remove { border:1px solid #efbbb4; background:#fff0ee; color:#b52d20; }
  body.state-account.state-staff .mobile-cart-line-details { grid-column:1 / -1; display:grid; gap:7px; padding:8px 3px 3px; border-top:1px solid #dce5e0; }
  body.state-account.state-staff .mobile-cart-adjustment-group { display:grid; gap:4px; }
  body.state-account.state-staff .mobile-cart-adjustment-group > span { color:#53645d; font-size:.64rem; font-weight:900; text-transform:uppercase; }
  body.state-account.state-staff .mobile-cart-adjustment-group > div { display:flex; flex-wrap:wrap; gap:4px; }
  body.state-account.state-staff .mobile-cart-note { display:grid; gap:3px; color:#53645d; font-size:.68rem; font-weight:900; }
  body.state-account.state-staff .mobile-cart-note small { font-weight:600; }
  body.state-account.state-staff .mobile-cart-note input { min-height:38px; padding:6px 9px; border:1px solid #cbd8d2; border-radius:8px; background:#fff; }
  body.state-account.state-staff .mobile-cart-more { min-height:36px; border:0; border-radius:8px; background:#edf3f0; color:#173d32; font-weight:900; }
  body.state-account.state-staff .mobile-cart-content { display:none !important; }
}

/* Service ordering v5: compact controls, complete inline customization and course timing. */
.service-product-expand,
.mobile-cart-line-toggle {
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  min-height:40px;
  padding:0;
  border:2px solid #7fcfb8;
  border-radius:10px;
  background:#eefaf6;
  color:#075f49;
  font-size:0;
  font-weight:950;
  line-height:1;
  transform:none !important;
}
.service-product-expand::before,
.mobile-cart-line-toggle::before { content:"▾"; font-size:1.2rem; line-height:1; }
.service-product-expand.expanded::before,
.mobile-cart-line.expanded .mobile-cart-line-toggle::before { content:"▴"; }
.service-product-expand.expanded,
.mobile-cart-line.expanded .mobile-cart-line-toggle { border-color:#079875; background:#d5f5ea; }
.service-product-add { width:40px !important; height:40px !important; min-height:40px !important; border-radius:10px !important; }
.service-quick-course-note { display:grid; grid-template-columns:minmax(160px,.45fr) minmax(240px,1fr); gap:8px; }
.service-quick-course-note label,
.product-course-field,
.cart-line-course,
.mobile-cart-course { display:grid; gap:4px; color:inherit; font-size:.72rem; font-weight:900; }
.service-quick-course-note label > span,
.product-course-field > span,
.cart-line-course > span,
.mobile-cart-course > span { font-size:.64rem; font-weight:950; text-transform:uppercase; }
.service-quick-course-note select,
.service-quick-course-note input,
.product-course-field select,
.cart-line-course select,
.mobile-cart-course select { width:100%; min-height:40px; padding:6px 10px; border:1px solid #bfcfc7; border-radius:9px; background:#fff; color:#10211d; font:inherit; }
.product-course-field small { color:#687770; font-weight:650; line-height:1.35; }
.cart-course-badge,
.production-course { display:inline-flex; align-items:center; width:max-content; margin-top:3px; padding:2px 7px; border-radius:999px; background:#e4ece8; color:#264b40; font-size:.62rem; font-weight:950; line-height:1.3; }
.course-starter { background:#fff0ca; color:#715000; }
.course-main,
.course-with_main { background:#d7f3e9; color:#075a44; }
.course-dessert { background:#f4ddf1; color:#6d2a63; }
.production-dish { display:grid; align-content:center; gap:2px; }
.production-course { margin:0; }
.table-orders-groups section > div > strong { display:grid; gap:2px; }
.table-orders-groups section > div > strong small { color:#547067; font-size:.66rem; }

/* The desktop order column uses the same concise interaction language as mobile. */
@media (min-width:761px) {
  body.state-account #productGrid > .service-product-row,
  body.state-account #productGrid > .service-product-row:not(:has(.service-product-modifier-dot)) {
    grid-template-columns:72px 42px minmax(150px,1fr) 82px 40px 40px !important;
    gap:7px;
    min-height:54px;
  }
  body.state-account .service-product-category-name { overflow:hidden; color:#668078; font-size:.68rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
  body.state-account .service-product-expand,
  body.state-account .service-product-add { width:40px !important; height:40px !important; }
  body.state-account #productGrid > .service-quick-modifiers { padding:12px; border-radius:12px; background:#f7fbf9; color:#10211d; }
  body.state-account .service-quick-modifier-group > span { color:#536a62; }
  body.state-account .cart-line { border-radius:12px; }
  body.state-account .cart-line-course { min-width:160px; }
}

/* Compact employee menu v20: tables stay above seats; personal controls live in the menu. */
.employee-menu-summary,
.employee-menu-tables,
.service-notification-setting,
.service-connection-setting,
.employee-menu-logout { display:none; }

html body.state-account.state-staff[data-active-view="service"] .mobile-table-picker.service-table-select-fallback {
  display:none !important;
}

html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .header-actions {
  position:fixed !important;
  top:100px !important;
  right:6px !important;
  left:auto !important;
  width:min(330px,calc(100vw - 12px)) !important;
  min-width:0 !important;
  max-width:calc(100vw - 12px) !important;
  max-height:calc(100dvh - 106px);
  box-sizing:border-box;
  gap:6px !important;
  padding:8px !important;
  border-radius:14px !important;
  overflow-x:hidden;
  overflow-y:auto;
}

html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .header-account-session,
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .session {
  display:none !important;
}

html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .employee-menu-summary {
  display:grid;
  grid-template-columns:38px minmax(0,1fr);
  align-items:center;
  gap:9px;
  min-height:48px;
  padding:5px 7px;
  border-radius:10px;
  background:#edf4f0;
}
.employee-menu-summary > span:last-child,
.service-notification-setting > span:nth-child(2),
.service-connection-setting > span:last-child { display:grid; min-width:0; text-align:left; }
.employee-menu-summary strong,
.employee-menu-summary small,
.service-notification-setting strong,
.service-notification-setting small,
.service-connection-setting strong,
.service-connection-setting small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.employee-menu-summary small,
.service-notification-setting small,
.service-connection-setting small { color:#65766f; font-size:.67rem; font-weight:700; }
.employee-menu-avatar { display:grid; place-items:center; width:38px; height:38px; overflow:hidden; border-radius:50%; background:#f3c84f; color:#183029; font-size:.75rem; font-weight:950; }
.employee-menu-avatar img { width:100%; height:100%; object-fit:cover; }

html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .employee-menu-tables {
  display:grid;
  gap:4px;
  padding:5px 7px 7px;
  border:1px solid #d7e1dc;
  border-radius:10px;
}
.employee-menu-label { color:#5f7169; font-size:.62rem; font-weight:900; letter-spacing:.06em; text-transform:uppercase; }
.employee-menu-tables > div { display:flex; align-items:center; gap:5px; min-width:0; overflow-x:auto; scrollbar-width:none; }
.employee-menu-tables > div::-webkit-scrollbar { display:none; }
.employee-menu-tables button { flex:0 0 auto; min-width:42px; min-height:34px; padding:4px 8px; border:1px solid #bfcfc7; border-radius:8px; background:#fff; color:#17372e; font-size:.72rem; font-weight:950; }
.employee-menu-tables button.active { border-color:#dba41b; background:#f5cf58; box-shadow:inset 0 -2px 0 #d69a10; }
.employee-menu-tables small { padding:5px 0; color:#718079; font-size:.7rem; }

html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .service-notification-setting,
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .service-connection-setting {
  display:grid;
  grid-template-columns:32px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:5px 7px;
  border:1px solid #d7e1dc;
  border-radius:10px;
  background:#fff;
  color:#17372e;
  box-sizing:border-box;
  min-width:0;
  width:100%;
}
.service-notification-setting .setting-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:8px; background:#edf5f1; font-size:.95rem; }
.service-notification-setting > i { position:relative; width:34px; height:20px; border-radius:999px; background:#c8d2cd; }
.service-notification-setting > i::after { position:absolute; top:3px; left:3px; width:14px; height:14px; border-radius:50%; background:#fff; content:""; box-shadow:0 1px 3px rgba(0,0,0,.24); transition:transform .15s ease; }
.service-notification-setting.active > i { background:#1fc79a; }
.service-notification-setting.active > i::after { transform:translateX(14px); }
.service-connection-setting > i { display:block; width:10px; height:10px; margin-left:11px; border-radius:50%; background:#34cda1; box-shadow:0 0 0 3px rgba(52,205,161,.16); }
.service-connection-setting.offline > i { background:#ef6259; box-shadow:0 0 0 3px rgba(239,98,89,.16); }

html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .mobile-table-management,
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .mobile-change-staff,
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .employee-menu-logout,
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .theme-picker-mount { display:block !important; width:100%; }
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .mobile-table-management,
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .mobile-change-staff,
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .employee-menu-logout,
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .theme-picker-toggle { min-height:40px !important; border-radius:9px !important; }
html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .employee-menu-logout { border-color:#edd2ce; background:#fff6f4; color:#8b3029; }

@media (min-width:761px) {
  html body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .header-actions {
    top:104px !important;
  }
}

@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] .view-tabs { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"] .workspace { grid-template-columns:1fr !important; gap:0 !important; padding-top:0 !important; margin-top:0 !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView.active { margin:0 !important; }
  body.state-account.state-staff #serviceView .order-panel { padding-top:5px !important; }
  body.state-account.state-staff #productGrid > .service-product-row,
  body.state-account.state-staff #productGrid > .service-product-row:not(:has(.service-product-modifier-dot)) { grid-template-columns:26px minmax(0,1fr) 62px 40px 40px !important; }
  body.state-account.state-staff .service-product-expand,
  body.state-account.state-staff .service-product-expand-spacer { grid-column:4; width:40px !important; height:40px !important; }
  body.state-account.state-staff .service-product-add { grid-column:5; width:40px !important; height:40px !important; }
  body.state-account.state-staff .service-quick-modifiers { padding:9px !important; background:#f7fbf9 !important; color:#10211d !important; }
  body.state-account.state-staff .service-quick-course-note { grid-template-columns:1fr; gap:7px; margin-top:7px; }
  body.state-account.state-staff .mobile-cart-line { grid-template-columns:28px minmax(0,1fr) auto 40px 32px; }
  body.state-account.state-staff .mobile-cart-line > strong { display:grid; gap:1px; }
  body.state-account.state-staff .mobile-cart-line-toggle { width:40px; height:40px; }
  body.state-account.state-staff .mobile-cart-course { grid-template-columns:70px minmax(0,1fr); align-items:center; }
}

/* Service workspace v6: selected-seat tab and one coherent desktop workspace. */
@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] .topbar { overflow:visible; }
  body.state-account.state-staff[data-active-view="service"] .mobile-service-controls { height:50px; }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip {
    align-items:flex-end;
    height:50px;
    padding:6px 2px 1px;
    overflow-y:visible;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-button {
    position:relative;
    flex-basis:40px;
    width:40px;
    height:40px;
    transition:transform .14s ease,height .14s ease,box-shadow .14s ease;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-button.selected {
    z-index:3;
    height:46px;
    transform:translateY(-5px);
    border:3px solid #fff;
    outline:2px solid #173d32;
    box-shadow:0 5px 0 rgba(6,26,20,.32),0 8px 15px rgba(6,26,20,.22);
  }
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"] .workspace,
  body.state-account.state-staff[data-active-view="service"] #serviceView.active,
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel,
  body.state-account.state-staff[data-active-view="service"] #productGrid {
    margin-top:0 !important;
    padding-top:0 !important;
  }
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel { gap:4px !important; }
  body.state-account.state-staff[data-active-view="service"] #productGrid .service-product-tools { margin-top:0 !important; }
}

@media (min-width:1000px) {
  body.state-account.state-staff[data-active-view="service"] { overflow:hidden; }
  body.state-account.state-staff[data-active-view="service"] .topbar {
    min-height:70px !important;
    height:70px;
    padding:7px 18px !important;
  }
  body.state-account.state-staff[data-active-view="service"] .brand-logo-tint { width:190px; height:52px; }
  body.state-account.state-staff[data-active-view="service"] .header-account-session,
  body.state-account.state-staff[data-active-view="service"] .session { min-height:50px !important; height:50px !important; }
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"].single-view .app-shell {
    display:block;
    height:calc(100dvh - 70px);
    padding:10px 12px 12px !important;
  }
  body.state-account.state-staff[data-active-view="service"] .workspace { height:100%; }
  body.state-account.state-staff[data-active-view="service"] #serviceView.active {
    display:grid !important;
    grid-template-columns:minmax(330px,.78fr) minmax(560px,1.22fr) !important;
    align-items:stretch !important;
    gap:12px !important;
    height:100%;
    padding:0 !important;
  }
  body.state-account.state-staff[data-active-view="service"] #serviceView .floor-column,
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel {
    min-height:0;
    max-height:none !important;
    height:100%;
    padding:12px !important;
    border:1px solid #d4dfd9;
    border-radius:16px;
    background:#f4f7f5 !important;
    color:#10211d !important;
    box-shadow:0 12px 35px rgba(6,35,26,.12);
  }
  body.state-account.state-staff[data-active-view="service"] #serviceView .floor-column { overflow:auto; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel {
    position:relative !important;
    display:flex;
    flex-direction:column;
    gap:8px;
    overflow-y:auto !important;
  }
  body.state-account.state-staff[data-active-view="service"] #serviceView .floor-heading { margin-bottom:8px; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .floor-heading h2 { font-size:1.35rem; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .floor-column > .room-tabs { gap:6px; margin-bottom:8px; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .room-tab { min-height:38px; padding:0 13px; border-radius:9px; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .floor-status-legend { margin-bottom:8px; padding:7px 9px; font-size:.68rem; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .floor-plan { min-height:500px !important; height:calc(100% - 125px); margin-top:0; border-radius:13px; }
  body.state-account.state-staff[data-active-view="service"] .order-panel > .order-panel-heading {
    position:static !important;
    display:flex;
    align-items:center;
    min-height:58px;
    margin:0;
    padding:8px 10px;
    border:1px solid #d7e2dc;
    border-radius:11px;
    background:#fff !important;
    color:#10211d;
    box-shadow:none;
  }
  body.state-account.state-staff[data-active-view="service"] .order-panel-heading h2 { font-size:1.55rem; }
  body.state-account.state-staff[data-active-view="service"] .order-header-actions { display:flex; gap:5px; width:auto; }
  body.state-account.state-staff[data-active-view="service"] .order-header-actions .order-help-button { display:none; }
  body.state-account.state-staff[data-active-view="service"] .order-header-actions button { min-height:36px; padding:0 10px; font-size:.7rem; }
  body.state-account.state-staff[data-active-view="service"] .seat-picker { display:block !important; margin:0; }
  body.state-account.state-staff[data-active-view="service"] .seat-picker .order-step-label { display:none; }
  body.state-account.state-staff[data-active-view="service"] .seat-choice-grid {
    display:flex;
    gap:6px;
    overflow-x:auto;
    padding:2px 1px 4px;
  }
  body.state-account.state-staff[data-active-view="service"] .seat-control,
  body.state-account.state-staff[data-active-view="service"] .seat-choice-grid .table-choice {
    flex:0 0 108px;
    width:108px;
    min-width:108px;
  }
  body.state-account.state-staff[data-active-view="service"] .seat-choice:not(.table-choice) { min-height:62px; padding:6px; }
  body.state-account.state-staff[data-active-view="service"] .seat-selection-banner { min-height:42px; padding:6px 9px; }
  body.state-account.state-staff[data-active-view="service"] .seat-selection-banner > span,
  body.state-account.state-staff[data-active-view="service"] .seat-selection-banner small { display:none; }
  body.state-account.state-staff[data-active-view="service"] #tableGuestStatus { margin:0; }
  body.state-account.state-staff[data-active-view="service"] .guest-status-panel { padding:0; border:0; background:transparent; }
  body.state-account.state-staff[data-active-view="service"] #productGrid { order:4; gap:6px; margin:0; }
  body.state-account.state-staff[data-active-view="service"] #productGrid > .order-step-label { display:none; }
  body.state-account.state-staff[data-active-view="service"] #productGrid .service-product-tools {
    position:sticky !important;
    z-index:5;
    top:-12px;
    grid-template-columns:96px minmax(0,1fr) 44px !important;
    align-items:center;
    gap:6px;
    padding:7px;
    border:1px solid #d5e0da;
    border-radius:11px;
    background:#fff !important;
    color:#10211d;
  }
  body.state-account.state-staff[data-active-view="service"] .service-product-kind { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
  body.state-account.state-staff[data-active-view="service"] .service-product-kind button { min-height:40px; padding:0; border:1px solid #cbd8d2; border-radius:8px; background:#eef3f0; font-size:1rem; }
  body.state-account.state-staff[data-active-view="service"] .service-product-kind button span,
  body.state-account.state-staff[data-active-view="service"] .service-product-tools label > span { display:none; }
  body.state-account.state-staff[data-active-view="service"] .service-product-kind button.active { border:2px solid #087c61; background:#cef2e6; }
  body.state-account.state-staff[data-active-view="service"] .service-product-search input { min-height:40px; }
  body.state-account.state-staff[data-active-view="service"] .service-product-send { display:grid; width:44px; height:40px; padding:0; place-items:center; border:0; border-radius:9px; background:var(--theme-accent); font-size:1.2rem; }
  body.state-account.state-staff[data-active-view="service"] .service-product-send span { display:none; }
  body.state-account.state-staff[data-active-view="service"] #productGrid > .service-product-row,
  body.state-account.state-staff[data-active-view="service"] #productGrid > .service-product-row:not(:has(.service-product-modifier-dot)) {
    grid-template-columns:58px 34px minmax(150px,1fr) 76px 40px 40px !important;
    min-height:50px;
    padding:5px 7px;
    border:1px solid #dce5e0;
    border-radius:10px;
    background:#fff;
    color:#10211d;
  }
  body.state-account.state-staff[data-active-view="service"] #productGrid > .service-quick-modifiers { background:#fff !important; }
  body.state-account.state-staff[data-active-view="service"] .order-panel > .note-label { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] .order-submit-dock { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] .cart { margin:0; }
}

/* Service workspace v7: one compact ordering surface on phone and desktop. */
#serviceActionMenu,
#tableOrdersDialog { z-index:420; padding:8px; }
#serviceActionMenu .service-action-menu,
#tableOrdersDialog .table-orders-dialog {
  display:flex;
  flex-direction:column;
  width:min(520px, 100%);
  max-height:min(82dvh, 720px);
  overflow:hidden;
  padding:12px;
}
#serviceActionMenu .service-action-title,
#tableOrdersDialog .service-action-title { flex:0 0 auto; margin-bottom:8px; }
#serviceActionMenu .service-action-list,
#tableOrdersDialog .table-orders-groups {
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
}
#serviceActionMenu .service-action-list > button { min-height:54px; }
.table-orders-footer {
  display:grid;
  flex:0 0 auto;
  gap:7px;
  padding-top:9px;
  border-top:1px solid #dce5e0;
  background:#fff;
}
.table-orders-total,
.table-orders-split,
.table-orders-split label,
.table-orders-split > div { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.table-orders-total { font-size:1rem; }
.table-orders-total strong { font-size:1.25rem; }
.table-orders-split { padding:7px 9px; border:1px solid #d7e1dc; border-radius:10px; background:#f5f8f6; }
.table-orders-split label > span,
.table-orders-split > div > span { color:#52635d; font-size:.72rem; font-weight:850; }
.table-orders-split input { width:54px; min-height:34px; padding:4px 6px; border:1px solid #bdcbc5; border-radius:8px; background:#fff; text-align:center; font-weight:900; }
.table-orders-payment-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; }
.table-orders-payment-actions button { min-height:44px; padding:7px 9px; }
#serviceActionMenu ~ .mobile-cart-drawer,
#tableOrdersDialog ~ .mobile-cart-drawer,
body:has(#serviceActionMenu) .mobile-cart-drawer,
body:has(#tableOrdersDialog) .mobile-cart-drawer,
body:has(#pendingBillingConfirmation) .mobile-cart-drawer { display:none !important; }

@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] { overflow:hidden !important; }
  body.state-account.state-staff[data-active-view="service"] .topbar {
    position:fixed !important;
    inset:0 0 auto 0;
    z-index:240;
    height:54px !important;
  }
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"].single-view .app-shell {
    position:fixed !important;
    inset:54px 0 0 !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    padding:0 0 78px !important;
  }
  body.state-account.state-staff[data-active-view="service"] .workspace { min-height:0 !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel { padding:3px 7px 76px !important; }
  body.state-account.state-staff[data-active-view="service"] .mobile-service-controls,
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip { height:46px !important; }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip { align-items:center; padding:2px 1px !important; }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-button {
    flex-basis:40px;
    width:40px;
    height:40px;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-button.selected {
    height:42px;
    transform:translateY(-2px);
    border:2px solid #fff;
    outline:2px solid #173d32;
    box-shadow:0 3px 0 rgba(6,26,20,.25),0 5px 10px rgba(6,26,20,.14);
  }
  #serviceActionMenu,
  #tableOrdersDialog { align-items:flex-end; }
  #serviceActionMenu .service-action-menu,
  #tableOrdersDialog .table-orders-dialog {
    width:100%;
    max-height:76dvh;
    border-radius:16px 16px 0 0;
  }
  #serviceActionMenu .service-action-list { padding-right:2px; }
  .table-orders-payment-actions { grid-template-columns:1fr; }
}

@media (min-width:761px) {
  body.state-account.state-staff[data-active-view="service"] { overflow:hidden; }
  body.state-account.state-staff[data-active-view="service"] .topbar {
    position:relative;
    grid-template-columns:minmax(0,1fr) 44px !important;
    min-height:62px !important;
    height:62px !important;
    padding:6px 14px !important;
  }
  body.state-account.state-staff[data-active-view="service"] .brand-block { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] .mobile-menu-toggle {
    display:grid !important;
    place-items:center;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:10px;
    background:#123a30;
    color:#fff;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-menu-toggle span { width:auto; height:auto; background:transparent; color:inherit; font-size:.78rem; font-weight:950; }
  body.state-account.state-staff[data-active-view="service"] .header-actions { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .header-actions {
    position:absolute;
    z-index:450;
    top:58px;
    right:10px;
    display:grid !important;
    width:min(360px,calc(100vw - 20px));
    gap:8px;
    padding:10px;
    border:1px solid #cbd8d2;
    border-radius:14px;
    background:#fff;
    color:#10211d;
    box-shadow:0 18px 50px rgba(0,0,0,.28);
  }
  body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .theme-picker-mount,
  body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .mobile-change-staff { display:block; width:100%; }
  body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .header-account-session,
  body.state-account.state-staff[data-active-view="service"] .topbar.mobile-menu-open .session { display:grid !important; width:100%; min-height:46px !important; height:auto !important; color:#10211d; }
  body.state-account.state-staff[data-active-view="service"] .mobile-service-controls {
    display:flex !important;
    align-items:center;
    gap:7px;
    min-width:0;
    height:50px;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-table-picker { display:block; flex:0 0 150px; }
  body.state-account.state-staff[data-active-view="service"] .mobile-table-picker select {
    width:100%;
    height:44px;
    padding:0 32px 0 12px;
    border:2px solid #edb934;
    border-radius:10px;
    background:#f8cf5d;
    color:#17231f;
    font-weight:950;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip { display:flex; gap:6px; min-width:0; overflow-x:auto; scrollbar-width:none; }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip::-webkit-scrollbar { display:none; }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-button {
    --guest:#7d8984;
    flex:0 0 44px;
    width:44px;
    height:44px;
    padding:0;
    border:2px solid transparent;
    border-radius:10px;
    background:#d8ddda;
    color:#24342e;
    font-weight:950;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-button.occupied { background:var(--guest); }
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-button.selected { border-color:#fff; outline:2px solid #173d32; transform:translateY(-2px); box-shadow:0 3px 0 rgba(6,26,20,.28); }
  body.state-account.state-staff[data-active-view="service"] .guest-color-0 { --guest:#66b9ee; }
  body.state-account.state-staff[data-active-view="service"] .guest-color-1 { --guest:#ef8b45; }
  body.state-account.state-staff[data-active-view="service"] .guest-color-2 { --guest:#f2c44d; }
  body.state-account.state-staff[data-active-view="service"] .guest-color-3 { --guest:#bd9e7b; }
  body.state-account.state-staff[data-active-view="service"] .guest-color-4 { --guest:#8dcf9c; }
  body.state-account.state-staff[data-active-view="service"] .guest-color-5 { --guest:#bd91d8; }
  body.state-account.state-staff[data-active-view="service"] .view-tabs,
  body.state-account.state-staff[data-active-view="service"] #serviceView .floor-column,
  body.state-account.state-staff[data-active-view="service"] .order-panel > .order-panel-heading,
  body.state-account.state-staff[data-active-view="service"] .seat-picker,
  body.state-account.state-staff[data-active-view="service"] #tableGuestStatus,
  body.state-account.state-staff[data-active-view="service"] .order-submit-dock,
  body.state-account.state-staff[data-active-view="service"] .order-panel > .note-label { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"].single-view .app-shell {
    display:block !important;
    height:calc(100dvh - 62px) !important;
    padding:0 0 90px !important;
    overflow-y:auto;
  }
  body.state-account.state-staff[data-active-view="service"] .workspace,
  body.state-account.state-staff[data-active-view="service"] #serviceView.active { display:block !important; width:100%; height:auto !important; padding:0 !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel {
    display:flex !important;
    flex-direction:column;
    width:min(1100px,100%);
    min-height:calc(100dvh - 62px);
    height:auto !important;
    margin:0 auto;
    padding:10px 12px 120px !important;
    border:0;
    border-radius:0;
    background:#f4f6f3 !important;
    color:#10211d !important;
    box-shadow:none;
    overflow:visible !important;
  }
  body.state-account.state-staff[data-active-view="service"] #productGrid { order:1; gap:6px; width:100%; }
  body.state-account.state-staff[data-active-view="service"] #productGrid > .order-step-label { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] #productGrid .service-product-tools {
    position:sticky !important;
    z-index:20;
    top:0;
    display:grid;
    grid-template-columns:104px minmax(0,1fr) 46px !important;
    gap:7px;
    padding:7px;
    border:1px solid #d2ddd7;
    border-radius:11px;
    background:#fff !important;
    color:#10211d;
  }
  body.state-account.state-staff[data-active-view="service"] .service-product-kind { display:grid; grid-template-columns:1fr 1fr; gap:4px; }
  body.state-account.state-staff[data-active-view="service"] .service-product-kind button { min-height:42px; padding:0; border:1px solid #cbd8d2; border-radius:8px; background:#eef3f0; font-size:1rem; }
  body.state-account.state-staff[data-active-view="service"] .service-product-kind button.active { border:2px solid #087c61; background:#cef2e6; }
  body.state-account.state-staff[data-active-view="service"] .service-product-kind button span,
  body.state-account.state-staff[data-active-view="service"] .service-product-tools label > span,
  body.state-account.state-staff[data-active-view="service"] .service-product-send span { display:none; }
  body.state-account.state-staff[data-active-view="service"] .service-product-send { display:grid; place-items:center; width:46px; height:42px; padding:0; border-radius:9px; background:var(--theme-accent); font-size:1.2rem; }
  body.state-account.state-staff[data-active-view="service"] #productGrid > .service-product-row,
  body.state-account.state-staff[data-active-view="service"] #productGrid > .service-product-row:not(:has(.service-product-modifier-dot)) {
    grid-template-columns:58px 36px minmax(160px,1fr) 86px 40px 40px !important;
    min-height:52px;
    padding:5px 8px;
    border:1px solid #dce5e0;
    border-radius:10px;
    background:#fff;
    color:#10211d;
  }
  body.state-account.state-staff[data-active-view="service"] #productGrid > .service-quick-modifiers { background:#fff !important; color:#10211d !important; }
  body.state-account.state-staff[data-active-view="service"] .cart { order:2; margin:0; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-drawer {
    --guest:#20c99a;
    position:fixed;
    z-index:230;
    right:auto;
    bottom:10px;
    left:50%;
    width:min(1000px,calc(100vw - 28px));
    max-height:55dvh;
    overflow:hidden;
    transform:translateX(-50%);
    border:2px solid var(--guest);
    border-radius:14px;
    background:#fff;
    color:#10211d;
    box-shadow:0 -10px 35px rgba(6,26,20,.22);
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-drawer.guest-color-0 { --guest:#66b9ee; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-drawer.guest-color-1 { --guest:#ef8b45; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-drawer.guest-color-2 { --guest:#f2c44d; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-drawer.guest-color-3 { --guest:#bd9e7b; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-drawer.guest-color-4 { --guest:#8dcf9c; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-drawer.guest-color-5 { --guest:#bd91d8; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-preview { display:grid; gap:5px; max-height:calc(55dvh - 58px); overflow-y:auto; padding:7px; background:#fff; color:#10211d; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-line {
    display:grid;
    grid-template-columns:34px minmax(0,1fr) auto 40px 34px;
    align-items:center;
    gap:6px;
    min-height:46px;
    padding:5px 7px;
    border:1px solid #dbe4df;
    border-left:4px solid var(--guest);
    border-radius:9px;
    background:#fafcfb;
    color:#10211d;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-quantity { display:grid; place-items:center; height:32px; border-radius:7px; background:color-mix(in srgb,var(--guest) 42%,white); font-size:.75rem; font-weight:950; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-line-toggle,
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-line-remove { display:grid; place-items:center; width:34px; height:34px; padding:0; border-radius:8px; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-line-toggle { border:1px solid #c8d5cf; background:#fff; color:#173d32; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-line-remove { border:1px solid #efbbb4; background:#fff0ee; color:#b52d20; font-size:1.05rem; font-weight:950; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-line-details { grid-column:1 / -1; display:grid; gap:7px; padding:8px 3px 3px; border-top:1px solid #dce5e0; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-summary { display:grid; grid-template-columns:40px minmax(0,1fr) auto 22px; align-items:center; gap:8px; width:100%; min-height:54px; padding:6px 9px; background:color-mix(in srgb,var(--guest) 28%,white); color:#10211d; text-align:left; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-guest { display:grid; place-items:center; width:38px; height:38px; border-radius:9px; background:var(--guest); font-weight:950; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-content { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-line > strong,
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-line > b { color:#10211d !important; }
}

/* Service workspace v8: no reserved gaps; compact sent-order actions. */
body.state-account.state-staff[data-active-view="service"] .service-order-history {
  gap:4px;
  padding:6px;
}
body.state-account.state-staff[data-active-view="service"] .service-order-history-heading {
  min-height:30px;
  padding:0 2px 4px;
}
body.state-account.state-staff[data-active-view="service"] .service-order-history-heading > strong { font-size:.75rem; color:#52635d; }
body.state-account.state-staff[data-active-view="service"] .service-order-history-heading > span { min-width:24px; height:24px; font-size:.72rem; }
body.state-account.state-staff[data-active-view="service"] .service-order-history-line {
  grid-template-columns:8px minmax(0,1fr) auto !important;
  gap:7px;
  min-height:42px;
  padding:4px 5px;
}
body.state-account.state-staff[data-active-view="service"] .service-editable-order-actions {
  grid-column:auto !important;
  display:flex;
  gap:4px;
}
body.state-account.state-staff[data-active-view="service"] .service-editable-order-actions button {
  display:grid;
  place-items:center;
  width:30px;
  min-width:30px;
  height:30px;
  min-height:30px;
  padding:0;
  border-radius:7px;
  font-size:1rem;
  line-height:1;
}
body.state-account.state-staff[data-active-view="service"] .service-editable-order-actions .edit { color:#173d32; }
body.state-account.state-staff[data-active-view="service"] .service-editable-order-actions .danger { color:#a32d23; }

@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"].single-view .app-shell { padding-bottom:0 !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel { padding-bottom:8px !important; }
  body.state-account.state-staff[data-active-view="service"]:has(.mobile-cart-drawer) #serviceView .order-panel { padding-bottom:76px !important; }
  body.state-account.state-staff[data-active-view="service"] #productGrid .service-product-tools { top:0 !important; }
  body.state-account.state-staff[data-active-view="service"] #tableGuestStatus { margin-top:2px; }
  body.state-account.state-staff[data-active-view="service"] .service-order-history-line > span:nth-child(2) { overflow:hidden; }
  body.state-account.state-staff[data-active-view="service"] .service-order-history-line > span:nth-child(2) strong,
  body.state-account.state-staff[data-active-view="service"] .service-order-history-line > span:nth-child(2) small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

@media (min-width:761px) {
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"].single-view .app-shell { padding-bottom:0 !important; }
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel { padding-bottom:12px !important; }
  body.state-account.state-staff[data-active-view="service"]:has(.mobile-cart-drawer) #serviceView .order-panel { padding-bottom:120px !important; }
}

/* Service workspace v9: three-section mobile accordion and compact search keyboard. */
.service-accordion-header { font:inherit; }
.service-products-accordion-heading { display:none; }
.service-search-keyboard-backdrop {
  position:fixed;
  z-index:520;
  inset:0;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:8px;
  background:rgba(4,18,14,.34);
}
.service-search-keyboard {
  display:grid;
  gap:7px;
  width:min(620px,100%);
  padding:10px;
  border:1px solid #bfcfc7;
  border-radius:15px 15px 0 0;
  background:#f6f8f7;
  color:#10211d;
  box-shadow:0 -15px 45px rgba(0,0,0,.3);
}
.service-search-keyboard header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.service-search-keyboard header > div { display:grid; min-width:0; }
.service-search-keyboard header small { color:#687770; font-size:.65rem; font-weight:900; text-transform:uppercase; }
.service-search-keyboard header strong { overflow:hidden; min-height:23px; font-size:1rem; text-overflow:ellipsis; white-space:nowrap; }
.service-search-keyboard header > button { width:34px; height:34px; padding:0; border-radius:50%; background:#e4ebe7; font-size:1.35rem; }
.service-search-number-keys,
.service-search-letter-keys { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:4px; }
.service-search-keyboard [data-service-search-key] { min-width:0; min-height:34px; padding:3px; border:1px solid #cbd7d1; border-radius:7px; background:#fff; color:#10211d; font-size:.76rem; font-weight:900; }
.service-search-number-keys [data-service-search-key] { background:#dff5ed; color:#075e48; }
.service-search-keyboard footer { display:grid; grid-template-columns:1fr 48px 72px 82px; gap:5px; }
.service-search-keyboard footer button { min-height:38px; border-radius:8px; }

@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] .workspace,
  body.state-account.state-staff[data-active-view="service"] #serviceView.active,
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel {
    height:100% !important;
    min-height:0 !important;
  }
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel {
    display:flex !important;
    flex-direction:column;
    gap:4px !important;
    overflow:hidden !important;
    padding:3px 7px 6px !important;
  }
  body.state-account.state-staff[data-active-view="service"]:has(.mobile-cart-drawer) #serviceView .order-panel { padding-bottom:6px !important; }
  body.state-account.state-staff[data-active-view="service"] #productGrid,
  body.state-account.state-staff[data-active-view="service"] .cart,
  body.state-account.state-staff[data-active-view="service"] #tableGuestStatus { flex:0 0 auto; min-height:0; margin:0; }
  body.state-account.state-staff[data-active-view="service"] #productGrid { order:1; display:flex; flex-direction:column; gap:0; }
  body.state-account.state-staff[data-active-view="service"] .cart { order:2; }
  body.state-account.state-staff[data-active-view="service"] #tableGuestStatus { order:3; }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-heading { display:grid; }
  body.state-account.state-staff[data-active-view="service"] .service-accordion-header {
    grid-template-columns:minmax(0,1fr) auto 20px;
    align-items:center;
    gap:7px;
    width:100%;
    min-height:42px;
    padding:6px 9px;
    border:1px solid #d2ddd7;
    border-radius:10px;
    background:#fff;
    color:#17372e;
    text-align:left;
  }
  body.state-account.state-staff[data-active-view="service"] .service-accordion-header > span { display:grid; place-items:center; min-width:24px; height:24px; border-radius:50%; background:#e6efea; font-size:.7rem; font-weight:950; }
  body.state-account.state-staff[data-active-view="service"] .service-accordion-header > i { font-style:normal; text-align:center; transition:transform .16s ease; }
  body.state-account.state-staff[data-active-view="service"] .service-accordion-header[aria-expanded="true"] { border-color:var(--theme-accent); background:#ecf9f4; box-shadow:inset 3px 0 0 var(--theme-accent); }
  body.state-account.state-staff[data-active-view="service"] .service-accordion-header[aria-expanded="true"] > i { transform:rotate(180deg); }
  body.state-account.state-staff[data-active-view="service"] .service-accordion-content { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] #productGrid,
  body.state-account.state-staff[data-active-view="service"] [data-service-section="draft"] .cart,
  body.state-account.state-staff[data-active-view="service"] [data-service-section="history"] #tableGuestStatus { flex:1 1 auto; min-height:0; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] #productGrid .service-products-accordion-content {
    display:grid !important;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    gap:5px;
    padding-top:4px;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-drawer {
    position:static !important;
    inset:auto !important;
    display:flex;
    flex-direction:column;
    width:100% !important;
    max-height:none !important;
    transform:none !important;
    border:0;
    border-radius:10px;
    background:transparent;
    box-shadow:none;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-summary {
    grid-template-columns:34px minmax(0,1fr) auto 18px;
    min-height:42px;
    padding:4px 7px;
    border:1px solid color-mix(in srgb,var(--guest) 65%,#cbd7d1);
    background:color-mix(in srgb,var(--guest) 20%,white);
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-guest { width:30px; height:30px; border-radius:7px; font-size:.78rem; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="draft"] .cart .mobile-cart-preview {
    display:grid !important;
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    gap:4px;
    padding:5px 1px 1px;
    border:0;
    background:transparent;
  }
  body.state-account.state-staff[data-active-view="service"] #tableGuestStatus .guest-status-panel { height:100%; min-height:0; }
  body.state-account.state-staff[data-active-view="service"] .service-order-history { display:flex; flex-direction:column; height:100%; min-height:0; padding:0; border:0; background:transparent; }
  body.state-account.state-staff[data-active-view="service"] .service-order-history-heading { flex:0 0 auto; min-height:42px; padding:6px 9px; border-bottom:1px solid #d2ddd7; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="history"] .service-order-history-content {
    display:grid !important;
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    align-content:start;
    gap:4px;
    padding-top:5px;
  }
  body.state-account.state-staff[data-active-view="service"] .service-quick-modifiers {
    max-height:165px;
    overflow-y:auto;
    padding:5px 6px !important;
  }
  body.state-account.state-staff[data-active-view="service"] .service-quick-modifier-group { grid-template-columns:50px minmax(0,1fr); align-items:start; gap:4px; }
  body.state-account.state-staff[data-active-view="service"] .service-quick-modifier-group + .service-quick-modifier-group { margin-top:4px; }
  body.state-account.state-staff[data-active-view="service"] .service-quick-modifier-group > span { padding-top:6px; font-size:.58rem; }
  body.state-account.state-staff[data-active-view="service"] .service-quick-chip { min-height:28px; padding:3px 6px; font-size:.68rem; }
  body.state-account.state-staff[data-active-view="service"] .service-quick-course-note { grid-template-columns:108px minmax(0,1fr); gap:5px; margin-top:4px; }
  body.state-account.state-staff[data-active-view="service"] .service-quick-course-note select,
  body.state-account.state-staff[data-active-view="service"] .service-quick-course-note input { min-height:32px; height:32px; padding:3px 7px; font-size:.7rem; }
}

@media (min-width:761px) {
  .service-accordion-content { display:contents; }
  .service-order-history-heading > i { display:none; }
}

/* Service workspace v10: three full-page mobile tabs, one visible workspace. */
.service-mobile-section-tabs { display:none; }
@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] .order-panel { --guest:#a9b3ae; }
  body.state-account.state-staff[data-active-view="service"] .order-panel.guest-color-0 { --guest:#66b9ee; }
  body.state-account.state-staff[data-active-view="service"] .order-panel.guest-color-1 { --guest:#ef8b45; }
  body.state-account.state-staff[data-active-view="service"] .order-panel.guest-color-2 { --guest:#f2c44d; }
  body.state-account.state-staff[data-active-view="service"] .order-panel.guest-color-3 { --guest:#bd9e7b; }
  body.state-account.state-staff[data-active-view="service"] .order-panel.guest-color-4 { --guest:#8dcf9c; }
  body.state-account.state-staff[data-active-view="service"] .order-panel.guest-color-5 { --guest:#bd91d8; }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    flex:0 0 auto;
    order:0;
    gap:4px;
    width:100%;
    padding:1px 0 3px;
  }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:5px;
    min-width:0;
    min-height:40px;
    padding:5px 6px;
    border:1px solid #cbd7d1;
    border-radius:9px;
    background:#eef3f0;
    color:#486058;
    font-size:.68rem;
    font-weight:900;
  }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button b { display:grid; place-items:center; min-width:20px; height:20px; padding:0 4px; border-radius:999px; background:#dbe5e0; font-size:.62rem; }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button.active {
    border-color:color-mix(in srgb,var(--guest) 75%,#46554f);
    background:color-mix(in srgb,var(--guest) 42%,white);
    color:#10211d;
    box-shadow:inset 0 -3px 0 var(--guest);
  }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs button.active b { background:var(--guest); color:#10211d; }

  body.state-account.state-staff[data-active-view="service"] #productGrid,
  body.state-account.state-staff[data-active-view="service"] .cart,
  body.state-account.state-staff[data-active-view="service"] #tableGuestStatus { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] #productGrid,
  body.state-account.state-staff[data-active-view="service"] [data-service-section="draft"] .cart,
  body.state-account.state-staff[data-active-view="service"] [data-service-section="history"] #tableGuestStatus {
    display:flex !important;
    flex:1 1 auto;
    width:100%;
    min-height:0;
    overflow:hidden;
    border-radius:10px;
    background:color-mix(in srgb,var(--guest) 14%,#f4f6f3);
  }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-heading,
  body.state-account.state-staff[data-active-view="service"] .mobile-cart-summary,
  body.state-account.state-staff[data-active-view="service"] .service-order-history-heading { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] #productGrid .service-products-accordion-content {
    display:grid !important;
    flex:1 1 auto;
    width:100%;
    min-height:0;
    overflow-y:auto;
    align-content:start;
    gap:5px;
    padding:0 1px 5px;
  }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content > .service-product-row,
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content > .service-product-row:not(:has(.service-product-modifier-dot)) {
    display:grid !important;
    grid-template-columns:26px minmax(0,1fr) 62px 40px 40px !important;
    align-items:center;
    gap:4px;
    width:100%;
    min-height:48px;
    padding:4px 5px;
    border:1px solid #dce5e0;
    border-radius:10px;
    background:#fff;
    color:#10211d;
    overflow:hidden;
  }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content > .service-product-row > * { min-width:0; }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content .service-product-number { grid-column:1; font-weight:900; }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content .service-product-customize { grid-column:2; overflow:hidden; background:transparent; text-align:left; }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content .service-product-customize strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content .product-card-meta { grid-column:3; white-space:nowrap; font-size:.76rem; font-weight:900; }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content .service-product-expand,
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content .service-product-expand-spacer { grid-column:4; }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content .service-product-add { grid-column:5; }
  body.state-account.state-staff[data-active-view="service"] .service-products-accordion-content > .service-quick-modifiers {
    position:relative;
    z-index:2;
    display:grid !important;
    width:100%;
    min-height:118px;
    max-height:190px;
    height:auto !important;
    margin:-3px 0 1px;
    overflow-y:auto;
    align-content:start;
    gap:5px;
    border:2px solid color-mix(in srgb,var(--guest) 72%,#20c99a);
    background:color-mix(in srgb,var(--guest) 10%,white) !important;
  }

  body.state-account.state-staff[data-active-view="service"] [data-service-section="draft"] .cart .mobile-cart-drawer { flex:1 1 auto; min-height:0; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="draft"] .cart .mobile-cart-preview {
    display:grid !important;
    flex:1 1 auto;
    min-height:0;
    max-height:none;
    overflow-y:auto;
    align-content:start;
    gap:5px;
    padding:2px 1px 5px;
  }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="history"] #tableGuestStatus { overflow-y:auto; align-items:flex-start; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="history"] #tableGuestStatus .guest-status-panel { width:100%; height:auto; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="history"] .service-order-history { width:100%; height:auto; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="history"] .service-order-history-content { display:grid !important; gap:5px; width:100%; }
  .service-section-empty { display:grid; place-content:center; gap:5px; width:100%; min-height:100%; padding:24px; color:#62736c; text-align:center; }
  .service-section-empty strong { color:#17372e; }
}

/* Service catalog v12: the page is the only mobile scroll container. */
@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"].single-view .app-shell { overflow-y:auto !important; }
  body.state-account.state-staff[data-active-view="service"] .workspace,
  body.state-account.state-staff[data-active-view="service"] #serviceView.active,
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel {
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
  }
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel { min-height:calc(100dvh - 100px) !important; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] #productGrid {
    display:block !important;
    flex:0 0 auto !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] #productGrid .service-products-accordion-content {
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding:0 1px 5px;
  }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] .service-product-tools { margin-bottom:5px; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] .service-product-list {
    display:grid !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    padding:0;
  }
  body.state-account.state-staff[data-active-view="service"] .service-product-list > .service-quick-modifiers {
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
  }
}

/* Service catalog list: render every filtered product and inline modifier. */
body.state-account.state-staff[data-active-view="service"] .service-product-list {
  display:grid;
  grid-auto-flow:row;
  grid-auto-rows:max-content;
  align-content:start;
  gap:5px;
  width:100%;
  min-width:0;
}
body.state-account.state-staff[data-active-view="service"] .service-product-list > .service-product-row,
body.state-account.state-staff[data-active-view="service"] .service-product-list > .service-product-row:not(:has(.service-product-modifier-dot)) {
  display:grid !important;
  grid-template-columns:58px 34px minmax(150px,1fr) 76px 40px 40px !important;
  align-items:center;
  gap:7px;
  width:100%;
  min-height:50px;
  padding:5px 7px;
  border:1px solid #dce5e0;
  border-radius:10px;
  background:#fff;
  color:#10211d;
  overflow:hidden;
}
body.state-account.state-staff[data-active-view="service"] .service-product-list > .service-quick-modifiers {
  display:grid !important;
  width:100%;
  height:auto !important;
  min-height:0;
  max-height:none;
  overflow:visible;
}

@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs {
    position:sticky !important;
    z-index:60;
    top:0;
    padding:4px 0;
    background:#f4f6f3;
  }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] #productGrid .service-products-accordion-content {
    display:block !important;
    height:auto !important;
    overflow:visible !important;
  }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] .service-product-tools,
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] .seat-target-hint,
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] .service-show-all-products { flex:0 0 auto; }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] #productGrid .service-product-tools {
    position:sticky !important;
    z-index:55;
    top:48px !important;
  }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] .service-product-list {
    display:grid !important;
    flex:0 0 auto;
    height:auto !important;
    min-height:0;
    max-height:none !important;
    overflow:visible !important;
    padding:0 1px 5px;
  }
  body.state-account.state-staff[data-active-view="service"] .service-product-list > .service-product-row,
  body.state-account.state-staff[data-active-view="service"] .service-product-list > .service-product-row:not(:has(.service-product-modifier-dot)) {
    grid-template-columns:26px minmax(0,1fr) 62px 40px 40px !important;
    gap:4px;
    min-height:48px;
    padding:4px 5px;
  }
  body.state-account.state-staff[data-active-view="service"] .service-product-list > .service-product-row > * { min-width:0; }
  body.state-account.state-staff[data-active-view="service"] .service-product-list .service-product-category-name { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] .service-product-list .service-product-number { grid-column:1; }
  body.state-account.state-staff[data-active-view="service"] .service-product-list .service-product-customize { grid-column:2; }
  body.state-account.state-staff[data-active-view="service"] .service-product-list .product-card-meta { grid-column:3; }
  body.state-account.state-staff[data-active-view="service"] .service-product-list .service-product-expand,
  body.state-account.state-staff[data-active-view="service"] .service-product-list .service-product-expand-spacer { grid-column:4; }
  body.state-account.state-staff[data-active-view="service"] .service-product-list .service-product-add { grid-column:5; }
  body.state-account.state-staff[data-active-view="service"] .service-product-list > .service-quick-modifiers {
    position:relative;
    z-index:2;
    min-height:0;
    max-height:none;
    margin:-3px 0 1px;
    overflow:visible;
    align-content:start;
    gap:3px;
    padding:4px !important;
    border:2px solid color-mix(in srgb,var(--guest) 72%,#20c99a);
    background:color-mix(in srgb,var(--guest) 10%,white) !important;
    color:#10211d !important;
  }
  body.state-account.state-staff[data-active-view="service"] .service-quick-modifier-group {
    display:grid;
    grid-template-columns:38px minmax(0,1fr);
    align-items:start;
    gap:3px;
    margin:0 !important;
  }
  body.state-account.state-staff[data-active-view="service"] .service-quick-modifier-group > span {
    padding-top:5px;
    color:#445c54 !important;
    font-size:.52rem;
    font-weight:950;
    line-height:1;
  }
  body.state-account.state-staff[data-active-view="service"] .service-quick-modifier-group > div { gap:3px; }
  body.state-account.state-staff[data-active-view="service"] .service-quick-chip {
    min-height:24px;
    padding:2px 6px;
    font-size:.64rem;
    line-height:1.05;
  }
  body.state-account.state-staff[data-active-view="service"] .service-quick-course-note {
    grid-template-columns:104px minmax(0,1fr);
    gap:4px;
    margin-top:1px;
  }
  body.state-account.state-staff[data-active-view="service"] .service-quick-course-note label { gap:1px; }
  body.state-account.state-staff[data-active-view="service"] .service-quick-course-note label > span {
    color:#445c54 !important;
    font-size:.52rem;
    line-height:1;
  }
  body.state-account.state-staff[data-active-view="service"] .service-quick-course-note select,
  body.state-account.state-staff[data-active-view="service"] .service-quick-course-note input {
    height:28px;
    min-height:28px;
    padding:2px 6px;
    font-size:.66rem;
  }
}

/* Compact single-person billing: one total, one price control and icon actions. */
.billing-remove-icon {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  min-height:30px !important;
  padding:0 !important;
  border:1px solid #edc2bb;
  border-radius:8px;
  background:#fff1ee;
  color:#a32d23;
  font-size:1.15rem;
  line-height:1;
}
.billing-seat-dialog .billing-title-row { align-items:center; }
.billing-seat-dialog .billing-title-row h3 { font-size:1.15rem; line-height:1.05; }
.billing-seat-dialog .billing-title-row .eyebrow { margin-bottom:2px; }
.billing-seat-dialog .billing-group > header { padding:7px 10px; }
.billing-seat-dialog .billing-group > header strong { font-size:1rem; }
.billing-seat-dialog .billing-lines { gap:5px; padding:5px; }
.billing-seat-dialog .billing-line {
  grid-template-columns:minmax(0,1fr) 82px auto auto;
  gap:6px;
  padding:6px 7px;
}
.billing-seat-dialog .billing-price-field span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.billing-seat-dialog .billing-price-field input { height:32px; padding:3px 6px; }
.billing-seat-dialog .billing-line-total { font-size:.8rem; }
.billing-seat-dialog .billing-checkout-bar { margin-top:5px; }

@media (max-width:760px) {
  .billing-seat-dialog { gap:7px; padding:9px !important; }
  .billing-seat-dialog .billing-title-row { grid-template-columns:minmax(0,1fr) 40px; gap:6px; }
  .billing-seat-dialog .billing-title-row .icon-action { grid-column:2; grid-row:1; }
  .billing-seat-dialog .billing-group { border-radius:11px; }
  .billing-seat-dialog .billing-line { grid-template-columns:minmax(0,1fr) 74px 30px; }
  .billing-seat-dialog .billing-line-total { display:none; }
  .billing-seat-dialog .billing-adjustment-form { padding:8px; }
  .billing-seat-dialog .billing-checkout-bar { padding:9px; }
}

/* Mobile service v15: persistent section navigation and viewport-safe checkout. */
#billingDialog,
#billingDialog .billing-dialog,
#billingDialog .billing-dialog * { box-sizing:border-box; }
#billingDialog .billing-dialog { overflow-x:hidden; }

@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] #serviceView .order-panel {
    padding-top:51px !important;
  }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs {
    position:fixed !important;
    z-index:230;
    inset:54px 0 auto 0;
    width:100%;
    height:48px;
    margin:0;
    padding:4px 7px;
    background:#f4f6f3;
    box-shadow:0 2px 7px rgba(6,26,20,.1);
  }
  body.state-account.state-staff[data-active-view="service"] [data-service-section="products"] #productGrid .service-product-tools {
    top:48px !important;
  }

  #billingDialog {
    align-items:flex-end;
    width:100vw;
    max-width:100vw;
    padding:6px;
    overflow:hidden;
  }
  #billingDialog .billing-dialog {
    width:calc(100vw - 12px) !important;
    max-width:calc(100vw - 12px) !important;
    max-height:calc(100dvh - 12px);
    gap:8px;
    margin:0;
    padding:10px !important;
    border-radius:14px 14px 0 0;
    overflow-y:auto;
    overflow-x:hidden;
    overscroll-behavior:contain;
  }
  #billingDialog .billing-dialog > *,
  #billingDialog .billing-dialog form,
  #billingDialog .billing-dialog fieldset,
  #billingDialog .billing-dialog input,
  #billingDialog .billing-dialog select,
  #billingDialog .billing-dialog button {
    min-width:0;
    max-width:100%;
  }
  #billingDialog .billing-dialog fieldset { width:100%; min-inline-size:0; }
  #billingDialog .billing-title-row {
    grid-template-columns:minmax(0,1fr) 38px !important;
    gap:6px;
  }
  #billingDialog .billing-title-row > div:first-child { min-width:0; }
  #billingDialog .billing-title-row h3 { overflow-wrap:anywhere; }
  #billingDialog .billing-title-row .icon-action { grid-column:2; grid-row:1; }
  #billingDialog .billing-grand-total { grid-column:1 / -1; width:100%; min-width:0; }
  #billingDialog .billing-mode-strip { grid-template-columns:1fr; }
  #billingDialog .billing-group > header { grid-template-columns:1fr !important; gap:6px; }
  #billingDialog .billing-person-actions { grid-column:1; grid-row:auto; width:100%; }
  #billingDialog .billing-line,
  #billingDialog .billing-seat-dialog .billing-line {
    grid-template-columns:minmax(0,1fr) auto 30px !important;
    gap:5px;
    width:100%;
  }
  #billingDialog .billing-line-name { grid-column:1 / -1; }
  #billingDialog .billing-price-field { grid-column:1; width:100%; }
  #billingDialog .billing-line-total { grid-column:2; display:block; align-self:center; text-align:right; }
  #billingDialog .billing-line > .billing-remove { grid-column:3; align-self:center; }
  #billingDialog .billing-adjustment-line.billing-discount-line { display:block; }
  #billingDialog .billing-table-discount,
  #billingDialog .billing-adjustment-form,
  #billingDialog .billing-person-discount,
  #billingDialog .billing-discount-edit {
    grid-template-columns:minmax(0,1fr) !important;
    width:100%;
  }
  #billingDialog .billing-table-discount > *,
  #billingDialog .billing-adjustment-form > *,
  #billingDialog .billing-person-discount > *,
  #billingDialog .billing-discount-edit > * { grid-column:1 !important; }
  #billingDialog .billing-person-pay,
  #billingDialog .billing-payment-actions button,
  #billingDialog .billing-checkout-bar button { width:100%; white-space:normal; }
  #billingDialog .billing-person-summary > div { grid-template-columns:1fr 1fr; }
  #billingDialog .billing-payment-form fieldset { grid-template-columns:1fr; }
  #billingDialog .billing-payment-form label { width:100%; padding:10px; }
  #billingDialog .billing-external-reference { width:100%; margin-top:8px; padding:10px; }
  #billingDialog .billing-payment-actions { display:grid; grid-template-columns:1fr; gap:6px; margin-top:8px; }
  #billingDialog .billing-checkout-bar { position:sticky; bottom:-10px; width:100%; }
}

/* Table invoice v16: compact person summaries with optional inline details. */
#tableOrdersDialog,
#tableOrdersDialog .table-orders-dialog,
#tableOrdersDialog .table-orders-dialog * { box-sizing:border-box; }
#tableOrdersDialog .table-orders-groups { display:grid; gap:7px; }
#tableOrdersDialog .table-orders-group {
  overflow:hidden;
  border:1px solid #d5dfda;
  border-radius:12px;
  background:#fff;
}
#tableOrdersDialog .table-orders-group > header {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:stretch;
  gap:5px;
  padding:0;
  background:#edf4f0;
}
#tableOrdersDialog .table-orders-group-toggle {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto 18px;
  align-items:center;
  gap:8px;
  width:100%;
  min-width:0;
  min-height:52px;
  padding:8px 10px;
  border:0;
  background:transparent;
  color:#10211d;
  text-align:left;
}
#tableOrdersDialog .table-orders-group-toggle > span {
  display:flex;
  align-items:baseline;
  place-items:initial;
  gap:7px;
  width:auto;
  min-width:0;
  height:auto;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-weight:inherit;
}
#tableOrdersDialog .table-orders-group-toggle strong { font-size:1rem; }
#tableOrdersDialog .table-orders-group-toggle small { color:#5f716a; font-size:.7rem; font-weight:800; }
#tableOrdersDialog .table-orders-group-toggle b { white-space:nowrap; }
#tableOrdersDialog .table-orders-group-toggle i { font-style:normal; transition:transform .15s ease; }
#tableOrdersDialog .table-orders-group.expanded .table-orders-group-toggle i { transform:rotate(180deg); }
#tableOrdersDialog .table-orders-seat-pay {
  min-height:40px;
  padding:7px 12px;
  border:0;
  border-radius:8px;
  background:#0b4938;
  color:#fff;
  font-weight:900;
}
#tableOrdersDialog .table-orders-seat-pay.compact { align-self:center; min-height:34px; margin-right:7px; padding:4px 9px; font-size:.7rem; }
#tableOrdersDialog .table-orders-group-body { display:grid; grid-template-columns:minmax(0,1fr); gap:5px; width:100%; padding:6px; border-top:1px solid #dce5e0; }
#tableOrdersDialog .table-orders-group-body[hidden] { display:none !important; }
#tableOrdersDialog .table-orders-item {
  display:grid;
  grid-template-columns:30px minmax(0,1fr) 96px 82px 30px;
  align-items:center;
  gap:6px;
  min-width:0;
  padding:6px;
  border:1px solid #e0e7e3;
  border-radius:9px;
  background:#f9fbfa;
}
#tableOrdersDialog .table-orders-item-quantity { font-weight:900; }
#tableOrdersDialog .table-orders-item-name { display:grid; min-width:0; overflow-wrap:anywhere; }
#tableOrdersDialog .table-orders-item-name small,
#tableOrdersDialog .table-orders-item-status { color:#65766f; font-size:.64rem; }
#tableOrdersDialog .table-orders-item-status { grid-column:2 / -1; }
#tableOrdersDialog .table-orders-item-price { display:grid; gap:2px; min-width:0; }
#tableOrdersDialog .table-orders-item-price span { color:#687871; font-size:.55rem; font-weight:900; text-transform:uppercase; }
#tableOrdersDialog .table-orders-item-price input { width:100%; min-width:0; height:32px; padding:3px 6px; border:1px solid #bccbc4; border-radius:7px; background:#fff; font:inherit; font-weight:850; }
#tableOrdersDialog .table-orders-item-total { white-space:nowrap; text-align:right; }
#tableOrdersDialog .table-orders-item-remove { display:grid; place-items:center; width:30px; height:30px; padding:0; border:1px solid #edc2bb; border-radius:7px; background:#fff1ee; color:#a32d23; font-size:1.05rem; font-weight:900; }
#tableOrdersDialog .table-orders-group-body > footer { display:flex; justify-content:flex-end; padding-top:2px; }

@media (max-width:760px) {
  #tableOrdersDialog { width:100vw; max-width:100vw; padding:6px; overflow:hidden; }
  #tableOrdersDialog .table-orders-dialog { width:calc(100vw - 12px); max-width:calc(100vw - 12px); padding:10px; overflow:hidden; }
  #tableOrdersDialog .table-orders-group > header { grid-template-columns:minmax(0,1fr) 62px; }
  #tableOrdersDialog .table-orders-group-toggle { grid-template-columns:minmax(0,1fr) auto 14px; gap:5px; min-height:48px; padding:6px 8px; }
  #tableOrdersDialog .table-orders-group-toggle > span { display:grid; gap:0; }
  #tableOrdersDialog .table-orders-seat-pay.compact { width:56px; margin-right:5px; padding:3px; }
  #tableOrdersDialog .table-orders-item {
    grid-template-columns:28px minmax(0,1fr) 30px;
    align-items:start;
    gap:4px 6px;
  }
  #tableOrdersDialog .table-orders-item-quantity { grid-column:1; grid-row:1; }
  #tableOrdersDialog .table-orders-item-name { grid-column:2; grid-row:1; }
  #tableOrdersDialog .table-orders-item-remove { grid-column:3; grid-row:1; }
  #tableOrdersDialog .table-orders-item-price { grid-column:2; grid-row:2; width:min(100%,110px); }
  #tableOrdersDialog .table-orders-item-total { grid-column:2; grid-row:3; justify-self:start; font-size:.72rem; }
  #tableOrdersDialog .table-orders-item-status { grid-column:2 / -1; grid-row:4; }
  #tableOrdersDialog .table-orders-group-body > footer .table-orders-seat-pay { width:100%; }
}

/* Table invoice v17: person details use their own full-height view. */
#tableOrdersDialog .table-orders-person-dialog {
  display:flex;
  flex-direction:column;
  width:min(620px,100%);
  height:min(88dvh,760px);
  max-height:calc(100dvh - 20px);
  overflow:hidden;
}
#tableOrdersDialog .table-orders-person-title {
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto 38px;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  margin:0;
  padding-bottom:8px;
  border-bottom:1px solid #dce5e0;
}
#tableOrdersDialog .table-orders-person-title > div { display:grid; min-width:0; }
#tableOrdersDialog .table-orders-person-title > div small,
#tableOrdersDialog .table-orders-person-title > div span { color:#65766f; font-size:.67rem; font-weight:800; }
#tableOrdersDialog .table-orders-person-title > div strong { font-size:1.25rem; }
#tableOrdersDialog .table-orders-person-title > b { white-space:nowrap; }
#tableOrdersDialog .table-orders-back { display:grid; place-items:center; width:36px; height:36px; padding:0; border:1px solid #ccd8d2; border-radius:9px; background:#eef3f0; color:#173d32; font-size:1.2rem; }
#tableOrdersDialog .table-orders-person-items {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  align-content:start;
  flex:1 1 auto;
  min-height:0;
  gap:6px;
  padding:7px 2px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
#tableOrdersDialog .table-orders-person-footer {
  display:grid;
  grid-template-columns:auto minmax(180px,1fr);
  align-items:center;
  gap:8px;
  flex:0 0 auto;
  padding-top:8px;
  border-top:1px solid #dce5e0;
  background:#fff;
}
#tableOrdersDialog .table-orders-person-footer > div { display:grid; }
#tableOrdersDialog .table-orders-person-footer > div span { color:#64756e; font-size:.62rem; font-weight:900; text-transform:uppercase; }
#tableOrdersDialog .table-orders-person-footer > div strong { font-size:1.15rem; }

@media (max-width:760px) {
  #tableOrdersDialog .table-orders-person-dialog {
    width:calc(100vw - 12px);
    height:calc(100dvh - 12px);
    max-height:calc(100dvh - 12px);
  }
  #tableOrdersDialog .table-orders-person-title { grid-template-columns:36px minmax(0,1fr) auto 36px; gap:5px; }
  #tableOrdersDialog .table-orders-person-title > b { font-size:.82rem; }
  #tableOrdersDialog .table-orders-person-footer { grid-template-columns:1fr; }
  #tableOrdersDialog .table-orders-person-footer .primary-action { width:100%; }
}

/* Beverage variants v18: type and size determine the visible order price. */
.service-quick-modifier-group.beverage-variant-group > div { align-items:stretch; }
.service-quick-chip.beverage-size-chip { display:grid; grid-template-columns:auto; justify-items:center; gap:1px; min-width:68px; }
.service-quick-chip.beverage-size-chip b { font-size:inherit; }
.service-quick-chip.beverage-size-chip small { color:inherit; font-size:.58rem; font-weight:850; opacity:.78; }
.service-quick-course-note.drink-only { grid-template-columns:minmax(0,1fr); }
.service-quick-course-note.drink-only > label { width:100%; }

@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] .service-quick-modifier-group.beverage-variant-group {
    grid-template-columns:38px minmax(0,1fr);
  }
  body.state-account.state-staff[data-active-view="service"] .service-quick-chip.beverage-size-chip {
    min-width:61px;
    min-height:31px;
    padding:2px 5px;
  }
}

/* Service attention header v19: owned tables, ready items and seat targets stay visible. */
.service-table-strip { display:none; }
.service-table-select-fallback { display:none !important; }
.service-table-switch { position:relative; display:flex; flex:0 0 auto; align-items:stretch; min-width:58px; height:42px; }
.service-table-select {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  min-width:58px;
  height:42px;
  padding:3px 7px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:9px;
  background:#173d32;
  color:#fff;
  font-size:.69rem;
  font-weight:900;
}
.service-table-select > strong { font-size:.85rem; }
.service-table-switch.selected .service-table-select { border-color:#ffe493; background:#f3c84f; color:#14251f; box-shadow:inset 0 -3px 0 #d89a13; }
.service-table-switch.ready:not(.selected) .service-table-select { border-color:#57d5b2; background:#0d604b; }
.service-table-switch.warning .service-table-select { border-color:#ffbc54; background:#7a4d08; }
.service-table-switch.critical .service-table-select { border-color:#ff8278; background:#8e2b24; animation:service-attention-pulse 1.4s ease-in-out infinite; }
.service-table-channel { white-space:nowrap; font-size:.61rem; }
.service-table-progress { width:7px; height:7px; border-radius:50%; background:#7eb7e7; }
.service-table-complete { display:grid; place-items:center; width:15px; height:15px; border-radius:50%; background:#22c99b; color:#06251c; font-size:.6rem; }
.service-table-pickup {
  position:absolute;
  top:-5px;
  right:-5px;
  display:grid;
  place-items:center;
  min-width:21px;
  height:21px;
  padding:0 4px;
  border:2px solid #fff;
  border-radius:999px;
  background:#ff5b4d;
  color:#fff;
  font-size:.65rem;
  font-weight:950;
  box-shadow:0 3px 8px rgba(0,0,0,.25);
}
.service-alert-toggle { flex:0 0 40px; width:40px; height:42px; padding:0; border:1px solid rgba(255,255,255,.2); border-radius:9px; background:#173d32; color:#fff; font-size:1rem; }
.service-alert-toggle:not(.active) { opacity:.62; }
.service-connection-state { flex:0 0 26px; display:grid; place-items:center; width:26px; height:42px; }
.service-connection-state i { width:9px; height:9px; border-radius:50%; background:#36d3a6; box-shadow:0 0 0 3px rgba(54,211,166,.18); }
.service-connection-state.offline i { background:#ff665c; box-shadow:0 0 0 3px rgba(255,102,92,.2); }
@keyframes service-attention-pulse { 50% { box-shadow:0 0 0 4px rgba(255,91,77,.28); } }

.mobile-seat-button { position:relative; display:grid !important; place-items:center; align-content:center; line-height:1; }
.mobile-seat-button > span { font:inherit; }
.mobile-seat-button > small { position:absolute; right:2px; bottom:2px; padding:1px 2px; border-radius:4px; background:#082e24; color:#fff; font-size:.46rem; font-weight:900; white-space:nowrap; }
.mobile-seat-button.has-ready-items { box-shadow:inset 0 0 0 3px #16ad80,0 0 0 2px #fff; }

.service-pickup-overlay,
.my-tables-overlay {
  position:fixed;
  z-index:620;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  background:rgba(4,18,14,.58);
}
.service-pickup-dialog,
.my-tables-dialog {
  display:flex;
  flex-direction:column;
  gap:9px;
  width:min(560px,100%);
  max-height:calc(100dvh - 20px);
  padding:12px;
  border-radius:16px;
  background:#fff;
  color:#10211d;
  box-shadow:0 22px 70px rgba(0,0,0,.35);
  overflow:hidden;
}
.service-pickup-dialog > header,
.my-tables-dialog > header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.service-pickup-dialog > header > span,
.my-tables-dialog > header > span { display:grid; }
.service-pickup-dialog > header small,
.my-tables-dialog > header small { color:#65766f; font-size:.65rem; font-weight:900; text-transform:uppercase; }
.service-pickup-dialog > header strong,
.my-tables-dialog > header strong { font-size:1.35rem; }
.service-pickup-dialog > header button,
.my-tables-dialog > header button { display:grid; place-items:center; width:38px; height:38px; padding:0; border:0; border-radius:50%; background:#edf2ef; color:#10211d; font-size:1.5rem; }
.service-wave-complete { display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:7px; padding:7px 9px; border-radius:10px; background:#d9f6ec; color:#075b46; }
.service-wave-complete > span { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#20c99a; color:#06251c; }
.service-wave-complete small { font-weight:800; }
.service-pickup-list { display:grid; gap:6px; min-height:0; overflow-y:auto; }
.service-pickup-line { display:grid; grid-template-columns:32px minmax(0,1fr) auto; align-items:center; gap:7px; padding:7px; border:1px solid #d8e2dd; border-radius:10px; background:#f7faf8; }
.service-pickup-line.travelling { background:#f1ecfb; }
.service-pickup-kind { font-size:1.2rem; text-align:center; }
.service-pickup-line > span:nth-child(2) { display:grid; min-width:0; }
.service-pickup-line strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.service-pickup-line small { color:#66766f; font-size:.7rem; }
.service-pickup-line button { min-height:36px; padding:5px 9px; border:0; border-radius:8px; background:#0d604b; color:#fff; font-weight:900; }
.service-pickup-dialog > footer .primary-action { width:100%; }
.service-ready-toast { position:fixed; z-index:700; top:12px; left:50%; display:grid; grid-template-columns:34px minmax(0,1fr); width:min(430px,calc(100vw - 20px)); min-height:58px; padding:8px 12px; transform:translateX(-50%); border:2px solid #58d7b4; border-radius:12px; background:#082f24; color:#fff; text-align:left; box-shadow:0 12px 36px rgba(0,0,0,.34); }
.service-ready-toast > span { grid-row:1 / 3; display:grid; place-items:center; width:30px; height:30px; border-radius:50%; background:#20c99a; color:#06251c; }
.service-ready-toast strong,.service-ready-toast small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.service-ready-toast small { color:#bce4d7; }

.mobile-table-management { display:none; }
.topbar.mobile-menu-open .mobile-table-management { display:block; width:100%; min-height:42px; }
.my-tables-dialog > p { margin:0; color:#60716a; font-size:.78rem; }
.my-tables-list { display:grid; gap:10px; min-height:0; overflow-y:auto; }
.my-tables-room { display:grid; gap:5px; }
.my-tables-room h3 { margin:0; color:#52665e; font-size:.7rem; text-transform:uppercase; }
.my-tables-room > div { display:grid; gap:5px; }
.my-table-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:7px; padding:6px; border:1px solid #d8e2dd; border-radius:10px; }
.my-table-row.mine { border-color:#22b98e; background:#edfaf5; }
.my-table-row.warning { border-color:#eaa737; }
.my-table-row.critical { border-color:#e95c50; background:#fff0ed; }
.my-table-number { display:grid; place-items:center; width:42px; height:38px; border-radius:8px; background:#173d32; color:#fff; font-weight:950; }
.my-table-row > span:nth-child(2) { display:grid; min-width:0; }
.my-table-row small { color:#65766f; font-size:.68rem; }
.my-table-row button { min-height:36px; padding:5px 8px; border:0; border-radius:8px; background:#173d32; color:#fff; font-size:.7rem; font-weight:900; }
.my-table-row button:disabled { background:#dfe6e2; color:#85928c; }

.staff-avatar img,.session-badge img,.mobile-menu-toggle img,.staff-avatar-preview img { width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.staff-avatar-upload { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:end; gap:6px; }
.staff-avatar-upload > input { grid-column:1; }
.staff-avatar-preview { grid-column:2; grid-row:1 / 3; display:grid; place-items:center; width:52px; height:52px; border:2px solid #cbd8d2; border-radius:50%; overflow:hidden; background:#f1f5f3; font-weight:950; }
.staff-avatar-upload > button { grid-column:1 / -1; width:max-content; min-height:34px; }

@media (max-width:760px) {
  body.state-account.state-staff[data-active-view="service"] .topbar {
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 44px !important;
    grid-template-rows:46px 46px;
    height:96px !important;
    min-height:96px !important;
    padding:2px 7px !important;
  }
  body.state-account.state-staff[data-active-view="service"] .brand-block { display:none !important; }
  body.state-account.state-staff[data-active-view="service"] .mobile-service-controls {
    grid-column:1;
    grid-row:1 / 3;
    display:grid !important;
    grid-template-rows:46px 46px;
    gap:0;
    width:100%;
    height:92px !important;
    min-width:0;
  }
  body.state-account.state-staff[data-active-view="service"] .mobile-menu-toggle { grid-column:2; grid-row:1 / 3; align-self:center; }
  body.state-account.state-staff[data-active-view="service"] .mobile-menu-toggle { display:grid !important; position:relative; z-index:3; }
  body.state-account.state-staff[data-active-view="service"] .service-table-strip,
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip { display:flex !important; align-items:center; gap:6px; width:100%; min-width:0; height:46px !important; padding:2px 4px !important; overflow-x:auto; overflow-y:visible; scrollbar-width:none; }
  body.state-account.state-staff[data-active-view="service"] .service-table-strip::-webkit-scrollbar,
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip::-webkit-scrollbar { display:none; }
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"].single-view .app-shell { inset:96px 0 0 !important; }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs { top:96px !important; }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs {
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    width:100vw !important;
    max-width:100vw !important;
    overflow:hidden;
  }
  body.state-account.state-staff[data-active-view="service"] .service-mobile-section-tabs > button { min-width:0 !important; width:auto !important; }
  .service-pickup-overlay,.my-tables-overlay { align-items:flex-end; padding:0; }
  .service-pickup-dialog,.my-tables-dialog { width:100%; max-height:88dvh; border-radius:16px 16px 0 0; }
  .service-ready-toast { top:102px; }
}

@media (min-width:761px) {
  body.state-account.state-staff[data-active-view="service"] .topbar { min-height:106px !important; height:106px !important; }
  body.state-account.state-staff[data-active-view="service"] .mobile-service-controls { display:grid !important; grid-template-rows:46px 46px; gap:2px; height:94px !important; }
  body.state-account.state-staff[data-active-view="service"] .service-table-strip,
  body.state-account.state-staff[data-active-view="service"] .mobile-seat-strip { display:flex !important; align-items:center; gap:7px; min-width:0; overflow-x:auto; scrollbar-width:none; }
  body.state-account.state-staff[data-active-view="service"] .app-shell,
  body.state-account.state-staff[data-active-view="service"].single-view .app-shell { height:calc(100dvh - 106px) !important; }
}