/* ============================================================================
   GESTPRINT — couche de thème
   ----------------------------------------------------------------------------
   Charge APRÈS Tailwind. Ne redéfinit que ce que la configuration Tailwind
   ne peut pas atteindre : styles de base, formulaires, tableaux, et les
   quelques endroits où l'ancien thème imposait des couleurs en dur.

   Principe : du blanc, un texte très contrasté, des filets gris fins,
   un seul bleu profond réservé à ce sur quoi on peut agir.
   ============================================================================ */

:root {
  --ink:        #161C24;   /* texte principal */
  --ink-2:      #4E5967;   /* texte secondaire */
  --muted:      #6B7684;   /* libellés, mentions */
  --rule:       #E2E6EB;   /* filet standard */
  --rule-soft:  #EFF1F4;   /* filet discret */
  --surface:    #FFFFFF;
  --ground:     #F7F8FA;   /* fond de page */
  --accent:     #1F5C8B;   /* bleu profond, la seule couleur d'action */
  --accent-ink: #184A70;
  --accent-bg:  #EFF4F8;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--ground);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { letter-spacing: -0.011em; color: var(--ink); }

/* Les chiffres s'alignent en colonne partout où il y en a. */
table, .tabular-nums, [class*="text-right"] { font-variant-numeric: tabular-nums; }

/* ── Focus visible, uniforme ──────────────────────────────────────────── */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  box-shadow: none;
}

/* ── Formulaires : un seul style, sobre ───────────────────────────────── */
input[type="text"], input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="search"], input[type="email"], input[type="password"], input[type="tel"],
select, textarea {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  color: var(--ink);
  font-size: 14px;
  transition: border-color .12s ease;
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) {
  border-color: #CBD2DA;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 92, 139, .10);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--rule-soft);
  color: var(--muted);
}
label { color: var(--ink-2); font-weight: 500; }
::placeholder { color: #98A2AF; }

/* ── Tableaux : filets, pas de zébrures ───────────────────────────────── */
table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
table tbody td { border-bottom: 1px solid var(--rule-soft); }
table tbody tr:last-child td { border-bottom: none; }

/* ── Cartes : un filet suffit, l'ombre est superflue ──────────────────── */
.card,
[class*="rounded-"][class*="border"][class*="bg-white"] {
  box-shadow: none;
}

/* ── Boutons ──────────────────────────────────────────────────────────── */
button, .btn { font-weight: 500; letter-spacing: 0; }

/* ── Barre de défilement, discrète ────────────────────────────────────── */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #D5DBE2; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #B8C1CB; }

/* ── Menu latéral ─────────────────────────────────────────────────────────
   Couleurs du menu. La géométrie est dans templates/sidebar.php, au plus près
   du balisage ; ici on ne pose que ce qui relève de la charte. */

.sb-aside,
#sb-drawer      { background: var(--surface); border-right: 1px solid var(--rule); }
#sb-drawer      { box-shadow: 0 0 32px rgba(22,28,36,.12); }
.sb-brand       { border-bottom: 1px solid var(--rule-soft); }

.sb-brand-mark    { background: var(--accent); }
.sb-brand-eyebrow { color: var(--muted); }
.sb-brand-name    { color: var(--ink); }
.sb-brand-link:hover .sb-brand-name { color: var(--accent-ink); }

.sb-section { color: #8892A0; }

.sb-navlink            { color: var(--ink-2); }
.sb-navlink i          { color: #9AA4B1; }
.sb-navlink:hover      { background: var(--rule-soft); color: var(--ink); }
.sb-navlink:hover i    { color: var(--ink-2); }
.sb-navlink.active     { background: var(--accent-bg); color: var(--accent-ink); font-weight: 600; }
.sb-navlink.active i   { color: var(--accent); }
.sb-accent             { background: var(--accent); }

.sb-badge { background: #F6DCD9; color: #8A2C22; }
.sb-navlink.active .sb-badge { background: #EFCFCB; }

.sb-foot      { border-top: 1px solid var(--rule-soft); }
.sb-user:hover{ background: var(--rule-soft); }
.sb-avatar    { background: var(--accent-bg); color: var(--accent-ink); }
.sb-user-name { color: var(--ink); }
.sb-user-role { color: var(--muted); }
.sb-logout    { color: var(--muted); }
.sb-logout:hover { background: #FBEFEE; color: #9A3126; }

/* Barre du bas, mobile */
#sb-bottom { background: var(--surface); border-top: 1px solid var(--rule); }
.sb-bottom-link        { color: var(--muted); background: none; border: none; }
.sb-bottom-link:hover  { color: var(--ink); }
.sb-bottom-link.active { color: var(--accent-ink); font-weight: 600; }
.sb-bottom-link.active i { color: var(--accent); }


/* ── Barre du haut ────────────────────────────────────────────────────── */
.topbar {
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  box-shadow: none !important;
}
.topbar-title    { color: var(--ink); font-weight: 600; }
.topbar-subtitle { color: var(--muted) !important; letter-spacing: .1em; }

/* Panneaux déroulants : un filet et une ombre légère, pas un nuage. */
.dp-panel {
  border: 1px solid var(--rule) !important;
  border-radius: 6px !important;
  box-shadow: 0 4px 16px rgba(22,28,36,.09) !important;
}

/* ── Les animations décoratives sont neutralisées ─────────────────────── */
.bell-shake, .pulse-dot { animation: none !important; }
.animate-pulse { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ── Impression ───────────────────────────────────────────────────────── */
@media print {
  .sb-aside, #sb-drawer, #sb-bottom, .topbar, #flash-msg { display: none !important; }
  .main-content { margin-left: 0 !important; }
  body { background: #fff; }
}


/* ── Plancher de lisibilité ───────────────────────────────────────────────
   Les niveaux 300 et 400 conviennent aux filets et aux fonds, mais pas au
   texte : sur blanc ils tombent à 1,5:1 et 2,6:1, loin du seuil de 4,5:1.
   On les remonte d'un cran quand ils servent de couleur de texte, sans
   toucher aux bordures ni aux arrière-plans. */
.text-slate-200, .text-gray-200,
.text-slate-300, .text-gray-300 { color: #6B7684 !important; }
.text-slate-400, .text-gray-400 { color: #5B6572 !important; }
.text-blue-200, .text-blue-300  { color: #2A6D9E !important; }

/* Les icônes purement décoratives peuvent rester plus discrètes. */
i.text-slate-300, i.text-gray-300 { color: #98A2AF !important; }