/* Unified header band — logo through bottom divider (guest + staff + modals) */

:root {
  --header-chrome-pad-y: 12px;
  --header-chrome-pad-x: 16px;
  --header-chrome-pad-bottom: 4px;
  --header-chrome-row-gap: 4px;
  --header-chrome-chip-h: 28px;
  --header-chrome-icon: 15px;
  --header-chrome-logo-h: 20px;
  --header-chrome-logo-max-w: min(100%, 220px);
  --header-chrome-logo-row-h: var(--header-chrome-chip-h);
  --header-chrome-venue-gap: 2px;
  --header-chrome-venue-line-h: 13px;
  --header-chrome-venue-bridge-h: calc(var(--header-chrome-row-gap) + 18px);
  --header-chrome-center-max-w: min(100%, calc(100vw - 32px));
  /* Logo row only — venue sits in .header-venue-bridge below */
  --header-chrome-top-h: var(--header-chrome-logo-row-h);
  --header-chrome-pad-y-safe: max(var(--header-chrome-pad-y), env(safe-area-inset-top, 0px));
  --header-chrome-band-h: calc(var(--header-chrome-pad-y-safe) + var(--header-chrome-logo-row-h));
  --header-chrome-toolbar-pad-top: 4px;
  --header-chrome-toolbar-pad-bottom: 14px;
  --header-chrome-toolbar-row-h: 34px;
  --header-chrome-toolbar-h: calc(var(--header-chrome-toolbar-pad-top) + var(--header-chrome-toolbar-row-h) + var(--header-chrome-toolbar-pad-bottom));
  --header-chrome-shell-h: calc(var(--header-chrome-band-h) + var(--header-chrome-venue-bridge-h) + var(--header-chrome-toolbar-h));
  --header-chrome-modal-close-h: 36px;
  --header-chrome-modal-close-top: calc(var(--header-chrome-pad-y-safe) + (var(--header-chrome-logo-row-h) - var(--header-chrome-modal-close-h)) / 2);
}

@media (min-width: 768px) {
  :root {
    --header-chrome-pad-y: 14px;
    --header-chrome-pad-x: 24px;
    --header-chrome-pad-bottom: 6px;
  }
}

/* Shells: fixed band height (logo row + venue slot + padding) — guest + staff + modals */
.header.staff-header-wrap,
.torbeens-header > .header,
.torbeens-header--modal > .header.staff-header-wrap,
body.guest-menu .menu-sticky .torbeens-header > .header,
body.guest-menu .menu-sticky > .header,
.restaurant-gate-sticky > .header.staff-header-wrap,
.cashier-gate-sticky > .header.staff-header-wrap,
.sheet.chef-bday-modal .chef-bday-sheet-header {
  box-sizing: border-box;
  height: var(--header-chrome-band-h);
  min-height: var(--header-chrome-band-h);
  max-height: var(--header-chrome-band-h);
  padding: var(--header-chrome-pad-y-safe) var(--header-chrome-pad-x) 0;
  overflow: visible;
}

/* Top row — logo band aligns with side chips (28px) */
.staff-header-top,
.header-top {
  height: var(--header-chrome-top-h);
  min-height: var(--header-chrome-top-h);
  max-height: var(--header-chrome-top-h);
  margin-bottom: 0;
  align-items: flex-start;
  box-sizing: border-box;
}

/* Center column — logo only */
.header-center,
.staff-header-center {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: max-content;
  max-width: var(--header-chrome-center-max-w);
  height: var(--header-chrome-logo-row-h);
  min-height: var(--header-chrome-logo-row-h);
  max-height: var(--header-chrome-logo-row-h);
  box-sizing: border-box;
  pointer-events: none;
}

.header-center :is(.brand, a.header-brand-logo-wrap),
.staff-header-center :is(.brand, a.header-brand-logo-wrap) {
  pointer-events: auto;
}

/* Venue bridge — centered between logo row and toolbar / categories */
.header-venue-bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--header-chrome-venue-bridge-h);
  height: var(--header-chrome-venue-bridge-h);
  min-height: var(--header-chrome-venue-bridge-h);
  max-height: var(--header-chrome-venue-bridge-h);
  padding: 0 var(--header-chrome-pad-x);
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Sticky chrome divider — bottom of full header (logo + venue + toolbar/categories) */
body.guest-menu .menu-sticky,
body[class*="staff-page-"] .staff-pin-gate-sticky,
body.staff-page-cashier .cashier-sticky,
body.staff-page-cashier .cashier-gate-sticky,
body.staff-page-admin .admin-sticky,
body.staff-page-chef .chef-sticky,
body.staff-page-qr .qr-sticky {
  border-bottom: 1px solid var(--border, #333);
}

.header-venue-bridge .venue-line,
.header-venue-bridge .staff-header-venue {
  pointer-events: auto;
}

/* Injection slots — transparent for layout (same tree as guest header-center) */
.header-chrome-slot {
  display: contents;
}

.header-chrome-slot:empty {
  display: none;
}

/* Venue block — same on guest + staff + modals */
.venue-line,
.staff-header-venue,
.chef-bday-modal-header-top .venue-line,
.chef-bday-modal-header-top .staff-header-venue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  text-align: center;
  font-size: 0.62rem;
  color: var(--muted, #aaa);
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  min-height: var(--header-chrome-venue-line-h);
  max-height: var(--header-chrome-venue-line-h);
  line-height: 1.15;
  overflow: hidden;
}

.venue-line-row {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  max-width: 100%;
}

.venue-line-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.venue-line .venue-tag,
.staff-header-venue .venue-tag,
.chef-bday-modal-header-top .venue-tag {
  color: var(--accent, #C5A059);
  font-weight: 600;
  font-size: 0.76rem;
}

.venue-line .venue-sep,
.staff-header-venue .venue-sep,
.chef-bday-modal-header-top .venue-sep {
  opacity: 0.45;
  padding: 0 3px;
}

.venue-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  outline: none;
  border: none;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
}

.venue-status-dot.open {
  background: #27ae60;
  box-shadow: 0 0 0 2px rgba(39, 174, 96, 0.22);
}

.venue-status-dot.closed {
  background: #e5484d;
  box-shadow: 0 0 0 2px rgba(229, 72, 77, 0.22);
}

.venue-status-dot:focus-visible {
  box-shadow: 0 0 0 2px var(--accent, #C5A059);
}

.header-brand-logo-wrap,
.header-center .header-brand-logo-wrap,
.header-center a.header-brand-logo-wrap,
.header-top .brand.header-brand-logo-wrap,
.header-top .header-center .brand.header-brand-logo-wrap,
.chef-bday-modal-header-top .brand.header-brand-logo-wrap,
.chef-bday-modal-header-top .staff-header-brand .header-brand-logo-wrap,
body.guest-menu .dish-modal-brand-overlay .header-brand-logo-wrap,
.sheet.order-sheet[data-order-sheet] .order-sheet-header-top .header-brand-logo-wrap,
.info-modal-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--header-chrome-logo-row-h);
  min-height: var(--header-chrome-logo-row-h);
  max-height: var(--header-chrome-logo-row-h);
  box-sizing: border-box;
  font-size: 0;
  line-height: 0;
}

/* Logo image — one size everywhere */
.header-brand-logo,
.header-center .header-brand-logo,
.header-top .header-brand-logo,
.header-top .header-brand-logo,
.chef-bday-modal-header-top .header-brand-logo,
body.guest-menu .dish-modal-brand-overlay .header-brand-logo,
.sheet.order-sheet[data-order-sheet] .order-sheet-header-top .header-brand-logo,
.info-modal-brand-logo {
  display: block;
  height: var(--header-chrome-logo-h);
  width: auto;
  max-width: var(--header-chrome-logo-max-w);
  object-fit: contain;
}

body.guest-menu .dish-modal-brand-overlay .header-brand-logo {
  max-width: min(calc(100vw - 96px), var(--header-chrome-logo-max-w));
}

body.guest-menu .dish-modal-brand-overlay {
  position: absolute;
  top: var(--header-chrome-pad-y-safe);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}

/* Floating close: fullsheet-modal.css */

/* Sticky pages: header band metrics only (divider on sticky wrapper) */
body.staff-page-cashier .cashier-sticky .torbeens-header > .header.staff-header-wrap,
body.staff-page-cashier .cashier-sticky > .header.staff-header-wrap,
body.staff-page-admin .admin-sticky > .header.staff-header-wrap,
body.staff-page-chef .chef-sticky > .header.staff-header-wrap,
body.staff-page-qr .qr-sticky > .header.staff-header-wrap,
body.staff-page-cashier .restaurant-gate-sticky > .header.staff-header-wrap,
body[class*="staff-page-"] .staff-pin-gate-sticky > .header.staff-header-wrap,
body.staff-page-cashier .cashier-gate-sticky > .header.staff-header-wrap {
  border-bottom: none;
  height: var(--header-chrome-band-h);
  min-height: var(--header-chrome-band-h);
  max-height: var(--header-chrome-band-h);
  padding: var(--header-chrome-pad-y-safe) var(--header-chrome-pad-x) 0;
}

/* Torbeen's header — shared chrome block (guest, staff pages, modals) */
.torbeens-header {
  background: var(--bg, #111);
  box-sizing: border-box;
}

.torbeens-header--modal {
  position: relative;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border, #333);
}

.torbeens-header--modal > .header.staff-header-wrap {
  border-bottom: none;
  background: transparent;
}

.torbeens-header__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px var(--header-chrome-pad-x) 12px;
  /* Крестик закрытия висит справа, поэтому зеркалим его отступ слева: иначе текст
     центрировался бы со смещением влево от настоящей середины окна. */
  padding-left: calc(var(--header-chrome-pad-x) + 22px);
  padding-right: calc(var(--header-chrome-pad-x) + 22px);
  border-top: 1px solid var(--border, #333);
  min-height: 44px;
  box-sizing: border-box;
}

.torbeens-header__title h2 {
  font-family: var(--font-brand, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  color: var(--accent, #C5A059);
  /* Заголовок окна — надзаголовок, а не имя бренда: капитель со сжатым кеглем
     читается как подпись и не конкурирует с содержимым окна. */
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
  margin: 0;
  min-width: 0;
}

.modal.modal--torbeens-header {
  overflow: hidden;
  padding: 0;
  max-height: 90vh;
}

.modal--torbeens-header .modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
}

body.staff-page-cashier .modal-overlay:not(.hidden) .torbeens-header--modal .modal-close {
  position: absolute;
  top: var(--header-chrome-modal-close-top, 12px);
  right: var(--header-chrome-pad-x, 16px);
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

body.staff-page-cashier .modal-overlay:not(.hidden) .torbeens-header--modal .modal-close:hover,
body.staff-page-cashier .modal-overlay:not(.hidden) .torbeens-header--modal .modal-close:active {
  background: rgba(0, 0, 0, 0.65);
}

body.staff-page-cashier .tm-variant-overlay:not(.hidden) .torbeens-header--modal .modal-close {
  position: absolute;
  top: var(--header-chrome-modal-close-top, 12px);
  right: var(--header-chrome-pad-x, 16px);
  z-index: 4;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  font-size: 1.35rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

body.staff-page-cashier .tm-variant-overlay:not(.hidden) .torbeens-header--modal .modal-close:hover,
body.staff-page-cashier .tm-variant-overlay:not(.hidden) .torbeens-header--modal .modal-close:active {
  background: rgba(0, 0, 0, 0.65);
}