/* ==========================================================================
   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: #4d1301;

    --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;
}

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


/* ==========================================================================
   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
   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 (Marrone Deep) */
#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: var(--lab-marrone-deep) !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: var(--lab-marrone-deep) !important;
    color: var(--lab-arancio-vivo) !important;
    border: 1px solid var(--lab-nero-perla) !important;
    border-bottom-color: var(--lab-marrone-deep) !important;
}

/* 5. BOTTONI E STATI UTENTE */
#kunena .btn:not(.btn-outline-success):not(.btn-outline-danger):not(.btn-outline-warning):not(.btn-outline-secondary) {
    background-color: var(--lab-nero-perla) !important;
    border: 1px solid var(--lab-arancio-vivo) !important;
    color: var(--white) !important;
    font-weight: 700 !important;
    border-radius: 0 !important;
}

/* Badge Online/Offline nel profilo */
#kunena .badge.bg-success { background-color: #28a745 !important; }
#kunena .btn-outline-success { border-color: #28a745 !important; color: #28a745 !important; }

#kunena .form-control, #kunena .form-select, #kunena input[type="search"] {
    background-color: var(--lab-nero-perla) !important;
    color: var(--white) !important;
    border: 1px solid var(--lab-arancio-vivo) !important;
    border-radius: 0 !important;
}

/* 6. PAGINAZIONE */
#kunena .pagination .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;
}

/* 7. AVATAR E BREADCRUMBS */
#kunena .kpost-user-avatar img, 
#kunena .rounded svg, 
#kunena .kprofile-avatar img,
#kunena .kavatar img {
    border: 2px solid var(--lab-arancio-vivo) !important;
    padding: 2px;
    background: var(--lab-nero-perla);
}

#kunena .kbreadcrumb {
    background-color: var(--lab-nero-perla) !important;
    padding: 10px !important;
    border: 1px solid var(--lab-arancio-vivo) !important;
    border-radius: 0 !important;
}