@charset "UTF-8";
/* TrilùTable · La tua sala, a colpo d’occhio (floor-live module, prefix fl-) */
.fl-page { --fl-line: #2a2d32; --fl-panel: #15171a; --fl-soft: #99a0aa; --fl-orange: var(--accent, #ff833f); --fl-free: #d9d6ce; --fl-reserved: #a8683b; --fl-occupied: #ff8a48; --fl-pending: #e7b36a; color: var(--text, #f1f2f4); width: 100%; min-width: 0; }
.fl-page button { font: inherit; }
.fl-page h1, .fl-page h2, .fl-page h3, .fl-page p { margin-top: 0; }

/* Heading & controls */
.fl-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.fl-heading-copy { min-width: 0; }
.fl-heading-copy .eyebrow { font-size: 9px; letter-spacing: .18em; color: #d7a07a; margin-bottom: 10px; }
.fl-heading h1 { font-size: clamp(26px, 2.5vw, 36px); letter-spacing: -.04em; margin: 0 0 8px; }
.fl-heading h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; font-style: italic; color: #ffb07f; letter-spacing: -.02em; }
.fl-heading-copy > p { color: var(--fl-soft); font-size: 12.5px; margin: 0; }
.fl-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.fl-date-field { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--fl-line); border-radius: 9px; background: var(--fl-panel); color: #9aa2ad; }
.fl-date-field:focus-within { border-color: #a9582f; }
.fl-date-field input { width: 136px; border: 0; background: transparent; color: #eef0f3; font-size: 12.5px; font-weight: 600; padding: 8px 0; min-height: 0; outline: none; cursor: pointer; }
.fl-date-field input::-webkit-calendar-picker-indicator { filter: invert(.8); cursor: pointer; }
.fl-time-group { display: inline-flex; align-items: stretch; border: 1px solid #5a3a24; border-radius: 10px; background: #1b1715; overflow: hidden; }
.fl-step { min-width: 46px; min-height: 44px; border: 0; background: transparent; color: #e3b995; font-size: 11.5px; font-weight: 650; cursor: pointer; }
.fl-step:hover { background: #33241a; color: #ffd2b3; }
.fl-time-field { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px; border-left: 1px solid #4a3324; border-right: 1px solid #4a3324; }
.fl-time-field > span { font-size: 10.5px; color: #b08d73; }
.fl-time-select { border: 0; background: transparent; color: #fff; font-size: 17px; font-weight: 650; letter-spacing: -.01em; padding: 6px 2px; min-height: 0; outline: none; cursor: pointer; }
.fl-time-field:focus-within { background: #2a1d15; }
.fl-now { min-height: 44px; font-size: 11.5px; }

/* Areas & legend */
.fl-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--fl-line); }
.fl-areas { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-area { min-height: 40px; padding: 8px 14px; border: 1px solid transparent; border-radius: 9px; background: transparent; color: #a7adb6; font-size: 12px; font-weight: 550; cursor: pointer; white-space: nowrap; }
.fl-area:hover { background: #22262b; color: #fff; }
.fl-area.is-active { background: #35241a; border-color: #5e3b22; color: #ffb27f; }
.fl-legend { display: flex; gap: 6px; flex-wrap: wrap; }
.fl-legend-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 6px 11px; border: 1px solid var(--fl-line); border-radius: 8px; background: var(--fl-panel); color: #c6ccd5; font-size: 11.5px; }
.fl-legend-chip i { width: 10px; height: 10px; border-radius: 3px; background: #666; }
.fl-legend-chip b { font-weight: 650; color: #fff; }
.fl-legend-chip.is-free i { background: var(--fl-free); }
.fl-legend-chip.is-reserved i { background: var(--fl-reserved); }
.fl-legend-chip.is-occupied i { background: var(--fl-occupied); }
.fl-legend-chip.is-pending i { background: var(--fl-pending); border: 1px dashed #5a3a24; }

/* Plans */
.fl-plans { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 18px; }
.fl-plans.is-multi { grid-template-columns: repeat(auto-fit, minmax(460px, 1fr)); }
.fl-room { margin: 0; min-width: 0; }
.fl-room figcaption { display: flex; align-items: baseline; gap: 10px; margin: 0 0 8px 2px; }
.fl-room figcaption strong { font-size: 13.5px; }
.fl-room figcaption span { font-size: 11px; color: var(--fl-soft); }
.fl-plan { position: relative; border: 1px solid #2a2c2b; border-radius: 14px; background: #0f1110; isolation: isolate; }
.fl-plan-scroll { overflow: auto; max-height: 76vh; border-radius: 14px; scrollbar-width: thin; scrollbar-color: #554338 transparent; }
.fl-plan-stage { min-width: 100%; }
.fl-canvas { display: block; width: 100%; height: auto; }
.fl-floor { stroke: none; }
.fl-room-edge { fill: none; stroke: #4a4d4a; stroke-width: 2; }
.fl-zone-outline { fill: #43627b15; stroke: #658ca6; stroke-width: 1; stroke-dasharray: 5 5; }
.fl-zone-label { fill: #86a4b9; font-size: 9px; letter-spacing: 2px; pointer-events: none; }
.fl-table { cursor: pointer; outline: none; }
.fl-table:focus-visible .fl-table-top { stroke: #ffffff; stroke-width: 3; }
.fl-chair { fill: #4a4a46; stroke: #6b6b66; stroke-width: .8; }
.fl-table-shadow { fill: #040605; opacity: .5; }
.fl-table-top { fill: var(--fl-free); stroke: #b5b2ab; stroke-width: 1.5; transition: fill .15s, stroke .15s; }
.fl-table-inset { fill: none; stroke: #ffffff; stroke-width: .8; opacity: .35; }
.fl-table-label { font-family: inherit; font-weight: 700; fill: #1d1c1a; letter-spacing: -.01em; }
.fl-table-seats { font-family: inherit; font-size: 12.5px; font-weight: 500; fill: #3e3c38; }
.fl-state-pill { fill: #0f1110; opacity: .78; }
.fl-state-dot { fill: var(--fl-free); }
.fl-state-text { font-family: inherit; font-size: 11.5px; font-weight: 550; fill: #d8dde4; }
.fl-table:hover .fl-table-top { stroke: #ffae74; stroke-width: 2.5; }
.fl-table.is-selected .fl-table-top { stroke: #ffffff; stroke-width: 3; filter: drop-shadow(0 0 12px #ff833f88); }
.fl-table-reserved .fl-table-top { fill: var(--fl-reserved); stroke: #d49a62; }
.fl-table-reserved .fl-chair { fill: #634a2e; stroke: #9b7449; }
.fl-table-reserved .fl-table-label { fill: #fff2e6; }
.fl-table-reserved .fl-table-seats { fill: #f6dcc4; }
.fl-table-reserved .fl-table-inset { opacity: .2; }
.fl-table-reserved .fl-state-dot { fill: var(--fl-reserved); }
.fl-table-occupied .fl-table-top { fill: var(--fl-occupied); stroke: #ffc49d; }
.fl-table-occupied .fl-chair { fill: #7a4a2e; stroke: #c07e52; }
.fl-table-occupied .fl-table-label { fill: #24150c; }
.fl-table-occupied .fl-table-seats { fill: #4a2a16; }
.fl-table-occupied .fl-state-dot { fill: var(--fl-occupied); }
.fl-table-pending .fl-table-top { fill: #3a2416; stroke: var(--fl-pending); stroke-width: 2.5; stroke-dasharray: 7 5; }
.fl-table-pending .fl-chair { fill: #4a3a2a; stroke: #8a6b45; }
.fl-table-pending .fl-table-label { fill: #ffd9a8; }
.fl-table-pending .fl-table-seats { fill: #d9b98f; }
.fl-table-pending .fl-table-inset { opacity: 0; }
.fl-table-pending .fl-state-dot { fill: var(--fl-pending); }
.fl-zoom { position: absolute; right: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 2px; padding: 4px; border: 1px solid #353a40; border-radius: 10px; background: #15171acc; backdrop-filter: blur(6px); z-index: 2; }
.fl-zoom span { min-width: 44px; text-align: center; font-size: 11px; color: #c6ccd5; }
.fl-zoom-button { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 0; border-radius: 7px; background: transparent; color: #d8dde4; cursor: pointer; }
.fl-zoom-button:hover:not(:disabled) { background: #2a2e34; }

/* Popover */
.fl-popover { position: absolute; z-index: 5; width: 320px; max-width: calc(100% - 12px); padding: 18px 18px 16px; border: 1px solid #4a4f58; border-radius: 14px; background: #171a1ef2; box-shadow: 0 24px 70px #000a; backdrop-filter: blur(8px); outline: none; }
.fl-popover-close { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #aab2be; cursor: pointer; }
.fl-popover-close:hover { background: #262b32; color: #fff; }
.fl-popover-eyebrow { display: block; font-size: 9.5px; font-weight: 650; letter-spacing: .18em; text-transform: uppercase; color: #ffb27f; margin-bottom: 8px; padding-right: 36px; }
.fl-popover h3 { font-size: 22px; letter-spacing: -.03em; margin: 0 0 5px; padding-right: 36px; }
.fl-popover-subtitle { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; font-size: 12px; color: #a7adb6; margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid #2c3139; }
.fl-popover-state { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: #d8dde4; }
.fl-popover-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--fl-free); }
.fl-popover-state.is-reserved i { background: var(--fl-reserved); }
.fl-popover-state.is-occupied i { background: var(--fl-occupied); }
.fl-popover-state.is-pending i { background: var(--fl-pending); }
.fl-popover-order { display: flex; align-items: center; gap: 7px; margin: 0 0 12px; font-size: 11.5px; color: #e3b995; }
.fl-popover-reservation { padding: 12px 0; border-top: 1px solid #2c3139; }
.fl-popover-reservation:first-of-type { border-top: 0; padding-top: 0; }
.fl-popover-guest { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 6px 10px 6px 6px; border: 1px solid #6a4126; border-radius: 9px; background: #2b1f16; }
.fl-popover-guest strong { font-size: 15px; letter-spacing: -.01em; overflow-wrap: anywhere; }
.fl-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: #35251c; border: 1px solid #6a4228; color: #ffc29b; font-size: 10.5px; font-weight: 650; }
.fl-popover-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: #c6ccd5; margin-bottom: 8px; }
.fl-popover-meta b { padding: 4px 9px; border: 1px solid #6a4126; border-radius: 7px; background: #2b1f16; color: #ffd2b3; font-weight: 600; }
.fl-popover-note { font-size: 11.5px; color: #b8a594; line-height: 1.5; margin: 8px 0 0; overflow-wrap: anywhere; }
.fl-pill { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: 6px; border: 1px solid #323a45; background: #20262e; color: #c9d0da; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.fl-pill i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.fl-pill-arrived { background: #1b2a44; color: #8fb6ff; border-color: #2d4570; }
.fl-pill-pending { background: #3a2416; color: #ffb27f; border-color: #6a4126; }
.fl-pill-completed { background: #1f2622; color: #9cb3a2; border-color: #2f3b33; }
.fl-pill-cancelled, .fl-pill-no_show { background: #362422; color: #efa49a; border-color: #5c3a37; }
.fl-popover-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.fl-popover-actions .btn { min-height: 42px; font-size: 11.5px; flex: 1 1 auto; justify-content: center; }
.fl-popover-table-actions { padding-top: 12px; border-top: 1px solid #2c3139; }

/* Upcoming list */
.fl-upcoming { background: var(--fl-panel); border: 1px solid var(--fl-line); border-radius: 14px; padding: 20px 22px 10px; margin-bottom: 14px; }
.fl-upcoming-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 8px; }
.fl-upcoming-head h2 { font-size: 17px; letter-spacing: -.02em; margin: 0 0 5px; }
.fl-upcoming-head p { font-size: 11px; color: var(--fl-soft); margin: 0; }
.fl-upcoming-head .text-button { min-height: 36px; font-size: 11px; gap: 6px; flex-shrink: 0; }
.fl-upcoming-list { list-style: none; margin: 0; padding: 0; }
.fl-upcoming-list li + li { border-top: 1px solid #222529; }
.fl-upcoming-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 8px 4px; border: 0; border-radius: 8px; background: none; color: inherit; text-align: left; cursor: pointer; }
.fl-upcoming-row:hover { background: #1b1e22; }
.fl-upcoming-time { font-size: 14px; font-weight: 650; color: #ffb27f; }
.fl-upcoming-guest { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fl-upcoming-guest > span:last-child { min-width: 0; }
.fl-upcoming-guest b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fl-upcoming-guest small { display: block; font-size: 10.5px; color: #8e96a1; margin-top: 2px; }
.fl-upcoming-table { font-size: 12px; font-weight: 600; color: #d3d8df; white-space: nowrap; }
.fl-upcoming-table.is-empty { color: #8e96a1; font-weight: 500; }
.fl-upcoming-empty { display: flex; align-items: center; gap: 8px; padding: 8px 0 12px; font-size: 12px; color: var(--fl-soft); }
.fl-note { display: flex; align-items: flex-start; gap: 8px; margin: 0 2px; font-size: 10.5px; line-height: 1.6; color: #767e89; }
.fl-note svg { flex-shrink: 0; margin-top: 2px; }
.fl-empty { margin-bottom: 16px; }

/* Responsive */
@media (max-width: 1180px) { .fl-plans.is-multi { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .fl-heading { flex-direction: column; align-items: stretch; gap: 14px; } }
@media (max-width: 760px) {
  .fl-controls { gap: 6px; }
  .fl-date-field { flex: 1 1 100%; }
  .fl-time-group { flex: 1 1 auto; }
  .fl-time-field { flex: 1; justify-content: center; }
  .fl-bar { padding-top: 6px; }
  .fl-areas { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; scrollbar-width: thin; }
  .fl-area { flex-shrink: 0; }
  .fl-legend-chip { padding: 5px 9px; font-size: 11px; }
  .fl-plan-scroll { max-height: 64vh; }
  .fl-plan-stage { min-width: 640px; }
  .fl-popover { position: fixed; left: 0; right: 0; bottom: 0; width: auto; max-width: none; max-height: 72vh; overflow: auto; border-radius: 18px 18px 0 0; border-bottom: 0; padding: 18px 18px calc(16px + env(safe-area-inset-bottom)); z-index: 60; box-shadow: 0 -20px 60px #000c; }
  .fl-popover::before { content: ""; display: block; width: 44px; height: 4px; margin: -6px auto 12px; border-radius: 3px; background: #4a4f58; }
  .fl-area, .fl-step, .fl-now, .fl-upcoming-head .text-button, .fl-popover-actions .btn { min-height: 44px; }
  .fl-zoom-button, .fl-popover-close { width: 44px; height: 44px; }
  .fl-upcoming { padding: 16px 14px 6px; }
  .fl-upcoming-row { grid-template-columns: 46px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 6px; }
  .fl-upcoming-table { grid-column: 2; justify-self: start; }
  .fl-upcoming-row .fl-pill { grid-column: 2; justify-self: start; }
}
@media (max-width: 600px) { .fl-heading h1 { font-size: 26px; } .fl-zoom { right: 8px; bottom: 8px; } .fl-plan-stage { min-width: 600px; } }
@media (max-width: 360px) { .fl-step { min-width: 40px; } .fl-time-select { font-size: 15px; } .fl-legend-chip { gap: 5px; padding: 5px 7px; } .fl-popover-actions { flex-direction: column; } }
@media (prefers-reduced-motion: reduce) { .fl-table-top { transition: none; } }