/* =====================================================================
   Claromio — Thème global (design tokens + surcharge Bootstrap 5.3)
   Chargé APRÈS bootstrap.min.css et base.css : ce fichier a le dernier mot.
   Source de vérité : couleurs, typographie, rayons, ombres.
   Les tokens rx-* historiques (base.css) sont re-déclarés ici pour que
   les 40 templates rx-* et les templates Bootstrap partagent LA même palette.
   ===================================================================== */

:root {
    /* ── Tokens de marque ─────────────────────────────────── */
    --font-sans: "DM Sans", ui-sans-serif, system-ui, -apple-system,
                 "Segoe UI", Roboto, Arial, sans-serif;

    --bg:            #f6f8f8;
    --surface:       #ffffff;
    --border:        #e2e8e7;
    --border-focus:  #0d9488;
    --text:          #17242b;
    --muted:         #64748b;

    /* Teal optique — santé / précision (choix Anis, 2026-07-07) */
    --accent:        #0d9488;   /* marque : icônes, badges, sidebar, graphiques */
    --accent-hover:  #0f766e;
    --accent-light:  #e6f7f5;
    /* Teal AA-conforme (≥4,5:1 sur blanc) pour TEXTE et boutons interactifs.
       Cf. décision accessibilité 2026-07-08. */
    --accent-text:       #0f766e;
    --accent-text-hover: #0b5d57;

    --dark:          #10201f;   /* navbar + sidebar, slate-teal profond */

    /* ── Sémantique — LA même partout, jamais de couleur locale ── */
    --success:       #16a34a;
    --success-bg:    #e7f6ec;
    --success-text:  #15803d;
    --warning:       #d97706;
    --warning-bg:    #fdf3e1;
    --warning-text:  #b45309;
    --danger:        #dc2626;
    --danger-bg:     #fdeaea;
    --danger-text:   #b91c1c;
    --info:          #0284c7;
    --info-bg:       #e6f3fb;
    --info-text:     #0369a1;

    --radius:        12px;
    --radius-sm:     8px;
    --shadow:        0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --shadow-md:     0 4px 16px rgba(16, 24, 40, .10);

    /* ── Remap Bootstrap 5.3 ──────────────────────────────── */
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-font-family: var(--font-sans);
    --bs-border-color: var(--border);
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: 6px;
    --bs-border-radius-lg: var(--radius);

    --bs-primary: var(--accent);
    --bs-primary-rgb: 13, 148, 136;
    --bs-secondary: var(--muted);
    --bs-secondary-rgb: 100, 116, 139;
    --bs-success: var(--success);
    --bs-success-rgb: 22, 163, 74;
    --bs-danger: var(--danger);
    --bs-danger-rgb: 220, 38, 38;
    --bs-warning: var(--warning);
    --bs-warning-rgb: 217, 119, 6;
    --bs-info: var(--info);
    --bs-info-rgb: 2, 132, 199;
    --bs-dark: var(--dark);
    --bs-dark-rgb: 16, 32, 31;
    --bs-light: #f1f3f9;
    --bs-light-rgb: 241, 243, 249;

    /* Subtile (alerts, .text-bg-*-subtle, bordures) */
    --bs-primary-bg-subtle: var(--accent-light);
    --bs-primary-border-subtle: #a9e2db;
    --bs-primary-text-emphasis: #115e59;
    --bs-success-bg-subtle: var(--success-bg);
    --bs-success-border-subtle: #b5e2c4;
    --bs-success-text-emphasis: var(--success-text);
    --bs-danger-bg-subtle: var(--danger-bg);
    --bs-danger-border-subtle: #f6c1c1;
    --bs-danger-text-emphasis: var(--danger-text);
    --bs-warning-bg-subtle: var(--warning-bg);
    --bs-warning-border-subtle: #f3d9a4;
    --bs-warning-text-emphasis: var(--warning-text);
    --bs-info-bg-subtle: var(--info-bg);
    --bs-info-border-subtle: #b6def2;
    --bs-info-text-emphasis: var(--info-text);

    --bs-link-color: var(--accent-text);
    --bs-link-color-rgb: 15, 118, 110;
    --bs-link-hover-color: var(--accent-text-hover);
    --bs-link-hover-color-rgb: 11, 93, 87;

    /* Identifiants techniques <code> : slate discret, pas le rose Bootstrap */
    --bs-code-color: #64748b;
}

/* <code> = référence technique secondaire (codes caisse, comptes…) :
   chip gris léger quand isolé, transparent quand déjà en texte secondaire. */
code {
    background: #eef0f6;
    padding: .05rem .35rem;
    border-radius: 4px;
}
.text-muted code, small code, .small code { background: transparent; padding: 0; }

/* ── Base ─────────────────────────────────────────────────── */
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--text);           /* neutralise le h1 { color: gray } historique */
    font-weight: 600;
}

a { text-decoration: none; }
a:hover { text-decoration: underline; }
.btn:hover, .nav-link:hover, .dropdown-item:hover,
.page-link:hover, .navbar-brand:hover { text-decoration: none; }

/* Focus clavier visible partout (a11y) */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Cards ────────────────────────────────────────────────── */
.card {
    --bs-card-border-color: var(--border);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - 1px);
    --bs-card-cap-bg: var(--surface);
    box-shadow: var(--shadow);
}
.card .card-header {
    font-weight: 600;
    border-bottom-color: var(--border);
}
/* les .shadow-sm posés dans les templates restent discrets */
.shadow-sm { box-shadow: var(--shadow) !important; }

/* ── Tables ───────────────────────────────────────────────── */
.table {
    --bs-table-hover-bg: #f8f9fd;
    --bs-table-striped-bg: #fafbfe;
    border-color: var(--border);
}
.table thead th {
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
    background-color: #fafbfe;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.table td { vertical-align: middle; }
/* Montants alignés : chiffres tabulaires */
.table td, .table th { font-variant-numeric: tabular-nums; }

/* ── Marque : wordmark Claromio ───────────────────────────── */
.brand-wordmark { font-weight: 600; letter-spacing: -.01em; }
.brand-claro { color: inherit; }        /* suit le contexte : blanc sur navbar sombre */
.brand-mio   { color: var(--accent); }  /* teal, lisible en gros/gras sur fond sombre (≥3:1) */

/* ── Boutons ──────────────────────────────────────────────── */
.btn {
    font-weight: 500;
    --bs-btn-border-radius: var(--radius-sm);
}
.btn-primary {
    /* Fond AA-conforme : blanc sur #0f766e = 5,39:1 (a11y 2026-07-08). */
    --bs-btn-bg: var(--accent-text);
    --bs-btn-border-color: var(--accent-text);
    --bs-btn-hover-bg: var(--accent-text-hover);
    --bs-btn-hover-border-color: var(--accent-text-hover);
    --bs-btn-active-bg: var(--accent-text-hover);
    --bs-btn-active-border-color: var(--accent-text-hover);
    --bs-btn-disabled-bg: #8fd0c9;
    --bs-btn-disabled-border-color: #8fd0c9;
    --bs-btn-focus-shadow-rgb: 13, 148, 136;
}
.btn-success {
    --bs-btn-bg: var(--success);
    --bs-btn-border-color: var(--success);
    --bs-btn-hover-bg: #15803d;
    --bs-btn-hover-border-color: #15803d;
    --bs-btn-active-bg: #15803d;
    --bs-btn-active-border-color: #15803d;
    --bs-btn-focus-shadow-rgb: 22, 163, 74;
}
.btn-danger {
    --bs-btn-bg: var(--danger);
    --bs-btn-border-color: var(--danger);
    --bs-btn-hover-bg: #b91c1c;
    --bs-btn-hover-border-color: #b91c1c;
    --bs-btn-active-bg: #b91c1c;
    --bs-btn-active-border-color: #b91c1c;
    --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--warning);
    --bs-btn-border-color: var(--warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #b45309;
    --bs-btn-hover-border-color: #b45309;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b45309;
    --bs-btn-active-border-color: #b45309;
    --bs-btn-focus-shadow-rgb: 217, 119, 6;
}
.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--info);
    --bs-btn-border-color: var(--info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0369a1;
    --bs-btn-hover-border-color: #0369a1;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0369a1;
    --bs-btn-active-border-color: #0369a1;
    --bs-btn-focus-shadow-rgb: 2, 132, 199;
}
.btn-secondary {
    --bs-btn-color: var(--text);
    --bs-btn-bg: #f1f3f9;
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: #e4e7f1;
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: #e4e7f1;
    --bs-btn-active-border-color: var(--border);
}
/* Outline : bordure neutre, teinte au survol — jamais d'aplat criard */
.btn-outline-primary {
    --bs-btn-color: var(--accent-text);
    --bs-btn-border-color: #a9e2db;
    --bs-btn-hover-color: var(--accent-text-hover);
    --bs-btn-hover-bg: var(--accent-light);
    --bs-btn-hover-border-color: var(--accent);
    --bs-btn-active-color: var(--accent-text-hover);
    --bs-btn-active-bg: var(--accent-light);
    --bs-btn-active-border-color: var(--accent);
    --bs-btn-focus-shadow-rgb: 13, 148, 136;
}
.btn-outline-secondary {
    --bs-btn-color: var(--muted);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--text);
    --bs-btn-hover-bg: #f1f3f9;
    --bs-btn-hover-border-color: var(--border);
    --bs-btn-active-color: var(--text);
    --bs-btn-active-bg: #f1f3f9;
    --bs-btn-active-border-color: var(--border);
}
.btn-outline-danger {
    --bs-btn-color: var(--danger-text);
    --bs-btn-border-color: #f6c1c1;
    --bs-btn-hover-color: var(--danger-text);
    --bs-btn-hover-bg: var(--danger-bg);
    --bs-btn-hover-border-color: var(--danger);
    --bs-btn-active-color: var(--danger-text);
    --bs-btn-active-bg: var(--danger-bg);
    --bs-btn-active-border-color: var(--danger);
    --bs-btn-focus-shadow-rgb: 220, 38, 38;
}
.btn-outline-warning {
    --bs-btn-color: var(--warning-text);
    --bs-btn-border-color: #f3d9a4;
    --bs-btn-hover-color: var(--warning-text);
    --bs-btn-hover-bg: var(--warning-bg);
    --bs-btn-hover-border-color: var(--warning);
    --bs-btn-active-color: var(--warning-text);
    --bs-btn-active-bg: var(--warning-bg);
    --bs-btn-active-border-color: var(--warning);
    --bs-btn-focus-shadow-rgb: 217, 119, 6;
}
.btn-outline-info {
    --bs-btn-color: var(--info-text);
    --bs-btn-border-color: #b6def2;
    --bs-btn-hover-color: var(--info-text);
    --bs-btn-hover-bg: var(--info-bg);
    --bs-btn-hover-border-color: var(--info);
    --bs-btn-active-color: var(--info-text);
    --bs-btn-active-bg: var(--info-bg);
    --bs-btn-active-border-color: var(--info);
}
.btn-outline-light {
    --bs-btn-color: rgba(255, 255, 255, .85);
    --bs-btn-border-color: rgba(255, 255, 255, .25);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .1);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .4);
}

/* ── Badges : fond teinté + texte coloré, jamais d'aplat vif ──
   Un statut = une couleur, la même dans toute l'app. */
.badge {
    font-weight: 600;
    letter-spacing: .01em;
    border-radius: 6px;
}
.badge.bg-success, .badge.text-bg-success {
    background-color: var(--success-bg) !important;
    color: var(--success-text) !important;
}
.badge.bg-danger, .badge.text-bg-danger {
    background-color: var(--danger-bg) !important;
    color: var(--danger-text) !important;
}
.badge.bg-warning, .badge.text-bg-warning {
    background-color: var(--warning-bg) !important;
    color: var(--warning-text) !important;
}
.badge.bg-info, .badge.text-bg-info {
    background-color: var(--info-bg) !important;
    color: var(--info-text) !important;
}
.badge.bg-primary, .badge.text-bg-primary {
    background-color: var(--accent-light) !important;
    color: var(--accent-text) !important;
}
.badge.bg-secondary, .badge.text-bg-secondary,
.badge.bg-dark, .badge.text-bg-dark {
    background-color: #eef0f6 !important;
    color: #475569 !important;
}
.badge.bg-light, .badge.text-bg-light {
    background-color: #f1f3f9 !important;
    color: var(--muted) !important;
}

/* ── Actions dans les tables : discrètes, la couleur au survol ──
   Un tableau n'est pas un panneau de commande : les boutons pleins
   (indigo/ambre/rouge) répétés à chaque ligne créent du bruit.
   Propriétés concrètes (pas seulement des vars --bs-btn-*) pour couvrir
   aussi les .btn du système rx historique (base.css). */
.table td .btn, .rx-table td .btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .8125rem;
    font-weight: 500;
    padding: .25rem .625rem;
    box-shadow: none;
}
.table td .btn-primary, .rx-table td .btn-primary,
.table td .btn-info, .rx-table td .btn-info {
    color: var(--accent-text);
}
.table td .btn-primary:hover, .rx-table td .btn-primary:hover,
.table td .btn-info:hover, .rx-table td .btn-info:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent-text-hover);
}
.table td .btn-warning, .rx-table td .btn-warning,
.table td .btn-outline-warning, .rx-table td .btn-outline-warning {
    color: var(--warning-text);
}
.table td .btn-warning:hover, .rx-table td .btn-warning:hover,
.table td .btn-outline-warning:hover, .rx-table td .btn-outline-warning:hover {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning-text);
}
.table td .btn-danger, .rx-table td .btn-danger,
.table td .btn-outline-danger, .rx-table td .btn-outline-danger {
    color: var(--danger-text);
}
.table td .btn-danger:hover, .rx-table td .btn-danger:hover,
.table td .btn-outline-danger:hover, .rx-table td .btn-outline-danger:hover {
    background: var(--danger-bg);
    border-color: var(--danger);
    color: var(--danger-text);
}
.table td .btn-success, .rx-table td .btn-success {
    color: var(--success-text);
}
.table td .btn-success:hover, .rx-table td .btn-success:hover {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success-text);
}
.table td .btn-secondary:hover, .rx-table td .btn-secondary:hover {
    background: #f1f3f9;
    color: var(--text);
}

/* ── Formulaires ──────────────────────────────────────────── */
.form-control, .form-select {
    border-color: var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 .2rem rgba(13, 148, 136, .15);
}
.form-control::placeholder { color: #9aa1b5; }
.form-label { font-weight: 500; color: var(--text); }
.input-group-text {
    background-color: #f1f3f9;
    border-color: var(--border);
    color: var(--muted);
}

/* ── Dropdowns / modals / pagination ──────────────────────── */
.dropdown-menu {
    --bs-dropdown-border-color: var(--border);
    --bs-dropdown-border-radius: var(--radius-sm);
    --bs-dropdown-link-active-bg: var(--accent);
    box-shadow: var(--shadow-md);
}
.modal-content {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
}
.pagination {
    --bs-pagination-color: var(--muted);
    --bs-pagination-border-color: var(--border);
    --bs-pagination-border-radius: var(--radius-sm);
    --bs-pagination-hover-color: var(--text);
    --bs-pagination-hover-bg: #f1f3f9;
    --bs-pagination-hover-border-color: var(--border);
    --bs-pagination-focus-color: var(--accent-text);
    --bs-pagination-focus-bg: var(--accent-light);
    --bs-pagination-active-bg: var(--accent-text);
    --bs-pagination-active-border-color: var(--accent-text);
}

/* ── Navbar + sidebar (bg-dark remappé sur --dark) ────────── */
.navbar.bg-dark {
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    box-shadow: none;
}
.navbar-brand {
    font-weight: 700;
    letter-spacing: .02em;
}
.sidebar-desktop.bg-dark,
.sidebar-mobile .offcanvas.bg-dark { background-color: var(--dark) !important; }

/* ── Alertes messages Django ──────────────────────────────── */
.alert { border-radius: var(--radius-sm); }

/* ── Tables sur mobile : scroll horizontal universel ──────────
   Beaucoup de listes ne sont pas enveloppees dans .table-responsive ;
   sur petit ecran on rend chaque table defilable au lieu de la laisser
   deborder/clipper. La technique display:block conserve le rendu tableau
   tout en confinant le scroll a la table elle-meme. */
@media (max-width: 767.98px) {
    .main-content table.table,
    .main-content table.rx-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    /* En-tetes de page plus compacts sur mobile */
    .rx-header h1, h1.h4 { font-size: 1.15rem; }
}

/* ── Select2 (django-autocomplete-light) aligné sur .form-control ─────
   Les champs autocomplete (ophtalmologue, produits…) utilisent Select2.
   Sans ces règles, la hauteur/largeur du widget ne correspond pas aux
   .form-control Bootstrap 5 (il apparaît plus court et plus étroit). */
.select2-container { width: 100% !important; }

/* select2.css (vendor) est chargé APRÈS theme.css via {% block extra_head %},
   d'où !important sur les propriétés de gabarit pour rétablir l'alignement
   sur .form-control malgré l'ordre de chargement. */
.select2-container--default .select2-selection--single {
    height: calc(1.5em + 0.75rem + 2px) !important;   /* = hauteur d'un .form-control */
    padding: 0.375rem 0.75rem !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--bs-border-radius, 0.375rem) !important;
    background: var(--surface);
    display: flex;
    align-items: center;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.5;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
    line-height: 1.5;
    color: var(--text);
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--muted);
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
    inset-inline-end: 8px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--border-focus) !important;
    box-shadow: 0 0 0 0.25rem rgba(13, 148, 136, 0.18);
    outline: 0;
}
.select2-dropdown { border-color: var(--border); }
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--accent);
}

/* Select2 dans un .input-group : occupe l'espace restant à côté du bouton */
.input-group > .select2-container { flex: 1 1 auto; width: 1% !important; }
.input-group > .select2-container .select2-selection--single {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Éléments en ligne séparés par un point médian, sans point en tête quand le
   premier manque (identification d'un produit sous une ligne de facture). */
.liste-points > span + span::before { content: " · "; }

/* Ligne visée par une ancre (#reception-…) : la retrouver dans un long tableau. */
tr:target > td { background-color: var(--bs-warning-bg-subtle); }

/* ── Taille du texte (accessibilité) ──────────────────────────────────────
   Choisie dans le menu « Affichage » (core/views_affichage.py), posée sur
   <html> côté serveur. Les polices du projet sont toutes en rem/em : changer
   la taille racine agrandit tout, tableaux et menus compris. */
html[data-taille-texte="grand"]      { font-size: 112.5%; }
html[data-taille-texte="tres_grand"] { font-size: 125%; }