: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);
}

/* 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; }
}