/* styles.css — personalizzazioni Sceriffa (caricato PER ULTIMO, sovrascrive il tema).
   Regola php-starter: nessun CSS inline nelle pagine; mettilo qui o in assets/css/<pagina>.css */

:root {
    --sceriffa-green: #34b3a0;   /* brand / logo */
    --sceriffa-primary: #f7941e; /* azioni, voce attiva, CTA */
}

/* Tema colori Sceriffa: brand verde, azioni arancione */
.btn-primary { background-color: var(--sceriffa-primary); border-color: var(--sceriffa-primary); }
.btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #e07f0c; border-color: #e07f0c; }
.btn-outline-primary { color: var(--sceriffa-primary); border-color: var(--sceriffa-primary); }
.btn-outline-primary:hover { background-color: var(--sceriffa-primary); border-color: var(--sceriffa-primary); color: #fff; }
.text-primary { color: var(--sceriffa-primary) !important; }
.bg-primary { background-color: var(--sceriffa-primary) !important; }
.content-body a:not(.btn):not(.nav-link):not(.dropdown-item) { color: var(--sceriffa-primary); }

/* Brand — logo verde (come piattaforma attuale) */
.nav-header .brand-logo { display: inline-flex; align-items: center; }
.nav-header .brand-logo .logo-abbr {
    width: 38px; height: 38px; line-height: 38px; text-align: center;
    background: var(--sceriffa-green); color: #fff; border-radius: 9px;
    display: inline-block; font-size: 20px; font-weight: 700;
}
.nav-header .brand-logo .brand-title { font-size: 22px; font-weight: 700; color: var(--sceriffa-green); }
[data-theme-mode="dark"] .nav-header .brand-logo .brand-title { color: var(--sceriffa-green); }

/* Avatar topbar/sidebar in verde brand */
.avatar-initials { background: var(--sceriffa-green) !important; }

/* Badge stato pratica (colore impostato inline-safe via data-color gestito in main.js) */
.badge-stato { color: #fff; font-weight: 600; }

/* Card statistiche dashboard */
.stat-card .stat-value { font-size: 1.75rem; font-weight: 700; line-height: 1; }
.stat-card .stat-label { color: #7e7e7e; font-size: .85rem; }

/* Tabelle compatte di dominio */
.table-domain td, .table-domain th { vertical-align: middle; }

/* Dropzone bolletta */
.bolletta-drop {
    border: 2px dashed #d1d1d1; border-radius: 12px; padding: 2.5rem 1rem;
    text-align: center; cursor: pointer; transition: border-color .15s ease;
}
.bolletta-drop:hover, .bolletta-drop.dragover { border-color: var(--sceriffa-primary); }

/* ============ SIDEBAR (menu laterale) — leggibilità ============ */
/* Intestazioni di gruppo */
.dlabnav .metismenu li.nav-label {
    padding: 16px 28px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #9aa0b3;
    pointer-events: none;
}
.dlabnav .metismenu li.nav-label:first-child { padding-top: 6px; }

/* Voce di menu: icona + testo allineati, leggibili */
.dlabnav .metismenu > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 26px;
    font-size: 14px;
    font-weight: 500;
    color: #4b4b5a;
    border-radius: 8px;
    margin: 2px 12px;
}
.dlabnav .metismenu > li > a > i {
    width: 22px;
    min-width: 22px;
    text-align: center;
    font-size: 16px;
    background: transparent;
    color: inherit;
    padding: 0;
    line-height: inherit;
    box-shadow: none;
    border-radius: 0;
}
.dlabnav .metismenu > li > a:hover {
    background: rgba(247, 148, 30, .08);
    color: var(--sceriffa-primary);
}
/* Voce attiva: chiara */
.dlabnav .metismenu > li.mm-active > a,
.dlabnav .metismenu > li > a.active {
    background: var(--sceriffa-primary);
    color: #fff;
    box-shadow: 0 6px 14px rgba(247, 148, 30, .35);
}
.dlabnav .metismenu > li.mm-active > a > i,
.dlabnav .metismenu > li > a.active > i { color: #fff; }

/* Avatar iniziali nel profilo sidebar/topbar */
.avatar-initials {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--sceriffa-primary); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 16px; flex-shrink: 0;
}
.header-profile2 { padding: 18px 20px; }

/* ============ DASHBOARD ============ */
.kpi-card { border: none; box-shadow: 0 4px 16px rgba(0,0,0,.05); border-radius: 14px; }
.kpi-card .kpi-icon {
    width: 52px; height: 52px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; color: #fff;
}
.kpi-card .kpi-value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.kpi-card .kpi-label { color: #8a8fa3; font-size: .85rem; }
.bg-grad-1 { background: linear-gradient(135deg, #f7941e, #ffb65c); }
.bg-grad-2 { background: linear-gradient(135deg, #2f6fed, #5aa0ff); }
.bg-grad-3 { background: linear-gradient(135deg, #34b3a0, #7fe0d0); }
.bg-grad-4 { background: linear-gradient(135deg, #6c5ce7, #a29bfe); }

.pipeline-bar { height: 10px; border-radius: 6px; background: #eef0f5; overflow: hidden; }
.pipeline-bar > span { display: block; height: 100%; }

.quick-action {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 12px; border: 1px solid #eef0f5;
    color: #4b4b5a; text-decoration: none; transition: all .15s ease; height: 100%;
}
.quick-action:hover { border-color: var(--sceriffa-primary); color: var(--sceriffa-primary); transform: translateY(-2px); }
.quick-action i { font-size: 20px; }

.chart-wrap { position: relative; height: 320px; }

/* Quick Actions landing */
.qa-group-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #6c7293; }
.qa-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 22px 24px; border-radius: 14px; background: #fff; border: 1px solid #eef0f5;
    text-decoration: none; color: #2b2b3c; transition: all .15s ease; height: 100%;
}
.qa-card:hover { border-color: var(--sceriffa-primary); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.06); }
.qa-card .qa-title { font-size: 17px; font-weight: 700; }
.qa-card .qa-sub { font-size: 13px; color: #8a8fa3; }
.qa-card .qa-ico { font-size: 22px; color: var(--sceriffa-primary); }

/* Tab stati contratto (orizzontali, stile piattaforma) */
.stati-tabs { display: flex; flex-wrap: wrap; gap: 4px; background: var(--sceriffa-primary); border-radius: 10px; padding: 6px; }
.stati-tabs a { flex: 1; text-align: center; padding: 10px 8px; border-radius: 7px; color: #fff; text-decoration: none; font-weight: 600; font-size: 13px; white-space: nowrap; }
.stati-tabs a.active, .stati-tabs a:hover { background: #fff; color: var(--sceriffa-primary); }