/* ============================================================
   MedRunner — palette dal logo: blu #14568F, verde #4CB13A
   ============================================================ */
:root {
    --mr-blu: #14568F;
    --mr-blu-scuro: #0d3d68;
    --mr-blu-chiaro: #e8f1f9;
    --mr-verde: #4CB13A;
    --mr-verde-scuro: #3a942c;
    --mr-verde-scuro: #3d962e;
    --mr-verde-chiaro: #ebf7e8;
    --mr-grad: linear-gradient(135deg, #14568F 0%, #1d7ac2 100%);
    --mr-grad-verde: linear-gradient(135deg, #4CB13A 0%, #6ed05c 100%);
    --mr-ombra: 0 10px 40px -12px rgba(20, 86, 143, .25);
    --mr-radius: 1.25rem;
}

body {
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
    background:
        radial-gradient(1200px 500px at 110% -10%, var(--mr-blu-chiaro) 0%, transparent 60%),
        radial-gradient(900px 400px at -10% 110%, var(--mr-verde-chiaro) 0%, transparent 60%),
        #f7fafc;
    background-attachment: fixed;
    color: #21303d;
}

h1, h2, h3, h4, h5 { font-weight: 700; letter-spacing: -.02em; }

/* ---------- Navbar glass ---------- */
.navbar-mr {
    background: rgba(255, 255, 255, .75);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(20, 86, 143, .08);
    box-shadow: 0 4px 24px -12px rgba(20, 86, 143, .18);
}

.navbar-mr .navbar-brand img { height: 46px; transition: transform .25s; }
.navbar-mr .navbar-brand:hover img { transform: scale(1.05); }

.navbar-mr .nav-link {
    color: var(--mr-blu);
    font-weight: 600;
    border-radius: 2rem;
    padding: .45rem 1rem !important;
    transition: all .2s;
}

.navbar-mr .nav-link:hover { background: var(--mr-blu-chiaro); color: var(--mr-blu-scuro); }
.navbar-mr .nav-link.active { background: var(--mr-grad); color: #fff; box-shadow: var(--mr-ombra); }

/* ---------- Bottoni ---------- */
.btn { border-radius: 2rem; font-weight: 600; transition: all .2s; }

.btn-primary {
    background: var(--mr-grad);
    border: 0;
    box-shadow: 0 6px 20px -8px rgba(20, 86, 143, .55);
}
.btn-primary:hover, .btn-primary:focus {
    background: var(--mr-grad);
    filter: brightness(1.08);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(20, 86, 143, .6);
}

.btn-success {
    background: var(--mr-grad-verde);
    border: 0;
    box-shadow: 0 6px 20px -8px rgba(76, 177, 58, .55);
}
.btn-success:hover, .btn-success:focus {
    background: var(--mr-grad-verde);
    filter: brightness(1.06);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(76, 177, 58, .6);
}

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

/* ---------- Card ---------- */
.card {
    border: 0;
    border-radius: var(--mr-radius);
    box-shadow: var(--mr-ombra);
    overflow: hidden;
    transition: transform .25s, box-shadow .25s;
}

.card-lift:hover { transform: translateY(-6px); box-shadow: 0 18px 50px -14px rgba(20, 86, 143, .35); }

.card-header {
    background: var(--mr-grad);
    color: #fff;
    font-weight: 700;
    border: 0;
    padding: 1rem 1.4rem;
    letter-spacing: .01em;
}

.card-body { padding: 1.4rem; }

/* ---------- Form ---------- */
.form-control, .form-select {
    border-radius: .8rem;
    border-color: #dde7ef;
    padding: .6rem .9rem;
    transition: border-color .2s, box-shadow .2s;
}

.form-control:focus, .form-select:focus {
    border-color: var(--mr-verde);
    box-shadow: 0 0 0 .25rem rgba(76, 177, 58, .15);
}

.form-label { font-weight: 600; font-size: .85rem; color: var(--mr-blu-scuro); }

#nuovoClienteFields {
    border: 1px dashed rgba(20, 86, 143, .3) !important;
    background: var(--mr-blu-chiaro) !important;
    border-radius: .9rem !important;
}

/* ---------- Tabelle ---------- */
.table { --bs-table-hover-bg: var(--mr-blu-chiaro); }
.table thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #7b8fa1;
    border-bottom-width: 1px;
}
.table td { border-color: #eef3f7; }

/* ---------- Badge stato ---------- */
.badge {
    border-radius: 2rem;
    font-weight: 600;
    padding: .45em .9em;
    letter-spacing: .02em;
}
.badge.bg-primary { background: var(--mr-grad) !important; }
.badge.bg-success { background: var(--mr-grad-verde) !important; }
.badge.bg-warning { background: #fff5dd !important; color: #9a7218 !important; }
.badge .dot {
    display: inline-block; width: .5em; height: .5em;
    border-radius: 50%; background: currentColor;
    margin-right: .4em; vertical-align: middle;
}
.badge.bg-warning .dot { animation: mr-pulse 1.4s infinite; }

@keyframes mr-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
}

/* ---------- Hero ---------- */
.hero { padding: 4.5rem 0 2rem; text-align: center; }
.hero img.logo-hero { max-width: 400px; width: 86%; animation: mr-float 5s ease-in-out infinite; }
.hero h1 {
    font-size: clamp(1.9rem, 4.5vw, 3.2rem);
    background: var(--mr-grad);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes mr-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.step-icon {
    width: 64px; height: 64px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 1.2rem;
    font-size: 1.6rem;
    color: #fff;
    background: var(--mr-grad);
    box-shadow: var(--mr-ombra);
    margin-bottom: 1rem;
}
.step-icon.verde { background: var(--mr-grad-verde); }

/* ---------- Animazione ingresso ---------- */
.fade-up { animation: mr-fade-up .6s ease both; }
.fade-up-1 { animation-delay: .1s; }
.fade-up-2 { animation-delay: .22s; }
.fade-up-3 { animation-delay: .34s; }

@keyframes mr-fade-up {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ---------- Toast ---------- */
#mr-toast-container { position: fixed; top: 1.2rem; right: 1.2rem; z-index: 1080; }
#mr-toast-container .toast { border-radius: 1rem; box-shadow: 0 14px 40px -10px rgba(0, 0, 0, .35); }

/* ---------- Utility ---------- */
.text-mr-blu { color: var(--mr-blu); }
.text-mr-verde { color: var(--mr-verde); }

.avatar-cliente {
    width: 38px; height: 38px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--mr-blu-chiaro);
    color: var(--mr-blu);
    font-weight: 700;
    font-size: .8rem;
}

footer.footer-mr {
    background: var(--mr-grad);
    color: #fff;
    border-radius: 1.5rem 1.5rem 0 0;
}

.empty-state { text-align: center; padding: 2.5rem 1rem; color: #8aa0b3; }
.empty-state .bi { font-size: 2.6rem; display: block; margin-bottom: .6rem; opacity: .5; }