@charset "UTF-8";
/* TrilùTable 6.0 · Mappa sala (prefix fl-) and the shared digital floor plan (prefix fp-), «Scuro premium». */

/* ---------- Local aliases of the design tokens (styles.css defines them; fallbacks keep the plan readable) ---------- */
.fp-scope, .fp-svg {
  --fp-bg-0: var(--bg-0, #0B0C0E); --fp-bg-1: var(--bg-1, #111316); --fp-bg-2: var(--bg-2, #16191D);
  --fp-bg-3: var(--bg-3, #1C1F24); --fp-bg-4: var(--bg-4, #23272D);
  --fp-line: var(--line, rgba(255, 255, 255, .07)); --fp-line-soft: var(--line-soft, rgba(255, 255, 255, .05)); --fp-line-strong: var(--line-strong, rgba(255, 255, 255, .11));
  --fp-text-1: var(--text-1, #EDEEF0); --fp-text-2: var(--text-2, #A4A9B1); --fp-text-3: var(--text-3, #878C94); --fp-text-4: var(--text-4, #5F646B);
  --fp-accent: var(--accent, #FF833F); --fp-accent-soft: var(--accent-soft, rgba(255, 131, 63, .12)); --fp-accent-line: var(--accent-line, rgba(255, 131, 63, .32));
  --fp-green: var(--green, #6CD49E); --fp-amber: var(--amber, #E8B65A); --fp-red: var(--red, #F0918A); --fp-blue: var(--blue, #7FB0F2); --fp-grey: var(--grey, #8A9099);
  --fp-radius: var(--r-lg, 10px);
  --fp-ease: var(--ease, cubic-bezier(.2, .7, .2, 1)); --fp-fast: var(--t-fast, 140ms);
  /* Plan palette */
  --fp-stage: #0F1114;
  --fp-floor: #16191D;
  --fp-wall: #A3A9B2;
  --fp-table: #23272D;
  --fp-table-line: rgba(255, 255, 255, .22);
  --fp-chair: #1B1E23;
  --fp-chair-line: rgba(255, 255, 255, .17);
}

/* ---------- Plan graphics (shared with the Studio della sala) ---------- */
.fp-svg { display: block; width: 100%; height: auto; overflow: visible; font-family: var(--font, "Geist", "Inter", system-ui, sans-serif); user-select: none; -webkit-user-select: none; }
.fp-svg text { font-family: inherit; }
.fp-floor { fill: var(--fp-floor); }
.fp-room-edge { fill: none; stroke: rgba(255, 255, 255, .14); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fp-pattern-line { stroke: rgba(255, 255, 255, .07); stroke-width: 1.6; }
.fp-pattern-strong { stroke: rgba(255, 255, 255, .085); }
.fp-pattern-blue { stroke: rgba(127, 176, 242, .2); stroke-width: 2; }
.fp-pattern-dot { fill: rgba(108, 212, 158, .22); }
.fp-pattern-unavailable { stroke: rgba(138, 144, 153, .32); stroke-width: 2.4; }

/* Areas and service rooms */
.fp-area .fp-shape { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .12); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fp-area .fp-shape-pattern { stroke: none; pointer-events: none; }
.fp-kitchen .fp-shape, .fp-storage .fp-shape, .fp-restroom .fp-shape { fill: rgba(255, 255, 255, .028); stroke: rgba(255, 255, 255, .13); }
.fp-terrace .fp-shape { fill: rgba(108, 212, 158, .045); stroke: rgba(108, 212, 158, .34); stroke-dasharray: 6 5; }
.fp-area.fp-area .fp-shape { stroke-dasharray: 5 5; }
.fp-kitchen.fp-area .fp-shape, .fp-storage.fp-area .fp-shape, .fp-restroom.fp-area .fp-shape, .fp-counter.fp-area .fp-shape, .fp-cashier.fp-area .fp-shape, .fp-column.fp-area .fp-shape, .fp-stairs.fp-area .fp-shape { stroke-dasharray: none; }
.fp-blocked .fp-shape { fill: rgba(255, 255, 255, .02); stroke: rgba(255, 255, 255, .16); stroke-dasharray: 3 4; }
.fp-passage .fp-shape { fill: rgba(127, 176, 242, .035); stroke: rgba(127, 176, 242, .3); stroke-dasharray: 4 4; }
.fp-counter .fp-shape, .fp-cashier .fp-shape { fill: #2A2E35; stroke: rgba(255, 255, 255, .2); }
.fp-column .fp-shape { fill: #3B4048; stroke: rgba(255, 255, 255, .22); }
.fp-stairs .fp-shape { fill: rgba(255, 255, 255, .03); stroke: rgba(255, 255, 255, .18); }
.fp-steps { fill: none; stroke: rgba(255, 255, 255, .16); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fp-stairs-arrow { fill: none; stroke: rgba(255, 255, 255, .34); stroke-width: 1.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.fp-entrance .fp-shape { fill: rgba(255, 255, 255, .035); stroke: rgba(255, 255, 255, .22); stroke-dasharray: 4 3; }
.fp-entrance-arrow { fill: none; stroke: var(--fp-text-2); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.fp-label { fill: var(--fp-text-3); font-weight: 500; letter-spacing: .01em; pointer-events: none; }
.fp-label-kitchen, .fp-label-restroom, .fp-label-storage, .fp-label-counter, .fp-label-cashier { fill: var(--fp-text-2); }
.fp-label-terrace { fill: rgba(108, 212, 158, .8); }
.fp-label-passage { fill: rgba(127, 176, 242, .75); }

/* Structure */
.fp-wall-line { stroke: var(--fp-wall); stroke-linecap: square; fill: none; }
.fp-gap { fill: var(--fp-floor); stroke: none; }
.fp-door-leaf { fill: none; stroke: var(--fp-wall); stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fp-door-arc { fill: none; stroke: rgba(255, 255, 255, .26); stroke-width: 1px; vector-effect: non-scaling-stroke; stroke-dasharray: 3 3; }
.fp-door-jamb, .fp-window-jamb { fill: none; stroke: var(--fp-wall); stroke-width: 1.4px; vector-effect: non-scaling-stroke; }
.fp-window-glass { fill: none; stroke: rgba(127, 176, 242, .85); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.fp-text { fill: var(--fp-text-2); font-weight: 500; letter-spacing: .01em; }

/* Tables */
.fp-table-top { fill: var(--fp-table); stroke: var(--fp-table-line); stroke-width: 1.25px; vector-effect: non-scaling-stroke; }
.fp-chair { fill: var(--fp-chair); stroke: var(--fp-chair-line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
.fp-chair-back { fill: none; stroke: rgba(255, 255, 255, .2); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fp-table-label { fill: var(--fp-text-1); font-weight: 600; letter-spacing: -.01em; pointer-events: none; font-variant-numeric: tabular-nums; }
.fp-table-sub { fill: var(--fp-text-2); font-weight: 500; pointer-events: none; font-variant-numeric: tabular-nums; }

/* ---------- Live table states (green libero · amber prenotato · red occupato · grey non disponibile) ---------- */
.fl-table { cursor: pointer; outline: none; }
.fl-table .fp-table-top, .fl-table .fp-chair { transition: fill var(--fp-fast) var(--fp-ease), stroke var(--fp-fast) var(--fp-ease); }
.fl-table-free .fp-table-top { fill: rgba(108, 212, 158, .07); stroke: rgba(108, 212, 158, .62); }
.fl-table-free .fp-chair { stroke: rgba(108, 212, 158, .3); }
.fl-table-free .fp-table-sub { fill: var(--fp-green); }
.fl-table-reserved .fp-table-top { fill: rgba(232, 182, 90, .14); stroke: rgba(232, 182, 90, .78); }
.fl-table-reserved .fp-chair { fill: rgba(232, 182, 90, .09); stroke: rgba(232, 182, 90, .38); }
.fl-table-reserved .fp-table-sub { fill: var(--fp-amber); }
.fl-table-reserved.is-unconfirmed .fp-table-top { stroke-dasharray: 5 4; fill: rgba(232, 182, 90, .08); }
.fl-table-occupied .fp-table-top { fill: rgba(240, 145, 138, .2); stroke: rgba(240, 145, 138, .82); }
.fl-table-occupied .fp-chair { fill: rgba(240, 145, 138, .16); stroke: rgba(240, 145, 138, .42); }
.fl-table-occupied .fp-table-sub { fill: #F6B3AD; }
.fl-table-unavailable .fp-table-top { fill: rgba(138, 144, 153, .1); stroke: rgba(138, 144, 153, .5); stroke-dasharray: 2 3; }
.fl-table-unavailable .fp-chair { fill: transparent; stroke: rgba(138, 144, 153, .26); }
.fl-table-unavailable .fp-table-label { fill: var(--fp-text-3); }
.fl-table-unavailable .fp-table-sub { fill: var(--fp-text-3); }
.fl-table:hover .fp-table-top { stroke-width: 2px; }
.fl-table.is-selected .fp-table-top, .fl-table:focus-visible .fp-table-top { stroke: var(--fp-accent); stroke-width: 2.5px; stroke-dasharray: none; }
.fl-table.is-joined .fp-table-top { stroke: var(--fp-accent); stroke-width: 2.5px; stroke-dasharray: none; filter: drop-shadow(0 0 6px rgba(255, 131, 63, .35)); }
.fl-join-badge circle { fill: var(--fp-accent); stroke: var(--fp-bg-1); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.fl-join-badge text { fill: var(--accent-ink, #1A0E06); font-weight: 700; }

/* ---------- Page ---------- */
.fl-page { display: flex; flex-direction: column; gap: 16px; width: 100%; min-width: 0; color: var(--fp-text-1); font-size: 14px; line-height: 20px; }
.fl-page h1, .fl-page h2, .fl-page h3, .fl-page p { margin: 0; }
.fl-page button { font: inherit; }
.fl-page .num, .fl-page .fl-time-select { font-variant-numeric: tabular-nums; }
.fl-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; }
.fl-head-copy { min-width: 0; }
.fl-title { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.02em; }
.fl-subtitle { margin-top: 4px !important; font-size: 14px; color: var(--fp-text-2); }
.fl-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.fl-date-field, .fl-time-group { display: inline-flex; align-items: center; height: 36px; border-radius: 8px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--fp-line-strong); color: var(--fp-text-3); }
.fl-date-field { gap: 8px; padding: 0 10px; cursor: pointer; }
.fl-date-field:focus-within, .fl-time-group:focus-within { box-shadow: inset 0 0 0 1px var(--fp-accent-line); }
.fl-date-field input { width: 132px; border: 0; background: transparent; color: var(--fp-text-1); font-size: 13.5px; font-weight: 500; padding: 0; min-height: 0; outline: none; cursor: pointer; color-scheme: dark; }
.fl-time-group { overflow: hidden; }
.fl-step { height: 36px; min-width: 44px; border: 0; background: transparent; color: var(--fp-text-2); font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease); }
.fl-step:hover { background: rgba(255, 255, 255, .05); color: var(--fp-text-1); }
.fl-time-field { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 8px; border-left: 1px solid var(--fp-line); border-right: 1px solid var(--fp-line); color: var(--fp-text-3); }
.fl-time-select { border: 0; background: transparent; color: var(--fp-text-1); font-size: 14px; font-weight: 600; padding: 0 2px; min-height: 0; outline: none; cursor: pointer; color-scheme: dark; }
.fl-now { height: 36px; min-height: 36px; }

.fl-bar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.fl-areas { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--fp-line); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.fl-areas::-webkit-scrollbar { display: none; }
.fl-area { height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: transparent; color: var(--fp-text-2); font-size: 13px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background var(--fp-fast) var(--fp-ease), color var(--fp-fast) var(--fp-ease); }
.fl-area:hover { color: var(--fp-text-1); background: rgba(255, 255, 255, .04); }
.fl-area.is-active { color: var(--fp-text-1); background: rgba(255, 255, 255, .085); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.fl-legend { display: flex; align-items: center; gap: 4px 14px; flex-wrap: wrap; }
.fl-legend-chip { display: inline-flex; align-items: center; gap: 7px; height: 28px; font-size: 13px; color: var(--fp-text-2); white-space: nowrap; }
.fl-legend-chip b { font-weight: 600; color: var(--fp-text-1); }
.fl-legend-chip i, .fl-mini i { width: 12px; height: 12px; flex: none; border-radius: 3px; }
.fl-legend-chip.is-free i, .fl-mini.is-free i { background: rgba(108, 212, 158, .1); box-shadow: inset 0 0 0 1.5px rgba(108, 212, 158, .8); }
.fl-legend-chip.is-reserved i, .fl-mini.is-reserved i { background: rgba(232, 182, 90, .3); box-shadow: inset 0 0 0 1.5px var(--fp-amber); }
.fl-legend-chip.is-occupied i, .fl-mini.is-occupied i { background: rgba(240, 145, 138, .45); box-shadow: inset 0 0 0 1.5px var(--fp-red); }
.fl-legend-chip.is-unavailable i, .fl-mini.is-unavailable i { background: repeating-linear-gradient(135deg, rgba(138, 144, 153, .5) 0 2px, transparent 2px 4px); box-shadow: inset 0 0 0 1.5px rgba(138, 144, 153, .7); }
.fl-join-toggle { margin-left: auto; height: 34px; min-height: 34px; }
.fl-join-hint { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 8px; background: var(--fp-accent-soft); box-shadow: inset 0 0 0 1px var(--fp-accent-line); color: var(--fp-text-1); font-size: 13.5px; }
.fl-join-hint svg { color: var(--fp-accent); }

/* Rooms */
.fl-plans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.fl-plans.is-multi { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.fl-room { margin: 0; min-width: 0; border-radius: var(--fp-radius); background: var(--fp-bg-2); box-shadow: inset 0 0 0 1px var(--fp-line), var(--highlight, inset 0 1px 0 rgba(255, 255, 255, .035)), 0 1px 2px rgba(0, 0, 0, .25); overflow: hidden; }
.fl-room-head { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--fp-line-soft); }
.fl-room-head strong { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-room-meta { font-size: 13px; color: var(--fp-text-3); white-space: nowrap; }
.fl-room-states { margin-left: auto; display: inline-flex; gap: 10px; }
.fl-room-head .fl-zoom { margin-left: 6px; }
.fl-mini { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--fp-text-2); }
.fl-mini i { width: 10px; height: 10px; }
.fl-plan { position: relative; margin: 12px; border-radius: 8px; background-color: var(--fp-stage); background-image: radial-gradient(rgba(255, 255, 255, .045) 1px, transparent 1.2px); background-size: 14px 14px; box-shadow: inset 0 0 0 1px var(--fp-line-soft); }
.fl-plan-scroll { overflow: auto; max-height: min(78vh, 980px); border-radius: 8px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #2B3036 transparent; }
.fl-plan-stage { min-width: 100%; padding: 14px; box-sizing: border-box; }
.fl-canvas { width: calc(var(--fl-fit, 1) * 100%); margin: 0 auto; }
.fl-zoom { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--fp-line); font-size: 12px; color: var(--fp-text-2); flex: none; }
.fl-zoom span { min-width: 40px; text-align: center; }
.fl-zoom-button { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: var(--fp-text-2); cursor: pointer; }
.fl-zoom-button:hover:not(:disabled) { background: rgba(255, 255, 255, .06); color: var(--fp-text-1); }
.fl-room-empty { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 160px; color: var(--fp-text-3); font-size: 13.5px; }

/* Popover */
.fl-popover { position: absolute; z-index: 6; width: 320px; max-width: calc(100% - 12px); padding: 16px; border-radius: 12px; background: #1A1D22; box-shadow: var(--shadow-pop, 0 18px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .11)); outline: none; }
.fl-popover-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--fp-text-2); cursor: pointer; }
.fl-popover-close:hover { background: rgba(255, 255, 255, .06); color: var(--fp-text-1); }
.fl-popover-eyebrow { display: block; font-size: 12px; font-weight: 500; color: var(--fp-text-3); margin-bottom: 2px; padding-right: 36px; }
.fl-popover h3 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.015em; padding-right: 36px; }
.fl-popover-subtitle { margin-top: 2px !important; font-size: 13px; color: var(--fp-text-2); }
.fl-popover-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 10px 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--fp-line); }
.fl-state, .fl-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; }
.fl-state::before, .fl-pill::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.fl-state.is-free { color: var(--fp-green); background: rgba(108, 212, 158, .09); box-shadow: inset 0 0 0 1px rgba(108, 212, 158, .2); }
.fl-state.is-reserved { color: var(--fp-amber); background: rgba(232, 182, 90, .09); box-shadow: inset 0 0 0 1px rgba(232, 182, 90, .22); }
.fl-state.is-occupied { color: var(--fp-red); background: rgba(240, 145, 138, .09); box-shadow: inset 0 0 0 1px rgba(240, 145, 138, .22); }
.fl-state.is-unavailable { color: var(--fp-grey); background: rgba(138, 144, 153, .12); box-shadow: inset 0 0 0 1px rgba(138, 144, 153, .24); }
.fl-pill { color: var(--fp-text-2); background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.fl-pill-confirmed { color: var(--fp-green); background: rgba(108, 212, 158, .09); box-shadow: inset 0 0 0 1px rgba(108, 212, 158, .16); }
.fl-pill-pending { color: var(--fp-amber); background: rgba(232, 182, 90, .09); box-shadow: inset 0 0 0 1px rgba(232, 182, 90, .18); }
.fl-pill-arrived { color: var(--fp-blue); background: rgba(127, 176, 242, .09); box-shadow: inset 0 0 0 1px rgba(127, 176, 242, .17); }
.fl-popover-since, .fl-popover-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--fp-text-2); }
.fl-popover-flag { color: var(--fp-amber); }
.fl-popover-order { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 8px !important; font-size: 13px; color: var(--fp-text-1); }
.fl-popover-order svg { margin-top: 2px; color: var(--fp-text-3); }
.fl-popover-orders { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 4px; }
.fl-popover-orders li { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; min-height: 32px; padding: 0 10px; border-radius: 7px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--fp-line-soft); font-size: 13px; color: var(--fp-text-2); }
.fl-popover-orders li > span:first-child { color: var(--fp-text-1); font-weight: 500; }
.fl-popover-orders b { color: var(--fp-text-1); font-weight: 600; }
.fl-popover-order-state { font-size: 12px; color: var(--fp-blue); }
.fl-popover-reservation { padding: 12px 0; border-top: 1px solid var(--fp-line); }
.fl-popover-reservation:first-of-type { border-top: 0; padding-top: 0; }
.fl-popover-guest { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fl-popover-guest strong { flex: 1; min-width: 0; font-size: 14.5px; font-weight: 600; overflow-wrap: anywhere; }
.fl-avatar { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; font-size: 11px; font-weight: 600; color: var(--fp-text-1); background: linear-gradient(180deg, #30343B, #23262C); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.fl-popover-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 6px; font-size: 13px; color: var(--fp-text-2); }
.fl-popover-meta > span:first-child { color: var(--fp-text-1); font-weight: 500; }
.fl-popover-joined { display: flex; align-items: center; gap: 6px; margin-top: 6px !important; font-size: 12.5px; color: var(--fp-text-2); }
.fl-popover-note { margin-top: 6px !important; font-size: 13px; font-style: italic; color: var(--fp-text-2); overflow-wrap: anywhere; }
.fl-popover-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fl-popover-actions .btn { min-height: 34px; height: 34px; font-size: 13px; }
.fl-popover-table-actions { padding-top: 12px; border-top: 1px solid var(--fp-line); }
.fl-popover-reservation + .fl-popover-table-actions, .fl-popover-orders + .fl-popover-table-actions { margin-top: 0; }

/* Upcoming arrivals */
.fl-panel { border-radius: var(--fp-radius); background: var(--fp-bg-2); box-shadow: inset 0 0 0 1px var(--fp-line), var(--highlight, inset 0 1px 0 rgba(255, 255, 255, .035)), 0 1px 2px rgba(0, 0, 0, .25); overflow: hidden; }
.fl-panel-head { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-bottom: 1px solid var(--fp-line-soft); flex-wrap: wrap; }
.fl-panel-head h2 { font-size: 14px; font-weight: 600; }
.fl-count { height: 20px; min-width: 22px; padding: 0 6px; border-radius: 6px; font-size: 12px; font-weight: 500; line-height: 20px; text-align: center; color: var(--fp-text-2); background: rgba(255, 255, 255, .055); }
.fl-panel-sub { font-size: 13px; color: var(--fp-text-3); }
.fl-link { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 6px 0; font-size: 13px; font-weight: 500; color: var(--fp-text-2); cursor: pointer; }
.fl-link:hover { color: var(--fp-text-1); }
.fl-upcoming-list { list-style: none; margin: 0; padding: 4px 0; }
.fl-upcoming-list li + li .fl-upcoming-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 16px; height: 1px; background: var(--fp-line-soft); }
.fl-upcoming-row { position: relative; width: 100%; min-height: 54px; display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 6px 16px; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background var(--fp-fast) var(--fp-ease); }
.fl-upcoming-row:hover { background: rgba(255, 255, 255, .025); }
.fl-upcoming-time { font-size: 14px; font-weight: 500; }
.fl-upcoming-guest { display: flex; flex-direction: column; min-width: 0; }
.fl-upcoming-guest b { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-upcoming-guest small { font-size: 13px; color: var(--fp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-tchip { height: 24px; min-width: 34px; display: inline-flex; align-items: center; justify-content: center; padding: 0 7px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--fp-text-1); white-space: nowrap; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.fl-tchip.is-empty { font-weight: 500; color: var(--fp-text-3); background: none; box-shadow: none; outline: 1px dashed rgba(255, 255, 255, .16); outline-offset: -1px; }
.fl-upcoming-empty { display: flex; align-items: center; gap: 8px; padding: 18px 16px; font-size: 13.5px; color: var(--fp-text-3); }
.fl-note { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--fp-text-3); }
.fl-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 48px 24px; border-radius: var(--fp-radius); background: var(--fp-bg-2); box-shadow: inset 0 0 0 1px var(--fp-line); }
.fl-empty > svg { width: 40px; height: 40px; padding: 9px; border-radius: 10px; color: var(--fp-text-2); background: rgba(255, 255, 255, .05); box-sizing: border-box; }
.fl-empty h2 { font-size: 16px; font-weight: 600; }
.fl-empty p { max-width: 440px; font-size: 13.5px; color: var(--fp-text-2); }

/* Join bar */
.fl-joinbar { position: sticky; bottom: 12px; z-index: 8; display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 14px; border-radius: 12px; background: #1A1D22; box-shadow: var(--shadow-pop, 0 18px 60px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .11)); }
.fl-joinbar-icon { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 8px; color: var(--fp-accent); background: var(--fp-accent-soft); box-shadow: inset 0 0 0 1px var(--fp-accent-line); }
.fl-joinbar-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fl-joinbar-text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-joinbar-text span { font-size: 13px; color: var(--fp-text-2); }
.fl-joinbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.fl-joinbar-actions .btn { min-height: 36px; height: 36px; }

/* Dialogs opened from the map */
.fl-dialog-tables { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line, rgba(255, 255, 255, .07)); font-size: 13.5px; color: var(--text-2, #A4A9B1); }
.fl-dialog-tables b { color: var(--text-1, #EDEEF0); font-weight: 600; }
.fl-dialog-tables svg { color: var(--accent, #FF833F); }
.fl-dialog-warning { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 8px; background: rgba(232, 182, 90, .08); box-shadow: inset 0 0 0 1px rgba(232, 182, 90, .22); color: #F2D29A; font-size: 13px; }
[data-fl-capacity].is-warning { color: var(--amber, #E8B65A); }
.fl-assign-list { border: 0; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; max-height: min(46vh, 420px); overflow-y: auto; }
.fl-assign-row { display: grid; grid-template-columns: auto 48px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 1px var(--line, rgba(255, 255, 255, .07)); cursor: pointer; }
.fl-assign-row:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent-line, rgba(255, 131, 63, .32)); background: var(--accent-soft, rgba(255, 131, 63, .12)); }
.fl-assign-row input { accent-color: var(--accent, #FF833F); width: 16px; height: 16px; }
.fl-assign-time { font-weight: 500; }
.fl-assign-guest { display: flex; flex-direction: column; min-width: 0; }
.fl-assign-guest b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-assign-guest small { font-size: 12.5px; color: var(--text-2, #A4A9B1); }

.fl-page .icon-btn:focus-visible, .fl-page button:focus-visible, .fl-page input:focus-visible, .fl-page select:focus-visible { outline: 2px solid var(--fp-accent); outline-offset: 2px; }
.fl-time-select:focus-visible, .fl-date-field input:focus-visible { outline: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .fl-join-toggle { margin-left: 0; }
}
@media (max-width: 760px) {
  .fl-head { align-items: stretch; }
  .fl-controls { width: 100%; }
  .fl-date-field { flex: 1 1 150px; }
  .fl-date-field input { width: 100%; }
  .fl-bar { align-items: stretch; flex-direction: column; }
  .fl-areas { align-self: stretch; }
  .fl-legend { gap: 2px 12px; }
  .fl-join-toggle { align-self: flex-start; }
  .fl-plan { margin: 8px; }
  .fl-plan-stage { padding: 8px; }
  .fl-room-head { padding: 0 12px; flex-wrap: wrap; row-gap: 0; }
  .fl-room-states { margin-left: 0; }
  .fl-room-head { padding-bottom: 8px; padding-top: 8px; }
  .fl-room-head .fl-zoom { margin-left: auto; }
  .fl-popover { position: fixed; left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; max-width: none; max-height: 72vh; overflow-y: auto; z-index: 45; }
  .fl-upcoming-row { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 10px; }
  .fl-upcoming-row .fl-pill { display: none; }
  .fl-joinbar { flex-wrap: wrap; bottom: 8px; }
  .fl-joinbar-actions { width: 100%; justify-content: stretch; }
  .fl-joinbar-actions .btn { flex: 1 1 auto; }
  .fl-assign-row { grid-template-columns: auto 44px minmax(0, 1fr); }
  .fl-assign-row .fl-pill { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .fl-page *, .fp-svg * { transition: none !important; }
}