/*
 * Restyling pannello utente: riprende 1:1 i colori/font reali del forum fmsReVo
 * (campionati via CSS live da fmsrevo.it/forum il 2026-08-05).
 * File dedicato, usato solo da userpanel.php: nessun impatto su altre pagine.
 */

:root{
    --fr-nav: #053101;
    --fr-nav-hover: #14ca05;
    --fr-dark-bar: #2a3c3e;
    --fr-bg: #f4f6f5;
    --fr-footer-bg: #3d3e35;
    --fr-footer-text: #99a9b5;
    --fr-heading-font: 'Montserrat', 'Segoe UI', sans-serif;
    --fr-body-font: 'Source Sans Pro', 'Segoe UI', sans-serif;
}

html, body{
    height: auto;
}
body{
    font-family: var(--fr-body-font);
    /* l'header non e' piu' fixed: niente hack di padding-top da tenere allineato.
       pannelloutente.css imposta ancora margin-top/padding-top per il vecchio navbar
       fixed: li azzero qui, scoped a questa sola pagina. */
    margin-top: 0 !important;
    padding-top: 0 !important;
    /* layout "sticky footer" via grid: la riga sidebar+contenuto (3a riga)
       riempie esattamente lo spazio residuo tra header/hero e footer, che
       restano "auto" qualunque sia la loro altezza reale. Con flex+min-height
       il calcolo dello spazio libero risultava impreciso e il footer veniva
       spinto oltre il viewport, creando uno scroll inutile: con la grid le
       righe "auto" (header, hero, footer, ...) sono misurate per prime e la
       riga "1fr" ottiene esattamente cio' che resta, mai di piu' mai di meno. */
    min-height: 100vh;
    margin-bottom: 0 !important; /* custom.css ha un vecchio template "sticky footer" con body{margin-bottom:60px} */
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto 1fr;
}

/* custom.css (condiviso con tutto l'adminpanel) rende .footer position:absolute
   per un vecchio template mai rimosso: qui, scoped a questa pagina, lo riporto
   in flusso normale cosi' la riga "1fr" sopra puo' calcolare lo spazio giusto. */
#footer-nav.footer{
    position: static !important;
    bottom: auto !important;
    height: auto !important;
    background-color: var(--fr-footer-bg) !important;
}

.navbar.navbar-inverse.navbar-fixed-top{
    position: relative;
    top: auto; right: auto; left: auto;
    height: auto;
    margin-bottom: 0 !important; /* Bootstrap mette 20px di default su .navbar quando non e' piu' fixed */
    border: none;
    box-shadow: none;
    background-color: transparent;
    padding: 0;
}

/* --- Header: identico all'header pubblico del forum --- */
.fr-header-top{
    background-color: #ffffff;
    border-bottom: 1px solid #ececec;
}
.fr-header-top .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 81px;
}
/* Il clearfix di Bootstrap (.container::before/::after{content:" ";display:table})
   diventa, con display:flex, un paio di elementi flex fantasma che spezzano lo
   space-between in 4 parti invece che 2 (sintomo: logo e hamburger sembrano
   centrati invece che ai due estremi). Li disattivo solo qui. */
.fr-header-top .container::before,
.fr-header-top .container::after{
    content: none;
    display: none;
}
.fr-logo{
    display: block;
    line-height: 0;
}
.fr-logo img{
    height: 57px;
    width: 132px;
}
.fr-public-nav{
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fr-public-nav a{
    font-family: var(--fr-heading-font);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--fr-nav);
    text-decoration: none;
}
.fr-public-nav a:hover,
.fr-public-nav a:active{
    color: var(--fr-nav-hover);
}

/* Hamburger dei link pubblici: nascosto da desktop, mostrato solo sotto i 768px */
.fr-nav-toggle{
    display: none;
    border: none;
    background: transparent;
    color: var(--fr-nav);
    font-size: 20px;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

/* --- Hero: stessa struttura della home del forum (foto stadio + overlay + titolo) --- */
.fr-hero{
    position: relative;
    height: 260px;
    background: linear-gradient(rgba(7,26,19,0.45), rgba(7,26,19,0.45)),
                url('../img/forum_hero_stadium.jpg') center center / cover no-repeat;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px;
}
.fr-hero-icon{
    color: #fff;
    font-size: 46px;
    line-height: 1;
    margin-bottom: 16px;
    text-shadow: 0 2px 10px rgba(0,0,0,0.35);
}
.fr-hero h1{
    font-family: var(--fr-heading-font);
    font-weight: 300;
    font-size: 34px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 8px;
}
.fr-hero h1 b{
    font-weight: 800;
}
.fr-hero p{
    font-family: var(--fr-body-font);
    font-size: 15px;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

/* --- Layout a due colonne: sidebar sinistra + contenuto ---
   flex:1 sul body (vedi sopra) fa crescere questa riga fino a riempire lo
   spazio residuo del viewport; align-items:stretch (default) allunga la
   sidebar a coprire tutta quella riga, in modo identico su ogni pagina. */
.fr-body--with-sidebar{
    display: flex;
}
.fr-sidebar{
    flex: none;
    width: 240px;
    background-color: var(--fr-dark-bar);
}
.fr-content{
    flex: 1;
    min-width: 0;
    padding-bottom: 40px;
}

ul.fr-account-nav{
    list-style: none;
    margin: 0;
    padding: 18px 0;
    float: none !important;
    width: 100% !important;
}
ul.fr-account-nav > li{
    float: none !important;
    width: 100%;
}
ul.fr-account-nav li a{
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    box-sizing: border-box;
    font-family: var(--fr-heading-font);
    font-weight: 700;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.62);
    text-decoration: none;
    padding: 13px 24px;
    border-left: 3px solid transparent;
}
ul.fr-account-nav li a i{
    width: 16px;
    text-align: center;
    font-size: 13px;
}
ul.fr-account-nav li a:hover,
ul.fr-account-nav li a:focus,
ul.fr-account-nav li a:active{
    color: #fff !important;
    background-color: rgba(255,255,255,0.06) !important;
    text-decoration: none !important;
}
ul.fr-account-nav > li.active > a,
ul.fr-account-nav > li.active > a:hover,
ul.fr-account-nav > li.active > a:focus{
    background-color: rgba(20,202,5,0.12) !important;
    color: #fff !important;
    border-left-color: var(--fr-nav-hover);
}

@media (max-width: 767px){
    .fr-header-top .container{
        height: auto;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        padding-bottom: 12px;
    }
    .fr-nav-toggle{
        display: inline-flex;
    }
    /* Link pubblici collassati in tendina sotto la riga logo+hamburger */
    .fr-public-nav{
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        order: 3;
        margin-top: 12px;
        padding-top: 10px;
        border-top: 1px solid #ececec;
    }
    .fr-public-nav.fr-public-nav--open{
        display: flex;
    }
    .fr-public-nav li{
        width: 100%;
    }
    .fr-public-nav a{
        display: block;
        width: 100%;
        padding: 10px 2px;
    }
    .fr-hero{
        height: 132px;
        padding: 0 16px;
    }
    .fr-hero-icon{
        font-size: 30px;
        margin-bottom: 8px;
    }
    .fr-hero h1{
        font-size: 20px;
    }
    .fr-hero p{
        font-size: 12.5px;
    }

    /* Sidebar -> barra orizzontale scorrevole di pillole: sulle schermate strette,
       una colonna di 5 blocchi a piena larghezza spingeva il contenuto vero
       fuori dallo schermo. Una riga di icone scorrevole occupa ~60px invece
       di ~350px e resta comunque riconoscibile come la stessa identita' della
       sidebar desktop (stessi colori, stesso font). */
    .fr-body--with-sidebar{
        flex-direction: column;
    }
    .fr-sidebar{
        width: 100%;
    }
    ul.fr-account-nav{
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 10px 12px;
        gap: 8px;
    }
    ul.fr-account-nav::-webkit-scrollbar{
        display: none;
    }
    ul.fr-account-nav > li{
        width: auto;
        flex: none;
    }
    ul.fr-account-nav li a{
        flex-direction: column;
        gap: 4px;
        width: auto;
        padding: 9px 14px;
        border-left: none;
        border-radius: 8px;
        font-size: 10.5px;
        white-space: nowrap;
    }
    ul.fr-account-nav li a i{
        font-size: 15px;
    }
    ul.fr-account-nav > li.active > a{
        border-left-color: transparent;
    }
}

/* --- Un pizzico di colore sulle pagine interne (form + tabelle), stessa palette del forum ---
   Nota: il selettore e' generico (.fr-content h3) perche' le sottopagine non hanno
   classi dedicate sui titoli; il pannello di login ha un proprio h3 (.panel-title)
   escluso esplicitamente sotto per evitare testo scuro su sfondo scuro. */
.fr-content h1,
.fr-content h3:not(.panel-title){
    font-family: var(--fr-heading-font);
    color: var(--fr-dark-bar);
}
.fr-content h3:not(.panel-title){
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom: 2px solid var(--fr-nav-hover);
    padding-bottom: 8px;
    margin-bottom: 20px;
    display: inline-block;
}
.fr-content .form-horizontal .control-label{
    font-family: var(--fr-body-font);
    font-weight: 600;
    color: var(--fr-dark-bar);
}
.fr-content .form-control:focus{
    border-color: var(--fr-nav-hover);
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.05), 0 0 0 3px rgba(20,202,5,0.15);
}
.fr-content table.table thead{
    background-color: var(--fr-dark-bar);
}
.fr-content table.table thead th{
    color: #fff;
    font-family: var(--fr-heading-font);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border: none;
    vertical-align: middle;
}
.fr-content table.table-striped > tbody > tr:nth-of-type(odd){
    background-color: #f4f8f4;
}
.fr-content table.table-hover > tbody > tr:hover{
    background-color: #e9f5ea;
}
.fr-content .btn-primary{
    font-family: var(--fr-heading-font);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    background-color: var(--fr-nav-hover);
    border-color: #109f04;
}
.fr-content .btn-primary:hover,
.fr-content .btn-primary:focus{
    background-color: #109f04;
    border-color: #0c7d03;
}
/* --- Pagina di login/logout: un solo sfondo per tutta l'area (niente "giunture"),
   card centrata nello spazio residuo, niente logo doppio (quello nell'header
   basta gia'). --- */
.fr-body:not(.fr-body--with-sidebar){
    background: var(--fr-bg, #f4f6f5);
    display: flex;
}
.fr-body:not(.fr-body--with-sidebar) .fr-content{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}
/* Spaziatori invisibili in proporzione 1:2, cosi' la card si posiziona a 1/3
   dall'alto dello spazio libero invece che esattamente al centro, qualunque
   sia l'altezza del viewport. */
.fr-body:not(.fr-body--with-sidebar) .fr-content::before{
    content: '';
    flex: 1 1 0;
    min-height: 36px;
}
.fr-body:not(.fr-body--with-sidebar) .fr-content::after{
    content: '';
    flex: 2 1 0;
}
/* Logo "fantasma" duplicato: quello nell'header basta */
.fr-content .brand_logo{
    display: none;
}
/* "LOG OUT ESEGUITO." (userpanel_logout.php): badge invece di titolo isolato */
.fr-content .login > h3{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--fr-heading-font);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--fr-nav-hover);
    background: #eafbe8;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    margin: 0 0 22px;
}
.fr-content .login > h3 .fa{
    font-size: 13px;
}
.fr-content .login-panel.panel-default{
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(42,60,62,0.14);
    text-align: left;
}
.fr-content .login-panel .panel-heading{
    background-color: var(--fr-dark-bar);
    color: #fff;
    border: none;
    padding: 18px 20px;
}
.fr-content .login-panel .panel-title{
    font-family: var(--fr-heading-font);
    font-weight: 700;
    font-size: 14px;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}
.fr-content .login-panel .panel-body{
    padding: 26px 24px 24px;
}

/* --- Box di stato (alert, OTP...): stessa cornice/palette ovunque, non piu' "abbandonati" --- */
.fr-content .alert{
    border: none;
    border-left: 4px solid transparent;
    border-radius: 4px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    max-width: none !important; /* alcuni alert OTP hanno un max-width inline nel markup originale */
}
.fr-content .alert-danger{
    background-color: #fbeaea;
    border-left-color: #c0392b;
    color: #7a2419;
}
.fr-content .alert-warning{
    background-color: #fdf3e3;
    border-left-color: #d99a2b;
    color: #6b4c10;
}
.fr-content .alert-info{
    background-color: #eaf3fb;
    border-left-color: var(--fr-dark-bar);
    color: #1f3a44;
}
.fr-content .alert-success{
    background-color: #eaf7ea;
    border-left-color: var(--fr-nav-hover);
    color: #1c4d1c;
}
.fr-content #otp-section{
    background: #f6f8f6 !important;
    border: 1px solid #e1e8e1 !important;
    border-radius: 6px !important;
}
.fr-content .btn-warning{
    background-color: #d99a2b;
    border-color: #c1861e;
    font-family: var(--fr-heading-font);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.fr-content .btn-warning:hover,
.fr-content .btn-warning:focus{
    background-color: #c1861e;
    border-color: #a06f18;
}
.fr-content .btn-success{
    background-color: var(--fr-nav-hover);
    border-color: #109f04;
    font-family: var(--fr-heading-font);
    font-weight: 700;
    letter-spacing: 0.02em;
}
.fr-content .btn-success:hover,
.fr-content .btn-success:focus{
    background-color: #109f04;
    border-color: #0c7d03;
}
#otp-ok-block{
    color: #1c7a1c !important;
}

/* --- Footer: font reale caricato (i colori in footer.php sono gia' 1:1 col forum) --- */
#footer-nav, .footer-site-info, #footer-menu li a{
    font-family: var(--fr-body-font) !important;
}