/* ==========================================================================
   TAVOLOZZA COLORI & VARIABILI GLOBALI (Modifica qui per cambiare i colori)
   ========================================================================== */
:root {
    --bg-base: #0a0f1d;          /* Sfondo scuro principale */
    --bg-card: #151e34;          /* Sfondo delle schede/box */
    --bg-input: #0b1120;         /* Sfondo campi testo e textarea */
    
    --border-color: #334155;     /* Bordi discreti ma visibili */
    --border-highlight: #475569; /* Bordi più marcati */

    --text-main: #f8fafc;        /* Testo principale (bianco brillante) */
    --text-secondary: #cbd5e1;   /* Testo descrittivo chiaro */
    --text-muted: #94a3b8;       /* Testo secondario/etichette (mai troppo scuro!) */

    --accent-teal: #14b8a6;      /* Verde acqua/teal clinico primario */
    --accent-teal-hover: #2dd4bf;
    --accent-blue: #38bdf8;      /* Azzurro per etichette */
    --accent-danger: #f87171;    /* Rosso per emergenze/annulla */
    --accent-success: #34d399;   /* Verde successo */
}

/* Base Body */
body {
    background-color: var(--bg-base);
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
}

/* Navbar */
.navbar-clinical {
    background-color: #111827;
    border-bottom: 1px solid var(--border-color);
}

/* Card & Contenitori */
.clinical-card {
    background-color: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.clinical-box-inner {
    background-color: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-main);
}

/* Tipografia */
.text-teal { color: var(--accent-teal-hover) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.label-field {
    color: var(--accent-blue) !important;
    font-weight: 700;
    font-size: 0.82rem;
    margin-bottom: 0.35rem;
    display: block;
}

/* Form & Input */
.form-control, .form-select {
    background-color: var(--bg-input) !important;
    border: 1px solid var(--border-highlight) !important;
    color: var(--text-main) !important;
    font-size: 0.88rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--accent-blue) !important;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.35) !important;
    outline: none;
}

/* Pulsanti */
.btn-clinical {
    background: linear-gradient(135deg, #0d9488 0%, var(--accent-teal) 100%);
    color: #ffffff !important;
    font-weight: 700;
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
    transition: all 0.2s ease;
}
.btn-clinical:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(20, 184, 166, 0.5);
}

/* Componenti Session Studio */
.vu-meter-container {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 32px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.vu-bar {
    width: 7px;
    height: 5px;
    background: #64748b;
    border-radius: 3px;
    transition: height 0.06s ease, background-color 0.06s ease;
}

.transcript-box {
    background: #090e1a !important;
    color: #e2e8f0 !important;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.85rem;
    max-height: 190px;
    overflow-y: auto;
    white-space: pre-wrap;
    font-size: 0.82rem;
    line-height: 1.6;
}

.alert-feedback {
    background: rgba(16, 185, 129, 0.22) !important;
    border: 1px solid #10b981 !important;
    color: #a7f3d0 !important;
    font-weight: 600;
}

/* ==========================================================================
   PLACEHOLDER AD ALTO CONTRASTO (Leggibili su sfondo scuro)
   ========================================================================== */
::placeholder {
    color: #94a3b8 !important;   /* Grigio chiaro elegante (Slate-400) */
    opacity: 0.85 !important;     /* Rimuove l'opacità spenta dei browser */
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
    color: #94a3b8 !important;
    opacity: 0.85 !important;
}

/* Supporto per tutti i browser */
::-webkit-input-placeholder { color: #94a3b8 !important; opacity: 0.85 !important; }
:-moz-placeholder           { color: #94a3b8 !important; opacity: 0.85 !important; }
::-moz-placeholder          { color: #94a3b8 !important; opacity: 0.85 !important; }
:-ms-input-placeholder      { color: #94a3b8 !important; opacity: 0.85 !important; }