/* ============================================================
   portail-bs5.css
   Styles maison pour le thème AdminLTE 4 / Bootstrap 5 :
   en-têtes de contenu, menu utilisateur, cartes colorées,
   et quelques classes héritées encore utilisées par les wucs.
   ============================================================ */

/* ----------- Listes de documents (wuc_documents, doc_edit) ----------- */
.doc-row {
    display: flex; align-items: center; gap: .75rem;
    padding: .55rem .25rem;
    border-bottom: 1px dashed #e9ecef;
}
.doc-row:last-child { border-bottom: 0; }
.doc-row .doc-title { font-weight: 600; color: #212529; }
.doc-row .doc-meta { font-size: .8rem; color: #6c757d; }
.doc-row .doc-icon { width: 28px; text-align: center; font-size: 1.25rem; }

.scroll-list { max-height: 480px; overflow-y: auto; }
.scroll-list::-webkit-scrollbar { width: 6px; }
.scroll-list::-webkit-scrollbar-thumb { background: #ced4da; border-radius: 3px; }

.upload-zone {
    border: 2px dashed #ced4da;
    border-radius: .5rem;
    padding: 1rem;
    background: #f8f9fa;
    transition: background .15s, border-color .15s;
}
.upload-zone:hover { background: #eef1f5; border-color: #0d6efd; }

/* ----------- ASP.NET disabled controls : harmoniser avec Bootstrap ----------- */
.btn.aspNetDisabled,
a.aspNetDisabled {
    opacity: .65;
    pointer-events: none;
    cursor: not-allowed;
}

/* ----------- En-tête de contenu (section content-header) ----------- */
.content-header {
    padding: 1rem 1rem .5rem;
}
.content-header h1 {
    font-size: 1.6rem;
    font-weight: 600;
    margin: 0;
    color: #37475a;
}
.content-header h1 small {
    font-size: 1rem;
    color: var(--bs-secondary-color);
}
.content {
    padding: 0 1rem 1.5rem;
}

/* ----------- En-tête de page (impression / pages autonomes) ----------- */
.page-header {
    margin: 0 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid #dee2e6;
    font-weight: 700;
}
.page-header > small { color: var(--bs-secondary-color); font-weight: 400; }

/* ----------- Menu utilisateur (navbar dropdown) ----------- */
.user-menu .user-image {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    margin-right: .4rem;
}
.dropdown-menu.dropdown-menu-lg { min-width: 16rem; }
.user-header {
    padding: 1rem;
    text-align: center;
}
.user-header img {
    width: 5rem;
    height: 5rem;
    object-fit: cover;
}
.user-header p { margin: .5rem 0 0; }
.user-footer {
    padding: .75rem 1rem;
    background: var(--bs-tertiary-bg);
}
.user-footer::after { content: ""; display: block; clear: both; }

/* ============================================================
   Cartes AdminLTE 4 — bordure supérieure colorée
   ============================================================ */
.card.card-outline.card-primary   { border-top: 3px solid #0d6efd; }
.card.card-outline.card-info      { border-top: 3px solid #0dcaf0; }
.card.card-outline.card-success   { border-top: 3px solid #198754; }
.card.card-outline.card-warning   { border-top: 3px solid #ffc107; }
.card.card-outline.card-danger    { border-top: 3px solid #dc3545; }
.card.card-outline.card-secondary { border-top: 3px solid #6c757d; }
.card-outline .card-title { color: #37475a; font-weight: 700; font-size: 1rem; }
.card-tools { margin-left: auto; }

/* ----------- Petites classes utilitaires héritées ----------- */
.icon-red { color: #dc3545; }
.text-red { color: #dc3545 !important; }
.bold { font-weight: 700; }

/* ----------- Boutons "application" (AdminLTE btn-app) ----------- */
.btn-app {
    border-radius: .375rem;
    position: relative;
    padding: 15px 5px;
    margin: 0 0 10px 10px;
    min-width: 80px;
    height: 60px;
    text-align: center;
    color: #555;
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
    font-size: .75rem;
}
.btn-app > .fa,
.btn-app > .fas,
.btn-app > .far,
.btn-app > .bi { font-size: 1.25rem; display: block; }
.btn-app.bg-primary,
.btn-app.bg-success,
.btn-app.bg-danger,
.btn-app.bg-warning,
.btn-app.bg-info { color: #fff; border: 0; }

/* ----------- Encart profil utilisateur ----------- */
.profile-username { font-size: 1.3rem; margin-top: .35rem; }

/* ----------- Widget utilisateur (AdminLTE widget-user-2) ----------- */
.widget-user-2 .widget-user-header {
    padding: 1rem;
    border-top-left-radius: .5rem;
    border-top-right-radius: .5rem;
}
.widget-user-2 .widget-user-header,
.widget-user-2 .widget-user-header a { color: #fff; }
.widget-user-2 .widget-user-username {
    margin: 5px 0 0 75px;
    font-size: 1.5rem;
    font-weight: 300;
}
.widget-user-2 .widget-user-desc { margin: 0 0 0 75px; }
.widget-user-2 .widget-user-image { float: left; }
.widget-user-2 .widget-user-image > img {
    width: 65px;
    height: auto;
}

/* ----------- list-group sans bordures latérales ----------- */
.list-group-unbordered > .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
}

/* ============================================================
   Fiche "Nouveau jeu" — atelier deux colonnes
   ============================================================ */
.newgame-form { position: sticky; top: 1rem; }

.newgame-section {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #6c757d;
    font-weight: 700;
    margin: 1.25rem 0 .6rem;
}
.newgame-section:first-child { margin-top: 0; }

.scenario-tile {
    cursor: pointer;
    border: 2px solid transparent;
    transition: transform .15s, box-shadow .15s, border-color .15s;
    height: 100%;
}
.scenario-tile:hover {
    border-color: #9ec5fe;
    transform: translateY(-2px);
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .08);
}
.scenario-tile.selected { border-color: #0d6efd; }
.scenario-tile .pick-badge { display: none; }
.scenario-tile.selected .pick-badge { display: inline-flex; }

/* ============================================================
   Fiche "Édition d'un jeu" — tuiles d'information
   ============================================================ */
.fact {
    padding: .5rem .75rem;
    background: #f8f9fa;
    border: 1px solid #eceef0;
    border-radius: .4rem;
    height: 100%;
}
.fact .lbl {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6c757d;
    font-weight: 700;
}
.fact .val { font-weight: 600; color: #37475a; }

/* ----------- Page de connexion (sobre & moderne, sans image de fond) ----------- */
.login-page {
    min-height: 100vh;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    color: #212529;
    /* Dégradé léger reprenant les teintes du logo : bleu Strat&Logic -> neutre -> rouge-orangé */
    background: linear-gradient(135deg, #e8f3fb 0%, #f5f7fa 50%, #fdede8 100%);
}
.login-page .login-box {
    width: 400px;
    max-width: 100%;
}
.login-page .login-logo {
    text-align: center;
    margin-bottom: 1.25rem;
}
.login-page .login-logo img {
    max-width: 200px;
}
.login-page .card {
    border: none;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 1.5rem 3rem rgba(33, 37, 41, .12);
}
/* fine barre d'accent en haut de la carte, aux couleurs du logo (bleu -> rouge) */
.login-page .card::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, #1c9ad6 0%, #1c9ad6 45%, #e4411f 100%);
}
.login-page .login-card-body {
    padding: 2rem 2rem 1.5rem;
}
.login-page .login-box-msg {
    color: #6c757d;
    font-weight: 600;
    text-align: center;
    margin-bottom: 1.25rem;
}
.login-page .input-group-text {
    background: #fff;
    color: #6c757d;
}
.login-page .form-control,
.login-page .form-select {
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.login-page .btn-primary {
    padding-top: .6rem;
    padding-bottom: .6rem;
    font-weight: 600;
}
.login-page .login-card-body a:not(.btn) {
    color: var(--bs-primary, #0d6efd);
    text-decoration: none;
}
.login-page .login-card-body a:not(.btn):hover {
    text-decoration: underline;
}

/* ===========================================================================
   Tableau de suivi des jeux (wuc_suivi_board, pages/suivi.aspx)
   Partagé entre l'écran de l'administrateur et la page d'un invité : les deux
   montrent exactement la même mosaïque, seules les actions diffèrent.
   =========================================================================== */
.sv-board { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .75rem; }

.sv-tile { background: #fff; border: 1px solid #e3e8e6; border-left: 4px solid #adb5bd; border-radius: 8px;
           padding: .6rem .7rem; display: block; color: inherit; text-decoration: none;
           transition: box-shadow .12s, transform .12s; }
.sv-tile:hover { box-shadow: 0 2px 10px rgba(16,45,40,.13); transform: translateY(-1px); color: inherit; }
.sv-tile.sel { outline: 2px solid #0d6efd; }
.sv-tile.pret { border-left-color: #1a7f37; }
.sv-tile.encours { border-left-color: #0d6efd; }
.sv-tile.erreur { border-left-color: #b26a00; }
.sv-tile.attente { border-left-color: #c1121f; }
.sv-tile.fige { border-left-color: #6c757d; opacity: .7; }
.sv-tile.ko { border-left-color: #6c757d; background: #f8f9fa; }

.sv-h { display: flex; align-items: baseline; gap: .4rem; }
.sv-lib { font-weight: 700; font-size: .95rem; letter-spacing: .02em; }
.sv-nom { font-size: .78rem; color: #6c757d; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.sv-cy { font-size: .7rem; color: #0f766e; background: #e7f2f0; border-radius: 4px; padding: 0 .35rem; font-weight: 600; }

.sv-teams { display: flex; gap: 3px; margin: .5rem 0 .35rem; overflow: visible; }
.sv-t { flex: 1; height: 26px; border-radius: 4px; display: flex; align-items: center; justify-content: center;
        font-size: .7rem; font-weight: 700; color: #fff; position: relative; }
.sv-t.v { background: #1a7f37; }
.sv-t.s { background: #e0a800; }
.sv-t.r { background: #c1121f; }
.sv-t.x { background: #adb5bd; }

/* Décision en erreur : deux marques plutôt qu'une. L'anneau se voit de loin sur
   un vidéoprojecteur, le « ! » se lit de près et survit au noir et blanc. */
.sv-t.err { box-shadow: inset 0 0 0 3px #b26a00; }
.sv-t.err::after { content: '!'; position: absolute; top: -7px; right: -5px; font-size: .68rem; font-weight: 700;
                   background: #b26a00; color: #fff; border-radius: 50%; width: 15px; height: 15px;
                   line-height: 15px; text-align: center; border: 1.5px solid #fff; }

.sv-f { display: flex; justify-content: space-between; font-size: .73rem; color: #6c757d; }
.sv-f .cnt { font-weight: 700; color: #12332e; }

.sv-kpi { background: #fff; border: 1px solid #e3e8e6; border-radius: 8px; padding: .55rem .8rem; }
.sv-kpi .v { font-size: 1.35rem; font-weight: 700; line-height: 1.1; }
.sv-kpi .l { font-size: .74rem; color: #6c757d; }

.sv-legend span { font-size: .78rem; color: #6c757d; margin-right: 1rem; }
.sv-legend i.box { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: .25rem; vertical-align: -1px; }
.sv-pulse { animation: svpulse 1.6s ease-in-out infinite; }
@keyframes svpulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }