/* =============================================================================
   style.css
   Styles globaux de l'application Moniteur
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Variables CSS — couleurs et dimensions
   ----------------------------------------------------------------------------- */

:root {
    /* Couleurs principales */
    --couleur-fond          : #0a0a0a;
    --couleur-fond-carte    : #1a1a1a;
    --couleur-fond-sidebar  : #111111;
    --couleur-header        : #1a3a5c;
    --couleur-texte         : #ffffff;
    --couleur-texte-discret : #888888;
    --couleur-accent        : #f0a500;
    --couleur-bordure       : #2a2a2a;

    /* Couleurs de statut */
    --couleur-excellent  : #2ecc71;
    --couleur-bon        : #3498db;
    --couleur-acceptable : #f39c12;
    --couleur-lent       : #e67e22;
    --couleur-critique   : #e74c3c;

    /* Dimensions */
    --largeur-sidebar : 220px;
    --hauteur-header  : 64px;
    --rayon-bordure   : 6px;
}

/* -----------------------------------------------------------------------------
   Reset et base
   ----------------------------------------------------------------------------- */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

body {
    background-color : var(--couleur-fond);
    color            : var(--couleur-texte);
    font-family      : -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size        : 15px;
    line-height      : 1.5;
}

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

a:hover {
    color : var(--couleur-accent);
}

/* -----------------------------------------------------------------------------
   Page login
   ----------------------------------------------------------------------------- */

.page-login {
    display         : flex;
    justify-content : center;
    align-items     : center;
    min-height      : 100vh;
}

.login-container {
    width      : 100%;
    max-width  : 360px;
    padding    : 40px;
    background : var(--couleur-fond-carte);
    border     : 1px solid var(--couleur-bordure);
    border-radius : var(--rayon-bordure);
    text-align : center;
}

.login-logo {
    width         : 56px;
    height        : 56px;
    margin        : 0 auto 20px;
}

.login-logo img {
    width  : 100%;
    height : 100%;
    object-fit : contain;
}

.login-container h1 {
    font-size     : 22px;
    margin-bottom : 32px;
    font-weight   : 300;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.login-erreur {
    background    : rgba(231, 76, 60, 0.15);
    border        : 1px solid var(--couleur-critique);
    border-radius : var(--rayon-bordure);
    padding       : 10px 16px;
    margin-bottom : 20px;
    font-size     : 14px;
    color         : var(--couleur-critique);
}

/* -----------------------------------------------------------------------------
   Formulaires
   ----------------------------------------------------------------------------- */

.champ {
    margin-bottom : 16px;
    text-align    : left;
}

.champ label {
    display       : block;
    margin-bottom : 6px;
    font-size     : 13px;
    color         : var(--couleur-texte-discret);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.champ input,
.champ select,
.champ textarea {
    width         : 100%;
    padding       : 10px 14px;
    background    : var(--couleur-fond);
    border        : 1px solid var(--couleur-bordure);
    border-radius : var(--rayon-bordure);
    color         : var(--couleur-texte);
    font-size     : 15px;
    transition    : border-color 0.2s;
}

.champ input:focus,
.champ select:focus,
.champ textarea:focus {
    outline      : none;
    border-color : var(--couleur-accent);
}

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

button,
.bouton {
    display          : inline-block;
    padding          : 10px 20px;
    background       : var(--couleur-header);
    color            : var(--couleur-texte);
    border           : none;
    border-radius    : var(--rayon-bordure);
    font-size        : 14px;
    cursor           : pointer;
    transition       : opacity 0.2s;
    text-transform   : uppercase;
    letter-spacing   : 1px;
}

button:hover,
.bouton:hover {
    opacity : 0.85;
}

button.bouton-danger {
    background : var(--couleur-critique);
}

/* -----------------------------------------------------------------------------
   Layout principal (header + sidebar + contenu)
   ----------------------------------------------------------------------------- */

.app-header {
    position         : fixed;
    top              : 0;
    left             : 0;
    right            : 0;
    height           : var(--hauteur-header);
    background       : var(--couleur-header);
    display          : flex;
    align-items      : center;
    justify-content  : space-between;
    padding          : 0 24px;
    z-index          : 100;
}

.app-header .logo {
    width         : 36px;
    height        : 36px;
    background    : rgba(255,255,255,0.15);
    border-radius : var(--rayon-bordure);
    display       : flex;
    align-items   : center;
    justify-content: center;
    font-weight   : bold;
    font-size     : 18px;
}

.app-sidebar {
    position   : fixed;
    top        : var(--hauteur-header);
    left       : 0;
    bottom     : 0;
    width      : var(--largeur-sidebar);
    background : var(--couleur-fond-sidebar);
    padding    : 32px 0;
    overflow-y : auto;
}

.app-contenu {
    margin-top  : var(--hauteur-header);
    margin-left : var(--largeur-sidebar);
    padding     : 40px;
    min-height  : calc(100vh - var(--hauteur-header));
}

/* -----------------------------------------------------------------------------
   Navigation sidebar
   ----------------------------------------------------------------------------- */

.nav-section {
    padding       : 0 24px;
    margin-bottom : 8px;
}

.nav-separateur {
    border       : none;
    border-top   : 1px solid var(--couleur-bordure);
    margin       : 16px 24px;
}

.nav-lien {
    display        : block;
    padding        : 8px 24px;
    font-size      : 12px;
    letter-spacing : 1.5px;
    text-transform : uppercase;
    color          : var(--couleur-texte-discret);
    transition     : color 0.2s;
}

.nav-lien:hover {
    color : var(--couleur-texte);
}

.nav-lien.actif {
    color : var(--couleur-texte);
}

.nav-lien.futur {
    opacity : 0.35;
    cursor  : default;
    pointer-events : none;
}

/* -----------------------------------------------------------------------------
   Liste des sites
   ----------------------------------------------------------------------------- */

.sites-liste {
    list-style : none;
    margin-top : 24px;
}

.site-ligne {
    display         : flex;
    align-items     : center;
    padding         : 14px 20px;
    margin-bottom   : 4px;
    background      : var(--couleur-fond-carte);
    border-radius   : var(--rayon-bordure);
    cursor          : pointer;
    transition      : background 0.2s;
}

.site-ligne:hover {
    background : #222222;
}

.site-indicateur {
    width         : 10px;
    height        : 10px;
    border-radius : 50%;
    margin-right  : 14px;
    flex-shrink   : 0;
}

.site-indicateur.en-ligne   { background : var(--couleur-excellent); }
.site-indicateur.hors-ligne { background : var(--couleur-critique); }
.site-indicateur.inconnu    { background : var(--couleur-texte-discret); }

.formulaire-ajout {
    margin-top : 3em;
}
.formulaire-ajout h2 {
    margin-bottom : 24px;
}
.formulaire-ajout form .champ {
    display      : flex;
    align-items  : center;
}
.formulaire-ajout form label {
    flex-shrink  : 0;
    width        : 110px;
}

/* -----------------------------------------------------------------------------
   Statistiques (moyenne / min / max)
   ----------------------------------------------------------------------------- */

.courbe-conteneur {
    margin-bottom : 2em;
}

.stats-bloc {
    display   : flex;
    gap       : 3em;
    margin-top: 1em;
}

.stats-bloc-uptimerobot {
    margin-top: 2em;
}

.stat-item {
    display        : flex;
    flex-direction : column;
    gap            : 4px;
}

.stat-item .stat-label {
    font-size      : 12px;
    text-transform : uppercase;
    letter-spacing : 1px;
    color          : var(--couleur-texte-discret);
}

.stat-item .stat-valeur {
    font-size   : 28px;
    font-weight : bold;
}

.dates-filtre {
    margin-bottom : 24px;
}

.stat-item:not(:last-child) {
    padding-right : 3em;
    border-right  : 1px solid var(--couleur-texte-discret);
}

.tableau-incidents {
    margin-top : 2em;
}
.tableau-incidents th,
.tableau-incidents td {
    padding-right : 2em;
    text-align    : left;
}

/* -----------------------------------------------------------------------------
   Commentaire automatique
   ----------------------------------------------------------------------------- */

.commentaire-bloc {
    margin-top    : 32px;
    padding       : 20px;
    background    : var(--couleur-fond-carte);
    border-radius : var(--rayon-bordure);
    border-left   : 3px solid var(--couleur-accent);
}

.commentaire-bloc .commentaire-titre {
    font-size      : 11px;
    text-transform : uppercase;
    letter-spacing : 1.5px;
    color          : var(--couleur-texte-discret);
    margin-bottom  : 8px;
}

.disponibilite-bloc {
    margin-top : 3em;
}

/* -----------------------------------------------------------------------------
   Sélecteur de dates
   ----------------------------------------------------------------------------- */

.dates-filtre {
    display     : flex;
    align-items : center;
    gap         : 12px;
    margin-top  : 24px;
}

.dates-filtre label {
    font-size      : 12px;
    text-transform : uppercase;
    letter-spacing : 1px;
    color          : var(--couleur-texte-discret);
}

.dates-filtre input[type="date"] {
    padding       : 8px 12px;
    background    : var(--couleur-fond-carte);
    border        : 1px solid var(--couleur-bordure);
    border-radius : var(--rayon-bordure);
    color         : var(--couleur-texte);
    font-size     : 14px;
}

.dates-filtre input[type="date"]:focus {
    outline      : none;
    border-color : var(--couleur-accent);
}

/* -----------------------------------------------------------------------------
   Spinner — indicateur de chargement
   ----------------------------------------------------------------------------- */

.spinner {
    display       : inline-block;
    width         : 16px;
    height        : 16px;
    border        : 2px solid var(--couleur-bordure);
    border-top    : 2px solid var(--couleur-accent);
    border-radius : 50%;
    animation     : rotation 0.8s linear infinite;
    margin-right  : 10px;
    vertical-align: middle;
}

@keyframes rotation {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.section-test-immediat {
    border        : 1px solid var(--couleur-bordure);
    border-radius : 5px;
    padding       : 1em;
    margin        : 2em 0;
}
.section-test-immediat .bouton {
    margin-top : 1em;
}

/* -----------------------------------------------------------------------------
   Bouton hamburger — visible uniquement sur mobile
   ----------------------------------------------------------------------------- */

.bouton-hamburger {
    display          : none;
    flex-direction   : column;
    justify-content  : space-between;
    width            : 24px;
    height           : 18px;
    background       : none;
    border           : none;
    cursor           : pointer;
    padding          : 0;
    letter-spacing   : 0;
    text-transform   : none;
}

.bouton-hamburger span {
    display          : block;
    width            : 100%;
    height           : 2px;
    background       : var(--couleur-texte);
    border-radius    : 2px;
    transition       : opacity 0.2s;
}

.bouton-hamburger:hover {
    opacity : 1;
}

/* Overlay sombre derrière la sidebar ouverte sur mobile */
.sidebar-overlay {
    display          : none;
    position         : fixed;
    top              : var(--hauteur-header);
    left             : 0;
    right            : 0;
    bottom           : 0;
    background       : rgba(0, 0, 0, 0.6);
    z-index          : 90;
}

.sidebar-overlay.visible {
    display : block;
}

/* =============================================================================
   RESPONSIVE — Mobile (< 768px)
   ============================================================================= */

@media (max-width: 768px) {

    /* -------------------------------------------------------------------------
       Header
       ------------------------------------------------------------------------- */

    .app-header {
        padding : 0 16px;
    }

    /* On masque le bouton "Se déconnecter" sur mobile pour gagner de la place
       L'utilisateur peut se déconnecter depuis la sidebar */
    .app-header .bouton-deconnexion {
        display : none;
    }

    /* Le bouton hamburger devient visible */
    .bouton-hamburger {
        display : flex;
    }

    /* -------------------------------------------------------------------------
       Sidebar — masquée par défaut, glisse depuis la gauche à l'ouverture
       ------------------------------------------------------------------------- */

    .app-sidebar {
        transform  : translateX(-100%);
        transition : transform 0.3s ease;
        z-index    : 95;
        width      : 260px;
    }

    /* Classe ajoutée par JS quand le hamburger est cliqué */
    .app-sidebar.ouverte {
        transform : translateX(0);
    }

    /* -------------------------------------------------------------------------
       Contenu — prend toute la largeur
       ------------------------------------------------------------------------- */

    .app-contenu {
        margin-left : 0;
        padding     : 20px 16px;
    }

    /* -------------------------------------------------------------------------
       Statistiques — empilées en colonne
       ------------------------------------------------------------------------- */

    .stats-bloc {
        flex-direction : column;
        gap            : 16px;
    }

    /* On supprime les séparateurs verticaux entre les stats */
    .stat-item:not(:last-child) {
        padding-right : 0;
        border-right  : none;
        padding-bottom: 16px;
        border-bottom : 1px solid var(--couleur-bordure);
    }

    /* Taille des chiffres réduite sur mobile */
    .stat-item .stat-valeur {
        font-size : 22px;
    }

    /* -------------------------------------------------------------------------
       Sélecteur de dates — en colonne
       ------------------------------------------------------------------------- */

    .dates-filtre {
        flex-wrap  : wrap;
        gap        : 8px;
    }

    .dates-filtre input[type="date"] {
        width : 100%;
    }

    /* -------------------------------------------------------------------------
       Formulaire d'ajout — label au-dessus du champ
       ------------------------------------------------------------------------- */

    .formulaire-ajout form .champ {
        flex-direction : column;
        align-items    : flex-start;
    }

    .formulaire-ajout form label {
        width         : auto;
        margin-bottom : 6px;
    }

    /* -------------------------------------------------------------------------
       Titre de page
       ------------------------------------------------------------------------- */

    h1 {
        font-size : 22px;
    }

    h2 {
        font-size : 16px;
    }

}

/* =============================================================================
   THÈME CLAIR
   ============================================================================= */

/* Variables du thème clair — appliquées quand body a la classe .theme-clair */
body.theme-clair {
    --couleur-fond          : #f5f5f5;
    --couleur-fond-carte    : #ffffff;
    --couleur-fond-sidebar  : #eeeeee;
    --couleur-header        : #1a3a5c;
    --couleur-texte         : #1a1a1a;
    --couleur-texte-discret : #666666;
    --couleur-accent        : #f0a500;
    --couleur-bordure       : #dddddd;
}

/* En thème clair les liens de la sidebar ont besoin d'un ajustement */
body.theme-clair .nav-lien {
    color : #444444;
}

body.theme-clair .nav-lien:hover,
body.theme-clair .nav-lien.actif {
    color : #1a1a1a;
}

body.theme-clair .nav-lien.futur {
    color : #999999;
}

/* Champs de formulaire en thème clair */
body.theme-clair .champ input,
body.theme-clair .champ select,
body.theme-clair .champ textarea {
    background : #f5f5f5;
    color      : #1a1a1a;
}

/* Dates filtre en thème clair */
body.theme-clair .dates-filtre input[type="date"] {
    background : #ffffff;
    color      : #1a1a1a;
}

/* Site ligne en thème clair */
body.theme-clair .site-ligne:hover {
    background : #f0f0f0;
}

body.theme-clair button,
body.theme-clair .bouton {
    color : #ffffff;
}

body.theme-auto button,
body.theme-auto .bouton {
    color : #ffffff;
}

/* =============================================================================
   THÈME AUTOMATIQUE — suit le système d'exploitation
   ============================================================================= */

/* Appliqué uniquement si body a la classe .theme-auto */
@media (prefers-color-scheme: light) {
    body.theme-auto {
        --couleur-fond          : #f5f5f5;
        --couleur-fond-carte    : #ffffff;
        --couleur-fond-sidebar  : #eeeeee;
        --couleur-header        : #1a3a5c;
        --couleur-texte         : #1a1a1a;
        --couleur-texte-discret : #666666;
        --couleur-accent        : #f0a500;
        --couleur-bordure       : #dddddd;
    }

    body.theme-auto .nav-lien {
        color : #444444;
    }

    body.theme-auto .nav-lien:hover,
    body.theme-auto .nav-lien.actif {
        color : #1a1a1a;
    }

    body.theme-auto .nav-lien.futur {
        color : #999999;
    }

    body.theme-auto .champ input,
    body.theme-auto .champ select,
    body.theme-auto .champ textarea {
        background : #f5f5f5;
        color      : #1a1a1a;
    }

    body.theme-auto .dates-filtre input[type="date"] {
        background : #ffffff;
        color      : #1a1a1a;
    }

    body.theme-auto .site-ligne:hover {
        background : #f0f0f0;
    }
}