/* Moose Admin — design curat, mobil întâi */
.adm { --tabh: 64px; --sidew: 248px; background: var(--bg); min-height: 100svh; -webkit-tap-highlight-color: transparent; }
.adm .ic { width: 20px; height: 20px; flex: none; }
.ib { width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); display: inline-grid; place-items: center; color: var(--ink); transition: background .2s, border-color .2s; }
.ib:hover { border-color: var(--line-2); }
.ib.spin .ic { animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* status */
.s-confirmata { --s: #2F6FED; } .s-sosit { --s: #16996A; } .s-finalizata { --s: #7A837C; } .s-neprezentare { --s: #D9480F; } .s-anulata { --s: #C2253B; }
.chip-s { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font: 600 11.5px/1 var(--sans); color: var(--s); background: color-mix(in srgb, var(--s) 12%, transparent); white-space: nowrap; flex: none; }
.chip-s::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--s); }

/* ---------- login ---------- */
.login { min-height: 100svh; display: grid; place-items: center; padding: 24px 18px calc(24px + env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 50% 0%, rgba(242, 185, 28, .18), transparent 60%), var(--bg); }
.login[hidden], .app[hidden] { display: none; }
.lg-card { width: min(400px, 100%); border-radius: 28px; padding: 34px 26px 22px; display: grid; gap: 12px; text-align: center; --glass: var(--glass-strong); animation: rise .5s var(--ease); }
.lg-logo { width: 64px; height: auto; aspect-ratio: 1653/1631; color: var(--yellow); margin: 0 auto; filter: drop-shadow(0 8px 18px rgba(242, 185, 28, .4)); }
.lg-brand { margin: 4px 0 0; font: 500 13px/1 var(--display); letter-spacing: .32em; }
.lg-brand span { letter-spacing: .08em; color: var(--muted); margin-left: 4px; }
.lg-card h1 { font: 300 30px/1.1 var(--display); margin: 10px 0 0; color: var(--ink); }
.lg-sub { margin: 0 0 8px; color: var(--muted); font-size: 14px; }
.lg-card input, .lg-card select { height: 54px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface); padding: 0 16px; font: 400 16px var(--sans); color: var(--ink); width: 100%; }
.lg-card input:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 22%, transparent); }
.lg-card select { height: 42px; width: auto; justify-self: center; font-size: 14px; border-color: var(--line); margin-top: 6px; }
.lg-err { min-height: 18px; margin: 0; color: #C2253B; font-size: 13.5px; }

/* ---------- ecran comun AdRebound (pre-login) — minimalist, light, premium ---------- */
.ad-login {
  position: relative;
  --bg: #F7F7FA; --surface: #FFFFFF; --ink: #15161B; --ink-2: #4A4C57; --muted: #8C8FA0;
  --line: rgba(15, 15, 35, .08); --line-2: rgba(15, 15, 35, .14);
  --glass: rgba(255, 255, 255, .80); --glass-strong: rgba(255, 255, 255, .97);
  --glass-line: rgba(15, 15, 35, .06); --glass-shadow: 0 30px 80px -28px rgba(20, 20, 60, .16), 0 2px 10px rgba(20, 20, 60, .05);
  --yellow: #6D74E8; --yellow-2: #8389F0; --yellow-ink: #FFFFFF;
  background: radial-gradient(ellipse at 50% 0%, rgba(109, 116, 232, .10), transparent 60%), var(--bg);
  color-scheme: light;
}
.pre-gear { position: fixed; top: calc(14px + env(safe-area-inset-top)); left: 14px; z-index: 40; }
.ad-mark { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 0 18px; }
.ad-mark img { width: 22px; height: auto; display: block; }
.ad-mark span { font: 400 15px var(--display); letter-spacing: .01em; color: var(--ink-2); }
.ad-mark span b { font-weight: 600; color: var(--ink); }

/* ---------- drawer setări pre-login ---------- */
.predrawer-wrap { position: fixed; inset: 0; z-index: 90; }
.predrawer-wrap[hidden] { display: none; }
.predrawer-bg { position: absolute; inset: 0; background: rgba(10, 14, 11, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.predrawer { position: absolute; top: 0; left: 0; bottom: 0; width: min(300px, 84vw); --glass: var(--glass-strong); border-radius: 0 24px 24px 0; padding: 20px 18px calc(20px + env(safe-area-inset-bottom)); display: grid; gap: 14px; align-content: start; animation: slideIn .3s var(--ease); }
@keyframes slideIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }
.predrawer h2 { font: 400 19px var(--display); margin: 8px 0 0; }
.pre-x { position: absolute; top: 12px; right: 12px; }
.dev-link { justify-self: start; margin-top: auto; border: 0; background: transparent; color: var(--muted); font: 400 13px var(--sans); text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }

/* ---------- Super-Admin (Developer mode, gold obsidian) ---------- */
.superadmin[hidden] { display: none; }
.superadmin { min-height: 100svh; background: var(--bg); }
.sa-top { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 10px; padding: calc(14px + env(safe-area-inset-top)) 18px 14px; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.sa-logo { width: 26px; height: 26px; color: var(--yellow); }
.sa-brand { flex: 1; font: 400 16px var(--display); }
.sa-brand b { font-weight: 600; }
.sa-body { padding: 22px 18px calc(30px + env(safe-area-inset-bottom)); max-width: 760px; margin: 0 auto; }
.sa-body h1 { font: 300 28px var(--display); margin: 0; }
.sa-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.sa-head-row .btn { white-space: nowrap; }
.sa-head-row .btn .ic { width: 15px; height: 15px; margin-right: 4px; vertical-align: -2px; }
.sa-sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.sa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.sa-card-wrap { position: relative; }
.sa-card { width: 100%; border-radius: 20px; padding: 20px 18px; text-align: left; border: 1px solid var(--line); background: var(--surface); display: grid; gap: 10px; transition: transform .15s, border-color .15s; }
.sa-card:active { transform: scale(.97); }
.sa-card-badge { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font: 700 14px var(--display); color: #fff; }
.sa-card b { font: 500 16px var(--display); color: var(--ink); }
.sa-card small { color: var(--muted); font-size: 12.5px; }
.sa-card-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: 4px; }
.sa-card-actions .ib { width: 28px; height: 28px; border-radius: 9px; background: color-mix(in srgb, var(--bg) 55%, var(--surface)); border: 1px solid var(--line); }
.sa-card-actions .ic { width: 14px; height: 14px; }
.sa-card-actions .sa-del { color: #D9480F; }

/* ---------- indicator Developer mode + înapoi la dashboard ---------- */
.dev-pill[hidden] { display: none; }
.dev-pill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; display: flex; align-items: center; gap: 9px; padding: 9px 16px 9px 13px; border-radius: 999px; background: #0D1712; color: #EAF7EF; border: 1px solid rgba(52, 211, 113, .5); box-shadow: 0 12px 32px -10px rgba(0, 0, 0, .55); font: 500 13px var(--sans); white-space: nowrap; cursor: pointer; transition: transform .15s; }
.dev-pill:active { transform: translateX(-50%) scale(.96); }
.dev-pill b { font-weight: 600; color: #6EE7A0; }
.dev-pill .ic { width: 15px; height: 15px; }
.dev-sep { width: 1px; height: 16px; background: rgba(255, 255, 255, .2); }
.dev-dot { width: 9px; height: 9px; border-radius: 50%; background: #34D371; animation: devPulse 1.8s ease-in-out infinite; }
@keyframes devPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(52, 211, 113, .28); } 50% { box-shadow: 0 0 0 7px rgba(52, 211, 113, .06); } }
@media (min-width: 760px) { .dev-pill { bottom: 24px; } }

/* ---------- brand mark (siglă tenant sau badge cu inițiale) ---------- */
.brand-mark { display: inline-flex; align-items: center; justify-content: center; }
.brand-initials { display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; font: 700 12px var(--display); }
.side-brand .brand-initials { width: 36px; height: 36px; }
.top-brand .brand-initials { width: 28px; height: 28px; font-size: 10.5px; }
.avatar-initials { width: 100%; height: 100%; border-radius: inherit; display: grid; place-items: center; color: #fff; font: 700 16px var(--display); }

/* ---------- schelet ---------- */
.app { min-height: 100svh; }
.side { display: none; }
.top { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px; padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); border-bottom: 1px solid var(--line); }
.top-brand svg { width: 30px; height: 30px; color: var(--yellow); display: block; }
.top-title { flex: 1; display: grid; line-height: 1.15; }
.top-title b { font: 500 17px var(--display); }
.top-title small { font-size: 11.5px; color: var(--muted); }
.top-title small.bad { color: #D9480F; }
.view { padding: 18px 16px calc(var(--tabh) + 28px + env(safe-area-inset-bottom)); max-width: 1180px; margin: 0 auto; }
.view.vin { animation: stepIn .3s var(--ease); }
.tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 8px calc(6px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: blur(20px) saturate(160%); backdrop-filter: blur(20px) saturate(160%); border-top: 1px solid var(--line); }
.tabs a { display: grid; justify-items: center; gap: 3px; padding: 6px 0; border-radius: 14px; text-decoration: none; color: var(--muted); font: 500 11px/1 var(--sans); min-height: 50px; align-content: center; transition: color .2s, background .2s; }
.tabs a .ic { width: 23px; height: 23px; }
.tabs a.on { color: var(--ink); }
.tabs a.on .ic { color: #C99A17; }
[data-theme="dark"] .tabs a.on .ic { color: var(--yellow); }
.tabs a.on::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--yellow); margin-top: 1px; }

/* ---------- comune ---------- */
.hello { margin: 4px 0 18px; }
.hello h1, .vhead h1 { font: 300 clamp(28px, 7vw, 38px)/1.1 var(--display); margin: 0; letter-spacing: -.01em; }
.hello .eyebrow { margin-bottom: 10px; }
.vhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 16px; }
.adm-head { padding: 10px 14px; margin-left: -14px; margin-right: -14px; padding-left: 14px; padding-right: 14px; border-left: 4px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 10%, transparent); border-radius: 0 14px 14px 0; }
.adm-acct { border: 1px solid var(--yellow); background: color-mix(in srgb, var(--yellow) 8%, var(--surface)); }

/* ---------- Mod Admin — mereu luminos și lizibil, indiferent de tema aleasă pentru restul panoului ---------- */
.app-admin {
  color-scheme: light !important;
  --bg: #F5F0E6 !important; --bg-2: #ECE5D6 !important; --surface: #FFFFFF !important; --ink: #1B241E !important; --ink-2: #47524A !important;
  --muted: #7A837C !important; --line: rgba(27, 36, 30, .12) !important; --line-2: rgba(27, 36, 30, .22) !important;
  --glass: rgba(255, 255, 255, .72) !important; --glass-strong: rgba(255, 255, 255, .9) !important;
  --yellow: #C99A17 !important; --yellow-2: #F2B91C !important; --yellow-ink: #1A1608 !important;
  background: var(--bg);
}
.app-admin .side, .app-admin .tabs { display: none !important; }
.app-admin .top { border-bottom: 1px solid var(--yellow); }
@media (min-width: 760px) {
  .app-admin { grid-template-columns: 1fr !important; }
  .app-admin .top, .app-admin .view { grid-column: 1 !important; }
}
.pill { font-size: 13px; color: var(--ink-2); background: var(--surface); border: 1px solid var(--line); padding: 6px 12px; border-radius: 999px; white-space: nowrap; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 18px; }
.panel h2 { font: 500 12px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.empty { color: var(--muted); font-size: 14.5px; margin: 6px 0; }
.empty.big { text-align: center; padding: 40px 0; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; display: grid; gap: 6px; }
.kpi small { font-size: 12.5px; color: var(--muted); }
.kpi b { font: 300 32px/1 var(--display); font-variant-numeric: tabular-nums; }
.kpi b span { font: 400 13px var(--sans); color: var(--muted); }
.kpi em { font-style: normal; font-size: 11px; color: var(--muted); line-height: 1.3; }
.kpi.gold { background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 22%, var(--surface)), var(--surface)); border-color: color-mix(in srgb, var(--yellow) 45%, transparent); }
.grid2 { display: grid; gap: 14px; }
.col { display: grid; gap: 14px; align-content: start; }
.blist { display: grid; gap: 8px; }
.bcard { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--bg); min-height: 64px; transition: border-color .2s, transform .15s; }
.panel .bcard { background: var(--bg); }
.hgroup .bcard { background: var(--surface); }
.bcard:hover { border-color: var(--line-2); }
.bcard:active { transform: scale(.99); }
.bcard.off { opacity: .55; }
.bcard.off .bc-name { text-decoration: line-through; }
.bc-time { display: grid; text-align: center; min-width: 50px; padding-right: 12px; border-right: 1px solid var(--line); }
.bc-time b { font: 500 16px/1.1 var(--display); font-variant-numeric: tabular-nums; }
.bc-time small { font-size: 11.5px; color: var(--muted); }
.bc-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.bc-name { font: 500 15px/1.25 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-meta { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bc-meta .ic { width: 14px; height: 14px; }
.bc-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.bc-tags:empty { display: none; }
.tag { font-size: 11.5px; color: var(--ink-2); background: color-mix(in srgb, var(--ink) 6%, transparent); padding: 2px 8px; border-radius: 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag.gold { color: #8A6A12; background: color-mix(in srgb, var(--yellow) 20%, transparent); }
[data-theme="dark"] .tag.gold { color: #F2CF6B; }
.prem { color: #A47D10; font-weight: 500; }
[data-theme="dark"] .prem { color: #F2C744; }
.demo-tag { font: 600 9px/1 var(--sans); font-style: normal; letter-spacing: .12em; color: var(--muted); border: 1px solid var(--line-2); padding: 2px 5px; border-radius: 5px; vertical-align: 2px; }
.bars { display: flex; gap: 4px; align-items: flex-end; height: 120px; padding-top: 16px; }
.bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; position: relative; min-width: 0; }
.bar i { width: 100%; max-width: 22px; border-radius: 6px 6px 3px 3px; background: color-mix(in srgb, var(--yellow) 55%, var(--surface)); min-height: 3px; transition: height .5s var(--ease); }
.bar.now i { background: var(--yellow); box-shadow: 0 0 0 2px color-mix(in srgb, var(--yellow) 30%, transparent); }
.bar span { font-size: 9.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar em { position: absolute; top: -2px; font-style: normal; font-size: 9.5px; color: var(--ink-2); }
.spots-mini { display: grid; gap: 8px; }
.spot-mini { text-align: left; padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--yellow) 40%, transparent); background: color-mix(in srgb, var(--yellow) 8%, var(--bg)); display: grid; gap: 3px; }
.spot-mini.static { cursor: default; }
.spot-mini b { font: 500 14px var(--sans); }
.spot-mini small { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- rezervări ---------- */
.daybar { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.day-cur { position: relative; flex: 1; height: 50px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); display: grid; align-content: center; text-align: center; line-height: 1.2; }
.day-cur b { font: 500 15px var(--sans); }
.day-cur small { font-size: 12px; color: var(--muted); }
.day-cur input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.daybar .ib { width: 50px; height: 50px; border-radius: 14px; }
.search { position: relative; margin-bottom: 10px; }
.search .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search input { width: 100%; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px 0 44px; font: 400 16px var(--sans); color: var(--ink); -webkit-appearance: none; appearance: none; }
.search input:focus { outline: none; border-color: var(--yellow); }
.filters { display: flex; gap: 6px; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px 4px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.fchip { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font: 500 13.5px/1 var(--sans); white-space: nowrap; }
.fchip span { color: var(--muted); margin-left: 3px; font-variant-numeric: tabular-nums; }
.fchip.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fchip.on span { color: inherit; opacity: .7; }
.hgroup { margin-bottom: 16px; }
.hgroup h3 { font: 500 12px/1 var(--sans); letter-spacing: .12em; color: var(--muted); margin: 0 0 8px 2px; font-variant-numeric: tabular-nums; }

/* ---------- spoturi (timeline) ---------- */
.timeline { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); -webkit-overflow-scrolling: touch; }
.tscroll { min-width: calc(130px + var(--span) * 62px); }
.trow { display: flex; border-bottom: 1px solid var(--line); min-height: 64px; }
.trow:last-child { border-bottom: 0; }
.tlabel { position: sticky; left: 0; z-index: 2; width: 130px; flex: none; padding: 12px; background: var(--surface); border-right: 1px solid var(--line); display: grid; align-content: center; gap: 2px; }
.tlabel b { font: 500 13px/1.2 var(--sans); }
.tlabel small { font-size: 11px; color: var(--muted); }
.trow.prem .tlabel b { color: #A47D10; }
[data-theme="dark"] .trow.prem .tlabel b { color: #F2C744; }
.ttrack { position: relative; flex: 1; background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--span) - 1px), var(--line) calc(100% / var(--span) - 1px) calc(100% / var(--span))); }
.thead { min-height: 34px; }
.thead .ttrack { background: none; }
.thead .ttrack span { position: absolute; top: 10px; font-size: 11px; color: var(--muted); transform: translateX(4px); font-variant-numeric: tabular-nums; }
.tblock { position: absolute; top: 8px; bottom: 8px; border-radius: 10px; border: 0; padding: 6px 8px; text-align: left; overflow: hidden; background: color-mix(in srgb, var(--s) 16%, var(--surface)); border-left: 3px solid var(--s); display: grid; align-content: center; gap: 1px; min-width: 0; }
.tblock b { font: 500 12px/1.1 var(--sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tblock small { font-size: 10.5px; color: var(--ink-2); white-space: nowrap; }
.trow.other { min-height: 52px; }
.nowline { position: absolute; top: 0; bottom: 0; width: 2px; background: #C2253B; z-index: 1; }
.nowline::before { content: ''; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #C2253B; }

/* ---------- setări ---------- */
.settings { display: grid; gap: 14px; }
.acct { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.avatar { width: 52px; height: 52px; border-radius: 16px; background: #17221B; display: grid; place-items: center; }
.avatar svg { width: 30px; height: 30px; color: var(--yellow); }
.acct b { display: block; font: 500 16px var(--sans); }
.acct small { color: var(--muted); font-size: 13px; }
.btn.wide { width: 100%; }
.btn.danger { color: #C2253B; border-color: color-mix(in srgb, #C2253B 35%, transparent); }
/* Butonul de ieșire din Admin: auriu, plin, bine vizibil — dar separat de
   deconectarea reală a cardului (asta e doar un alt buton, în Setări). */
.btn-logout-admin { --h: 52px; font-weight: 700; font-size: 15.5px; }
.btn .ic { width: 18px; height: 18px; }
.sfield { display: grid; gap: 8px; margin-bottom: 14px; }
.sfield:last-child { margin-bottom: 0; }
.sfield > span { font-size: 14px; color: var(--ink-2); }
.sfield-note { font-size: 11.5px; color: var(--muted); line-height: 1.4; }
.sfield input[type="range"] { width: 100%; accent-color: var(--yellow); height: 28px; }
.seg2 { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--ink) 6%, transparent); }
.seg2 button { height: 40px; border: 0; border-radius: 10px; background: transparent; font: 500 14px/1 var(--sans); color: var(--ink-2); transition: background .2s, color .2s; }
.seg2 button.on { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .1); }
.srow { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; cursor: pointer; min-height: 52px; }
.srow:last-of-type { border-bottom: 0; }
.switch { appearance: none; -webkit-appearance: none; width: 50px; height: 30px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 18%, transparent); position: relative; flex: none; cursor: pointer; transition: background .25s; margin: 0; }
.switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.switch:checked { background: #16996A; }
.switch:checked::after { transform: translateX(20px); }
.sbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; }
.sbtns .btn { --h: 44px; font-size: 13.5px; padding: 0 12px; }
.dbstate { padding: 12px 14px; border-radius: 14px; font-size: 13.5px; }
.dbstate b { font-weight: 600; }
.dbstate p { margin: 4px 0 0; color: var(--ink-2); line-height: 1.45; }
.dbstate.on { background: color-mix(in srgb, #16996A 12%, transparent); }
.dbstate.on b { color: #16996A; }
.dbstate.off { background: color-mix(in srgb, #D9480F 10%, transparent); }
.dbstate.off b { color: #D9480F; }
.gdpr { margin: 0 0 12px; padding-left: 18px; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.gdpr li { margin-bottom: 6px; }
.link { color: var(--ink); font-size: 14px; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.s-about { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.6; }
.s-about small { color: var(--muted); }

/* ---------- fișa rezervării ---------- */
.sheet { position: fixed; inset: 0; z-index: 70; display: grid; align-items: end; }
.sheet[hidden] { display: none; }
.sheet-bg { position: absolute; inset: 0; background: rgba(10, 14, 11, .4); animation: fade .25s; }
.sheet-panel { position: relative; width: 100%; max-height: 92svh; overflow-y: auto; border-radius: 26px 26px 0 0; padding: 22px 18px calc(22px + env(safe-area-inset-bottom)); --glass: var(--glass-strong); animation: sheet .32s var(--ease); overscroll-behavior: contain; }
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } }
.sheet.closing .sheet-panel { animation: sinkS .22s ease-in forwards; }
.sheet.closing .sheet-bg { animation: fade .22s reverse forwards; }
@keyframes sinkS { to { transform: translateY(40px); opacity: 0; } }
.sheet-panel::before { content: ''; position: absolute; top: 8px; left: 50%; width: 38px; height: 4px; border-radius: 4px; background: var(--line-2); transform: translateX(-50%); }
.sheet-x { position: absolute; top: 14px; right: 14px; }
.dhead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding-right: 52px; margin-bottom: 14px; }
.dhead h2 { font: 400 24px/1.15 var(--display); margin: 0; }
.dhead p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.dhead-title { font: 400 24px/1.15 var(--display); margin: 0 52px 2px 0; }
.dgrid { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; margin-bottom: 14px; }
.drow { display: flex; justify-content: space-between; gap: 16px; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.drow:last-child { border-bottom: 0; }
.drow span:first-child { color: var(--muted); flex: none; }
.drow span:last-child { text-align: right; word-break: break-word; }
.dacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 18px; }
.dacts .btn { --h: 46px; padding: 0 12px; font-size: 14px; }
.dsub { font: 500 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.sbtn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 16px; }
.sbtn { height: 46px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--s) 35%, transparent); background: transparent; color: var(--s); font: 600 13.5px/1 var(--sans); transition: background .2s, color .2s; }
.sbtn.on { background: var(--s); color: #fff; }

/* ---------- tabletă / desktop ---------- */
@media (min-width: 760px) {
  .app { display: grid; grid-template-columns: var(--sidew) 1fr; grid-template-rows: auto 1fr; }
  .side { display: flex; flex-direction: column; grid-row: 1 / span 2; position: sticky; top: 0; height: 100svh; padding: 26px 16px; border-right: 1px solid var(--line); background: var(--surface); }
  .side-brand { display: flex; align-items: center; gap: 12px; padding: 0 10px 26px; }
  .side-brand svg { width: 36px; height: 36px; color: var(--yellow); }
  .side-brand span { font: 500 15px/1.1 var(--display); letter-spacing: .3em; display: grid; }
  .side-brand small { font: 400 12px var(--sans); letter-spacing: .06em; color: var(--muted); }
  .side-nav { display: grid; gap: 4px; }
  .side-nav a { display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 14px; border-radius: 12px; text-decoration: none; color: var(--ink-2); font: 500 14.5px/1 var(--sans); transition: background .2s, color .2s; }
  .side-nav a:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .side-nav a.on { background: color-mix(in srgb, var(--yellow) 22%, transparent); color: var(--ink); }
  .open-state { margin-top: auto; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); padding: 0 10px; }
  .open-state i { width: 8px; height: 8px; border-radius: 50%; background: #b5654a; }
  .open-state i.on { background: #16996A; }
  .top { grid-column: 2; padding: 14px 28px; }
  .top-brand { display: none; }
  .view { grid-column: 2; padding: 26px 28px 40px; width: 100%; }
  .tabs { display: none; }
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .grid2 { grid-template-columns: 1.3fr 1fr; align-items: start; }
  .settings { grid-template-columns: 1fr 1fr; align-items: start; }
  .filters { margin: 0 0 16px; padding: 2px 0 4px; flex-wrap: wrap; }
  .hgroup .blist { grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); }
  /* Pe ecran larg fișa se deschide în mijloc, nu lipită de margine: e
     lucrul la care te uiți în momentul ăla, deci stă în centrul atenției,
     nu într-un colț. Forma urmează ecranul — lat pe tabletă în landscape,
     aproape pătrat pe cele în portret. */
  .sheet { align-items: center; justify-items: center; padding: 24px; }
  .sheet-panel {
    width: min(720px, 100%); max-height: min(88svh, 900px); height: auto;
    border-radius: 28px; animation-name: popIn; padding: 28px 26px 24px;
  }
  @keyframes popIn { from { transform: scale(.96) translateY(10px); opacity: 0; } }
  .sheet.closing .sheet-panel { animation-name: popOut; }
  @keyframes popOut { to { transform: scale(.97); opacity: 0; } }
  .sheet-panel::before { display: none; }
}
@media (min-width: 600px) and (max-width: 759px) {
  .kpis { grid-template-columns: repeat(4, 1fr); }
  .view { padding-left: 24px; padding-right: 24px; }
  .settings { grid-template-columns: 1fr 1fr; align-items: start; }
}
body.locked { overflow: hidden; }
.grid2 > *, .col > *, .blist, .bcard, .panel, .kpi { min-width: 0; }
.adm .view { overflow-x: clip; }
.kpi em, .bar em { font-family: var(--sans); }

.adm .empty { border: 0; padding: 6px 0; text-align: left; }
.adm .empty.big { text-align: center; padding: 40px 0; }

/* ---------- dimmer (luminozitate ecran) ---------- */
#dimmer { position: fixed; inset: 0; z-index: 9000; background: #000; opacity: 0; pointer-events: none; transition: opacity .3s; }

/* ---------- PIN admin ---------- */
.pinwrap { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(10, 14, 11, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 20px; }
.pinwrap[hidden] { display: none; }
.pin-card { position: relative; width: min(340px, 100%); border-radius: 28px; padding: 32px 24px 26px; text-align: center; --glass: var(--glass-strong); display: grid; gap: 4px; justify-items: center; animation: rise .35s var(--ease); }
.pin-x { position: absolute; top: 12px; right: 12px; }
.pin-lock { width: 34px; height: 34px; color: var(--yellow); margin-bottom: 6px; }
.pin-card h2 { font: 400 19px var(--display); margin: 0 0 18px; }
.pin-dots { display: flex; gap: 16px; margin-bottom: 6px; }
.pin-dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.6px solid var(--line-2); display: block; transition: background .15s, transform .15s; }
.pin-dots i.on { background: var(--ink); border-color: var(--ink); transform: scale(1.1); }
.pin-card.err .pin-dots { animation: pinShake .4s; }
.pin-card.err .pin-dots i.on { background: #C2253B; border-color: #C2253B; }
@keyframes pinShake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
.pin-err { min-height: 18px; margin: 0 0 10px; color: #C2253B; font-size: 13px; }
.pin-form { display: grid; gap: 10px; width: 100%; }
.pin-label { font-size: 11.5px; color: var(--muted); text-align: left; margin: 2px 2px -4px; }
.pin-input { width: 100%; height: 48px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); padding: 0 14px; font: 400 15px var(--display); color: var(--ink); box-sizing: border-box; }
.pin-input:focus { outline: none; border-color: var(--ink); }
.pin-pw-wrap { position: relative; display: grid; }
.pin-pw-wrap .pin-input { padding-right: 86px; }
.pin-show { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 34px; padding: 0 12px; border-radius: 10px; border: 0; background: transparent; color: var(--ink-2); font: 400 12px var(--display); }
.pin-show:active { background: color-mix(in srgb, var(--ink) 8%, var(--surface)); }
.pin-card.err .pin-form { animation: pinShake .4s; }

/* ---------- Admin Control ---------- */
.admin-card { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 16px; border-radius: 18px; border: 1px solid color-mix(in srgb, var(--yellow) 45%, transparent); background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 18%, var(--surface)), var(--surface)); margin-top: 6px; }
.admin-card .ic { width: 26px; height: 26px; color: #A47D10; }
[data-theme="dark"] .admin-card .ic { color: var(--yellow); }
.admin-card b { display: block; font: 500 15.5px var(--sans); }
.admin-card small { color: var(--muted); font-size: 12.5px; }
/* ---------- Meniul de editare proiect (Developer mode) ---------- */
.tn-menu { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.tn-menu-btn { width: 100%; display: flex; align-items: center; gap: 14px; text-align: left; padding: 15px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font: 500 14.5px var(--sans); color: var(--ink); cursor: pointer; }
.tn-menu-btn .ic { width: 22px; height: 22px; color: #A47D10; flex-shrink: 0; }
[data-theme="dark"] .tn-menu-btn .ic { color: var(--yellow); }
.tn-menu-btn.danger { border-color: color-mix(in srgb, #C2253B 35%, transparent); color: #C2253B; }
.tn-menu-btn.danger .ic { color: #C2253B; }
.tn-back { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; margin-bottom: 14px; font: 500 13.5px var(--sans); color: var(--muted); cursor: pointer; }
.tn-back .ic { width: 16px; height: 16px; }
.period { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 14px; scrollbar-width: none; }
.period::-webkit-scrollbar { display: none; }
.period button { flex: none; height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font: 500 13.5px var(--sans); color: var(--ink-2); white-space: nowrap; }
.period button.on { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.range-pick { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.range-pick input { height: 42px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); padding: 0 10px; font: 400 14px var(--sans); color: var(--ink); flex: 1; min-width: 0; }
.rev-main { background: linear-gradient(135deg, color-mix(in srgb, var(--yellow) 20%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--yellow) 42%, transparent); border-radius: 22px; padding: 20px 20px 16px; margin-bottom: 14px; }
.rev-main small { color: var(--muted); font-size: 12.5px; text-transform: uppercase; letter-spacing: .1em; }
.rev-main b { display: block; font: 300 44px/1.1 var(--display); margin: 6px 0 4px; font-variant-numeric: tabular-nums; }
.rev-main b span { font: 400 15px var(--sans); color: var(--muted); }
.rev-main em { font-style: normal; font-size: 12px; color: var(--muted); line-height: 1.4; }
.top-list { display: grid; gap: 8px; }
.top-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.top-row:last-child { border-bottom: 0; }
.top-row b { font-variant-numeric: tabular-nums; }
.top-bar-wrap { flex: 1; height: 6px; border-radius: 4px; background: color-mix(in srgb, var(--ink) 8%, transparent); margin: 0 10px; overflow: hidden; }
.top-bar-wrap i { display: block; height: 100%; background: color-mix(in srgb, var(--yellow) 65%, #A47D10); border-radius: 4px; }

/* ---------- Servire (chelneri) ---------- */
.svc-zone { display: flex; gap: 6px; margin-bottom: 16px; }
.svc-group h3 { font: 500 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 18px 0 10px; }
.svc-group:first-of-type h3 { margin-top: 0; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; }
.svc-tb { border-radius: 16px; border: 1.5px solid var(--line); background: var(--surface); padding: 12px 10px; text-align: left; display: grid; gap: 4px; min-height: 92px; align-content: start; transition: transform .15s; }
.svc-tb:active { transform: scale(.97); }
.svc-tb b { font: 600 13.5px var(--sans); }
.svc-tb small { font-size: 11px; color: var(--muted); }
.svc-tb .svc-name { font-size: 12.5px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svc-tb .svc-clock { font: 600 12px var(--sans); font-variant-numeric: tabular-nums; }
.svc-tb.free { opacity: .55; }
.svc-tb.reserved { border-color: #2F6FED; background: color-mix(in srgb, #2F6FED 9%, var(--surface)); }
.svc-tb.reserved .svc-clock { color: #2F6FED; }
.svc-tb.pending { border-color: #FF8A00; background: color-mix(in srgb, #FF8A00 13%, var(--surface)); }
.svc-tb.pending .svc-clock { color: #FF8A00; }
.svc-tb.served { border-color: #1AAE5C; background: color-mix(in srgb, #1AAE5C 10%, var(--surface)); }
.svc-tb.served .svc-clock { color: #1AAE5C; }
.svc-tb.justvalidated { border-color: #C9A54C; background: color-mix(in srgb, #C9A54C 20%, var(--surface)); animation: svcGoldPulse 1.1s ease-in-out infinite; }
.svc-tb.justvalidated .svc-clock { color: #9C7A24; font-weight: 700; }
@keyframes svcGoldPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, #C9A54C 45%, transparent); } 50% { box-shadow: 0 0 0 7px color-mix(in srgb, #C9A54C 0%, transparent); } }

/* ---------- buton mare „Validare rezervare" ---------- */
.btn-validate { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; height: 64px; margin: 2px 0 18px; border-radius: 20px; border: none;
  background: linear-gradient(135deg, #D9B35C, #C9A54C); color: #2A2103; font: 700 16.5px var(--sans); box-shadow: 0 6px 18px color-mix(in srgb, #C9A54C 45%, transparent); }
.btn-validate:active { transform: scale(.98); }
.btn-validate .ic { width: 22px; height: 22px; }

/* ---------- validare rezervare (pop-up în aplicație) ---------- */
.valmodal { position: fixed; inset: 0; z-index: 96; display: grid; place-items: center; padding: 16px; }
.valmodal[hidden] { display: none; }
.valmodal-bg { position: absolute; inset: 0; background: rgba(10, 14, 11, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .25s; }
.valmodal-panel { position: relative; width: min(440px, 100%); border-radius: 26px; padding: 30px 22px 22px; --glass: var(--glass-strong); animation: rise .3s var(--ease); }
.valmodal-x { position: absolute; top: 14px; right: 14px; z-index: 2; }
.val-sub { color: var(--muted); font: 400 14px var(--sans); margin: 2px 0 18px; }
.val-input { width: 100%; height: 58px; border-radius: 16px; border: 1.5px solid var(--line-2); background: var(--surface); padding: 0 16px; font: 700 20px var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 14px; }
.val-input.shake, .val-input:has(+ .val-err) { animation: valShake .35s; border-color: #D64545; }
.val-err { color: #D64545; font: 500 13.5px var(--sans); margin: -6px 0 14px; }
.val-table-found { font: 700 28px var(--display); text-align: center; color: #9C7A24; margin: 6px 0 4px; }
@keyframes valShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.btn-confirm { background: #1AAE5C; border-color: #1AAE5C; color: #fff; }
.btn-confirm:active { transform: scale(.98); }
.svc-finish { margin-top: 10px; }

/* ---------- rezervare nouă (pop-up în aplicație) ---------- */
.bkmodal { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 16px; }
.bkmodal[hidden] { display: none; }
.bkmodal-bg { position: absolute; inset: 0; background: rgba(10, 14, 11, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fade .25s; }
.bkmodal-panel { position: relative; width: min(620px, 100%); max-height: 92vh; border-radius: 26px; padding: 26px 24px 24px; --glass: var(--glass-strong); animation: rise .3s var(--ease); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.bkmodal-x { position: absolute; top: 14px; right: 14px; z-index: 2; }

.svc-timer { font: 300 40px/1 var(--display); text-align: center; margin: 4px 0 18px; font-variant-numeric: tabular-nums; }
.svc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.svc-tags button { height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font: 500 13px var(--sans); color: var(--ink-2); }
.svc-tags button:active { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.svc-notes { width: 100%; min-height: 70px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); padding: 10px 12px; font: 400 14.5px var(--sans); color: var(--ink); resize: vertical; margin-bottom: 14px; }
.svc-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.svc-status button { height: 48px; border-radius: 14px; border: 1.5px solid var(--line-2); background: transparent; font: 600 13.5px var(--sans); color: var(--ink-2); }
.svc-status button[data-s="pending"].on { background: #FF8A00; border-color: #FF8A00; color: #fff; }
.svc-status button[data-s="served"].on { background: #1AAE5C; border-color: #1AAE5C; color: #fff; }

/* ---- căutare după cod + masă ocupată prin validare ---- */
.search-hint { color: var(--muted); font: 400 12.5px var(--sans); margin: -6px 0 12px; padding: 0 2px; }
.bc-day { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--yellow); }
.tag.code { font-variant-numeric: tabular-nums; letter-spacing: .04em; font-weight: 600; color: var(--ink-2); }
/* o masă ocupată se vede dintr-o privire, în listă și pe cronologie */
.tag.arrived, .bcard.arrived .tag.arrived { color: #0B6B3A; background: color-mix(in srgb, #12A05A 18%, transparent); font-weight: 600; }
.bcard.arrived { box-shadow: inset 3px 0 0 #12A05A; }
.tblock.arrived { background: color-mix(in srgb, #12A05A 22%, var(--surface)); border-left-color: #12A05A; }
.tblock.arrived::after { content: '●'; position: absolute; top: 4px; right: 6px; font-size: 9px; color: #12A05A; }
.val-warn { color: #8A4B00; background: color-mix(in srgb, #E8912B 16%, transparent); border-radius: 10px; padding: 8px 12px; font: 500 13px var(--sans); margin: 0 0 14px; }
[data-theme=dark] .tag.arrived { color: #6FE3A6; }
[data-theme=dark] .val-warn { color: #F3C08A; }
.sa-head-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.sa-wipe-group { display: flex; gap: 6px; align-items: center; }
.sa-wipe-sel, .sa-wipe-dt { height: 38px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font: 500 13px var(--sans); padding: 0 10px; }
.sa-wipe-dt { width: 136px; }

/* ================================================================== *
 * Ecranul Mese — pagina principală a tabletei
 *
 * Direcția vizuală e iOS: suprafețe albe pe fundal gri foarte deschis,
 * colțuri mari, umbre abia vizibile, un singur accent de culoare pe card.
 * Totul e dimensionat pentru a fi citit de la doi metri și atins cu
 * degetul, nu cu mouse-ul: nicio țintă sub 44px.
 * ================================================================== */

/* ---- butoanele din header ---- */
.tbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 18px;
  border-radius: 14px; border: none; font: 600 15px/1 var(--sans); white-space: nowrap;
  transition: transform .15s var(--ease), filter .2s; flex: none;
}
.tbtn:active { transform: scale(.96); }
.tbtn .ic { width: 19px; height: 19px; }
/* Validarea codului e acțiunea cea mai des folosită: verde, plină, cea mai mare. */
.tbtn-val { background: #16996A; color: #fff; height: 52px; padding: 0 22px; font-size: 16px; box-shadow: 0 6px 18px -8px rgba(22, 153, 106, .8); }
.tbtn-val:hover { filter: brightness(1.06); }
.tbtn-new { background: var(--surface); color: var(--ink); border: 1px solid var(--line-2); }
.tbtn-new:hover { border-color: var(--ink); }

/* ---- ceasul ---- */
.top-clock { display: grid; justify-items: end; line-height: 1.05; margin-right: 4px; flex: none; }
.top-clock b { font: 300 30px/1 var(--display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; color: var(--ink); }
.top-clock small { font-size: 11px; color: var(--muted); text-transform: capitalize; }

/* ---- antetul ecranului ---- */
/* minmax(0, 1fr): fără el, coloana implicită a grilei se dimensionează după
   conținut, iar grila de mese cere mai mult decât lățimea ecranului. Pe
   telefon asta tăia cardurile din dreapta, fără scroll și fără avertisment. */
.mese { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.tgrid, .mhead { min-width: 0; }
.mhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 14px; }
.mhead h1 { font: 300 32px/1.1 var(--display); margin: 2px 0 0; color: var(--ink); }
.mhead h1 em { font-style: italic; }

/* ---- filtrele ---- */
.tfilters { display: flex; gap: 6px; padding: 5px; background: var(--surface); border: 1px solid var(--line); border-radius: 999px; }
.tchip {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 16px; border: none;
  border-radius: 999px; background: transparent; color: var(--muted); font: 600 13.5px/1 var(--sans);
  transition: background .2s, color .2s;
}
.tchip b { font-weight: 700; color: inherit; opacity: .75; }
.tchip::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tchip.c-all::before { display: none; }
.tchip.c-free { color: #16996A; } .tchip.c-busy { color: #C2253B; } .tchip.c-res { color: #B07D16; }
.tchip.on { background: var(--ink); color: #fff; }
.tchip.on b { opacity: .6; }

/* ---- titlurile de zonă ---- */
.tzone {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin: 22px 2px 10px; font: 600 11.5px/1 var(--sans); letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted);
}
.tzone span { letter-spacing: 0; text-transform: none; font-weight: 400; font-size: 12.5px; }

/* ---- grila de mese ---- */
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }

/* Cardul: trei culori, nimic altceva. --c e culoarea stării, folosită de
   bulină, chenar și fundal, ca să nu existe nicio ambiguitate. */
.tcard {
  --c: #16996A; --soft: rgba(22, 153, 106, .05);
  position: relative; display: grid; gap: 0; padding: 20px 18px 16px; text-align: left;
  border: 1.5px solid color-mix(in srgb, var(--c) 28%, var(--line));
  border-radius: 22px; background: var(--surface); color: var(--ink);
  transition: transform .15s var(--ease), box-shadow .2s, border-color .2s;
}
.tcard:active { transform: scale(.985); }
.tcard[data-id] { cursor: pointer; }
.tcard[data-id]:hover { box-shadow: 0 10px 28px -16px rgba(0, 0, 0, .35); }
.tcard.is-busy { --c: #C2253B; --soft: rgba(194, 37, 59, .06); background: linear-gradient(var(--soft), var(--soft)), var(--surface); }
.tcard.is-res  { --c: #B07D16; --soft: rgba(176, 125, 22, .07); background: linear-gradient(var(--soft), var(--soft)), var(--surface); }

/* Numărul mesei: bulina de sus. Gri când e liberă, culoarea stării altfel. */
.tnum {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff; font: 700 13px/1 var(--sans);
  box-shadow: 0 0 0 4px var(--bg); font-variant-numeric: tabular-nums;
}

.tkind { font: 700 10.5px/1 var(--sans); letter-spacing: .16em; color: var(--muted); }
.tcard.is-vip { padding-top: 16px; }

.tname { margin-top: 10px; font: 500 17.5px/1.2 var(--display); }
.tcard.is-vip .tname { margin-top: 8px; font-size: 19px; }
.tstate { display: inline-flex; align-items: center; gap: 7px; margin-top: 7px; font: 600 12.5px/1 var(--sans); color: var(--c); }

.tdot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.tcard.is-res .tstate {
  background: color-mix(in srgb, var(--c) 14%, transparent); padding: 5px 10px; border-radius: 999px; align-self: start;
}
.tfoot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 13.5px; min-height: 20px;
}
.tfoot b { font-weight: 600; }
.tfoot span { color: var(--muted); font-variant-numeric: tabular-nums; }
.tfoot em { font-style: normal; color: var(--muted); font-size: 13px; }

/* ================================================================== *
 * Adaptarea la ecran
 *
 * Panoul rulează pe trei feluri de dispozitive, cu nevoi diferite:
 *   telefon      staff care verifică ceva în trecere, cu o mână
 *   tabletă      cazul principal — fixată la intrare, atinsă cu degetul
 *   desktop      patronul care se uită peste cifre
 *
 * Două praguri contează. Sub 760px meniul lateral dispare și rămâne bara
 * de jos. Între 760 și 1100px meniul e deschis, dar lățimea rămasă e mică,
 * deci antetul trebuie strâns — altfel butoanele ies din ecran.
 * ================================================================== */

/* Antetul: elementele au voie să se strângă, iar titlul cedează primul.
   Fără min-width: 0 un flex-item refuză să coboare sub conținutul lui și
   împinge restul afară din ecran. */
.top-title { min-width: 0; }
.top-title b, .top-title small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lățime mică, dar cu meniu lateral deschis: rămân icoanele, dispare textul. */
@media (max-width: 1100px) {
  .top { gap: 8px; padding-left: 12px; padding-right: 12px; }
  .top-clock b { font-size: 25px; }
  .top-clock small { display: none; }
  .tbtn-new span { display: none; }
  .tbtn-new { padding: 0 14px; }
  .tbtn-val { padding: 0 16px; font-size: 15px; }
}
@media (max-width: 880px) {
  .top-brand { display: none; }
  .tbtn-val span { display: none; }
  .tbtn-val { padding: 0 16px; }
}

/* ---- telefon ---- */
@media (max-width: 720px) {
  /* Antetul ecranului trece pe două rânduri: salutul sus, filtrele dedesubt. */
  .mhead { display: block; margin-bottom: 12px; }
  .mhead h1 { font-size: 25px; }
  .mhead > div { min-width: 0; }
  .mhead h1, .mhead .eyebrow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* Filtrele devin o bandă care se trage cu degetul, nu un rând care iese
     din ecran. Marginile negative o lasă să atingă marginile ecranului,
     ca să se vadă că mai e conținut dincolo. */
  .tfilters {
    display: flex; flex-wrap: nowrap; margin: 12px -16px 0; padding: 5px 16px;
    width: auto; border-radius: 0; border-left: 0; border-right: 0;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .tfilters::-webkit-scrollbar { display: none; }
  .tchip { flex: none; height: 44px; padding: 0 15px; }

  .tzone { margin: 18px 2px 9px; }
  .tzone span { display: none; }
  .tgrid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 10px; }
  .tcard { padding: 17px 13px 13px; border-radius: 18px; }
  .tname { font-size: 15px; }
  .tcard.is-vip .tname { font-size: 16px; }
  .tfoot { margin-top: 11px; padding-top: 9px; font-size: 12.5px; }
  .top-clock b { font-size: 22px; }
}

/* Telefon foarte îngust sau în landscape: o singură coloană de text lizibil. */
@media (max-width: 380px) {
  .tgrid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .tcard { padding: 15px 11px 11px; }
  .tname { font-size: 14px; }
}

/* Ecran jos (telefon întors): antetul nu are voie să mănânce jumătate din el. */
@media (max-height: 460px) {
  .top { padding-top: calc(6px + env(safe-area-inset-top)); padding-bottom: 6px; }
  .top-clock b { font-size: 20px; }
  .tbtn-val { height: 44px; }
  .mhead h1 { font-size: 22px; }
}

/* Desktop mare: nu lăsăm cardurile să se întindă absurd. */
@media (min-width: 1500px) {
  .tgrid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
}
/* Indicatorul de sincronizare automată din antet. */
.top-title .live { font-style: normal; color: #16996A; font-weight: 600; }
.top-title .live::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 5px; vertical-align: 1px; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---- formularul de rezervare nouă (nativ, în panou) ---- */
.bk-h { font: 300 26px/1.1 var(--display); margin: 2px 0 16px; color: var(--ink); }
.bk-err { margin: -6px 0 14px; padding: 11px 14px; border-radius: 12px; background: rgba(194, 37, 59, .08); color: #C2253B; font-size: 13.5px; }
.bk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bk-wide { grid-column: 1 / -1; }
.bk-f { display: grid; gap: 6px; }
.bk-f span { font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.bk-f input, .bk-f select {
  height: 50px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--surface);
  padding: 0 14px; font: 400 16px var(--sans); color: var(--ink); width: 100%; -webkit-appearance: none; appearance: none;
}
.bk-f select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) 22px, calc(100% - 14px) 22px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.bk-f input:focus, .bk-f select:focus { outline: none; border-color: var(--yellow); box-shadow: 0 0 0 4px color-mix(in srgb, var(--yellow) 20%, transparent); }
.bk-go {
  grid-column: 1 / -1; height: 56px; margin-top: 6px; border: none; border-radius: 16px;
  background: #16996A; color: #fff; font: 600 16.5px/1 var(--sans);
  box-shadow: 0 8px 22px -10px rgba(22, 153, 106, .9); transition: transform .15s var(--ease), filter .2s;
}
.bk-go:hover { filter: brightness(1.06); }
.bk-go:active { transform: scale(.98); }
.bk-go:disabled { opacity: .6; }
@media (max-width: 560px) { .bk-form { grid-template-columns: 1fr; } }

/* Pe tablete în landscape meniul rămâne deschis, dar mai îngust, ca să
   rămână loc pentru patru mese pe rând. */
@media (min-width: 760px) and (max-width: 1100px) {
  .adm { --sidew: 196px; }
  .side { padding: 20px 12px; }
  .tgrid { grid-template-columns: repeat(auto-fill, minmax(163px, 1fr)); gap: 12px; }
  /* Numele premium încape pe un rând la lățimea asta de card. */
  .tcard.is-vip .tname, .tname { font-size: 15.5px; }
  .tzone span { display: none; }
}

/* Un copil lat (banda de timp din Spoturi) nu are voie să întindă coloana
   de grid și, prin ea, tot ecranul. Implicit un element de grid refuză să
   coboare sub lățimea conținutului; min-width: 0 îl lasă, iar banda își
   face propriul scroll orizontal, cum era intenția. */
.app > .top, .app > .view { min-width: 0; }
.timeline { max-width: 100%; }

/* Ținte de atins: pe ecrane cu deget (nu mouse) nimic sub 44px.
   Degetul are ~9mm, iar panoul se folosește în picioare, în grabă. */
@media (pointer: coarse) {
  .tchip, .fchip { height: 44px; }
  .switch { transform: scale(1.12); }
  .srow { min-height: 52px; }
  .ib { width: 46px; height: 46px; }
}

/* Pe telefon nu încape și ora, și cuvintele „Live Sync". Rămâne bulina care
   pulsează — spune același lucru și nu taie textul la jumătate. */
@media (max-width: 520px) {
  .top-title .live { font-size: 0; }
  .top-title .live::before { margin-right: 0; }
}

/* Masa liberă capătă un fundal verde abia perceptibil, ca ochiul să prindă
   zonele libere dintr-o privire, fără să se bată cu cele ocupate. */
.tcard.is-free { background: linear-gradient(var(--soft), var(--soft)), var(--surface); }

/* ---- panoul „cât e liberă masa" ---- */
.av-list { display: grid; gap: 8px; margin: 18px 0 14px; }
.av-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 16px; border-radius: 14px; border: 1.5px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.av-row b { font: 600 16px/1 var(--sans); }
.av-row span { font-size: 13.5px; color: var(--muted); text-align: right; }
.av-row.is-free { border-color: rgba(22, 153, 106, .4); background: rgba(22, 153, 106, .07); }
.av-row.is-free b, .av-row.is-free span { color: #16996A; }
/* Intervalele prinse sunt tăiate: se citește ca „aici nu se mai poate". */
.av-row.is-taken { background: var(--bg); border-color: var(--line); }
.av-row.is-taken b { text-decoration: line-through; color: var(--muted); }
.av-row.is-past { opacity: .45; }
.av-row.is-past b { text-decoration: line-through; }
.av-note { margin: 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ================================================================== *
 * Notificarea de rezervare nouă
 *
 * Stă în dreapta, sub antet, ca să nu acopere ceasul și butoanele.
 * z-index 29 o ține sub antetul lipit (30), deci trece pe dedesubt la
 * scroll în loc să-l taie.
 * ================================================================== */
.notifs {
  position: fixed; z-index: 29; right: 14px; display: grid; gap: 10px;
  top: calc(76px + env(safe-area-inset-top));
  width: min(330px, calc(100vw - 28px)); pointer-events: none;
}
.notif {
  position: relative;
  pointer-events: auto; display: grid; gap: 7px; text-align: left;
  padding: 14px 40px 15px 16px; border-radius: 18px; border: 1px solid var(--line-2);
  --glass: var(--glass-strong);
  box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .45);
  color: var(--ink); cursor: pointer;
  opacity: 0; transform: translateX(18px) scale(.97);
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}
.notif.on { opacity: 1; transform: none; }
.notif:active { transform: scale(.985); }

/* Cercul cu X: separat de restul cardului, ca să-l poți atinge din greșeală
   fără să deschii fișa rezervării. 32px — minimul pentru un deget pe sticlă. */
.notif-x {
  position: absolute; top: 10px; right: 10px; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%; border: none;
  background: rgba(127, 127, 127, .14); color: var(--muted);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.notif-x:active { background: rgba(127, 127, 127, .26); }
@media (pointer: coarse) {
  .notif-x { width: 32px; height: 32px; }
}

.notif-top {
  display: flex; align-items: center; gap: 7px;
  font: 700 10.5px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #16996A;
}
.notif-top i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: pulse 1.6s ease-in-out infinite; }
.notif-name { font: 500 18px/1.15 var(--display); }

.notif-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 12px; margin-top: 3px; }
.notif-grid > span { display: grid; gap: 2px; font-size: 13.5px; min-width: 0; }
.notif-grid > span.w { grid-column: 1 / -1; }
/* Eticheta deasupra valorii: se scanează mai repede decât „Ora: 19:30". */
.notif-grid em {
  font: 600 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted); font-style: normal;
}
.notif-grid > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Notificarea de termen depășit: aceeași carcasă, accent portocaliu și
   butoane de acțiune rapidă — nu e nevoie să cauți masa pe grilă. */
.notif-over .notif-top { color: #D9480F; }
.notif-actions { display: flex; gap: 7px; margin-top: 5px; flex-wrap: wrap; }
.notif-act {
  flex: 1 1 auto; min-width: 0; padding: 9px 10px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink);
  font: 600 12.5px/1 var(--sans); cursor: pointer; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-act:active { filter: brightness(.96); }
.notif-act.primary { background: #D9480F; border-color: #D9480F; color: #fff; }
@media (pointer: coarse) { .notif-act { padding: 11px 10px; } }

/* Pe telefon notificarea trece peste toată lățimea, sub antet. */
@media (max-width: 720px) {
  .notifs { right: 10px; left: 10px; width: auto; top: calc(68px + env(safe-area-inset-top)); }
  .notif-name { font-size: 16.5px; }
}

/* ================================================================== *
 * Stabilitate vizuală pe ecran tactil
 *
 * Efectul de apăsare (scale) e gândit pentru mouse, unde :active ține
 * exact cât ține clicul. Cu degetul, browserul aplică :active și în timp
 * ce derulezi peste un element — deci cardurile se micșorează și revin pe
 * măsură ce treci peste ele. Pe o grilă de 27 de carduri arată exact ca o
 * aplicație care se bâlbâie.
 *
 * Pe ecran tactil înlocuim micșorarea cu o schimbare de fundal: feedback-ul
 * rămâne, mișcarea dispare.
 * ================================================================== */
@media (pointer: coarse) {
  .tcard:active, .notif:active, .bcard:active, .sa-card:active, .svc-tb:active {
    transform: none;
    filter: brightness(.97);
  }
  /* Nicio tranziție pe transform: nimic din grilă nu are voie să se miște
     singur în timpul derulării. */
  .tcard { transition: border-color .2s, background-color .2s; }
}

/* ---- fișa rezervării, deschisă în mijlocul ecranului ---- */
.svc-hint {
  margin: 14px 0 2px; padding: 14px 16px; border-radius: 14px;
  background: var(--bg); border: 1px dashed var(--line-2);
  color: var(--muted); font-size: 13.5px; text-align: center;
}
.sbtn[disabled] { opacity: .45; }

/* Ecran lat (tabletă landscape, desktop): fișa trece pe două coloane —
   datele în stânga, acțiunile în dreapta. Altfel ar fi o coloană lungă pe
   un ecran care are loc berechet pe orizontală, și ar trebui derulată. */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  .sheet-panel { width: min(880px, 100%); }
  .sheet-panel #sheetBody {
    display: grid; grid-template-columns: 1.15fr .85fr;
    /* Fără spațiu între rânduri: coloana din stânga se întinde peste multe
       rânduri implicite, iar fiecare gol s-ar aduna la înălțimea ferestrei
       și ar lăsa o burtă goală sub conținut. Distanțele le dau elementele. */
    gap: 0 26px; align-items: start; align-content: start;
  }
  .sheet-panel #sheetBody > .dhead { grid-column: 1 / -1; }
  /* Tabelul cu date ocupă coloana din stânga, restul se duce în dreapta. */
  /* Tabelul cu datele rezervării (.dgrid) ocupă stânga pe toată înălțimea;
     butoanele de contact, statusul și restul se duc în dreapta. */
  .sheet-panel #sheetBody > .dgrid { grid-column: 1; grid-row: 2 / span 30; margin: 0; }
  .sheet-panel #sheetBody > *:not(.dhead):not(.dgrid) { grid-column: 2; }
  .sheet-panel #sheetBody > .dsub { margin: 16px 0 8px; }
  .sheet-panel #sheetBody > .dhead { margin-bottom: 18px; }
  .sheet-panel #sheetBody > .contact-row { margin-bottom: 4px; }
  .sheet-panel #sheetBody > .sbtn-grid { margin-bottom: 14px; }
}

/* ---- „În așteptare": ora a venit, omul nu ----
   Violet, pentru că nu e nici liber, nici ocupat: masa e ținută pentru
   cineva care ar trebui să fie deja aici. E starea care cere o acțiune. */
.tcard.is-wait { --c: #7C4DD6; --soft: rgba(124, 77, 214, .08); background: linear-gradient(var(--soft), var(--soft)), var(--surface); }
.tcard.is-wait .tstate {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  padding: 5px 10px; border-radius: 999px; align-self: start;
}
.tchip.c-wait { color: #7C4DD6; }

/* ---- „Neprezentare": a trecut toată durata rezervării, codul nu a fost
   validat — automat, fără să fie nevoie să apeși butonul „Neprezentat".
   Gri — la fel ca statusul Neprezentare de pe fișa rezervării. */
.tcard.is-late { --c: #7A837C; --soft: rgba(122, 131, 124, .1); background: linear-gradient(var(--soft), var(--soft)), var(--surface); }
.tcard.is-late .tstate {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  padding: 5px 10px; border-radius: 999px; align-self: start;
}
.tchip.c-late { color: #7A837C; }

/* ---- „Termen depășit": a venit, codul a fost validat, dar ora de final
   a rezervării a trecut și masa e tot ocupată — portocaliu, cu
   notificare și cronometru care arată cât a trecut de termen. */
.tcard.is-over { --c: #D9480F; --soft: rgba(217, 72, 15, .1); background: linear-gradient(var(--soft), var(--soft)), var(--surface); }
.tcard.is-over .tstate {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  padding: 5px 10px; border-radius: 999px; align-self: start;
}
.tchip.c-over { color: #D9480F; }

/* ---- butonul care deschide explicațiile, lângă chips-urile de filtru ---- */
.tLegendBtn { width: 32px; height: 32px; border-radius: 999px; flex: 0 0 auto; margin: 0 2px 0 4px; border: none; background: transparent; color: var(--muted); }

/* ---- modalul cu explicațiile stărilor ---- */
.li-list { display: grid; gap: 14px; margin-top: 14px; }
.li-item { display: flex; align-items: flex-start; gap: 12px; }
.li-item b { font: 600 15px/1.3 var(--sans); color: var(--ink); display: block; margin-bottom: 2px; }
.li-item p { font: 400 13.5px/1.45 var(--sans); color: var(--ink-2); margin: 0; }
.li-dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 auto; margin-top: 5px; }

/* ---- legenda culorilor, sub filtre ---- */
.tlegend {
  display: flex; flex-wrap: wrap; gap: 14px 18px; margin: 10px 2px 0;
  font: 500 12.5px/1 var(--sans); color: var(--muted);
}
.tleg-i {
  display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
  padding: 4px 6px; margin: -4px -6px; border-radius: 8px; color: inherit; font: inherit; cursor: pointer;
}
.tleg-i:active { background: color-mix(in srgb, var(--ink) 7%, transparent); }
.tleg-i.on { color: var(--ink); font-weight: 700; }
.tleg-i .tdot { width: 8px; height: 8px; }
.tleg-i .tdot.c-free { background: #16996A; }
.tleg-i .tdot.c-wait { background: #7C4DD6; }
.tleg-i .tdot.c-busy { background: #C2253B; }
.tleg-i .tdot.c-over { background: #D9480F; }
.tleg-i .tdot.c-late { background: #7A837C; }
@media (pointer: coarse) { .tleg-i { padding: 7px 8px; margin: -7px -8px; } }
@media (max-width: 600px) { .tlegend { gap: 10px 14px; font-size: 11.5px; } }

/* Butonul de confirmare a sosirii, în fișa rezervării. */
.btn-arrive {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 56px; margin: 4px 0 2px; border: none; border-radius: 16px;
  background: #16996A; color: #fff; font: 600 16.5px/1 var(--sans);
  box-shadow: 0 8px 22px -10px rgba(22, 153, 106, .9);
  transition: filter .2s, transform .15s var(--ease);
}
.btn-arrive:hover { filter: brightness(1.06); }
.btn-arrive .ic { width: 20px; height: 20px; }
@media (pointer: fine) { .btn-arrive:active { transform: scale(.98); } }