/* ============================================================
   Jaresi – restaurant station UI  (light + dark, tablet-first)
   Premium reservation-tool look (Quandoo / SevenRooms family)
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Playfair+Display:wght@600;700;800&family=Sora:wght@700;800&display=swap");

:root {
  --bg: #f5f6f9;
  --surface: #ffffff;
  --surface-2: #f1f3f7;
  --text: #14151b;
  --muted: #6b7180;
  --border: #e7e9ef;
  --primary: #d61f57;        /* berry crimson — brand accent */
  --primary-d: #b01548;
  --ring: rgba(214,31,87,.22);
  --green: #16a34a;
  --yellow: #f59e0b;
  --red: #e11d48;            /* seated / danger */
  --shadow: 0 1px 2px rgba(16,18,30,.05), 0 2px 6px rgba(16,18,30,.05);
  --shadow-md: 0 2px 6px -2px rgba(16,18,30,.08), 0 8px 22px -8px rgba(16,18,30,.16);
  --shadow-lg: 0 4px 12px -4px rgba(16,18,30,.08), 0 22px 52px -16px rgba(16,18,30,.26);
  --chair: #c4ccda;          /* upholstered-chair neutral on the floor map */
  --r: 14px;
}
body.dark {
  --bg: #0d0f15;
  --surface: #161a22;
  --surface-2: #1e2330;
  --text: #e8e9ef;
  --muted: #9aa1b2;
  --border: #29303d;
  --primary: #f25d84;
  --primary-d: #e63e6c;
  --ring: rgba(242,93,132,.25);
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 2px 8px rgba(0,0,0,.35);
  --shadow-md: 0 6px 18px -6px rgba(0,0,0,.55);
  --shadow-lg: 0 22px 50px -18px rgba(0,0,0,.7);
  --chair: #39414f;
}

* { box-sizing: border-box; }
/* kill the double-tap zoom delay + synthetic-event quirks on tappable UI */
button, a, .tab, .icon-btn, .fl-item, .table-el, .decor-el, .tp-item, .dp-item, .lang-btn, [onclick] { touch-action: manipulation; }
html { -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
body {
  background: var(--bg); color: var(--text); margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
  /* disable browser pull-to-refresh / overscroll bounce (station-app friendly) */
  overscroll-behavior: none;
}

/* ---------- forms + buttons ---------- */
.inp {
  width: 100%; min-width: 0; padding: .72rem .9rem; border: 1.5px solid var(--border);
  border-radius: 11px; font-size: .95rem; outline: none; font-family: inherit;
  background: var(--surface); color: var(--text); transition: border-color .15s, box-shadow .15s;
}
/* labels used as flex children in form rows must be allowed to shrink —
   otherwise date/time inputs' intrinsic width makes side-by-side fields overlap */
#modalContent label { min-width: 0; }
.inp::placeholder { color: var(--muted); opacity: .8; }
.inp:focus { border-color: var(--primary); box-shadow: 0 0 0 4px var(--ring); }
select.inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7180' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem; }

button { font-family: inherit; }
.btn-primary, .btn-secondary, .btn-danger {
  font-weight: 600; font-size: .92rem; border-radius: 11px; cursor: pointer;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, filter .15s ease;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
}
.btn-primary { background: linear-gradient(180deg, var(--primary), var(--primary-d)); color: #fff; padding: .7rem 1.15rem; border: 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 8px -2px var(--ring); }
.btn-primary:hover { filter: brightness(1.05); box-shadow: inset 0 1px 0 rgba(255,255,255,.18), var(--shadow-md); }
.btn-primary:active { transform: translateY(1px); }
.btn-secondary { background: var(--surface); color: var(--text); padding: .66rem 1rem; border: 1.5px solid var(--border); }
.btn-secondary:hover { background: var(--surface-2); border-color: var(--muted); }
.btn-secondary:active { transform: translateY(1px); }
.btn-danger { background: var(--red); color: #fff; padding: .66rem 1rem; border: 0; }
.btn-danger:hover { filter: brightness(1.05); }

.card { background: var(--surface); border-radius: var(--r); padding: 1.15rem; box-shadow: var(--shadow); border: 1px solid var(--border); }

.auth-tab { color: var(--muted); transition: color .15s, box-shadow .15s, background .15s; }
.auth-tab.active { background: var(--surface); color: var(--primary-d); box-shadow: var(--shadow); }

/* language switch */
.lang-switch { display: inline-flex; background: var(--surface-2); border-radius: 9999px; padding: 2px; }
.lang-btn { font-size: .72rem; font-weight: 600; color: var(--muted); padding: .2rem .55rem; border-radius: 9999px; border:0; background:transparent; cursor:pointer; }
.lang-btn.active { background: var(--surface); color: var(--primary-d); box-shadow: var(--shadow); }
.lang-select { font-size: .72rem; font-weight: 600; color: var(--text); padding: .2rem .4rem; border-radius: 9999px; border: 0; background: transparent; cursor: pointer; }

/* ---------- badges ---------- */
.badge { font-size: .68rem; padding: .2rem .6rem; border-radius: 9999px; font-weight: 700; letter-spacing: .02em; display: inline-flex; align-items: center; gap: .25rem; }
.badge.booked    { background: rgba(245,158,11,.16); color: #b45309; }
.badge.seated    { background: rgba(225,29,72,.14);  color: #be123c; }
.badge.done      { background: rgba(107,113,128,.18); color: #475569; }
.badge.pending   { background: rgba(214,31,87,.14); color: var(--primary-d); }
.badge.cancelled { background: rgba(148,163,184,.22); color: #64748b; }
.badge.no_show   { background: rgba(239,68,68,.16); color: #b91c1c; }
.badge.owner     { background: rgba(22,163,74,.16); color: #047857; }
.badge.role      { background: var(--surface-2); color: var(--muted); border:1px solid var(--border); font-weight: 600; }

/* ---------- top bar ---------- */
.topbar {
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border); padding: .6rem 1.1rem;
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; position: sticky; top: 0; z-index: 20;
}
.brand {
  /* serif wordmark = hospitality elegance; CJK text falls back to Inter/system sans */
  font-family: "Playfair Display", "Sora", "Inter", serif; font-size: 1.4rem; font-weight: 700; letter-spacing: 0;
  color: var(--text); display: inline-flex; align-items: center; gap: .5rem;
}
.brand::before {
  content: ""; width: 1.4rem; height: 1.4rem; border-radius: 7px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--primary), #ff7aa2);
  box-shadow: 0 2px 8px -2px var(--ring);
}
.view-tabs { display: flex; gap: .2rem; background: var(--surface-2); padding: 4px; border-radius: 12px; }
.tab { padding: .45rem .95rem; border-radius: 9px; font-weight: 600; color: var(--muted); border:0; background:transparent; cursor:pointer; font-size:.88rem; transition: color .15s, box-shadow .15s, background .15s; }
.tab:hover { color: var(--text); }
.tab.active { background: var(--surface); color: var(--primary-d); box-shadow: var(--shadow); }
.icon-btn { width: 40px; height: 40px; border-radius: 11px; border:1.5px solid var(--border); background: var(--surface); color: var(--text); cursor:pointer; font-size:1.1rem; transition: background .15s, border-color .15s; }
.icon-btn:hover { background: var(--surface-2); }

/* date nav */
.date-nav { display:flex; align-items:center; gap:.4rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: .25rem; box-shadow: var(--shadow); }
.date-nav .inp { width: auto; padding:.4rem .55rem; border: 0; box-shadow: none; }
.date-nav .inp:focus { box-shadow: none; }
.date-nav .icon-btn { width: 34px; height: 34px; border: 0; background: transparent; font-size: 1.25rem; }
.date-nav .icon-btn:hover { background: var(--surface-2); }

/* ---------- auth screen ---------- */
#authScreen {
  background:
    radial-gradient(1100px 520px at 12% -8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 55%),
    var(--bg);
}
#authScreen .card { box-shadow: var(--shadow-lg); border-radius: 20px; }

/* ---------- Timeline grid ---------- */
.tl-wrap { position: relative; overflow: auto; max-height: calc(100vh - 168px); border:1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 10px 30px -20px rgba(16,18,30,.26); }
.tl-head { display: flex; position: sticky; top: 0; z-index: 5; background: var(--surface); border-bottom:1px solid var(--border); height: 34px; }
.tl-now { position: absolute; top: 0; width: 2px; background: var(--primary); z-index: 7; pointer-events: none; }
.tl-now::before { content:""; position:absolute; top:0; left:-4px; width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow: 0 0 0 3px var(--ring); }
.tl-sel { position: absolute; top: 0; width: 2px; background: var(--yellow); opacity: .85; z-index: 6; pointer-events: none; }
.tl-sel::before { content:""; position:absolute; top:0; left:-3px; width:8px; height:8px; border-radius:50%; background:var(--yellow); }
.tl-track { cursor: pointer; }
.tl-track:hover { background-color: color-mix(in srgb, var(--primary) 5%, transparent); }
.tl-corner { min-width: 124px; width:124px; position: sticky; left:0; z-index:6; background: var(--surface); border-right:1px solid var(--border); font-size:.7rem; font-weight:600; color:var(--muted); display:flex; align-items:center; justify-content:center; }
.tl-time { min-width: 64px; width:64px; text-align:center; font-size:.72rem; font-weight:500; color: var(--muted); line-height:34px; border-right:1px dashed var(--border); }
.tl-row { display:flex; border-bottom:1px solid var(--border); }
.tl-row:hover .tl-name { background: var(--surface-2); }
.tl-name { min-width:124px; width:124px; position: sticky; left:0; z-index:4; background: var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:.3rem .7rem; transition: background .15s; }
.tl-name b { font-size:.9rem; font-weight:700; } .tl-name small { color: var(--muted); font-size:.7rem; }
.tl-track { position: relative; height: 54px; flex: 0 0 auto;
  background-image: repeating-linear-gradient(90deg, transparent 0, transparent 63px, var(--border) 63px, var(--border) 64px); }
.tl-block { position:absolute; top:6px; height:42px; border-radius:11px; box-shadow:0 4px 12px -6px rgba(16,18,30,.35); padding:.25rem .5rem; color:#fff;
  overflow:hidden; cursor:grab; box-shadow: var(--shadow-md); font-size:.74rem; line-height:1.1; transition: box-shadow .15s, transform .06s; }
.tl-block:hover { box-shadow: var(--shadow-lg); }
.tl-block.booked  { background: linear-gradient(180deg, #f7a838, #f08e16); }
.tl-block.seated  { background: linear-gradient(180deg, #f25274, #e11d48); }
.tl-block.done    { background: linear-gradient(180deg, #aab2bf, #94a3b8); }
.tl-block.pending { background: linear-gradient(180deg, #ec477d, var(--primary)); }
.tl-block b { font-weight:700; } .tl-block .cov { opacity:.92; font-weight:500; }
.tl-block.dragging { opacity:.92; z-index:10; cursor:grabbing; transform: scale(1.02); box-shadow: var(--shadow-lg); }
.note-dot { position:absolute; top:4px; right:5px; width:7px; height:7px; border-radius:50%; background:#fff; box-shadow:0 0 0 2px rgba(0,0,0,.12); }

/* note popover */
.popover { position: fixed; z-index: 60; background:#0f172a; color:#fff; font-size:.75rem; padding:.55rem .7rem; border-radius:10px; max-width:240px; box-shadow: var(--shadow-lg); }

/* ---------- Floor: multi-table assign mode ---------- */
.floor-plan.assigning { outline: 2px dashed var(--primary); outline-offset: -2px; }
.floor-plan.assigning .table-el { cursor: pointer; }
.table-el.assign-on .table-top { outline: 3px solid var(--primary); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(214,31,87,.18); }
.assign-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: .6rem 1rem; background: #0f172a; color: #fff;
  box-shadow: 0 -4px 16px rgba(0,0,0,.25); font-size: .9rem; }
.assign-bar .btn-primary, .assign-bar .btn-secondary { padding: .4rem .9rem; }

/* ---------- Floor plan ---------- */
.floor-plan { position: relative; width: 100%; height: 62vh; min-height: 360px;
  background: linear-gradient(color-mix(in srgb, var(--border) 60%, transparent) 1px, transparent 1px) 0 0/44px 44px,
              linear-gradient(90deg, color-mix(in srgb, var(--border) 60%, transparent) 1px, transparent 1px) 0 0/44px 44px, var(--surface-2);
  border:1px solid var(--border); border-radius: 20px; overflow:auto; touch-action:none; box-shadow: 0 10px 30px -20px rgba(16,18,30,.26); }
.floor-scaler { position: relative; }
.floor-canvas { position: absolute; top: 0; left: 0; }

/* ---------- Floor decor (walls, bar, door…) — non-bookable layout objects ---------- */
.decor-el { position: absolute; display: flex; align-items: center; justify-content: center; gap: .25rem;
  font-size: .72rem; font-weight: 600; color: var(--muted); box-sizing: border-box; user-select: none;
  border-radius: 6px; overflow: hidden; white-space: nowrap; }
.floor-plan:not(.editing) .decor-el { pointer-events: none; } /* view mode: purely visual */
.decor-el .d-ico { font-size: 1rem; line-height: 1; }
.decor-el.door .d-ico { font-size: .72rem; } /* door strip is only ~16px tall */
.decor-el.wall     { background: #9aa1b2; border-radius: 3px; }
.decor-el.door     { background: repeating-linear-gradient(45deg, #cbd5e1, #cbd5e1 5px, #e2e8f0 5px, #e2e8f0 10px); border: 1px solid #94a3b8; }
.decor-el.bar      { background: #c8a27a; color: #3a2a18; border: 1px solid #a97f55; }
.decor-el.kitchen  { background: #fcd9b6; color: #7a4a16; border: 1px solid #e6b483; }
.decor-el.plant    { background: #cfe8cf; color: #1f5130; border: 1px solid #a8d3a8; border-radius: 50%; }
.decor-el.restroom { background: #d7d9ef; color: #3a3d70; border: 1px solid #b7bbe0; }
.decor-el.stairs   { background: repeating-linear-gradient(90deg, #d1d5db, #d1d5db 8px, #eef0f3 8px, #eef0f3 16px); border: 1px solid #b6bcc6; }
/* edit mode: overflow must be visible so the corner handles aren't clipped.
   touch-action:none beats the global "manipulation" rule — old WebViews only
   honor the target's own touch-action and would hijack drags for scrolling */
.floor-plan.editing .decor-el, .floor-plan.editing .table-el, .d-handle { touch-action: none; }
.floor-plan.editing .decor-el { cursor: move; overflow: visible; }
.floor-plan.editing .decor-el.sel { outline: 2px solid var(--primary); outline-offset: 1px; }
/* edit handles on the selected decor — sit fully OUTSIDE the corners so the
   object body stays free to grab and drag; counter-scaled (1/--fscale) so they
   keep a finger-friendly size at any zoom */
.d-handle { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: .85rem; cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.3); z-index: 12;
  transform: scale(min(1.25, calc(1 / var(--fscale, 1)))); }
.d-handle.resize { right: -28px; bottom: -28px; cursor: nwse-resize; background: var(--text); }
.d-handle.rotate { right: -28px; top: -28px; }
.d-handle.del    { left: -28px; top: -28px; background: var(--red); }
/* decor palette (edit sidebar) */
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: .4rem; }
.dp-item { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: .5rem .3rem; border: 1.5px solid var(--border);
  background: var(--surface); border-radius: 10px; cursor: pointer; font-size: .72rem; color: var(--text); }
.dp-item:hover { background: var(--surface-2); }
.dp-item .dp-ico { font-size: 1.2rem; line-height: 1; }
/* zoom controls (edit mode) */
.floor-zoom { display: flex; align-items: center; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 9px; padding: 2px; }
.floor-zoom button { border: 0; background: transparent; color: var(--text); font: inherit; font-weight: 700; cursor: pointer; border-radius: 7px; padding: .25rem .5rem; min-width: 30px; line-height: 1.1; }
.floor-zoom button:hover { background: var(--surface); }
.floor-zoom #floorZoomLabel { font-size: .78rem; font-weight: 600; min-width: 48px; color: var(--muted); }

/* floor toolbar (Quandoo-style command bar) */
.floor-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .8rem;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: .45rem .6rem; box-shadow: var(--shadow); }
.ft-logo { width: 40px; height: 40px; border-radius: 11px; border: 0; background: var(--surface-2); color: var(--text); font-size: 1.2rem; cursor: pointer; }
.ft-logo:hover { background: var(--border); }
.ft-btn { border: 1.5px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; font-size: .85rem; padding: .45rem .8rem; border-radius: 12px; cursor: pointer; white-space: nowrap; }
.ft-btn:hover { background: var(--surface-2); }
.ft-btn.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.ft-step { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.ft-step button { border: 0; background: transparent; color: var(--text); cursor: pointer; font-weight: 600; padding: .45rem .55rem; font-size: .95rem; }
.ft-step button:hover { background: var(--surface-2); }
.ft-date, .ft-time { min-width: 92px; font-size: .85rem; border-left: 1px solid var(--border) !important; border-right: 1px solid var(--border) !important; }

/* slide-in nav drawer */
.nav-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 45; opacity: 0; pointer-events: none; transition: opacity .2s; }
.nav-scrim.open { opacity: 1; pointer-events: auto; }
.nav-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 250px; background: var(--surface); border-right: 1px solid var(--border);
  z-index: 46; transform: translateX(-100%); transition: transform .22s ease; box-shadow: var(--shadow-lg); padding: 1rem .7rem; overflow-y: auto; }
.nav-drawer.open { transform: translateX(0); }
.nav-brand { font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.3rem; padding: .3rem .6rem 1rem; }
.nav-item { display: flex; align-items: center; gap: .6rem; width: 100%; text-align: left; border: 0; background: transparent; color: var(--text);
  font-weight: 600; font-size: .95rem; padding: .7rem .7rem; border-radius: 10px; cursor: pointer; }
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: var(--primary); color: #fff; }
.nav-sep { height: 1px; background: var(--border); margin: .6rem .4rem; }

/* calendar popover */
.cal-pop { position: fixed; z-index: 62; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: .8rem; width: 268px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
.cal-head button { border: 0; background: var(--surface-2); width: 30px; height: 30px; border-radius: 8px; cursor: pointer; color: var(--text); font-size: 1rem; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow { text-align: center; font-size: .68rem; color: var(--muted); padding: .2rem 0; }
.cal-day { text-align: center; padding: .4rem 0; border-radius: 8px; cursor: pointer; font-size: .82rem; border: 0; background: transparent; color: var(--text); }
.cal-day:hover { background: var(--surface-2); }
.cal-day.today { outline: 1.5px solid var(--primary); }
.cal-day.sel { background: var(--primary); color: #fff; }
.cal-day.empty { visibility: hidden; }

/* table chips (assign / combine tables) */
.tchip { border: 1.5px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px;
  padding: .3rem .7rem; font-size: .82rem; font-weight: 600; cursor: pointer; line-height: 1; }
.tchip.on { background: var(--primary); color: #fff; border-color: var(--primary); }
.tchip.on .muted { color: rgba(255,255,255,.85); }

/* drag-to-assign */
.drag-ghost { position: fixed; z-index: 80; pointer-events: none; transform: translate(8px, 8px);
  background: var(--primary); color: #fff; font-weight: 700; font-size: .8rem; padding: .35rem .6rem; border-radius: 9px; box-shadow: var(--shadow-lg); }
.table-el.drop-hover .table-top { outline: 3px solid var(--primary); outline-offset: 2px; }
.table-el .res-name { font-size: .6rem; font-weight: 600; opacity: .95; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 0 3px; }
.table-el.has-res .table-top { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--primary), var(--shadow-md); }
.fl-item { touch-action: none; }
.fl-item.draggable:active { cursor: grabbing; }

/* floor view: reservation list + map */
.floor-layout { display: flex; gap: 1rem; align-items: flex-start; }
.floor-main { flex: 1; min-width: 0; }
#floorList { width: 290px; flex: 0 0 290px; max-height: calc(100vh - 150px); overflow-y: auto; border-radius: 20px; box-shadow: 0 10px 30px -20px rgba(16,18,30,.26); }
.fl-datenav { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.fl-group { font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted); margin: .7rem 0 .35rem; border-bottom: 1px solid var(--border); padding-bottom: .25rem; }
.fl-item { display: flex; align-items: center; gap: .5rem; padding: .45rem .35rem; border-radius: 9px; cursor: pointer; }
.fl-item:hover { background: var(--surface-2); }
.fl-item .fl-time { font-weight: 700; font-size: .82rem; min-width: 42px; }
.fl-item .fl-body { flex: 1; min-width: 0; font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-item.done { opacity: .55; }
.fl-item.seated { background: rgba(225,29,72,.05); }
.fl-item.attime { outline: 1.5px solid var(--primary); outline-offset: -1px; }
/* cancelled / no-show reveal (toggle) */
.fl-voidtoggle { width: 100%; text-align: left; margin-top: .9rem; padding: .45rem .35rem; border: 0; border-top: 1px solid var(--border);
  background: transparent; color: var(--muted); font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.fl-voidtoggle:hover { color: var(--text); }
.fl-item.void { opacity: .6; cursor: pointer; }
.fl-item.void .fl-body b { text-decoration: line-through; }
.fl-sum { font-size: .82rem; color: var(--muted); padding: .2rem .35rem .5rem; border-bottom: 1px solid var(--border); margin-bottom: .3rem; }
/* edit-mode table palette (replaces the reservation list while editing the layout) */
.tp-head { font-weight: 700; font-size: .9rem; padding: .1rem .2rem .55rem; border-bottom: 1px solid var(--border); margin-bottom: .6rem; }
.tp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
.tp-item { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .7rem .4rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 12px; cursor: pointer; transition: transform .08s, border-color .15s, background .15s; }
.tp-item:hover { border-color: var(--primary); transform: translateY(-1px); }
.tp-item:active { transform: scale(.97); }
.tp-icon { display: flex; align-items: center; justify-content: center; color: #fff; background: #5b6577;
  box-shadow: var(--shadow); position: relative; }
.tp-icon b { font-size: .8rem; font-weight: 700; }
/* size set inline per preset (scales with seat count); these are fallbacks */
.tp-icon.square { width: 44px; height: 34px; border-radius: 7px; }
.tp-icon.circle { width: 42px; height: 42px; border-radius: 50%; }
.tp-label { font-size: .74rem; color: var(--muted); font-weight: 600; }
.tp-hint { font-size: .74rem; margin: .7rem .2rem 0; line-height: 1.45; }
/* settings sub-tabs */
.settings-tabs { display: flex; flex-wrap: wrap; gap: .3rem; background: var(--surface-2); padding: 4px; border-radius: 12px; margin-bottom: 1rem; }
.settings-tabs .stab { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .88rem; font-weight: 600;
  padding: .5rem .9rem; border-radius: 9px; cursor: pointer; transition: background .15s, color .15s; }
.settings-tabs .stab:hover { color: var(--text); }
.settings-tabs .stab.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow); }
/* venue logo preview */
.logo-preview { width: 84px; height: 84px; flex: 0 0 84px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6px; }
.logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
@media (max-width: 780px) {
  .floor-layout { flex-direction: column; }
  #floorList { width: 100%; flex: none; max-height: 42vh; order: -1; }
}
/* table = footprint box (sized to include chairs); .table-top is the surface,
   .chairs are decorative seats around the edge. All status/outline styling
   lives on .table-top so it hugs the real table, not the chair ring. */
.table-el { position:absolute; width:76px; height:76px; cursor:pointer; user-select:none; transition: transform .08s; }
.table-el:hover { transform: translateY(-1px); }
.table-el .table-top { position:absolute; inset:12px 6px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:1px; color:#fff; font-weight:700; font-size:.8rem;
  border-radius:12px; box-shadow: var(--shadow-md); transition: box-shadow .15s; overflow:hidden; }
.table-el:hover .table-top { box-shadow: var(--shadow-lg); }
.table-el.circle .table-top { inset:12px; border-radius:9999px; }
.table-el .t-name { max-width:100%; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 3px; }
.table-el .seats { font-size:.6rem; font-weight:500; opacity:.92; }
/* chairs (visual only — never intercept pointer events) */
.table-el .chairs { position:absolute; inset:0; pointer-events:none; }
.chair { position:absolute; background:var(--chair); box-shadow: var(--shadow); }
.chair.top, .chair.bot { width:18px; height:10px; transform:translateX(-50%); }
.chair.top { top:2px; border-radius:5px 5px 3px 3px; }
.chair.bot { bottom:2px; border-radius:3px 3px 5px 5px; }
.chair.round { width:13px; height:13px; border-radius:5px; }
.table-el.available .table-top { background: linear-gradient(180deg, #22b765, var(--green)); }
.table-el.booked    .table-top { background: linear-gradient(180deg, #f7a838, var(--yellow)); }
.table-el.seated    .table-top { background: linear-gradient(180deg, #f25274, var(--red)); }
.table-el.blocked   .table-top { background: repeating-linear-gradient(45deg, #9aa1ad, #9aa1ad 8px, #868d99 8px, #868d99 16px); opacity: .9; }
.table-el.blocked .seats { font-weight: 700; }
/* locked: over the Free table limit after a Pro→Free downgrade — greyed, not seatable */
.table-el.locked .table-top { background: repeating-linear-gradient(45deg, #b9b2c9, #b9b2c9 8px, #a59cbb 8px, #a59cbb 16px); opacity: .85; }
.table-el.locked .seats { font-weight: 700; }
/* walk-in-only (e.g. terrace): usable for walk-ins, but no reservations/auto-assign */
.table-el.walkinonly .table-top { outline: 2px dashed rgba(255,255,255,.9); outline-offset: -4px; }
.table-el.walkinonly .seats { font-weight: 700; }
.floor-plan.editing .table-el .table-top { cursor:grab; outline:2px dashed rgba(255,255,255,.8); outline-offset: 2px; }
.dot { width:.65rem; height:.65rem; border-radius:9999px; display:inline-block; }

/* ---------- Quick booking / modal ---------- */
#modalRoot { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.modal-card {
  background: color-mix(in srgb, var(--surface) 90%, transparent); color: var(--text);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent); box-shadow: var(--shadow-lg);
}
.tag-btn { border:1.5px solid var(--border); background:var(--surface); color:var(--text); border-radius:9999px; padding:.4rem .8rem; font-size:.8rem; cursor:pointer; font-weight:600; transition: background .12s, border-color .12s, color .12s; }
.tag-btn:hover { border-color: var(--muted); }
.tag-btn.on { background: var(--primary); color:#fff; border-color: var(--primary); }
.crm-card { background: var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--primary); border-radius:11px; padding:.65rem .75rem; font-size:.8rem; cursor:pointer; transition: border-color .12s, transform .06s; }
.crm-card:hover { border-left-color: var(--primary-d); transform: translateX(1px); }

/* numeric keypad */
.keypad { position: fixed; inset:0; z-index:70; background:rgba(0,0,0,.5); display:flex; align-items:flex-end; justify-content:center;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
.keypad-inner { background: color-mix(in srgb, var(--surface) 94%, transparent); width:100%; max-width:420px; border-radius:20px 20px 0 0; padding:1.1rem; box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.kp-display { font-size:1.7rem; font-weight:700; text-align:center; padding:.6rem; background:var(--surface-2); border-radius:12px; margin-bottom:.8rem; min-height:2.6rem; }
.kp-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; }
.kp-key { font-size:1.45rem; font-weight:700; padding:1rem; border-radius:13px; border:1.5px solid var(--border); background:var(--surface-2); color:var(--text); cursor:pointer; transition: background .1s; }
.kp-key:active { background: var(--primary); color:#fff; border-color: var(--primary); }
.kp-done { grid-column: span 3; background: linear-gradient(180deg, var(--primary), var(--primary-d)); color:#fff; border:0; }

.muted { color: var(--muted); }

/* responsive modal: bottom-sheet on phone, centered card on tablet/desktop */
@media (min-width: 640px) {
  #modalRoot { align-items: center !important; }
  #modalContent { border-radius: 18px !important; }
}

/* ============================================================
   Metric cards / Bento grid  (Stitch-inspired layout, brand-pink)
   ============================================================ */
.section-head { display:flex; align-items:flex-end; gap:.6rem; margin-bottom:1.1rem; flex-wrap:wrap; }
.section-head h2 { font-family:"Playfair Display","Sora","Inter",serif; font-size:1.55rem; font-weight:700; letter-spacing:-.01em; margin:0; line-height:1.2; }
.section-head .sub { color:var(--muted); font-size:.9rem; }

.bento { display:grid; grid-template-columns:repeat(auto-fit,minmax(168px,1fr)); gap:1rem; }

.metric {
  --c: var(--primary);
  background:var(--surface); border:1px solid var(--border); border-radius:20px;
  padding:1.2rem 1.25rem; box-shadow:0 10px 30px -18px rgba(16,18,30,.28);
  display:flex; flex-direction:column; gap:.15rem;
  transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s;
}
.metric:hover { transform:translateY(-4px); box-shadow:0 18px 40px -20px rgba(16,18,30,.34); }
.metric-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:.85rem; }
.metric-ico {
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; background:color-mix(in srgb, var(--c) 13%, transparent); color:var(--c);
}
.metric-chip {
  font-size:.72rem; font-weight:700; letter-spacing:.02em; padding:.22rem .55rem; border-radius:9px;
  background:color-mix(in srgb, var(--c) 13%, transparent); color:var(--c);
}
.metric-lbl { color:var(--muted); font-size:.83rem; font-weight:600; margin-bottom:.15rem; }
.metric-val { display:flex; align-items:baseline; gap:.4rem; }
.metric-val b { font-family:"Sora","Inter",sans-serif; font-size:1.95rem; font-weight:800; line-height:1; letter-spacing:-.02em; color:var(--text); }
.metric-val .unit { color:var(--muted); font-size:.78rem; font-weight:600; }

/* soft "panel" card a notch rounder than .card, for list/detail blocks */
.panel { background:var(--surface); border:1px solid var(--border); border-radius:20px; padding:1.25rem; box-shadow:0 10px 30px -20px rgba(16,18,30,.26); }
.panel-title { font-family:"Sora","Inter",sans-serif; font-weight:800; font-size:1.05rem; letter-spacing:-.01em; margin:0 0 .6rem; }

/* tip / insight strip */
.insight { display:flex; gap:.7rem; align-items:flex-start; padding:.9rem 1rem; border-radius:14px;
  background:color-mix(in srgb, var(--primary) 8%, transparent); border:1px solid color-mix(in srgb, var(--primary) 22%, transparent); }
.insight .ico { font-size:1.15rem; line-height:1.3; }
.insight p { margin:0; font-size:.85rem; line-height:1.4; color:var(--text); }

/* guest list cards */
.glist { display:flex; flex-direction:column; gap:.6rem; }
.guest-card { display:flex; align-items:center; gap:.8rem; padding:.8rem .9rem; background:var(--surface); border:1px solid var(--border);
  border-radius:16px; cursor:pointer; box-shadow:0 6px 20px -16px rgba(16,18,30,.3); transition:transform .18s, box-shadow .18s, border-color .18s; }
.guest-card:hover { transform:translateY(-2px); box-shadow:0 14px 30px -18px rgba(16,18,30,.36); border-color:color-mix(in srgb,var(--primary) 30%,var(--border)); }
.guest-av { width:42px; height:42px; flex:none; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:"Sora",sans-serif; font-weight:800; font-size:1.05rem; color:var(--primary);
  background:color-mix(in srgb,var(--primary) 13%,transparent); }
.guest-card.vip .guest-av { color:var(--yellow); background:color-mix(in srgb,var(--yellow) 16%,transparent); }
.guest-main { flex:1; min-width:0; }
.guest-name { font-weight:700; display:flex; align-items:center; gap:.35rem; }
.guest-sub { color:var(--muted); font-size:.82rem; margin-top:.1rem; }

/* ============================================================
   Toasts + confirm dialog + skeleton loaders
   ============================================================ */
#toastWrap { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:90;
  display:flex; flex-direction:column; gap:.5rem; align-items:center; pointer-events:none; width:max-content; max-width:92vw; }
.toast { display:flex; align-items:center; gap:.55rem; padding:.7rem 1rem; border-radius:14px; font-size:.9rem; font-weight:600;
  background:#10121e; color:#fff; box-shadow:0 14px 36px -12px rgba(0,0,0,.45); pointer-events:auto; max-width:92vw;
  animation: toast-in .22s cubic-bezier(.21,1.02,.73,1); }
.toast.out { animation: toast-out .2s ease forwards; }
.toast.error { background:var(--red); }
.toast.success { background:var(--green); }
@keyframes toast-in { from { opacity:0; transform:translateY(12px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes toast-out { to { opacity:0; transform:translateY(8px); } }

#confirmRoot { position:fixed; inset:0; z-index:85; background:rgba(10,12,20,.45); display:flex; align-items:center; justify-content:center; padding:1rem;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.confirm-box { background:color-mix(in srgb, var(--surface) 92%, transparent); border-radius:20px; box-shadow:var(--shadow-lg); padding:1.4rem; width:100%; max-width:380px;
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
  animation: toast-in .18s cubic-bezier(.21,1.02,.73,1); }
.confirm-box .msg { font-size:.95rem; line-height:1.5; margin:0 0 1.1rem; white-space:pre-line; }
.confirm-box .row { display:flex; gap:.5rem; justify-content:flex-end; }

.skel { position:relative; overflow:hidden; background:var(--surface-2); border-radius:12px; }
.skel::after { content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent); animation: skel-sweep 1.3s infinite; }
[data-theme="dark"] .skel::after, .dark .skel::after { background:linear-gradient(90deg, transparent, rgba(255,255,255,.07), transparent); }
@keyframes skel-sweep { to { transform:translateX(100%); } }
.skel-metric { height:128px; border-radius:20px; }
.skel-panel { height:220px; border-radius:20px; }
.skel-row { height:54px; border-radius:14px; }

/* arrival row (overview) */
.arrival { display:flex; align-items:center; gap:.8rem; padding:.7rem 0; border-bottom:1px solid var(--border); cursor:pointer; transition:background .12s; border-radius:10px; }
.arrival:last-child { border-bottom:0; }
.arrival:hover { background:var(--surface-2); }
.arrival .t { font-family:"Sora","Inter",sans-serif; font-weight:800; min-width:52px; }
.arrival .nm { flex:1; font-weight:600; }
.arrival .mt { color:var(--muted); font-size:.85rem; }