/* =========================================================================
   DISCOLOG — TEMA "POP" (neo-brutalist rosso/nero)
   Design system unico, derivato da esporta_dettagli_album.php.
   Da includere (dopo i CSS di libreria, prima degli eventuali override
   di pagina) in TUTTE le pagine visibili dell'applicazione.
   ========================================================================= */

:root {
    --bg-main:      #121212;
    --bg-panel:     #1e1e1e;
    --bg-panel-2:   #191919;
    --bg-input:     #262626;
    --accent:       #e50914;
    --accent-hover: #ff2430;
    --black:        #000000;
    --white:        #ffffff;
    --text-light:   #f1f1f1;
    --text-dim:     #b3b3b3;
    --text-faint:   #7a7a7a;
    --border-soft:  #333333;
    --ok:           #2ecc71;
    --warn:         #f5a623;

    --shadow-hard: 4px 4px 0 var(--black);
    --shadow-hard-sm: 3px 3px 0 var(--black);
    --shadow-hard-accent: 4px 4px 0 var(--accent);

    --radius: 0; /* stile pop: sempre angoli squadrati */
}

/* ---------- reset leggero / base ------------------------------------- */
.pop-theme, .pop-theme * { box-sizing: border-box; }

.pop-theme {
    font-family: 'Nunito', Arial, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-light);
    background-image:
        linear-gradient(rgba(229,9,20,0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(229,9,20,0.05) 1px, transparent 1px);
    background-size: 44px 44px;
    background-attachment: fixed;
}

.pop-theme h1, .pop-theme h2, .pop-theme h3, .pop-theme h4 {
    font-weight: 900;
    letter-spacing: -0.3px;
    text-transform: uppercase;
    color: var(--white);
}

.pop-theme a { color: var(--white); }

/* forza angoli squadrati anche su elementi Bootstrap-like già presenti */
.pop-theme *,
.pop-theme *::before,
.pop-theme *::after {
    border-radius: 0 !important;
}

/* ---------- topbar / intestazione pagina ------------------------------ */
.pop-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--bg-panel);
    border-bottom: 4px solid var(--black);
    padding: 16px 28px;
    flex-wrap: wrap;
}

.pop-topbar .pop-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.pop-topbar .pop-title img { height: 42px; }

.pop-topbar .pop-title h1 {
    font-size: 1.4em;
    margin: 0;
}

.pop-topbar .pop-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ---------- bottone HOME unico (standard di tutto il sito) ------------ */
.btn-home {
    position: fixed;
    top: 24px;
    right: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--accent);
    color: #fff !important;
    border: 2px solid var(--black);
    box-shadow: var(--shadow-hard-sm);
    text-decoration: none !important;
    transition: transform 0.1s, box-shadow 0.1s;
    z-index: 1000;
    font-size: 1.25em;
}

.btn-home:hover { color: #fff; background: var(--accent-hover); }

.btn-home:active {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--black);
}

/* variante estesa, con etichetta testuale, per header interni alla pagina
   (non fixed) — usare .btn-home.btn-home--inline.btn-home--label */
.btn-home.btn-home--inline {
    position: static;
    width: auto;
    height: auto;
    padding: 10px 18px;
    gap: 8px;
    font-size: 1em;
}
.btn-home.btn-home--inline i { font-size: 1.1em; }

/* ---------- bottoni generici ------------------------------------------ */
.btn-pop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--accent);
    color: #fff;
    border: 2px solid var(--black);
    box-shadow: var(--shadow-hard-sm);
    padding: 10px 20px;
    font-weight: 900;
    font-size: 0.95em;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s;
}
.btn-pop:hover { color: #fff; background: var(--accent-hover); }
.btn-pop:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--black); }
.btn-pop:disabled { opacity: 0.6; cursor: wait; }

.btn-pop--black { background: var(--black); border-color: var(--black); box-shadow: 3px 3px 0 var(--accent); }
.btn-pop--black:hover { background: #1a1a1a; }

.btn-pop--ghost { background: transparent; color: var(--text-light); border: 2px solid #555; box-shadow: none; }
.btn-pop--ghost:hover { border-color: var(--accent); color: #fff; }

.btn-pop--sm { padding: 6px 12px; font-size: 0.8em; }

/* ---------- contenitori / card ----------------------------------------- */
.pop-container, .pop-card {
    background: var(--bg-panel);
    border: 3px solid var(--black);
    padding: 18px 20px;
}

.pop-card--shadow { box-shadow: var(--shadow-hard); }

.section-tag {
    background: var(--black);
    color: #fff;
    display: inline-block;
    padding: 4px 14px;
    font-size: 0.9em;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* ===========================================================================
   RIQUADRO POP — firma visiva del sito (bordo nero + "bordino" rosso sotto
   e a destra), applicata automaticamente a tutti i contenitori principali
   e alle card interne di ogni pagina, senza dover riscrivere ogni pagina.
   =========================================================================== */
.pop-theme .container,
.pop-theme .pop-panel {
    border: 3px solid var(--black) !important;
    box-shadow: var(--shadow-hard-accent) !important;
    margin-bottom: 40px !important;
}

/* Card / pannelli di secondo livello: stesso linguaggio visivo ma ombra
   nera più contenuta, per creare gerarchia rispetto al contenitore principale */
.pop-theme .info-section,
.pop-theme .form-section,
.pop-theme .search-wrapper,
.pop-theme .raccolta-info,
.pop-theme .feature-card,
.pop-theme .quote-container,
.pop-theme .modal-dialog,
.pop-theme .card,
.pop-theme .nav-card,
.pop-theme .counter-card,
.pop-theme .error-card,
.pop-theme .option-card,
.pop-theme .stat-card,
.pop-theme .summary-card,
.pop-theme .barcode-box,
.pop-theme .leaderboard-item,
.pop-theme .unmapped-item,
.pop-theme .selected-item {
    border: 2px solid var(--black) !important;
    box-shadow: var(--shadow-hard-sm) !important;
}

/* elementi ancora più piccoli (badge, chip, mini-box): bordo netto ma senza ombra,
   per non appesantire la gerarchia visiva */
.pop-theme .badge,
.pop-theme .badge-small,
.pop-theme .detail-item,
.pop-theme .header-badges .badge {
    border: 2px solid var(--black) !important;
}

/* tabelle e liste: righe con bordo netto invece del semplice separatore */
.pop-theme .album-list li,
.pop-theme .tracklist li {
    border: 2px solid var(--black) !important;
}

/* ===========================================================================
   PULSANTI — uniformati allo stile del bottone Home su TUTTO il sito.
   Sfondo rosso, testo SEMPRE bianco (mai testo rosso), bordo nero, ombra
   netta. Copre tutte le varianti di classe bottone usate nelle varie pagine.
   Esclusi volutamente: .nav-card (le card di navigazione della dashboard,
   che hanno un linguaggio visivo proprio) e .link-btn (link testuali inline).
   =========================================================================== */
.pop-theme .btn,
.pop-theme .secondary-btn,
.pop-theme .btn-secondary,
.pop-theme .btn-danger,
.pop-theme .btn-accent,
.pop-theme .btn-small,
.pop-theme .btn-sm,
.pop-theme .view-btn,
.pop-theme .delete-btn,
.pop-theme .edit-btn,
.pop-theme .btn-print,
.pop-theme .btn-new-search,
.pop-theme .btn-analyze,
.pop-theme .btn-add-mapping,
.pop-theme .btn-header,
.pop-theme .ui-button,
.pop-theme .track-nav-btn,
.pop-theme .play-pause-btn,
.pop-theme .edit-pos-btn,
.pop-theme button:not(.close):not(.btn-close):not(.link-btn):not(.tab-button):not(.user-avatar),
.pop-theme input[type="submit"],
.pop-theme input[type="button"] {
    background: var(--accent) !important;
    color: #fff !important;
    border: 2px solid var(--black) !important;
    box-shadow: var(--shadow-hard-sm) !important;
    font-weight: 900 !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: transform 0.1s, box-shadow 0.1s, background 0.1s !important;
    cursor: pointer;
}
.pop-theme .btn:hover,
.pop-theme .secondary-btn:hover,
.pop-theme .btn-secondary:hover,
.pop-theme .btn-danger:hover,
.pop-theme .btn-accent:hover,
.pop-theme .btn-small:hover,
.pop-theme .btn-sm:hover,
.pop-theme .view-btn:hover,
.pop-theme .delete-btn:hover,
.pop-theme .edit-btn:hover,
.pop-theme .btn-print:hover,
.pop-theme .btn-new-search:hover,
.pop-theme .btn-analyze:hover,
.pop-theme .btn-add-mapping:hover,
.pop-theme .btn-header:hover,
.pop-theme .ui-button:hover,
.pop-theme button:hover:not(.close):not(.btn-close):not(.link-btn):not(.tab-button):not(.user-avatar),
.pop-theme input[type="submit"]:hover,
.pop-theme input[type="button"]:hover {
    background: var(--accent-hover) !important;
    color: #fff !important;
}
.pop-theme .btn:active,
.pop-theme .secondary-btn:active,
.pop-theme button:active:not(.close):not(.btn-close):not(.link-btn):not(.tab-button):not(.user-avatar) {
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--black) !important;
}
.pop-theme .btn i,
.pop-theme .secondary-btn i,
.pop-theme .btn-secondary i,
.pop-theme .btn-danger i,
.pop-theme button i,
.pop-theme .ui-button i {
    color: #fff !important;
}
.pop-theme .btn:disabled,
.pop-theme button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none !important;
}
.pop-theme header h1 > i,
.pop-theme .form-section h2 > i,
.pop-theme .form-section h5 > i {
    margin-right: 10px;
}
.pop-theme .nav-card i {
    border-color: var(--accent) !important;
    padding: 8px !important;
}
/* piccola "X" di chiusura modale: resta minimale, non un bottone rosso pieno */
.pop-theme .close,
.pop-theme .btn-close,
.pop-theme .modal-close {
    background: var(--accent) !important;
    color: #fff !important;
    border: 2px solid var(--black) !important;
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px !important;
    box-shadow: 2px 2px 0 var(--accent) !important;
}
.pop-theme .close:hover,
.pop-theme .btn-close:hover,
.pop-theme .modal-close:hover { background: var(--accent-hover) !important; color:#fff !important; }

.pop-theme .secondary-btn,
.pop-theme .btn-secondary,
.pop-theme .btn-gray,
.pop-theme .btn-reset {
    background: #565656 !important;
    color: #fff !important;
}
.pop-theme .secondary-btn:hover,
.pop-theme .btn-secondary:hover,
.pop-theme .btn-gray:hover,
.pop-theme .btn-reset:hover {
    background: #6b6b6b !important;
}

.discolog-loader {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 8px;
    min-width: 180px;
    max-width: 100%;
    color: #fff;
    font-weight: 900;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.discolog-loader__text {
    display: block;
    line-height: 1;
    text-align: center;
}
.discolog-loader__bar {
    position: relative;
    display: block;
    height: 7px;
    overflow: hidden;
    background: var(--black);
    border: 2px solid var(--black);
}
.discolog-loader__bar::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 45%;
    background: var(--accent);
    animation: discolog-load 1.1s ease-in-out infinite;
}
@keyframes discolog-load {
    0% { transform: translateX(-110%); }
    100% { transform: translateX(230%); }
}
.discolog-loader--center {
    margin: 18px auto;
}

/* barra di ricerca e menu a tendina: stesso linguaggio "netto" dei bottoni,
   bordo nero deciso e leggibilità massima, sfondo scuro per il testo */
.pop-theme .search-bar input,
.pop-theme select,
.pop-theme .sort-group select {
    border: 1.5px solid var(--black) !important;
    color: #fff !important;
    font-weight: 700;
}
.pop-theme .search-bar input:focus,
.pop-theme select:focus {
    border: 1.5px solid var(--black) !important;
    box-shadow: 2px 2px 0 var(--black) !important;
}

/* link testuali tipo "+ Nuovo elemento..." sotto le select: leggibili,
   non rossi, con solo l'icona in accento */
.pop-theme .link-btn {
    color: var(--text-light) !important;
    font-weight: 800 !important;
    text-decoration: underline;
}
.pop-theme .link-btn:hover { color: #fff !important; }
.pop-theme .link-btn i { color: var(--accent) !important; }
.pop-theme input[type="text"],
.pop-theme input[type="email"],
.pop-theme input[type="password"],
.pop-theme input[type="number"],
.pop-theme input[type="date"],
.pop-theme input[type="search"],
.pop-theme select,
.pop-theme textarea {
    background: var(--bg-input);
    border: 1.5px solid var(--black);
    color: var(--text-light);
    padding: 10px 12px;
    font-family: inherit;
    font-weight: 600;
    width: 100%;
}

.pop-theme input:focus,
.pop-theme select:focus,
.pop-theme textarea:focus {
    outline: none;
    border: 1.5px solid var(--black);
    box-shadow: 2px 2px 0 var(--black);
}

.pop-theme input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]) {
    border: 1.5px solid var(--black);
    background: var(--bg-input);
    color: var(--text-light);
}
.pop-theme input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="file"]):not([type="range"]):focus {
    outline: none;
    border: 1.5px solid var(--black);
    box-shadow: 2px 2px 0 var(--black);
}

.pop-theme label { font-weight: 800; text-transform: uppercase; font-size: 0.8em; color: var(--text-dim); letter-spacing: 0.5px; }

/* ---------- tabelle ------------------------------------------------------ */
.pop-theme table { border-collapse: collapse; width: 100%; }
.pop-theme thead th {
    background: var(--black);
    color: #fff;
    text-transform: uppercase;
    font-weight: 900;
    font-size: 0.8em;
    letter-spacing: 0.5px;
    padding: 10px 12px;
    border: 2px solid var(--black);
}
.pop-theme tbody td {
    padding: 9px 12px;
    border: 1px solid var(--border-soft);
    color: var(--text-light);
}
.pop-theme tbody tr:nth-child(even) { background: var(--bg-panel-2); }
.pop-theme tbody tr:hover { background: #232323; }

/* ---------- alert / messaggi -------------------------------------------- */
.pop-alert {
    border: 2px solid var(--black);
    padding: 12px 16px;
    font-weight: 800;
}
.pop-alert--error { background: #2a1414; border-color: var(--accent); color: #ff8a8a; }
.pop-alert--ok { background: #10261a; border-color: var(--ok); color: #7be7a3; }

/* ---------- scrollbar (coerenza visiva) ---------------------------------- */
.pop-theme ::-webkit-scrollbar { width: 10px; height: 10px; }
.pop-theme ::-webkit-scrollbar-track { background: var(--bg-panel); }
.pop-theme ::-webkit-scrollbar-thumb { background: var(--accent); border: 2px solid var(--black); }

@media (max-width: 640px) {
    .btn-home { top: 14px; right: 14px; width: 40px; height: 40px; }
}