/* NovaPaie Pro - styles complémentaires (au-delà de Tailwind)
   Thème moderne, sobre : base neutre graphite/blanc, bleu en couleur d'accent
   principale (boutons, liens, éléments actifs). Le bordeaux (--np-bordeaux)
   n'est conservé que pour de très petites touches ponctuelles (ex. un badge,
   un liseré) - jamais comme couleur de fond dominante. Cohérent avec la
   palette utilisée dans les PDF générés (voir backend/app/documents/brand.py). */

:root {
  --np-bordeaux: #6d1530;
  --np-bordeaux-clair: #8f2244;
  --np-bleu: #1d6fb8;
  --np-bleu-fonce: #14568f;
  --np-bleu-clair: #eaf3fb;
}

* { box-sizing: border-box; }
/* Garde-fou anti-débordement horizontal (mobile) : empêche toute bande blanche
   à droite si un élément dépasse. `clip` (et non `hidden`) ne casse pas les
   en-têtes en position:sticky. */
html, body { overflow-x: clip; max-width: 100%; }
body { font-family: 'Segoe UI', ui-sans-serif, system-ui, -apple-system, sans-serif; }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

.np-sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; font-size: 13.5px;
  color: #cbd5e1; transition: all .15s ease; cursor: pointer; font-weight: 500;
}
.np-sidebar-link:hover { background: rgba(255,255,255,.08); color: #fff; }
.np-sidebar-link.active { background: linear-gradient(135deg, var(--np-bleu), var(--np-bleu-fonce)); color: #fff; box-shadow: 0 4px 14px rgba(29,111,184,.35); }

.np-card { background: #fff; border-radius: 16px; box-shadow: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); border: 1px solid #eef2f7; }

.np-input {
  width: 100%; padding: 9px 12px; border-radius: 10px; border: 1px solid #e2e8f0;
  font-size: 13.5px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease;
}
.np-input:focus { outline: none; border-color: var(--np-bleu); box-shadow: 0 0 0 3px rgba(29,111,184,.15); }

.np-label { font-size: 12px; font-weight: 600; color: #475569; margin-bottom: 4px; display: block; }

.np-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: all .15s ease; border: none; }
.np-btn-primary { background: linear-gradient(135deg, var(--np-bleu), var(--np-bleu-fonce)); color: #fff; }
.np-btn-primary:hover { filter: brightness(1.08); box-shadow: 0 4px 14px rgba(29,111,184,.35); }
.np-btn-secondary { background: #f1f5f9; color: #334155; }
.np-btn-secondary:hover { background: #e2e8f0; }
.np-btn-danger { background: #fef2f2; color: #b91c1c; }
.np-btn-danger:hover { background: #fee2e2; }
.np-btn-sm { padding: 6px 10px; font-size: 12px; border-radius: 8px; }
/* app.css est chargé après tailwind.css : sans cette règle, le `display` de
   .np-btn l'emporterait sur l'utilitaire `.hidden` de Tailwind et un bouton
   masqué (ex. « Supprimer la photo » avant sélection) resterait visible.
   La double classe .np-btn.hidden a une spécificité supérieure et gagne.
   NB : pour un masquage responsive (hidden lg:flex), envelopper le bouton
   dans un <div> plutôt que de poser `hidden` directement sur .np-btn. */
.np-btn.hidden { display: none; }

.np-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.np-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; padding: 10px 12px; border-bottom: 1px solid #e2e8f0; }
.np-table td { padding: 10px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.np-table tr:hover td { background: #f8fafc; }

.np-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; }

.np-modal-backdrop { position: fixed; inset: 0; background: rgba(15,23,42,.55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 20px; }
.np-modal { background: #fff; border-radius: 18px; max-width: 720px; width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }

.np-toast { position: fixed; bottom: 20px; right: 20px; z-index: 100; padding: 12px 18px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.2); animation: np-toast-in .25s ease; }
@keyframes np-toast-in { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform: translateY(0);} }

.np-fade-in { animation: np-fade .2s ease; }
@keyframes np-fade { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: translateY(0);} }

/* Landing page : apparition douce des sections au scroll (IntersectionObserver
   ajoute .np-reveal-visible côté JS), et accordéon FAQ natif (<details>) sans
   le triangle par défaut du navigateur. */
.np-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.np-reveal-visible { opacity: 1; transform: translateY(0); }

details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }