/* EOR Floor Plans — palette taken from the official Eye of Riyadh logo
   artwork: #F9A71D amber, #00BDF2 cyan, #231F20 charcoal. */

:root {
  --eor-amber: #F9A71D;
  --eor-amber-light: #FCB116;
  --eor-amber-dark: #C97F04;
  --eor-cyan: #00BDF2;
  --eor-cyan-dark: #0C7FA8;
  --eor-charcoal: #231F20;

  --bg: #EFEFF1;
  --card: #FFFFFF;
  --border: #E3E3E6;
  --border-strong: #D2D2D6;
  --text: #231F20;
  --muted: #78787E;

  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(35, 31, 32, 0.06);
  --shadow: 0 2px 12px rgba(35, 31, 32, 0.09);
  --shadow-lg: 0 12px 34px rgba(35, 31, 32, 0.20);
  --topbar-h: 62px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body { display: flex; flex-direction: column; overflow: hidden; }

button, input, select, textarea { font-family: inherit; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible {
  outline: 2px solid var(--eor-cyan);
  outline-offset: 1px;
}

/* ================= Topbar ================= */

.topbar {
  flex: none;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 0 20px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(249, 167, 29, 0.9), var(--shadow-sm);
  position: relative;
  z-index: 60;
}

.brand { display: flex; align-items: center; gap: 14px; flex: none; }
.brand-logo { height: 30px; width: auto; flex: none; }
.brand-rule { width: 1px; height: 26px; background: var(--border-strong); flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.25; white-space: nowrap; }
.brand-text strong { font-size: 14.5px; letter-spacing: -0.015em; }
.brand-text span { font-size: 10.5px; color: var(--muted); letter-spacing: 0.01em; }

.plan-picker { display: flex; align-items: center; gap: 9px; }
.plan-picker > span {
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); font-weight: 700;
}
.plan-picker select {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 30px 8px 12px;
  font-size: 13px; font-weight: 600;
  background: var(--card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='7'><path d='M1 1l4 4 4-4' stroke='%2378787E' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 11px center;
  color: var(--text);
  min-width: 232px;
  appearance: none;
  cursor: pointer;
}
.plan-picker select:hover { border-color: var(--eor-amber); }

.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; }

/* --- save status --- */
.save-status {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700;
  padding: 0 10px 0 4px;
  white-space: nowrap;
}
.save-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; flex: none;
  transition: background .15s ease;
}
.save-status.ok { color: #4C8C3A; }
.save-status.ok::before { background: #4C8C3A; }
/* Settles to a quiet dot a moment after saving, so it isn't shouting
   "Saved" after every keystroke — the dot alone is the reassurance. */
.save-status.ok.quiet { color: var(--muted); }
.save-status.ok.quiet::before { background: #9AC98A; }
.save-status.error { color: #C0392B; cursor: help; }
.save-status.error::before { background: #C0392B; }

/* ================= Buttons ================= */

.btn {
  border: none; border-radius: var(--radius-sm);
  padding: 8px 13px; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .14s ease, border-color .14s ease;
}
.btn-block { width: 100%; }
.btn-secondary { background: #EAF7FC; color: var(--eor-cyan-dark); border: 1px solid #C9ECF8; }
.btn-secondary:hover { background: #D8F0FA; }
.btn-ghost { background: var(--card); color: var(--text); border: 1px solid var(--border-strong); }
.btn-ghost:hover { background: #F6F6F7; border-color: var(--muted); }
.btn-danger { background: #FDECEB; color: #C0392B; border: 1px solid #F6C8C3; }
.btn-danger:hover { background: #FBDBD8; }
.btn-danger-ghost { background: var(--card); color: #C0392B; border: 1px solid #F0C9C5; }
.btn-danger-ghost:hover { background: #FDECEB; }

/* Official Saudi Riyal sign (U+20C1, Unicode 17 / Sept 2025). Embedded as a
   single-glyph webfont so it renders correctly regardless of whether the
   viewer's OS has caught up yet — font: emran-alhaddad/Saudi-Riyal-Font
   (open source), scoped to just this character via .sar-symbol so normal
   text and digits are unaffected. */
@font-face {
  font-family: 'SaudiRiyal';
  src: url(data:font/woff2;base64,d09GMgABAAAAAAT0AA0AAAAAC2QAAASeAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGhgGYACCZhEICocEhXcLGgABNgIkAzAEIAWHLgeBBRvVCSCOwnEvSojJ5ORhKiWep9/bPPc32mdnUaW+wXeJKlVIJCg8CIfcQWViVHSETJeZqNqErgZPp/28VaAy13pTkXvNQZv4IHCbHD9In+dyevP5Cfy7K+slmC3ybGwuLx2T18L1PKA2pnPbFCvQCdbLLSJq0N0AB31thACv29f9APD1k6ZUJ0tAD4aoQDO8bhmyFC1UI+oCuAO15AO2Q8G5MwSqDefwClCi9Be6wX9nQPsMEKAeA1AQUIMaLCGACzQCljAqQE+OwoCjcu0D6kv8/x/sl6sfkIpP/3/9/WpgdgoEQAeYoIR0QACkAlSghuJ31w3LAXyr/P+vAvSAOTCAzAK5B6CBQzRNhcGgGoYLL+dYrlnFKgu9iOcEj646uXaI2W3sJ9lTI4EetCRQAgulmH6SYMZBziQb1xBipCaQaS6l0vWRWr1q1aFDnTA52r1fr8fUTpXKWvLQ4KnSwb0+PppFHxtVC1at2uXrO9JOSIUWTzV+QWdXLT0K2uhG0jpJEiZs6WjSR9KuG9Zv1u+P2q1UujpcsT1L3dNzqhQszNevVtPHSYnHKlXoGEWtDpi6yX/duUgVJGGvzwIypcpt/Ni4Jly1atcq32n6zc+V4+ld7k6gz53h7vgOHLKN10L3KkUS7kouYUcPhGVony1zOi//ctkTdm/3kAqubk+P0MptoSFlXH1d5ZyIwuAyWX7+z+picypWzAjs1xCbVaGJLgqt5qqbqg/Y6ntEjm76aneF9Yjvano5HXrdrjSkllfHmVOk+o/IY8O89mBNc9Lbwcoe28z7DRmFzSmN4wbrT5X+B/E2SdMQn2S1PFaUu1OkJfIXKxVt+w1pFa2xjdll47yrvsvczl7/4ETotcmj56Zkzxs3b+7w0ZMNx9wX7srQ8rIsghhH+yj839cG7rwS/FVUQnWXgYUdjUP+HL5C8fybvBJ6ZQRWMKOhfsi7ZqHZEz4e3TZxMtEqXR8kGN0n/5/a9jk9IKKiFlmPtlWvYKy8rF34efCtxR9snP0uNWnu7Jj8kj9HHV1INdJDNT2jhozoFXwqYPLE+VjfWDBpsq7FUrJmU3brXPVwppI6gm8PCAjcX9RU3FdX8KtcJcczkIBc+4K9C8ZdxNPL/LtD9KcF19fLgOpBtODVPMNO+5d0/C2p2BEBPefddskgYA8Aa9mMABgKQwChUg9RkbGjprcJDW9v0SJ+QccrQRhDkk6Os7mYoEtPTCIZQk6xo9ALyCFMI3lIDtjnGFLlm9EzZJUcNNIoAAUACL10ULSMoCUYAkaUk2BRfgAnwm+QoZJMytlMKIQkH0pUBpAqdhjUMjIGGlTuklr2MTzoI92UJ23+wONVGmQ40WC8UgM5iCwsRBYopXLQcHEwXzrQIVosogW4IRrFwqmv4ZzGEQ2Em8tRFmff4c5x4kDgmpXdKAOJhsMnRWOAIg8/SVZ+YGXZ5ee18vMkZYbYopod2PHxMh22lbggxy4aiTp8UzunkRxGMUliNsQgyayTKk8k+l05RzpGmT7YjNb5FSWKKTxHRVTCPj0ISoRIUaJDEZowhCWctufXnHPwkJG/e0pZDQA=) format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
.sar-symbol {
  font-family: 'SaudiRiyal', "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ================= Backup reminder ================= */

/* A dismissible strip, not a modal — backups are offered, never forced.
   Downloading always needs an explicit click (the platform shows its own
   confirmation before any file is saved), so this exists purely to remind,
   never to trigger a save on its own. */
.backup-banner {
  flex: none;
  display: flex; align-items: center; gap: 12px;
  padding: 8px 20px;
  background: #FFF6E6;
  border-bottom: 1px solid #F5D9A0;
  font-size: 12.5px;
  color: #8A6100;
}
.backup-banner[hidden] { display: none; }
#backup-banner-text { flex: 1; }
.backup-banner-dismiss {
  border: none; background: none; color: #8A6100;
  font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px;
  opacity: 0.7;
}
.backup-banner-dismiss:hover { opacity: 1; }

/* ================= Workspace shell ================= */

.workspace {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 16px;
  padding: 16px;
}

/* ================= Sidebar ================= */

.sidebar {
  width: 292px;
  flex: none;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.side-tabs {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 6px;
  background: #F7F7F8;
  border-bottom: 1px solid var(--border);
}
.side-tab {
  border: none; background: none;
  padding: 8px 6px; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--muted);
  cursor: pointer;
  transition: background .14s ease, color .14s ease;
}
.side-tab:hover { color: var(--text); background: rgba(249, 167, 29, 0.12); }
.side-tab.active { background: var(--eor-charcoal); color: #fff; }

.side-panel { display: none; padding: 18px; overflow-y: auto; }
.side-panel.active { display: block; }

/* --- event details --- */

.event-card { text-align: center; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.event-logo {
  height: 46px; width: auto; max-width: 100%;
  margin-bottom: 14px;
}
.event-logo[hidden] { display: none; }
.event-card h1 {
  margin: 0; font-size: 16px; font-weight: 700;
  line-height: 1.3; letter-spacing: -0.01em;
}
.event-occasion {
  margin: 7px 0 0;
  display: inline-block;
  background: rgba(249, 167, 29, 0.15);
  color: var(--eor-amber-dark);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
/* The pill already carries its own padding/radius — the generic
   .editable-field offsets would fight it, so this resets to match. */
.event-occasion.editable-field { margin: 7px 0 0; padding: 4px 12px; border-radius: 20px; }
.event-occasion.editable-field:hover { border-radius: 20px; }

.detail-list { margin: 16px 0 0; }
.detail-list div { padding: 9px 0; border-bottom: 1px solid #F0F0F2; }
.detail-list div:last-child { border-bottom: none; }
.detail-list dt {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--muted); font-weight: 700; margin-bottom: 3px;
}
.detail-list dd { margin: 0; font-size: 12.5px; line-height: 1.45; }

/* --- click-to-edit affordance, shared by every Event Details field --- */

.editable-field {
  cursor: text;
  border-radius: 5px;
  margin: -3px -5px;
  padding: 3px 5px;
  transition: background .12s ease;
}
.editable-field:hover {
  background: rgba(0, 189, 242, 0.08);
  box-shadow: inset 0 0 0 1px rgba(0, 189, 242, 0.25);
}
.editable-field:hover::after {
  content: '✎';
  font-size: 0.85em;
  color: var(--eor-cyan-dark);
  margin-left: 6px;
  opacity: 0.8;
}
.editable-field:empty::before { content: '—'; color: var(--muted); }
.editable-field input.inline-edit {
  all: unset;
  display: block;
  width: 100%;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  border-bottom: 1.5px solid var(--eor-cyan);
  background: rgba(0, 189, 242, 0.06);
  padding: 1px 2px;
}
/* h1/badge/price contexts each set their own size — the input just inherits
   whichever one it lands in, so one rule covers every field. */

.price-block {
  margin-top: 16px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.price {
  background: var(--eor-charcoal);
  border-radius: var(--radius-sm);
  padding: 11px 10px;
  text-align: center;
}
.price b { display: block; color: var(--eor-amber); font-size: 14px; line-height: 1.2; }
/* Price tiles sit on the dark charcoal fill, so the edit affordance needs
   its own, lighter contrast rather than the sidebar's default cyan-on-white. */
.price .editable-field:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 0 0 1px rgba(0, 189, 242, 0.5);
}
.price .editable-field:hover::after { color: var(--eor-cyan); }
.price .editable-field input.inline-edit {
  background: rgba(255, 255, 255, 0.12);
  border-bottom-color: var(--eor-cyan);
}
.price span {
  font-size: 9px; text-transform: uppercase; letter-spacing: 0.07em;
  color: rgba(255,255,255,0.55);
}

/* --- floor plan properties --- */

.tool-group { margin-bottom: 24px; }
.tool-group:last-child { margin-bottom: 0; }
.tool-group h3 {
  margin: 0 0 12px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--eor-amber-dark); font-weight: 700;
}
.hint { font-size: 11.5px; color: var(--muted); margin: 12px 0; line-height: 1.5; }

.slider { display: block; margin-bottom: 15px; font-size: 12px; color: var(--muted); }
.slider > span { display: flex; justify-content: space-between; margin-bottom: 5px; }
.slider b { color: var(--text); font-weight: 700; }
.slider input[type="range"] { width: 100%; accent-color: var(--eor-amber); }

.check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: var(--muted);
  margin-top: 14px; cursor: pointer;
}
.check input { accent-color: var(--eor-cyan); }

.overflow-warn {
  margin: 12px 0 0;
  background: #FFF6E6;
  border: 1px solid #F5D9A0;
  border-left: 3px solid var(--eor-amber);
  border-radius: 7px;
  padding: 9px 11px;
  font-size: 11.5px; line-height: 1.5; color: #8A6100;
}
.overflow-warn[hidden] { display: none; }

/* ================= Content ================= */

.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.content-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 9px 12px;
  flex-wrap: wrap;
}

.seg {
  display: flex;
  background: #F1F1F3;
  border-radius: 9px;
  padding: 3px;
  flex: none;
}
.seg-btn {
  border: none; background: none;
  padding: 8px 18px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; color: var(--muted);
  cursor: pointer;
  transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.active {
  background: var(--eor-amber);
  color: #fff;
  box-shadow: var(--shadow-sm);
}

.find-guest { position: relative; flex: 1; min-width: 200px; max-width: 340px; }
.find-guest input {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 8px 74px 8px 32px;
  font-size: 12.5px;
  background: var(--card);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'><circle cx='5.5' cy='5.5' r='4' stroke='%2378787E' stroke-width='1.5' fill='none'/><path d='M8.7 8.7L12 12' stroke='%2378787E' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat: no-repeat;
  background-position: left 10px center;
  appearance: none;
}
/* The native clear button is unreliable to hit and doesn't restyle, so it is
   replaced with .find-clear below. */
.find-guest input::-webkit-search-cancel-button,
.find-guest input::-webkit-search-decoration { -webkit-appearance: none; display: none; }

.find-count {
  position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; font-weight: 700; color: var(--eor-amber-dark);
  pointer-events: none; white-space: nowrap;
}
.find-clear {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px; padding: 0;
  border: none; border-radius: 50%;
  background: #E6E6E9; color: var(--muted);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.find-clear:hover { background: var(--eor-charcoal); color: #fff; }
.find-clear[hidden] { display: none; }

/* --- stat tiles with inline bars --- */

.stats { display: flex; gap: 8px; margin-left: auto; flex: none; }
.stat {
  background: #F7F7F8;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 7px 12px 8px;
  min-width: 126px;
}
.stat-label {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px;
  font-size: 8.5px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--muted); font-weight: 700;
  margin-bottom: 2px;
}
.stat-pct { color: var(--eor-amber-dark); }
.stat b { display: block; font-size: 15px; line-height: 1.2; color: var(--eor-charcoal); font-weight: 700; }
.stat b i { font-style: normal; font-size: 11px; font-weight: 600; color: var(--muted); }
.stat-bar {
  margin-top: 5px; height: 4px; border-radius: 2px;
  background: #E2E2E6; overflow: hidden;
}
.stat-bar span {
  display: block; height: 100%; border-radius: 2px;
  background: var(--eor-amber);
  transition: width .2s ease;
}
.stat-bar.cyan span { background: var(--eor-cyan); }

/* ================= Views ================= */

.view { display: none; flex: 1; min-height: 0; }
.view.active { display: flex; flex-direction: column; }

.chart-viewport {
  flex: 1;
  min-height: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 12px;
}

.chart-canvas { position: relative; flex: none; }

#plan-image {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  user-select: none; pointer-events: none;
}
#plan-image[hidden] { display: none; }

.image-missing {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
  color: var(--muted); font-size: 13px; line-height: 1.6;
  background: repeating-linear-gradient(45deg, #fafafa, #fafafa 10px, #f2f2f2 10px, #f2f2f2 20px);
}
.image-missing[hidden] { display: none; }

/* Guides fade in while an aisle slider is being dragged, then fade out. */
.aisle-guide {
  position: absolute;
  background: rgba(0, 189, 242, 0.13);
  border-top: 1px dashed rgba(0, 189, 242, 0.55);
  border-bottom: 1px dashed rgba(0, 189, 242, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s ease;
}
#aisle-layer.showing .aisle-guide { opacity: 1; }

.aisle-tag {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: var(--eor-cyan); color: #fff;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 10px;
  white-space: nowrap;
}

/* --- tables --- */

.table-node { position: absolute; cursor: pointer; z-index: 3; }
.table-node.vacant { opacity: 0.3; }          /* nobody seated yet */
.table-node:hover { z-index: 20; }
.table-node:hover .table-body { border-color: var(--eor-cyan); }
.table-node.open { z-index: 21; }
.table-node.open .table-body {
  border-color: var(--eor-cyan);
  box-shadow: 0 0 0 3px rgba(0, 189, 242, 0.4);
}
.table-node.search-hit { opacity: 1; z-index: 19; }
.table-node.search-hit .table-body {
  border-color: var(--eor-amber);
  box-shadow: 0 0 0 4px rgba(249, 167, 29, 0.55);
}

.table-body {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid var(--eor-charcoal);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: var(--eor-charcoal); line-height: 1;
}

.seat {
  position: absolute;
  background: var(--eor-amber);
  border: 1px solid var(--eor-charcoal);
  border-radius: 2px;
}
.seat.open { background: #DDD; opacity: 0.55; }
/* Held by a reserved table but not yet matched to a named guest. */
.seat.held { background: var(--eor-cyan); }

.table-node.reserved .table-body {
  background: #E8F8FE;
  border-color: var(--eor-cyan-dark);
  color: var(--eor-cyan-dark);
}

/* ================= Hover card + editable popover ================= */

.tooltip {
  position: fixed;
  background: var(--eor-charcoal);
  color: #fff;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  z-index: 200;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  max-width: 230px;
}
.tooltip[hidden] { display: none; }
.tooltip strong { color: var(--eor-amber); display: block; margin-bottom: 5px; }
.tooltip .t-open { color: #8E8E93; font-style: italic; }

.popover {
  position: fixed;
  width: 252px;
  background: var(--card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 210;
  overflow: hidden;
}
.popover[hidden] { display: none; }

.pop-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px;
  padding: 11px 12px;
  background: var(--eor-charcoal);
  color: #fff;
}
.pop-head strong { display: block; font-size: 13.5px; color: var(--eor-amber); }
.pop-head span { font-size: 11px; color: rgba(255,255,255,0.65); }
.pop-close {
  border: none; background: none; color: rgba(255,255,255,0.7);
  font-size: 19px; line-height: 1; cursor: pointer; padding: 0 2px;
}
.pop-close:hover { color: #fff; }

.pop-reserve {
  padding: 9px 10px;
  background: #F7F7F8;
  border-bottom: 1px solid var(--border);
}
.pop-reserve .check { margin: 0 0 7px; font-size: 11.5px; color: var(--text); font-weight: 600; }
.pop-reserve input[type="text"] {
  width: 100%;
  border: 1px solid var(--border-strong); border-radius: 6px;
  padding: 6px 8px; font-size: 12px;
}
.pop-reserve input[type="text"]:disabled { background: #EDEDEF; color: var(--muted); }

.pop-guests {
  list-style: none;
  margin: 0; padding: 8px 8px 4px;
  max-height: 210px; overflow-y: auto;
}
.pop-guests li {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 6px;
  font-size: 12.5px;
}
.pop-guests li:hover { background: #F6F6F7; }
.pop-guests .seat-no {
  width: 17px; height: 17px; flex: none;
  border-radius: 50%;
  background: var(--eor-amber);
  color: #fff; font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pop-guests .g-name {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  line-height: 1.3;
}
.pop-guests .g-name small { display: block; color: var(--muted); font-size: 10.5px; }
.pop-guests .g-remove {
  border: none; background: none; color: var(--muted);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px;
  opacity: 0; transition: opacity .12s ease;
}
.pop-guests li:hover .g-remove { opacity: 1; }
.pop-guests .g-remove:hover { color: #C0392B; }
.pop-empty { padding: 10px 8px; font-size: 12px; color: var(--muted); font-style: italic; }

.pop-add {
  width: calc(100% - 16px);
  margin: 4px 8px 8px;
  border: 1px solid var(--border-strong);
  border-radius: 7px;
  padding: 7px 9px;
  font-size: 12.5px;
}
.pop-add:disabled { background: #F6F6F7; color: var(--muted); }
.pop-foot { padding: 0 8px 9px; }

/* ================= Guest list ================= */

.table-list-wrap {
  flex: 1;
  min-height: 0;
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.table-list { width: 100%; border-collapse: separate; border-spacing: 0; }
.table-list th, .table-list td {
  border-bottom: 1px solid var(--border);
  padding: 7px 12px; font-size: 12.5px; text-align: left;
  vertical-align: middle;
}
.table-list tr:last-child td { border-bottom: none; }
.table-list th {
  background: #F7F7F8; color: var(--muted);
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700;
  position: sticky; top: 0; z-index: 5;
}
.table-list .col-num { width: 74px; }
.table-list .col-seated { width: 96px; }
.table-list td.tnum { font-weight: 800; color: var(--eor-amber-dark); font-size: 14px; }
.table-list td.seated { color: var(--muted); white-space: nowrap; }
.table-list tr.is-full td.seated { color: var(--eor-amber-dark); font-weight: 700; }
.table-list tr.row-hit { background: rgba(249, 167, 29, 0.09); }
.empty-row { color: var(--muted); font-style: italic; padding: 18px 12px; }

/* --- reserve strip + 8 seat slots per table --- */

.reserve-strip {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 9px; padding-bottom: 9px;
  border-bottom: 1px dashed var(--border);
  flex-wrap: wrap;
}
.reserve-strip .check { margin: 0; font-size: 11.5px; font-weight: 600; color: var(--text); white-space: nowrap; }
.reserve-strip .res-company {
  flex: 1; min-width: 150px; max-width: 300px;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 8px; font-size: 12px;
}
.reserve-strip .res-company:disabled { background: #F4F4F5; color: var(--muted); }

tr.is-reserved { background: rgba(0, 189, 242, 0.06); }
tr.is-reserved td.seated { color: var(--eor-cyan-dark); font-weight: 700; }

.slot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.slot { display: grid; grid-template-columns: 17px 1fr 1fr; gap: 6px; align-items: center; }
.slot-no {
  width: 17px; height: 17px; border-radius: 50%;
  background: #E6E6E9; color: var(--muted);
  font-size: 9.5px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.slot.filled .slot-no { background: var(--eor-amber); color: #fff; }
.slot input {
  min-width: 0; width: 100%;
  border: 1px solid var(--border); border-radius: 6px;
  padding: 5px 7px; font-size: 12px;
}
.slot input.slot-co { color: var(--muted); }
.slot input:focus { outline: 2px solid var(--eor-cyan); outline-offset: -1px; border-color: transparent; }

/* ================= Print ================= */

@media print {
  body { overflow: visible; height: auto; }
  .topbar, .backup-banner, .side-tabs, #side-props, .seg, .find-guest, .tooltip, .popover { display: none !important; }
  .workspace { display: block; padding: 0; }
  .sidebar { width: 100%; border: none; box-shadow: none; border-bottom: 2px solid var(--eor-amber); border-radius: 0; }
  .side-panel { display: block !important; }
  .event-card { text-align: left; }
  .content-toolbar { border: none; box-shadow: none; padding: 8px 0; }
  .chart-viewport { border: none; box-shadow: none; overflow: visible; }
  .view { display: flex !important; }
}

/* Tight desktop widths: shed the least important chrome before wrapping. */
@media (max-width: 1320px) {
  .topbar { gap: 16px; padding: 0 14px; }
  .brand-text span, .plan-picker > span { display: none; }
  .plan-picker select { min-width: 190px; }
  .stats .stat { min-width: 58px; padding: 6px 9px; }
}

@media (max-width: 1080px) {
  body { overflow: auto; height: auto; }
  .workspace { flex-direction: column; height: auto; }
  .sidebar { width: 100%; }
  .side-panel { max-height: none; }
  .view.active { min-height: 60vh; }
  .chart-viewport { min-height: 60vh; }
  .content-toolbar .stats { margin-left: 0; width: 100%; }
}