/* BoardFlow — BotFlow dizayn sisteminin yaşıl (bilyard) variantı + zal / masa komponentləri */

    :root {
      --page: 244 246 245; --card: 255 255 255; --elev: 239 242 240; --hov: 233 238 235;
      --line: 224 230 227; --line2: 203 212 207;
      --t1: 14 22 19; --t2: 58 72 66; --t3: 98 114 107; --t4: 146 160 154;
      --accent: 11 110 81; --accent-soft: 228 244 236;
      --ok: 4 150 105; --ok-soft: 230 250 242;
      --warn: 210 115 6; --warn-soft: 255 247 230;
      --danger: 222 33 72; --danger-soft: 255 238 241;
      --info: 124 58 237; --info-soft: 244 240 255;
      --safe-b: env(safe-area-inset-bottom, 0px);
      color-scheme: light;
    }
    html.dark {
      --page: 7 11 10; --card: 13 19 17; --elev: 19 27 24; --hov: 25 35 31;
      --line: 31 43 39; --line2: 47 63 57;
      --t1: 238 245 241; --t2: 199 212 205; --t3: 134 153 145; --t4: 87 104 97;
      --accent: 49 185 147; --accent-soft: 11 46 36;
      --ok: 52 211 153; --ok-soft: 8 52 40;
      --warn: 251 191 36; --warn-soft: 62 40 6;
      --danger: 251 113 133; --danger-soft: 70 14 31;
      --info: 167 139 250; --info-soft: 42 26 86;
      color-scheme: dark;
    }
    html, body { -webkit-tap-highlight-color: transparent; }
    body { font-family: 'Inter', system-ui, sans-serif; font-feature-settings: 'cv11', 'ss01'; overscroll-behavior-y: none; }
    *:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }
    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-thumb { background: rgb(var(--line2)); border-radius: 99px; }
    ::-webkit-scrollbar-track { background: transparent; }
    .no-scrollbar { scrollbar-width: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .tnum { font-variant-numeric: tabular-nums; }
    [hidden] { display: none !important; }

    /* ---------- Keçid (switch) ---------- */
    .switch { position: relative; display: inline-flex; flex-shrink: 0; width: 46px; height: 28px; }
    .switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
    .switch span { position: absolute; inset: 0; border-radius: 99px; background: rgb(var(--line2)); transition: background .2s; }
    .switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .22s cubic-bezier(.22,1,.36,1); }
    .switch input:checked + span { background: #0b6e51; }
    html.dark .switch input:checked + span { background: #1b8b64; }
    .switch input:checked + span::after { transform: translateX(18px); }
    .switch input:focus-visible + span { box-shadow: 0 0 0 4px rgb(var(--accent) / .25); }
    .switch input:disabled + span { opacity: .5; }

    /* ---------- Sheet / dialoq ---------- */
    .sheet-wrap { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; }
    .sheet-backdrop { position: absolute; inset: 0; background: rgb(2 6 23 / .5); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: bfFade .2s ease both; }
    .sheet { position: relative; width: 100%; max-height: 92dvh; display: flex; flex-direction: column; background: rgb(var(--card)); color: rgb(var(--t1)); border-radius: 24px 24px 0 0; box-shadow: 0 -20px 60px -20px rgb(0 0 0 / .4); animation: bfUp .32s cubic-bezier(.22,1,.36,1) both; will-change: transform; }
    .sheet.full { height: 100dvh; max-height: 100dvh; border-radius: 0; }
    .sheet-handle { width: 40px; height: 5px; border-radius: 99px; background: rgb(var(--line2)); margin: 8px auto 0; flex-shrink: 0; }
    .sheet-head { display: flex; align-items: center; gap: 12px; padding: 10px 16px 12px 20px; flex-shrink: 0; }
    .sheet-body { overflow-y: auto; overscroll-behavior: contain; flex: 1; padding: 4px 20px 20px; }
    .sheet-foot { flex-shrink: 0; display: flex; gap: 10px; padding: 12px 20px calc(12px + var(--safe-b)); border-top: 1px solid rgb(var(--line)); background: rgb(var(--card)); border-radius: 0 0 0 0; }
    .sheet-wrap.closing .sheet { animation: bfDown .2s ease-in both; }
    .sheet-wrap.closing .sheet-backdrop { animation: bfFadeOut .2s ease-in both; }
    @media (min-width: 640px) {
      .sheet-wrap { align-items: center; padding: 24px; }
      .sheet { max-width: var(--w, 520px); max-height: 88vh; border-radius: 22px; animation: bfPop .22s cubic-bezier(.22,1,.36,1) both; box-shadow: 0 30px 80px -24px rgb(0 0 0 / .45); }
      .sheet.full { height: auto; max-height: 88vh; border-radius: 22px; }
      .sheet-handle { display: none; }
      .sheet-head { padding: 18px 16px 12px 24px; }
      .sheet-body { padding: 4px 24px 24px; }
      .sheet-foot { padding: 14px 24px; border-radius: 0 0 22px 22px; }
      .sheet-wrap.closing .sheet { animation: bfPopOut .16s ease-in both; }
      /* Detal paneli: böyük ekranda sağdan açılan çəkməcə */
      .sheet-wrap.drawer { justify-content: flex-end; padding: 0; align-items: stretch; }
      .sheet-wrap.drawer .sheet { max-width: var(--w, 480px); height: 100dvh; max-height: 100dvh; border-radius: 0; animation: bfRight .3s cubic-bezier(.22,1,.36,1) both; }
      .sheet-wrap.drawer .sheet-foot { border-radius: 0; }
      .sheet-wrap.drawer.closing .sheet { animation: bfRightOut .2s ease-in both; }
    }
    @keyframes bfFade { from { opacity: 0 } to { opacity: 1 } }
    @keyframes bfFadeOut { to { opacity: 0 } }
    @keyframes bfUp { from { transform: translateY(100%) } to { transform: none } }
    @keyframes bfDown { to { transform: translateY(100%) } }
    @keyframes bfPop { from { opacity: 0; transform: translateY(8px) scale(.98) } to { opacity: 1; transform: none } }
    @keyframes bfPopOut { to { opacity: 0; transform: scale(.98) } }
    @keyframes bfRight { from { transform: translateX(100%) } to { transform: none } }
    @keyframes bfRightOut { to { transform: translateX(100%) } }
    @keyframes bfSpin { to { transform: rotate(360deg) } }
    @keyframes bfPulse { 0%,100% { opacity: 1 } 50% { opacity: .35 } }
    @keyframes bfBounce { 0%,80%,100% { transform: translateY(0); opacity: .5 } 40% { transform: translateY(-4px); opacity: 1 } }
    @keyframes bfConfetti { 0% { transform: translateY(-20px) rotate(0); opacity: 1 } 100% { transform: translateY(110vh) rotate(720deg); opacity: 0 } }

    .spinner { width: 16px; height: 16px; border: 2px solid rgb(255 255 255 / .35); border-top-color: #fff; border-radius: 50%; display: inline-block; animation: bfSpin .7s linear infinite; }
    .pulse-dot { animation: bfPulse 1.6s ease-in-out infinite; }

    /* ---------- Alt naviqasiya ---------- */
    .bn { padding-bottom: var(--safe-b); }
    .bn-item { color: rgb(var(--t3)); }
    .bn-item.on { color: rgb(var(--accent)); }
    .bn-item.on .bn-ico { background: rgb(var(--accent-soft)); }
    .nav-link.on { background: rgb(var(--accent-soft)); color: rgb(var(--t1)); }
    .nav-link.on i { color: rgb(var(--accent)); }
    .main-pad { padding-bottom: calc(88px + var(--safe-b)); }
    @media (min-width: 1024px) { .main-pad { padding-bottom: 32px; } }

    /* ---------- Təqvim (timeline) ---------- */
    .tl-grid { background-image: linear-gradient(to bottom, rgb(var(--line)) 1px, transparent 1px); }
    .tl-off { background: repeating-linear-gradient(135deg, rgb(var(--elev)) 0 6px, rgb(var(--hov)) 6px 12px); }
    .hatch { background-image: repeating-linear-gradient(135deg, rgb(var(--t4) / .18) 0 6px, transparent 6px 12px); }

    /* ---------- Mesaj qutusu (panel) ---------- */
    .chat-wall { background-color: rgb(var(--elev)); background-image: radial-gradient(rgb(var(--t4) / .12) 1px, transparent 1.4px); background-size: 20px 20px; }


    /* Skeleton-sız sadə fade */
    .view-enter { animation: fadeUp .28s cubic-bezier(.22,1,.36,1) backwards; }
    .saved-pill { position: fixed; left: 50%; bottom: calc(96px + var(--safe-b)); transform: translateX(-50%); z-index: 70; pointer-events: none; transition: opacity .2s; }
    @media (min-width: 1024px) { .saved-pill { bottom: 28px; } }
    @keyframes fadeUp { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } }
  
/* ---------- Zal (floor) ---------- */
.floor-wrap { position: relative; overflow: hidden; border-radius: 20px; border: 1px solid rgb(var(--line)); background-color: rgb(var(--elev)); touch-action: none; }
.floor-grid { background-image: radial-gradient(rgb(var(--t4) / .22) 1px, transparent 1.3px); background-size: 24px 24px; }
html.dark .floor-grid { background-image: radial-gradient(rgb(var(--t4) / .35) 1px, transparent 1.3px); }
.floor-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.f-item { position: absolute; transform-origin: center center; user-select: none; -webkit-user-select: none; }
.f-table { cursor: pointer; transition: filter .25s; }
.f-table svg { display: block; overflow: visible; filter: drop-shadow(0 10px 16px rgb(0 0 0 / .28)); }
.f-table:hover svg { filter: drop-shadow(0 14px 22px rgb(0 0 0 / .38)); }
.f-table .felt { transition: fill .4s; }
.f-table.free .felt-shade { opacity: .55; }
.f-table.busy .lamp { opacity: 1; }
.f-table .lamp { opacity: 0; transition: opacity .5s; }
.f-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; text-align: center; white-space: nowrap; }
.f-num { font: 800 20px/1 'Manrope', Inter, sans-serif; letter-spacing: -.02em; color: #fff; text-shadow: 0 1px 2px rgb(0 0 0 / .45); }
.f-chip { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; padding: 3px 9px; border-radius: 99px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgb(0 0 0 / .55); color: #fff; backdrop-filter: blur(4px); }
.f-chip.warn { background: rgb(var(--warn)); color: #1b1203; }
.f-chip.danger { background: rgb(var(--danger)); }
.f-chip.res { background: #fff; color: #3a2a06; }
.f-chip.paused { background: rgb(var(--info)); }
.f-ring { position: absolute; inset: -7px; border-radius: 16px; pointer-events: none; }
.f-table.ending .f-ring { box-shadow: 0 0 0 2px rgb(var(--warn)); animation: bfPulse 1.2s ease-in-out infinite; }
.f-table.over .f-ring { box-shadow: 0 0 0 3px rgb(var(--danger)); animation: bfPulse .8s ease-in-out infinite; }
.f-table.reserved .f-ring { box-shadow: 0 0 0 2px #f5c451; }
.f-table.sel .f-ring { box-shadow: 0 0 0 3px rgb(var(--accent)); animation: none; }
.f-alert { position: absolute; right: -9px; top: -9px; width: 24px; height: 24px; border-radius: 99px; display: grid; place-items: center; font-size: 11px; color: #fff; background: rgb(var(--danger)); box-shadow: 0 0 0 3px rgb(var(--elev)); animation: bfPop .3s both; z-index: 2; }
.f-decor { pointer-events: none; display: grid; place-items: center; font-size: 11px; font-weight: 700; color: rgb(var(--t3)); border-radius: 12px; }
.f-decor.bar { background: linear-gradient(180deg, rgb(var(--card)), rgb(var(--hov))); border: 1px solid rgb(var(--line2)); }
.f-decor.wall { background: rgb(var(--t4) / .55); border-radius: 4px; }
.f-decor.sofa { background: rgb(var(--info) / .18); border: 1px solid rgb(var(--info) / .35); border-radius: 14px; }
.f-decor.plant { background: radial-gradient(circle, rgb(var(--ok) / .55), rgb(var(--ok) / .15) 70%); border-radius: 50%; }
.f-decor.door { background: repeating-linear-gradient(90deg, rgb(var(--t4) / .5) 0 6px, transparent 6px 10px); border-radius: 3px; }
.f-decor.column { background: rgb(var(--t4) / .45); border-radius: 50%; }
.f-decor.zone { border: 2px dashed rgb(var(--t4) / .55); background: rgb(var(--t4) / .06); border-radius: 18px; align-items: start; justify-items: start; padding: 10px 12px; }

/* builder */
.builder .f-item { cursor: grab; pointer-events: auto; }
.builder .f-item.dragging { cursor: grabbing; z-index: 50; }
.builder .f-item.sel { outline: 2px solid rgb(var(--accent)); outline-offset: 6px; border-radius: 10px; }
.builder .f-decor { pointer-events: auto; }
.rot-handle { position: absolute; left: 50%; top: -34px; width: 22px; height: 22px; margin-left: -11px; border-radius: 99px; background: rgb(var(--accent)); color: #fff; display: grid; place-items: center; font-size: 10px; cursor: grab; box-shadow: 0 4px 10px -2px rgb(0 0 0 / .35); }
.rot-handle::after { content: ''; position: absolute; left: 50%; top: 22px; width: 2px; height: 12px; margin-left: -1px; background: rgb(var(--accent)); }
.res-handle { position: absolute; right: -8px; bottom: -8px; width: 16px; height: 16px; border-radius: 5px; background: rgb(var(--accent)); cursor: nwse-resize; }

/* canlı nöqtə */
.live-dot { width: 8px; height: 8px; border-radius: 99px; background: rgb(var(--ok)); box-shadow: 0 0 0 0 rgb(var(--ok) / .6); animation: liveDot 2s infinite; }
@keyframes liveDot { 0% { box-shadow: 0 0 0 0 rgb(var(--ok) / .55) } 70% { box-shadow: 0 0 0 8px rgb(var(--ok) / 0) } 100% { box-shadow: 0 0 0 0 rgb(var(--ok) / 0) } }

/* rezervasiya zaman şkalası */
.tl-row { display: grid; grid-template-columns: 120px 1fr; }
.tl-track { position: relative; height: 52px; border-bottom: 1px solid rgb(var(--line)); }
.tl-hours { background-image: linear-gradient(to right, rgb(var(--line)) 1px, transparent 1px); }
.tl-block { position: absolute; top: 7px; bottom: 7px; border-radius: 10px; padding: 4px 8px; overflow: hidden; font-size: 11px; line-height: 1.25; font-weight: 600; cursor: pointer; transition: transform .15s, box-shadow .15s; }
.tl-block:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -8px rgb(0 0 0 / .4); }
.tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: rgb(var(--danger)); z-index: 3; pointer-events: none; }
.tl-now::before { content: ''; position: absolute; top: -4px; left: -4px; width: 10px; height: 10px; border-radius: 99px; background: rgb(var(--danger)); }

/* istilik xəritəsi */
.heat { display: grid; gap: 3px; }
.heat i { display: block; aspect-ratio: 1.6; border-radius: 4px; background: rgb(var(--accent) / var(--a, .05)); }

/* giriş ekranı — canlı bilyard masası */
.login-felt { background: radial-gradient(120% 90% at 30% 20%, #127556 0%, #0a4a38 55%, #062b21 100%); }
.login-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* müştəri səhifəsi */
.cust-hero { background: radial-gradient(140% 90% at 20% 0%, #13805d 0%, #0a4a38 55%, #052119 100%); }
.qty-btn { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 10px; }
.num-big { font: 800 44px/1 'Manrope', Inter, sans-serif; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.brand-word { font-family: 'Manrope', Inter, sans-serif; font-weight: 800; letter-spacing: -.045em; }