/* ==========================================================================
   Soluki — socle visuel du backoffice
   Chargé après Bootstrap : les tokens redéfinissent les variables Bootstrap,
   puis quelques composants sont repris là où Bootstrap ne suffit pas.
   ========================================================================== */

:root {
    /* --- Identité -------------------------------------------------------
       --brand est le vert des supports de communication. Son contraste avec
       le blanc est de 2,3:1 : il ne porte JAMAIS de texte blanc et ne sert
       JAMAIS de couleur de texte sur fond clair. Il est réservé aux usages
       non textuels (états actifs sur navy, icônes, filets, focus) et aux
       aplats sous du texte foncé.
       Pour ces deux cas interdits, deux déclinaisons vérifiées :
         --brand-strong : fond de bouton sous texte blanc  (4,69:1)
         --brand-ink    : texte vert sur fond clair        (5,62:1)          */
    --brand: #20c45f;
    --brand-strong: #00863b;
    --brand-ink: #007834;
    --brand-soft: #e0fae4;
    --brand-softer: #f0fdf3;

    /* --- Neutres --------------------------------------------------------- */
    --ink: #0f1b2b;           /* navy des visuels : sidebar, actions primaires */
    --ink-2: #222f3f;
    --text: #272e38;          /* 12,75:1 sur --bg */
    --text-muted: #616a75;    /*  5,11:1 sur --bg — pas plus clair */
    --bg: #f5f7f9;
    --surface: #ffffff;
    --surface-2: #f8fafb;
    --border: #dee2e7;
    --border-strong: #c8cfd6;

    /* --- Sémantique ------------------------------------------------------ */
    --danger: #c0392b;
    --danger-soft: #fdecea;
    --warning: #b45309;
    --warning-soft: #fef4e6;
    --info: #1d6fa5;
    --info-soft: #e8f3fa;

    /* --- Rayons ---------------------------------------------------------- */
    --r-sm: 8px;
    --r-md: 12px;
    --r-lg: 16px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* --- Ombres : discrètes, l'élévation vient des aplats ---------------- */
    --shadow-sm: 0 1px 2px rgba(15, 27, 43, .06);
    --shadow-md: 0 2px 8px rgba(15, 27, 43, .07);
    --shadow-lg: 0 12px 32px rgba(15, 27, 43, .12);

    /* --- Transitions ----------------------------------------------------- */
    --ease: cubic-bezier(.22, 1, .36, 1);
    --t-fast: 120ms var(--ease);
    --t: 180ms var(--ease);

    /* --- Plans (z-index nommés) ------------------------------------------ */
    --z-sticky: 100;
    --z-dropdown: 200;
    --z-modal: 400;
    --z-toast: 500;

    /* --- Remappage Bootstrap --------------------------------------------- */
    --bs-primary: var(--brand-strong);
    --bs-primary-rgb: 0, 134, 59;
    --bs-success: var(--brand-strong);
    --bs-success-rgb: 0, 134, 59;
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-secondary-color: var(--text-muted);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--r-md);
    --bs-border-radius-sm: var(--r-sm);
    --bs-border-radius-lg: var(--r-lg);
    --bs-link-color: var(--brand-ink);
    --bs-link-hover-color: var(--ink);
    --bs-font-sans-serif: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ==========================================================================
   Base
   ========================================================================== */

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--bs-font-sans-serif);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

a { text-underline-offset: 2px; }

::selection { background: var(--brand-soft); color: var(--ink); }

/* Anneau de focus unique pour toute l'interface. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--brand-strong);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* ==========================================================================
   Logo
   ========================================================================== */

.soluki-logo {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--ink);
    text-decoration: none;
}
.soluki-logo svg { flex: none; }
.soluki-logo .soluki-mark { color: var(--brand); }
.soluki-logo--light { color: #fff; }

/* ==========================================================================
   Boutons
   L'action primaire est navy, comme les CTA des supports de communication :
   17:1 avec le blanc, là où le vert de marque plafonne à 2,3:1.
   Le vert reste disponible en action « positive », dans sa version foncée.
   ========================================================================== */

.btn {
    --bs-btn-border-radius: var(--r-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}

.btn-primary {
    --bs-btn-bg: var(--ink);
    --bs-btn-border-color: var(--ink);
    --bs-btn-hover-bg: var(--ink-2);
    --bs-btn-hover-border-color: var(--ink-2);
    --bs-btn-active-bg: #000;
    --bs-btn-active-border-color: #000;
    --bs-btn-disabled-bg: var(--border-strong);
    --bs-btn-disabled-border-color: var(--border-strong);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
}

.btn-success,
.btn-brand {
    --bs-btn-bg: var(--brand-strong);
    --bs-btn-border-color: var(--brand-strong);
    --bs-btn-hover-bg: var(--brand-ink);
    --bs-btn-hover-border-color: var(--brand-ink);
    --bs-btn-color: #fff;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-color: #fff;
}

.btn-outline-primary {
    --bs-btn-color: var(--brand-ink);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--brand-softer);
    --bs-btn-hover-border-color: var(--brand-strong);
    --bs-btn-hover-color: var(--brand-ink);
    --bs-btn-active-bg: var(--brand-soft);
    --bs-btn-active-border-color: var(--brand-strong);
    --bs-btn-active-color: var(--brand-ink);
}

.btn-outline-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--text-muted);
    --bs-btn-hover-color: var(--ink);
}

.btn-outline-danger {
    --bs-btn-color: var(--danger);
    --bs-btn-border-color: var(--border-strong);
    --bs-btn-hover-bg: var(--danger);
    --bs-btn-hover-border-color: var(--danger);
}

.btn-light {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: #fff;
    --bs-btn-color: var(--ink);
    --bs-btn-hover-bg: var(--surface-2);
    --bs-btn-hover-border-color: var(--surface-2);
    --bs-btn-hover-color: var(--ink);
}

/* ==========================================================================
   Formulaires
   ========================================================================== */

.form-control, .form-select {
    border-color: var(--border-strong);
    border-radius: var(--r-sm);
    color: var(--text);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.form-control:focus, .form-select:focus {
    border-color: var(--brand-strong);
    box-shadow: 0 0 0 3px rgba(0, 134, 59, .12);
}
/* Le gris par défaut des placeholders descend sous 4,5:1. */
.form-control::placeholder { color: var(--text-muted); opacity: 1; }

.form-label { font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.form-text { color: var(--text-muted); }

.form-check-input:checked {
    background-color: var(--brand-strong);
    border-color: var(--brand-strong);
}
.form-check-input:focus {
    border-color: var(--brand-strong);
    box-shadow: 0 0 0 3px rgba(0, 134, 59, .12);
}
.form-switch .form-check-input:checked { background-color: var(--brand-strong); }

/* Bootstrap fige la couleur du curseur de .form-range dans son CSS compilé :
   accent-color ne suffit pas, il faut reprendre les pseudo-éléments. */
.form-range { accent-color: var(--brand-strong); }
.form-range::-webkit-slider-thumb { background-color: var(--brand-strong); }
.form-range::-webkit-slider-thumb:active { background-color: var(--brand); }
.form-range::-moz-range-thumb { background-color: var(--brand-strong); }
.form-range::-moz-range-thumb:active { background-color: var(--brand); }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 3px rgba(0, 134, 59, .18); }
.form-range:focus::-moz-range-thumb { box-shadow: 0 0 0 3px rgba(0, 134, 59, .18); }

/* ==========================================================================
   Surfaces
   ========================================================================== */

.card, .table-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
}

.table-card .table { margin-bottom: 0; }
.table-card .table > :not(caption) > * > * { border-color: var(--border); }

.table thead th {
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    border-bottom: 1px solid var(--border);
}
.table > tbody > tr { transition: background-color var(--t-fast); }
.table-hover > tbody > tr:hover > * { background: var(--surface-2); }

/* ==========================================================================
   Badges et alertes
   ========================================================================== */

.badge { font-weight: 600; letter-spacing: .01em; border-radius: var(--r-pill); padding: .35em .7em; }
.badge.bg-success { background: var(--brand-soft) !important; color: var(--brand-ink) !important; }
.badge.bg-secondary { background: var(--surface-2) !important; color: var(--text-muted) !important; border: 1px solid var(--border); }
.badge.bg-info { background: var(--info-soft) !important; color: var(--info) !important; }
.badge.bg-danger { background: var(--danger-soft) !important; color: var(--danger) !important; }
.badge.bg-warning { background: var(--warning-soft) !important; color: var(--warning) !important; }

.alert {
    border-radius: var(--r-md);
    border: 1px solid transparent;
    font-size: .925rem;
}
.alert-success { background: var(--brand-softer); border-color: var(--brand-soft); color: var(--brand-ink); }
.alert-danger  { background: var(--danger-soft);  border-color: #f6d3cf; color: var(--danger); }
.alert-warning { background: var(--warning-soft); border-color: #f6e2c2; color: var(--warning); }
.alert-info    { background: var(--info-soft);    border-color: #cfe4f1; color: var(--info); }

/* ==========================================================================
   Onglets pilules
   ========================================================================== */

.nav-pills .nav-link {
    color: var(--text-muted);
    border-radius: var(--r-sm);
    font-weight: 600;
    transition: background-color var(--t-fast), color var(--t-fast);
}
.nav-pills .nav-link:hover { background: var(--surface-2); color: var(--ink); }
.nav-pills .nav-link.active { background: var(--ink); color: #fff; }

/* ==========================================================================
   Menus déroulants
   ========================================================================== */

.dropdown-menu {
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: var(--r-md);
    --bs-dropdown-link-hover-bg: var(--surface-2);
    --bs-dropdown-link-active-bg: var(--brand-soft);
    --bs-dropdown-link-active-color: var(--brand-ink);
    box-shadow: var(--shadow-lg);
    padding: .35rem;
}
.dropdown-item { border-radius: var(--r-sm); padding: .45rem .65rem; font-size: .9rem; }
.dropdown-item.text-danger:hover { background: var(--danger-soft); }

/* ==========================================================================
   Accessibilité
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}