/* ============================================
   BROWSER CHECK — stile UI banner + overlay
   Caricato da: Header.jsp (post-login) + Login.jsp (pre-login)
   Logica gestita da: web/js/browsercheck.js
   ============================================
   Due elementi UI:
   - #browser-warning-banner: soft warning dismissibile (es. Firefox moderno)
   - #browser-block-overlay: blocco hard full-screen (browser non supportati)
   Entrambi nascosti di default (display: none). Vengono mostrati e popolati
   da browsercheck.js in base alla detection.
   ============================================ */

/* Browser warning banner — soft warning per browser obsoleti.
   Mostrato/nascosto da js/browsercheck.js. Default: nascosto.
   padding-left 176px = 160px sidebar (.mainContainer di urano.css)
   + 16px inner — cosi' il contenuto del banner non finisce coperto
   dal menu laterale fixed.
   NOTA: il padding-left 176px e' coerente con Header.jsp che e' incluso
   dopo Menu.jsp. Su Login.jsp NON c'e' Menu, quindi il banner si vede
   sempre per intero (il padding-left in piu' e' innocuo: spazio bianco
   sulla sinistra che non disturba). */
#browser-warning-banner {
    display: none;
    width: 100%;
    box-sizing: border-box;
    background: #fff8e1;
    border-bottom: 2px solid #ffc107;
    padding: 10px 16px 10px 176px;
    color: #5d4e00;
    font-size: 13px;
    line-height: 1.4;
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
    align-items: center;
    gap: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
#browser-warning-banner .bw-icon {
    flex-shrink: 0;
    color: #ff9800;
    font-size: 18px;
}
#browser-warning-banner .bw-text { flex: 1; }
#browser-warning-banner .bw-text b { font-weight: 600; }
#browser-warning-banner .bw-dismiss {
    flex-shrink: 0;
    background: transparent;
    border: none;
    font-size: 22px;
    line-height: 1;
    color: #5d4e00;
    cursor: pointer;
    padding: 0 6px;
    opacity: 0.65;
}
#browser-warning-banner .bw-dismiss:hover { opacity: 1; }

/* Browser block overlay — full-screen senza escape.
   Mostrato/popolato da js/browsercheck.js per browser non
   supportati (IE, Edge Legacy, Brave, Vivaldi, Opera, Chromium
   puro, versioni sotto soglia). z-index molto alto per coprire
   tutto, incluso il menu laterale. Sfondo grigio scuro semi-
   trasparente (stesso modello Bootstrap modal): la card bianca
   risalta come pop-up e attira lo sguardo. */
#browser-block-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.6);
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
#browser-block-overlay .bb-card {
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.12);
    padding: 36px 32px;
    max-width: 520px;
    width: 100%;
    text-align: center;
}
#browser-block-overlay .bb-icon {
    font-size: 56px;
    color: #ff9800;
    margin-bottom: 16px;
}
#browser-block-overlay .bb-title {
    font-size: 22px;
    font-weight: 700;
    color: #2d3748;
    margin: 0 0 16px 0;
}
#browser-block-overlay .bb-text {
    font-size: 14px;
    line-height: 1.5;
    color: #555;
    margin: 0 0 12px 0;
}
#browser-block-overlay .bb-text-small {
    font-size: 13px;
    color: #777;
    margin-top: 18px;
}
#browser-block-overlay .bb-list {
    text-align: left;
    display: inline-block;
    padding: 0 0 0 20px;
    margin: 12px 0 18px 0;
    color: #2d3748;
    font-size: 14px;
    line-height: 1.8;
}
#browser-block-overlay .bb-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 20px;
}
#browser-block-overlay .bb-btn {
    background: #689F00;
    color: #fff !important;
    text-decoration: none;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    transition: background 0.15s;
}
#browser-block-overlay .bb-btn:hover {
    background: #5a8a00;
}
/* Bottone secondario (es. "Chiudi e torna al Login"): trasparente
   con bordo verde, hover si riempie. Visivamente meno "primario"
   rispetto ai due Scarica. */
#browser-block-overlay .bb-btn-secondary {
    background: transparent;
    color: #689F00 !important;
    border: 1px solid #689F00;
    padding: 9px 22px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    margin-top: 18px;
    display: inline-block;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}
#browser-block-overlay .bb-btn-secondary:hover {
    background: #689F00;
    color: #fff !important;
}
/* Box contatti assistenza sotto i bottoni */
#browser-block-overlay .bb-help {
    border-top: 1px solid #e8e8e8;
    margin-top: 22px;
    padding-top: 16px;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}
#browser-block-overlay .bb-help b { color: #2d3748; }
#browser-block-overlay .bb-help a {
    color: #689F00;
    text-decoration: none;
}
#browser-block-overlay .bb-help a:hover { text-decoration: underline; }
/* Step lista numerata "come fare" */
#browser-block-overlay .bb-steps {
    text-align: left;
    margin: 4px 0 18px 0;
    padding: 12px 16px 12px 36px;
    background: #f7faf3;
    border-radius: 6px;
    color: #2d3748;
    font-size: 13px;
    line-height: 1.7;
}
#browser-block-overlay .bb-steps-title {
    font-weight: 700;
    font-size: 14px;
    color: #2d3748;
    margin: 18px 0 6px 0;
    text-align: left;
}

/* ============================================
   VARIANTE "ACCESSO NON CONSENTITO" (mockup Massimo 20/05/2026)
   Solo per renderUnsupported (browser non compatibile). renderOutdated
   continua a usare il layout single-column originale.
   Card piu' larga + niente icona warning + titolo con linea divisoria
   sotto + intro centrata + 2 colonne (Supportati / Non supportati) +
   callout box su OS + bottoni a 2 livelli + footer assistenza inline.
   ============================================ */
#browser-block-overlay .bb-card--wide {
    max-width: 720px;
    padding: 32px 36px 28px 36px;
}
/* Titolo del nuovo layout: testo CENTRATO nella card con icona warning
   inline a sinistra del testo (stessa riga, parte integrante del titolo).
   Linea divisoria sotto. Richiesta Barbara/Massimo 20/05. */
#browser-block-overlay .bb-card--wide .bb-title {
    text-align: center;
    margin: 0 0 18px 0;
    padding-bottom: 14px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 24px;
    font-weight: 700;
    color: #2d3748;
    line-height: 1.3;
}
#browser-block-overlay .bb-card--wide .bb-title .bb-title-icon {
    color: #f39c12;
    margin-right: 12px;
    font-size: 0.95em;
    vertical-align: middle;
}
#browser-block-overlay .bb-card--wide .bb-text-intro {
    text-align: center;
    margin: 0 0 20px 0;
    font-size: 14px;
    line-height: 1.6;
    color: #2d3748;
}
#browser-block-overlay .bb-card--wide .bb-brand {
    color: #689F00;
    font-weight: 700;
}

/* Layout 2 colonne Supportati / Non supportati */
#browser-block-overlay .bb-cols {
    display: flex;
    gap: 36px;
    margin: 20px 0 22px 0;
    text-align: left;
}
#browser-block-overlay .bb-col {
    flex: 1;
    min-width: 0;
}
#browser-block-overlay .bb-col-title {
    font-size: 17px;
    font-weight: 700;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 14px;
}
#browser-block-overlay .bb-col-title-yes { color: #689F00; }
#browser-block-overlay .bb-col-title-no { color: #2d3748; }
#browser-block-overlay .bb-col-list {
    padding-left: 22px;
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #2d3748;
    list-style: disc;
}
#browser-block-overlay .bb-col-list li::marker { color: #689F00; }
#browser-block-overlay .bb-col-list li { margin-bottom: 4px; }

/* Callout box su sistema operativo */
#browser-block-overlay .bb-callout {
    background: #f5f5f5;
    border-radius: 6px;
    padding: 14px 18px;
    margin: 0 0 22px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #555;
    text-align: center;
}

/* Bottone outline (Scarica Edge: bianco con bordo verde) */
#browser-block-overlay .bb-btn-outline {
    background: #fff;
    color: #689F00 !important;
    border: 1px solid #689F00;
    text-decoration: none;
    padding: 11px 24px;
    border-radius: 6px;
    font-weight: 600;
    font-size: 14px;
    display: inline-block;
    transition: background 0.15s, color 0.15s;
    flex: 1;
    text-align: center;
}
#browser-block-overlay .bb-btn-outline:hover {
    background: #689F00;
    color: #fff !important;
}

/* Adattamento .bb-btn quando affiancato a .bb-btn-outline (mockup):
   entrambi a meta' larghezza */
#browser-block-overlay .bb-card--wide .bb-buttons {
    gap: 14px;
    margin: 0 0 12px 0;
}
#browser-block-overlay .bb-card--wide .bb-btn {
    flex: 1;
    padding: 11px 24px;
}

/* Bottone neutro (Chiudi e torna al Login: bianco bordo grigio, full-width) */
#browser-block-overlay .bb-btn-neutral {
    background: #fff;
    color: #2d3748 !important;
    border: 1px solid #d0d0d0;
    padding: 10px 22px;
    border-radius: 6px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    display: block;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    text-decoration: none;
    text-align: center;
}
#browser-block-overlay .bb-btn-neutral:hover {
    background: #f7f7f7;
    border-color: #b0b0b0;
}

/* Footer assistenza inline su una riga */
#browser-block-overlay .bb-footer-help {
    border-top: 1px solid #e0e0e0;
    margin-top: 22px;
    padding-top: 14px;
    text-align: center;
    font-size: 13px;
    color: #666;
}
#browser-block-overlay .bb-footer-help a {
    color: #689F00;
    text-decoration: none;
}
#browser-block-overlay .bb-footer-help a:hover { text-decoration: underline; }

/* Su schermi stretti: 2 colonne diventano 1 colonna */
@media (max-width: 600px) {
    #browser-block-overlay .bb-cols { flex-direction: column; gap: 18px; }
    #browser-block-overlay .bb-card--wide .bb-buttons { flex-direction: column; }
}