/* ============================================================================
   TOKENS DE COULEUR — source unique de vérité
   ----------------------------------------------------------------------------
   Trois couches, à ne jamais mélanger :

   1. ACTION      --accent (+ -hover, -weak, -strong)
      Un seul accent d'action dans toute l'app. Boutons primaires, liens
      textuels, onglet actif, état sélectionné. Rien d'autre n'a le droit
      d'attirer l'œil comme une action.

   2. STATUT      --success / --warning / --danger (+ -weak, -strong)
      Réservés aux ÉTATS : au pré (success), en sortie (warning), retard ou
      annulation (danger). Jamais pour décorer, jamais pour une action.

   3. CATÉGORIE   --cat-* (+ -weak)
      Palette catégorielle des types (intervention, document). Elle sert à
      distinguer, pas à hiérarchiser. Voir app/core/ui_types.py : c'est lui
      qui associe un type à un token, les gabarits ne choisissent jamais.

   Les composants n'écrivent aucune valeur hexadécimale : ils consomment ces
   tokens. Les noms hérités (--primary, --card-bg, --text-main…) sont conservés
   plus bas comme alias, le temps que l'espace d'administration migre.
   ========================================================================== */
:root {
  /* ── 1. Action ── */
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-light: #818cf8;   /* uniquement pour les dégradés de l'accent */
  --accent-weak: #eef2ff;
  --accent-strong: #4338ca;

  /* ── 2. Statut ── */
  --success: #16a34a;
  --success-weak: #dcfce7;
  --success-strong: #166534;
  --warning: #d97706;
  --warning-weak: #fef3c7;
  --warning-strong: #92400e;
  --danger: #dc2626;
  --danger-weak: #fee2e2;
  --danger-strong: #991b1b;

  /* ── 3. Catégorie (types d'intervention et de document) ── */
  --cat-violet: #7c3aed;  --cat-violet-weak: #ede9fe;
  --cat-amber:  #d97706;  --cat-amber-weak:  #fef3c7;
  --cat-blue:   #2563eb;  --cat-blue-weak:   #dbeafe;
  --cat-green:  #16a34a;  --cat-green-weak:  #dcfce7;
  --cat-red:    #dc2626;  --cat-red-weak:    #fee2e2;
  --cat-teal:   #0d9488;  --cat-teal-weak:   #ccfbf1;
  --cat-slate:  #64748b;  --cat-slate-weak:  #eef2f7;

  /* ── Surfaces et texte ── */
  --surface: #f1f5f9;
  --surface-raised: #ffffff;
  --surface-sunken: #f8fafc;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --text-muted: #64748b;
  --text-faint: #94a3b8;
  --text-on-accent: #ffffff;
  --text-on-media: #ffffff;   /* texte posé sur une photo assombrie */
  --border: #e2e8f0;
  --border-strong: #cbd5e1;

  /* ── Chrome applicatif (sidebar sombre de l'espace exploitation) ── */
  --sidebar-w: 260px;
  --sidebar-bg: #0f172a;
  --sidebar-border: #1e293b;
  --sidebar-text: #94a3b8;
  --sidebar-hover: #1e293b;
  --sidebar-active-bg: var(--accent);
  --sidebar-active-text: #ffffff;
  --topbar-h: 64px;
  --topbar-bg: var(--surface-raised);

  /* ── Illustration ──────────────────────────────────────────────────────────
     Teintes sable des visuels « pas encore de contenu » et du fond de photo
     manquante. Ce ne sont pas des couleurs d'interface : elles n'ont ni sens
     d'action ni sens de statut, elles remplacent une image absente. */
  --illus-sand-light: #f0e9dd;
  --illus-sand: #e7d8c1;
  --illus-sand-deep: #e0d0b8;
  --photo-fallback-from: #cbb494;
  --photo-fallback-to: #a98f6b;

  /* ── Formes ── */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow-md: 0 6px 16px rgba(15,23,42,.1);
  --shadow-card: 0 2px 8px rgba(2,6,23,.05);
  --shadow-raised: 0 4px 16px rgba(2,6,23,.06);
  --transition: 150ms ease;

  /* ── Alias hérités ─────────────────────────────────────────────────────────
     Conservés pour l'espace d'administration, pas encore migré. Ne pas les
     utiliser dans du code neuf : ils pointent tous vers un token ci-dessus.
     Le token --owner-accent (#0ea5e9, le « bleu iOS ») a été supprimé : le
     portail utilise désormais le même accent d'action que le reste de l'app. */
  --page-bg: var(--surface);
  --card-bg: var(--surface-raised);
  --text-main: var(--text-primary);
  --primary: var(--accent);
  --primary-hover: var(--accent-hover);
  --primary-soft: var(--accent-weak);
  --primary-soft-text: var(--accent-strong);
  --success-soft: var(--success-weak);
  --success-soft-text: var(--success-strong);
  --warning-soft: var(--warning-weak);
  --warning-soft-text: var(--warning-strong);
  --danger-soft: var(--danger-weak);
  --danger-soft-text: var(--danger-strong);
}

/* ===== Thème sombre — data-theme="dark" (bascule auto selon l'heure, ou choix
   manuel). On ne surcharge que les tokens de base : les alias (--card-bg,
   --primary-soft…) pointent dessus et suivent automatiquement.
   NB : les composants qui codent des couleurs en dur (style="background:#fff"…)
   ne suivent pas encore — chantier de migration en cours. ===== */
:root[data-theme="dark"] {
  color-scheme: dark;

  /* Palette « gris chaud neutre » (pas de bleu) : les cartes se détachent par la
     luminance, pas par la teinte. Accent indigo désaturé pour ne pas vibrer sur
     le noir. Base : #15171B / #1E2127 / #262A31 / #8B8FF8 / #4ADE80 / #ECEEF1. */
  /* Même violet d'action qu'en mode clair (#6366f1 + hover/dégradé identiques).
     Seuls -weak (fond) et -strong (texte) restent adaptés au sombre. */
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --accent-light: #818cf8;
  --accent-weak: #2f3040;
  --accent-strong: #b4b7fb;

  --success: #4ade80; --success-weak: #17271d; --success-strong: #4ade80;
  --warning: #f5b544; --warning-weak: #2a2211; --warning-strong: #fcd34d;
  --danger:  #f87171; --danger-weak:  #2a1919; --danger-strong:  #fca5a5;

  --cat-violet: #a78bfa; --cat-violet-weak: #232130;
  --cat-amber:  #fbbf24; --cat-amber-weak:  #2a2211;
  --cat-blue:   #8b8ff8; --cat-blue-weak:   #23242f;
  --cat-green:  #4ade80; --cat-green-weak:  #17271d;
  --cat-red:    #f87171; --cat-red-weak:    #2a1919;
  --cat-teal:   #2dd4bf; --cat-teal-weak:   #13241f;
  --cat-slate:  #9aa0ab; --cat-slate-weak:  #333844;

  --surface: #16171b;
  --surface-raised: #2c303a;
  --surface-sunken: #20232b;
  --text-primary: #eceef1;
  --text-secondary: #cbced5;
  --text-muted: #a2a8b3;
  --text-faint: #7a7f89;
  --text-on-accent: #ffffff;
  --border: #3a3f4a;
  --border-strong: #4b515e;

  --topbar-bg: #262a31;

  /* Barre latérale + nav du bas mobile : gris chaud neutre (pas de bleu-marine)
     pour rester cohérent avec le reste du thème sombre. */
  --sidebar-bg: #262a31;
  --sidebar-hover: #333844;
  --sidebar-text: #a2a8b3;
  --sidebar-border: #363b44;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.5);
  --shadow-md: 0 6px 16px rgba(0,0,0,.55);
  --shadow-card: 0 2px 8px rgba(0,0,0,.45);
  --shadow-raised: 0 4px 16px rgba(0,0,0,.5);

  /* Variables de base Bootstrap : composants (.card, .table, .dropdown…) qui
     s'appuient dessus suivent alors le thème sombre sans surcharge par classe. */
  --bs-body-color: var(--text-primary);
  --bs-body-color-rgb: 236, 238, 241;
  --bs-body-bg: var(--surface);
  --bs-emphasis-color: var(--text-primary);
  --bs-secondary-color: var(--text-muted);
  --bs-tertiary-color: var(--text-faint);
  --bs-border-color: var(--border);
  --bs-card-cap-color: var(--text-primary);
  --bs-heading-color: var(--text-primary);
  /* Les .list-group-item héritaient de --bs-body-bg (= --surface) et recouvraient
     ainsi le fond des cartes. Transparent → ils prennent le fond de leur conteneur
     (la carte en --surface-raised). */
  --bs-list-group-bg: transparent;
}
html[data-theme="dark"] body { background: var(--surface); color: var(--text-primary); }

/* Utilitaires Bootstrap à couleur figée (light) : les faire suivre le thème sombre.
   On exclut .badge : son fond est une couleur fixe (jaune/vert…) sur laquelle le
   texte foncé garde un bon contraste dans les deux thèmes. */
html[data-theme="dark"] .text-dark:not(.badge),
html[data-theme="dark"] .text-black:not(.badge) { color: var(--text-primary) !important; }
html[data-theme="dark"] .text-body { color: var(--text-primary) !important; }
html[data-theme="dark"] .bg-white { background-color: var(--surface-raised) !important; }
html[data-theme="dark"] .bg-light { background-color: var(--surface-sunken) !important; }
/* Survol des liens de barre latérale : le défaut color:var(--border) devient trop
   foncé sur le fond gris chaud → on force un texte clair lisible. */
html[data-theme="dark"] .sidebar-link:hover { color: var(--text-primary); }
/* Sur fond sombre, l'ombre ne sépare plus : les cartes se détachent par une
   bordure un peu plus claire que leur fond (cf. maquette « pas de bleu »). */
html[data-theme="dark"] .card { border-color: var(--border-strong) !important; }

/* ===== Bascule de thème dans le menu latéral (interrupteur) ===== */
.sidebar-theme { width: 100%; border: 0; background: transparent; cursor: pointer; text-align: left; }
.sidebar-theme .sb-theme-lbl { flex: 1; }
.sidebar-theme .sb-theme-switch { flex-shrink: 0; width: 38px; height: 22px; border-radius: 999px;
  background: var(--sidebar-hover); position: relative; transition: background var(--transition); }
.sidebar-theme .sb-theme-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; transition: transform var(--transition); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.sidebar-theme.on .sb-theme-switch { background: var(--accent); }
.sidebar-theme.on .sb-theme-knob { transform: translateX(16px); }

/* ===== Accessibilité : focus visible ===== */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Sur fond sombre (sidebar, barre d'onglets), l'accent manque de contraste :
   on l'éclaircit sans changer de teinte. */
.sidebar :focus-visible,
.mobile-bottom-nav :focus-visible {
  outline-color: color-mix(in srgb, var(--accent) 55%, #fff);
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background: var(--page-bg);
  color: var(--text-main);
  font-size: 0.9rem;
}

.app-wrapper { display: flex; min-height: 100vh; min-height: 100dvh; }

.sidebar {
  width: var(--sidebar-w);
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  height: 100dvh;
  background: var(--sidebar-bg);
  overflow-y: auto;
  z-index: 200;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.content-area {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.topbar {
  height: var(--topbar-h);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  gap: 1rem;
}

.main-content {
  flex: 1;
  padding: 2rem;
  background: var(--page-bg);
}

.sidebar-logo {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--sidebar-border);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--sidebar-active-text);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  flex-shrink: 0;
}

.sidebar-logo .logo-icon {
  width: 36px; height: 36px;
  background: var(--primary);
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
}


.sidebar-nav { flex: 1; padding: 1rem 0; }

.nav-group-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-text);
  padding: 0.75rem 1.5rem 0.35rem;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 1.5rem;
  color: var(--sidebar-text);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--transition), color var(--transition);
}

.sidebar-link:hover {
  background: var(--sidebar-hover);
  color: var(--border);
}

.sidebar-link.active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
}

.sidebar-link i { font-size: 1rem; width: 1.25rem; text-align: center; }

.sidebar-footer {
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--sidebar-border);
}

/* Contraste du bouton déconnexion dans la sidebar (fond sombre) */
.sidebar-footer .btn-logout {
  color: var(--border-strong);
  border-color: var(--sidebar-hover);
}

.topbar-hamburger {
  background: none; border: none; padding: 0.35rem;
  color: var(--text-muted); cursor: pointer; display: none;
  font-size: 1.3rem;
}

.topbar-breadcrumb {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.topbar-breadcrumb strong { color: var(--text-main); }

.topbar-right { display: flex; align-items: center; gap: 0.75rem; }

.role-badge {
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.role-badge.admin  { background: var(--cat-violet-weak); color: var(--cat-violet); }
.role-badge.gerant { background: var(--cat-green-weak);  color: var(--success-strong); }
.role-badge.owner  { background: var(--accent-weak);     color: var(--accent-strong); }

.topbar-user {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 0.875rem; font-weight: 500;
  border: none; background: none; padding: 0.25rem;
  color: var(--text-main); font-family: inherit;
  cursor: pointer; border-radius: var(--radius-sm);
}

.user-avatar {
  width: 32px; height: 32px;
  background: var(--primary);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-on-accent); font-size: 0.8rem; font-weight: 600;
}


.btn-logout {
  background: none; border: 1px solid var(--border);
  color: var(--text-muted); border-radius: var(--radius-sm);
  padding: 0.35rem 0.75rem; font-size: 0.8rem;
  cursor: pointer; text-decoration: none; display: flex; align-items: center; gap: 0.4rem;
  transition: all var(--transition);
}

.btn-logout:hover { background: var(--danger-weak); border-color: color-mix(in srgb, var(--danger) 40%, #fff); color: var(--danger); }

.card {
  background: var(--card-bg);
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: box-shadow var(--transition), transform var(--transition);
}

.card-header {
  background: var(--card-bg) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding: 1rem 1.25rem !important;
  font-weight: 600;
}

.card-footer {
  background: var(--card-bg) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
}

.kpi-card {
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  border: 1px solid var(--border);
  background: var(--card-bg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition), transform var(--transition);
}

/* Micro-interactions : cartes cliquables et boutons */
.card-link { display: block; text-decoration: none; color: inherit; }
.card-link:hover > .card,
.card-link:hover > .kpi-card,
a:hover > .kpi-card,
.card-link:hover {
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-1px);
}
.btn { transition: background var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.btn:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .card-link:hover, .card-link:hover > .card, .card-link:hover > .kpi-card,
  a:hover > .kpi-card, .btn:active { transform: none; }
}

.kpi-icon {
  width: 48px; height: 48px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.35rem; flex-shrink: 0;
}

.kpi-value { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.kpi-label { font-size: 0.8rem; color: var(--text-muted); font-weight: 500; margin-top: 0.2rem; }

.kpi-icon.purple { background: var(--cat-violet-weak); color: var(--cat-violet); }
.kpi-icon.green  { background: var(--cat-green-weak);  color: var(--cat-green); }
.kpi-icon.blue   { background: var(--cat-blue-weak);   color: var(--cat-blue); }
.kpi-icon.amber  { background: var(--cat-amber-weak);  color: var(--cat-amber); }
.kpi-icon.red    { background: var(--cat-red-weak);    color: var(--cat-red); }
.kpi-icon.sky    { background: var(--accent-weak);     color: var(--accent); }

.table { --bs-table-bg: transparent; }
.table thead th {
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--border);
  padding: 0.75rem 1rem;
}

.table tbody td {
  padding: 0.75rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--surface);
  font-size: 0.875rem;
}

.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover td { background: var(--surface-sunken); }

.badge-status {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.25rem 0.65rem; border-radius: 999px;
  font-size: 0.72rem; font-weight: 600;
}

.badge-active    { background: var(--success-weak); color: var(--success-strong); }
.badge-retired   { background: var(--surface); color: var(--text-secondary); }
.badge-sold      { background: var(--warning-weak); color: var(--warning-strong); }
.badge-deceased  { background: var(--surface); color: var(--text-secondary); }
.badge-scheduled { background: var(--accent-weak); color: var(--accent-strong); }
.badge-completed { background: var(--success-weak); color: var(--success-strong); }
.badge-cancelled { background: var(--danger-weak); color: var(--danger-strong); }
.badge-income    { background: var(--success-weak); color: var(--success-strong); }
.badge-expense   { background: var(--danger-weak); color: var(--danger-strong); }
.badge-admin-role  { background: var(--cat-violet-weak); color: var(--cat-violet); }
.badge-gerant-role { background: var(--cat-green-weak); color: var(--success-strong); }
.badge-owner-role  { background: var(--accent-weak); color: var(--accent-strong); }

.avatar-initials {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--text-on-accent);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 600; flex-shrink: 0;
}

.btn-primary {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: var(--text-on-accent) !important;
}
.btn-primary:hover { background: var(--primary-hover) !important; border-color: var(--primary-hover) !important; }

.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; }

.form-label { font-weight: 600; font-size: 0.8rem; color: var(--text-main); margin-bottom: 0.35rem; }
.form-control, .form-select {
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.875rem;
  padding: 0.5rem 0.75rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
  outline: none;
}

.form-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.page-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.5rem;
}

.page-title {
  font-size: 1.35rem; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 0.5rem;
}

.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  background: linear-gradient(135deg, var(--sidebar-bg) 0%,
              color-mix(in srgb, var(--accent) 26%, var(--sidebar-bg)) 50%, var(--sidebar-bg) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
}

.login-card {
  width: 100%; max-width: 420px;
  background: var(--surface-raised);
  border-radius: 16px;
  padding: 2.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
}

.login-logo { text-align: center; margin-bottom: 2rem; }

.login-logo-icon {
  width: 60px; height: 60px;
  background: var(--primary);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto 1rem;
}

.login-logo h1 { font-size: 1.4rem; font-weight: 700; margin: 0; }
.login-logo p  { color: var(--text-muted); font-size: 0.85rem; margin: 0.25rem 0 0; }

.sidebar-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.5); z-index: 199;
}

/* ===== RESPONSIVE MOBILE ===== */

/* Empêche tout débordement horizontal */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

@media (max-width: 768px) {
  /* Sidebar : glisse hors écran, s'ouvre via hamburger */
  .sidebar {
    transform: translateX(-100%);
    display: flex; /* garder flex pour l'animation */
    z-index: 300;
  }
  .sidebar.open { transform: translateX(0); }
  .sidebar-overlay.open { display: block; }

  /* Zone de contenu : prend tout l'écran */
  .content-area {
    margin-left: 0 !important;
    width: 100%;
    max-width: 100vw;
  }

  /* Topbar */
  .topbar { padding: 0 0.75rem; }
  .topbar-hamburger { display: block; }

  /* Barre du haut masquée sur mobile pour TOUS les espaces (admin, gérant,
     propriétaire) : la navigation se fait par la bottom-nav ; le menu compte /
     déconnexion passe par « Plus » → sidebar (ou l'avatar sur le portail). */
  .topbar { display: none !important; }
  .content-area { padding-top: env(safe-area-inset-top, 0); }

  /* Contenu principal */
  .main-content {
    padding: 0.75rem 0.75rem 5.5rem; /* padding-bottom pour la bottom nav */
  }

  /* Page header responsive */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
  }
  .page-header > *:last-child { align-self: stretch; }
  .page-header .btn { width: 100%; justify-content: center; }

  /* Cartes */
  .card { border-radius: var(--radius-md) !important; }

  /* Tables : scroll horizontal si nécessaire */
  .table { min-width: 100%; }
  .table thead th, .table tbody td { padding: 0.6rem 0.75rem; white-space: nowrap; }

  /* KPI cards : 2 par ligne */
  .row.g-3 > .col-md-3,
  .row.g-3 > .col-md-4,
  .row.g-3 > .col-lg-3 { flex: 0 0 50%; max-width: 50%; }

  /* Formulaires */
  .form-control, .form-select, select, input, textarea {
    font-size: 16px !important; /* empêche le zoom iOS */
    min-height: 44px;
  }
  /* Cases à cocher / radios : ne pas les étirer en ovales (min-height ci-dessus). */
  input[type="checkbox"], input[type="radio"], .form-check-input {
    min-height: 0;
  }
  .row.g-3 .col { flex: 0 0 100%; max-width: 100%; }

  /* Boutons tactiles */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 36px; }

  /* Empêche les éléments de dépasser */
  img, table, pre, iframe { max-width: 100%; }
  * { box-sizing: border-box; }

  /* ── Barre d'onglets ──────────────────────────────────────────────────────
     Fond bleu nuit dans les deux espaces. L'audit proposait de l'éclaircir
     pour qu'elle capte moins l'œil ; le fond sombre est conservé — il se lit
     d'un coup d'œil en plein soleil et borne nettement le bas de l'écran.
     L'onglet actif reste l'accent de l'app, éclairci pour tenir le contraste
     sur fond sombre (6,0:1) ; les inactifs sont à 7,0:1. */
  .mobile-bottom-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--sidebar-bg);
    border-top: 1px solid var(--sidebar-border);
    z-index: 200;
    padding: 0.4rem 0;
    padding-bottom: env(safe-area-inset-bottom, 0.4rem);
    box-shadow: 0 -2px 12px rgba(0,0,0,.3);
  }
  .mobile-bottom-nav a,
  .mobile-bottom-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--sidebar-text);
    text-decoration: none;
    font-size: 0.6rem;
    padding: 0.2rem 0;
    gap: 0.15rem;
    min-height: 44px;
    /* reset bouton (« Plus ») */
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-bottom-nav a.active,
  .mobile-bottom-nav button.active { color: color-mix(in srgb, var(--accent) 55%, #fff); }
  .mobile-bottom-nav i { font-size: 1.2rem; }
  .mobile-bottom-nav .bi-horse-icon { width: 1.2rem; height: 1.2rem; vertical-align: middle; }

  /* Cacher le nom utilisateur sur mobile */
  .topbar-user span { display: none; }
}

@media (min-width: 769px) {
  .mobile-bottom-nav { display: none !important; }
  .topbar-hamburger { display: none; }
}

/* ============================================================================
   FORMULAIRES PLEIN ÉCRAN (base_fullscreen.html + partials/form_header.html)
   ----------------------------------------------------------------------------
   Comportement de modale, sans modale : la barre d'onglets disparaît (c'est le
   gabarit qui ne la rend pas) et l'en-tête reste collé en haut, cheval compris.
   ========================================================================== */
/* Débord horizontal de l'en-tête : sur mobile il doit atteindre les bords de
   l'écran (la gouttière de .main-content vaut .75rem), sur desktop le contenu
   est déjà dans une colonne centrée, aucun débord n'est nécessaire. */
body.fs-form { --fs-bleed: 0rem; }

/* Sans barre d'onglets, plus besoin de lui réserver de la place en bas ; on
   garde juste de quoi dégager le bouton d'action de l'encoche du bas. */
body.fs-form .main-content {
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

/* Ni sidebar ni topbar : le gabarit ne les rend pas, la colonne de contenu
   récupère toute la largeur. */
body.fs-form .content-area { margin-left: 0; }

.fsf-head {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Déborde la gouttière de .main-content : sans ça, le contenu qui défile
     réapparaît dans les marges latérales de l'en-tête. */
  margin: 0 calc(var(--fs-bleed) * -1) 1rem;
  padding: 0.9rem var(--fs-bleed) 0.75rem;
  padding-top: calc(0.9rem + env(safe-area-inset-top, 0px));
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.fsf-bar { display: flex; align-items: center; gap: .7rem; }

.fsf-close {
  flex-shrink: 0;
  width: 44px; height: 44px;          /* cible tactile minimale */
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-raised);
  color: var(--text-primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem; text-decoration: none;
}
.fsf-close:hover { background: var(--surface-sunken); color: var(--text-primary); }

.fsf-title {
  font-size: 1.3rem; font-weight: 800; letter-spacing: -.01em; margin: 0;
  min-width: 0; overflow-wrap: anywhere;
}

/* ── Carte du cheval : c'est le sélecteur, pas une simple étiquette ── */
.fsf-horse { position: relative; margin-top: .7rem; }
.fsf-horse-lbl {
  display: block;
  font-size: .68rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--text-muted); margin: 0 .15rem .3rem;
}
.fsf-horse-face {
  display: flex; align-items: center; gap: .75rem;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: .6rem .8rem;
  box-shadow: var(--shadow-card);
  min-height: 60px;
}
.fsf-horse-native {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 60px;                        /* couvre la carte, pas son libellé */
  width: 100%; opacity: 0; border: 0; cursor: pointer;
}
/* Le <select> est après la carte dans le DOM : c'est :has() qui remonte le
   focus jusqu'à elle, pas un sélecteur de frère. */
.fsf-horse:has(.fsf-horse-native:focus-visible) .fsf-horse-face {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.fsf-horse-avatar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 12px;
  background: var(--cat-slate-weak); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-faint); font-size: 1.15rem;
}
.fsf-horse-avatar img { width: 100%; height: 100%; object-fit: cover; }
.fsf-horse-txt { flex: 1; min-width: 0; }
.fsf-horse-name {
  display: block; font-weight: 700; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fsf-horse-sub {
  display: block; color: var(--text-muted); font-size: .82rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fsf-horse-chev { color: var(--border-strong); flex-shrink: 0; }

/* ── Puces de sélection (type de document, type d'intervention) ────────────
   Remplacent des grilles de grosses tuiles qui prenaient deux écrans de
   défilement rien que pour choisir une catégorie. Une puce = une ligne :
   icône (couleur du type, elle porte la reconnaissance) + libellé.
   Hauteur 44 px : cible tactile minimale, avec des gants. */
.chips {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  /* Déborde la gouttière pour que la dernière puce ne soit pas coupée net :
     on doit voir qu'il y en a d'autres à droite. */
  margin: 0 calc(var(--fs-bleed, 0rem) * -1);
  padding: .15rem var(--fs-bleed, 0rem) .35rem;
}
.chips::-webkit-scrollbar { display: none; }

.chip {
  --type: var(--cat-slate);
  position: relative;
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: 0 .95rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-raised);
  color: var(--text-primary);
  font-weight: 600; font-size: .9rem; white-space: nowrap;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition);
}
.chip input { position: absolute; opacity: 0; pointer-events: none; }
/* L'icône garde la couleur de sa catégorie même sélectionnée : c'est elle
   qu'on reconnaît d'un coup d'œil, l'accent ne sert qu'à dire « choisi ». */
.chip i { color: var(--type); font-size: 1.05rem; }
.chip:has(input:checked) {
  background: var(--accent-weak);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Section « Optionnel » ─────────────────────────────────────────────────
   Repliée par défaut : ce qui est rarement rempli ne doit pas s'interposer
   entre l'essentiel et le bouton d'action. */
.fs-optional { margin-top: 1.1rem; border-top: 1px solid var(--border); }
.fs-optional > summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .3rem .15rem;
  font-weight: 600; font-size: .92rem; color: var(--text-muted);
}
.fs-optional > summary::-webkit-details-marker { display: none; }
.fs-optional > summary .chev { transition: transform var(--transition); margin-left: auto; }
.fs-optional[open] > summary .chev { transform: rotate(90deg); }
.fs-optional > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Barre d'action ────────────────────────────────────────────────────────
   Collée en bas sur mobile : le bouton principal reste atteignable quelle que
   soit la taille de l'écran ou du texte, sans jamais avoir à faire défiler. */
.fs-actions { display: flex; gap: .7rem; margin-top: 1.2rem; }
.fs-actions .fs-btn {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  min-height: 52px; border-radius: 15px;
  font-weight: 700; text-decoration: none; border: 0; cursor: pointer;
}
.fs-actions .fs-btn.ghost {
  flex: 0 0 auto; padding: 0 1.3rem;
  background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-primary);
}
.fs-actions .fs-btn.primary { background: var(--accent); color: var(--text-on-accent); }
.fs-actions .fs-btn.primary:disabled { opacity: .6; }

@media (max-width: 768px) {
  body.fs-form { --fs-bleed: 0.75rem; }
  .fsf-title { font-size: 1.15rem; }
  /* En-tête plus compact : chaque pixel gagné rapproche le bouton d'action. */
  .fsf-head { padding-bottom: .6rem; }
  .fsf-horse { margin-top: .5rem; }
  /* « Cheval concerné » est redondant sur mobile : la carte montre la photo,
     le nom et le chevron. On garde le libellé pour les lecteurs d'écran. */
  .fsf-horse-lbl {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  .fs-actions {
    position: sticky;
    bottom: 0;
    margin: 1rem calc(var(--fs-bleed) * -1) 0;
    padding: .6rem var(--fs-bleed);
    padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
}

/* ===== Pastille de type (intervention, document) =====
   La couleur est injectée par partials/type_icon.html à partir de
   app/core/ui_types.py : --type (pleine) et --type-weak (fond). Le repli
   ardoise couvre les types inconnus. */
.type-ico {
  --type: var(--cat-slate);
  --type-weak: var(--cat-slate-weak);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--type-weak);
  color: var(--type);
}

/* ===== Composant état vide ===== */
.empty-state {
  text-align: center; padding: 3rem 1.5rem;
  color: var(--text-muted);
}
.empty-state i { font-size: 2.5rem; margin-bottom: 1rem; opacity: 0.4; display: block; }
.empty-state-icon {
  font-size: 2.5rem; color: var(--text-muted); opacity: 0.5;
  display: block; margin-bottom: 0.75rem;
}
.empty-state-title {
  font-weight: 600; font-size: 1.05rem; color: var(--text-main);
  margin-bottom: 0.35rem;
}
.empty-state-text {
  color: var(--text-muted); font-size: 0.9rem;
  max-width: 34rem; margin: 0 auto 1.25rem;
}
.empty-state .btn { margin-top: 0.25rem; }

.bc-sep { margin: 0 0.4rem; color: var(--border-strong); }

/* ===== Cartes RDV mobile (tableau de bord) ===== */
.min-w-0 { min-width: 0; }
.appt-date { width: 3.1rem; }
.appt-date-day { font-weight: 700; font-size: 0.82rem; line-height: 1.15; }
.appt-date-time { font-size: 0.75rem; color: var(--text-muted); }
.list-group-item.appt-today { background: var(--warning-weak); }

.alert { border-radius: var(--radius-md); border: none; font-size: 0.875rem; }
.alert-info    { background: var(--accent-weak); color: var(--accent-strong); }
.alert-danger  { background: var(--danger-weak); color: var(--danger-strong); }
.alert-success { background: var(--success-weak); color: var(--success-strong); }
.alert-warning { background: var(--warning-weak); color: var(--warning-strong); }

.chart-container { position: relative; height: 220px; }

/* Icône cheval */
/* Avatar-menu du compte propriétaire (présent sur chaque page du portail) */
/* Bulle compte gérant/admin : uniquement sur mobile, où la topbar (qui porte
   déjà le menu du compte) est masquée. Voir partials/staff_account.html. */
.staff-account { display: none; flex-shrink: 0; }
@media (max-width: 768px) {
  .staff-account { display: inline-block; }
}

.owner-account-avatar {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: var(--accent);
  color: var(--text-on-accent); font-weight: 700; font-size: .9rem;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Silhouette de cheval traitée comme une icône de fonte : le SVG sert de
   masque, la couleur vient de `currentColor`. Elle suit donc automatiquement
   la couleur du texte — accent quand l'onglet est actif, clair sur la sidebar
   sombre — sans avoir à maintenir deux fichiers noir/blanc. */
.bi-horse-icon {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  vertical-align: -0.2em;
  width: 1.2em;
  height: 1.2em;
  background-color: currentColor;
  -webkit-mask: url('/static/img/cheval_black.svg') no-repeat center / contain;
  mask: url('/static/img/cheval_black.svg') no-repeat center / contain;
}
.bi-horse-icon::before { content: ""; }

/* ===== Tables responsives : pattern .table-wrapper ===== */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.table-wrapper > table { margin-bottom: 0; }
.card .table-wrapper table { min-width: 100%; }

/* Compat : tables encore non enveloppées dans .table-wrapper (mobile) */
@media (max-width: 768px) {
  .card table:not(.table-wrapper table),
  .card .table:not(.table-wrapper .table) {
    display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ===== Typographie portail propriétaire ===== */
body.owner { font-size: 1rem; }
body.owner .page-title { font-size: 1.5rem; }
body.owner .kpi-value { font-size: 1.75rem; }

/* ===== Écrans « mobile d'abord » : élargissement sur ordinateur (≥992px) =====
   Ces gabarits plafonnent leur contenu à ~640px (pensés pour le téléphone) et
   laissent un grand vide sur grand écran. On relève le plafond au-delà de 992px.
   Les pages déjà retravaillées (fiche cheval, listes chevaux/RDV) ne figurent
   pas ici — elles ont leur propre mise en page desktop. */
@media (min-width: 992px) {
  /* Listes, détails et tableaux */
  .ifc-page, .ifce-shell, .cmp, .vet, .mvt,
  .sante, .doc, .vsw, .pset, .gp,
  .owner-docs, .owner-appts, .appt-detail,
  .owner-contract, .owner-move, .pro-wrap, .pst-page {
    max-width: 920px !important;
  }
  /* .owner-home et .ohd ont une photo-héros (aspect-ratio) qui deviendrait
     énorme en plein élargissement : traités séparément (grille / colonne). */
  /* Formulaires : largeur mesurée (lisibilité) */
  .hf, .dw, .vm, .ownform, .up-form {
    max-width: 760px !important;
  }
  /* Formulaire de rendez-vous (gérant et propriétaire) + sa feuille pro */
  .rdv-form, .prosheet-panel { max-width: 820px !important; }
}