/* ══════════════════════════════════════════════════════════════════════════
   Charte du back-office — couche d'application.

   Se charge APRÈS Bootstrap et `sidebar.css`, et n'écrit **aucune valeur
   d'identité** : ni couleur, ni police, ni rayon en dur. Tout passe par des
   jetons, émis par `layout.html.twig` dans son `:root` :

     --color-*   les onze couleurs de la charte, pilotées par l'écran Réglages
                 (donc par la base de données) ;
     --qcd-*     les jetons que ces onze couleurs ne couvrent pas — statuts,
                 typographies, zébrure de tableau, rayons, halo de focus —,
                 réglables par application via `qcdgone_admin.theme.*`.

   Trois leviers de personnalisation, du plus courant au plus profond :
     1. l'écran Réglages, pour les onze couleurs ;
     2. `qcdgone_admin.theme.*`, pour les jetons ci-dessus ;
     3. une feuille propre à l'application, chargée après celle-ci dans
        `{% block stylesheets %}`.

   Discipline chromatique de la charte : une page est majoritairement à la
   couleur principale et blanche, **ponctuée** d'accent — pas l'inverse.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Typographie ───────────────────────────────────────────────────────── */

body {
    font-family: var(--qcd-font-body);
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
}

h1, .h1 {
    font-family: var(--qcd-font-title);
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--color-primary);
    font-size: 1.6rem;
}

h2, .h2, h3, .h3, h4, .h4, h5, .h5,
.card-header, .mf-section-title, legend {
    font-family: var(--qcd-font-subtitle);
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--qcd-primary-dark);
}

h2, .h2 { font-size: 1.3rem; }
h3, .h3 { font-size: 1.12rem; }

label, .form-label, .btn, .badge, .nav-link,
table thead th, .sidebar-section-title {
    font-family: var(--qcd-font-body);
    font-weight: 500;
}

strong, b, .fw-bold, .fw-semibold { font-weight: 600; }

small, .small, .text-muted, .mf-text-muted, .form-text { font-weight: 400; }

.text-muted, .mf-text-muted { color: var(--color-text-secondary) !important; }

a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--qcd-primary-dark);
    text-decoration: underline;
}

/* Filet d'accent : la ponctuation de la charte, à poser sous un titre. */
.qcd-accent-rule {
    display: block;
    width: 48px;
    height: 4px;
    border-radius: 2px;
    background: var(--qcd-accent);
}

.qcd-page-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── En-tête et navigation ─────────────────────────────────────────────── */

#dashboard-header {
    border-bottom: 3px solid var(--qcd-accent);
}

#dashboard-header .navbar-brand img { height: 30px; width: auto; }

#dashboard-header .navbar-brand span {
    font-family: var(--qcd-font-subtitle);
    font-weight: 600;
    letter-spacing: 0.06em;
}

#sidebarMenu .sidebar-section-title {
    font-family: var(--qcd-font-subtitle);
    font-weight: 600;
    letter-spacing: 0.1em;
}

/* ── Cartes et blocs ──────────────────────────────────────────────────── */

.card, .mf-section, .mt-table-wrapper {
    border-color: var(--color-border);
    border-radius: var(--qcd-radius-card);
}

.card-header {
    background: var(--qcd-surface);
    border-bottom: 1px solid var(--color-border);
}

/* Le dégradé de `.mf-header-card` est défini dans `modern-form.css`, qui se
   charge après cette feuille : il y consomme directement `--qcd-surface`. */
.mf-header-card {
    border-color: var(--color-border);
}

.mf-avatar {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--qcd-primary-deep) 100%);
    font-family: var(--qcd-font-subtitle);
}

/* Pastilles d'icônes de section : `modern-form.css` en décline une par couleur
   (violet, sarcelle, rose…). La charte tient par la discipline : toutes les
   pastilles reviennent à la couleur principale, et l'accent ne sert que là où
   il est justifié — la section qui règle l'identité visuelle.
   Le `!important` bat la spécificité de `modern-form.css` ; une application qui
   veut une pastille d'une autre couleur passe par les jetons, pas par une règle
   CSS de plus. */
[class*='mf-icon-'] {
    background: var(--color-primary) !important;
    color: var(--qcd-on-primary);
}

.mf-icon-palette {
    background: var(--qcd-accent) !important;
    color: var(--qcd-on-accent);
}

.mf-icon-cog, .mf-icon-code {
    background: var(--qcd-primary-deep) !important;
}

/* ── Formulaires ──────────────────────────────────────────────────────── */

.form-control, .form-select {
    border-color: var(--color-border);
    font-weight: 300;
}

.form-control:focus, .form-select:focus, .btn:focus-visible {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0.2rem var(--qcd-focus-ring);
}

.form-check-input:checked {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.form-switch .form-check-input:focus {
    border-color: var(--color-primary);
}

/* ── Boutons ──────────────────────────────────────────────────────────── */

.btn { border-radius: var(--qcd-radius-btn); }

.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--qcd-primary-dark);
    border-color: var(--qcd-primary-dark);
}

.btn-outline-primary {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-outline-primary:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--qcd-on-primary);
}

/* L'accent signale une action mise en avant. Son libellé est **sombre** : du
   blanc sur un accent clair (orange, jaune, ambre) ne passe pas le seuil de
   lisibilité. `--qcd-on-accent` existe pour ça — ne pas le remplacer par du
   blanc sans vérifier le contraste. */
.btn-accent {
    background-color: var(--qcd-accent);
    border-color: var(--qcd-accent);
    color: var(--qcd-on-accent);
    font-weight: 600;
}

.btn-accent:hover, .btn-accent:focus {
    background-color: var(--qcd-accent-hover);
    border-color: var(--qcd-accent-hover);
    color: var(--qcd-on-accent);
}

.btn-warning {
    background-color: var(--qcd-accent);
    border-color: var(--qcd-accent);
    color: var(--qcd-on-accent);
}

/* ── Statuts : alertes, badges ────────────────────────────────────────── */

/* Fond très clair, bordure et texte de la même teinte : jamais d'aplat saturé.
   C'est ce qui permet aux statuts de cohabiter avec la couleur principale sans
   lui disputer l'attention. */
.alert { border-radius: var(--qcd-radius-alert); border-width: 1px; }

.alert-success {
    background-color: var(--qcd-success-bg);
    border-color: var(--qcd-success);
    color: var(--qcd-success);
}

.alert-warning {
    background-color: var(--qcd-warning-bg);
    border-color: var(--qcd-warning);
    color: var(--qcd-warning);
}

.alert-danger, .alert-error {
    background-color: var(--qcd-danger-bg);
    border-color: var(--qcd-danger);
    color: var(--qcd-danger);
}

.alert-info, .alert-primary {
    background-color: var(--qcd-row-stripe);
    border-color: var(--color-border);
    color: var(--qcd-primary-dark);
}

.badge.bg-success { background-color: var(--qcd-success) !important; }
.badge.bg-warning { background-color: var(--qcd-accent) !important; color: var(--qcd-on-accent) !important; }
.badge.bg-danger  { background-color: var(--qcd-danger) !important; }
.badge.bg-primary { background-color: var(--color-primary) !important; }
.badge.bg-secondary { background-color: var(--qcd-cool-gray) !important; color: var(--qcd-on-accent) !important; }

.text-success { color: var(--qcd-success) !important; }
.text-warning { color: var(--qcd-warning) !important; }
.text-danger  { color: var(--qcd-danger) !important; }

/* ── Tableaux ─────────────────────────────────────────────────────────── */

table thead th, .mt-table-wrapper thead th {
    background: var(--qcd-surface);
    color: var(--qcd-primary-dark);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.74rem;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--color-border);
}

.table > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--qcd-row-stripe);
}

.table > tbody > tr:hover > * {
    background-color: var(--qcd-row-hover);
}

.mt-search-bar { background: var(--qcd-surface); }

.page-item.active .page-link {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.page-link { color: var(--color-primary); }

/* ── Blocs de code (secrets, exemples d'intégration) ──────────────────── */

pre, code, .font-monospace {
    background: var(--qcd-code-bg);
    color: var(--qcd-primary-dark);
    border-radius: var(--qcd-radius-btn);
}

pre { padding: 0.85rem 1rem; border: 1px solid var(--color-border); }
code { padding: 0.1rem 0.3rem; }
pre code { background: none; padding: 0; }