/* ==========================================================================
   Area Clienti Speedy - tema Bootstrap 5
   --------------------------------------------------------------------------
   THEMING PER PORTALE: basta cambiare le variabili qui sotto.
   In alternativa creare un theme-override.css caricato dopo questo file.
   ========================================================================== */

:root {
    --ac-primary: #1a6fc9;        /* colore principale del portale */
    --ac-primary-dark: #14548f;   /* variante scura (hover) */
    --ac-primary-soft: #e8f1fb;   /* variante chiarissima (sfondi, pillole) */
    --ac-accent: #f39c12;         /* colore secondario / accento */
    --ac-bg: #f4f6f9;             /* sfondo pagina */
    --ac-surface: #ffffff;        /* sfondo card e navbar */
    --ac-text: #1f2937;           /* testo principale */
    --ac-text-muted: #6b7280;     /* testo secondario */
    --ac-footer-bg: #1f2937;      /* sfondo footer */
    --ac-footer-text: #cbd5e1;    /* testo footer */
    --ac-radius: 14px;            /* raggio angoli card */
    --ac-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .05);
    --ac-shadow-hover: 0 6px 16px rgba(16, 24, 40, .12);
}

/* ---------- base ---------- */

html, body {
    height: 100%;
}

body {
    background: var(--ac-bg);
    color: var(--ac-text);
    font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

form#form1 {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

main.ac-main {
    flex: 1 0 auto;
    padding: 1.5rem 0 3rem;
}

a {
    color: var(--ac-primary);
}

a:hover {
    color: var(--ac-primary-dark);
}

/* ---------- navbar ---------- */

.ac-navbar {
    background: var(--ac-surface);
    border-bottom: 1px solid rgba(16, 24, 40, .08);
    box-shadow: var(--ac-shadow);
    padding-top: .4rem;
    padding-bottom: .4rem;
}

.ac-navbar .navbar-brand img {
    height: 40px;
    width: auto;
}

.ac-navbar .nav-link {
    color: var(--ac-text);
    font-weight: 500;
    border-radius: 999px;
    padding: .45rem .9rem;
    margin: 0 .1rem;
    transition: background-color .15s ease, color .15s ease;
}

.ac-navbar .nav-link i {
    margin-right: .3rem;
    color: var(--ac-primary);
}

.ac-navbar .nav-link:hover {
    background: var(--ac-primary-soft);
    color: var(--ac-primary-dark);
}

.ac-navbar .nav-link.active {
    background: var(--ac-primary);
    color: #fff;
}

.ac-navbar .nav-link.active i {
    color: #fff;
}

.ac-user-chip {
    color: var(--ac-text-muted);
    font-size: .9rem;
}

.ac-user-chip i {
    font-size: 1.2rem;
    color: var(--ac-primary);
    vertical-align: -3px;
    margin-right: .25rem;
}

.ac-btn-logout {
    border: 1px solid var(--ac-primary);
    color: var(--ac-primary);
    border-radius: 999px;
    padding: .3rem 1rem;
    font-weight: 500;
    text-decoration: none;
}

.ac-btn-logout:hover {
    background: var(--ac-primary);
    color: #fff;
}

/* ---------- intestazione di pagina ---------- */

.ac-page-head {
    background: linear-gradient(135deg, var(--ac-primary-soft) 0%, var(--ac-bg) 70%);
    border-bottom: 1px solid rgba(16, 24, 40, .05);
}

.ac-page-head:empty,
.ac-page-head .container:empty {
    display: none;
}

.ac-page-head h1, .ac-page-head h2, .ac-page-head h3 {
    margin: 0;
    padding: 1.4rem 0;
    font-weight: 600;
    color: var(--ac-primary-dark);
}

/* ---------- card ---------- */

.card {
    border: 0;
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow);
}

.card .card-header {
    background: transparent;
    border-bottom: 1px solid rgba(16, 24, 40, .06);
    font-weight: 600;
}

/* ---------- pulsanti (override variabili Bootstrap 5.3) ---------- */

.btn-primary {
    --bs-btn-bg: var(--ac-primary);
    --bs-btn-border-color: var(--ac-primary);
    --bs-btn-hover-bg: var(--ac-primary-dark);
    --bs-btn-hover-border-color: var(--ac-primary-dark);
    --bs-btn-active-bg: var(--ac-primary-dark);
    --bs-btn-active-border-color: var(--ac-primary-dark);
}

.btn-outline-primary {
    --bs-btn-color: var(--ac-primary);
    --bs-btn-border-color: var(--ac-primary);
    --bs-btn-hover-bg: var(--ac-primary);
    --bs-btn-hover-border-color: var(--ac-primary);
    --bs-btn-active-bg: var(--ac-primary-dark);
    --bs-btn-active-border-color: var(--ac-primary-dark);
}

.btn {
    border-radius: 10px;
}

/* ---------- tabelle ---------- */

.table {
    background: var(--ac-surface);
}

.table thead th {
    background: var(--ac-primary-soft);
    color: var(--ac-primary-dark);
    font-weight: 600;
    border-bottom: 0;
}

/* ---------- list group (modulistica e simili) ---------- */

.list-group {
    border-radius: var(--ac-radius);
    box-shadow: var(--ac-shadow);
}

.list-group-item {
    border-color: rgba(16, 24, 40, .06);
    transition: background-color .15s ease, box-shadow .15s ease;
}

a.list-group-item:hover {
    background: var(--ac-primary-soft);
    box-shadow: var(--ac-shadow-hover);
    z-index: 1;
}

/* ---------- form ---------- */

.form-control, .form-select {
    border-radius: 10px;
}

.form-control:focus, .form-select:focus {
    border-color: var(--ac-primary);
    box-shadow: 0 0 0 .2rem var(--ac-primary-soft);
}

/* ---------- footer ---------- */

.ac-footer {
    flex-shrink: 0;
    background: var(--ac-footer-bg);
    color: var(--ac-footer-text);
    padding: 1.2rem 0;
    font-size: .875rem;
    text-align: center;
}

.ac-footer a {
    color: #fff;
}