/* =============================================================
   APP.CSS — Intranet AMSS13
   Thème du site public (bleu nuit / doré), dans l'esprit de la page
   de connexion : barre latérale sombre, contenu clair, cartes
   arrondies, boutons et champs aux couleurs de l'association.
   ============================================================= */

:root {
    --amss-navy:   #041229;
    --amss-navy-2: #08182b;
    --amss-navy-3: #0b2347;
    --amss-gold:   #ffd79a;
    --amss-gold-2: #d9b878;   /* doré plus soutenu : bordures, focus */
    --amss-bg:     #f4f6f9;
    --amss-navbar: 67px;      /* hauteur de la barre du haut (barre latérale collante) */

    /* Coins plus doux pour tous les composants Bootstrap */
    --bs-border-radius:    0.6rem;
    --bs-border-radius-sm: 0.45rem;
    --bs-border-radius-lg: 1rem;
}

html, body {
    display:        flex;
    flex-direction: column;
    min-height:     100vh;
    margin:         0;
    padding:        0;
    background:     var(--amss-bg);
}

/* -------------------------------------------------------------
   NAVBAR
   ------------------------------------------------------------- */

.custom-navbar {
    background:
        radial-gradient(ellipse at 15% 0%, rgba(255, 215, 154, 0.10), transparent 55%),
        linear-gradient(180deg, var(--amss-navy) 0%, var(--amss-navy-2) 100%);
    border-bottom: 1px solid rgba(255, 215, 154, 0.22);
    padding-top:   8px;
    padding-bottom:8px;
    z-index:       1030;
}

.custom-navbar .navbar-brand {
    color:       #fff;
    font-weight: 600;
}

.custom-navbar .navbar-brand img {
    display: block;
}

.custom-navbar .dropdown-toggle::after {
    color: #fff;
}

/* -------------------------------------------------------------
   SHELL (navbar + sidebar + contenu)
   ------------------------------------------------------------- */

.app-shell {
    flex: 1 1 auto;
    align-items: stretch;
}

.app-main {
    min-width: 0;
}

/* -------------------------------------------------------------
   SIDEBAR (sombre, comme la page de connexion)
   ------------------------------------------------------------- */

#appSidebar {
    --bs-offcanvas-width: 270px;
    /* !important : sur ordinateur, Bootstrap rend .offcanvas-lg transparent */
    background-color: var(--amss-navy-2) !important;
    border-right:     1px solid rgba(255, 255, 255, 0.06);
    color:            #fff;
}

#appSidebar .offcanvas-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

#appSidebar .offcanvas-body {
    overflow-y: auto;
}

/* Sur ordinateur, la barre latérale garde sa largeur (sans cela, une page au
   contenu large la rétrécit) et son menu reste visible quand on fait défiler. */
@media (min-width: 992px) {
    #appSidebar {
        flex:  0 0 260px;
        width: 260px;
    }

    #appSidebar .offcanvas-body {
        position:   sticky;
        top:        var(--amss-navbar);
        max-height: calc(100vh - var(--amss-navbar));
    }
}

.sidebar-section-title {
    font-size:      0.7rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color:          rgba(255, 255, 255, 0.45);
    margin:         1rem 0 0.4rem 0.75rem;
}

#appSidebar .nav-link {
    color:         rgba(255, 255, 255, 0.82);
    border-radius: 0.6rem;
    padding:       0.55rem 0.75rem;
    font-weight:   500;
    transition:    background 0.15s, color 0.15s;
}

#appSidebar .nav-link:hover,
#appSidebar .nav-link:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    color:      #fff;
}

#appSidebar .nav-link.active {
    background: rgba(255, 215, 154, 0.14);
    color:      var(--amss-gold);
    box-shadow: inset 3px 0 0 var(--amss-gold);
}

#appSidebar .nav-link .text-muted {
    color: rgba(255, 255, 255, 0.4) !important;
}

#appSidebar .border-top {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

#appSidebar .nav-link.text-danger {
    color: #ff9b9b !important;
}

#appSidebar .nav-link.text-danger:hover {
    background: rgba(255, 120, 120, 0.12);
}

/* -------------------------------------------------------------
   COMPOSANTS AUX COULEURS DE L'ASSOCIATION
   ------------------------------------------------------------- */

/* Titres de page : barre dorée, comme les titres de section du site public */
.app-main h1.h3 {
    display:     flex;
    align-items: center;
    gap:         0.65rem;
    color:       var(--amss-navy);
}

.app-main h1.h3::before {
    content:       "";
    flex:          0 0 5px;
    height:        1.15em;
    border-radius: 3px;
    background:    var(--amss-gold);
}

.section-title {
    font-size:      0.75rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:          #8a93a6;
    margin:         0 0 0.75rem;
}

.btn-primary {
    --bs-btn-color:               var(--amss-gold);
    --bs-btn-bg:                  var(--amss-navy);
    --bs-btn-border-color:        var(--amss-navy);
    --bs-btn-hover-color:         #fff;
    --bs-btn-hover-bg:            var(--amss-navy-3);
    --bs-btn-hover-border-color:  var(--amss-navy-3);
    --bs-btn-active-color:        #fff;
    --bs-btn-active-bg:           var(--amss-navy-3);
    --bs-btn-active-border-color: var(--amss-navy-3);
    --bs-btn-disabled-color:      var(--amss-gold);
    --bs-btn-disabled-bg:         var(--amss-navy);
    --bs-btn-disabled-border-color: var(--amss-navy);
    --bs-btn-focus-shadow-rgb:    255, 215, 154;
    font-weight: 600;
}

.btn-outline-primary {
    --bs-btn-color:               var(--amss-navy);
    --bs-btn-border-color:        var(--amss-navy);
    --bs-btn-hover-color:         var(--amss-gold);
    --bs-btn-hover-bg:            var(--amss-navy);
    --bs-btn-hover-border-color:  var(--amss-navy);
    --bs-btn-active-color:        var(--amss-gold);
    --bs-btn-active-bg:           var(--amss-navy);
    --bs-btn-active-border-color: var(--amss-navy);
    --bs-btn-focus-shadow-rgb:    4, 18, 41;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--amss-gold-2);
    box-shadow:   0 0 0 0.25rem rgba(255, 215, 154, 0.45);
}

.form-check-input:checked {
    background-color: var(--amss-navy);
    border-color:     var(--amss-navy);
}

.input-group-text {
    background: var(--amss-bg);
    color:      #5a6472;
}

.card {
    --bs-card-border-radius:       1rem;
    --bs-card-inner-border-radius: calc(1rem - 1px);
}

.app-main .card.shadow-sm {
    box-shadow: 0 2px 16px rgba(4, 18, 41, 0.06) !important;
}

/* Les coins arrondis s'appliquent aussi aux tableaux posés dans une carte */
.card:has(> .table-responsive) {
    overflow: hidden;
}

/* Carte de formulaire : liseré doré comme la carte de connexion */
.card-accent {
    border-top: 4px solid var(--amss-gold) !important;
}

.app-main .table {
    --bs-table-hover-bg: #faf6ec;
}

.app-main .table > thead.table-light > tr > th {
    --bs-table-bg:   #f6f7fa;
    color:           #5a6472;
    font-size:       0.74rem;
    font-weight:     700;
    text-transform:  uppercase;
    letter-spacing:  0.04em;
    padding-top:     0.85rem;
    padding-bottom:  0.85rem;
}

.app-main .table > :not(caption) > * > :first-child {
    padding-left: 1.25rem;
}

.app-main .table > :not(caption) > * > :last-child {
    padding-right: 1.25rem;
}

.app-main .badge.text-bg-dark {
    background-color: var(--amss-navy) !important;
    color:            var(--amss-gold) !important;
}

/* -------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------- */

footer.footer {
    background: var(--amss-navy-2);
    color:      rgba(255, 255, 255, 0.75);
    width:      100%;
    border-top: 1px solid rgba(255, 215, 154, 0.18);
    font-size:  0.9rem;
}

.footer-link {
    color:           #fff;
    text-decoration: none;
}

.footer-link:hover {
    color:           var(--amss-gold);
    text-decoration: underline;
}

/* -------------------------------------------------------------
   PAGE DE CONNEXION
   ------------------------------------------------------------- */

.login-wrap {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1.5rem;
    padding:         2rem 1rem;
    /* Bleu nuit sur toute la hauteur, léger halo doré en haut */
    background:
        radial-gradient(ellipse at 50% 0%, rgba(255, 215, 154, 0.14), transparent 60%),
        linear-gradient(180deg, var(--amss-navy) 0%, var(--amss-navy-2) 100%);
}

.login-card {
    max-width:  420px;
    width:      100%;
    border:     0;
    border-top: 4px solid var(--amss-gold);
}

.login-back {
    color:           rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size:       0.9rem;
}

.login-back:hover,
.login-back:focus-visible {
    color:           var(--amss-gold);
    text-decoration: underline;
}

/* -------------------------------------------------------------
   TABLEAU DE BORD
   ------------------------------------------------------------- */

.dashboard-hero {
    position:      relative;
    overflow:      hidden;
    padding:       2rem;
    border-radius: 1rem;
    color:         #fff;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(255, 215, 154, 0.18), transparent 60%),
        linear-gradient(135deg, var(--amss-navy) 0%, var(--amss-navy-3) 100%);
    box-shadow:    0 10px 30px rgba(4, 18, 41, 0.18);
}

/* Logo en filigrane */
.dashboard-hero::after {
    content:    "";
    position:   absolute;
    right:      -30px;
    bottom:     -50px;
    width:      220px;
    height:     220px;
    background: url('/assets/img/logo_amss.png') center / contain no-repeat;
    opacity:    0.08;
}

.dashboard-hero-date {
    color:       var(--amss-gold);
    font-size:   0.85rem;
    font-weight: 600;
}

.dashboard-hero-title {
    font-size:   clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    margin:      0 0 0.35rem;
}

.dashboard-hero-sub {
    color: rgba(255, 255, 255, 0.75);
}

.dashboard-hero .badge-role {
    background: rgba(255, 215, 154, 0.16);
    color:      var(--amss-gold);
    border:     1px solid rgba(255, 215, 154, 0.35);
    font-weight: 600;
}

.quick-tile {
    display:         flex;
    align-items:     center;
    gap:             1rem;
    height:          100%;
    padding:         1.1rem 1.25rem;
    background:      #fff;
    border-radius:   1rem;
    box-shadow:      0 2px 16px rgba(4, 18, 41, 0.06);
    color:           var(--amss-navy);
    text-decoration: none;
    transition:      transform 0.15s ease, box-shadow 0.15s ease;
}

.quick-tile:hover,
.quick-tile:focus-visible {
    color:      var(--amss-navy);
    transform:  translateY(-3px);
    box-shadow: 0 10px 26px rgba(4, 18, 41, 0.12);
}

.quick-tile-icon {
    flex:            0 0 48px;
    height:          48px;
    border-radius:   0.85rem;
    background:      var(--amss-navy);
    color:           var(--amss-gold);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.35rem;
}

.quick-tile-title {
    font-weight: 600;
    line-height: 1.25;
}

.quick-tile-desc {
    font-size: 0.82rem;
    color:     #6c757d;
}

.quick-tile-external {
    margin-left: auto;
    color:       #adb5bd;
}

/* -------------------------------------------------------------
   TUILES KPI (admin)
   ------------------------------------------------------------- */

/* !important : les cartes ont la classe border-0 (bordure en !important) */
.stat-card {
    border-left: 4px solid var(--amss-gold) !important;
}

.stat-card .stat-icon {
    flex:            0 0 44px;
    height:          44px;
    border-radius:   0.75rem;
    background:      var(--amss-navy);
    color:           var(--amss-gold);
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       1.25rem;
}

.stat-card .stat-value {
    font-size:   1.8rem;
    font-weight: 700;
    line-height: 1.15;
    color:       var(--amss-navy);
}

.stat-card .stat-label {
    color:          #6c757d;
    font-size:      0.74rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stat-card.stat-disabled {
    border-left-color: #cfd4dc !important;
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    .quick-tile { transition: none; }
    .quick-tile:hover { transform: none; }
}

/* -------------------------------------------------------------
   GALERIE PHOTOS (admin)
   ------------------------------------------------------------- */

.gallery-drop {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             0.35rem;
    padding:         2rem 1rem;
    border:          2px dashed #cfd4dc;
    border-radius:   0.75rem;
    background:      #f8f9fb;
    text-align:      center;
    cursor:          pointer;
    transition:      border-color 0.15s, background 0.15s;
}

.gallery-drop i {
    font-size: 2.2rem;
    color:     var(--amss-navy);
}

.gallery-drop:hover,
.gallery-drop.is-over,
.gallery-drop:focus-within {
    border-color: var(--amss-gold-2);
    background:   #fffaf0;
}

.gallery-admin-thumb {
    position:      relative;
    display:       block;
    aspect-ratio:  4 / 3;
    overflow:      hidden;
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0;
    background:    #e9ecef;
}

.gallery-admin-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.gallery-admin-thumb .badge {
    position: absolute;
    top:      0.5rem;
    left:     0.5rem;
}