/**
 * Paper A4 Pro Design System
 * Pour les modules Brouillards de Caisse et Contrôles de Caisse
 */

/* =================================================================
   GRILLE DE FORMULAIRE
   ================================================================= */
body .paper-sheet .custom-form .form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    padding-bottom: 40px;
}

/* Espacement accru pour la première ligne de champs sur grand écran */
@media (min-width: 769px) {
    body .paper-sheet .custom-form .form-grid:first-of-type {
        padding-bottom: 55px;
    }
}

body .paper-sheet .custom-form .form-grid .form-group,
body .paper-sheet .custom-form .form-grid > div {
    margin-bottom: 0;
}

/* Champ pleine largeur */
body .paper-sheet .custom-form .form-grid .full-width {
    grid-column: 1 / -1;
}

/* =================================================================
   SÉPARATIONS
   ================================================================= */
body .paper-sheet .custom-form .form-divider {
    grid-column: 1 / -1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
    margin: 5px 0;
}

/* =================================================================
   ACTIONS (Boutons)
   ================================================================= */
body .paper-sheet .custom-form .form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 15px;
    margin-top: 10px;
    padding-top: 25px;
    border-top: 1px solid #e2e8f0;
}

body .paper-sheet .custom-form .form-actions-left {
    justify-content: flex-start;
}

body .paper-sheet .custom-form .form-actions-center {
    justify-content: center;
}

/* =================================================================
   TABLEAUX DE DONNÉES (Améliorations)
   ================================================================= */
body .paper-sheet .data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

body .paper-sheet .data-table thead,
body .paper-sheet .data-table tr:first-child th {
    background: linear-gradient(135deg, var(--primary, #34495e), var(--secondary, #2c3e50));
    color: white;
}

body .paper-sheet .data-table th {
    padding: 14px 16px;
    text-align: left;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.8px;
    border: none;
}

body .paper-sheet .data-table td {
    padding: 13px 16px;
    border-bottom: 1px solid #edf2f7;
    vertical-align: middle;
    transition: background-color 0.15s;
}

body .paper-sheet .data-table tbody tr:hover td {
    background-color: #f8fafc;
}

body .paper-sheet .data-table tbody tr:last-child td {
    border-bottom: 2px solid #e2e8f0;
}

/* Ligne d'en-tête de tableau (caption) */
body .paper-sheet .data-table .table-caption {
    background-color: #f8fafc;
    font-weight: 700;
    color: var(--secondary, #2c3e50);
    text-align: center;
    padding: 16px;
    font-size: 15px;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #e2e8f0;
}

/* Cellules avec indicateur de survol */
body .paper-sheet .data-table td:first-child {
    border-left: 3px solid transparent;
    transition: border-color 0.2s;
}

body .paper-sheet .data-table tbody tr:hover td:first-child {
    border-left-color: var(--accent, #3498db);
}

/* Ligne de total / report */
body .paper-sheet .data-table .total-row td,
body .paper-sheet .data-table .report-row td {
    background-color: #f8fafc;
    font-weight: 700;
    color: var(--secondary, #2c3e50);
}

/* =================================================================
   MODALS
   ================================================================= */
body .modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    animation: fadeIn 0.2s ease-out;
}

body .modal-content {
    background: white;
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(0,0,0,0.25);
    max-width: 480px;
    width: 92%;
    overflow: hidden;
    animation: modalSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    border: 1px solid rgba(255,255,255,0.2);
}

body .modal-header {
    background: linear-gradient(135deg, var(--primary, #34495e), var(--secondary, #2c3e50));
    color: white;
    padding: 22px 28px;
    position: relative;
}

body .modal-header h5 {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

body .modal-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 28px;
    right: 28px;
    height: 1px;
    background: rgba(255,255,255,0.2);
}

body .modal-body {
    padding: 28px;
    font-size: 15px;
    line-height: 1.6;
    color: #475569;
}

body .modal-footer {
    padding: 18px 28px;
    background: #f8fafc;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid #f1f5f9;
}

/* =================================================================
   ANIMATIONS
   ================================================================= */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =================================================================
   SÉPARATEURS HR
   ================================================================= */
body .paper-sheet hr {
    display: block;
    height: 2px;
    background-color: #94a3b8;
    border: 0;
    margin: 30px 0;
}

/* =================================================================
   SECTIONS DE FICHE
   ================================================================= */
body .sheet-section {
    padding: 25px 0;
    border-bottom: 1px solid #e2e8f0;
}

body .sheet-section:last-child {
    border-bottom: none;
}

body .sheet-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary, #2c3e50);
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary, #34495e);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* =================================================================
   GRILLE D'INFORMATION
   ================================================================= */
body .info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 20px;
}

body .info-grid-single {
    grid-template-columns: 1fr;
}

body .info-grid.info-grid-single {
    grid-template-columns: 1fr;
}

body .info-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px dashed #e2e8f0;
}

body .info-row:last-child {
    border-bottom: none;
}

body .info-label {
    font-weight: 600;
    color: var(--secondary, #2c3e50);
    flex: 0 0 180px;
    font-size: 14px;
}

body .info-value {
    font-weight: 500;
    color: #334155;
    text-align: right;
    flex: 1;
}

/* =================================================================
   RESPONSIVE
   ================================================================= */
@media (max-width: 768px) {
    body .paper-sheet .custom-form .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-bottom: 30px;
    }

    body .paper-sheet .custom-form .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    body .paper-sheet {
        padding: 25px;
    }

    body .modal-content {
        width: 95%;
        border-radius: 12px;
    }

    body .info-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    body .info-row {
        flex-direction: column;
    }

    body .info-label {
        flex: none;
        margin-bottom: 5px;
    }
}

/* =================================================================
   STYLES DU MODÈLE (Formulaires type SODISGEN)
   ================================================================= */
body .paper-sheet .form-group {
    margin-bottom: 18px;
}

body .paper-sheet .form-group:last-child {
    margin-bottom: 0;
}

body .paper-sheet .flex-row {
    display: flex;
    gap: 15px;
}

body .paper-sheet .flex-row .form-group {
    flex: 1;
    margin-bottom: 0;
}

body .paper-sheet .clean-input,
body .paper-sheet .form-control {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    color: #333;
    font-size: 14px;
    box-sizing: border-box;
    transition: border-color 0.3s, box-shadow 0.3s;
}

body .paper-sheet .clean-input:focus,
body .paper-sheet .form-control:focus {
    border-color: #3498db;
    outline: none;
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

body .paper-sheet .form-label,
body .paper-sheet label {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
    font-weight: 600;
    color: var(--secondary, #2c3e50);
}

body .paper-sheet .info-box {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    background: white;
}

body .paper-sheet .info-box .box-header {
    background: #f8f9fa;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: bold;
    color: var(--primary, #34495e);
    border-bottom: 1px solid #e0e0e0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

body .paper-sheet .info-box .box-body {
    padding: 25px;
}

body .paper-sheet .btn-submit {
    display: block !important;
    width: 100% !important;
    padding: 14px !important;
    background: #34495e !important;
    color: white !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: transform 0.15s, box-shadow 0.15s !important;
    margin-top: 10px !important;
}

body .paper-sheet .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}

/* ================================================================= */
/* STYLES POLYMORPHES PAR PAILLASSE (LABORATOIRE)                    */
/* ================================================================= */

/* --- Bactériologie (vert menthe) --- */
body .paper-sheet.paillasse-bacteriologie {
    border-left: 5px solid #1abc9c;
}
body .paper-sheet.paillasse-bacteriologie .sheet-header {
    border-bottom-color: #1abc9c;
}
body .paper-sheet.paillasse-bacteriologie .sheet-title {
    color: #16a085;
}
body .paper-sheet.paillasse-bacteriologie .sheet-title i {
    color: #1abc9c;
}

/* --- Biochimie (bleu) --- */
body .paper-sheet.paillasse-biochimie {
    border-left: 5px solid #3498db;
}
body .paper-sheet.paillasse-biochimie .sheet-header {
    border-bottom-color: #3498db;
}
body .paper-sheet.paillasse-biochimie .sheet-title {
    color: #2980b9;
}
body .paper-sheet.paillasse-biochimie .sheet-title i {
    color: #3498db;
}

/* --- Immuno-Sérologie (violet) --- */
body .paper-sheet.paillasse-immuno-serologie {
    border-left: 5px solid #9b59b6;
}
body .paper-sheet.paillasse-immuno-serologie .sheet-header {
    border-bottom-color: #9b59b6;
}
body .paper-sheet.paillasse-immuno-serologie .sheet-title {
    color: #8e44ad;
}
body .paper-sheet.paillasse-immuno-serologie .sheet-title i {
    color: #9b59b6;
}

/* --- Hématologie (rouge) --- */
body .paper-sheet.paillasse-hematologie {
    border-left: 5px solid #e74c3c;
}
body .paper-sheet.paillasse-hematologie .sheet-header {
    border-bottom-color: #e74c3c;
}
body .paper-sheet.paillasse-hematologie .sheet-title {
    color: #c0392b;
}
body .paper-sheet.paillasse-hematologie .sheet-title i {
    color: #e74c3c;
}

/* --- Banque de sang (rouge foncé) --- */
body .paper-sheet.paillasse-banque-de-sang {
    border-left: 5px solid #c0392b;
}
body .paper-sheet.paillasse-banque-de-sang .sheet-header {
    border-bottom-color: #c0392b;
}
body .paper-sheet.paillasse-banque-de-sang .sheet-title {
    color: #a93226;
}
body .paper-sheet.paillasse-banque-de-sang .sheet-title i {
    color: #c0392b;
}

/* --- Anapath (rose/magenta) --- */
body .paper-sheet.paillasse-anapath {
    border-left: 5px solid #e91e63;
}
body .paper-sheet.paillasse-anapath .sheet-header {
    border-bottom-color: #e91e63;
}
body .paper-sheet.paillasse-anapath .sheet-title {
    color: #c2185b;
}
body .paper-sheet.paillasse-anapath .sheet-title i {
    color: #e91e63;
}

/* --- Parasitologie (orange/amber) --- */
body .paper-sheet.paillasse-parasitologie {
    border-left: 5px solid #f39c12;
}
body .paper-sheet.paillasse-parasitologie .sheet-header {
    border-bottom-color: #f39c12;
}
body .paper-sheet.paillasse-parasitologie .sheet-title {
    color: #d68910;
}
body .paper-sheet.paillasse-parasitologie .sheet-title i {
    color: #f39c12;
}

/* --- Biologie Moléculaire (cyan) --- */
body .paper-sheet.paillasse-biologie-moleculaire {
    border-left: 5px solid #00bcd4;
}
body .paper-sheet.paillasse-biologie-moleculaire .sheet-header {
    border-bottom-color: #00bcd4;
}
body .paper-sheet.paillasse-biologie-moleculaire .sheet-title {
    color: #0097a7;
}
body .paper-sheet.paillasse-biologie-moleculaire .sheet-title i {
    color: #00bcd4;
}

/* --- Autres / Non classé (gris) --- */
body .paper-sheet.paillasse-autres {
    border-left: 5px solid #95a5a6;
}
body .paper-sheet.paillasse-autres .sheet-header {
    border-bottom-color: #95a5a6;
}
body .paper-sheet.paillasse-autres .sheet-title {
    color: #7f8c8d;
}
body .paper-sheet.paillasse-autres .sheet-title i {
    color: #95a5a6;
}

/* ================================================================= */
/* STYLES D'IMPRESSION POLYMORPHES PAR PAILLASSE                     */
/* ================================================================= */

@media print {
    body .paper-sheet.paillasse-bacteriologie,
    body .paper-sheet.paillasse-biochimie,
    body .paper-sheet.paillasse-immuno-serologie,
    body .paper-sheet.paillasse-hematologie,
    body .paper-sheet.paillasse-banque-de-sang,
    body .paper-sheet.paillasse-anapath,
    body .paper-sheet.paillasse-parasitologie,
    body .paper-sheet.paillasse-biologie-moleculaire,
    body .paper-sheet.paillasse-autres {
        border-left: none;
        box-shadow: none;
    }
}

/* =================================================================
   COMPLÉMENT — classes utilisées par les vues mais jamais définies
   =================================================================

   La migration W3CSS → Paper A4 Pro a introduit un vocabulaire de classes
   plus large que la feuille de style ne le couvrait : 516 noms de classes
   étaient écrits dans les vues sans qu'aucune règle ne leur corresponde,
   pour 4361 usages. Les écrans concernés retombaient sur le style par
   défaut du navigateur — colonnes de montants non alignées, badges en
   texte nu, cartes sans cadre, boutons secondaires en simples liens.

   Tout est préfixé `body ` pour passer devant `w3.css`, chargé en amont,
   et n'utilise que les jetons réellement définis dans `:root`.
   ================================================================= */

/* --- Alignement et couleur de texte ------------------------------ */
body .text-right   { text-align: right; }
body .text-left    { text-align: left; }
body .text-center  { text-align: center; }
body .right        { text-align: right; }
body .left         { text-align: left; }
body .center       { text-align: center; }
body .text-red,
body .text-danger  { color: var(--danger, #e74c3c); }
body .text-success { color: var(--success, #27ae60); }
body .text-warning { color: var(--warning, #f39c12); }
body .text-muted   { color: var(--text-muted, #7f8c8d); }
body .text-bold    { font-weight: 700; }

/* --- Espacement et flex ------------------------------------------ */
body .d-flex                   { display: flex; }
body .flex-wrap                { flex-wrap: wrap; }
body .justify-content-between  { justify-content: space-between; }
body .justify-content-center   { justify-content: center; }
body .justify-content-end      { justify-content: flex-end; }
body .align-items-center       { align-items: center; }
body .gap-10 { gap: 10px; }
body .gap-15 { gap: 15px; }
body .gap-20 { gap: 20px; }
body .mb-2 { margin-bottom: 8px; }
body .mb-3 { margin-bottom: 16px; }
body .mb-4 { margin-bottom: 24px; }
body .mt-2 { margin-top: 8px; }
body .mt-3 { margin-top: 16px; }
body .mt-4 { margin-top: 24px; }

/* --- Grille simple ------------------------------------------------
   `row` + fractions (`half`, `third`, `quarter`) et les quelques
   colonnes de type Bootstrap laissées par la migration.            */
body .row,
body .form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-start;
}
body .form-col,
body .half    { flex: 1 1 calc(50% - 20px); min-width: 220px; }
body .third   { flex: 1 1 calc(33.333% - 20px); min-width: 180px; }
body .quarter { flex: 1 1 calc(25% - 20px); min-width: 150px; }

body .col-12, body .col-md-12 { flex: 1 1 100%; }
body .col-6, body .col-md-6   { flex: 1 1 calc(50% - 20px); min-width: 220px; }
body .col-md-4, body .col-sm-4 { flex: 1 1 calc(33.333% - 20px); min-width: 180px; }
body .col-md-3 { flex: 1 1 calc(25% - 20px); min-width: 150px; }
body .col-md-2 { flex: 1 1 calc(16.666% - 20px); min-width: 130px; }

@media (max-width: 768px) {
    body .form-col, body .half, body .third, body .quarter,
    body .col-6, body .col-md-6, body .col-md-4, body .col-sm-4,
    body .col-md-3, body .col-md-2 { flex: 1 1 100%; }
}

/* --- Boutons complémentaires -------------------------------------
   `btn-action` porte déjà la forme du bouton (défini dans le bloc
   <style> de `templates/header.php`) ; on complète les variantes.  */
body .btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 6px; border: none; cursor: pointer;
    font-size: 14px; font-weight: 600; text-decoration: none;
    background-color: #f8f9fa; color: #555; border: 1px solid var(--border, #e0e0e0);
    transition: background-color .2s, transform .1s;
}
body .btn:hover { background-color: #e2e6ea; color: #333; }
body .btn-sm    { padding: 5px 11px; font-size: 12.5px; gap: 6px; }
body .btn-info  { background-color: var(--accent, #3498db); color: #fff; border-color: transparent; }
body .btn-info:hover { background-color: #2980b9; }
body .btn-back,
body .btn-close { background-color: #f8f9fa; color: #555; border: 1px solid var(--border, #e0e0e0); }
body .btn-add     { background-color: var(--success, #27ae60); color: #fff; border-color: transparent; }
body .btn-add:hover { background-color: #1e8449; }
body .btn-filter  { background-color: var(--secondary, #34495e); color: #fff; border-color: transparent; }
body .btn-filter:hover { background-color: var(--primary, #2c3e50); }

/* --- Alertes ------------------------------------------------------
   `alert-box` existe déjà ; `alert` en est l'alias historique.     */
body .alert {
    padding: 12px 16px; border-radius: 6px; margin-bottom: 16px;
    border-left: 4px solid var(--accent, #3498db);
    background: rgba(52, 152, 219, 0.10); color: #21618c;
}
body .alert-success,
body .alert-box.alert-success {
    border-left-color: var(--success, #27ae60);
    background: rgba(39, 174, 96, 0.10); color: #196f3d;
}

/* --- Badges ------------------------------------------------------- */
body .badge,
body .badge-statut,
body .statut-badge {
    display: inline-block; padding: 3px 10px; border-radius: 12px;
    font-size: 11.5px; font-weight: 700; line-height: 1.6;
    background: var(--secondary, #34495e); color: #fff; white-space: nowrap;
}
body .badge-success { background: var(--success, #27ae60); }
body .badge-danger  { background: var(--danger, #e74c3c); }
body .badge-warning { background: var(--warning, #f39c12); color: #4a3000; }

/* --- Cartes et panneaux ------------------------------------------- */
body .paper-card,
body .panel {
    background: var(--bg-paper, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    margin-bottom: 20px;
    overflow: hidden;
}
body .panel-heading {
    padding: 12px 18px;
    background: var(--light-bg, #f4f7f6);
    border-bottom: 1px solid var(--border, #e0e0e0);
}
body .panel-title { margin: 0; font-size: 15px; font-weight: 700; color: var(--primary, #2c3e50); }
body .panel-body  { padding: 18px; }

body .stat-card,
body .counter-card {
    display: flex; flex-direction: column; gap: 4px;
    background: var(--bg-paper, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-left: 4px solid var(--accent, #3498db);
    border-radius: 8px; padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
body .stat-number { font-size: 20px; font-weight: 800; color: var(--primary, #2c3e50); }
body .stat-label  { font-size: 12px; color: var(--text-muted, #7f8c8d); text-transform: uppercase; letter-spacing: .04em; }
body .stat-card.recettes { border-left-color: var(--success, #27ae60); }
body .stat-card.depenses { border-left-color: var(--danger, #e74c3c); }

/* --- Blocs d'information clé/valeur ------------------------------- */
body .detail-item,
body .info-item {
    display: flex; justify-content: space-between; gap: 15px;
    padding: 8px 0; border-bottom: 1px solid var(--border-light, #eee);
}
body .detail-item:last-child,
body .info-item:last-child { border-bottom: none; }
body .detail-label { color: var(--text-muted, #7f8c8d); font-size: 13px; }
body .detail-value { font-weight: 600; color: var(--text-main, #2c3e50); text-align: right; }
body .patient-meta { display: flex; flex-wrap: wrap; gap: 15px; font-size: 13px; color: var(--text-muted, #7f8c8d); }

/* --- En-tête de document (factures, états) ------------------------ */
body .header-row {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px; flex-wrap: wrap;
}
body .company-name { font-size: 20px; font-weight: 800; color: var(--primary, #2c3e50); letter-spacing: .02em; }
body .company-sub  { font-size: 13px; color: var(--text-muted, #7f8c8d); }
body .invoice-meta  { text-align: right; }
body .invoice-title { font-size: 17px; font-weight: 700; color: var(--primary, #2c3e50); }
body .invoice-date  { font-size: 12.5px; color: var(--text-muted, #7f8c8d); }
body .separator {
    height: 1px; border: 0; margin: 18px 0;
    background: linear-gradient(90deg, transparent, var(--border, #e0e0e0), transparent);
}

/* --- Sections ----------------------------------------------------- */
body .section { margin-bottom: 24px; }
body .section-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 15px; margin-bottom: 12px;
}
body .section-title,
body .rapport-titre {
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .05em; color: var(--primary, #2c3e50);
    border-bottom: 2px solid var(--border, #e0e0e0);
    padding-bottom: 6px; margin-bottom: 12px;
}
body .rapport-section { margin-bottom: 28px; }

/* --- Tableaux ------------------------------------------------------
   `data-table` reste la table de référence ; ces alias couvrent les
   écrans qui l'ont nommée autrement.                               */
body .table-responsive { width: 100%; overflow-x: auto; }
body .table,
body .table-paper,
body .table-rapport,
body .info-table {
    width: 100%; border-collapse: collapse; font-size: 13.5px;
}
body .table th, body .table-paper th, body .table-rapport th, body .info-table th {
    background: var(--light-bg, #f4f7f6); color: var(--primary, #2c3e50);
    text-align: left; padding: 9px 12px; font-weight: 700;
    border-bottom: 2px solid var(--border, #e0e0e0);
}
body .table td, body .table-paper td, body .table-rapport td, body .info-table td {
    padding: 8px 12px; border-bottom: 1px solid var(--border-light, #eee);
}
body .table-bordered th, body .table-bordered td { border: 1px solid var(--border, #e0e0e0); }
body .table-striped tbody tr:nth-child(odd) td { background: rgba(0,0,0,.02); }

/* --- Divers ------------------------------------------------------- */
body .toolbar-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
body .field-error   { display: block; color: var(--danger, #e74c3c); font-size: 12px; margin-top: 4px; }
body .label         { font-size: 12px; color: var(--text-muted, #7f8c8d); }

/* --- Conteneurs oubliés ------------------------------------------- */
/* `logo-section` est le bloc gauche de l'en-tête de document, en face
   de `invoice-meta`. */
body .logo-section { display: flex; flex-direction: column; gap: 2px; }

/* `cs-a4-pro` est le nom que quelques écrans donnent au conteneur de
   page ; il joue le même rôle que `invoice-layout`. */
body .cs-a4-pro { width: 100%; max-width: 1200px; margin: 20px auto; padding: 0 15px; }

/* --- Queue de vocabulaire ------------------------------------------
   Les derniers noms encore sans règle, tous sous 25 usages.
   (`show-assurance` est volontairement absent : c'est un simple
   marqueur que jQuery montre et cache, il n'a pas de style propre.) */
body .container-fluid { width: 100%; padding: 0 15px; }
body .form-section { margin-bottom: 24px; }
body .info-card {
    background: var(--bg-paper, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px; padding: 16px 18px; margin-bottom: 16px;
}
body .empty-state {
    text-align: center; padding: 36px 20px;
    color: var(--text-muted, #7f8c8d); font-size: 14px;
}
body .quick-link {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border-radius: 6px; text-decoration: none;
    background: var(--light-bg, #f4f7f6); color: var(--primary, #2c3e50);
    border: 1px solid var(--border, #e0e0e0);
}
body .quick-link:hover { background: #e9eeec; }
body .btn-print { background-color: #f8f9fa; color: #555; border: 1px solid var(--border, #e0e0e0); }
body .btn-outline-primary {
    background: transparent; color: var(--accent, #3498db);
    border: 1px solid var(--accent, #3498db);
}
body .btn-outline-primary:hover { background: var(--accent, #3498db); color: #fff; }
body .alert-danger,
body .alert-box.alert-danger {
    border-left-color: var(--danger, #e74c3c);
    background: rgba(231, 76, 60, 0.10); color: #922b21;
}
body .total { font-weight: 700; color: var(--primary, #2c3e50); }
body .value { font-weight: 600; color: var(--text-main, #2c3e50); }
body .mr-2 { margin-right: 8px; }
body .py-3 { padding-top: 16px; padding-bottom: 16px; }

/* =================================================================
   QUEUE DE VOCABULAIRE — écrans de rapports et de tableaux de bord
   =================================================================
   Ces écrans ont été écrits avec un vocabulaire d'inspiration Bootstrap
   (`col-lg-*`, `panel-*`, `bg-*`, `pull-right`) que la feuille de style
   ne couvrait pas. 111 noms restaient sans règle, pour 335 usages,
   concentrés sur `rapportsCaisse/*` et `rapportsFournisseurs/dashboard`.

   Les marqueurs pilotés par jQuery (`show-assurance`, `show-prime`,
   `show-pei`, `show-expiration`, `tablink`, `sortable-table`) sont
   volontairement absents : ils n'ont pas de style propre.
   ================================================================= */

/* --- Palette d'appoint -------------------------------------------- */
:root {
    --indigo: #4b3fa7;
    --teal:   #16a085;
    --purple: #8e44ad;
    --orange: #e67e22;
    --grey:   #95a5a6;
    --yellow: #f1c40f;
}

/* --- Grille (suite) ----------------------------------------------- */
body .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; }
body .col-lg-12 { flex: 1 1 100%; }
body .col-lg-8, body .col-sm-8 { flex: 1 1 calc(66.666% - 20px); min-width: 280px; }
body .col-lg-6  { flex: 1 1 calc(50% - 20px); min-width: 220px; }
body .twothird  { flex: 1 1 calc(66.666% - 20px); min-width: 280px; }
body .col-lg-4  { flex: 1 1 calc(33.333% - 20px); min-width: 180px; }
body .col-lg-3  { flex: 1 1 calc(25% - 20px); min-width: 150px; }
body .kpi-grid,
body .info-grid-2col { display: grid; gap: 16px; }
body .kpi-grid       { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
body .info-grid-2col { grid-template-columns: 1fr 1fr; }

@media (max-width: 768px) {
    body .col-lg-8, body .col-sm-8, body .col-lg-6, body .twothird,
    body .col-lg-4, body .col-lg-3 { flex: 1 1 100%; }
    body .info-grid-2col { grid-template-columns: 1fr; }
}

/* --- Espacement (suite) ------------------------------------------- */
body .mr-3 { margin-right: 16px; }
body .py-2 { padding-top: 8px;  padding-bottom: 8px; }
body .py-4 { padding-top: 24px; padding-bottom: 24px; }
body .py-5 { padding-top: 32px; padding-bottom: 32px; }

/* --- Utilitaires de flot ------------------------------------------ */
body .pull-right    { float: right; }
body .clearfix::after { content: ""; display: table; clear: both; }
body .list-unstyled { list-style: none; padding-left: 0; margin: 0; }
body .form-inline   { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
body .form-help     { display: block; font-size: 12px; color: var(--text-muted, #7f8c8d); margin-top: 4px; }
body .form-control-sm { padding: 6px 10px; font-size: 13px; }
body .action-group  { display: flex; gap: 8px; align-items: center; }

/* --- Mots d'état employés seuls comme classe ---------------------- */
body .success, body .green { color: var(--success, #27ae60); }
body .danger,  body .red   { color: var(--danger,  #e74c3c); }
body .warning, body .orange { color: var(--warning, #f39c12); }
body .info,    body .blue  { color: var(--accent,  #3498db); }
body .text-primary { color: var(--primary, #2c3e50); }
body .text-info    { color: var(--accent, #3498db); }

/* --- Aplats de fond ----------------------------------------------- */
body .bg-primary { background: var(--primary, #2c3e50); color: #fff; }
body .bg-info    { background: rgba(52, 152, 219, .12); color: #21618c; }
body .bg-success { background: rgba(39, 174, 96, .12);  color: #196f3d; }
body .bg-warning { background: rgba(243, 156, 18, .14); color: #7e5109; }
body .bg-danger  { background: rgba(231, 76, 60, .12);  color: #922b21; }

/* --- Boutons de couleur ------------------------------------------- */
body .btn-default, body .btn-cancel { background-color: #f8f9fa; color: #555; border: 1px solid var(--border, #e0e0e0); }
body .btn-block   { display: flex; width: 100%; justify-content: center; }
body .btn-edit    { background-color: var(--warning, #f39c12); color: #fff; border-color: transparent; }
body .btn-export  { background-color: var(--success, #27ae60); color: #fff; border-color: transparent; }
body .btn-indigo  { background-color: var(--indigo); color: #fff; border-color: transparent; }
body .btn-teal    { background-color: var(--teal);   color: #fff; border-color: transparent; }
body .btn-purple  { background-color: var(--purple); color: #fff; border-color: transparent; }
body .btn-orange  { background-color: var(--orange); color: #fff; border-color: transparent; }
body .btn-blue    { background-color: var(--accent, #3498db); color: #fff; border-color: transparent; }
body .btn-green   { background-color: var(--success, #27ae60); color: #fff; border-color: transparent; }

/* --- Panneaux de couleur ------------------------------------------ */
body .panel-default  { border-top: 3px solid var(--border, #e0e0e0); }
body .panel-primary  { border-top: 3px solid var(--primary, #2c3e50); }
body .panel-info     { border-top: 3px solid var(--accent, #3498db); }
body .panel-success  { border-top: 3px solid var(--success, #27ae60); }

/* --- Badges de couleur -------------------------------------------- */
body .badge-primary      { background: var(--primary, #2c3e50); }
body .badge-grey         { background: var(--grey); }
body .badge-blue         { background: var(--accent, #3498db); }
body .badge-green,
body .badge-ecart-ok     { background: var(--success, #27ae60); }
body .badge-light-green  { background: #58d68d; color: #14452a; }
body .badge-orange       { background: var(--orange); }
body .badge-yellow       { background: var(--yellow); color: #4a3000; }
body .badge-indigo       { background: var(--indigo); }
body .badge-purple       { background: var(--purple); }
body .badge-teal         { background: var(--teal); }

/* --- Alertes de couleur ------------------------------------------- */
body .alert-primary { border-left-color: var(--primary, #2c3e50); background: rgba(44, 62, 80, .08);  color: #1c2833; }
body .alert-default { border-left-color: var(--border, #e0e0e0);  background: rgba(0,0,0,.03);        color: #555; }
body .alert-purple  { border-left-color: var(--purple); background: rgba(142, 68, 173, .10); color: #5b2c6f; }
body .alert-teal    { border-left-color: var(--teal);   background: rgba(22, 160, 133, .10); color: #0e6251; }
body .alert-error   { border-left-color: var(--danger, #e74c3c); background: rgba(231, 76, 60, .10); color: #922b21; }

/* --- Composants des tableaux de bord ------------------------------ */
body .page-header {
    display: flex; justify-content: space-between; align-items: center;
    gap: 15px; flex-wrap: wrap;
    padding-bottom: 12px; margin-bottom: 20px;
    border-bottom: 2px solid var(--border, #e0e0e0);
}
body .kpi-card {
    display: flex; align-items: center; gap: 14px;
    background: var(--bg-paper, #fff);
    border: 1px solid var(--border, #e0e0e0);
    border-radius: 8px; padding: 16px 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
body .kpi-icon  { font-size: 24px; color: var(--accent, #3498db); flex: 0 0 auto; }
body .kpi-value { font-size: 20px; font-weight: 800; color: var(--primary, #2c3e50); display: block; }
body .kpi-label { font-size: 12px; color: var(--text-muted, #7f8c8d); text-transform: uppercase; letter-spacing: .04em; }

body .detail-list { display: flex; flex-direction: column; }
body .patient-item {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 10px 0; border-bottom: 1px solid var(--border-light, #eee);
}
body .patient-item:last-child { border-bottom: none; }

body .sub-section      { margin: 16px 0 16px 18px; }
body .section-subtitle { font-size: 13px; font-weight: 600; color: var(--text-muted, #7f8c8d); margin-bottom: 8px; }
body .sig-title        { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--text-muted, #7f8c8d); }

body .pagination-wrapper {
    display: flex; justify-content: space-between; align-items: center;
    gap: 12px; flex-wrap: wrap; margin-top: 16px;
}
body .pagination-info, body .a4-pagination { font-size: 12.5px; color: var(--text-muted, #7f8c8d); }

/* --- Étiquettes de statut de dispensation ------------------------- */
body .status-apreparer   { color: var(--warning, #f39c12); font-weight: 600; }
body .status-enprep      { color: var(--accent, #3498db);  font-weight: 600; }
body .status-preparees   { color: var(--indigo);           font-weight: 600; }
body .status-dispensees  { color: var(--success, #27ae60); font-weight: 600; }

/* --- Divers ------------------------------------------------------- */
body .checkbox   { display: inline-flex; align-items: center; gap: 8px; }
body .print-table { width: 100%; border-collapse: collapse; }
body .print-middleItem { text-align: center; vertical-align: middle; }