/* ============================================================================
   TABLEVIEW — DASHBOARD (client & admin)
   ============================================================================
   Design volontairement séparé du widget public : ici on est dans l'esprit
   "back-office" (TheFork/Zenchef), pas dans l'expérience de luxe du widget.
   Pas de contrainte de pixel-perfect héritée du prototype — c'est un outil
   de travail, clair et fonctionnel.
   ============================================================================ */
:root {
  /* Palette grecque/méditerranéenne, comme le widget public. Le rouge
     "Annulée" reste rouge volontairement : un signal d'alerte universel,
     plus sûr pour le personnel qu'une nuance de bleu à distinguer vite. */
  --db-bg: #F0E9DD;
  --db-panel: #FFFFFF;
  --db-border: #D7E3ED;
  --db-text: #1D5C8C;
  --db-text2: #5C82A0;
  --db-text3: #8FA8BC;
  --db-accent: #4A90C4;
  --db-accent-bg: #E4F0F8;
  --db-green: #4A90C4;
  --db-green-bg: #E4F0F8;
  --db-red: #D64545;
  --db-red-bg: #FCEAEA;
  --db-radius: 14px;
  --db-shadow-sm: 0 1px 2px rgba(29,92,140,0.05), 0 1px 3px rgba(29,92,140,0.06);
  --db-shadow-md: 0 4px 10px rgba(29,92,140,0.07), 0 10px 24px rgba(29,92,140,0.06);
  --db-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --db-sans: 'Inter', system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--db-bg); color: var(--db-text);
  font-family: var(--db-sans); font-size: 14px; -webkit-font-smoothing: antialiased;
}
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 13.5px; }
a { color: var(--db-accent); }

/* ---------- écran de connexion ---------- */
.db-login-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: radial-gradient(circle at 20% 15%, rgba(74,144,196,0.10), transparent 45%), radial-gradient(circle at 85% 85%, rgba(74,144,196,0.08), transparent 40%), var(--db-bg);
}
.db-login-card { width: 100%; max-width: 380px; background: var(--db-panel); border: 1px solid var(--db-border); border-radius: 18px; padding: 40px 34px; box-shadow: var(--db-shadow-md); }
.db-login-title { font-size: 21px; font-weight: 800; margin-bottom: 6px; letter-spacing: -0.01em; }
.db-login-sub { font-size: 13px; color: var(--db-text2); margin-bottom: 26px; line-height: 1.55; }
.db-field { margin-bottom: 16px; }
.db-field label { display: block; font-size: 12px; font-weight: 600; color: var(--db-text2); margin-bottom: 6px; }
.db-input { width: 100%; padding: 11px 13px; border: 1px solid var(--db-border); border-radius: 9px; background: #fff; color: var(--db-text); transition: border-color 0.15s, box-shadow 0.15s; }
.db-input:focus { outline: none; border-color: var(--db-accent); box-shadow: 0 0 0 3px var(--db-accent-bg); }
.db-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 9px; border: none; font-weight: 600; font-size: 13.5px; transition: all 0.2s var(--db-ease); }
.db-btn:active { transform: scale(0.98); }
.db-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.db-btn-primary { background: var(--db-text); color: #fff; width: 100%; box-shadow: var(--db-shadow-sm); }
.db-btn-primary:hover { background: var(--db-accent); transform: translateY(-1px); box-shadow: var(--db-shadow-md); }
.db-btn-ghost { background: transparent; border: 1px solid var(--db-border); color: var(--db-text); }
.db-btn-ghost:hover { border-color: var(--db-accent); color: var(--db-accent); background: var(--db-accent-bg); }
.db-btn-danger { background: var(--db-red-bg); color: var(--db-red); }
.db-btn-danger:hover { opacity: 0.85; }
.db-msg { font-size: 12.5px; margin-top: 12px; padding: 10px 12px; border-radius: 9px; }
.db-msg-ok { background: var(--db-green-bg); color: var(--db-green); }
.db-msg-error { background: var(--db-red-bg); color: var(--db-red); }

/* ---------- coquille du dashboard ---------- */
.db-shell { display: flex; min-height: 100vh; }
.db-sidebar { width: 228px; flex-shrink: 0; background: var(--db-panel); border-right: 1px solid var(--db-border); display: flex; flex-direction: column; padding: 22px 14px; box-shadow: var(--db-shadow-sm); position: relative; z-index: 1; }
.db-brand { font-size: 15px; font-weight: 800; padding: 6px 10px 22px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.db-brand-mark { width: 24px; height: 24px; border-radius: 6px; display: inline-block; flex-shrink: 0; box-shadow: var(--db-shadow-sm); }
.db-restaurant-name { font-size: 12px; color: var(--db-text2); padding: 0 10px 18px; }
.db-nav { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.db-nav-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 9px; color: var(--db-text2); font-weight: 600; font-size: 13.5px; background: none; border: none; text-align: left; width: 100%; transition: all 0.15s; position: relative; }
.db-nav-item:hover { background: var(--db-bg); color: var(--db-text); }
.db-nav-item.active { background: var(--db-accent); color: #fff; box-shadow: var(--db-shadow-sm); }
.db-sidebar-footer { padding-top: 14px; border-top: 1px solid var(--db-border); }

.db-main { flex: 1; min-width: 0; padding: 34px 42px; overflow-y: auto; }
.db-page-title { font-size: 23px; font-weight: 800; margin-bottom: 4px; letter-spacing: -0.015em; }
.db-page-sub { font-size: 13.5px; color: var(--db-text2); margin-bottom: 28px; }

/* ---------- composants génériques ---------- */
.db-grid { display: grid; gap: 18px; }
.db-grid-4 { grid-template-columns: repeat(4, 1fr); }
.db-grid-2 { grid-template-columns: repeat(2, 1fr); }
.db-contenu-grid { grid-template-columns: 280px 1fr; }
@media (max-width: 900px) { .db-grid-4 { grid-template-columns: repeat(2, 1fr); } .db-grid-2 { grid-template-columns: 1fr; } .db-contenu-grid { grid-template-columns: 1fr; } }

.db-card { background: var(--db-panel); border: 1px solid var(--db-border); border-radius: var(--db-radius); padding: 22px; box-shadow: var(--db-shadow-sm); transition: box-shadow 0.2s var(--db-ease); }
.db-card-title { font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.db-stat-label { font-size: 11.5px; color: var(--db-text2); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 8px; }
.db-stat-value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--db-text); }
.db-stat-sub { font-size: 12px; color: var(--db-text3); margin-top: 4px; }

.db-funnel-row { display: flex; align-items: center; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--db-border); }
.db-funnel-row:last-child { border-bottom: none; }
.db-funnel-label { width: 140px; flex-shrink: 0; font-size: 13px; font-weight: 600; }
.db-funnel-bar-wrap { flex: 1; height: 10px; background: var(--db-bg); border-radius: 6px; overflow: hidden; }
.db-funnel-bar { height: 100%; background: linear-gradient(90deg, var(--db-accent), var(--db-text)); border-radius: 6px; transition: width 0.4s var(--db-ease); }
.db-funnel-value { width: 70px; text-align: right; flex-shrink: 0; font-size: 13px; font-weight: 700; }

.db-compare-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.db-compare-row b { font-size: 18px; }
.db-compare-bar-wrap { height: 10px; background: var(--db-bg); border-radius: 6px; overflow: hidden; }
.db-compare-bar { height: 100%; border-radius: 6px; transition: width 0.4s var(--db-ease); }
.db-compare-bar.tv { background: linear-gradient(90deg, var(--db-accent), var(--db-text)); }
.db-compare-bar.direct { background: var(--db-text3); }
.db-compare-highlight { margin-top: 14px; padding: 10px 12px; border-radius: 10px; background: var(--db-accent-bg); color: var(--db-accent); font-size: 12.5px; font-weight: 700; }

.db-heatmap-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--db-text2); }
.db-heatmap-legend span { display: flex; align-items: center; gap: 6px; }
.db-heatmap-legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

.db-underperf-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--db-border); }
.db-underperf-row:last-child { border-bottom: none; }
.db-underperf-potential { font-weight: 800; color: var(--db-green); white-space: nowrap; }

table.db-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.db-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--db-text3); font-weight: 700; padding: 9px 10px; border-bottom: 1px solid var(--db-border); }
table.db-table td { padding: 12px 10px; border-bottom: 1px solid var(--db-border); }
table.db-table tr:last-child td { border-bottom: none; }
table.db-table tbody tr { transition: background 0.15s; }
table.db-table tbody tr:hover { background: var(--db-bg); }
.db-pill { display: inline-flex; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; }
.db-pill-ok { background: var(--db-green-bg); color: var(--db-green); }
.db-pill-cancel { background: var(--db-red-bg); color: var(--db-red); }
.db-pill-noshow { background: #FCF3E3; color: #B5790A; }
.db-empty { color: var(--db-text3); font-size: 13px; padding: 28px 0; text-align: center; }

.db-tables-list { display: flex; flex-direction: column; gap: 8px; }
.db-table-item { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid var(--db-border); border-radius: 10px; cursor: pointer; transition: all 0.15s var(--db-ease); }
.db-table-item:hover { border-color: var(--db-accent); box-shadow: var(--db-shadow-sm); }
.db-table-item.active { border-color: var(--db-accent); background: var(--db-accent-bg); }
.db-table-item-name { font-weight: 600; font-size: 13.5px; }
.db-table-item-meta { font-size: 11.5px; color: var(--db-text2); }

.db-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .db-form-grid { grid-template-columns: 1fr; } }
.db-checkbox-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; }

.db-theme-option { display: flex; align-items: center; gap: 12px; padding: 14px; border: 2px solid var(--db-border); border-radius: 12px; cursor: pointer; transition: all 0.15s var(--db-ease); }
.db-theme-option:hover { box-shadow: var(--db-shadow-sm); }
.db-theme-option.active { border-color: var(--db-accent); background: var(--db-accent-bg); }
.db-theme-swatch { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--db-border); }

.db-media-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.db-media-thumb { position: relative; aspect-ratio: 1; border-radius: 10px; overflow: hidden; border: 1px solid var(--db-border); }
.db-media-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.db-media-thumb .db-media-cat { position: absolute; bottom: 4px; left: 4px; background: rgba(0,0,0,0.6); color: #fff; font-size: 9.5px; padding: 2px 6px; border-radius: 4px; }
.db-media-thumb .db-media-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(0,0,0,0.6); color: #fff; font-size: 11px; display: flex; align-items: center; justify-content: center; border: none; }

.db-toast { position: fixed; bottom: 24px; right: 24px; background: var(--db-text); color: #fff; padding: 13px 20px; border-radius: 10px; font-size: 13px; box-shadow: var(--db-shadow-md); opacity: 0; transform: translateY(10px); transition: all 0.25s var(--db-ease); pointer-events: none; z-index: 999; }
.db-toast.show { opacity: 1; transform: translateY(0); }

.db-chip-removable { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; background: var(--db-accent-bg); color: var(--db-accent); border-radius: 99px; font-size: 12px; font-weight: 600; margin: 0 6px 6px 0; }
.db-chip-removable button { background: rgba(74,144,196,0.18); border: none; color: inherit; cursor: pointer; font-size: 10px; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.db-chip-removable button:hover { background: rgba(74,144,196,0.32); }

.db-week-grid { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; padding-bottom: 6px; }
.db-week-day { flex: 1 0 130px; min-width: 130px; background: var(--db-bg); border-radius: 10px; padding: 10px; }
.db-week-day.today { background: var(--db-accent-bg); border: 1px solid var(--db-accent); }
.db-week-day-head { font-size: 11px; text-transform: capitalize; font-weight: 700; color: var(--db-text2); text-align: center; margin-bottom: 8px; }
.db-week-day-head span { font-size: 15px; color: var(--db-text); }
.db-week-day-body { display: flex; flex-direction: column; gap: 6px; }
.db-week-resa { background: var(--db-panel); border: 1px solid var(--db-border); border-radius: 8px; padding: 6px 8px; font-size: 11.5px; }
.db-week-resa-time { font-weight: 700; color: var(--db-accent); }
.db-week-resa-info { color: var(--db-text2); margin-top: 2px; line-height: 1.4; }
.db-week-empty { text-align: center; color: var(--db-text3); font-size: 12px; padding: 10px 0; }

.db-day-summary { font-size: 13px; font-weight: 700; color: var(--db-accent); margin-bottom: 10px; }
.db-day-list { display: flex; flex-direction: column; gap: 2px; }
.db-day-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 7px 0; border-bottom: 1px solid var(--db-border); }
.db-day-row:last-child { border-bottom: none; }
.db-day-row-time { font-weight: 700; color: var(--db-text); flex-shrink: 0; }

.db-hours-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--db-border); }
.db-hours-row:last-child { border-bottom: none; }
.db-hours-day { width: 90px; flex-shrink: 0; font-weight: 700; font-size: 13px; }
.db-hours-chips { flex: 1; min-width: 0; }
.db-hours-add { display: flex; gap: 8px; flex-shrink: 0; }
@media (max-width: 640px) {
  .db-hours-row { flex-wrap: wrap; }
  .db-hours-add { width: 100%; }
}

.db-closed-date-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--db-border); font-size: 13px; }
.db-closed-date-row:last-child { border-bottom: none; }

.db-modal-backdrop { position: fixed; inset: 0; z-index: 300; background: rgba(20,22,28,0.55); display: flex; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.db-modal { width: 100%; max-width: 440px; margin: auto 0; background: var(--db-panel); border-radius: var(--db-radius); padding: 24px; box-shadow: var(--db-shadow-lg, 0 20px 60px rgba(0,0,0,0.3)); }

/* ---------- animation d'ouverture (marque TheSeat) ----------
   Portée telle quelle depuis .tv-transition/.tv-anim-* du widget public
   (même SVG, mêmes keyframes) : joue automatiquement au chargement de la
   page (pas besoin d'une classe .show déclenchée par un clic comme dans le
   widget, ici c'est systématique à chaque ouverture). */
.db-splash {
  position: fixed; inset: 0; z-index: 999;
  background: radial-gradient(120% 120% at 50% 0%, #231E17, #0B0A09);
  display: flex; align-items: center; justify-content: center;
  opacity: 1; transition: opacity 0.5s ease;
}
.db-splash.hide { opacity: 0; pointer-events: none; }
.db-splash-logo { text-align: center; }
.db-splash-stage { position: relative; width: 140px; height: 140px; margin: 0 auto 26px; }
.db-splash-ring {
  position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(227,196,141,.65);
  opacity: 0; transform: scale(0.9);
  animation: dbSplashBeatRing 2.2s ease-out forwards;
}
.db-splash-beat {
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 16px 34px rgba(10,8,6,0.28));
  animation: dbSplashBeat 2.2s cubic-bezier(.3,0,.2,1) forwards;
}
.db-splash-snake { stroke-dasharray: 26 124; opacity: 0; animation: dbSplashSnake 2.2s cubic-bezier(.4,0,.25,1) forwards; }
.db-splash-sfull { opacity: 0; animation: dbSplashSFull 2.2s ease-out forwards; }
.db-splash-t { opacity: 0; transform: translateY(-14px) scale(.9); transform-origin: 50% 42%; animation: dbSplashTIn 2.2s cubic-bezier(.16,1,.3,1) forwards; }
.db-splash-word { opacity: 0; transform: translateY(8px); animation: dbSplashBeatWord 2.2s cubic-bezier(.16,1,.3,1) forwards; }
.db-splash-title { font-size: 17px; font-weight: 400; letter-spacing: 0.46em; text-transform: uppercase; color: #F6F2EA; margin-bottom: 16px; padding-left: 0.46em; }
.db-splash-rule { width: 160px; height: 1px; background: linear-gradient(to right, transparent, rgba(227,196,141,.75), transparent); margin: 0 auto 12px; }
.db-splash-tag { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(246,242,234,.55); }

@keyframes dbSplashSnake { 0% { stroke-dashoffset: -150; opacity: 0; } 4% { opacity: 1; } 46% { stroke-dashoffset: 0; opacity: 1; } 50%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dbSplashSFull { 0%, 46% { opacity: 0; } 52%, 100% { opacity: 1; } }
@keyframes dbSplashTIn { 0%, 52% { opacity: 0; transform: translateY(-14px) scale(.9); } 62%, 100% { opacity: 1; transform: none; } }
@keyframes dbSplashBeat { 0%, 62% { transform: scale(1); } 66% { transform: scale(1.11); } 70% { transform: scale(1); } 74% { transform: scale(1.07); } 78%, 100% { transform: scale(1); } }
@keyframes dbSplashBeatRing { 0%, 62% { opacity: 0; transform: scale(.9); } 67% { opacity: .6; transform: scale(1.06); } 76% { opacity: .4; transform: scale(1.02); } 84%, 100% { opacity: 0; transform: scale(1.2); } }
@keyframes dbSplashBeatWord { 0%, 74% { opacity: 0; transform: translateY(8px); } 90%, 100% { opacity: 1; transform: none; } }

.db-hidden { display: none !important; }

/* ---------- téléphone : la barre latérale fixe (228px) écraserait le
   contenu sur un petit écran, elle devient une barre du haut, pleine
   largeur, avec les onglets en ligne défilante plutôt qu'empilés ---------- */
@media (max-width: 760px) {
  .db-shell { flex-direction: column; }
  .db-sidebar { width: 100%; border-right: none; border-bottom: 1px solid var(--db-border); padding: 16px 14px; }
  .db-nav { flex-direction: row; overflow-x: auto; gap: 6px; flex: none; padding-bottom: 2px; }
  .db-nav-item { width: auto; white-space: nowrap; flex-shrink: 0; }
  .db-sidebar-footer { border-top: none; padding-top: 10px; }
  .db-main { padding: 20px 16px; }
  .db-page-title { font-size: 20px; }
  .db-funnel-label { width: 92px; font-size: 12px; }
  .db-funnel-value { width: 46px; font-size: 12px; }
  .db-media-grid { grid-template-columns: repeat(2, 1fr); }
  table.db-table { display: block; overflow-x: auto; white-space: nowrap; }
  .db-toast { left: 16px; right: 16px; bottom: 16px; text-align: center; }
}