/* ============================================================
   GESTIONALE ASSOCIAZIONE - Stile Principale
   ============================================================ */

:root {
    --primary:       #2d6a4f;
    --primary-dark:  #1b4332;
    --primary-light: #52b788;
    --secondary:     #74c69d;
    --accent:        #d8f3dc;
    --danger:        #dc3545;
    --warning:       #fd7e14;
    --info:          #0d6efd;
    --text-dark:     #212529;
    --text-muted:    #6c757d;
    --bg-light:      #f8f9fa;
    --border:        #dee2e6;
    --sidebar-w:     260px;
}

/* ============================================================
   BASE
   ============================================================ */
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    background: #f0f2f5;
    color: var(--text-dark);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}

/* ============================================================
   NAVBAR
   ============================================================ */
.bg-primary-custom {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%) !important;
}

.navbar-brand {
    font-size: 1.1rem;
    letter-spacing: 0.3px;
}

.navbar-dark .navbar-nav .nav-link {
    color: rgba(255,255,255,0.85);
    border-radius: 6px;
    padding: 0.4rem 0.75rem;
    transition: all 0.2s;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active {
    color: #fff;
    background: rgba(255,255,255,0.15);
}

/* ============================================================
   AVATAR
   ============================================================ */
.avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.avatar-md {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.avatar-lg {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--accent);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================================
   CARDS
   ============================================================ */
.card {
    border: none;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s;
}

.card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.card-header {
    background: #fff;
    border-bottom: 2px solid var(--accent);
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
    padding: 1rem 1.25rem;
}

/* Stat cards */
.stat-card {
    border-radius: 12px;
    padding: 1.5rem;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.stat-card .stat-icon {
    font-size: 3rem;
    opacity: 0.2;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.stat-card .stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 0.85rem;
    opacity: 0.85;
    margin-top: 0.25rem;
}

.stat-card.green  { background: linear-gradient(135deg, #2d6a4f, #52b788); }
.stat-card.blue   { background: linear-gradient(135deg, #0d6efd, #6ea8fe); }
.stat-card.orange { background: linear-gradient(135deg, #fd7e14, #ffc107); }
.stat-card.red    { background: linear-gradient(135deg, #dc3545, #f77f8a); }
.stat-card.teal   { background: linear-gradient(135deg, #0dcaf0, #6edff6); }
.stat-card.purple { background: linear-gradient(135deg, #6f42c1, #a98eda); }

/* ============================================================
   TABELLE
   ============================================================ */
.table-hover tbody tr:hover {
    background: var(--accent);
}

.table th {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
}

/* ============================================================
   BADGE RUOLI
   ============================================================ */
.badge-ruolo-amministratore { background: #dc3545; }
.badge-ruolo-presidente     { background: #fd7e14; }
.badge-ruolo-cassiere       { background: #0d6efd; }

.badge-ruolo-socio          { background: #6c757d; }

/* ============================================================
   BADGE STATO
   ============================================================ */


/* ============================================================
   FORM
   ============================================================ */
.form-control:focus,
.form-select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 0.2rem rgba(82, 183, 136, 0.25);
}

.form-label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #495057;
}

/* ============================================================
   BOTTONI
   ============================================================ */
.btn-primary {
    background: var(--primary);
    border-color: var(--primary);
}

.btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.btn-outline-primary {
    color: var(--primary);
    border-color: var(--primary);
}

.btn-outline-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* ============================================================
   SIDEBAR (per pagine con sidebar)
   ============================================================ */
.page-with-sidebar {
    display: flex;
    gap: 0;
}

.sidebar {
    width: var(--sidebar-w);
    min-height: calc(100vh - 60px);
    background: #fff;
    border-right: 1px solid var(--border);
    padding: 1.5rem 1rem;
    flex-shrink: 0;
}

.sidebar .nav-link {
    color: var(--text-dark);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    margin-bottom: 2px;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background: var(--accent);
    color: var(--primary);
    font-weight: 600;
}

.sidebar .nav-link i {
    width: 20px;
    text-align: center;
    margin-right: 8px;
}

/* ============================================================
   SETUP WIZARD
   ============================================================ */
.setup-step {
    display: none;
}

.setup-step.active {
    display: block;
}

.step-indicator {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
}

.step-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    position: relative;
    z-index: 1;
}

.step-dot.active {
    background: var(--primary);
    color: #fff;
}

.step-dot.done {
    background: var(--primary-light);
    color: #fff;
}

.step-line {
    flex: 1;
    height: 3px;
    background: var(--border);
    align-self: center;
    margin: 0 -2px;
}

.step-line.done {
    background: var(--primary-light);
}

/* ============================================================
   CASSA - Movimenti
   ============================================================ */
.movimento-entrata { border-left: 4px solid #198754; }
.movimento-uscita  { border-left: 4px solid #dc3545; }

.importo-entrata { color: #198754; font-weight: 700; }
.importo-uscita  { color: #dc3545; font-weight: 700; }

.conto-5x1000 {
    border: 2px solid #ffc107;
    background: #fffdf0;
}

.scadenza-warning { color: #fd7e14; font-weight: 600; }
.scadenza-danger  { color: #dc3545; font-weight: 700; }

/* ============================================================
   REGISTRO ORE
   ============================================================ */
.ore-badge {
    background: var(--accent);
    color: var(--primary);
    padding: 0.25rem 0.6rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 0.85rem;
}

/* ============================================================
   NOTIFICHE
   ============================================================ */
.notifica-item {
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

.notifica-item.non-letta {
    border-left-color: var(--primary);
    background: var(--accent);
}

.notifica-item:hover {
    background: #f0f2f5;
}

/* ============================================================
   PERMESSI MATRIX
   ============================================================ */
.permessi-table th,
.permessi-table td {
    text-align: center;
    vertical-align: middle;
    font-size: 0.85rem;
}

.permessi-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.permesso-check {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    margin-top: auto;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
    .stat-card .stat-value { font-size: 1.5rem; }
    .sidebar { display: none; }
    .page-with-sidebar { flex-direction: column; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .navbar, .footer, .btn, .no-print { display: none !important; }
    .card { box-shadow: none !important; border: 1px solid #ddd !important; }
    body { background: #fff; }
}

/* ============================================================
   ANIMAZIONI
   ============================================================ */
.fade-in {
    animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   UTILITIES EXTRA
   ============================================================ */
.cursor-pointer { cursor: pointer; }
.text-primary-custom { color: var(--primary) !important; }
.bg-primary-custom-light { background: var(--accent) !important; }
.border-primary-custom { border-color: var(--primary) !important; }
.rounded-xl { border-radius: 12px !important; }
.fw-600 { font-weight: 600; }
/* Badge stato soci */
.badge-stato-attivo      { background-color: #198754 !important; }
.badge-stato-in_attesa   { background-color: #fd7e14 !important; }
.badge-stato-sospeso     { background-color: #ffc107 !important; color: #000 !important; }
.badge-stato-rifiutato   { background-color: #dc3545 !important; }
.badge-stato-scaduto     { background-color: #dc3545 !important; }
.badge-stato-eliminato   { background-color: #6c757d !important; }
.badge-stato-in_scadenza { background-color: #fd7e14 !important; color: #000 !important; }