/* ═══════════════════════════════════════════════════════════════════════════
   Kalemba Nettoyage — couche de finition de l'espace pro
   Chargée APRÈS les styles propres à chaque page : elle unifie la typographie,
   les rayons, les ombres, les états de survol/focus et ajoute des micro-
   animations. Elle ne modifie aucune structure ni aucun comportement.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

/* ── Typographie de marque (repli Segoe UI hors connexion) ────────────────── */
body {
    font-family: 'Manrope', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* L'aperçu A4 des documents garde sa police d'origine : son ajustement
   automatique est calibré dessus et il doit rester proche du PDF (Helvetica). */
.doc-paper, .doc-paper * {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

/* ── Sélection de texte aux couleurs Kalemba ──────────────────────────────── */
::selection { background: rgba(54, 55, 143, 0.16); }

/* ── Barres de défilement fines ───────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #b9c2d6 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: #b9c2d6; border-radius: 999px;
    border: 2px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: #8f9cb8; }

/* ── Focus clavier uniforme (accessibilité) ───────────────────────────────── */
:where(a, button, [role="button"]):focus-visible {
    outline: 2px solid #36378f;
    outline-offset: 2px;
}

/* ── Champs de saisie : anneau de focus doux et uniforme ──────────────────── */
:where(input[type="text"], input[type="number"], input[type="email"],
       input[type="password"], input[type="tel"], input[type="time"],
       input[type="date"], input[type="search"], select, textarea):focus {
    border-color: #36378f !important;
    box-shadow: 0 0 0 3px rgba(54, 55, 143, 0.13) !important;
    outline: none !important;
}
.rich-editor:focus {
    border-color: #36378f !important;
    box-shadow: 0 0 0 3px rgba(54, 55, 143, 0.13) !important;
}

/* ── Boutons : transitions et retour tactile cohérents ────────────────────── */
:where(button, .topbar-btn, .header-btn, .logout-btn, .back-site-btn,
       .ctrl-btn, .login-btn, .filter-btn, .toggle-add-btn, .btn-create,
       .print-btn, .btn-small, .sign-action-btn, .history-action,
       .hstatus, .harch, .csv-btn, .btn, .action-link, .holiday-action-btn) {
    transition: transform 0.12s ease, box-shadow 0.16s ease,
                background 0.16s ease, filter 0.16s ease, border-color 0.16s ease;
}

/* Relief léger au survol des boutons d'action pleins */
:where(.ctrl-btn, .login-btn, .toggle-add-btn, .btn-create,
       .print-btn, .sign-action-btn.primary, .btn):hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16);
}
:where(button, .ctrl-btn, .login-btn, .toggle-add-btn, .btn-create,
       .print-btn, .sign-action-btn, .btn):active {
    transform: translateY(0) scale(0.985);
}

/* ── Harmonisation des éléments hérités (rayons, bordures) ────────────────── */
.header-btn, .logout-btn, .back-site-btn { border-radius: 8px !important; }
.filter-btn, .site-filter-select, .search-input {
    border-width: 1px !important;
    border-radius: 9px !important;
}
.filter-btn.active, .filter-btn:hover { border-color: #36378f !important; }
.success-message, .error-message { border-radius: 10px !important; }
.card-actions button, .card-actions .action-link {
    border-radius: 8px !important;
    font-weight: 600 !important;
}
.modal-content { border-radius: 14px !important; }
.stock-create-form input, .stock-create-form select,
.modal-content input, .modal-content select { border-radius: 9px !important; }

/* ── Cartes : ombres douces, vie au survol ────────────────────────────────── */
:where(.panel, .stat-card, .stat-chip, .stock-card, .stock-admin-panel,
       .controls-panel, .form-card) {
    transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.stock-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 30px rgba(7, 39, 63, 0.13) !important;
}
.stat-card:hover, .stat-chip:hover {
    box-shadow: 0 10px 24px rgba(7, 39, 63, 0.11) !important;
}

/* ── Apparition en douceur au chargement ──────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    :where(.panel, .stock-card, .stat-card, .stat-chip,
           .login-container, .controls-panel, .ts-placeholder) {
        animation: proFadeIn 0.32s ease both;
    }
}
@keyframes proFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ── Tableaux : lignes plus respirantes ───────────────────────────────────── */
:where(.panel, .stock-admin-panel) table tbody tr { transition: background 0.12s ease; }

/* ── Liens de la topbar : survol uniforme ─────────────────────────────────── */
.topbar-btn:hover, .header-btn:hover, .logout-btn:hover, .back-site-btn:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* ── Marque d'en-tête partagée (logo + sous-titre) ────────────────────────── */
.header-brand { display: flex; align-items: center; gap: 12px; }
.header-brand .header-logo {
    height: 42px; width: 42px; object-fit: contain;
    border-radius: 10px; background: rgba(255, 255, 255, 0.14); padding: 4px;
    box-sizing: border-box; display: block;
}
.header-brand h1 { margin: 0; }
.header-brand .header-sub {
    margin: 2px 0 0; font-size: 12px; font-weight: 600;
    color: rgba(255, 255, 255, 0.72); letter-spacing: 0.02em;
}

/* ── Messages de statut : petit accent ────────────────────────────────────── */
.status-msg, .message, .success-message, .error-message {
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.07);
}