/* CondoTC - stile base con supporto tema chiaro/scuro
   Il tema segue di default le preferenze di sistema (prefers-color-scheme),
   ma puo' essere forzato dall'utente con il toggle (salvato in localStorage). */

:root {
    --blu: #185FA5;
    --blu-scuro: #0C447C;
    --verde: #3B6D11;
    --rosso: #A32D2D;
    --arancio: #854F0B;

    --bg-page: #F1EFE8;
    --bg-card: #FFFFFF;
    --bg-header: #FFFFFF;
    --testo-primario: #2C2C2A;
    --testo-secondario: #5F5E5A;
    --bordo: #D3D1C7;
}

[data-tema="scuro"] {
    --bg-page: #1A1A19;
    --bg-card: #242422;
    --bg-header: #242422;
    --testo-primario: #F1EFE8;
    --testo-secondario: #B4B2A9;
    --bordo: #444441;
    --blu: #5A9BD8;
    --verde: #7FBF4D;
    --rosso: #E27878;
    --arancio: #E0A85C;
}

/* Se l'utente non ha mai scelto manualmente, rispetta il sistema (risparmio energetico automatico) */
@media (prefers-color-scheme: dark) {
    :root:not([data-tema="chiaro"]) {
        --bg-page: #1A1A19;
        --bg-card: #242422;
        --bg-header: #242422;
        --testo-primario: #F1EFE8;
        --testo-secondario: #B4B2A9;
        --bordo: #444441;
        --blu: #5A9BD8;
        --verde: #7FBF4D;
        --rosso: #E27878;
        --arancio: #E0A85C;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--bg-page);
    color: var(--testo-primario);
    transition: background-color .2s ease, color .2s ease;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-header);
    border-bottom: 1px solid var(--bordo);
    padding: 12px 24px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 18px;
}

.logo-box {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--blu);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

.toggle-tema {
    border: 1px solid var(--bordo);
    background: transparent;
    color: var(--testo-primario);
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 13px;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px;
}

.card {
    background: var(--bg-card);
    border: 1px solid var(--bordo);
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
}

.saldo-positivo { color: var(--verde); font-weight: 600; }
.saldo-negativo { color: var(--rosso); font-weight: 600; }

label {
    display: block;
    font-size: 13px;
    color: var(--testo-secondario);
    margin-bottom: 4px;
}

input, select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--testo-primario);
    font-size: 14px;
    margin-bottom: 14px;
}

button.btn-primario {
    background: var(--blu);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 14px;
    cursor: pointer;
}

button.btn-primario:hover { background: var(--blu-scuro); }

.errore {
    background: #FCEBEB;
    color: var(--rosso);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
}

.successo {
    background: #EAF3DE;
    color: var(--verde);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
}

table.tabella-dati {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin-bottom: 20px;
}

table.tabella-dati th {
    text-align: left;
    color: var(--testo-secondario);
    font-weight: 500;
    font-size: 13px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--bordo);
}

table.tabella-dati td {
    padding: 10px;
    border-bottom: 1px solid var(--bordo);
}

.tab-nav {
    display: flex;
    gap: 4px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bordo);
}

.tab-nav a {
    padding: 10px 16px;
    text-decoration: none;
    color: var(--testo-secondario);
    font-size: 14px;
    border-bottom: 2px solid transparent;
}

.tab-nav a.attivo {
    color: var(--blu);
    border-bottom: 2px solid var(--blu);
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 12px;
}

.badge-proprietario { background: #E6F1FB; color: var(--blu-scuro); }
.badge-inquilino { background: #FAEEDA; color: var(--arancio); }

.btn-secondario {
    background: transparent;
    color: var(--testo-primario);
    border: 1px solid var(--bordo);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--bordo);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--testo-primario);
    font-size: 14px;
    margin-bottom: 14px;
    font-family: inherit;
}

.checkbox-riga {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.checkbox-riga input { width: auto; margin: 0; }