/* =========================================================================
 * USP DESIGN SYSTEM
 * Charte graphique de l'Université de San-Pedro
 * Couleurs extraites du logo officiel : bleu USP + vert laurier
 * ---
 * Charger ce fichier APRÈS adminlte.min.css dans tous les base templates :
 *   <link rel="stylesheet" href="{% static 'css/usp_design_system.css' %}">
 * ========================================================================= */

:root {
    /* ===== COULEURS PRIMAIRES (logo) ===== */
    --usp-primary:        #0090C0;   /* Bleu USP — bateau + texte logo */
    --usp-primary-dark:   #006B91;   /* Hover, états actifs */
    --usp-primary-darker: #004D6D;   /* Headers, navbars sombres */
    --usp-primary-light:  #4DB3D9;   /* Liens, accents */
    --usp-primary-pale:   #E1F2F8;   /* Backgrounds, surlignages */

    /* ===== COULEURS SECONDAIRES (vert laurier) ===== */
    --usp-accent:         #007830;   /* Vert USP — laurier */
    --usp-accent-dark:    #005C24;   /* Hover */
    --usp-accent-light:   #4DA871;   /* Variantes claires */
    --usp-accent-pale:    #DDF0E3;   /* Backgrounds success */

    /* ===== ÉTATS SÉMANTIQUES ===== */
    --usp-success:        #28A745;
    --usp-success-dark:   #1E7E34;
    --usp-success-pale:   #D4EDDA;

    --usp-warning:        #F39C12;
    --usp-warning-dark:   #C97D03;
    --usp-warning-pale:   #FFF3CD;

    --usp-danger:         #C0392B;
    --usp-danger-dark:    #962D22;
    --usp-danger-pale:    #F8D7DA;

    --usp-info:           #17A2B8;
    --usp-info-dark:      #117A8B;
    --usp-info-pale:      #D1ECF1;

    /* ===== NEUTRES (échelle de gris) ===== */
    --usp-gray-50:        #F8F9FA;   /* backgrounds très clairs */
    --usp-gray-100:       #F1F3F5;
    --usp-gray-200:       #E9ECEF;
    --usp-gray-300:       #DEE2E6;
    --usp-gray-400:       #CED4DA;
    --usp-gray-500:       #ADB5BD;
    --usp-gray-600:       #868E96;
    --usp-gray-700:       #495057;   /* texte secondaire */
    --usp-gray-800:       #343A40;   /* texte principal */
    --usp-gray-900:       #212529;   /* texte fort */

    --usp-white:          #FFFFFF;
    --usp-black:          #000000;

    /* ===== TYPOGRAPHIE ===== */
    --usp-font-sans:      'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --usp-font-serif:     Georgia, 'Times New Roman', serif;
    --usp-font-mono:      'SFMono-Regular', Menlo, Monaco, Consolas, monospace;

    --usp-fs-xs:          11px;
    --usp-fs-sm:          12px;
    --usp-fs-base:        14px;
    --usp-fs-md:          15px;
    --usp-fs-lg:          16px;
    --usp-fs-xl:          18px;
    --usp-fs-2xl:         22px;
    --usp-fs-3xl:         28px;
    --usp-fs-4xl:         34px;

    --usp-fw-normal:      400;
    --usp-fw-medium:      500;
    --usp-fw-semibold:    600;
    --usp-fw-bold:        700;

    --usp-lh-tight:       1.2;
    --usp-lh-normal:      1.5;
    --usp-lh-relaxed:     1.7;

    /* ===== SPACING (grille 4/8) ===== */
    --usp-space-0:        0;
    --usp-space-1:        4px;
    --usp-space-2:        8px;
    --usp-space-3:        12px;
    --usp-space-4:        16px;
    --usp-space-5:        20px;
    --usp-space-6:        24px;
    --usp-space-8:        32px;
    --usp-space-10:       40px;
    --usp-space-12:       48px;
    --usp-space-16:       64px;

    /* ===== BORDURES ===== */
    --usp-border-color:   var(--usp-gray-300);
    --usp-border-width:   1px;
    --usp-radius-sm:      3px;
    --usp-radius:         6px;
    --usp-radius-md:      8px;
    --usp-radius-lg:      12px;
    --usp-radius-pill:    999px;

    /* ===== OMBRES ===== */
    --usp-shadow-xs:      0 1px 2px rgba(0,0,0,0.04);
    --usp-shadow-sm:      0 1px 3px rgba(0,0,0,0.08);
    --usp-shadow:         0 2px 6px rgba(0,0,0,0.10);
    --usp-shadow-md:      0 4px 10px rgba(0,0,0,0.14);
    --usp-shadow-lg:      0 8px 20px rgba(0,0,0,0.16);
    --usp-shadow-focus:   0 0 0 3px rgba(0, 144, 192, 0.20);  /* focus ring bleu USP */

    /* ===== TRANSITIONS ===== */
    --usp-transition-fast:    0.15s ease;
    --usp-transition:         0.2s ease;
    --usp-transition-slow:    0.3s ease;

    /* ===== Z-INDEX ===== */
    --usp-z-dropdown:     1000;
    --usp-z-sticky:       1020;
    --usp-z-fixed:        1030;
    --usp-z-modal:        1050;
    --usp-z-popover:      1060;
    --usp-z-tooltip:      1070;
}

/* =========================================================================
 * OVERRIDES BOOTSTRAP/ADMINLTE pour aligner avec la palette USP
 * ========================================================================= */

/* Boutons primaires */
.btn-primary {
    background-color: var(--usp-primary) !important;
    border-color: var(--usp-primary) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--usp-primary-dark) !important;
    border-color: var(--usp-primary-dark) !important;
}
.btn-outline-primary {
    color: var(--usp-primary) !important;
    border-color: var(--usp-primary) !important;
}
.btn-outline-primary:hover {
    background-color: var(--usp-primary) !important;
    color: #fff !important;
}

/* Boutons success */
.btn-success {
    background-color: var(--usp-success) !important;
    border-color: var(--usp-success) !important;
}
.btn-success:hover, .btn-success:focus {
    background-color: var(--usp-success-dark) !important;
    border-color: var(--usp-success-dark) !important;
}

/* Sidebar dark primary — fond plus profond pour cohérence USP */
.sidebar-dark-primary {
    background-color: var(--usp-primary-darker) !important;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
    background-color: var(--usp-primary) !important;
    color: #fff !important;
}
.sidebar-dark-primary .brand-link {
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Liens */
a {
    color: var(--usp-primary);
    transition: color var(--usp-transition-fast);
}
a:hover {
    color: var(--usp-primary-dark);
}

/* Badges — alignement palette */
.badge-primary { background-color: var(--usp-primary) !important; }
.badge-success { background-color: var(--usp-success) !important; }
.badge-warning { background-color: var(--usp-warning) !important; }
.badge-danger  { background-color: var(--usp-danger) !important; }
.badge-info    { background-color: var(--usp-info) !important; }

/* Card-header bg-primary */
.card-header.bg-primary {
    background-color: var(--usp-primary) !important;
}

/* Alert variants — bordure gauche colorée */
.alert {
    border-left-width: 4px;
    border-left-style: solid;
}
.alert-primary    { border-left-color: var(--usp-primary); }
.alert-success    { border-left-color: var(--usp-success); }
.alert-warning    { border-left-color: var(--usp-warning); }
.alert-danger     { border-left-color: var(--usp-danger); }
.alert-info       { border-left-color: var(--usp-info); }
.alert-secondary  { border-left-color: var(--usp-gray-500); }

/* Forms — focus bleu USP */
.form-control:focus,
.custom-select:focus {
    border-color: var(--usp-primary) !important;
    box-shadow: var(--usp-shadow-focus) !important;
}

/* =========================================================================
 * CLASSES UTILITAIRES USP
 * ========================================================================= */

/* Texte couleurs */
.usp-text-primary { color: var(--usp-primary) !important; }
.usp-text-accent  { color: var(--usp-accent) !important; }
.usp-text-muted   { color: var(--usp-gray-600) !important; }

/* Backgrounds */
.usp-bg-primary       { background-color: var(--usp-primary) !important; color: #fff; }
.usp-bg-primary-pale  { background-color: var(--usp-primary-pale) !important; }
.usp-bg-accent        { background-color: var(--usp-accent) !important; color: #fff; }
.usp-bg-accent-pale   { background-color: var(--usp-accent-pale) !important; }

/* Bandeau profil compact (utilisé dg_ufr/parts/infos.html) */
.usp-profile-bar {
    background: var(--usp-gray-50);
    border-left: 4px solid var(--usp-primary);
    border-radius: var(--usp-radius);
    padding: var(--usp-space-3) var(--usp-space-4);
    margin-bottom: var(--usp-space-3);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.usp-profile-bar .name {
    font-weight: var(--usp-fw-semibold);
    color: var(--usp-gray-800);
}
.usp-profile-bar .meta {
    color: var(--usp-gray-600);
    font-size: var(--usp-fs-sm);
}

/* Section header (titre + actions à droite) */
.usp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: var(--usp-space-4) 0 var(--usp-space-3) 0;
    padding-bottom: var(--usp-space-2);
    border-bottom: 1px solid var(--usp-border-color);
}
.usp-section-header h4,
.usp-section-header h5 {
    margin: 0;
    color: var(--usp-gray-800);
    font-weight: var(--usp-fw-semibold);
}

/* Mini-stat-card (utilisée dashboard DR UFR) */
.usp-mini-stat {
    background: var(--usp-white);
    border: 1px solid var(--usp-border-color);
    border-left: 4px solid var(--usp-primary-light);
    border-radius: var(--usp-radius);
    padding: var(--usp-space-3) var(--usp-space-4);
    margin-bottom: var(--usp-space-3);
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none;
    color: var(--usp-gray-800);
    transition: all var(--usp-transition-fast);
    box-shadow: var(--usp-shadow-xs);
}
.usp-mini-stat:hover {
    background: var(--usp-primary-pale);
    color: var(--usp-gray-800);
    text-decoration: none;
    box-shadow: var(--usp-shadow);
    transform: translateY(-1px);
}
.usp-mini-stat .label {
    font-size: var(--usp-fs-xs);
    color: var(--usp-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--usp-space-1);
}
.usp-mini-stat .value {
    font-size: var(--usp-fs-2xl);
    font-weight: var(--usp-fw-bold);
    line-height: 1;
}
.usp-mini-stat .icon {
    font-size: 26px;
    opacity: 0.45;
    color: var(--usp-primary-light);
}

/* KPI card (compacte, colorée — pour pages d'accueil) */
.usp-kpi-card {
    border-radius: var(--usp-radius);
    padding: var(--usp-space-4);
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--usp-white);
    text-decoration: none;
    transition: all var(--usp-transition-fast);
    box-shadow: var(--usp-shadow-sm);
    margin-bottom: var(--usp-space-3);
}
.usp-kpi-card:hover {
    color: var(--usp-white);
    text-decoration: none;
    box-shadow: var(--usp-shadow-md);
    transform: translateY(-2px);
}
.usp-kpi-card .kpi-value {
    font-size: var(--usp-fs-3xl);
    font-weight: var(--usp-fw-bold);
    line-height: 1;
}
.usp-kpi-card .kpi-label {
    font-size: var(--usp-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.95;
    margin-top: var(--usp-space-1);
}
.usp-kpi-card .kpi-icon {
    font-size: 28px;
    opacity: 0.45;
}
/* Variantes couleurs */
.usp-kpi-card.kpi-primary { background: var(--usp-primary); }
.usp-kpi-card.kpi-success { background: var(--usp-success); }
.usp-kpi-card.kpi-warning { background: var(--usp-warning); }
.usp-kpi-card.kpi-danger  { background: var(--usp-danger); }
.usp-kpi-card.kpi-info      { background: var(--usp-info); }
.usp-kpi-card.kpi-accent    { background: var(--usp-accent); }
.usp-kpi-card.kpi-secondary { background: var(--usp-gray-600); }
.usp-kpi-card.kpi-dark      { background: var(--usp-gray-800); }

/* Bouton de déconnexion (utilisé sidebar DR UFR) */
.usp-logout-btn {
    margin-top: var(--usp-space-3);
    border-top: 1px solid #4f5962;
    padding-top: var(--usp-space-2);
}
.usp-logout-btn .nav-link {
    background-color: rgba(220,53,69,0.15) !important;
    border-radius: var(--usp-radius-sm);
    margin: var(--usp-space-1) var(--usp-space-2);
}
.usp-logout-btn .nav-link p {
    color: var(--usp-danger) !important;
    font-weight: var(--usp-fw-semibold);
}
.usp-logout-btn .nav-link i {
    color: var(--usp-danger) !important;
}

/* Sidebar nav-header (sections groupes) */
.sidebar-dark-primary .nav-header {
    color: rgba(255,255,255,0.5) !important;
    font-size: var(--usp-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: var(--usp-fw-semibold);
    padding: var(--usp-space-3) var(--usp-space-4) var(--usp-space-1) !important;
}

/* Tableau strié plus doux */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--usp-gray-50);
}

/* Card amélioré */
.card {
    border: 1px solid var(--usp-border-color);
    border-radius: var(--usp-radius);
    box-shadow: var(--usp-shadow-xs);
}
.card-header {
    background-color: var(--usp-white);
    border-bottom: 1px solid var(--usp-border-color);
    font-weight: var(--usp-fw-medium);
}

/* =========================================================================
 * UTILITAIRES SPACING
 * ========================================================================= */
.usp-mt-1 { margin-top: var(--usp-space-1); }
.usp-mt-2 { margin-top: var(--usp-space-2); }
.usp-mt-3 { margin-top: var(--usp-space-3); }
.usp-mt-4 { margin-top: var(--usp-space-4); }
.usp-mt-6 { margin-top: var(--usp-space-6); }
.usp-mt-8 { margin-top: var(--usp-space-8); }
.usp-mb-1 { margin-bottom: var(--usp-space-1); }
.usp-mb-2 { margin-bottom: var(--usp-space-2); }
.usp-mb-3 { margin-bottom: var(--usp-space-3); }
.usp-mb-4 { margin-bottom: var(--usp-space-4); }
.usp-mb-6 { margin-bottom: var(--usp-space-6); }

/* Print : enlever ombres + couleurs riches */
@media print {
    .usp-mini-stat, .usp-kpi-card, .card { box-shadow: none !important; }
    a { color: var(--usp-gray-800); text-decoration: underline; }
}