/* --- VARIABILI DI TEMA SCURO --- */
:root {
    --color-background: #1e1e1e;        /* Sfondo principale (scuro) */
    --color-container: #2c2c2c;         /* Sfondo dei box (più chiaro del background) */
    --color-text-primary: #f0f0f0;      /* Testo principale (chiaro) */
    --color-text-secondary: #aaaaaa;    /* Testo secondario */
    --color-border: #444444;            /* Bordi e separatori */
    --color-accent: #6495ed;            /* Blu tenue per l'accento */
    --color-button-hover: #404040;
}

/* Stile Generale */
body {
    font-family: sans-serif;
    margin: 20px;
    background-color: var(--color-background);
    color: var(--color-text-primary);
}

.container {
    background: var(--color-container);
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5); /* Ombra più scura */
}

/* Form e Input */
input[type="text"], 
input[type="password"], 
input[type="number"],
textarea,
select {
    background-color: #383838;
    color: var(--color-text-primary);
    border: 1px solid var(--color-border);
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 4px;
    display: block;
    width: 100%;
    box-sizing: border-box;
}

button {
    background-color: var(--color-accent);
    color: white;
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

button:hover {
    background-color: #4682b4; /* Tonalità di blu leggermente più scura */
}

button:disabled {
    background-color: var(--color-border);
    color: var(--color-text-secondary);
    cursor: not-allowed;
}

.message {
    margin-top: 10px;
    padding: 8px;
    border-radius: 4px;
}
p#auth-message {
    color: var(--color-text-primary); /* Reimposta il colore per il messaggio di successo/errore */
}


/* Layout a Due Colonne (Login/Deck Builder) */
.two-column-layout {
    display: flex;
    gap: 20px;
}
.column {
    flex: 1;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: #242424; /* Leggermente diverso dal container principale */
}

/* Navigazione a Schede */
#tabs {
    margin-bottom: 20px;
    border-bottom: 2px solid var(--color-border);
}
.tab-button {
    padding: 10px 15px;
    cursor: pointer;
    border: none;
    background: none;
    color: var(--color-text-secondary);
    border-bottom: 3px solid transparent;
    transition: color 0.2s, border-bottom 0.2s;
}
.tab-button:hover {
    color: var(--color-text-primary);
}
.tab-button.active {
    border-bottom: 3px solid var(--color-accent);
    color: var(--color-accent);
    font-weight: bold;
}
.tab-pane {
    display: none;
}
.tab-pane.active {
    display: block;
}

/* Tabelle (Collezione/Classifica) */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    color: var(--color-text-primary);
}
th, td {
    border: 1px solid var(--color-border);
    padding: 8px;
    text-align: left;
}
th {
    background-color: #383838;
    color: var(--color-text-primary);
}
tr:nth-child(even) {
    background-color: #2e2e2e; /* Riga alternata */
}

/* Intestazioni Sortabili */
.sortable-header {
    cursor: pointer;
    transition: background-color 0.2s;
}
.sortable-header:hover {
    background-color: #404040;
}

/* Header Fisso per la Collezione */
#collection-table-controls, .deck-controls {
    background: var(--color-container); 
    z-index: 10;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.sticky-header {
    position: sticky;
    top: 0; 
    background: var(--color-container);
    z-index: 100; 
    padding: 10px;
    margin: -10px; 
}

/* Liste scorrevoli (Deck Builder) */
.scrollable-list {
    max-height: 400px;
    overflow-y: auto;
    list-style: none;
    padding: 0;
    margin-top: 0;
}
.scrollable-list li {
    padding: 5px 0;
    border-bottom: 1px dashed #444; /* Bordo più scuro */
    display: flex;
    justify-content: space-between;
}

/* Carte mancanti (Import Xmage) */
.missing-card {
    color: #ff6347; /* Rosso più brillante per contrasto */
    font-weight: bold;
}

/* Stili per la Scheda Apri Busta */
.opened-cards-grid {
    margin-top: 15px;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
}
.opened-cards-grid ul {
    list-style: none;
    padding: 0;
}
.opened-cards-grid li {
    padding: 5px;
    margin-bottom: 3px;
    border-radius: 3px;
    border-left: 5px solid;
    color: black; /* Testo nero per visibilità su sfondo colorato */
}
.opened-cards-grid li span {
    color: var(--color-text-primary); /* Reset colore testo all'interno dello span */
}

/* Colori in base alla rarità */
.mythic-card {
    border-color: #ff8c00; /* Arancione brillante */
    background-color: #4a3c1f;
}
.rare-card {
    border-color: #ffd700; /* Oro brillante */
    background-color: #4a4221;
}
.uncommon-card {
    border-color: #b0c4de; /* Blu-grigio chiaro */
    background-color: #383d42;
}
.common-card {
    border-color: #ffffff; /* Bianco */
    background-color: #333333;
}

/* --- STILI AGGIUNTI PER IL PANNELLO ADMIN --- */

/* Contenitore per i pulsanti delle espansioni */
.expansion-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Spazio tra i pulsanti */
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #444; /* Bordo sottile per delimitare l'area */
    max-height: 200px;
    overflow-y: auto; /* Scroll se ci sono troppe espansioni */
}

/* Stile base per il pulsante */
.expansion-toggle-btn {
    padding: 5px 10px;
    border: 1px solid #555;
    background-color: #333;
    color: #ccc;
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s, border-color 0.2s;
    font-size: 0.9em;
}

/* Stile per il pulsante ATTIVO (selezionato) */
.expansion-toggle-btn.active-expansion {
    background-color: #007bff; /* Colore d'accento blu */
    color: white;
    border-color: #0056b3;
    font-weight: bold;
}

.expansion-toggle-btn:hover:not(.active-expansion) {
    background-color: #444;
}

/* Stile per i gruppi di azioni nell'admin */
.admin-action-group {
    margin-bottom: 25px;
    padding: 15px;
    border: 1px solid #333;
    border-radius: 6px;
}

/* --- OTTIMIZZAZIONE TABELLA COLLEZIONE --- */

/* Contenitore per lo scrolling (se la tabella è più grande dell'area) */
.table-scroll-container {
    max-height: 70vh; /* Altezza massima per lo scrolling, adatta se necessario */
    overflow-y: auto;
    border: 1px solid #ccc; /* Opzionale: bordo */
}

#collection-table {
    width: 100%; /* La tabella occupa tutto lo spazio del contenitore */
    table-layout: fixed; /* CRITICO: Forziamo le larghezze delle colonne */
    border-collapse: collapse;
}

#collection-table th, 
#collection-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    vertical-align: top; /* Allinea il contenuto in alto, utile per il testo su più righe */
}

/* Larghezze Colonne Ottimizzate */

/* Rarity, Set (Espansione), Color */
#collection-table .col-rarity,
#collection-table .col-set,
#collection-table .col-color {
    width: 120px; 
}

/* Name and Type (lasciamo un po' più larghi) */
#collection-table .col-name {
    width: 150px;
}
#collection-table .col-type {
    width: 120px;
}

/* Forza/Costituzione (P/T) */
#collection-table .col-power-toughness {
    width: 60px;
    min-width: 60px; /* 🛑 Aggiunto per forzare la larghezza minima */
    max-width: 60px; /* 🛑 Aggiunto per forzare la larghezza massima */
    overflow: hidden; /* 🛑 Aggiunto per troncare se il contenuto è troppo grande */
    text-align: center;
    /* white-space: nowrap; (evitare, altrimenti non si adatta) */
}

/* Testo (Azione/Abilità) - Deve occupare il resto dello spazio */
#collection-table .col-text {
    width: auto; 
    white-space: normal; /* CRITICO: Permette al testo di andare a capo */
}

/* --- CORREZIONI CLASSI JS: col-mana e col-qty (Conflitti Risolti) --- */

/* 🛑 CORREZIONE MANA COST: Usa col-mana (60px) */
#collection-table .col-mana {
    width: 60px !important; /* Forza la larghezza */
    min-width: 60px !important;
    max-width: 60px !important;
    text-align: center;
}

/* 🛑 CORREZIONE QUANTITÀ: Usa col-qty (40px) */
#collection-table .col-qty {
    width: 40px !important; /* Forza la larghezza */
    min-width: 40px !important; 
    max-width: 40px !important; 
    text-align: center;
}

/* --- FINE CORREZIONI --- */

/* --- STILE TOOLTIP CARTE ESTRATTE --- */

/* Contenitore principale del Tooltip (nascondi di default) */
.card-tooltip {
    position: absolute;
    z-index: 1000;
    width: 300px;
    padding: 10px;
    background-color: #333;
    color: white;
    border: 1px solid gold;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    pointer-events: none; /* Cruciale: permette di cliccare attraverso il tooltip */
    opacity: 0;
    transition: opacity 0.3s;
}

.card-tooltip h4 {
    margin: 0 0 5px 0;
    border-bottom: 1px solid #555;
    padding-bottom: 3px;
}

.card-tooltip p {
    margin: 3px 0;
    font-size: 0.9em;
}

.tooltip-text {
    font-style: italic;
    color: #ccc;
    white-space: pre-wrap; /* Mantiene il formato del testo abilità */
}

/* --- STILI DI TESTO PER IL COLORE DELLE CARTE --- */

/* Base per i colori */
#collection-table .col-color {
    font-weight: bold; /* Opzionale: Rende i nomi dei colori più evidenti */
    text-align: center; /* Centra il testo nella cella da 80px */
}

/* Colori Magici */
.color-white {
    color: white !important; /* Testo bianco */
}
.color-blue {
    color: #00bfff !important; /* Celeste brillante */
}
.color-black {
    /* Il grigio molto scuro è invisibile su sfondo scuro. 
       Usiamo un grigio chiaro come testo, ma un effetto ombra scura per simulare il colore nero di Magic.
       NOTA: Il testo deve essere leggibile! */
    color: #444444 !important; /* Grigio scuro leggibile */
    /* text-shadow: 1px 1px 2px #000;  Opzionale: aggiunge un'ombra nera */
}
.color-red {
    color: #ff4500 !important; /* Rosso vivo */
}
.color-green {
    color: #3cb371 !important; /* Verde medio-scuro */
}

/* Colori speciali */
.color-colorless {
    color: var(--color-text-secondary) !important; /* Grigio secondario */
}
.color-land {
    color: var(--color-text-secondary) !important; /* Grigio secondario */
}

/* --- STILI SPECIFICI PER IL DECK BUILDER A DUE COLONNE --- */

/* Applica Flexbox al contenitore principale delle liste */
#deck-builder-main {
    display: flex;
    gap: 20px; /* Spazio tra le due colonne */
    margin-top: 15px; /* Spazio sotto i controlli superiori */
    /* Altezza fissa o minima per riempire lo spazio sul viewport */
    height: 75vh; /* Regola l'altezza massima delle liste, es. 75% dell'altezza del viewport */
}

/* Stile per ciascuna colonna */
.deck-list-col {
    flex: 1; /* Occupano lo spazio in parti uguali (50% ciascuno) */
    display: flex; /* Molto importante: permette alla <ul> di occupare tutto lo spazio verticale */
    flex-direction: column;
    padding: 10px;
    border: 1px solid var(--color-border);
    border-radius: 5px;
    background-color: #242424; 
    /* Rimuoviamo il padding e border della classe .column per non duplicarli.
       ATTENZIONE: Se .column era usato altrove, è meglio usare solo .deck-list-col. */
}

/* Applica lo scrolling alla lista vera e propria, facendola espandere */
.deck-list-col .scrollable-list {
    flex: 1; /* Forza la lista a prendere l'altezza rimanente */
    min-height: 0; /* Resetta l'altezza minima, cruciale in Flexbox */
    max-height: none; /* Sovrascrive il max-height generale di .scrollable-list */
}

/* Fissa il footer del mazzo alla fine della colonna destra */
.deck-list-col .deck-actions {
    // margin-top: auto; /* Spinge gli elementi in basso */
    padding-top: 10px;
    border-top: 1px solid #444;
	margin-top: 10px;
    margin-bottom: 10px;
}

.card-reveal {
    width: 150px;
    height: 220px;
    background: #333;
    border: 2px solid #555;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(20px);
    animation: slideUpFade 0.5s forwards ease-out;
}

@keyframes slideUpFade {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rarity-rare { border-color: #ffd700; background: #443300; }
.rarity-mythic { border-color: #ff4500; background: #441100; }

/* --- COLORI RARITÀ PER LE TABELLE (Collezione e Bustine) --- */

/* Comune: Grigio chiaro/Bianco */
.rarity-common { 
    color: #ffffff !important; 
    font-weight: bold;
}

/* Non Comune: Argento/Azzurro metallico */
.rarity-uncommon { 
    color: #b0c4de !important; 
    font-weight: bold;
    text-shadow: 0 0 5px rgba(176, 196, 222, 0.3);
}

/* Rara: Oro */
.rarity-rare { 
    color: #ffd700 !important; 
    font-weight: bold;
    text-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
}

/* Mitica: Arancione/Rosso Fuoco */
.rarity-mythic { 
    color: #ff4500 !important; 
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 69, 0, 0.5);
}

/* Speciale/Altro: Viola */
.rarity-special, .rarity-timeshifted {
    color: #9370db !important;
    font-weight: bold;
}

/* Ottimizzazione celle tabella bustine */
#pack-results td {
    vertical-align: top;
    line-height: 1.4;
}

/* Effetto hover sulle righe della tabella bustine */
#pack-results tr:hover {
    background-color: #252525 !important;
    transition: background-color 0.2s;
}