/*
 * Design system SaveTea — couche de thème Bootstrap 5.3 pour le BackOffice.
 *
 * Source de vérité des tokens : web/src/app/styles/globals.css
 * Les valeurs ci-dessous en sont une copie manuelle ; toute évolution du design
 * system côté web doit être répercutée ici.
 *
 * Chargé APRÈS bootstrap.min.css et app.css (voir Components/App.razor).
 */

/* ------------------------------------------------------------------ *
 * Typographie — DM Sans, auto-hébergée (aucun appel réseau externe)
 * Fichier variable 400–700, sous-ensembles latin et latin-ext.
 * ------------------------------------------------------------------ */

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/dm-sans-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'DM Sans';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('fonts/dm-sans-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ *
 * Tokens
 * ------------------------------------------------------------------ */

:root {
    /* Palette */
    --st-primary: #16A37F;
    --st-primary-hover: #0F7A5F;
    --st-primary-rgb: 22, 163, 127;
    --st-background: #F5F4F0;
    --st-card: #FFFFFF;
    --st-foreground: #1A1A1A;
    --st-muted-foreground: #6B6B6B;
    --st-border: #E8E7E2;
    --st-destructive: #DC2626;
    --st-destructive-rgb: 220, 38, 38;

    /* Rayons — dérivés de --radius: 0.75rem côté web */
    --st-radius-sm: 0.375rem;
    --st-radius-md: 0.5625rem;
    --st-radius-lg: 0.75rem;

    /* Anneau de focus : ring/50 sur 3px */
    --st-ring: 0 0 0 3px rgba(var(--st-primary-rgb), 0.5);
}

/* ------------------------------------------------------------------ *
 * Variables globales Bootstrap
 * ------------------------------------------------------------------ */

:root {
    --bs-primary: var(--st-primary);
    --bs-primary-rgb: var(--st-primary-rgb);
    --bs-primary-text-emphasis: var(--st-primary-hover);
    --bs-primary-bg-subtle: #E8F8F2;
    --bs-primary-border-subtle: #B6E8D7;

    --bs-danger: var(--st-destructive);
    --bs-danger-rgb: var(--st-destructive-rgb);
    --bs-danger-text-emphasis: #991B1B;
    --bs-danger-bg-subtle: #FEF2F2;
    --bs-danger-border-subtle: #F7C1C1;

    --bs-success: var(--st-primary);
    --bs-success-rgb: var(--st-primary-rgb);
    --bs-success-text-emphasis: var(--st-primary-hover);
    --bs-success-bg-subtle: #E8F8F2;
    --bs-success-border-subtle: #B6E8D7;

    --bs-info-text-emphasis: #1D4ED8;
    --bs-info-bg-subtle: #EBF4FF;
    --bs-info-border-subtle: #93C5FD;

    --bs-warning-text-emphasis: #92400E;
    --bs-warning-bg-subtle: #FEF9EC;
    --bs-warning-border-subtle: #FBBF24;

    /* Surfaces et texte */
    --bs-body-bg: var(--st-background);
    --bs-body-bg-rgb: 245, 244, 240;
    --bs-body-color: var(--st-foreground);
    --bs-body-color-rgb: 26, 26, 26;
    --bs-emphasis-color: var(--st-foreground);
    --bs-emphasis-color-rgb: 26, 26, 26;
    --bs-secondary-color: var(--st-muted-foreground);
    --bs-secondary-color-rgb: 107, 107, 107;
    --bs-secondary-bg: var(--st-background);
    --bs-tertiary-bg: var(--st-background);

    /* Bordures */
    --bs-border-color: var(--st-border);
    --bs-border-color-translucent: var(--st-border);

    /* Rayons */
    --bs-border-radius: var(--st-radius-md);
    --bs-border-radius-sm: var(--st-radius-sm);
    --bs-border-radius-lg: var(--st-radius-lg);
    --bs-border-radius-xl: 1rem;
    --bs-border-radius-2xl: 1.25rem;

    /* Liens */
    --bs-link-color: var(--st-primary);
    --bs-link-color-rgb: var(--st-primary-rgb);
    --bs-link-hover-color: var(--st-primary-hover);
    --bs-link-hover-color-rgb: 15, 122, 95;

    --bs-focus-ring-color: rgba(var(--st-primary-rgb), 0.5);
    --bs-focus-ring-width: 3px;
    --bs-heading-color: var(--st-foreground);

    /* Typographie */
    --bs-body-font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --bs-body-font-size: 0.9375rem;
    --bs-body-font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: var(--st-foreground);
}

h1 { font-size: 1.625rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.1875rem; }
h4 { font-size: 1.0625rem; }
h5 { font-size: 0.9375rem; }
h6 { font-size: 0.875rem; }

/* ------------------------------------------------------------------ *
 * Boutons
 * ------------------------------------------------------------------ */

.btn {
    --bs-btn-font-weight: 600;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--st-radius-md);
    --bs-btn-focus-box-shadow: var(--st-ring);
    --bs-btn-active-shadow: none;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--st-primary);
    --bs-btn-border-color: var(--st-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--st-primary-hover);
    --bs-btn-hover-border-color: var(--st-primary-hover);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--st-primary-hover);
    --bs-btn-active-border-color: var(--st-primary-hover);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--st-primary);
    --bs-btn-disabled-border-color: var(--st-primary);
    --bs-btn-focus-shadow-rgb: var(--st-primary-rgb);
}

.btn-outline-primary {
    --bs-btn-color: var(--st-muted-foreground);
    --bs-btn-border-color: var(--st-border);
    --bs-btn-bg: var(--st-card);
    --bs-btn-hover-color: var(--st-foreground);
    --bs-btn-hover-bg: var(--st-background);
    --bs-btn-hover-border-color: var(--st-border);
    --bs-btn-active-color: var(--st-foreground);
    --bs-btn-active-bg: var(--st-background);
    --bs-btn-active-border-color: var(--st-border);
    --bs-btn-disabled-color: var(--st-muted-foreground);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--st-border);
    --bs-btn-focus-shadow-rgb: var(--st-primary-rgb);
}

.btn-outline-danger,
.btn-danger {
    --bs-btn-color: var(--st-destructive);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: #F7C1C1;
    --bs-btn-hover-color: var(--st-destructive);
    --bs-btn-hover-bg: #FEF2F2;
    --bs-btn-hover-border-color: #F7C1C1;
    --bs-btn-active-color: var(--st-destructive);
    --bs-btn-active-bg: #FEF2F2;
    --bs-btn-active-border-color: #F7C1C1;
    --bs-btn-disabled-color: var(--st-destructive);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #F7C1C1;
    --bs-btn-focus-shadow-rgb: var(--st-destructive-rgb);
}

.btn-secondary {
    --bs-btn-color: var(--st-foreground);
    --bs-btn-bg: var(--st-background);
    --bs-btn-border-color: var(--st-border);
    --bs-btn-hover-color: var(--st-foreground);
    --bs-btn-hover-bg: var(--st-border);
    --bs-btn-hover-border-color: var(--st-border);
    --bs-btn-active-color: var(--st-foreground);
    --bs-btn-active-bg: var(--st-border);
    --bs-btn-active-border-color: var(--st-border);
    --bs-btn-focus-shadow-rgb: var(--st-primary-rgb);
}

.btn-link {
    --bs-btn-color: var(--st-primary);
    --bs-btn-hover-color: var(--st-primary-hover);
    --bs-btn-font-weight: 600;
}

.btn-sm {
    --bs-btn-font-size: 0.8125rem;
    --bs-btn-border-radius: var(--st-radius-sm);
}

/* ------------------------------------------------------------------ *
 * Cartes
 * ------------------------------------------------------------------ */

.card {
    --bs-card-bg: var(--st-card);
    --bs-card-border-color: var(--st-border);
    --bs-card-border-radius: var(--st-radius-lg);
    --bs-card-inner-border-radius: calc(var(--st-radius-lg) - 1px);
    --bs-card-cap-bg: transparent;
    --bs-card-cap-color: var(--st-foreground);
    --bs-card-spacer-y: 1.25rem;
    --bs-card-spacer-x: 1.5rem;
    --bs-card-cap-padding-y: 1rem;
    --bs-card-cap-padding-x: 1.5rem;
    box-shadow: none;
}

.card-header {
    border-bottom-color: var(--st-border);
    font-weight: 600;
}

.card-title {
    font-weight: 600;
}

/* Les cartes du template portent .shadow ; le design system n'ombre pas. */
.card.shadow,
.card.shadow-sm {
    box-shadow: none !important;
}

/* ------------------------------------------------------------------ *
 * Alertes
 * ------------------------------------------------------------------ */

.alert {
    --bs-alert-border-radius: var(--st-radius-md);
    --bs-alert-padding-y: 0.75rem;
    --bs-alert-padding-x: 1rem;
    border-width: 1px;
    font-size: 0.875rem;
}

/* ------------------------------------------------------------------ *
 * Badges
 * ------------------------------------------------------------------ */

.badge {
    --bs-badge-border-radius: var(--st-radius-sm);
    --bs-badge-font-size: 0.625rem;
    --bs-badge-font-weight: 600;
    --bs-badge-padding-x: 0.5rem;
    --bs-badge-padding-y: 0.25rem;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
}

/* Variantes alignées sur web/src/shared/ui/badge.tsx */
.badge.bg-success {
    background-color: #E8F8F2 !important;
    border-color: #B6E8D7;
    color: var(--st-primary-hover);
}

.badge.bg-secondary {
    background-color: var(--st-card) !important;
    border-color: var(--st-border);
    color: var(--st-muted-foreground);
}

.badge.bg-danger {
    background-color: #FEF2F2 !important;
    border-color: #F7C1C1;
    color: #991B1B;
}

.badge.bg-warning {
    background-color: #FEF9EC !important;
    border-color: #FBBF24;
    color: #92400E;
}

.badge.bg-info {
    background-color: #EBF4FF !important;
    border-color: #93C5FD;
    color: #1D4ED8;
}

.badge.bg-primary {
    background-color: var(--st-primary) !important;
    color: #fff;
}

/* ------------------------------------------------------------------ *
 * Tableaux
 * ------------------------------------------------------------------ */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--st-foreground);
    --bs-table-border-color: var(--st-border);
    --bs-table-hover-bg: var(--st-background);
    --bs-table-hover-color: var(--st-foreground);
    font-size: 0.875rem;
}

.table > thead {
    color: var(--st-muted-foreground);
    font-weight: 600;
}

/* ------------------------------------------------------------------ *
 * Formulaires
 *
 * Bootstrap 5.3 ne pilote pas les champs par variables : leur fond résout
 * vers --bs-body-bg (beige) et leur focus est un bleu codé en dur.
 * ------------------------------------------------------------------ */

.form-control,
.form-select {
    background-color: var(--st-card);
    border-color: var(--st-border);
    border-radius: var(--st-radius-md);
    font-size: 0.875rem;
    color: var(--st-foreground);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--st-card);
    border-color: var(--st-primary);
    box-shadow: var(--st-ring);
}

.form-control::placeholder {
    color: var(--st-muted-foreground);
    opacity: 1;
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--st-background);
    opacity: 0.6;
}

.form-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--st-foreground);
    margin-bottom: 0.375rem;
}

.form-check-input {
    border-color: #929292;
    border-radius: 0.25rem;
}

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

.form-check-input:focus {
    border-color: var(--st-primary);
    box-shadow: var(--st-ring);
}

/* Focus clavier générique (liens, boutons custom) */
:focus-visible {
    outline: none;
    box-shadow: var(--st-ring);
}

/* ------------------------------------------------------------------ *
 * Divers
 * ------------------------------------------------------------------ */

.list-group {
    --bs-list-group-border-color: var(--st-border);
    --bs-list-group-border-radius: var(--st-radius-md);
    --bs-list-group-bg: transparent;
    --bs-list-group-color: var(--st-foreground);
    --bs-list-group-action-hover-bg: var(--st-background);
}

.spinner-border {
    border-width: 0.15em;
}

hr {
    border-color: var(--st-border);
    opacity: 1;
}

code, .font-monospace {
    color: var(--st-foreground);
}

pre {
    font-size: 0.8125rem;
    margin-bottom: 0;
}

/* Cartes cliquables (Home) : la bordure reprend l'accent au survol. */
a.text-decoration-none .card {
    transition: border-color .15s ease-in-out;
}

a.text-decoration-none:hover .card {
    border-color: var(--st-primary);
}

/* Les modales du BackOffice sont construites à la main (Storage) :
   on leur donne le même traitement que les cartes. */
.modal-content {
    background-color: var(--st-card);
    border: 1px solid var(--st-border);
    border-radius: var(--st-radius-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--st-border);
}

.list-group-item {
    background-color: transparent;
    border-color: var(--st-border);
    color: var(--st-foreground);
}