/* ════════════════════════════════════════════════════════════════
   SEL · Hub Mommento — feuille de redesign (chargée EN DERNIER)
   Override des tokens CSS définis dans <style> de index.html.
   Source : Charte Sel v0.2 · Marie Julien Cuisine
   ════════════════════════════════════════════════════════════════ */

/* ─────────── Polices Sel ─────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─────────── 1. TOKENS — override des variables existantes ───────────
   Mapping : variable historique  →  équivalent Sel
   On garde les noms existants pour que toute l'app hérite sans toucher au CSS d'origine. */
:root {
  /* Tokens Sel exposés (au cas où du code futur les utilise) */
  --color-ink:           #0F172A;
  --color-ink-soft:      #334155;
  --color-muted:         #64748B;
  --color-canvas:        #FFFFFF;
  --color-surface:       #FAFAF9;
  --color-wash:          #F8FAFC;
  --color-line:          #E5E7EB;
  --color-line-soft:     #F1F5F9;
  --color-accent:        #4F46E5;
  --color-accent-hover:  #4338CA;
  --color-accent-soft:   #EEF2FF;
  --color-on-accent:     #FFFFFF;
  --color-success:       #059669;
  --color-success-soft:  #ECFDF5;
  --color-warn:          #D97706;
  --color-warn-soft:     #FFFBEB;
  --color-danger:        #DC2626;
  --color-danger-soft:   #FEF2F2;
  --color-info:          #0EA5E9;
  --color-info-soft:     #F0F9FF;

  /* Override des alias historiques utilisés partout dans index.html */
  --brand:         #4F46E5;
  --brand-dark:    #4338CA;
  --brand-light:   #6366F1;
  --primary:       #4F46E5;
  --primary-hover: #4338CA;
  --accent:        #EEF2FF;
  --muted:         #64748B;

  --bg:            #FFFFFF;
  --card:          #FFFFFF;
  --surface:       #FAFAF9;
  --surface-2:     #F8FAFC;

  --text:          #0F172A;
  --text-soft:     #334155;
  --text-faint:    #64748B;

  --border:        #E5E7EB;
  --border-soft:   #F1F5F9;

  --ok:            #059669;
  --warn:          #D97706;
  --danger:        #DC2626;
  --info:          #0EA5E9;

  /* Ombres tonales (teintées vers l'encre, jamais de noir pur) */
  --shadow:    0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, .06), 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-lg: 0 8px 24px rgba(15, 23, 42, .08), 0 2px 6px rgba(15, 23, 42, .04);

  /* Rayons Sel : 10 pour boutons/champs, 14 pour cartes/modales */
  --radius:    10px;
  --radius-sm: 4px;
  --radius-lg: 14px;

  --t-fast: 120ms cubic-bezier(.2, .7, .3, 1);

  /* Polices */
  --font-display: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter',       -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* Dark mode : on assombrit la surface en gardant l'indigo Sel */
[data-theme="dark"] {
  --bg:            #0B0F1A;
  --card:          #111827;
  --surface:       #0F172A;
  --surface-2:     #1E293B;
  --text:          #F1F5F9;
  --text-soft:     #CBD5E1;
  --text-faint:    #94A3B8;
  --border:        #1E293B;
  --border-soft:   #111827;
  --brand:         #6366F1;
  --primary:       #6366F1;
  --primary-hover: #818CF8;
  --accent:        #1E1B4B;
  --shadow:    0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, .5), 0 2px 4px rgba(0, 0, 0, .3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
}

/* ─────────── 2. POLICES — application globale ─────────── */
body, button, input, select, textarea {
  font-family: var(--font-body);
  letter-spacing: -0.005em;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  color: var(--text);
}
.mono, code, kbd, samp, pre,
[class*="ref"], [class*="amount"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
/* Inputs numériques : Inter (plus compact) + tabular-nums pour l'alignement,
   PAS JetBrains Mono qui élargit trop les chiffres et tronque dans les steppers serrés */
input[type="number"], input[inputmode="numeric"], input[inputmode="decimal"] {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
/* Steppers de quantité (commandes / préparation) : largeur minimum pour 3 chiffres */
.qty-input {
  min-width: 60px !important;
  width: 60px !important;
  padding: 6px 4px !important;
  text-align: center !important;
}
@media (max-width: 480px) {
  .qty-input { min-width: 56px !important; width: 56px !important; }
}

/* Supprime les spin buttons natifs WebKit/Firefox qui tronquent l'affichage
   des chiffres dans les inputs numériques (notamment les .qty-input des
   commandes / préparation) */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ─────────── 3. FOCUS RING — indigo Sel ─────────── */
input:focus, select:focus, textarea:focus,
button:focus-visible, a:focus-visible {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15) !important;
  outline: none;
}

/* ─────────── 4. BOUTONS — rectangle rayon 10, pas pills ─────────── */
button, .btn,
input[type="button"], input[type="submit"] {
  border-radius: var(--radius);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: background var(--t-fast),
              border-color var(--t-fast),
              box-shadow var(--t-fast),
              transform var(--t-fast);
}
button:active, .btn:active { transform: translateY(1px); }

/* Boutons primaires (héritent --brand/--primary déjà override) */
.btn-primary, button.primary, .primary-btn {
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 1px solid var(--color-accent);
}
.btn-primary:hover, button.primary:hover, .primary-btn:hover {
  background: var(--color-accent-hover);
  box-shadow: 0 4px 12px rgba(79, 70, 229, .32);
}

/* ─────────── 5. CHAMPS — radius 10, padding cohérent ─────────── */
input, select, textarea {
  border-radius: var(--radius);
  background: var(--card);
  border: 1px solid var(--border);
}

/* ─────────── 6. BADGES & PILLS sémantiques (compat existant) ─────────── */
.badge, .pill, .tag, .chip {
  letter-spacing: -0.01em;
  font-weight: 500;
}

/* ─────────── 7. CARTES — radius 14, ombre tonale ─────────── */
.card, .panel, [class*="-card"]:not(.card-elev-0) {
  border-radius: var(--radius-lg);
}

/* ─────────── 8. SIDEBAR & TOPBAR ─────────── */
header.topbar {
  background: var(--card);
  border-bottom: 1px solid var(--border);
}
header.topbar h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.sidebar-brand-text .title {
  font-family: var(--font-display);
  font-weight: 600;
}

/* ─────────── 9. TABULAR NUMS sur chiffres KPI ─────────── */
.kpi-value, .stat-value, .number, .montant, .amount,
[class*="kpi"] [class*="value"],
td[class*="num"], td[class*="amount"] {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ─────────── 10. EYEBROW / labels uppercase ─────────── */
.eyebrow, .label-up, [class*="uppercase"] {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
}

/* ─────────── 11. COULEURS LEGACY HARDCODÉES — remap vers Sel ─────────── */
/* Anciens swatches warn/danger Tailwind (#92400e, #fef3c7, #991b1b, #fee2e2) :
   on les neutralise via leur usage le plus commun (badges, alerts) en s'appuyant
   sur les classes utilitaires existantes. Cas-par-cas si nécessaire dans phase 2. */

/* ─────────── 12. SCROLLBAR discrète ─────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-faint); }

/* ─────────── 13. SÉLECTION TEXTE — indigo Sel ─────────── */
::selection {
  background: rgba(79, 70, 229, .18);
  color: var(--color-ink);
}

/* ════════════════════════════════════════════════════════════════
   AA. APP SHELL — alignement fidèle Hub MJC (post-login)
   Override de la sidebar / topbar / main pour matcher le design Sel.
   ════════════════════════════════════════════════════════════════ */

/* ─────────── BACKGROUND PAGE = SURFACE (pas canvas blanc) ─────────── */
body { background: var(--color-surface) !important; }

/* ─────────── SIDEBAR : 220px (au lieu de 260), spacing aéré, items subtils ─────────── */
@media (min-width: 720px) {
  .sidebar {
    width: 220px !important;
    background: var(--color-surface) !important;
    border-right: 1px solid var(--color-line) !important;
    padding: 0 !important;
  }
  .sidebar.collapsed { width: 64px !important; }
  body { padding-left: 220px !important; }
  body.sidebar-collapsed { padding-left: 64px !important; }
}

/* Brand sidebar : mark carré 26px + titre + sous-titre (style Hub MJC) */
.sidebar-brand {
  padding: 16px 16px 14px !important;
  border-bottom: 1px solid var(--color-line) !important;
}
.sidebar-brand-pill {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px !important;
  background: var(--color-accent);
}
img.sidebar-brand-pill { padding: 4px; }
.sidebar-brand-text .title {
  font-family: var(--font-display) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  color: var(--color-ink) !important;
}
.sidebar-brand-text .subtitle {
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  color: var(--color-muted) !important;
  margin-top: 1px !important;
}

/* Navigation : items subtils style Hub MJC */
.sidebar-nav { padding: 12px 10px !important; }
.sidebar-section-label {
  padding: 16px 10px 6px !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.1em !important;
  color: var(--color-muted) !important;
}
.sidebar-item {
  padding: 8px 10px !important;
  border-radius: 8px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-ink-soft) !important;
  gap: 10px !important;
  min-height: 34px !important;
  transition: background var(--t-fast), color var(--t-fast) !important;
}
.sidebar-item:hover {
  background: var(--color-wash) !important;
  color: var(--color-ink) !important;
}
/* Override CRITIQUE : item actif = accent-soft + accent (pas indigo plein) */
.sidebar-item.active {
  background: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
  font-weight: 600 !important;
}
.sidebar-item.active:hover {
  background: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
}
.sidebar-item svg { width: 16px !important; height: 16px !important; stroke-width: 2 !important; }

/* Footer sidebar (user chip) */
.sidebar-footer {
  border-top: 1px solid var(--color-line) !important;
  padding: 12px !important;
}
.sidebar-footer-avatar {
  width: 32px !important;
  height: 32px !important;
  background: var(--color-accent) !important;
  font-family: var(--font-display) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.sidebar-footer-info .name {
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-ink) !important;
}
.sidebar-footer-info .role {
  font-size: 11px !important;
  color: var(--color-muted) !important;
}

/* ─────────── TOPBAR : 56px, fond canvas, app-switcher intégré ─────────── */
header.topbar {
  height: 56px !important;
  padding: 0 24px !important;
  background: var(--color-canvas) !important;
  border-bottom: 1px solid var(--color-line) !important;
  gap: 12px !important;
}
header.topbar h1 {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: -0.01em !important;
}

/* App-switcher : pilule segmentée (style segmented control Sel) — déjà bien fait dans Mommento, on harmonise */
.mjc-app-switcher-bar {
  /* La barre séparée devient inutile sur desktop : l'app-switcher est intégré DANS la topbar via JS existant.
     Sur Mommento l'app-switcher est déjà dans la topbar (vu dans le screenshot précédent), donc on cache juste
     la banner sous la topbar si elle existe. */
  padding: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
}
.mjc-app-switcher {
  background: var(--color-line-soft) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: 8px !important;
  padding: 3px !important;
}
.mjc-app-switcher-btn {
  height: 28px !important;
  padding: 0 12px !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--color-muted) !important;
  border-radius: 6px !important;
}
.mjc-app-switcher-btn:hover {
  color: var(--color-ink) !important;
  background: transparent !important;
}
.mjc-app-switcher-btn.active {
  background: var(--color-canvas) !important;
  color: var(--color-ink) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
}

/* ─────────── MAIN CONTENT : max-width généreuse + padding aéré ─────────── */
main.app {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 32px !important;
  padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important;
  background: transparent !important;
}
@media (max-width: 719px) {
  main.app { padding: 20px 16px !important; }
}

/* ─────────── PATTERN PageHeader (.page-header / .page-title / .page-eyebrow) ─────────── */
.page-header, .sel-page-header {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.page-header-body { min-width: 0; flex: 1; }
.page-header-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.page-eyebrow, .sel-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 6px;
  display: block;
}
.page-title, .sel-page-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-ink);
  margin: 0;
}
.page-sub, .sel-page-sub {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--color-muted);
  margin-top: 6px;
  line-height: 1.5;
}

/* ─────────── CARDS Sel partout (enveloppent les sections) ─────────── */
.sel-card, .card {
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.sel-card--elev-0 { box-shadow: none; }
.sel-card--elev-2 { box-shadow: var(--shadow-md); }
.sel-card--elev-3 { box-shadow: var(--shadow-lg); }

/* ─────────── TABLES Sel (data tables internes) ─────────── */
.sel-table, table.data-table {
  width: 100%;
  border: 1px solid var(--color-line);
  border-radius: 10px;
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-canvas);
}
.sel-table thead th, table.data-table thead th {
  background: var(--color-surface);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-muted);
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--color-line);
}
.sel-table tbody td, table.data-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-line-soft);
  font-size: 14px;
  color: var(--color-ink);
}
.sel-table tbody tr:last-child td, table.data-table tbody tr:last-child td {
  border-bottom: none;
}
.sel-table tbody tr:hover td, table.data-table tbody tr:hover td {
  background: var(--color-wash);
}

/* ─────────── BADGES Sel (pilules statut) ─────────── */
.sel-badge, .badge-success, .badge-warn, .badge-danger, .badge-accent, .badge-info, .badge-muted {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.sel-badge::before, .badge-success::before, .badge-warn::before, .badge-danger::before,
.badge-accent::before, .badge-info::before, .badge-muted::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 999px;
  background: currentColor;
}
.sel-badge--success, .badge-success { background: var(--color-success-soft); color: var(--color-success); }
.sel-badge--warn,    .badge-warn    { background: var(--color-warn-soft);    color: var(--color-warn);    }
.sel-badge--danger,  .badge-danger  { background: var(--color-danger-soft);  color: var(--color-danger);  }
.sel-badge--accent,  .badge-accent  { background: var(--color-accent-soft);  color: var(--color-accent);  }
.sel-badge--info,    .badge-info    { background: var(--color-info-soft);    color: var(--color-info);    }
.sel-badge--muted,   .badge-muted   { background: var(--color-line-soft);    color: var(--color-muted);   }

/* ─────────── KPI CARDS (dashboard) ─────────── */
.kpi-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 20px;
  box-shadow: var(--shadow-sm);
}
.kpi-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: var(--color-muted);
}
.kpi-value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin-top: 6px;
  line-height: 1;
}
.kpi-delta { font-size: 12px; margin-top: 8px; color: var(--color-muted); }
.kpi-delta--up   { color: var(--color-success); }
.kpi-delta--down { color: var(--color-danger); }
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

/* ════════════════════════════════════════════════════════════════
   BB. PATTERNS D'APP INTERNE — alignement complet sur Hub MJC
   Override des modales, tabs, boutons sémantiques, toasts, etc.
   ════════════════════════════════════════════════════════════════ */

/* ─────────── MODALES (cards centrées avec backdrop) ─────────── */
.modal-overlay {
  background: rgba(15, 23, 42, .56) !important;
  backdrop-filter: blur(2px);
}
.modal {
  background: var(--color-canvas) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 24px !important;
}
.modal h3, .modal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

/* ─────────── TABS (en-têtes d'onglets dans modales et pages) ─────────── */
.tab {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  color: var(--color-muted);
  padding: 8px 14px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: all var(--t-fast);
}
.tab:hover {
  background: var(--color-wash) !important;
  color: var(--color-ink);
}
.tab.active {
  background: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
  font-weight: 600;
}

/* ─────────── BOUTONS VARIANTES SÉMANTIQUES ─────────── */
.btn {
  font-family: var(--font-body);
  font-weight: 500;
  border-radius: 10px;
  transition: all var(--t-fast);
}
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); border: 1px solid var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-hover); box-shadow: 0 4px 12px rgba(79, 70, 229, .32); }
.btn-secondary { background: var(--color-canvas); color: var(--color-ink); border: 1px solid var(--color-line); box-shadow: var(--shadow-sm); }
.btn-secondary:hover { border-color: var(--color-muted); }
.btn-ghost { background: transparent; color: var(--color-ink-soft); }
.btn-ghost:hover { background: var(--color-wash); color: var(--color-ink); }
.btn-danger { background: var(--color-canvas); color: var(--color-danger); border: 1px solid var(--color-line); }
.btn-danger:hover { background: var(--color-danger-soft); border-color: var(--color-danger); }
.btn-success { background: var(--color-success); color: #fff; border: 1px solid var(--color-success); }
.btn-success:hover { background: #047857; box-shadow: 0 4px 12px rgba(5, 150, 105, .25); }
.btn-warn { background: var(--color-warn); color: #fff; border: 1px solid var(--color-warn); }
.btn-warn:hover { background: #B45309; box-shadow: 0 4px 12px rgba(217, 119, 6, .25); }
.btn-sm { font-size: 13px; padding: 6px 12px; }
.btn-full { width: 100%; }

/* ─────────── TOASTS (notifications) ─────────── */
.toast {
  background: var(--color-ink) !important;
  color: #fff !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  box-shadow: var(--shadow-lg) !important;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

/* ─────────── AVATARS ─────────── */
.avatar-mini, .user-avatar {
  background: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
  font-family: var(--font-display) !important;
  font-weight: 600;
  border-radius: 999px;
}

/* ─────────── BADGES (override de .badge générique) ─────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.01em;
  background: var(--color-line-soft);
  color: var(--color-muted);
}

/* ─────────── BRAND TOPBAR (logo + nom dans header mobile) ─────────── */
.brand-topbar-mark {
  background: var(--color-accent) !important;
  border-radius: 7px !important;
}
.brand-topbar-name {
  font-family: var(--font-display);
  font-weight: 600;
}

/* ─────────── CARTES CLIQUABLES ─────────── */
.card-clickable {
  border-radius: 14px;
  border: 1px solid var(--color-line);
  background: var(--color-canvas);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.card-clickable:hover {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-md);
}
.card-clickable:active { transform: translateY(1px); }

/* ─────────── EMPTY STATES ─────────── */
.empty, .empty-state {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
}

/* ─────────── CALENDRIER (cellules de jour) ─────────── */
.cal-today {
  background: var(--color-accent-soft) !important;
  color: var(--color-accent) !important;
  font-weight: 600;
}
.cal-selected {
  background: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
  font-weight: 600;
}
.cal-other-month { color: var(--color-muted) !important; opacity: 0.5; }

/* ─────────── PROGRESS BAR ─────────── */
.progress {
  background: var(--color-line) !important;
  border-radius: 999px !important;
}
.progress-bar {
  background: var(--color-accent) !important;
}

/* ─────────── BOTTOM NAV (mobile) ─────────── */
nav.bottomnav {
  background: var(--color-canvas) !important;
  border-top: 1px solid var(--color-line) !important;
}
nav.bottomnav button {
  font-family: var(--font-body);
  color: var(--color-muted);
}
nav.bottomnav button.active {
  color: var(--color-accent) !important;
}

/* ─────────── BACK BUTTON & MENU BTN (topbar) ─────────── */
header.topbar .back-btn, header.topbar .menu-btn {
  color: var(--color-ink-soft) !important;
  border-radius: 8px;
  transition: background var(--t-fast);
}
header.topbar .back-btn:hover, header.topbar .menu-btn:hover {
  background: var(--color-wash);
}

/* ─────────── ADDITEM (layout catalogue + panier dans modales) ─────────── */
.addItem-cart, .addItem-catalog {
  border-radius: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
}
.addItem-cart-header, .addItem-catalog-header {
  background: var(--color-canvas);
  border-bottom: 1px solid var(--color-line);
}

/* ─────────── INPUTS / SELECT / TEXTAREA — focus indigo Sel ─────────── */
input, select, textarea {
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  color: var(--color-ink);
  border-radius: 10px;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--color-accent) !important;
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder { color: var(--color-muted); }

/* ─────────── TEXT HELPERS (text-ok / text-warn / text-danger) ─────────── */
.text-ok      { color: var(--color-success) !important; }
.text-warn    { color: var(--color-warn) !important; }
.text-danger  { color: var(--color-danger) !important; }
.text-small   { font-size: 12px; }
.muted        { color: var(--color-muted); }

/* ─────────── DARK MODE PARITY (si toggle utilisé) ─────────── */
[data-theme="dark"] .modal { background: var(--color-canvas) !important; }
[data-theme="dark"] .toast { background: var(--color-ink) !important; }

/* ════════════════════════════════════════════════════════════════
   PRINT — masque tout le chrome de l'app, ne garde que le contenu
   (impression / export PDF d'un bon de commande, devis, etc.)
   ════════════════════════════════════════════════════════════════ */
@media print {
  .sidebar,
  nav.bottomnav,
  header.topbar,
  .mjc-app-switcher,
  .mjc-app-switcher-bar,
  .brand-topbar,
  .sync-pill,
  .user-chip,
  .user-pill,
  .modal-overlay,
  .toast,
  .no-print,
  .sync-error-banner,
  .backup-banner,
  .skip-link,
  .sidebar-overlay,
  .sidebar-collapse-btn { display: none !important; }

  body, body.no-auth { padding: 0 !important; margin: 0 !important; }
  main.app, #appRoot, .app { padding: 0 !important; margin: 0 !important; max-width: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
}

/* ════════════════════════════════════════════════════════════════
   CC. TOPBAR HARMONISÉE — strictement identique entre toutes les apps MJ
   (app-switcher + sync pill + user chip)
   ════════════════════════════════════════════════════════════════ */

/* ─── App switcher (segmented Sel) ─── */
.mjc-app-switcher {
  display: inline-flex !important;
  align-items: center !important;
  background: var(--color-line-soft) !important;
  border: 1px solid var(--color-line) !important;
  border-radius: 10px !important;
  padding: 3px !important;
  gap: 2px !important;
}
.mjc-app-switcher-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border: none !important;
  background: transparent !important;
  border-radius: 7px !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em !important;
  color: var(--color-muted) !important;
  text-decoration: none !important;
  transition: all var(--t-fast) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
}
.mjc-app-switcher-btn svg { width: 15px !important; height: 15px !important; flex-shrink: 0 !important; }
.mjc-app-switcher-btn:hover {
  color: var(--color-ink) !important;
  background: transparent !important;
}
.mjc-app-switcher-btn.active {
  background: var(--color-canvas) !important;
  color: var(--color-ink) !important;
  font-weight: 600 !important;
  box-shadow: var(--shadow-sm) !important;
  cursor: default !important;
}

/* ─── Sync pill (état de synchro) ─── */
.sync-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  padding: 5px 12px !important;
  border-radius: 999px !important;
  background: var(--color-canvas) !important;
  border: 1px solid var(--color-line) !important;
  font-family: var(--font-body) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--color-ink-soft) !important;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.sync-pill:hover { border-color: var(--color-muted); }
.sync-pill .dot, .sync-pill .sync-dot {
  width: 7px !important;
  height: 7px !important;
  border-radius: 999px !important;
  background: var(--color-success) !important;
  flex-shrink: 0;
}
.sync-pill.offline .dot, .sync-pill.offline .sync-dot { background: var(--color-muted) !important; }
.sync-pill.syncing .dot, .sync-pill.syncing .sync-dot { background: var(--color-warn) !important; }
.sync-pill.error   .dot, .sync-pill.error   .sync-dot { background: var(--color-danger) !important; }
.sync-pill.connected .dot, .sync-pill.connected .sync-dot { background: var(--color-success) !important; }

/* ─── User chip / pill (avatar + nom + chevron) ─── */
.user-chip, .user-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 12px 4px 4px !important;
  border-radius: 999px !important;
  background: var(--color-canvas) !important;
  border: 1px solid var(--color-line) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--color-ink) !important;
  cursor: pointer !important;
  transition: border-color var(--t-fast);
}
.user-chip:hover, .user-pill:hover { border-color: var(--color-muted); }
.sync-pill, .user-chip, .user-pill { flex-shrink: 0 !important; }
/* Compact : on garde uniquement l'avatar + le chevron SVG (le nom est dispo au hover/dans le dropdown) */
.user-chip > *:not(.avatar):not(.user-avatar):not(.avatar-mini):not(svg),
.user-pill > *:not(.avatar):not(.user-avatar):not(.avatar-mini):not(svg) {
  display: none !important;
}
.user-chip, .user-pill {
  padding: 4px 8px 4px 4px !important;
  max-width: 64px;
}
.user-chip svg, .user-pill svg { color: var(--color-muted); }
.mjc-app-switcher { min-width: 0 !important; }
@media (max-width: 1280px) {
  .mjc-app-switcher-btn:not(.active) { gap: 0 !important; }
  .mjc-app-switcher-btn:not(.active) > *:not(svg) {
    max-width: 0; overflow: hidden;
  }
}
.user-chip .avatar, .user-pill .avatar,
.user-chip .user-avatar, .user-pill .user-avatar {
  width: 26px !important;
  height: 26px !important;
  border-radius: 999px !important;
  background: var(--color-accent) !important;
  color: var(--color-on-accent) !important;
  font-family: var(--font-display) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}

/* ════════════════════════════════════════════════════════════════
   14. ÉCRAN DE CONNEXION — layout 2 panneaux split (prod Hub MJC)
   Panneau gauche : marketing sombre. Panneau droit : form OAuth.
   Sur mobile : single column, le panneau marketing est masqué.
   ════════════════════════════════════════════════════════════════ */

/* Override : en mode no-auth (écran de connexion), on libère la page
   du shell standard (topbar, sidebar, container centré) pour que le
   layout split occupe TOUT le viewport. */
body.no-auth { padding: 0 !important; }
body.no-auth header.topbar { display: none; }
body.no-auth main.app,
body.no-auth #appRoot {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.login-split {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  background: var(--color-canvas);
}

/* ──────── PANNEAU GAUCHE — marketing sombre ──────── */
.login-split-left {
  background: var(--color-ink);
  color: #fff;
  padding: 48px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
.login-split-brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.login-split-brand-mark {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 18px rgba(79, 70, 229, .45);
  flex-shrink: 0;
}
.login-split-brand-mark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}
.login-split-brand-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  color: #fff;
}
.login-split-hero { max-width: 520px; }
.login-split-headline {
  font-family: var(--font-display);
  font-size: clamp(32px, 3.4vw, 52px);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0;
  color: #fff;
  word-break: break-word;
}
.login-split-accent {
  color: var(--color-accent);
  display: inline;
}
.login-split-lede {
  margin-top: 28px;
  max-width: 440px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
}
.login-split-footer {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
}

/* ──────── PANNEAU DROIT — form OAuth ──────── */
.login-split-right {
  background: var(--color-canvas);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 56px;
  min-height: 100vh;
}
.login-split-form {
  width: 100%;
  max-width: 380px;
}
.login-split-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-muted);
  text-transform: uppercase;
  margin-bottom: 20px;
}
.login-split-title {
  font-family: var(--font-display);
  font-size: clamp(26px, 2.4vw, 36px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--color-ink);
  margin: 0;
}
.login-split-sub {
  margin: 12px 0 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-muted);
  line-height: 1.5;
}
.login-split-note {
  margin-top: 24px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  line-height: 1.5;
}
.login-split-note strong {
  color: var(--color-ink-soft);
  font-weight: 500;
}

/* Tablette + mobile : on retire le panneau marketing, panneau droit pleine largeur */
@media (max-width: 1023px) {
  .login-split { grid-template-columns: 1fr; }
  .login-split-left { display: none; }
  .login-split-right { padding: 40px 24px; }
}
@media (max-width: 480px) {
  .login-split-right { padding: 32px 20px; }
}

/* ─────── Compatibilité : ancien container conservé pour usages divers ─────── */
.login-container {
  min-height: calc(100vh - 56px);
  max-width: 420px;
  margin: 0 auto;
  padding: 32px 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  text-align: center;
  gap: 0;
}

/* Bandeau de marque : logo Mommento + nom app, centré au-dessus de la carte */
.login-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
}
.login-brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--color-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(79, 70, 229, .25);
}
.login-brand-mark img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: block;
}
.login-brand-mark-text {
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.login-brand-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

/* Carte centrale (équivalent .sel-card .sel-card--elev-2) */
.login-card {
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: 14px;
  padding: 32px 28px;
  box-shadow: var(--shadow-md);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Titre et sous-titre (override des classes existantes) */
.login-container .login-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0;
}
.login-container .login-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--color-muted);
  margin: 8px 0 0;
  line-height: 1.5;
}

/* Picker profils : 1 colonne en pleine largeur (Sel = vertical clean) */
.login-card .user-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 24px;
  width: 100%;
}
.login-card .user-tile {
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.login-card .user-tile:hover {
  border-color: var(--color-accent);
  background: var(--color-accent-soft);
}
.login-card .user-tile:active {
  transform: translateY(1px);
}
.login-card .user-tile .user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.login-card .user-tile .user-name {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  color: var(--color-ink);
}

/* Étape PIN : avatar large centré au-dessus du numpad */
.login-card .user-avatar.large {
  width: 64px;
  height: 64px;
  font-size: 26px;
  margin: 0 auto 14px;
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-display);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Pin dots */
.login-card .pin-dots {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 20px 0 24px;
}
.login-card .pin-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1.5px solid var(--color-line);
  background: transparent;
  transition: all var(--t-fast);
}
.login-card .pin-dot.filled {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
.login-card .pin-dot.error {
  background: var(--color-danger);
  border-color: var(--color-danger);
}

/* Numpad */
.login-card .numpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
}
.login-card .numpad-btn {
  height: 54px;
  border-radius: 10px;
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.login-card .numpad-btn:hover {
  background: var(--color-wash);
  border-color: var(--color-accent);
}
.login-card .numpad-btn:active {
  transform: translateY(1px);
  background: var(--color-accent-soft);
}
.login-card .numpad-btn.empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}
.login-card .numpad-btn.delete {
  color: var(--color-muted);
  font-size: 18px;
}

/* Bouton "← Retour" en haut de la carte PIN */
.login-card .login-back {
  align-self: flex-start;
  background: none;
  border: none;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 13px;
  cursor: pointer;
  padding: 4px 8px;
  margin: -4px -8px 8px;
  border-radius: 6px;
  transition: background var(--t-fast), color var(--t-fast);
}
.login-card .login-back:hover {
  background: var(--color-wash);
  color: var(--color-ink);
}

/* Note de bas de carte (style sel-auth-note) */
.login-note {
  margin-top: 20px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: var(--color-wash);
  border: 1px solid var(--color-line-soft);
  font-size: 11px;
  color: var(--color-muted);
  text-align: left;
  line-height: 1.5;
}
.login-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-success);
  width: 14px;
  height: 14px;
}

/* ─────────── Bouton "Continuer avec Google" (utilisé dans split right) ─────────── */
.login-google {
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--color-ink);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  box-shadow: var(--shadow-sm);
}
.login-google:hover {
  border-color: var(--color-accent);
  background: var(--color-wash);
  box-shadow: var(--shadow-md);
}
.login-google:active { transform: translateY(1px); }
.login-google svg { flex-shrink: 0; }
.login-google span { white-space: nowrap; }

/* ─────────── Form magic-link (conservé pour usage éventuel) ─────────── */
.login-form {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-card .login-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--color-canvas);
  border: 1px solid var(--color-line);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.login-card .login-input::placeholder { color: var(--color-muted); }
.login-card .login-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
  outline: none;
}
.login-card .login-input:disabled { background: var(--color-wash); color: var(--color-muted); }

.login-card .login-submit {
  width: 100%;
  padding: 12px 16px;
  background: var(--color-accent);
  color: var(--color-on-accent);
  border: 1px solid var(--color-accent);
  border-radius: 10px;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast);
}
.login-card .login-submit:hover:not(:disabled) {
  background: var(--color-accent-hover);
  box-shadow: 0 4px 12px rgba(79, 70, 229, .32);
}
.login-card .login-submit:active:not(:disabled) { transform: translateY(1px); }
.login-card .login-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ─────────── État "lien envoyé" (success) ─────────── */
.login-success {
  text-align: center;
  padding: 8px 0;
}
.login-success-icon {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--color-success-soft);
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.login-link {
  margin-top: 20px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-family: var(--font-body);
  font-size: 12px;
  text-decoration: underline;
  padding: 4px 8px;
}
.login-link:hover { color: var(--color-ink); }

/* ─────────── Bannière d'erreur d'auth ─────────── */
.login-alert {
  margin-top: 20px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-size: 13px;
  line-height: 1.5;
  text-align: left;
}

/* ─────────── Spinner de callback OAuth ─────────── */
.login-spinner {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 3px solid var(--color-line);
  border-top-color: var(--color-accent);
  margin: 8px auto 16px;
  animation: login-spin 800ms linear infinite;
}
@keyframes login-spin {
  to { transform: rotate(360deg); }
}

/* Mobile : padding latéral réduit */
@media (max-width: 480px) {
  .login-container { padding: 24px 16px 40px; max-width: 100%; }
  .login-card { padding: 24px 20px; }
}

/* ════════════════════════════════════════════════════════════════
   TOPBAR RESPONSIVE — mobile = brand + dot sync + avatar user
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
  header.topbar .mjc-app-switcher { display: none !important; }
  header.topbar .sync-pill {
    padding: 0 !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 999px !important;
    justify-content: center !important;
    border: 1px solid var(--color-line) !important;
    background: var(--color-canvas) !important;
  }
  header.topbar .sync-pill .sync-text,
  header.topbar .sync-pill #sync-text,
  header.topbar .sync-pill > span:not(.dot):not(.sync-dot) {
    display: none !important;
  }
  header.topbar .sync-pill .dot,
  header.topbar .sync-pill .sync-dot {
    width: 8px !important;
    height: 8px !important;
  }
  header.topbar .main-topbar-spacer { display: none !important; }
  header.topbar h1 { display: none !important; }
  header.topbar { gap: 10px !important; padding: 8px 12px !important; }
}