/* CraveDash — floor plan (designer + live view). Used by Admin and EPOS. */
.fp2{ display:flex; flex-direction:column; gap:12px; }
.fp2-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.fp2-areas{ display:flex; gap:6px; flex-wrap:wrap; }
.fp2-area{ border:1px solid #d6dbe3; background:#fff; border-radius:999px; padding:7px 16px; font-size:13px; font-weight:700; color:#334155; transition:all .15s; }
.fp2-area:hover{ border-color:#0b84f3; color:#0b84f3; }
.fp2-area span{ background:#eef1f5; border-radius:99px; padding:0 7px; margin-left:4px; font-size:11px; }
.fp2-area.active{ background:var(--fp-accent,#081732); border-color:var(--fp-accent,#081732); color:#fff; }
.fp2-area.active span{ background:rgba(255,255,255,.2); }
.fp2-tools{ display:flex; gap:6px; flex-wrap:wrap; }
.fp2-legend{ display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:#64748b; font-weight:600; }
.fp2-legend .lg::before{ content:''; display:inline-block; width:12px; height:12px; border-radius:3px; margin-right:5px; vertical-align:-2px; border:2px solid; }
.fp2-legend .free::before{ border-color:#94a3b8; background:#fff; }
.fp2-legend .occupied::before{ border-color:#16a34a; background:#dcfce7; }
.fp2-legend .billing::before{ border-color:#f59e0b; background:#fef3c7; }
.fp2-legend .reserved::before{ border-color:#0b84f3; background:#e0efff; }
.fp2-body{ display:flex; gap:14px; align-items:flex-start; }
.fp2-scroll{ flex:1; min-width:0; overflow:auto; border:1px solid #dbe4ef; border-radius:18px; max-height:68vh; box-shadow:inset 0 2px 10px rgba(8,23,50,.05);
  background:
    linear-gradient(rgba(8,23,50,.035) 1px, transparent 1px) 0 0 / var(--fp-unit,90px) var(--fp-unit,90px),
    linear-gradient(90deg, rgba(8,23,50,.035) 1px, transparent 1px) 0 0 / var(--fp-unit,90px) var(--fp-unit,90px),
    radial-gradient(1200px 500px at 20% 0%, #ffffff 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg,#f3f7fc,#e9f0f8); }
.fp2-canvas{ position:relative; width:1300px; height:820px; --fp-unit:90px; background-size:var(--fp-unit) var(--fp-unit); user-select:none; touch-action:none; }
.fp2-t{ position:absolute; border-radius:14px; cursor:pointer; touch-action:none; transition:transform .15s, filter .15s; --st:#94a3b8; --st-bg:#ffffff; }
.fp2-t:hover{ transform:translateY(-2px); filter:drop-shadow(0 10px 14px rgba(8,23,50,.18)); }
.fp2-t.dragging{ transition:none; z-index:5; filter:drop-shadow(0 16px 22px rgba(8,23,50,.3)); }
.fp2-top-surface{ position:absolute; inset:0; border-radius:inherit; display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:2;
  background:linear-gradient(145deg, #ffffff, var(--st-bg)); border:3px solid var(--st); box-shadow:0 6px 16px -8px rgba(8,23,50,.35), inset 0 0 0 5px rgba(255,255,255,.7); }
.fp2-t.shape-round, .fp2-t.shape-round .fp2-top-surface{ border-radius:50%; }
.fp2-t.shape-square, .fp2-t.shape-rect{ border-radius:14px; }
.fp2-chair{ position:absolute; width:18px; height:10px; border-radius:6px 6px 3px 3px; background:#cfd9e6; box-shadow:inset 0 -2px 0 rgba(8,23,50,.12); z-index:1; transition:background .15s; }
.fp2-t.selected .fp2-top-surface{ box-shadow:0 0 0 4px rgba(11,132,243,.35), 0 10px 22px -8px rgba(11,132,243,.55); }
.fp2-t.inactive{ opacity:.45; }
.fp2-t.inactive .fp2-top-surface{ border-style:dashed; }
.fp2-t-num{ font-weight:800; font-size:17px; color:#081732; line-height:1; font-family:'Poppins','Inter',sans-serif; }
.fp2-t-seats{ font-size:10.5px; color:#64748b; margin-top:3px; font-weight:600; }
.fp2-t-info{ font-size:10px; font-weight:800; color:#081732; margin-top:2px; white-space:nowrap; }
.fp2-pill{ position:absolute; left:50%; bottom:-34px; transform:translateX(-50%); z-index:3; font-size:9.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; padding:2px 8px; border-radius:99px; background:var(--st); color:#fff; white-space:nowrap; box-shadow:0 4px 10px -4px rgba(8,23,50,.4); }
.fp2-t.st-free{ --st:#94a3b8; --st-bg:#f8fafc; }
.fp2-t.st-free .fp2-pill{ background:#fff; color:#64748b; border:1px solid #dbe4ef; }
.fp2-t.st-occupied{ --st:#16a34a; --st-bg:#dcfce7; }
.fp2-t.st-occupied .fp2-chair{ background:#86efac; }
.fp2-t.st-billing{ --st:#f59e0b; --st-bg:#fef3c7; }
.fp2-t.st-billing .fp2-chair{ background:#fcd34d; }
.fp2-t.st-billing .fp2-top-surface{ animation:fpPulse 1.6s ease-in-out infinite; }
.fp2-t.st-reserved{ --st:#0b84f3; --st-bg:#e0efff; }
.fp2-t.st-reserved .fp2-chair{ background:#93c5fd; }
@keyframes fpPulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(245,158,11,.45), inset 0 0 0 5px rgba(255,255,255,.7); } 50%{ box-shadow:0 0 0 8px rgba(245,158,11,0), inset 0 0 0 5px rgba(255,255,255,.7); } }
.fp2-seats{ display:none; }
.fp2-empty{ position:absolute; left:50%; top:40%; transform:translate(-50%,-50%); color:#94a3b8; font-weight:600; }
.fp2-props{ width:270px; flex:0 0 270px; background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:16px; box-shadow:0 10px 30px -20px rgba(8,23,50,.4); }
.fp2-counts{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.fp2-counts div{ border-radius:12px; padding:10px 12px; font-size:12px; font-weight:600; color:#475569; }
.fp2-counts b{ display:block; font-size:20px; color:#0f172a; }
.fp2-counts .free{ background:#f1f5f9; } .fp2-counts .occupied{ background:#dcfce7; } .fp2-counts .billing{ background:#fef3c7; } .fp2-counts .reserved{ background:#e0efff; }
.fp2-open{ display:flex; justify-content:space-between; gap:8px; padding:8px; border:1px solid #e2e8f0; border-radius:10px; margin-bottom:6px; cursor:pointer; }
.fp2-open:hover{ background:#f8fafc; }
@media (max-width: 900px){ .fp2-body{ flex-direction:column; } .fp2-props{ width:100%; flex:auto; } }
/* ---- advance bookings ---- */
.fp2-bk{ position:absolute; top:-12px; right:-14px; z-index:4; font-size:9.5px; font-weight:800; padding:2px 7px; border-radius:99px; background:#081732; color:#fff; white-space:nowrap; box-shadow:0 4px 10px -4px rgba(8,23,50,.5); }
.fp2-when{ background:#fff; border:1px solid #e2e8f0; border-radius:14px; padding:10px 12px; }
.fp2-tl-wrap{ background:#fff; border:1px solid #e2e8f0; border-radius:18px; padding:14px; box-shadow:0 10px 30px -24px rgba(8,23,50,.4); }
.fp2-tl-head{ display:flex; flex-wrap:wrap; gap:8px; align-items:baseline; justify-content:space-between; margin-bottom:10px; }
.fp2-tl{ overflow-x:auto; scrollbar-width:thin; }
.fp2-tl table{ border-collapse:separate; border-spacing:0; min-width:100%; }
.fp2-tl th, .fp2-tl td{ height:38px; min-width:34px; padding:2px; border-bottom:1px solid #eef2f7; text-align:center; }
.fp2-tl thead th{ height:24px; font-size:10.5px; color:#64748b; font-weight:700; text-align:left; white-space:nowrap; border-bottom:2px solid #e2e8f0; }
.fp2-tl thead th.sel{ color:#0b84f3; }
.fp2-tl td{ border-left:1px dashed #eef2f7; }
.fp2-tl .tl-t{ position:sticky; left:0; background:#fff; z-index:2; text-align:left; font-size:12.5px; font-weight:800; color:#081732; min-width:66px; padding-right:8px; white-space:nowrap; }
.fp2-tl .tl-t span{ font-size:10.5px; color:#94a3b8; font-weight:700; }
.fp2-tl td.past{ background:repeating-linear-gradient(135deg,#f8fafc 0 6px,#f1f5f9 6px 12px); }
.fp2-tl td.now{ box-shadow:inset 2px 0 0 #ef4444; }
.tl-free{ width:100%; height:100%; border:0; background:transparent; color:transparent; border-radius:8px; }
.tl-free:hover{ background:#e9f4ff; color:#0b84f3; }
.tl-bk{ width:100%; height:100%; border:0; border-radius:9px; text-align:left; padding:3px 8px; color:#fff; background:linear-gradient(135deg,#0b84f3,#2fb4ff); line-height:1.15; overflow:hidden; box-shadow:0 4px 10px -6px rgba(11,132,243,.8); }
.tl-bk b{ display:block; font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tl-bk span{ font-size:10px; opacity:.9; white-space:nowrap; }
.tl-bk.st-seated{ background:linear-gradient(135deg,#16a34a,#4ade80); }
.fp2-bkrow{ border-left:4px solid #0b84f3 !important; }
.fp2-bkrow.st-seated{ border-left-color:#16a34a !important; }
.fp2-bkrow .bk-st{ font-size:10.5px; font-weight:800; color:#0b84f3; align-self:center; }
.fp2-bkrow.st-seated .bk-st{ color:#16a34a; }
.bk-head{ background:linear-gradient(135deg,#081732,#0b84f3); color:#fff; }
.bk-head .modal-title{ color:#fff; }
.bk-slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:6px; }
.bk-slot{ border:1px solid #dbe4ef; background:#fff; border-radius:10px; padding:6px 4px; font-weight:800; font-size:13px; color:#081732; line-height:1.1; }
.bk-slot small{ display:block; font-size:10px; font-weight:600; color:#16a34a; }
.bk-slot.on{ background:#0b84f3; border-color:#0b84f3; color:#fff; } .bk-slot.on small{ color:#e0efff; }
.bk-slot.full{ background:#f8fafc; color:#94a3b8; } .bk-slot.full small{ color:#94a3b8; }
.bk-tables{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:6px; }
.bk-tb{ border:1px solid #dbe4ef; background:#fff; border-radius:12px; padding:8px 10px; text-align:left; line-height:1.2; }
.bk-tb b{ display:block; color:#081732; } .bk-tb span{ font-size:11px; color:#64748b; } .bk-tb em{ display:block; font-size:10.5px; font-style:normal; color:#ef4444; font-weight:700; }
.bk-tb.on{ border-color:#0b84f3; background:#e9f4ff; box-shadow:0 0 0 2px rgba(11,132,243,.25); }
.bk-tb.off{ opacity:.5; }
.fp2{ gap:14px; }

/* ---- Book a table: day time-line per table ---- */
.bt-bar{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:12px; }
.bt-bar input[type=date]{ width:160px; }
.bt-sum{ font-size:13px; color:#475569; }
.bt-head, .bt-row{ display:grid; grid-template-columns:210px 1fr; gap:12px; align-items:stretch; }
.bt-head .bt-track{ height:20px; background:none; border:0; cursor:default; }
.bt-head .bt-track span{ position:absolute; transform:translateX(-50%); font-size:11px; font-weight:700; color:#64748b; }
.bt-row{ padding:10px 0; border-top:1px solid #eef2f7; }
.bt-name b{ display:block; color:#081732; }
.bt-name small{ color:#64748b; font-size:12px; }
.bt-count{ display:flex; gap:6px; margin:4px 0; }
.bt-count span{ font-size:11px; font-weight:800; padding:1px 8px; border-radius:99px; background:#f1f5f9; color:#64748b; }
.bt-count span.on{ background:#e0efff; color:#0b84f3; } .bt-count span.free{ background:#dcfce7; color:#15803d; }
.bt-times{ display:flex; flex-wrap:wrap; gap:4px; }
.bt-times span{ font-size:11px; font-weight:700; border:1px solid #cfe0f3; border-radius:6px; padding:0 5px; color:#0b84f3; }
.bt-times span.st-seated{ color:#15803d; border-color:#bbf7d0; }
.bt-times em{ font-size:11px; color:#94a3b8; }
.bt-track{ position:relative; min-height:46px; background:repeating-linear-gradient(90deg,#f8fbff,#f8fbff 10px,#f3f8fe 10px,#f3f8fe 20px); border:1px solid #e3ebf5; border-radius:10px; cursor:copy; overflow:hidden; }
.bt-grid{ position:absolute; top:0; bottom:0; border-left:1px dashed #dbe5f0; }
.bt-now{ position:absolute; top:0; bottom:0; border-left:2px solid #dc2626; z-index:2; }
.bt-bk{ position:absolute; top:5px; bottom:5px; border:0; border-radius:8px; background:#0b84f3; color:#fff; font-size:11px; text-align:left; padding:2px 6px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; z-index:3; cursor:pointer; box-shadow:0 2px 6px rgba(11,132,243,.3); }
.bt-bk.st-seated{ background:#16a34a; box-shadow:0 2px 6px rgba(22,163,74,.3); }
.bt-legend{ display:flex; gap:16px; font-size:12px; color:#64748b; margin-top:10px; flex-wrap:wrap; }
.bt-legend i{ display:inline-block; width:12px; height:12px; border-radius:3px; vertical-align:-2px; margin-right:4px; background:#0b84f3; }
.bt-legend i.st-seated{ background:#16a34a; } .bt-legend i.free{ background:#f3f8fe; border:1px solid #e3ebf5; }
@media (max-width:900px){ .bt-head, .bt-row{ grid-template-columns:130px 1fr; } }
.bt-head .bt-track{ overflow:visible; }
.bt-head .bt-track span:first-child{ transform:none; }
.bt-head .bt-track span:last-child{ transform:translateX(-100%); }