/* Hub Pagamenti ELIS — stylesheet condiviso */

:root {
    --elis-blue: #5B93CE;
    --elis-dark-blue: #2271b1;
    --elis-navy: #16324f;
    --elis-yellow: #F9B233;
    --elis-light-blue: #EAF2FB;
    --elis-light-gray: #F6F7F9;
    --elis-border: #E7EAEE;
    --elis-text: #1F2733;
    --elis-text-muted: #6B7685;
    --elis-success-bg: #E3F6EA;
    --elis-success-fg: #1E7A43;
    --elis-danger-bg: #FCEAEA;
    --elis-danger-fg: #B1302E;
    --elis-warning-bg: #FFF6E5;
    --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
    --shadow-lg: 0 16px 40px rgba(16, 24, 40, 0.10);
    --radius-lg: 18px;
    --radius-md: 12px;
    --radius-sm: 8px;
}

* { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; }

/* Colonna centrale un po' più larga delle dimensioni di default di Bootstrap,
   per ridurre lo scroll orizzontale sulle tabelle con molte colonne (es. Stato Donazioni). */
@media (min-width: 1200px) {
    .container { max-width: 1320px; }
}
@media (min-width: 1400px) {
    .container { max-width: 1600px; }
}

body {
    background: var(--elis-light-gray);
    color: var(--elis-text);
    -webkit-font-smoothing: antialiased;
}

/* ---------- Navbar ---------- */
.elis-navbar {
    background: #fff;
    border-bottom: 1px solid var(--elis-border);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: 20;
}

.elis-navbar .navbar-brand img { display: block; }

.elis-navbar .elis-title {
    color: var(--elis-text);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
}

.elis-navbar .elis-title .elis-title-accent {
    color: var(--elis-dark-blue);
    font-weight: 700;
}

/* ---------- Buttons ---------- */
.btn { font-weight: 600; letter-spacing: -0.01em; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .05s ease; }
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--elis-dark-blue);
    border-color: var(--elis-dark-blue);
    border-radius: var(--radius-md);
}
.btn-primary:hover, .btn-primary:focus { background: var(--elis-blue); border-color: var(--elis-blue); }

.btn-outline-secondary {
    border-radius: var(--radius-md);
    color: var(--elis-text-muted);
    border-color: var(--elis-border);
}
.btn-outline-secondary:hover { background: var(--elis-light-blue); border-color: var(--elis-blue); color: var(--elis-dark-blue); }

.btn-danger { border-radius: var(--radius-md); font-weight: 600; }
.btn-success { border-radius: var(--radius-sm) !important; font-weight: 600; }
.btn-outline-danger { border-radius: var(--radius-sm) !important; }
.btn-outline-light { border-radius: var(--radius-md); font-weight: 500; }
.btn-sm { border-radius: var(--radius-sm) !important; font-size: 0.8rem; padding: 0.35rem 0.85rem; }

.btn-icon {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    line-height: 1;
}

/* ---------- Cards ---------- */
.card {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.card-header {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    border-bottom: 1px solid var(--elis-border);
    background: #fff !important;
    padding: 1.5rem 1.75rem !important;
}
.card-header h5 { color: var(--elis-text); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }

.section-tag {
    display: inline-block;
    background: var(--elis-light-blue);
    color: var(--elis-dark-blue);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: 20px;
    margin-bottom: 0.6rem;
}

.count-pill {
    background: var(--elis-light-gray);
    color: var(--elis-text-muted);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ---------- Tables ---------- */
.table { margin-bottom: 0; }
.table thead th {
    background: var(--elis-light-gray);
    color: var(--elis-text-muted);
    font-weight: 700;
    border: none;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.9rem 1rem;
}
.table tbody td {
    padding: 0.95rem 1rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--elis-border);
    font-size: 0.9rem;
}
.table tbody tr:last-child td { border-bottom: none; }
.table-hover tbody tr:hover { background-color: var(--elis-light-blue); }
.table-warning td { background-color: var(--elis-warning-bg) !important; }

/* ---------- Badges ---------- */
.badge { border-radius: 8px; font-weight: 600; font-size: 0.74rem; padding: 5px 10px; letter-spacing: 0.01em; }
.crm-ok, .badge.bg-success { background: var(--elis-success-bg) !important; color: var(--elis-success-fg) !important; }
.crm-err, .badge.bg-danger { background: var(--elis-danger-bg) !important; color: var(--elis-danger-fg) !important; }
.badge.bg-secondary { background: #ECEFF3 !important; color: var(--elis-text-muted) !important; }
.badge.bg-info { background: var(--elis-light-blue) !important; color: var(--elis-dark-blue) !important; }
.badge.bg-primary { background: var(--elis-light-blue) !important; color: var(--elis-dark-blue) !important; }

.legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }

/* ---------- Forms ---------- */
.form-select, .form-control {
    border-radius: var(--radius-sm);
    border-color: var(--elis-border);
}
.form-select:focus, .form-control:focus {
    border-color: var(--elis-blue);
    box-shadow: 0 0 0 3px rgba(91, 147, 206, 0.18);
}
.form-floating label { color: var(--elis-text-muted); }

/* ---------- "Modello" filter cards ---------- */
.modello-card {
    display: block;
    border-radius: var(--radius-md);
    border: 1px solid var(--elis-border);
    padding: 1.4rem;
    text-decoration: none;
    color: var(--elis-text);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
    height: 100%;
    background: #fff;
}
.modello-card:hover {
    border-color: var(--elis-blue);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
    color: var(--elis-text);
}
.modello-card .nome { font-weight: 700; font-size: 1.05rem; color: var(--elis-dark-blue); margin-bottom: 0.3rem; }

/* ---------- Detail panel / raw JSON ---------- */
.dettaglio-panel { background: var(--elis-light-gray); }
.dettaglio-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--elis-text-muted); font-weight: 700; margin-bottom: 2px; }
.dettaglio-value { font-size: 0.88rem; margin-bottom: 0.75rem; }
.json-cell {
    max-width: 100%;
    white-space: pre-wrap;
    word-break: break-all;
    font-size: 0.76rem;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    color: var(--elis-text-muted);
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--elis-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    transition: border-color .15s ease;
}
.json-cell:hover { border-color: var(--elis-blue); }

/* ---------- Empty state ---------- */
.empty-state { text-align: center; padding: 4rem 1rem; color: var(--elis-text-muted); }
.empty-state .empty-icon { font-size: 2rem; margin-bottom: 0.75rem; opacity: 0.5; }

/* ---------- Auth pages (login / reset password) ---------- */
body.auth-page {
    background: linear-gradient(135deg, #EAF2FB 0%, #F6F7F9 100%);
    min-height: 100vh;
}
.accent-bar {
    height: 4px;
    background: linear-gradient(90deg, var(--elis-blue), var(--elis-yellow));
    border-radius: 2px 2px 0 0;
}
.elis-link { color: var(--elis-dark-blue); text-decoration: none; font-weight: 500; }
.elis-link:hover { color: var(--elis-blue); }

/* ---------- Dialogs ---------- */
dialog {
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2rem;
    max-width: 440px;
    width: 100%;
}
dialog::backdrop { background: rgba(16, 24, 40, 0.45); backdrop-filter: blur(2px); }

/* ---------- App shell: sidebar + contenuto ---------- */
body.has-sidebar { padding-left: 240px; }

.hub-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: 240px;
    background: #fff;
    border-right: 1px solid var(--elis-border);
    border-top: 3px solid var(--elis-blue);
    display: flex;
    flex-direction: column;
    padding: 1.25rem 0.9rem;
    z-index: 30;
}
.hub-brand {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--elis-text);
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0 0.5rem 1.25rem;
    border-bottom: 1px solid var(--elis-border);
    margin-bottom: 1rem;
}
.hub-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.hub-nav-link {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    border-radius: var(--radius-sm);
    color: var(--elis-text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}
.hub-nav-link:hover { background: var(--elis-light-blue); color: var(--elis-dark-blue); }
.hub-nav-link.active { background: var(--elis-light-blue); color: var(--elis-dark-blue); }
.hub-nav-link i { font-size: 1.05rem; }
.hub-user { border-top: 1px solid var(--elis-border); padding-top: 0.9rem; }
.hub-user-name { font-weight: 700; font-size: 0.88rem; padding: 0 0.75rem; }
.hub-user-role { font-size: 0.75rem; color: var(--elis-text-muted); padding: 0 0.75rem 0.5rem; }
.hub-logout:hover { background: var(--elis-danger-bg); color: var(--elis-danger-fg); }

.hub-content { padding: 2rem; max-width: 1600px; }
.hub-page-title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1.25rem; }
.hub-toast { border-radius: var(--radius-md); box-shadow: var(--shadow-md); }

@media (max-width: 991.98px) {
    body.has-sidebar { padding-left: 0; padding-top: 56px; }
    .hub-sidebar {
        inset: 0 0 auto 0;
        width: 100%;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
        padding: 0.5rem 0.75rem;
        border-right: none;
    }
    .hub-brand { flex-direction: row; border: none; margin: 0; padding: 0 0.75rem 0 0; white-space: nowrap; }
    .hub-brand span { display: none; }
    .hub-nav { flex-direction: row; flex: none; }
    .hub-nav-link { white-space: nowrap; }
    .hub-user { border: none; padding: 0; margin-left: auto; display: flex; align-items: center; }
    .hub-user-name, .hub-user-role { display: none; }
    .hub-content { padding: 1rem; }
}

/* ---------- Modifica inline di riga ---------- */
.edit-row input.form-control, .edit-row select.form-select, .edit-row [data-edit-save], .edit-row [data-edit-cancel] { display: none; }
.edit-row.editing input.form-control, .edit-row.editing select.form-select { display: block; }
.edit-row.editing [data-edit-save], .edit-row.editing [data-edit-cancel] { display: inline-block; }
.edit-row.editing [data-edit-start], .edit-row.editing td > span { display: none; }
.filtro-modello { min-width: 200px; }
.email-cell { max-width: 220px; }

/* ---------- Dashboard ---------- */
.kpi-card { text-align: center; padding: 1.25rem 1rem; }
.kpi-value { font-size: 1.8rem; font-weight: 700; color: var(--elis-dark-blue); }
.kpi-label { font-size: 0.8rem; color: var(--elis-text-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.chart-wrap { position: relative; height: 320px; }
.chart-wrap-sm { position: relative; height: 280px; }
.auth-box { max-width: 440px; }
.sticky-card { top: 1.5rem; }

/* ---------- Intestazioni ordinabili / paginazione ---------- */
.sort-link { color: inherit; text-decoration: none; white-space: nowrap; }
.sort-link i { font-size: 0.7rem; opacity: 0.45; margin-left: 2px; }
.sort-link.active, .sort-link.active i { color: var(--elis-dark-blue); opacity: 1; }
.pagination .page-link { color: var(--elis-dark-blue); border-color: var(--elis-border); }
.pagination .page-item.active .page-link { background: var(--elis-dark-blue); border-color: var(--elis-dark-blue); color: #fff; }
.dettaglio-riga { margin-bottom: 1rem; }
.dettaglio-sezione { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--elis-dark-blue); font-weight: 700; margin: 1.25rem 0 0.5rem; border-bottom: 1px solid var(--elis-border); padding-bottom: 4px; }
#dettaglioDonazione { width: 480px; max-width: 100vw; }

/* ---------- Dashboard: monitoraggio ---------- */
.dash-sezione { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.9rem; }
.kpi-link { text-decoration: none; color: inherit; display: block; transition: box-shadow .15s ease, transform .15s ease; }
.kpi-link:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); color: inherit; }
.kpi-sub { font-size: 0.85rem; font-weight: 600; color: var(--elis-text-muted); margin-top: 2px; }
.kpi-attenzione { border-left: 4px solid var(--elis-yellow); }
.kpi-errore { border-left: 4px solid var(--elis-danger-fg); }
.kpi-errore .kpi-value { color: var(--elis-danger-fg); }

/* ---------- Barra filtri a griglia ---------- */
.filtri-bar {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    align-items: end;
}
.filtri-bar label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--elis-text-muted);
    margin-bottom: 0.25rem;
}
.filtri-bar .f-4 { grid-column: span 4; }
.filtri-bar .f-2 { grid-column: span 2; }
.filtri-bar .f-azioni { grid-column: 5 / -1; display: flex; gap: 0.5rem; justify-content: flex-end; }
@media (max-width: 1199.98px) {
    .filtri-bar { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .filtri-bar .f-4 { grid-column: span 6; }
    .filtri-bar .f-2 { grid-column: span 2; }
    .filtri-bar .f-azioni { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .filtri-bar .f-2 { grid-column: span 3; }
}