/* ============================================================
   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;
}