/* =====================================================
   DSP - TEMA SCURO COORDINATO
   Basato sullo stile di index.php (auth-box)
   Usare su tutte le pagine interne del portale.
===================================================== */

/* =====================================================
   TIPOGRAFIA
   IBM Plex Sans (testo), IBM Plex Sans Condensed (titoli),
   IBM Plex Mono (numeri: budget, date, importi, ID).
===================================================== */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

html, body{
    height:100%;
}

body.dsp-dark{
    margin:0;
    background-color:#0a0a0a;
    background-image:url('../../images/logo_doomsday.png');
    background-repeat:no-repeat;
    background-position:top center;
    background-size:min(90vw, 760px);
    background-attachment:fixed;
    min-height:100vh;
    color:#f1f1f1;
    font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dsp-dark h1, .dsp-dark h2, .dsp-dark h3,
.dsp-dark h4, .dsp-dark h5, .dsp-dark h6{
    font-family:'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.03em;
}

/* Numeri che contano davvero: budget, costo max, importi ricarica, date, ID.
   Il monospace allinea le cifre in colonna e da' un'aria da strumento di
   precisione invece che da testo qualsiasi. */
.dsp-dark .input-decimale,
.dsp-dark code,
.dsp-mono{
    font-family:'IBM Plex Mono', 'Courier New', monospace;
}

/* =====================================================
   PANNELLO / CARD PRINCIPALE (sostituisce bg-white)
===================================================== */
.dsp-panel{
    background:rgba(20,20,20,0.85);
    padding:30px;
    border-radius:16px;
    box-shadow:0 4px 25px rgba(0,0,0,.6);
    border:1px solid rgba(255,255,255,0.08);
    backdrop-filter:blur(3px);
    color:#f1f1f1;
    margin-bottom:24px;
}

.dsp-panel h1, .dsp-panel h2, .dsp-panel h3,
.dsp-panel h4, .dsp-panel h5, .dsp-panel h6{
    color:#fff;
}

/* Card più piccola, es. KPI, riquadri interni */
.dsp-card{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:12px;
    padding:16px;
    color:#f1f1f1;
}
.dsp-card h6{
    color:rgba(255,255,255,0.65);
}

/* =====================================================
   FORM
===================================================== */
.dsp-panel .form-label{
    color:rgba(255,255,255,0.75);
}

/* Testi di aiuto sotto i campi (es. formati/dimensioni ammesse per i file) */
.dsp-panel .text-muted,
.dsp-panel .form-text{
    color:rgba(255,255,255,0.55) !important;
}
.dsp-panel .form-control,
.dsp-panel .form-select{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.15);
    color:#fff;
}
.dsp-panel .form-control::placeholder{
    color:rgba(255,255,255,0.5);
}

/* Campi data/ora: senza queste regole il browser mostra l'icona del calendario e il popup
   con i colori di default (chiari/neri), praticamente invisibili sullo sfondo scuro */
.dsp-panel input[type="date"],
.dsp-panel input[type="time"],
.dsp-panel input[type="datetime-local"]{
    color-scheme: dark;
}
/* color-scheme:dark (sopra) dice al browser di disegnare i controlli nativi del campo
   (incluse le icone di calendario e orologio) con una palette scura, quindi l'icona diventa
   gia' chiara/bianca da sola. NON va piu' applicato un filter:invert(1) qui sopra: invertendo
   un'icona gia' bianca la si riportava nera (era questo il bug). */
.dsp-panel input[type="date"]::-webkit-calendar-picker-indicator,
.dsp-panel input[type="time"]::-webkit-calendar-picker-indicator,
.dsp-panel input[type="datetime-local"]::-webkit-calendar-picker-indicator{
    opacity: 1;
    cursor: pointer;
}
.dsp-panel .form-control:focus,
.dsp-panel .form-select:focus{
    background:rgba(255,255,255,0.08);
    border-color:#dc3545;
    color:#fff;
    box-shadow:0 0 0 .25rem rgba(220,53,69,.25);
}
.dsp-panel .form-control.is-invalid{
    border-color:#ff5c5c;
}
.dsp-panel .form-control.is-valid{
    border-color:#2fbf5f;
}
.dsp-panel .form-control:disabled,
.dsp-panel .form-control[readonly]{
    background:rgba(255,255,255,0.03);
    color:rgba(255,255,255,0.5);
}
.dsp-panel .form-select option{
    color:#000;
}
.dsp-panel .form-check-label{
    color:rgba(255,255,255,0.85);
}

/* =====================================================
   LINK
===================================================== */
.dsp-panel a{
    color:#ff5c5c;
}
.dsp-panel a.btn{
    color:inherit;
}

/* =====================================================
   TABELLE
===================================================== */
.dsp-panel table,
.dsp-panel .table{
    --bs-table-color:#f1f1f1;
    --bs-table-bg:transparent;
    --bs-table-striped-bg:rgba(255,255,255,.04);
    --bs-table-striped-color:#f1f1f1;
    --bs-table-hover-bg:rgba(255,255,255,.07);
    --bs-table-hover-color:#f1f1f1;
    --bs-table-border-color:rgba(255,255,255,.12);
    color:#f1f1f1;
}
.dsp-panel .table thead th{
    color:rgba(255,255,255,0.7);
    border-bottom:2px solid rgba(255,255,255,.15);
}

/* =====================================================
   BADGE / STATO
===================================================== */
.dsp-panel .badge{
    font-weight:600;
}

/* =====================================================
   ALERT (leggibili anche su sfondo scuro)
===================================================== */
.dsp-panel .alert{
    border:1px solid rgba(255,255,255,0.1);
}

/* =====================================================
   MODALI
===================================================== */
.dsp-dark .modal-content{
    background:#161616;
    color:#f1f1f1;
    border:1px solid rgba(255,255,255,0.1);
}
.dsp-dark .modal-header,
.dsp-dark .modal-footer{
    border-color:rgba(255,255,255,0.1);
}
.dsp-dark .btn-close{
    filter:invert(1) grayscale(100%) brightness(200%);
}

/* =====================================================
   NAV TABS (wizard creazione campagna)
===================================================== */
.dsp-panel .nav-tabs{
    border-bottom:1px solid rgba(255,255,255,0.15);
}
.dsp-panel .nav-tabs .nav-link{
    color:rgba(255,255,255,0.6);
    border:1px solid transparent;
}
.dsp-panel .nav-tabs .nav-link:hover{
    border-color:rgba(255,255,255,0.15);
    color:#fff;
}
.dsp-panel .nav-tabs .nav-link.active{
    background:rgba(255,255,255,0.06);
    color:#fff;
    border-color:rgba(255,255,255,0.15) rgba(255,255,255,0.15) transparent;
}

/* =====================================================
   SELECT2 (geo-target)
===================================================== */
.dsp-panel .select2-container--default .select2-selection--multiple,
.dsp-panel .select2-container--default .select2-selection--single{
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.15);
    color:#fff;
}
.dsp-panel .select2-container--default .select2-selection--single .select2-selection__rendered{
    color:#fff;
}
.dsp-panel .select2-container--default .select2-selection--multiple .select2-selection__choice{
    background:rgba(220,53,69,0.25);
    border:1px solid rgba(220,53,69,0.5);
    color:#fff;
}
.dsp-panel .select2-container--default .select2-selection__choice__remove{
    color:#fff;
}
.select2-dropdown{
    background:#161616;
    border:1px solid rgba(255,255,255,0.15);
    color:#f1f1f1;
}
.select2-container--default .select2-results__option{
    color:#f1f1f1;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
    background:#dc3545;
    color:#fff;
}
/* Campo di ricerca del popup a tendina (select2 "singola") */
.select2-search--dropdown .select2-search__field{
    background:rgba(255,255,255,0.05) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,0.15);
}
.select2-search--dropdown .select2-search__field::placeholder{
    color:rgba(255,255,255,0.5) !important;
}
/* Campo di ricerca "inline" dentro la casella stessa (select2 "multipla", es. geo_target):
   e' un elemento diverso dal precedente, va stilizzato a parte. */
.select2-search--inline .select2-search__field{
    background:transparent !important;
    color:#fff !important;
    caret-color:#fff;
}
.select2-search--inline .select2-search__field::placeholder{
    color:rgba(255,255,255,0.5) !important;
}

/* =====================================================
   UTILITA'
===================================================== */
.dsp-muted{
    color:rgba(255,255,255,0.6);
}