/* ==========================================================================
   ESCAPE LAB - DEFINITIVE CSS (VERSIONE FIX BORDINI E BOTTONI CARD)
   ========================================================================== */

:root {
    --lab-arancio: #b33a04;
    --lab-arancio-vivo: #d34805;
    --lab-nero-perla: #0D1117;
    --lab-crema: #ffd8c7;
    --white: #ffffff;
    --lab-marrone-deep: #2C0D0C;

    --cassiopeia-color-primary: var(--lab-arancio);
    --cassiopeia-color-hover: var(--lab-arancio-vivo);
    --cassiopeia-color-link: var(--lab-crema);
    --body-bg: var(--lab-arancio);
}

body.site {
    font-family: "Roboto", sans-serif;
    font-weight: 500 !important;
    background-color: var(--lab-arancio) !important;
    color: var(--white) !important;
    overflow-x: hidden;
}

/* 1. HEADER */
header.header, .container-header, .navbar {
    background-color: var(--lab-nero-perla) !important;
    background-image: none !important;
    border-bottom: 2px solid var(--lab-arancio-vivo);
}

/* 2. CARDS E MODULI (Bordo 2px come hai chiesto) */
.card, .module {
    background-color: var(--lab-nero-perla) !important;
    border: 2px solid var(--lab-nero-perla) !important;
}

.card-header, .card-body {
    background-color: var(--lab-marrone-deep) !important;
    color: var(--white) !important;
    border: 1px solid var(--lab-nero-perla) !important;
}

.card a, .module a {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
}

/* 3. BOTTONI DENTRO LE CARD (TUTTI NERO PERLA) */
/* Questa regola forza il Nero Perla su OGNI bottone che sta dentro una card */
.card .btn, 
.card button, 
.module .btn,
.plg_system_webauthn_login_button,
.btn-primary.w-100 {
    background-color: var(--lab-nero-perla) !important;
    color: var(--white) !important;
    border: 1px solid var(--white) !important;
    font-weight: 700 !important;
}

/* Fix per il link Informativa Privacy e campi obbligatori */
a.required, 
.required label, 
.required {
    color: var(--white) !important;
    font-weight: 700 !important;
    text-decoration: underline; /* Opzionale: la sottolineatura aiuta a capire che è un link */
}

a.required:hover {
    color: var(--lab-crema) !important;
    text-shadow: 0 0 5px var(--lab-arancio-vivo);
}

/* 4. ELEMENTI DI SUPPORTO NERO PERLA (Paginazione, Input-group, Top) */
.input-group-text, 
.input-group-test,
.btn-secondary, 
.previous, 
.next, 
.back-to-top-link, 
.back-to-top-link.visible { 
    background-color: var(--lab-nero-perla) !important;
    color: var(--white) !important;
    border: 1px solid var(--white) !important;
}

/* 5. ICONE E SVG - BIANCO BRILLANTE */
.icon-register, .icon-user, .icon-fw, .input-password-toggle, [class^="icon-"], 
#Passkey, #icon-passkey circle, #icon-passkey path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* 6. TESTI BIANCO BRILLANTE */
.article-info-term, .hits, .published, .category-name {
    color: #ffffff !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}

/* 7. BOTTONI FUORI DALLE CARD (MARRONI) */
/* Solo se NON sono dentro una card diventano marroni */
body:not(.card):not(.module) .btn-primary:not(.card .btn) {
    background-color: var(--lab-marrone-deep) !important;
    border: 1px solid var(--white) !important;
    color: var(--white) !important;
}

/* Toggle password arancio vivo per contrasto tecnico */
.input-password-toggle {
    background-color: var(--lab-arancio-vivo) !important;
}

/* 8. FIX STRUTTURA */
img { max-width: 100% !important; height: auto !important; }
.site-grid, main, .container-component { background-color: transparent !important; }

/* LINK PER MODIFICA TESTO "REGISTERED O AUTHOR" */
.icons .float-end a {
    color: #ffffff !important; /* Forza il testo e l'icona in bianco */
    text-decoration: none;     /* Toglie l'eventuale sottolineatura */
}

.icons .float-end a .icon-edit {
    color: #ffffff !important; /* Forza l'icona se ha regole specifiche */
}

/* ==========================================================================
   BLOCCO 4: JOOMLA ALERTS (WEB COMPONENTS)
   ========================================================================== */

/* Il contenitore principale dell'alert */
joomla-alert, 
.alert-warning, 
.alert-message {
    background-color: var(--lab-nero-perla) !important;
    color: var(--white) !important;
    border: 2px solid var(--lab-arancio-vivo) !important; /* Bordo Arancio per il Warning */
    border-radius: 0 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    padding: 15px !important;
    margin: 20px 0 !important;
    display: block;
}

/* L'intestazione dell'alert (Attenzione) */
joomla-alert .alert-heading, 
.alert-heading .visually-hidden {
    color: var(--lab-arancio-vivo) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    visibility: visible !important; /* Forza la visibilità se Joomla prova a nasconderlo */
    width: auto !important;
    height: auto !important;
}

/* Il bottone di chiusura (la "X") */
.joomla-alert--close, 
button.joomla-alert--close {
    background: transparent !important;
    color: var(--white) !important;
    border: none !important;
    font-size: 1.5rem !important;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.joomla-alert--close:hover {
    opacity: 1;
    color: var(--lab-arancio-vivo) !important;
}

/* Icona Warning (se presente) */
span.warning {
    color: var(--lab-arancio-vivo) !important;
}

/* ==========================================================================
   BLOCCO 6: LOGICAL-ARTS CAPTCHA (STILE LAB)
   ========================================================================== */

/* Il contenitore principale */
#captcha-box.captcha-box {
    background-color: var(--lab-marrone-deep);
    border: 2px solid var(--lab-nero-perla);
    border-radius: 4px;
    padding: 15px;
    margin: 20px 0;
    max-width: 350px; /* Lo teniamo compatto */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

/* L'intestazione "CAPTCHA" */
.captcha-hdr {
    color: var(--lab-arancio-vivo);
    font-family: 'Syne', sans-serif; /* Se stai usando il font del Lab */
    font-weight: 800;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(255, 102, 0, 0.2);
    padding-bottom: 5px;
}

/* L'area con l'immagine e l'input */
.captcha-txt {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

/* L'immagine del calcolo (la rendiamo più leggibile) */
.captcha-txt img {
    filter: invert(1) brightness(1.5); /* Se l'immagine è scura, questo la rende chiara su fondo scuro */
    border-radius: 3px;
    border: 1px solid var(--lab-nero-perla);
}

/* La label "Type result" */
.captcha-txt label {
    color: var(--lab-crema) !important;
    font-size: 0.9rem;
    font-weight: 400;
}

/* Il campo dove si scrive il risultato */
.captcha-txt-input {
    background-color: var(--lab-nero-perla) !important;
    border: 1px solid var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
    font-weight: bold;
    text-align: center;
    width: 80px !important; /* Non serve largo per un numero */
    padding: 5px !important;
    transition: all 0.3s ease;
}

.captcha-txt-input:focus {
    box-shadow: 0 0 8px var(--lab-arancio-vivo);
    outline: none;
}

/* --- RESET COLORE CARD NEWS FEED --- */

/* Forza lo sfondo nero perla su tutto il contenitore del feed */
.feed_classe_personalizzata, 
.feed_classe_personalizzata .newsfeed,
.feed_classe_personalizzata > div {
    background-color: #1a1a1a !important;
    border: 1px solid #003300 !important;
    color: #00ff41 !important;
}

/* Colpisce i titoli e i singoli blocchi del feed */
.feed_classe_personalizzata .newsfeed-category,
.feed_classe_personalizzata .newsfeed-item,
.feed_classe_personalizzata fieldset {
    background-color: #1a1a1a !important;
    color: #00ff41 !important;
    border: none !important;
}

/* Colore dei testi descrittivi che attualmente vedi bianchi o grigi */
.feed_classe_personalizzata p, 
.feed_classe_personalizzata .feed-item-description {
    color: #00ff41 !important;
    background: transparent !important;
}

/* Header interno alla card (quello dove leggi DEBIAN BITS NEWS) */
.feed_classe_personalizzata h3, 
.feed_classe_personalizzata .page-header {
    background-color: #121212 !important; /* Un nero ancora più profondo per staccare */
    color: #00ff41 !important;
    padding: 10px !important;
    border: 1px solid #003300 !important;
}

/* Sistema i link per lo stile Matrix */
.feed_classe_personalizzata a {
    color: #00ff41 !important;
    font-weight: bold;
}

.feed_classe_personalizzata a:hover {
    background-color: #00ff41 !important;
    color: #1a1a1a !important;
}

.lab-online-user:hover {
    color: var(--lab-crema) !important;
    text-shadow: 0 0 5px var(--lab-arancio-vivo);
}

/* ==========================================================================
   BLOCCO 3: FORUM (KUNENA) - STILE LABORATORIO COMPLETO (UPDATED)
   Include: Categorie, Discussioni, Profili, Tabelle, Tab e Paginazione
   ========================================================================== */

/* 1. CONTENITORE E STRUTTURA GENERALE */
#kunena.kunena, .kcontainer, .kfrontend, .tab-pane {
    background-color: transparent !important;
    border: none !important;
}

/* Header delle Categorie e Testate Tabelle (Nero Perla + Arancio) */
#kunena .kblock div.kheader, 
#kunena .knavbar, 
#kunena .kthead-col,
#kunena .table thead th,
#kunena .kthead,
#kunena .card-header {
    background-color: var(--lab-nero-perla) !important;
    border-bottom: 2px solid var(--lab-arancio-vivo) !important;
    color: var(--lab-arancio-vivo) !important;
    text-transform: uppercase;
}

/* 2. CORPO MESSAGGI, RIGHE TABELLE E SCHEDE (Nuovo Grigio Antracite #252A33) */
#kunena .kblock div.kbody, 
#kunena .krow1, 
#kunena .krow2, 
#kunena tr.krow1 td, 
#kunena tr.krow2 td,
#kunena .table tbody tr td, 
#kunena .table tbody tr th,
#kunena .tab-content,
#kunena .card-body,
#kunena .list-group-item, /* Fix specifico per righe profilo */
.kmsgbody {
    background-color: #252A33 !important; 
    color: var(--white) !important;
    border: 1px solid var(--lab-nero-perla) !important;
}

/* Alert di Benvenuto (Welcome Box) */
#kunena .alert {
    background-color: var(--lab-nero-perla) !important;
    border: 1px solid var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
}

/* 3. TESTI, TITOLI E LINK */
#kunena a, 
#kunena .ktitle, 
#kunena .kpost-title,
#kunena h1, #kunena h2, #kunena h3,
#kunena .kwho-admin {
    color: var(--white) !important;
    font-weight: 700 !important;
}

#kunena h1, #kunena h2 { color: var(--lab-arancio-vivo) !important; }

#kunena a:hover {
    color: var(--lab-crema) !important;
    text-decoration: none !important;
}

/* Testi secondari e Valori Profilo (Date, Visite, Rank, ecc.) */
#kunena .started, #kunena .datepost, #kunena .replies, 
#kunena .views, #kunena .ktopic-category,
#kunena .kprofile-stat-value,
#kunena span, #kunena .admin {
    color: var(--lab-crema) !important;
    font-size: 0.85rem;
}

/* Etichette Profilo (Tipologia, Data registrazione, Rank) */
#kunena strong, #kunena .kprofile-stat-label {
    color: var(--lab-arancio-vivo) !important;
    text-transform: uppercase;
    font-weight: 800 !important;
}

/* 4. TAB E NAVIGAZIONE PROFILO */
#kunena .nav-tabs {
    border-bottom: 2px solid var(--lab-nero-perla) !important;
}

#kunena .nav-tabs .nav-link {
    background-color: var(--lab-nero-perla) !important;
    color: var(--lab-crema) !important;
    border: 1px solid var(--lab-nero-perla) !important;
    border-radius: 0 !important;
    margin-right: 2px;
    font-weight: 700;
    text-transform: uppercase;
}

#kunena .nav-tabs .nav-link.active {
    background-color: #252A33 !important; /* Allineato al nuovo sfondo */
    color: var(--lab-arancio-vivo) !important;
    border: 1px solid var(--lab-nero-perla) !important;
    border-bottom-color: #252A33 !important;
}

/* 5. BOTTONI E STATI UTENTE */
#kunena .btn.kbutton-create,
#kunena .btn-outline-success, 
#kunena .btn-outline-primary {
    background-color: var(--lab-nero-perla) !important;
    border: 1px solid var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
    font-weight: 700 !important
}

/* FIX TESTI E TITOLI MANCANTI */
#kunena h1, 
#kunena h1 small, 
#kunena h3, 
#kunena .float-start h1 {
    color: var(--white) !important;
}

/* FIX PAGINAZIONE (Rimuove il blu e corregge il divisorio) */
#kunena .pagination .page-item .page-link {
    background-color: var(--lab-nero-perla) !important;
    border-color: var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
}

#kunena .pagination .page-item.active .page-link {
    background-color: var(--lab-arancio-vivo) !important;
    border-color: var(--white) !important;
    color: var(--lab-nero-perla) !important;
}

#kunena .pagination .page-item.disabled .page-link {
    background-color: #1a1a1a !important; /* Un grigio molto scuro per i disabilitati */
    border-color: var(--lab-nero-perla) !important;
    color: #666 !important;
}

/* FIX PULSANTI RICERCA E BOTTONI BLUE */
#kunena .btn-outline-primary, 
#kunena .btn-primary {
    background-color: var(--lab-nero-perla) !important;
    border-color: var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
}

#kunena .btn-outline-primary:hover {
    background-color: var(--lab-arancio-vivo) !important;
    color: var(--lab-nero-perla) !important;
}

/* FIX INPUT DI RICERCA */
#kunena .form-control {
    background-color: var(--lab-nero-perla) !important;
    border: 1px solid var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
}

/* TESTO DENTRO LE TABELLE (NON CI SONO DISCUZZIONI ECC) */
#kunena .table tbody td, 
#kunena .table thead th {
    color: var(--white) !important;
}

/* FIX PICCOLO TESTO (MESSAGGI, TEMPO, ECC) */
#kunena small {
    color: var(--lab-crema) !important;
}

/* ==========================================================================
   FIX COLORI FORM - VERSIONE "CYBER GREY" PER STACCARE DALL'HEADER
   ========================================================================== */

/* 1. Stato INATTIVO: Grigio Ardesia Scuro (stacca dal Nero Perla dell'header) */
.form-control, 
input[type="text"], 
input[type="email"], 
input[type="url"], 
input[type="tel"], 
input[type="number"], 
input[type="password"], 
input[type="search"], 
select, 
textarea {
    background-color: #1c1f26 !important; /* Un grigio freddo che stacca dal marrone e dal nero */
    color: var(--white) !important;
    border: 1px solid var(--lab-arancio) !important; /* Bordo arancio sottile per definire il perimetro */
    transition: all 0.2s ease-in-out;
}

/* 2. Stato ATTIVO (Focus): Torna al Bianco (come piaceva a te) ma con font scuro */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background-color: var(--white) !important;
    color: var(--lab-nero-perla) !important; /* Il testo diventa nero per essere leggibile sul bianco */
    border-color: var(--lab-arancio-vivo) !important;
    box-shadow: 0 0 10px var(--lab-arancio-vivo) !important;
    font-weight: 700 !important;
}

/* 3. Fix specifico per il CERCA nell'header (per non farlo sparire) */
header .form-control, 
header input[type="search"] {
    background-color: #252a33 !important; /* Leggermente più chiaro del fondo header */
    border: 1px solid #3d4452 !important;
}

/* 4. Placeholder (il testo suggerito) */
::placeholder {
    color: var(--lab-crema) !important;
    opacity: 0.5;
}

/* ==========================================================================
   JOOMGALLERY - RIFINITURA PULSANTI E NAVIGAZIONE
   ========================================================================== */

/* Il Pulsante specifico che hai creato */
.btn-lab-gallery {
    background-color: var(--lab-nero-perla) !important;
    border: 2px solid var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    padding: 12px 25px !important;
    display: inline-block;
    text-decoration: none !important;
    transition: all 0.3s ease;
    border-radius: 0 !important;
}

.btn-lab-gallery:hover {
    background-color: var(--lab-arancio-vivo) !important;
    color: var(--lab-nero-perla) !important;
    box-shadow: 0 0 10px var(--lab-arancio-vivo);
}

/* Fix per i link "Briciole di pane" (Pathway) di JoomGallery */
.jg_pathway {
    background-color: #252A33 !important;
    padding: 10px !important;
    margin-bottom: 20px !important;
    border-left: 4px solid var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
}

.jg_pathway a {
    color: var(--lab-arancio-vivo) !important;
    text-decoration: none !important;
    font-weight: bold;
}

.jg_pathway a:hover {
    color: var(--white) !important;
}

/* Fix per i bottoni interni (Invia, Reset, Sfoglia) */
.jg_button, .btn-primary, button[type="submit"] {
    background-color: var(--lab-nero-perla) !important;
    border: 1px solid var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
    border-radius: 0 !important;
    text-transform: uppercase;
}

/* Rimuove i bordi bianchi che JoomGallery mette a volte nei contenitori */
.jg_row, .jg_element, .jg_section_img {
    border: none !important;
    box-shadow: none !important;
}

/* FORZATURA PULSANTE GALLERY (CSS) */
#kunena .btn-outline-primary, 
.jg-link.btn-outline-primary {
    background-color: var(--lab-nero-perla) !important;
    border: 2px solid var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
    border-radius: 0 !important;
    text-transform: uppercase;
    font-weight: 800 !important;
    padding: 10px 20px !important;
    transition: all 0.3s ease !important;
}

.jg-link.btn-outline-primary:hover {
    background-color: #252A33 !important; /* Grigio Antracite richiesto */
    color: var(--lab-arancio-vivo) !important; /* Testo Arancio per contrasto */
    border-color: var(--lab-arancio-vivo) !important;
}