/*
 * custom.css
 * Override medicale del tema Light Bootstrap Dashboard 1.3.1
 * Bootstrap 3.3.7 — non modificare light-bootstrap-dashboard.css
 *
 * Palette medica:
 *   Primary (btn-info / link / sidebar) : #1a7abf  (blu medicale)
 *   Primary dark (hover)                : #155f96
 *   Primary light (accento)             : #e8f4fb
 *   Success                             : #2eaf6e
 *   Warning                             : #f0a500
 *   Danger                              : #e03c3c
 *   Teal (label clinica)                : #0d8a8a
 *   Body bg                             : #f5f7fa
 *   Sidebar bg gradient                 : #1a3a5c → #0f2540
 */


/* ================================================================
   0. CSS CUSTOM PROPERTIES
   ================================================================ */
:root {
    --ink:        #1c2b3a;
    --ink-light:  #4a6070;
    --ink-faint:  #8fa5b4;
    --sage:       #4a8c6f;
    --sage-dark:  #3d7a5f;
    --sage-light: #e8f3ee;
    --sage-mid:   #c2ddd0;
    --success:    #2eaf6e;
    --warning:    #e8c84a;
    --danger:     #c0392b;
    --paper:      #fafaf8;
    --card:       #ffffff;
    --rule:       #e5e8ea;
    --radius:     10px;
    --shadow-sm:  0 2px 8px  rgba(28,43,58,.07);
    --shadow:     0 4px 16px rgba(28,43,58,.09);
    --shadow-lg:  0 6px 32px rgba(28,43,58,.12);
}


/* ================================================================
   1. TIPOGRAFIA GLOBALE
      Sovrascrive "Roboto" del tema originale su tutti i selettori.
   ================================================================ */
body,
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
p, .navbar, .brand, .btn-simple, .alert,
a, .td-name, td, button.close,
.form-control, .input-group-addon, .tagsinput,
select, input, textarea, button,
.dropdown-menu, .table {
    font-family: 'DM Sans', Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Titoli → Libre Baskerville */
h1, .h1, h2, .h2, h3, .h3, h4, .h4,
.card .header h4,
.panel-title,
.navbar-brand,
.modal-title,
.card-stats .numbers strong,
.card-stats .numbers > span {
    font-family: 'Libre Baskerville', serif;
}

/* Scala tipografica */
h1, .h1 { font-size: 36px; font-weight: 700; margin: 24px 0 12px; }
h2, .h2 { font-size: 28px; font-weight: 700; margin: 20px 0 10px; }
h3, .h3 { font-size: 22px; font-weight: 700; margin: 18px 0 8px;  }
h4, .h4 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 14px 0 6px; }
h5, .h5 { font-size: 15px; font-weight: 600; margin-bottom: 10px; }
h6, .h6 { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; }

p { font-size: 13px; color: #0b0b0b; }

.sidebar .nav li > a p {
    color: white !important;
}

.text-muted              { color: var(--ink-faint) !important; }
.text-primary            { color: var(--ink)       !important; }
.text-info,
.text-info:hover         { color: var(--sage)      !important; }
.text-success,
.text-success:hover      { color: var(--success)   !important; }
.text-warning,
.text-warning:hover      { color: #b89a00          !important; }
.text-danger,
.text-danger:hover       { color: var(--danger)    !important; }


input[type=date].form-control, input[type=time].form-control, input[type=datetime-local].form-control, input[type=month].form-control {
    line-height: inherit;
}

/* ================================================================
   2. BODY / WRAPPER
   ================================================================ */
body, .wrapper { background-color: var(--paper); color: var(--ink); }
a              { color: var(--sage); }
a:hover,
a:focus        { color: var(--sage-dark); text-decoration: none; }



/* ================================================================
   COLORI GLOBALI — sovrascrivono il rosa originale del tema
   ================================================================ */

/* Link */
a                       { color: #1a7abf; }
a:hover, a:focus        { color: #155f96; }

/* text-info */
.text-info,
.text-info:hover        { color: #1a7abf !important; }

/* ================================================================
   BOTTONI — btn-info (usato come pulsante principale in tutto il MVC)
   ================================================================ */
.btn-info               { border-color: #1a7abf; color: #1a7abf; }
.btn-info:hover,
.btn-info:focus,
.btn-info:active,
.btn-info.active        { background-color: transparent; color: #155f96; border-color: #155f96; }

.btn-info.btn-fill                        { background-color: #1a7abf; color: #fff; opacity: 1; }
.btn-info.btn-fill:hover,
.btn-info.btn-fill:focus,
.btn-info.btn-fill:active,
.btn-info.btn-fill.active                 { background-color: #155f96; color: #fff; }

.btn-info.disabled,
.btn-info[disabled],
.btn-info.disabled:hover,
.btn-info[disabled]:hover                 { background-color: transparent; border-color: #1a7abf; }

.btn-info .caret                          { border-top-color: #1a7abf; }
.btn-info.btn-fill .caret                 { border-top-color: #fff; }

/* ================================================================
   SIDEBAR — gradiente blu medicale
   ================================================================ */
.sidebar:after,
body > .navbar-collapse:after {
    background: #1a3a5c;
    background: -webkit-linear-gradient(top, #1a3a5c 0%, #0f2540 100%);
    background:    -moz-linear-gradient(top, #1a3a5c 0%, #0f2540 100%);
    background:         linear-gradient(to bottom, #1a3a5c 0%, #0f2540 100%);
    background-size: 150% 150%;
    opacity: 1;
}

/* Voce sidebar attiva */
.sidebar .nav li.active > a {
    background: rgba(26, 122, 191, 0.35);
    color: #fff;
}

/* ================================================================
   NAVBAR
   ================================================================ */
.navbar-default             { background-color: #fff; border-bottom: 1px solid #e4eaf0; }
.navbar-default .navbar-brand { color: #1a7abf; font-weight: 600; }

/* ================================================================
   CARD / PANEL — header accent
   ================================================================ */
.card .header h4           { color: #1a3a5c; }
.card                      { border-radius: 6px; }

/* ================================================================
   BODY BACKGROUND
   ================================================================ */
body { background-color: #f5f7fa; }

/* ================================================================
   LABEL CLINICHE — classe aggiuntiva per badge settore medico
   ================================================================ */
.label-medical             { background-color: #0d8a8a; color: #fff; }
.label-clinical            { background-color: #1a7abf; color: #fff; }

/* ================================================================
   STATO PRENOTAZIONE — badge colorati
   ================================================================ */
.badge-attesa              { background-color: #f0a500; color: #fff; }
.badge-confermata          { background-color: #2eaf6e; color: #fff; }
.badge-annullata           { background-color: #e03c3c; color: #fff; }
.badge-completata          { background-color: #6c757d; color: #fff; }

/* ================================================================
   FORM CONTROLS — focus blu medicale
   ================================================================ */
.form-control:focus {
    border-color: #1a7abf;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(26,122,191,.4);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px rgba(26,122,191,.4);
    outline: 0;
}

/* ================================================================
   INPUT GROUP ADDON — coerente col focus
   ================================================================ */
.input-group-addon {
    background-color: #f0f4f8;
    border-color: #d1dce6;
    color: #5a7a9a;
}

/* ================================================================
   PANEL HEADING — usato nella login panel e nei card
   ================================================================ */
.panel-heading {
    background-color: #1a7abf;
    color: #fff;
    border-radius: 5px 5px 0 0;
}

/* ================================================================
   TABLE — header accent leggero
   ================================================================ */
.table > thead > tr > th {
    color: #1a3a5c;
    border-bottom-color: #c5d8e8;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ================================================================
   FONT-DISPLAY: SWAP — elimina warning "slow network" per font locali
   Aggiunge font-display:swap agli @font-face di fontawesome e pe-icon
   senza modificare i file vendor originali.
   ================================================================ */

/* FontAwesome 4.x */
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.woff2') format('woff2'),
         url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff');
    font-display: swap;
}

/* Pe-icon-7-stroke */
@font-face {
    font-family: 'Pe-icon-7-stroke';
    src: url('../fonts/Pe-icon-7-stroke.woff') format('woff');
    font-display: swap;
}

/* ================================================================
   CARD STATS — card con icona grande + numero (dashboard KPI)
   Mancanti nel tema, aggiunte qui.
   Uso: <div class="card card-stats">
   ================================================================ */

.card-stats .content         { padding: 15px 20px; }
.card-stats .numbers         { text-align: right; }
.card-stats .numbers p       { font-size: 14px; color: #9a9a9a; margin: 0 0 4px; font-weight: 400; }
.card-stats .numbers strong,
.card-stats .numbers > span  { font-size: 32px; font-weight: 300; color: #1a3a5c; line-height: 1; }
.card-stats .footer          { padding: 0 20px 10px; }
.card-stats .footer hr       { margin: 0 0 8px; border-color: #eee; }
.card-stats .footer .stats   { font-size: 12px; color: #9a9a9a; }
.card-stats .footer .stats i { margin-right: 4px; }
.card-stats .footer a.stats  { color: #9a9a9a; }
.card-stats .footer a.stats:hover { color: #1a7abf; }

/* ================================================================
   ICON-BIG — icona grande nella card stats (colonna sinistra)
   Mancante nel tema, aggiunta qui.
   Uso: <div class="icon-big text-center icon-info">
        <i class="fa fa-user-md"></i>
   ================================================================ */

.icon-big {
    font-size: 48px;
    line-height: 56px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 4px auto;
}
.icon-big i { font-size: 28px; line-height: 1; width: auto; }

/* Varianti colore — coerenti con la palette medica */
.icon-big.icon-info    { background: rgba(26, 122, 191, 0.12); color: #1a7abf; }
.icon-big.icon-success { background: rgba(46, 175, 110, 0.12); color: #2eaf6e; }
.icon-big.icon-warning { background: rgba(240, 165,   0, 0.12); color: #f0a500; }
.icon-big.icon-danger  { background: rgba(224,  60,  60, 0.12); color: #e03c3c; }
.icon-big.icon-default { background: rgba(108, 117, 125, 0.12); color: #6c757d; }

/* ================================================================
   BTN-CRM — sistema bottoni principale del CRM
   Sostituisce btn btn-info btn-fill ecc. con classi semantiche.

   Varianti:
     .btn-crm--primary   Azione principale (salva, aggiungi)
     .btn-crm--secondary Azione secondaria (modifica)
     .btn-crm--danger    Azione distruttiva (elimina, disattiva)
     .btn-crm--default   Azione neutra (torna, annulla)
     .btn-crm--success   Conferma/attivazione
     .btn-crm--ghost     Outline senza sfondo

   Modificatori:
     .btn-crm--sm        Versione piccola (tabelle, toolbar)
     .btn-crm--block     Larghezza piena

   Uso:
     <button class="btn-crm btn-crm--primary">
         <i class="fa fa-save"></i> Salva
     </button>
   ================================================================ */
/* ================================================================
   6. CARD
   ================================================================ */
.card {
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: none;
    background: var(--card);
    margin-bottom: 20px;
}
.card .header { padding: 18px 22px 0; }
.card .header h4 {
    font-family: 'Libre Baskerville', serif;
    color: var(--ink);
    font-size: 16px; font-weight: 700;
    margin: 0 0 4px; line-height: 1.3;
}
.card .header p { font-size: 13px; color: var(--ink-faint); margin: 0; line-height: 1.5; }
.card .content  { padding: 18px 22px 22px; }
.card .footer   { padding: 0 22px 16px; }
.card .footer hr { margin: 0 0 12px; border-color: var(--rule); }

/* Card stats KPI */
.card-stats .content         { padding: 16px 20px; }
.card-stats .numbers         { text-align: right; }
.card-stats .numbers p       { font-size: 12px; color: var(--ink-faint); margin: 0 0 4px; font-weight: 500; text-transform: uppercase; letter-spacing: .07em; }
.card-stats .numbers strong,
.card-stats .numbers > span  { font-family: 'Libre Baskerville', serif; font-size: 30px; font-weight: 400; color: var(--ink); line-height: 1; }
.card-stats .footer          { padding: 0 20px 12px; }
.card-stats .footer hr       { margin: 0 0 8px; border-color: var(--rule); }
.card-stats .footer .stats   { font-size: 12px; color: var(--ink-faint); }
.card-stats .footer .stats i { margin-right: 4px; }
.card-stats .footer a.stats  { color: var(--ink-faint); }
.card-stats .footer a.stats:hover { color: var(--sage); }


/* ================================================================
   7. ICON-BIG
   ================================================================ */
.icon-big {
    font-size: 48px; line-height: 56px;
    width: 56px; height: 56px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    margin: 4px auto;
}
.icon-big i { font-size: 26px; line-height: 1; width: auto; }

.icon-big.icon-info    { background: rgba(74,140,111,.12); color: var(--sage); }
.icon-big.icon-success { background: rgba(46,175,110,.12); color: var(--success); }
.icon-big.icon-warning { background: rgba(232,200,74,.15); color: #b89a00; }
.icon-big.icon-danger  { background: rgba(192,57,43,.10);  color: var(--danger); }
.icon-big.icon-default { background: rgba(143,165,180,.15); color: var(--ink-faint); }


/* ================================================================
   8. BOTTONI BOOTSTRAP
   ================================================================ */
.btn {
    font-family: 'DM Sans', sans-serif;
    font-weight: 500; font-size: 13px;
    border-width: 1.5px;
    border-radius: 7px;
    padding: 8px 18px;
    letter-spacing: .01em;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
    opacity: 1;
}
.btn:hover  { transform: translateY(-1px); opacity: 1; }
.btn:active { transform: translateY(0); box-shadow: none; }
.btn:focus  { outline: none; opacity: 1; }

/* btn-info → verde salvia (primary del CRM) */
.btn-info                     { border-color: var(--sage); color: var(--sage); background-color: transparent; }
.btn-info:hover, .btn-info:focus, .btn-info:active, .btn-info.active { background-color: transparent; color: var(--sage-dark); border-color: var(--sage-dark); }
.btn-info.btn-fill            { background-color: var(--sage); border-color: var(--sage); color: #fff; opacity: 1; box-shadow: 0 2px 8px rgba(74,140,111,.28); }
.btn-info.btn-fill:hover,
.btn-info.btn-fill:focus,
.btn-info.btn-fill:active,
.btn-info.btn-fill.active     { background-color: var(--sage-dark); border-color: var(--sage-dark); color: #fff; box-shadow: 0 4px 14px rgba(74,140,111,.38); }
.btn-info.disabled,
.btn-info[disabled]           { background-color: transparent; border-color: var(--sage); opacity: .5; }
.btn-info .caret              { border-top-color: var(--sage); }
.btn-info.btn-fill .caret     { border-top-color: #fff; }

/* btn-success */
.btn-success                  { border-color: var(--success); color: var(--success); background: transparent; }
.btn-success:hover            { color: #259059; border-color: #259059; background: transparent; }
.btn-success.btn-fill         { background: var(--success); border-color: var(--success); color: #fff; opacity: 1; }
.btn-success.btn-fill:hover   { background: #259059; border-color: #259059; }
.btn-success .caret           { border-top-color: var(--success); }

/* btn-warning */
.btn-warning                  { border-color: #b89a00; color: #b89a00; background: transparent; }
.btn-warning.btn-fill         { background: var(--warning); border-color: var(--warning); color: var(--ink); opacity: 1; }
.btn-warning.btn-fill:hover   { background: #d4b430; border-color: #d4b430; }

/* btn-danger */
.btn-danger                   { border-color: var(--danger); color: var(--danger); background: transparent; }
.btn-danger:hover             { color: #a93226; border-color: #a93226; background: transparent; }
.btn-danger.btn-fill          { background: var(--danger); border-color: var(--danger); color: #fff; opacity: 1; }
.btn-danger.btn-fill:hover    { background: #a93226; border-color: #a93226; }

/* btn-default */
.btn-default                  { border-color: var(--rule); color: var(--ink-light); background: var(--card); }
.btn-default:hover,
.btn-default:focus            { background: var(--sage-light); border-color: var(--sage-mid); color: var(--sage); }

/* btn-primary */
.btn-primary                  { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-primary.btn-fill         { background: var(--ink); border-color: var(--ink); color: #fff; opacity: 1; }
.btn-primary.btn-fill:hover   { background: #0f1d29; border-color: #0f1d29; }


/* ================================================================
   9. BTN-CRM — sistema bottoni semantico
   ================================================================ */
.btn-crm {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 13px; font-weight: 500; line-height: 1.4;
    border: 1.5px solid transparent;
    border-radius: 7px;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .15s, border-color .15s, box-shadow .15s, transform .1s;
    letter-spacing: .01em;
}
.btn-crm:hover  { text-decoration: none; transform: translateY(-1px); }
.btn-crm:active { transform: translateY(0); }
.btn-crm:focus  { outline: none; }
.btn-crm i      { font-size: 13px; width: auto; }

.btn-crm--primary   { background: var(--sage);    border-color: var(--sage);    color: #fff;          box-shadow: 0 2px 8px rgba(74,140,111,.28); }
.btn-crm--primary:hover,
.btn-crm--primary:focus   { background: var(--sage-dark); border-color: var(--sage-dark); color: #fff; box-shadow: 0 4px 14px rgba(74,140,111,.38); }

.btn-crm--secondary { background: #f0f6f3; border-color: var(--sage-mid); color: var(--ink);          box-shadow: 0 1px 3px rgba(28,43,58,.07); }
.btn-crm--secondary:hover,
.btn-crm--secondary:focus { background: var(--sage-light); border-color: var(--sage); color: var(--sage); }

.btn-crm--edit      { background: var(--warning); border-color: var(--warning); color: var(--ink);    box-shadow: 0 2px 6px rgba(232,200,74,.28); }
.btn-crm--edit:hover,
.btn-crm--edit:focus      { background: #d4b430; border-color: #d4b430; color: var(--ink); }

.btn-crm--danger    { background: var(--danger);  border-color: var(--danger);  color: #fff;          box-shadow: 0 2px 6px rgba(192,57,43,.25); }
.btn-crm--danger:hover,
.btn-crm--danger:focus    { background: #a93226; border-color: #a93226; color: #fff; }

.btn-crm--success   { background: var(--success); border-color: var(--success); color: #fff;          box-shadow: 0 2px 6px rgba(46,175,110,.25); }
.btn-crm--success:hover,
.btn-crm--success:focus   { background: #259059; border-color: #259059; color: #fff; }

.btn-crm--default   { background: var(--card);    border-color: var(--rule);    color: var(--ink-light); box-shadow: 0 1px 3px rgba(28,43,58,.06); }
.btn-crm--default:hover,
.btn-crm--default:focus   { background: var(--sage-light); border-color: var(--sage); color: var(--sage); }

.btn-crm--ghost     { background: transparent; border-color: var(--sage); color: var(--sage); }
.btn-crm--ghost:hover,
.btn-crm--ghost:focus     { background: var(--sage); color: #fff; }

.btn-crm--sm  { padding: 5px 12px; font-size: 12px; gap: 4px; }
.btn-crm--sm i { font-size: 11px; }
.btn-crm--block { display: flex; width: 100%; justify-content: center; }
.btn-crm:disabled,
.btn-crm.disabled { opacity: .50; cursor: not-allowed; transform: none; box-shadow: none; }


/* ================================================================
   10. BTN-ACTION — icone tabelle
   ================================================================ */
.btn-action {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px;
    border-radius: 7px; border: 1.5px solid transparent;
    font-size: 13px; text-decoration: none;
    transition: background .15s, transform .1s, box-shadow .15s;
    margin-left: 3px;
}
.btn-action:hover  { transform: translateY(-1px); text-decoration: none; }
.btn-action:active { transform: translateY(0); }
.btn-action i      { width: auto; }

.btn-action--view   { background: var(--sage-light); border-color: var(--sage);    color: var(--sage); }
.btn-action--view:hover   { background: var(--sage);    color: #fff; box-shadow: 0 3px 8px rgba(74,140,111,.35); }
.btn-action--edit   { background: #fffbec; border-color: var(--warning); color: #b89a00; }
.btn-action--edit:hover   { background: var(--warning); color: var(--ink); box-shadow: 0 3px 8px rgba(232,200,74,.35); }
.btn-action--delete { background: #fdf2f2; border-color: var(--danger);  color: var(--danger); }
.btn-action--delete:hover { background: var(--danger);  color: #fff; box-shadow: 0 3px 8px rgba(192,57,43,.35); }
.btn-action--success { background: #edfaf3; border-color: var(--success); color: var(--success); }
.btn-action--success:hover { background: var(--success); color: #fff; box-shadow: 0 3px 8px rgba(46,175,110,.35); }

.btn-toolbar-crm { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 8px; }


/* ================================================================
   11. FORM CONTROLS
   ================================================================ */
.form-control {
    font-family: 'DM Sans', sans-serif;
    font-size: 14px; color: var(--ink);
    background-color: var(--paper);
    border: 1.5px solid var(--rule);
    border-radius: 7px;
    padding: 9px 12px;
    height: auto; box-shadow: none;
    transition: border-color .18s, box-shadow .18s;
}
.form-control:focus {
    border-color: var(--sage);
    box-shadow: 0 0 0 3px rgba(74,140,111,.16);
    outline: 0; background-color: var(--card);
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control { background-color: #f0f4f2; color: var(--ink-faint); cursor: not-allowed; }

.has-success .form-control       { color: var(--success); }
.has-success .form-control:focus { border-color: var(--success); box-shadow: 0 0 0 3px rgba(46,175,110,.15); }
.has-error   .form-control       { color: var(--danger); }
.has-error   .form-control:focus { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(192,57,43,.15); }
.has-error   .form-control-feedback { color: var(--danger); }
.has-success .form-control-feedback { color: var(--success); }

.input-group-addon {
    font-family: 'DM Sans', sans-serif;
    background-color: #f0f4f0;
    border: 1.5px solid var(--sage-mid);
    border-radius: 7px;
    color: var(--ink-light); font-size: 13px;
}
.form-control:focus + .input-group-addon,
.form-control:focus ~ .input-group-addon { border-color: var(--sage); background-color: var(--sage-light); }


/* ================================================================
   12. TABELLE
   ================================================================ */
.table > thead > tr > th {
    font-family: 'DM Sans', sans-serif;
    font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .08em;
    color: var(--ink-faint);
    border-bottom: 1.5px solid var(--sage-mid);
    padding: 10px 8px 8px;
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    font-size: 14px; color: var(--ink);
    border-color: var(--rule);
    vertical-align: middle; padding: 11px 8px;
}
.table > tbody > tr:hover > td,
.table > tbody > tr:hover > th { background-color: var(--sage-light); }
.table .td-actions .btn { opacity: .70; }
.table > tbody > tr:hover .td-actions .btn { opacity: 1; }
.table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(74,140,111,.04); }


/* ================================================================
   13. ALERT
   ================================================================ */
.alert {
    font-family: 'DM Sans', sans-serif; font-size: 14px;
    border: none; border-radius: 8px; padding: 12px 16px;
    color: var(--ink);
}
.alert-info    { background: var(--sage-light); border-left: 3px solid var(--sage);    color: var(--ink-light); }
.alert-success { background: #edfaf3;           border-left: 3px solid var(--success); color: #1d6a40; }
.alert-warning { background: #fffbec;           border-left: 3px solid var(--warning); color: #7a6000; }
.alert-danger  { background: #fdf2f2;           border-left: 3px solid var(--danger);  color: #7a2020; }

.alert button.close { background: transparent; border-radius: 50%; opacity: .5; color: inherit; width: 22px; height: 22px; line-height: 20px; padding: 0; font-weight: 400; }
.alert button.close:hover { opacity: .9; }


/* ================================================================
   14. PANEL
   ================================================================ */
.panel { border-radius: var(--radius); box-shadow: var(--shadow-sm); border: none; }
.panel-heading {
    font-family: 'Libre Baskerville', serif;
    background-color: var(--ink); color: #fff;
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    padding: 14px 18px; font-size: 15px; font-weight: 700; border: none;
}
.panel-body   { padding: 18px; }
.panel-footer { background: var(--paper); border-top: 1px solid var(--rule); padding: 10px 18px; border-radius: 0 0 var(--radius) var(--radius); }


/* ================================================================
   15. MODAL
   ================================================================ */
.modal-content { border-radius: var(--radius); border: none; box-shadow: var(--shadow-lg); }
.modal-header  { background: var(--ink); border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0; padding: 16px 20px; border-bottom: none; }
.modal-title   { font-family: 'Libre Baskerville', serif; color: #fff; font-size: 16px; font-weight: 700; }
.modal-header .close { color: #fff; opacity: .55; text-shadow: none; }
.modal-header .close:hover { opacity: 1; }
.modal-body    { padding: 20px; }
.modal-footer  { padding: 14px 20px; border-top: 1px solid var(--rule); border-radius: 0 0 var(--radius) var(--radius); }


/* ================================================================
   16. BADGE, LABEL, BADGE-STATUS
   ================================================================ */
.label-default  { background: var(--ink-faint); }
.label-primary  { background: var(--ink); }
.label-info     { background: var(--sage); }
.label-success  { background: var(--success); }
.label-warning  { background: var(--warning); color: var(--ink); }
.label-danger   { background: var(--danger); }
.label-medical  { background: var(--sage);  color: #fff; }
.label-clinical { background: var(--ink);   color: #fff; }

.badge-attesa     { background: var(--warning);  color: var(--ink); }
.badge-confermata { background: var(--success);  color: #fff; }
.badge-annullata  { background: var(--danger);   color: #fff; }
.badge-completata { background: var(--ink-faint); color: #fff; }

.badge-status {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px; border-radius: 20px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11px; font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase;
}
.badge-status--active   { background: var(--sage-light); color: #2e7a52; border: 1px solid var(--sage-mid); }
.badge-status--inactive { background: #f5f5f5; color: var(--ink-faint); border: 1px solid var(--rule); }
.badge-status--warning  { background: #fffbec; color: #8a7000; border: 1px solid #e8d88a; }
.badge-status--danger   { background: #fdf2f2; color: #a93226; border: 1px solid #f0b8b8; }
.badge-status--info     { background: var(--sage-light); color: #2e6a52; border: 1px solid var(--sage-mid); }


/* ================================================================
   17. NOTICE CLINICI
   ================================================================ */
.notice-clinical {
    background: var(--sage-light); border-left: 3px solid var(--sage);
    border-radius: 6px; padding: 12px 16px;
    font-size: 13px; color: var(--ink-light); line-height: 1.55;
}
.notice-clinical strong { color: var(--sage); }
.notice-warning {
    background: #fffbec; border-left: 3px solid var(--warning);
    border-radius: 6px; padding: 12px 16px;
    font-size: 13px; color: var(--ink-light); line-height: 1.55;
}


/* ================================================================
   18. CHECKBOX / RADIO / SWITCH
   ================================================================ */
.checkbox.checked,
.radio.checked                     { color: var(--sage); }
.checkbox.checked .second-icon,
.radio.checked .second-icon        { color: var(--sage); }
.has-switch span.switch-left,
.has-switch span.switch-right      { background-color: var(--sage); }
.has-switch .switch-off span.switch-left,
.has-switch .switch-off span.switch-right { background-color: #ddd; }


/* ================================================================
   19. FOOTER
   ================================================================ */
.footer                            { background: var(--card); border-top: 1px solid var(--rule); }
.footer .copyright                 { font-size: 13px; color: var(--ink-faint); }
.footer nav > ul a:not(.btn)       { color: var(--ink-faint); }
.footer nav > ul a:not(.btn):hover { color: var(--sage); }


/* ================================================================
   20. DATATABLES
   ================================================================ */
.dataTables_wrapper .dataTables_filter input  { border-radius: 7px; border: 1.5px solid var(--rule); }
.dataTables_wrapper .dataTables_filter input:focus { border-color: var(--sage); outline: none; box-shadow: 0 0 0 3px rgba(74,140,111,.15); }
.dataTables_wrapper .dataTables_length select { border-radius: 7px; border: 1.5px solid var(--rule); }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { background: var(--sage) !important; color: #fff !important; border-color: var(--sage) !important; border-radius: 6px; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--sage-light) !important; color: var(--sage) !important; border-color: var(--sage-mid) !important; border-radius: 6px; }


/* ================================================================
   21. FONT-FACE swap
   ================================================================ */
@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.woff2') format('woff2'),
         url('../fonts/fontawesome-webfont.woff?v=4.2.0') format('woff');
    font-display: swap;
}
@font-face {
    font-family: 'Pe-icon-7-stroke';
    src: url('../fonts/Pe-icon-7-stroke.woff') format('woff');
    font-display: swap;
}

.sidebar .sidebar-wrapper {
    position: relative;
    max-height: none;
    min-height: 100%;
    overflow: hidden;
    width: 260px;
    z-index: 4;
    background-color: #0f1d29 !important;
}


/* ================================================================
   22. SCROLLBAR (webkit)
   ================================================================ */
::-webkit-scrollbar               { width: 6px; height: 6px; }
::-webkit-scrollbar-track         { background: transparent; }
::-webkit-scrollbar-thumb         { background: var(--sage-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover   { background: var(--sage); }
.sidebar ::-webkit-scrollbar-thumb       { background: rgba(255,255,255,.15); }
.sidebar ::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30); }