/*
 * ============================================================================
 * ABIFB — abifb.css  (Versione Unificata con Variabili CSS)
 * Unione di style.css + depusoft.css — tutti i colori tramite variabili :root
 * Per cambiare colori modifica SOLO le variabili nella sezione 01.
 * ============================================================================
 */

@import url("https://fonts.googleapis.com/css?family=Hind:400,500,700|Noto+Sans:400,700");


/* ============================================================================
   01. VARIABILI CSS — modifica qui per cambiare l'intero tema
   ============================================================================ */
:root {
    /* ── Brand ABIFB ────────────────────────────────────────────────────── */
    --brand-color:          #9b2328;
    --brand-hover:          #7a1b1f;
    --brand-light:          rgba(155, 35, 40, 0.08);
    --brand-light-hover:    rgba(155, 35, 40, 0.15);
    --brand-glow:           rgba(155, 35, 40, 0.28);
    --brand-glow-focus:     rgba(155, 35, 40, 0.18);
    --brand-border:         rgba(155, 35, 40, 0.30);

    /* ── Colore secondario (blu ABIFB) ──────────────────────────────────── */
    --color-secondary:      #2e539f;
    --color-secondary-hover:#24407f;
    --color-secondary-light:#eef3fc;
    --color-secondary-border:rgba(46, 83, 159, 0.30);

    /* ── Menu attivo ────────────────────────────────────────────────────── */
    --menu-active-from:     #ce514f;
    --menu-active-to:       #9b2328;
    --menu-hover-bg-from:   #ce514f;
    --menu-hover-bg-to:     #9b2328;

    /* ── Testi ───────────────────────────────────────────────────────────── */
    --text-dark:            #2c3e50;
    --text-body:            #475467;
    --text-muted:           #7f8c8d;
    --text-placeholder:     #aab0b8;
    --text-white:           #ffffff;

    /* ── Sfondi ──────────────────────────────────────────────────────────── */
    --bg-page:              #f5f5f5;
    --bg-card:              #ffffff;
    --bg-input:             #f5f7fa;
    --bg-input-focus:       #ffffff;
    --bg-subtle:            #f9fafb;

    /* ── Bordi ───────────────────────────────────────────────────────────── */
    --border-light:         #eaecf0;
    --border-input:         rgba(0, 0, 0, 0.12);
    --border-card:          rgba(0, 0, 0, 0.08);

    /* ── Danger ──────────────────────────────────────────────────────────── */
    --color-danger:         #c9100e;
    --color-danger-dark:    #b42318;
    --color-danger-hover:   #912018;
    --color-danger-light:   #fff5f5;
    --color-danger-subtle:  #fef3f2;
    --color-danger-border:  #f9d5d5;

    /* ── Success ─────────────────────────────────────────────────────────── */
    --color-success:        #10b981;
    --color-success-hover:  #0ea374;
    --color-success-text:   #027a48;
    --color-success-light:  #ecfdf3;
    --color-success-border: #a6f4c5;
    --color-success-icon:   #a9efc5;

    /* ── Warning ─────────────────────────────────────────────────────────── */
    --color-warning:        #f59e0b;
    --color-warning-hover:  #d97706;
    --color-warning-text:   #b54708;
    --color-warning-light:  #fffaeb;
    --color-warning-border: #fedf89;

    /* ── Orange ──────────────────────────────────────────────────────────── */
    --color-orange:         #ea580c;
    --color-orange-text:    #c2410c;
    --color-orange-light:   #fff7ed;
    --color-orange-border:  #fed7aa;

    /* ── Info ────────────────────────────────────────────────────────────── */
    --color-info:           #0369a1;
    --color-info-text:      #0369a1;
    --color-info-light:     #f0f9ff;
    --color-info-border:    #bae6fd;
    --bg-info:              #f0f8ff;

    /* ── Teal (bootstrap success legacy) ────────────────────────────────── */
    --color-teal:           #23b195;
    --color-teal-hover:     #1f9c83;

    /* ── Scala Grigi ─────────────────────────────────────────────────────── */
    --color-gray-50:        #f9fafb;
    --color-gray-100:       #f2f4f7;
    --color-gray-200:       #eaecf0;
    --color-gray-300:       #d0d5dd;
    --color-gray-400:       #98a2b3;
    --color-gray-500:       #667085;
    --color-gray-600:       #475467;
    --color-gray-700:       #344054;
    --color-gray-800:       #1d2939;
    --color-empty:          var(--color-gray-400);

    /* ── Card / Panel ────────────────────────────────────────────────────── */
    --radius-card:          8px;
    --radius-btn:           50px;
    --radius-input:         12px;
    --shadow-card:          0 2px 10px rgba(0, 0, 0, 0.08);
    --shadow-drawer:        -5px 0 25px rgba(0, 0, 0, 0.15);
    --shadow-btn:           0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, 0.08);

    /* ── Login ───────────────────────────────────────────────────────────── */
    --login-bg:             #07111f;
    --login-overlay-left:   rgba(4, 8, 15, 0.42);
    --login-overlay-center: rgba(4, 8, 15, 0.28);
    --login-overlay-right:  rgba(4, 8, 15, 0.62);
    --login-card-bg:        rgba(14, 26, 46, 0.88);
    --login-card-border:    rgba(255, 255, 255, 0.08);
    --login-title-color:    #ffffff;
    --login-label-color:    rgba(255, 255, 255, 0.92);
    --login-input-bg:       rgba(255, 255, 255, 0.10);
    --login-input-bg-focus: rgba(255, 255, 255, 0.14);
    --login-input-border:   rgba(255, 255, 255, 0.08);
    --login-placeholder:    rgba(255, 255, 255, 0.48);
    --login-eye-color:      rgba(255, 255, 255, 0.64);
    --login-input-text:     #ffffff;

    /* ── Layout / Topbar / Sidebar ───────────────────────────────────────── */
    --topbar-bg:            #f5f5f5;
    --topbar-height:        70px;
    --sidebar-width:        240px;
    --sidebar-mini-width:   70px;
    --sidebar-bg:           #ffffff;
    --page-content-bg:      #ffffff;
    --body-bg:              #f5f5f5;
    --border-page:          #f5f5f5;
    --menu-bg:              #ffffff;
    --menu-text:            #626773;
    --menu-text-hover:      #ffffff;
    --menu-second-text:     #888d9a;
    --menu-sub-text:        #888d9a;
    --panel-heading-bg:     #f5f5f5;

    /* ── Tabs & Pagination ────────────────────────────────────────────────── */
    --tab-active-color:     var(--brand-color);
    --tab-border-color:     #cccccc;
    --pagination-active-bg: var(--brand-color);

    /* ── Bottoni Base ─────────────────────────────────────────────────────── */
    --btn-primary-bg:       var(--brand-color);
    --btn-primary-hover:    var(--brand-hover);
    --btn-default-bg:       #ffffff;
    --btn-default-border:   #cccccc;
    --btn-success-bg:       #23b195;
    --btn-danger-bg:        var(--color-danger);

    /* ── Input overrides ──────────────────────────────────────────────────── */
    --input-border:         gainsboro;
    --input-focus-border:   #aaaaaa;

    /* ── Colori Bootstrap legacy (template) ─────────────────────────────── */
    --legacy-green:         #4fc55b;
    --legacy-green-hover:   #38a943;
    --legacy-blue:          #458bc4;
    --legacy-teal-dk:       #3db9dc;
    --legacy-yellow:        #e2ab3b;
    --legacy-gray-btn:      #bbbbbb;
    --legacy-gray-hover:    #aaaaaa;
    --legacy-border-soft:   #e3e3e3;
    --legacy-bg-hover:      #ededed;
    --legacy-nav-active:    #4b4e57;

    /* ── Font ─────────────────────────────────────────────────────────────── */
    --font-main:            'Noto Sans', sans-serif;
    --font-alt:             'Hind', sans-serif;
}


/* ============================================================================
   02. ANIMAZIONI
   ============================================================================ */
.blink { animation: glow 1s ease-in-out infinite alternate; }
@keyframes glow {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0.4; transform: scale(1.1); }
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* ============================================================================
   03. BASE — body, page-wrapper, Bootstrap
   ============================================================================ */
body {
    background-color: var(--body-bg);
    font-family: var(--font-main);
    color: var(--menu-text);
}

#page-wrapper {
    width: 90%;
    margin: 0 auto;
    background-color: var(--page-content-bg);
    padding-top: var(--topbar-height);
}

.row { margin-right: -10px; margin-left: -10px; }

.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,
.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,
.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,
.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,
.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,
.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,
.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
    padding-left: 10px; padding-right: 10px;
    padding-top: 2px;   padding-bottom: 2px;
}

.container { width: auto; }
blockquote { background-color: var(--bg-subtle); }
a { text-decoration: none !important; }
button { outline: none !important; }
h1,h2,h3,h4,h5,h6 { font-weight: 700; }
input[type="date"] { appearance: none; -webkit-appearance: none; width: 100% !important; min-width: 100px; }
a.disabled { pointer-events: none; cursor: default; opacity: 0.65; }


/* ============================================================================
   04. TOPBAR & LOGO
   ============================================================================ */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; }
.topbar .topbar-left { float: left; position: relative; width: 190px; z-index: 999; transition: width 0.3s ease-in-out; }

.logo { color: var(--menu-text) !important; font-size: 20px; font-weight: 700; letter-spacing: 0.05em; line-height: var(--topbar-height); text-transform: uppercase; }
.logo img { height: 40px; }
.logo h1 { height: 50px; margin: 0 auto; text-align: center; }
.logo span { color: var(--color-teal); }

.logo-lg-img { height: 40px; width: auto; margin-left: 15px; }
.logo-sm-img { height: 40px; width: auto; display: none; }
.logo-lg, .logo-sm { max-height: 40px; width: auto; margin: 0 auto !important; vertical-align: middle; }
.logo-lg { max-width: 85%; }

.navbar-default { background-color: var(--topbar-bg); border-radius: 0; z-index: 99; border: none; margin-bottom: 0; }
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover { background-color: rgba(122, 125, 132, 0.1); }
.navbar-default .label { position: absolute; top: 9px; right: 9px; }
.navbar-nav { margin: 0; }
.navbar-default .navbar-nav.top-navbar-items > li > a { line-height: var(--topbar-height); padding: 0 15px; }
.top-navbar-items-right { margin-right: 0; }
.top-navbar-items-right a.menu-right-item { padding: 0 15px !important; }
.top-navbar-items-right a.menu-right-item i { line-height: var(--topbar-height); font-size: 35px; }

.button-menu-mobile { background: transparent; border: none; color: var(--menu-text); font-size: 21px; line-height: var(--topbar-height); padding: 0 10px; outline: none !important; }
#btn-toggle-desktop { background: transparent; border: none; color: var(--menu-text); font-size: 21px; line-height: var(--topbar-height); padding: 0 15px; outline: none !important; cursor: pointer; display: inline-block; float: left; }

.profile { line-height: var(--topbar-height) !important; }
.profile img { height: 36px; width: 36px; }

.app-search { position: relative; margin: 18px 15px 15px 5px; }
.app-search a { position: absolute; top: 8px; right: 16px; color: var(--text-muted); }
.app-search .form-control,
.app-search .form-control:focus { font-size: 13px; color: var(--menu-text); padding-left: 20px; padding-right: 40px; background: transparent; border: 1px solid rgba(122, 125, 132, 0.15); box-shadow: none; border-radius: 30px; height: 36px; font-weight: 600; width: 180px; }

.dropdown-menu { padding: 4px 0; transition: all 0.3s ease; box-shadow: 0 0 8px 0 rgba(0,0,0,0.06), 0 1px 0 0 rgba(0,0,0,0.02); border: 1px solid rgba(152,166,173,0.15); }
.dropdown-menu > li > a { padding: 6px 20px; }
.dropdown-menu-lg { width: 300px !important; }
.dropdown-menu-lg .list-group { margin-bottom: 0; }
.dropdown-menu-lg .list-group-item { border: none; border-bottom: 2px solid var(--bg-page); padding: 14px 20px; border-radius: 0 !important; }
.dropdown-menu-lg .media-heading { margin-bottom: 0; }
.dropdown-menu-lg .media-body p { color: var(--text-muted); line-height: 16px; }


/* ============================================================================
   05. SIDEBAR — NAVIGAZIONE
   ============================================================================ */
.sidebar-navigation,
#page-right-content,
.topbar-left { transition: all 0.15s ease-out !important; }

.scrollbar-wrapper { height: 100%; position: relative; justify-items: center; }

.sidebar-navigation {
    position: fixed;
    background-color: var(--sidebar-bg);
    width: var(--sidebar-width);
    top: var(--topbar-height);
    bottom: 0;
    overflow-y: auto;
    transition: margin-left 0.3s;
    z-index: 99;
}
.sidebar-navigation::-webkit-scrollbar { width: 6px; }
.sidebar-navigation::-webkit-scrollbar-thumb { background-color: rgba(122,125,132,0.2); border-radius: 3px; }

.user-details { min-height: 80px; padding: 20px; position: relative; }
.user-details img { position: relative; z-index: 9999; height: 48px; width: 48px; }
.user-details .user-info { color: var(--menu-text); margin-left: 60px; position: relative; z-index: 99999; }
.user-details .user-info p { margin-bottom: 0; font-size: 13px; }
.user-details .user-info a { color: var(--menu-text); display: block; font-weight: 600; padding-top: 5px; }

.metisMenu { padding-bottom: 30px; padding-top: 10px; }
.metisMenu .arrow { float: right; line-height: 16px; padding-top: 2px; transition: all 400ms ease-in-out; }
.metisMenu .fa.arrow:before { content: "\f105"; }
.metisMenu .active > a > .fa.arrow:before { content: "\f107"; }

.metisMenu.nav > li > a { padding: 13px 20px; color: var(--menu-text); }
.metisMenu.nav > li > a .label { margin-top: 2px; }
.metisMenu.nav > li > a:hover,
.metisMenu.nav > li > a:focus { color: var(--menu-text-hover); background: linear-gradient(90deg, var(--menu-hover-bg-from) 0%, var(--menu-hover-bg-to) 100%); }
.metisMenu.nav > li > a i { display: inline-block; margin-right: 5px; vertical-align: middle; margin-top: -4px; width: 20px; font-size: 16px; }

.nav-second-level.nav li a,
.nav-thrid-level.nav li a { padding: 7px 20px 7px 10px; text-transform: none; color: var(--menu-second-text); }
.nav-second-level.nav li a:hover,
.nav-second-level.nav li a:focus,
.nav-thrid-level.nav li a:hover,
.nav-thrid-level.nav li a:focus { color: var(--menu-text-hover); background: linear-gradient(90deg, var(--menu-hover-bg-from) 0%, var(--menu-hover-bg-to) 100%); }
.nav-second-level.nav > li > a { padding-left: 48px; }
.nav-second-level.nav li.active a { color: var(--legacy-nav-active); }
.nav-third-level.nav > li > a { padding-left: 58px; }
.nav-third-level.nav li.active a { color: var(--legacy-nav-active); }

.metisMenu.nav > li.active > a { color: var(--menu-text-hover); background: linear-gradient(90deg, var(--menu-active-from) 0%, var(--menu-active-to) 100%); }
.metisMenu.nav > li.active > a li.active a { color: var(--brand-color); }
.metisMenu.nav > li:last-child a { border-bottom: 0; }
.sidebar-service-label { font-size: 9px; }
.mdi-icon-md           { font-size: 20px; }
.sidebar-avatar        { width: 40px; height: 40px; object-fit: cover; }
/* Nascondi scrollbar sidebar */
.sidebar-navigation::-webkit-scrollbar,
.scrollbar-wrapper::-webkit-scrollbar,
.slimScrollDiv::-webkit-scrollbar { display: none !important; }

.sidebar-navigation,
.scrollbar-wrapper,
.slimScrollDiv {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

#page-right-content {
    background-color: var(--page-content-bg);
    border-left: 6px solid var(--border-page);
    padding: 90px 5px 50px 5px;
    margin-top: 0;
    margin-left: var(--sidebar-width);
    min-height: 1050px;
    position: relative !important;
    transition: margin-left 0.3s;
}

/* ── Sidebar Mini / Semi-mini ── */
@media (min-width: 992px) {
    body.forced-left-mini .sidebar-navigation { width: var(--sidebar-mini-width) !important; }
    body.forced-left-mini #page-right-content { margin-left: var(--sidebar-mini-width) !important; }
    body.forced-left-mini .user-info, body.forced-left-mini .sidebar-navigation .fa.arrow,
    body.forced-left-mini .nav-second-level, body.forced-left-mini #side-menu li a span { display: none !important; }
    body.forced-left-mini #side-menu > li > a { font-size: 0 !important; text-align: center !important; padding: 15px 0 !important; }
    body.forced-left-mini #side-menu > li > a i { font-size: 20px !important; visibility: visible !important; margin: 0 !important; display: block !important; width: 100% !important; }
    body.forced-left-mini .topbar .topbar-left { width: var(--sidebar-mini-width) !important; }
    body.forced-left-mini .logo span, body.forced-left-mini .logo h1 { display: none !important; }
    body.forced-left-mini .logo-lg { display: none !important; }
    body.forced-left-mini .logo-sm { display: inline-block !important; margin-left: 0 !important; }
    .topbar .topbar-left { width: var(--sidebar-width) !important; text-align: center; }
    body.forced-left-mini .topbar .topbar-left { width: var(--sidebar-mini-width) !important; }
}

body.forced-semi-mini .sidebar-navigation { width: var(--sidebar-width) !important; }
body.forced-semi-mini #page-right-content { margin-left: var(--sidebar-width) !important; }
body.forced-semi-mini #side-menu > li > a { font-size: 14px !important; text-align: left !important; padding: 13px 20px !important; }
body.forced-semi-mini #side-menu > li > a i { font-size: 16px !important; margin-right: 10px !important; display: inline-block !important; width: 20px !important; }
body.forced-semi-mini .nav-second-level { display: none; visibility: visible !important; }
body.forced-semi-mini .nav-second-level.in { display: block !important; }
body.forced-semi-mini .fa.arrow, body.forced-semi-mini #side-menu li a span { display: inline-block !important; }
body.forced-semi-mini #side-menu li.active > ul.nav-second-level { visibility: visible !important; }
body.forced-semi-mini #side-menu li:not(.active) > ul.nav-second-level { display: none !important; }
body.forced-semi-mini .metismenu .collapsing, body.forced-semi-mini .nav-second-level.collapsing { height: auto !important; display: block !important; overflow: visible !important; transition: none !important; }
body.forced-semi-mini .metismenu .active > ul, body.forced-semi-mini .nav-second-level.in { display: block !important; height: auto !important; visibility: visible !important; }
body.forced-semi-mini .metismenu li:not(.active) > ul { display: none !important; }


/* ============================================================================
   06. LOGIN
   ============================================================================ */
.auth-page { position: relative; min-height: 100vh; overflow: hidden; background: var(--login-bg); font-family: Inter,"Segoe UI",Roboto,Arial,sans-serif; color: var(--text-white); }
.auth-bg { position: absolute; inset: 0; z-index: 0; }
.auth-bg-img { position: absolute; inset: 0; background: url('/assets/images/bg_login.jpg') center center / cover no-repeat; }
.auth-bg-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, var(--login-overlay-left) 0%, var(--login-overlay-center) 38%, var(--login-overlay-right) 100%); }
.auth-content { position: relative; z-index: 1; min-height: 100vh; display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,480px); align-items: center; gap: 40px; padding: 32px 48px; }
.auth-hero { display: flex; align-items: center; min-height: 100%; }
.auth-hero-inner { max-width: 760px; padding-right: 20px; }
.auth-hero-title { margin: 0 0 18px; font-size: clamp(42px,5vw,68px); line-height: 1.03; font-weight: 500; letter-spacing: -0.03em; color: var(--text-white); text-shadow: 0 8px 30px rgba(0,0,0,0.28); }
.auth-hero-text { margin: 0; max-width: 720px; font-size: clamp(18px,1.45vw,24px); line-height: 1.5; font-weight: 400; color: rgba(255,255,255,0.88); text-shadow: 0 6px 18px rgba(0,0,0,0.22); }
.auth-panel-wrap { display: flex; align-items: center; justify-content: center; width: 100%; }
.auth-panel-stack { width: 100%; max-width: 430px; display: flex; flex-direction: column; align-items: stretch; }
.auth-brand-outside { width: fit-content; margin: 0 auto 18px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.auth-brand-logo { display: block; width: auto; max-width: 180px; height: auto; max-height: 64px; object-fit: contain; }
.auth-panel { width: 100%; background: var(--login-card-bg); border: 1px solid var(--login-card-border); border-radius: 24px; padding: 34px 28px 30px; box-shadow: 0 30px 70px rgba(0,0,0,0.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.auth-form-title { margin: 0 0 26px; text-align: center; font-size: 36px; line-height: 1.1; font-weight: 500; color: var(--login-title-color); }
.auth-field { margin-bottom: 18px; }
.auth-label { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 400; color: var(--login-label-color); }
.wrap-input100 { position: relative; width: 100%; margin-bottom: 0; background: transparent !important; border: 0 !important; }
.input100.auth-input { display: block; width: 100%; height: 52px; padding: 0 18px 0 18px; padding-right: 50px; border-radius: var(--radius-input); border: 1px solid var(--login-input-border); background: var(--login-input-bg); color: var(--login-input-text); font-size: 15px; transition: border-color .2s, box-shadow .2s, background .2s; }
.input100.auth-input:focus { outline: none; border-color: var(--brand-color); background: var(--login-input-bg-focus); box-shadow: 0 0 0 4px var(--brand-glow-focus); }
.input100.auth-input::placeholder { color: var(--text-placeholder); }
.focus-input100 { display: none !important; }
.btn-show-pass { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); z-index: 3; color: var(--login-eye-color); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; }
.auth-actions { display: flex; justify-content: center; margin: 0 0 20px; }
.auth-forgot-link { font-size: 14px; color: var(--brand-color); text-decoration: none; transition: color .2s; }
.auth-forgot-link:hover { color: var(--brand-hover); }
.auth-submit { display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 52px; border: 0; border-radius: var(--radius-input); background: var(--brand-color); color: var(--text-white); font-size: 17px; font-weight: 500; cursor: pointer; transition: background .2s, transform .15s, box-shadow .2s; box-shadow: 0 14px 30px var(--brand-glow); }
.auth-submit:hover { background: var(--brand-hover); }
.auth-submit:active { transform: translateY(1px); }

@media (max-width: 1200px) { .auth-content { grid-template-columns: minmax(0,1fr) minmax(340px,430px); padding: 28px; gap: 28px; } }
@media (max-width: 991px)  { .auth-content { grid-template-columns: 1fr; gap: 26px; padding: 22px 16px 28px; } .auth-hero-inner { max-width: 100%; padding-right: 0; padding-top: 18px; } .auth-hero-title { font-size: 42px; margin-bottom: 14px; } .auth-panel { max-width: 100%; padding: 28px 20px 24px; border-radius: 20px; } .auth-panel-stack { max-width: 100%; } }
@media (max-width: 575px)  { .auth-content { padding: 16px 12px 24px; } .auth-hero-title { font-size: 36px; } .auth-hero-text { font-size: 16px; line-height: 1.45; } }


/* ============================================================================
   07. FOOTER
   ============================================================================ */
.footer { border-top: 2px solid var(--border-page); bottom: 0; left: 0; padding: 14px 20px; position: absolute; right: 0; }
.footer a { color: var(--brand-color); }
.footer a:hover { color: var(--brand-hover); }
.footer-powered { font-size: 10px; }


/* ============================================================================
   08. BOTTONI
   I bottoni di azione/aggiunta usano border-radius: var(--radius-btn) = 50px
   ============================================================================ */
.btn { border-radius: 4px; padding: 3px 7px; outline: none !important; }
.btn-md  { padding: 8px 18px; }
.btn-group-lg > .btn, .btn-lg { padding: 10px 16px !important; font-size: 16px; }
.btn-group-sm > .btn, .btn-sm { padding: 5px 10px !important; }
.btn-group-xs > .btn, .btn-xs { padding: 1px 5px !important; }
.btn-group.open .dropdown-toggle { box-shadow: 0 0 0 100px rgba(0,0,0,0.1) inset; }

.btn-custom,.btn-primary,.btn-success,.btn-info,.btn-warning,.btn-danger,.btn-dark { color: var(--text-white) !important; }

/* Bottone Default */
.btn-default { background-color: var(--btn-default-bg); border-color: var(--btn-default-border); }
.btn-default:hover,.btn-default:focus,.btn-default:active,.btn-default.active,
.open > .dropdown-toggle.btn-default { background-color: var(--legacy-bg-hover) !important; border: 1px solid var(--btn-default-border) !important; }

/* Bottone Custom (teal) */
.btn-custom { background-color: var(--color-teal); border-color: var(--color-teal); }
.btn-custom:hover,.btn-custom:focus,.btn-custom:active,.btn-custom.active,
.open > .dropdown-toggle.btn-custom { background-color: var(--color-teal-hover) !important; border: 1px solid var(--color-teal-hover) !important; }

/* Bottone Primary — PILL per i bottoni di aggiunta */
.btn-primary { background-color: var(--btn-primary-bg) !important; border: 1px solid var(--btn-primary-bg) !important; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,
.open > .dropdown-toggle.btn-primary { background-color: var(--btn-primary-hover) !important; border: 1px solid var(--btn-primary-hover) !important; }

/* Bottone Success */
.btn-success { background-color: var(--btn-success-bg) !important; border: 1px solid var(--btn-success-bg) !important; }
.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active,
.open > .dropdown-toggle.btn-success { background-color: var(--color-teal-hover) !important; border: 1px solid var(--color-teal-hover) !important; }

/* Bottone Info */
.btn-info { background-color: var(--legacy-gray-btn) !important; border: 1px solid var(--legacy-gray-btn) !important; }
.btn-info:hover,.btn-info:focus,.btn-info:active,.btn-info.active,
.open > .dropdown-toggle.btn-info { background-color: var(--legacy-gray-hover) !important; border: 1px solid var(--legacy-gray-hover) !important; }

/* Bottone Warning */
.btn-warning { background-color: var(--color-warning) !important; border: 1px solid var(--color-warning) !important; color: var(--text-white) !important; }
.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active,
.open > .dropdown-toggle.btn-warning { background-color: var(--color-warning-hover) !important; border: 1px solid var(--color-warning-hover) !important; }

/* Bottone Danger */
.btn-danger { background-color: var(--brand-color) !important; border: 1px solid var(--brand-color) !important; }
.btn-danger:hover,.btn-danger:focus,.btn-danger:active,.btn-danger.active,
.open > .dropdown-toggle.btn-danger { background-color: var(--brand-hover) !important; border: 1px solid var(--brand-hover) !important; }

/* Bottone Dark */
.btn-dark { background-color: var(--brand-color) !important; border: 1px solid var(--brand-color) !important; }
.btn-dark:hover,.btn-dark:focus,.btn-dark:active,.btn-dark.active,
.open > .dropdown-toggle.btn-dark { background-color: var(--brand-hover) !important; border: 1px solid var(--brand-hover) !important; }

/* Bordered */
.btn-bordered { border-bottom: 3px solid transparent; }
.btn-bordered.btn-default  { background-color: var(--btn-default-bg); border-bottom: 2px solid var(--btn-default-border) !important; }
.btn-bordered.btn-custom   { background-color: var(--color-teal); border-bottom: 2px solid var(--color-teal-hover) !important; }
.btn-bordered.btn-primary  { border-bottom: 2px solid var(--brand-hover) !important; }
.btn-bordered.btn-success  { border-bottom: 2px solid var(--color-teal-hover) !important; }
.btn-bordered.btn-danger   { border-bottom: 2px solid var(--color-danger-hover) !important; }

/* Bottone Rounded vecchio */
.btn-rounded { border-radius: 2em; padding: 6px 18px; }

/* ── Bottoni Azione PILL (stile nuovo) ── */
.btn.w-md,
.btn-primary.waves-effect.waves-light.w-md,
.btn-default.waves-effect.w-md,
.btn-success.waves-effect.waves-light.w-md,
.btn-pill { border-radius: var(--radius-btn) !important; }

/* Bottone Aggiungi Pro — pill grande con shadow */
.btn-add-pro {
    border-radius: var(--radius-btn) !important;
    padding: 8px 30px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-btn);
    transition: all 0.2s ease;
}
.btn-add-pro i { margin: 0 !important; font-size: 22px !important; line-height: 1 !important; }
.btn-add-pro:hover { box-shadow: 0 7px 14px rgba(50,50,93,0.1), 0 3px 6px rgba(0,0,0,0.08); }

/* Bottone Rettangolare — pill lungo, usato come badge-btn */
.btn-rettangolare {
    border-radius: var(--radius-btn) !important;
    background-color: var(--brand-color) !important;
    border: none !important;
    color: var(--text-white) !important;
    width: auto !important; height: auto !important;
    padding: 8px 50px !important;
    min-width: 85px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2) !important;
}
.btn-rettangolare i { font-size: 20px !important; margin: 0 !important; line-height: 1 !important; }
.btn-rettangolare span { display: none !important; }

/* Bottoni Azione Tabella */
.btn-trash { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: none; background: transparent; color: var(--color-danger); cursor: pointer; transition: all .2s; }
.btn-trash:hover { background: var(--color-danger-subtle); color: var(--color-danger-hover); }
.btn-trash:active { transform: scale(0.95); }

.btn-action-round { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: none; cursor: pointer; transition: all .15s; text-decoration: none; }
.btn-action-blue   { background: var(--color-secondary-light); color: var(--color-secondary); }
.btn-action-blue:hover { background: rgba(46,83,159,0.18); }
.btn-action-orange { background: var(--color-orange-light); color: var(--color-orange-text); }
.btn-action-orange:hover { background: var(--color-orange-border); }

.btn-download { border-radius: 50% !important; width: 35px !important; height: 35px !important; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; box-shadow: var(--shadow-btn); }

.btn-delete-confirm { background: var(--brand-color) !important; border-color: var(--brand-color) !important; color: var(--text-white) !important; }
.btn-delete-confirm:hover { background: var(--brand-hover) !important; border-color: var(--brand-hover) !important; }

.btn-bulk-delete { background: var(--color-danger); color: var(--text-white); border: none; padding: 8px 18px; border-radius: 8px; font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s ease; cursor: pointer; }
.btn-bulk-delete i { font-size: 18px; display: flex; align-items: center; line-height: 1; }
.btn-bulk-delete:hover { background: var(--color-danger-hover); color: var(--text-white); transform: translateY(-1px); }

.btn-mobile-view { height: 19px; width: 20px; line-height: 1px; background-color: var(--brand-color); padding: 0; border-radius: 3px; float: right; z-index: 9999; position: relative; top: 5px; right: 10px; color: var(--text-white); }
.btn-segna-letti { color: var(--brand-color); }
.btn-sm-table { padding: 4px 10px !important; font-size: 11px !important; }
.btn-danger-sm { padding: 4px 10px !important; font-size: 11px !important; color: var(--color-danger) !important; }
.btn-pill { border-radius: var(--radius-btn) !important; }
.btn-group-gap { display: flex; gap: 6px; }
.button-list { margin-left: -8px; margin-bottom: -12px; }
.button-list .btn { margin-bottom: 12px; margin-left: 8px; }


/* ============================================================================
   09. CARD & PANEL
   ============================================================================ */
.card-box { background-color: var(--bg-card); border: 2px solid var(--border-page); padding: 10px; margin-bottom: 20px; }
.header-title { margin-top: 0; font-weight: bold; border-bottom: 1px solid var(--input-border); padding-bottom: 12px; }

.panel { border: 2px solid var(--border-page); box-shadow: none; margin-bottom: 20px; }
.panel .panel-body { padding: 20px; }
.panel .panel-body p { margin-bottom: 0; line-height: 24px; }
.panel .panel-body p + p { padding-top: 10px; }
.panel-heading { border: none !important; padding: 15px 20px; margin: -2px; border-radius: 4px 4px 0 0; }
.panel-default > .panel-heading { background-color: var(--panel-heading-bg); border-bottom: none; color: var(--text-muted); }
.panel-title { font-size: 15px; font-weight: 600; margin-bottom: 0; margin-top: 0; }
.panel-sub-title { margin-bottom: 0; color: rgba(255,255,255,0.7) !important; margin-top: 3px; }
.panel-footer { background: var(--panel-heading-bg); border-top: 0; }
.panel-default .panel-sub-title { color: inherit !important; }
.panel-color .panel-title { color: var(--text-white); }
.panel-custom > .panel-heading { background-color: var(--color-teal); }
.panel-primary > .panel-heading { background-color: var(--legacy-blue); }
.panel-success > .panel-heading { background-color: var(--legacy-green); }
.panel-info > .panel-heading { background-color: var(--legacy-teal-dk); }
.panel-warning > .panel-heading { background-color: var(--legacy-yellow); }
.panel-danger > .panel-heading { background-color: var(--brand-color); }
.panel-dark > .panel-heading { background-color: var(--menu-text); }

.panel-fill { border-radius: var(--radius-card); border: 1px solid var(--border-light); box-shadow: var(--shadow-card); background: var(--bg-card); }
.panel-body { padding: 24px; }

.panel-title-sub { font-size: 12px; font-weight: 400; color: var(--text-muted); margin-left: 8px; }


/* ============================================================================
   10. TABS & NAV
   ============================================================================ */
.tab-content { padding: 20px 0 0 0; }
.nav-tabs > li > a { color: var(--menu-text); text-transform: uppercase; font-weight: 600; }
.nav-tabs > li > a:hover { background-color: var(--bg-page); }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover { color: var(--tab-active-color); }

.tabs-bordered { border-bottom: 2px solid var(--tab-border-color) !important; font-size: 12px; }
.tabs-bordered li a,
.tabs-bordered li a:hover,
.tabs-bordered li a:focus { border: 0 !important; background-color: var(--bg-card) !important; padding: 5px 5px !important; }
.tabs-bordered li.active a,
.tabs-bordered li.active a:hover,
.tabs-bordered li.active a:focus { border-bottom: 2px solid var(--brand-color) !important; margin-bottom: -1px; color: var(--brand-color); }
.tabs-mb { margin-bottom: 20px; }

.nav-pills > li > a { color: var(--menu-text); }
.nav-pills > li.active > a,
.nav-pills > li.active > a:focus,
.nav-pills > li.active > a:hover { background-color: var(--color-teal); }

.tab-badge-counter { background: var(--brand-color); color: var(--text-white); border-radius: 10px; font-size: 10px; padding: 1px 7px; margin-left: 4px; font-weight: 700; }


/* ============================================================================
   11. MODALI — Standard + Drawer
   ============================================================================ */
.modal:not(.drawer-modal) .modal-dialog .modal-content { box-shadow: none; border-color: var(--border-light); border-radius: 2px; padding: 25px; }
.modal:not(.drawer-modal) .modal-dialog .modal-content .modal-header { border-bottom-width: 2px; margin: 0; padding: 0; padding-bottom: 15px; }
.modal:not(.drawer-modal) .modal-dialog .modal-content .modal-body { padding: 20px 0; }
.modal:not(.drawer-modal) .modal-dialog .modal-content .modal-footer { padding: 0; padding-top: 15px; }
.modal-full { width: 98%; }
.modal-content .nav.nav-tabs + .tab-content { margin-bottom: 0; }
.modal-content .panel-group { margin-bottom: 0; }
.modal-content .panel { border-top: none; }
.modal-tab-content { padding: 20px; }

/* Drawer Modal — slide da destra */
.modal.drawer-modal { padding-right: 0 !important; }
.modal.drawer-modal .modal-dialog {
    position: fixed; margin: 0;
    width: 100% !important; max-width: 600px !important;
    height: 100%; right: 0; top: 0; bottom: 0;
    transform: translate3d(100%, 0, 0);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1041;
}
.modal.in.drawer-modal .modal-dialog,
.modal.show.drawer-modal .modal-dialog { transform: translate3d(0, 0, 0); }
.drawer-modal .modal-content { height: 100vh; border-radius: 0; border: none; box-shadow: var(--shadow-drawer); display: flex; flex-direction: column; background: var(--bg-card); }
.drawer-modal .modal-header { padding: 25px 30px !important; border-bottom: 1px solid var(--border-light); background-color: var(--bg-card); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.drawer-modal .modal-body { padding: 30px !important; overflow-y: auto; flex-grow: 1; background-color: var(--bg-card); }
.drawer-modal .modal-footer { padding: 15px 30px !important; border-top: 1px solid var(--border-light); background-color: var(--bg-card) !important; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; flex-shrink: 0; }
.drawer-modal .modal-title-group { text-align: left; flex-grow: 1; }
.drawer-modal .modal-title-group h4 { font-family: inherit; font-weight: 700; color: var(--text-dark); font-size: 22px; margin: 0 0 5px 0; }
.drawer-modal .modal-subtitle { display: block; font-size: 13px; color: var(--text-muted); font-weight: 400; }
@media (max-width: 576px) { .drawer-modal .modal-dialog { width: 100% !important; max-width: 100% !important; } }

/* Modal foto profilo */
#modalCaricaFoto { padding-right: 0 !important; }
#modalCaricaFoto .modal-dialog { position: fixed; margin: 0; width: 500px; max-width: 100%; height: 100%; right: 0; top: 0; bottom: 0; transform: translate3d(100%, 0, 0); transition: transform 0.3s cubic-bezier(0.25,0.8,0.25,1); }
#modalCaricaFoto.in .modal-dialog, #modalCaricaFoto.show .modal-dialog { transform: translate3d(0, 0, 0); }
#modalCaricaFoto .modal-content { height: 100vh; border-radius: 0; border: none; box-shadow: var(--shadow-drawer); display: flex; flex-direction: column; background: var(--bg-card); }
#modalCaricaFoto .modal-header { padding: 25px 30px; border-bottom: 1px solid var(--border-light); background: var(--bg-card); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; color: var(--text-dark); }
#modalCaricaFoto .modal-body { padding: 30px; overflow-y: auto; flex-grow: 1; }
#modalCaricaFoto .modal-footer { padding: 20px 30px; border-top: 1px solid var(--border-light); background: var(--bg-card); display: flex; justify-content: center; gap: 10px; flex-shrink: 0; }
@media (max-width: 576px) { #modalCaricaFoto .modal-dialog { width: 100%; } #modalCaricaFoto .modal-header { padding: 20px; } #modalCaricaFoto .modal-body { padding: 20px; } #modalCaricaFoto .modal-footer { justify-content: flex-end; } }

/* Delete modal content */
.delete-content-wrapper { text-align: center; padding: 20px 10px; }
.delete-icon-circle { width: 64px; height: 64px; background: var(--color-danger-subtle); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 28px; color: var(--brand-color); }
.delete-title-text { font-size: 18px; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.delete-sub-text { font-size: 13px; color: var(--color-gray-500); line-height: 1.6; }

/* Close drawer button */
.close-drawer-round { background: var(--bg-card); border: 1px solid var(--border-light); width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-muted); cursor: pointer; transition: all 0.2s ease; outline: none; font-size: 18px; flex-shrink: 0; margin-left: 15px; }
.close-drawer-round:hover { background-color: var(--brand-light-hover); color: var(--brand-color); border-color: var(--brand-color); transform: rotate(90deg); }
.drawer-close-icon { font-size: 14px; }
.drawer-divider { border: none; border-top: 1px solid var(--border-light); margin: 15px 0; }
.form-drawer { height: 100%; display: flex; flex-direction: column; }


/* ============================================================================
   12. FORM & INPUT
   ============================================================================ */
textarea.form-control { min-height: 90px; }
.form-control { border: 1px solid var(--input-border); border-radius: 4px; padding: 7px 12px; height: 38px; max-width: 100%; box-shadow: none; }
.form-control:focus { border: 1px solid var(--input-focus-border); box-shadow: none; outline: 0 !important; }
.input-lg { height: 46px; padding: 10px 16px; font-size: 18px; line-height: 1.33; border-radius: 6px; }
.input-sm { height: 30px; padding: 5px 10px; font-size: 12px; line-height: 1.5; border-radius: 3px; }
.form-horizontal .form-group { margin-left: -10px; margin-right: -10px; }
.form-control-feedback { line-height: 38px !important; }
.input-group-btn .btn { padding: 8px 12px; }
.input-group-btn .btn-sm { padding: 5px 10px; }
.input-group-btn .btn-lg { padding: 10px 17px; }
.input-group-addon { border-radius: 2px; border: 1px solid var(--border-light); }

.has-success .control-label, .has-success .help-block, .has-success .form-control-feedback { color: var(--legacy-green); }
.has-warning .control-label, .has-warning .help-block, .has-warning .form-control-feedback { color: var(--color-warning); }
.has-error .control-label, .has-error .help-block, .has-error .form-control-feedback { color: var(--brand-color); }
.has-success .form-control { border-color: var(--legacy-green); box-shadow: none !important; }
.has-warning .form-control { border-color: var(--color-warning); box-shadow: none !important; }
.has-error .form-control { border-color: var(--brand-color); box-shadow: none !important; }

/* Form controllo moderno */
.form-control-modern { width: 100%; height: 38px; border: 1px solid var(--border-light); border-radius: 8px; padding: 0 12px; font-size: 13px; color: var(--text-body); background: var(--bg-card); outline: none; transition: border-color .15s, box-shadow .15s; }
.form-control-modern:focus { border-color: var(--color-secondary); box-shadow: 0 0 0 2px var(--color-secondary-border); }
textarea.form-control-modern { height: 80px; padding: 8px 12px; resize: vertical; }
.custom-label { display: block; font-size: 11px; font-weight: 700; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 5px; }

/* Input group flex */
.input-group-flex { display: flex; gap: 8px; }
.input-civico { width: 80px !important; flex-shrink: 0; }
.input-cap { width: 90px !important; flex-shrink: 0; }
.textarea-resize { resize: vertical; }
.flatpickr-white { background: var(--bg-card) !important; }
.form-inline-table { margin: 0; }

/* Password toggle */
.password-wrapper { position: relative; }
.password-input { padding-right: 40px; }
.password-toggle { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); cursor: pointer; color: var(--text-muted); font-size: 18px; z-index: 10; }

/* Validation */
.parsley-error { border-color: var(--brand-color) !important; }
.parsley-errors-list { display: none; margin: 0; padding: 0; }
.parsley-errors-list.filled { display: none; }
.parsley-errors-list > li { font-size: 12px; list-style: none; color: var(--brand-color); margin-top: 5px; }

/* Select2 */
.select2-container .select2-selection--single { border: 1px solid var(--legacy-border-soft) !important; height: 38px !important; }
.select2-container .select2-selection--single .select2-selection__rendered { line-height: 36px !important; padding-left: 12px !important; }
.select2-container .select2-selection--single .select2-selection__arrow { height: 34px; width: 34px; right: 3px; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: var(--color-teal); }
.select2-results__option { padding: 6px 12px; }
.select2-dropdown { border: 1px solid var(--legacy-border-soft) !important; padding-top: 5px; box-shadow: 0 2px 2px rgba(0,0,0,0.15); }
.select2-container .select2-selection--multiple { min-height: 38px !important; border: 1px solid var(--legacy-border-soft) !important; }
.select2-container .select2-selection--multiple .select2-search__field { margin-top: 7px; border: 0 !important; }
.select2-container .select2-selection--multiple .select2-selection__choice { background-color: var(--bg-page); border: 1px solid var(--legacy-border-soft); border-radius: 1px; padding: 0 7px; }

/* Bootstrap tagsinput */
.bootstrap-tagsinput { box-shadow: none; padding: 5px 7px; width: 100%; border: 1px solid var(--legacy-border-soft); }
.bootstrap-tagsinput .label-info { background-color: var(--color-teal) !important; display: inline-block; padding: 5px; margin: 3px 1px; }

/* Datepicker */
.datepicker-dropdown { padding: 10px !important; }
.datepicker td, .datepicker th { width: 30px; height: 30px; }
.datepicker table tr td.active, .datepicker table tr td.selected { background-color: var(--color-teal) !important; color: var(--text-white) !important; background-image: none !important; text-shadow: none !important; }
.datepicker table tr td.today { background-color: var(--legacy-green) !important; color: var(--text-white) !important; background-image: none !important; }
.daterangepicker td.active, .daterangepicker td.active:hover { background-color: var(--color-teal); }
.daterangepicker .ranges li.active, .daterangepicker .ranges li:hover { background-color: var(--color-teal); border: 1px solid var(--color-teal); color: var(--text-white); }

/* Bootstrap timepicker */
.bootstrap-timepicker-widget table td input { border: 1px solid rgba(98,103,115,0.3); width: 35px; }

/* SweetAlert2 */
.swal2-modal { font-family: var(--font-main); }
.swal2-modal .swal2-title { font-size: 28px; }
.swal2-modal .swal2-content { font-size: 16px; }
.swal2-icon.swal2-question { color: var(--color-teal); border-color: var(--color-teal); }
.swal2-icon.swal2-error { border-color: var(--brand-color); }
.swal2-icon.swal2-error .line { background-color: var(--brand-color); }
.swal2-modal .swal2-file:focus, .swal2-modal .swal2-input:focus, .swal2-modal .swal2-textarea:focus { outline: 0; border: 2px solid var(--color-teal); }

/* Info box */
.info-box-soft { background-color: var(--bg-info); border: 1px solid var(--color-info-border); border-radius: var(--radius-card); padding: 25px; margin-top: 20px; margin-bottom: 35px; display: flex; align-items: flex-start; gap: 20px; }
.info-box-soft .info-box-icon { flex-shrink: 0; width: 45px; height: 45px; display: flex; align-items: center; justify-content: center; font-size: 24px; color: var(--brand-color); background: var(--bg-card); border-radius: 50%; border: 1px solid var(--brand-border); }
.info-box-soft .info-box-content h5 { margin: 0 0 5px; font-size: 15px; font-weight: 700; color: var(--brand-hover); }
.info-box-soft .info-box-content p { margin: 0; font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.info-box-blue, .info-box-red { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border-radius: 10px; margin-bottom: 20px; }
.info-box-blue { background: var(--color-secondary-light); border-left: 4px solid var(--color-secondary); }
.info-box-red { background: var(--color-danger-subtle); border-left: 4px solid var(--brand-color); }
.info-box-icon { font-size: 22px; flex-shrink: 0; margin-top: 2px; }
.info-box-blue .info-box-icon { color: var(--color-secondary); }
.info-box-red .info-box-icon { color: var(--brand-color); }
.info-box-content h5 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.info-box-content p { margin: 0; font-size: 12px; color: var(--color-gray-500); }

.alert-info-custom { background-color: var(--bg-info); border-color: var(--color-info-border); color: var(--color-info-text); border-radius: var(--radius-card); margin-bottom: 25px; }


/* ============================================================================
   13. CHECKBOX & RADIO
   ============================================================================ */
.checkbox { padding-left: 25px; }
.checkbox label { display: inline-block; padding-left: 5px; position: relative; font-family: var(--font-main); font-weight: normal; }
.checkbox label::before { background-color: var(--bg-card); border-radius: 2px; border: 1px solid var(--input-border); content: ""; display: inline-block; height: 17px; left: 0; margin-left: -20px; position: absolute; transition: 0.3s ease-in-out; width: 17px; outline: none !important; margin-top: 2px; }
.checkbox input[type="checkbox"] { cursor: pointer; opacity: 0; z-index: 1; outline: none !important; }
.checkbox input[type="checkbox"]:checked + label::after { content: "\F12C"; font-family: "Material Design Icons"; font-weight: bold; }
.checkbox.checkbox-circle label::before { border-radius: 50%; }
.checkbox.checkbox-inline { margin-top: 0; }
.checkbox-custom input[type="checkbox"]:checked + label::before { background-color: var(--color-teal); border-color: var(--color-teal); }
.checkbox-custom input[type="checkbox"]:checked + label::after { color: var(--text-white); }
.checkbox-danger input[type="checkbox"]:checked + label::before { background-color: var(--brand-color); border-color: var(--brand-color); }
.checkbox-danger input[type="checkbox"]:checked + label::after { color: var(--text-white); }

.radio { padding-left: 20px; }
.radio label { display: inline-block; padding-left: 5px; position: relative; font-family: var(--font-main); font-weight: normal; }
.radio label::before { background-color: var(--bg-card); border-radius: 50%; border: 1px solid var(--input-border); content: ""; display: inline-block; height: 17px; left: 0; margin-left: -20px; outline: none !important; position: absolute; width: 17px; }
.radio-custom input[type="radio"]:checked + label::before { border-color: var(--color-teal); }
.radio-custom input[type="radio"]:checked + label::after { background-color: var(--color-teal); }
.radio-danger input[type="radio"]:checked + label::before { border-color: var(--brand-color); }
.radio-danger input[type="radio"]:checked + label::after { background-color: var(--brand-color); }
.checkbox-custom { width: 18px; height: 18px; cursor: pointer; margin: 0; vertical-align: middle; }


/* ============================================================================
   14. TABELLE
   ============================================================================ */
table.dataTable { margin-top: 10px !important; margin-bottom: 18px !important; }
table.dataTable th.focus, table.dataTable td.focus { outline: 2px solid var(--color-teal) !important; background-color: var(--color-teal); color: var(--text-white); }
table.dataTable.dtr-inline.collapsed > tbody > tr > td:first-child:before { box-shadow: 0 0 3px rgba(67,89,102,0.2); background-color: var(--legacy-green); }
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before { background-color: var(--brand-color); }
table.dataTable thead th { position: relative; background-image: none !important; }
.fixedHeader-floating { top: 0 !important; }

.table-custom thead th { border-top: 0; border-bottom: 2px solid var(--border-light); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; font-size: 12px; color: var(--text-muted); background: var(--bg-card); padding-top: 15px; padding-bottom: 15px; }
.table-custom tbody tr { transition: background-color 0.2s ease-in-out; }
.table-custom tbody tr:hover { background-color: rgba(0,0,0,0.03) !important; }
.table-custom td { border-top: 1px solid var(--border-light); padding-top: 15px; padding-bottom: 15px; }

.table-clean thead th { background: var(--bg-subtle); font-size: 11px; font-weight: 700; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid var(--border-light); padding: 10px 14px; white-space: nowrap; }
.table-clean tbody td { padding: 10px 14px; vertical-align: middle; border-bottom: 1px solid var(--color-gray-100); }
.table-clean tbody tr:hover td { background: var(--bg-subtle); }
.table-clean tbody tr:last-child td { border-bottom: none; }

.row-flex-center { display: flex; align-items: center; }
.th-pl, .td-pl { padding-left: 15px !important; }
.th-right, .td-right { text-align: right !important; padding-right: 15px !important; }
.td-mid { vertical-align: middle !important; }
.td-muted-mid { color: var(--text-muted); vertical-align: middle !important; }
.td-name { font-weight: 600; color: var(--text-dark); }
.td-muted { color: var(--text-muted); }
.td-ricambi { padding: 8px 12px !important; }
.table-empty { text-align: center; color: var(--color-empty); padding: 30px 0; }
.text-truncate-custom { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-width: 400px; }
.amount-cell { font-weight: 700; font-size: 13px; white-space: nowrap; }


/* ============================================================================
   15. BADGE & LABEL
   ============================================================================ */
.label { font-weight: 600; letter-spacing: 0.05em; padding: 0.3em 0.6em; }
.label-danger, .label-dark-bg { background-color: var(--brand-color); color: var(--text-white); }
.label-custom { background-color: var(--color-teal); }
.label-primary { background-color: var(--legacy-blue); }
.label-success { background-color: var(--legacy-green); }
.label-info { background-color: var(--legacy-teal-dk); }
.label-warning { background-color: var(--color-warning); }
.label-white { background-color: rgba(255,255,255,0.7); color: var(--menu-text) !important; }
.label-dark { background-color: var(--menu-text); }

.badge { text-transform: uppercase; font-weight: 600; padding: 3px 5px; font-size: 12px; margin-top: 1px; background-color: var(--color-teal); }
.badge-xs { font-size: 9px; }
.badge-xs, .badge-sm { transform: translate(0, -2px); }
.badge-white { background-color: rgba(255,255,255,0.7); color: var(--menu-text) !important; }
.badge-primary { background-color: var(--legacy-blue); }
.badge-success { background-color: var(--legacy-green); }
.badge-info { background-color: var(--legacy-teal-dk); }
.badge-warning { background-color: var(--color-warning); }
.badge-danger { background-color: var(--brand-color); }
.badge-dark { background-color: var(--menu-text); }

/* Badge Home / Moderni */
.home-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; letter-spacing: 0.4px; border: 1px solid transparent; }
.badge-gray    { background: var(--color-gray-100); color: var(--text-body); border-color: var(--border-light); }
.badge-warning { background: var(--color-warning-light); color: var(--color-warning-text); border-color: var(--color-warning-border); }
.badge-red     { background: var(--color-orange-light); color: var(--color-orange-text); border-color: var(--color-orange-border); }
.badge-green   { background: var(--color-success-light); color: var(--color-success-text); border-color: var(--color-success-border); }
.today-badge   { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; background: var(--brand-color); color: var(--text-white); margin-right: 4px; }
.badge-scad-today { background-color: var(--color-warning-light); color: var(--color-warning); border: 1px solid var(--color-warning-border); }
.badge-tipo-ordinario { background: var(--color-info-light); color: var(--color-info); border-color: var(--color-info-border); }
.badge-tipo-straordinario { background: var(--color-orange-light); color: var(--color-orange-text); border-color: var(--color-orange-border); }
.badge-intervento-tipo { margin-left: 6px; font-size: 10px; }
.badge-codice { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--color-secondary-light); color: var(--color-secondary); letter-spacing: 0.5px; }
.badge-codice-red { background: var(--color-danger-subtle); color: var(--brand-color); }
.auto-badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 10px; font-weight: 700; background: var(--color-success-light); color: var(--color-success-text); border: 1px solid var(--color-success-icon); margin-left: 6px; vertical-align: middle; }
.auto-badge-icon { font-size: 9px; }


/* ============================================================================
   16. PAGINAZIONE
   ============================================================================ */
.pagination > li:first-child > a, .pagination > li:first-child > span { border-radius: 3px 0 0 3px; }
.pagination > li:last-child > a, .pagination > li:last-child > span { border-radius: 0 3px 3px 0; }
.pagination > li > a, .pagination > li > span { color: var(--menu-text); }
.pagination > li > a:hover, .pagination > li > span:hover,
.pagination > li > a:focus, .pagination > li > span:focus { background-color: var(--bg-page); }
.pagination > .active > a, .pagination > .active > span,
.pagination > .active > a:hover, .pagination > .active > span:hover,
.pagination > .active > a:focus, .pagination > .active > span:focus { background-color: var(--pagination-active-bg); border-color: var(--pagination-active-bg); color: var(--text-white); }
.pager li > a, .pager li > span { border-radius: 3px; color: var(--menu-text); }

/* DataTables pagination moderna */
.dataTables_paginate .pagination { display: inline-flex !important; align-items: center !important; gap: 4px !important; }
.dataTables_paginate .pagination > li > a,
.dataTables_paginate .pagination > li > span { min-width: 34px !important; height: 34px !important; padding: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 8px !important; font-weight: 500; font-size: 13px; }
.dataTables_paginate .pagination > .active > a,
.dataTables_paginate .pagination > .active > span { background-color: var(--color-secondary) !important; border-color: var(--color-secondary) !important; color: var(--text-white) !important; }

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover { background-color: var(--brand-color); border-color: var(--brand-color); }
.list-group-item.active .list-group-item-text { color: rgba(255,255,255,0.7); }


/* ============================================================================
   17. ALERT & PROGRESS
   ============================================================================ */
.alert { position: relative; }
.alert .alert-link { font-weight: 600; }
.alert-dismissable .close, .alert-dismissible .close { opacity: 0.9; }
.alert-icon { padding-left: 50px; }
.alert-icon i { position: absolute; left: 0; height: 50px; width: 50px; text-align: center; top: 0; line-height: 50px; font-size: 22px; }
.alert-success  { color: var(--legacy-green); background-color: #e8f8ea; border-color: #9cdea2; }
.alert-info     { color: var(--legacy-teal-dk); background-color: #eaf7fb; border-color: #93d8ec; }
.alert-warning  { color: var(--color-warning); background-color: var(--color-warning-light); border-color: var(--color-warning-border); }
.alert-danger   { color: var(--brand-color); background-color: var(--color-danger-subtle); border-color: var(--color-danger-border); }
.alert-white    { background-color: var(--bg-card) !important; }

.progress { background-color: var(--bg-page); height: 10px; margin-bottom: 18px; overflow: hidden; box-shadow: none !important; }
.progress-bar { box-shadow: none; font-size: 8px; font-weight: 600; line-height: 12px; }
.progress.progress-sm { height: 5px !important; }
.progress.progress-md { height: 15px !important; }
.progress.progress-lg { height: 20px !important; }
.progress-bar-primary { background-color: var(--legacy-blue); }
.progress-bar-success { background-color: var(--legacy-green); }
.progress-bar-info    { background-color: var(--legacy-teal-dk); }
.progress-bar-warning { background-color: var(--color-warning); }
.progress-bar-danger  { background-color: var(--brand-color); }
.progress-bar-custom  { background-color: var(--color-teal); }

.popover { font-family: inherit; border: none; border-radius: 3px; box-shadow: 0 0 28px rgba(0,0,0,0.15); }
.popover .popover-title { background-color: transparent; color: var(--color-teal); padding: 12px 15px; font-size: 15px; }
.tooltip .tooltip-inner { padding: 4px 10px; border-radius: 2px; background-color: #464952; }
.tooltip.left .tooltip-arrow  { border-left-color: #464952; }
.tooltip.top .tooltip-arrow   { border-top-color: #464952; }
.tooltip.bottom .tooltip-arrow{ border-bottom-color: #464952; }
.tooltip.right .tooltip-arrow { border-right-color: #464952; }

.bulk-action-bar { display: none; background: var(--bg-card); border: 1px solid var(--border-light); box-shadow: var(--shadow-card); padding: 12px 24px; border-radius: 12px; margin-bottom: 25px; align-items: center; justify-content: space-between; animation: slideDown 0.3s ease-out forwards; border-left: 4px solid var(--color-danger); }
.bulk-action-bar-left { display: flex; align-items: center; gap: 10px; }
.bulk-action-bar-left i { font-size: 22px; color: var(--color-danger); display: flex; align-items: center; line-height: 1; }
.bulk-count-number { color: var(--color-danger); font-weight: 700; margin-right: 5px; font-size: 16px; }
.selected-count-text { font-weight: 600; color: var(--text-dark); font-size: 15px; margin: 0; display: flex; align-items: center; line-height: 1; }


/* ============================================================================
   18. COLORI TESTO & SFONDO (utility)
   ============================================================================ */
.text-custom   { color: var(--brand-color); }
.text-white    { color: var(--text-white); }
.text-danger   { color: var(--brand-color); }
.text-muted    { color: var(--text-muted) !important; }
.text-dark     { color: var(--menu-text) !important; }
.text-primary  { color: #fdcd1f; }
.text-warning  { color: var(--color-warning); }
.text-success  { color: var(--brand-color); }
.text-info     { color: #666666; }
.text-accettate{ color: var(--color-teal); }
.text-rifiutate{ color: var(--brand-color); }
.text-sospeso  { color: #fdcd1f; }
.text-color-empty { color: var(--color-empty); }
.text-required  { color: var(--color-danger); }
.text-empty-dash{ color: var(--color-empty); }
.color-green { color: #2d8c4e !important; }
.color-red   { color: var(--brand-color) !important; }

.bg-custom   { background-color: var(--color-teal) !important; }
.bg-primary  { background-color: var(--brand-color) !important; }
.bg-success  { background-color: var(--legacy-green) !important; }
.bg-info     { background-color: var(--legacy-teal-dk) !important; }
.bg-warning  { background-color: var(--color-warning) !important; }
.bg-danger   { background-color: var(--brand-color) !important; }
.bg-muted    { background-color: var(--text-muted) !important; }
.bg-white    { background-color: var(--bg-card) !important; }
.bg-facebook { background-color: #3b5998 !important; border-color: #3b5998 !important; color: var(--text-white); }
.bg-twitter  { background-color: #00aced !important; border-color: #00aced !important; color: var(--text-white); }


/* ============================================================================
   19. UTILITY — spacing, typography, misc
   ============================================================================ */
.m-0  { margin: 0 !important; }
.m-t-0{ margin-top: 0 !important; }
.m-t-10{ margin-top: 10px !important; }
.m-t-20{ margin-top: 20px !important; }
.m-t-30{ margin-top: 30px !important; }
.m-b-0 { margin-bottom: 0 !important; }
.m-b-5 { margin-bottom: 5px !important; }
.m-b-20{ margin-bottom: 20px !important; }
.m-b-30{ margin-bottom: 30px !important; }
.m-l-10{ margin-left: 10px !important; }
.m-r-10{ margin-right: 10px !important; }
.p-0   { padding: 0 !important; }
.p-20  { padding: 20px; padding-bottom: 0; padding-top: 0; }
.p-b-0 { padding-bottom: 0 !important; }
.p-t-50{ padding-top: 50px !important; }
.font-13{ font-size: 13px; }
.font-normal { font-weight: normal; }
.line-h-24 { line-height: 24px; }
.thumb-sm { height: 32px; width: 32px; }
.thumb-xl { height: 120px; width: 120px; }
.center-page { float: none !important; margin: 0 auto; }
.img-circle { border-radius: 50%; }
.user-avatar-img { object-fit: cover !important; padding: 0 !important; }
.required::after { content: " *"; color: var(--color-danger); }
.page-bottom-spacer { margin-bottom: 50px; }
a.subitem { color: var(--brand-color); text-decoration: underline; }
.filter-label { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); display: block; margin-bottom: 4px; }
.filter-remove-link { font-size: 12px; color: var(--color-danger); }
.filter-remove-link:hover { color: var(--color-danger-hover); }
.orario-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 6px 14px; font-size: 13px; font-weight: 600; color: var(--text-dark); margin-left: 10px; }
.orario-badge i { color: var(--color-danger); }
.link-intervento { margin-left: 6px; font-size: 12px; color: var(--brand-color); }
.link-intervento:hover { color: var(--brand-hover); }
.panel-empty { text-align: center; color: var(--color-empty); padding: 40px 20px; }
.panel-empty-icon { font-size: 36px; display: block; margin-bottom: 10px; }


/* ============================================================================
   20. NOTIFICHE CAMPANELLA
   ============================================================================ */
.notifi-title { border-bottom: 1px solid rgba(0,0,0,0.1); font-size: 15px; text-transform: uppercase; font-weight: 600; padding: 11px 20px 15px; color: var(--menu-text); }
.notifi-label-text { flex-grow: 1; font-weight: 600; line-height: 1; margin-top: 2px; }
.notification-scroll { max-height: 280px; overflow-y: auto; overflow-x: hidden; }
.notify-icon { background: var(--brand-light); color: var(--brand-color); border-radius: 50%; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.notify-icon i { margin: 0 !important; line-height: 1 !important; display: block; }
.notify-time-small { font-size: 10px; color: var(--text-muted); }
.notify-empty { padding: 40px 15px; border: none; text-align: center; color: var(--text-muted); }
.notify-empty-icon { font-size: 35px; opacity: 0.3; display: block; margin-bottom: 8px; }
.notify-empty-text { font-size: 13px; }
.notify-footer-divider { border-right: 1px solid var(--border-light); }
.notification-list em { width: 36px; color: var(--text-white); text-align: center; height: 36px; line-height: 36px; border-radius: 50%; margin-top: 2px; font-size: 16px; }


/* ============================================================================
   21. DROPDOWN PROFILO
   ============================================================================ */
.profile-dropdown > li > a.profile-link:hover { background-color: var(--brand-light-hover); color: var(--brand-color); transform: translateX(4px); }
.profile-dropdown > li > a.profile-link:hover i { color: var(--brand-color) !important; }
.profile-dropdown > li > a.logout-link:hover { background-color: var(--color-danger-light); color: var(--color-danger); transform: translateX(4px); }
.profile-dropdown > li > a.logout-link:hover i { color: var(--color-danger) !important; }


/* ============================================================================
   22. I MIEI DATI — Profilo & Foto
   ============================================================================ */
.member-card { background: var(--bg-card); padding: 30px; border-radius: var(--radius-card); box-shadow: var(--shadow-card); margin-bottom: 30px; position: relative; }
.member-card .member-thumb { position: relative; }
.member-card .member-star { position: absolute; bottom: 10px; right: 5px; background-color: var(--bg-card); height: 26px; width: 26px; border-radius: 50%; line-height: 26px; text-align: center; font-size: 18px; }
.member-thumb { position: relative; margin: 0 auto; width: 130px; height: 130px; cursor: pointer; }
.member-thumb img { width: 100%; height: 100%; object-fit: cover; border: 5px solid var(--brand-color) !important; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,0.15); padding: 0 !important; background-color: transparent !important; }
.member-star { position: absolute; bottom: 5px; right: 5px; background-color: var(--brand-color) !important; color: var(--text-white) !important; width: 35px; height: 35px; border-radius: 50%; text-align: center; line-height: 35px; font-size: 18px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.3); transition: all 0.3s cubic-bezier(0.175,0.885,0.32,1.275); z-index: 10; }
.member-star::before { color: var(--text-white) !important; }
.member-star:hover { background-color: var(--brand-hover) !important; transform: scale(1.1); }
.user-name-title { margin-top: 25px; font-weight: 700; color: var(--text-dark); font-size: 22px; }
.user-badge { position: absolute; top: 15px; left: 0; padding: 5px 15px; border-radius: 20px; color: var(--text-white); font-size: 11px; text-transform: uppercase; font-weight: bold; }

/* Upload foto */
.upload-area { background: var(--bg-subtle); border: 2px dashed var(--border-light); border-radius: var(--radius-card); padding: 30px; text-align: center; transition: all 0.3s ease; cursor: pointer; position: relative; margin-bottom: 20px; }
.upload-area:hover { border-color: var(--brand-color); background: var(--bg-info); }
.upload-icon { font-size: 40px; color: var(--border-light); margin-bottom: 10px; }
.upload-area:hover .upload-icon { color: var(--brand-color); }
.upload-label-main { font-weight: 600; color: var(--text-body); }
.upload-label-sub { font-size: 12px; color: var(--text-muted); margin-top: 5px; }
#inputFoto { position: absolute; width: 100%; height: 100%; top: 0; left: 0; opacity: 0; cursor: pointer; }
.preview-container { margin-top: 10px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-card); padding: 10px; box-shadow: var(--shadow-card); text-align: center; min-height: 250px; display: flex; align-items: center; justify-content: center; }
#cropImage { max-width: 100%; display: none; border-radius: 4px; }
.upload-placeholder { color: var(--border-light); text-align: center; }
.upload-placeholder-icon { font-size: 40px; display: block; margin-bottom: 10px; }
.cropper-view-box, .cropper-face { border-radius: 50% !important; }

/* Privacy & Password */
.privacy-intro { margin-bottom: 20px; }
.privacy-law-ref { font-size: 12px; }
.privacy-link-row { margin-top: 20px; }


/* ============================================================================
   23. HOME PAGE — KPI, Accesso Rapido, Scadenze
   ============================================================================ */
.kpi-card { display: flex; align-items: center; gap: 16px; background: var(--bg-card); border-radius: 16px; padding: 15px; margin-bottom: 20px; height: 100%; border: 1px solid var(--border-light); box-shadow: var(--shadow-card); text-decoration: none; transition: all 0.25s ease; cursor: pointer; }
.kpi-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.09); }
.kpi-icon { width: 52px; height: 52px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.kpi-body { display: flex; flex-direction: column; justify-content: space-between; height: 100%; flex-grow: 1; margin-left: 15px; }
.kpi-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--text-muted); line-height: 1.2; min-height: 3.6em; }
.kpi-value { display: block; font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -1px; color: var(--text-dark); margin-top: auto; }

.kpi-blue   .kpi-icon { background: var(--brand-light); color: var(--brand-color); }
.kpi-blue:hover       { border-color: var(--brand-border); }
.kpi-blue   .kpi-value{ color: var(--color-secondary); }
.kpi-green  .kpi-icon { background: var(--color-success-light); color: var(--color-success); }
.kpi-green:hover      { border-color: var(--color-success-border); }
.kpi-red    .kpi-icon { background: var(--color-danger-light); color: var(--color-danger); }
.kpi-red:hover        { border-color: var(--color-danger-border); }
.kpi-red    .kpi-value{ color: var(--color-danger); }
.kpi-orange .kpi-icon { background: var(--color-orange-light); color: var(--color-orange); }
.kpi-orange:hover     { border-color: var(--color-orange-border); }
.kpi-orange .kpi-value{ color: var(--color-orange); }
.kpi-gray   .kpi-icon { background: var(--color-gray-50); color: var(--color-gray-400); }

.quick-card { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--bg-card); border-radius: 16px; padding: 18px 10px; margin-bottom: 16px; border: 1px solid var(--border-light); text-decoration: none; transition: all 0.25s ease; cursor: pointer; gap: 10px; }
.quick-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px var(--brand-light-hover); border-color: var(--brand-border); }
.quick-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-light); color: var(--brand-color); display: flex; align-items: center; justify-content: center; font-size: 24px; transition: all 0.25s ease; }
.quick-card:hover .quick-icon { background: var(--brand-color); color: var(--text-white); }
.quick-label { font-size: 11px; font-weight: 700; color: var(--text-body); text-transform: uppercase; letter-spacing: 0.6px; text-align: center; }
.quick-card:hover .quick-label { color: var(--brand-color); }

.home-panel { background: var(--bg-card); border-radius: 16px; border: 1px solid var(--border-light); box-shadow: var(--shadow-card); margin-bottom: 24px; overflow: hidden; }
.home-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border-light); font-weight: 700; font-size: 13px; color: var(--text-dark); text-transform: uppercase; letter-spacing: 0.5px; }
.home-panel-link { font-size: 12px; font-weight: 600; color: var(--brand-color); text-decoration: none; }
.home-panel-link:hover { color: var(--brand-hover); }
.home-panel-icon { margin-right: 7px; }

.home-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.home-table thead th { padding: 10px 16px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); border-bottom: 1px solid var(--border-light); background: var(--bg-subtle); }
.home-table-row { cursor: pointer; transition: background 0.15s ease; }
.home-table-row:hover { background: var(--bg-subtle); }
.home-table-row td { padding: 11px 16px; border-bottom: 1px solid var(--border-light); color: var(--text-body); vertical-align: middle; }
.home-table-row:last-child td { border-bottom: none; }
.home-date-text { font-weight: 600; color: var(--text-dark); }

.home-empty { text-align: center; padding: 40px 20px; color: var(--text-muted); font-size: 13px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.home-empty-icon { font-size: 36px; color: var(--border-light); }
.home-empty-icon--success { color: var(--color-success-icon); }
.home-empty-text-ok { color: var(--color-success-text); }

.scad-item { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--border-light); text-decoration: none; transition: background 0.15s ease; cursor: pointer; }
.scad-item:last-child { border-bottom: none; }
.scad-item:hover { background: var(--bg-subtle); }
.scad-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.scad-dot.scad-expired { background: var(--color-danger); }
.scad-dot.scad-warning { background: var(--color-warning); }
.scad-info { flex: 1; min-width: 0; }
.scad-comp { display: block; font-size: 13px; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scad-cliente { display: block; font-size: 11px; color: var(--text-muted); }
.scad-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; }
.scad-meta span { font-size: 11px; font-weight: 700; }
.scad-meta small { font-size: 10px; color: var(--text-muted); }
.scad-meta.scad-expired span { color: var(--color-danger); }
.scad-meta.scad-warning span { color: var(--color-warning-text); }


/* ============================================================================
   24. AGENTI
   ============================================================================ */
.drawer-divider { border: none; border-top: 1px solid var(--border-light); margin: 15px 0; }


/* ============================================================================
   25. CALENDARIO
   ============================================================================ */
.calendar { float: left; margin-bottom: 0; }
.fc-view { margin-top: 30px; }
.none-border .modal-footer { border-top: none; }
.fc-toolbar { margin-bottom: 5px; margin-top: 15px; }
.fc-toolbar h2 { font-size: 18px; font-weight: 600; font-family: var(--font-alt); line-height: 30px; text-transform: uppercase; }
.fc-day-grid-event .fc-time { font-family: var(--font-alt); }
.fc-day { background: var(--bg-card); }
.fc th.fc-widget-header { background: var(--bg-page); font-size: 14px; line-height: 20px; padding: 10px 0; text-transform: uppercase; }
.fc-unthemed th,.fc-unthemed td,.fc-unthemed thead,.fc-unthemed tbody,.fc-unthemed .fc-divider,.fc-unthemed .fc-row,.fc-unthemed .fc-popover { border-color: var(--input-border); }
.fc-button { background: #f1f1f1; border: none; color: var(--menu-text); text-transform: capitalize; box-shadow: none !important; border-radius: 3px !important; margin: 0 3px !important; padding: 6px 12px !important; height: auto !important; }
.fc-state-hover { background: var(--bg-page); }
.fc-state-highlight { background: #f0f0f0; }
.fc-state-down,.fc-state-active,.fc-state-disabled { background-color: var(--color-teal) !important; color: var(--text-white) !important; text-shadow: none !important; }
.fc-cell-overlay { background: #f0f0f0; }
.fc-unthemed .fc-today { background: var(--bg-card); }
.fc-event { border-radius: 2px; border: none; cursor: move; font-size: 13px; margin: 5px 7px; padding: 5px 5px; text-align: center; }
.external-event { cursor: move; margin: 10px 0; color: var(--text-white); padding: 6px 10px; }
.fc-basic-view td.fc-week-number span { padding-right: 8px; font-weight: 700; font-family: var(--font-alt); }
.fc-basic-view td.fc-day-number { padding-right: 8px; font-weight: 700; font-family: var(--font-alt); }

/* Calendario Componenti */
.cal-header-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.cal-alert-info { background: var(--bg-info); border-color: var(--color-info-border); color: var(--color-info-text); border-radius: var(--radius-card); margin-bottom: 20px; }
.cal-comp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-comp-label { margin: 0; font-weight: 700; font-size: 13px; color: var(--color-gray-700); }
.cal-comp-icon { margin-right: 4px; }
.cal-comp-hint { font-size: 11px; color: var(--color-empty); }
.cal-comp-loader { text-align: center; padding: 15px; color: var(--text-muted); font-size: 13px; display: none; }
.cal-comp-empty { text-align: center; padding: 20px; color: var(--color-empty); font-size: 13px; display: none; }
.cal-comp-empty-icon { font-size: 28px; display: block; margin-bottom: 6px; color: var(--border-light); }
.cal-drawer-hr { border: none; border-top: 1px solid var(--border-light); margin: 16px 0; }
.cal-select-full { width: 100% !important; }
.comp-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--border-light); background: var(--bg-subtle); margin-bottom: 6px; transition: background 0.15s ease; }
.comp-row:hover { background: var(--color-info-light); border-color: var(--color-info-border); }
.comp-row.selected { background: var(--color-info-light); border-color: var(--brand-color); }
.comp-row input[type="checkbox"] { flex-shrink: 0; width: 16px; height: 16px; cursor: pointer; }
.comp-info { flex: 1; min-width: 0; }
.comp-name { font-weight: 600; font-size: 13px; color: var(--text-dark); }
.comp-scad { font-size: 11px; margin-top: 2px; }
.comp-azione { flex-shrink: 0; }
.comp-azione select { font-size: 12px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border-input); color: var(--text-dark); cursor: pointer; }
.comp-group-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; color: var(--text-muted); margin: 12px 0 6px; }
.comp-group-label.warn { color: var(--color-warning-text); }
.cal-legend { padding: 20px 20px 40px; }
.cal-legend-title { font-weight: 700; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; text-transform: uppercase; }
.cal-legend-list { list-style: none; padding: 0; margin: 0; font-size: 10px; }
.cal-legend-item { display: inline-block; margin-right: 15px; vertical-align: middle; }
.cal-legend-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; margin-right: 4px; }
.cal-legend-text { vertical-align: middle; color: var(--color-gray-600); }
.cal-event-badges { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.cal-event-link-wrap { text-align: center; margin-top: 28px; }
.cal-event-link { border-radius: var(--radius-btn) !important; padding: 10px 30px !important; }
.cal-modal-loading { text-align: center; padding-top: 50px; }
.cal-event-day { padding: 5px 7px; }
.cal-event-time { font-size: 10px; opacity: 0.85; margin-bottom: 2px; }
.cal-event-client { font-weight: 700; font-size: 12px; text-transform: uppercase; }
.cal-event-impianto { font-size: 11px; opacity: 0.85; }
.cal-event-city { font-size: 10px; opacity: 0.7; }
.cal-event-note { font-size: 10px; border-top: 1px solid rgba(255,255,255,0.3); margin-top: 3px; padding-top: 3px; font-style: italic; }
.cal-event-week { border-radius: 6px; overflow: hidden; margin-bottom: 2px; }
.cal-event-week-inner { padding: 4px 8px; font-size: 11px; line-height: 1.4; border-radius: 6px; color: var(--text-white); }
.cal-event-week-time { font-size: 9px; opacity: 0.85; }
.cal-event-week-client { font-weight: 700; text-transform: uppercase; }
.cal-event-week-imp { opacity: 0.85; font-size: 10px; }
.cal-resource-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 5px 0; }
.cal-resource-name { font-size: 13px; line-height: 1.2; }
.cal-title-main { font-size: 1.1em; font-weight: 700; }
.cal-title-year { font-size: 0.85em; color: var(--text-muted); font-weight: 400; }


/* ============================================================================
   26. INTERVENTI
   ============================================================================ */
.ricambi-title { font-weight: 700; color: var(--text-dark); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 12px; margin-top: 25px; }
.ricambi-title-icon { margin-right: 6px; }
.alert-intervento    { background: var(--bg-info); border-color: var(--color-info-border); color: var(--color-info-text); border-radius: var(--radius-card); font-size: 12px; padding: 8px 14px; margin-bottom: 0; }
.alert-intervento-lg { background: var(--bg-info); border-color: var(--color-info-border); color: var(--color-info-text); border-radius: var(--radius-card); margin-bottom: 20px; font-size: 13px; }


/* ============================================================================
   27. INSTALLAZIONI
   ============================================================================ */
.scad-row-expired { background-color: var(--color-danger-light) !important; }
.scad-row-warning { background-color: var(--color-warning-light) !important; }


/* ============================================================================
   28. AVVISI
   ============================================================================ */
.avv-card { background: var(--bg-card); border-radius: var(--radius-card); border: 1px solid var(--border-light); box-shadow: var(--shadow-card); overflow: hidden; }
.avv-header { padding: 24px 28px 0; }
.avv-title { font-size: 20px; font-weight: 700; color: var(--text-dark); margin: 0 0 16px; }
.avv-meta { display: flex; align-items: center; gap: 12px; padding: 0 28px 16px; }
.avv-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--brand-color); color: var(--text-white); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0; }
.avv-meta-name { font-weight: 600; color: var(--text-dark); font-size: 14px; }
.avv-meta-sep { color: var(--border-light); margin: 0 4px; }
.avv-divider { border: none; border-top: 1px solid var(--border-light); margin: 0; }
.avv-body { padding: 24px 28px; font-size: 15px; color: var(--text-body); line-height: 1.7; }
.avv-footer { display: flex; align-items: center; justify-content: space-between; padding: 14px 28px; background: var(--bg-subtle); border-top: 1px solid var(--border-light); }
.avv-badge-letto { display: inline-flex; align-items: center; background: var(--color-success-light); color: var(--color-success-text); border: 1px solid var(--color-success-border); border-radius: 20px; padding: 4px 12px; font-size: 12px; font-weight: 600; }
.avv-btn-delete { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 8px; background: var(--color-danger-subtle); color: var(--color-danger-dark); border: 1px solid var(--color-danger-border); font-size: 18px; transition: background 0.2s; text-decoration: none; }
.avv-btn-delete:hover { background: var(--color-danger-light); color: var(--color-danger-dark); }

.filter-wrapper { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 15px; }
.filter-pills-container { display: flex; gap: 10px; flex-wrap: wrap; }
.filter-pill { padding: 8px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s ease-in-out; user-select: none; }


/* ============================================================================
   29. MOVIMENTAZIONI
   ============================================================================ */
/* Toolbar filtri */
.mov-toolbar { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 10px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.mov-toolbar-left  { display: flex; align-items: center; gap: 8px; flex: 1; flex-wrap: wrap; }
.mov-toolbar-right { display: flex; align-items: center; gap: 8px; }

/* Filter pill select */
.filter-pill-select { height: 34px; border: 1px solid var(--border-light); border-radius: 8px; padding: 0 10px; font-size: 12px; color: var(--text-body); background: var(--bg-subtle); outline: none; cursor: pointer; transition: border-color .15s; }
.filter-pill-select:focus { border-color: var(--color-secondary); background: var(--bg-card); box-shadow: 0 0 0 2px var(--color-secondary-border); }

/* Legenda grafico bilancio */
.legenda-lista { margin-top: 10px; }
.legenda-item { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--color-gray-100); padding: 6px 0; font-size: 12px; }
.legenda-item span { display: flex; align-items: center; color: var(--text-body); }
.legenda-item b { font-size: 13px; color: var(--text-dark); }


/* ============================================================================
   30. PROFILO HEADER & ACCOUNT PAGES
   ============================================================================ */
.profile-header { padding: 20px 0; }
.wrapper-page { margin: 7% auto; position: relative; max-width: 520px; }
.wrapper-page .card-box { padding: 30px; border-radius: 9px; border-color: rgba(98,103,115,0.3); }
.account-pages .account-content { padding: 30px; }
.account-pages .account-btn { position: absolute; left: 0; right: 0; }
.expired-title { font-weight: normal; line-height: 36px; margin-bottom: 40px; }


/* ============================================================================
   31. PLUGINS — Timeline, Pricing, Grafici, Mappe, Social, Summernote
   ============================================================================ */
/* Timeline */
.timeline { border-collapse: collapse; border-spacing: 0; display: table; margin-bottom: 50px; position: relative; table-layout: fixed; width: 100%; }
.timeline .time-show { margin-bottom: 30px; margin-right: -75px; margin-top: 30px; position: relative; }
.timeline .time-show a { color: var(--text-white); }
.timeline:before { background-color: rgba(122,125,132,0.3); bottom: 0; content: ""; left: 50%; position: absolute; top: 30px; width: 2px; z-index: 0; }
.timeline .btn { min-width: 150px; }
.timeline .timeline-icon { background: var(--text-muted); border-radius: 50%; color: var(--text-white); display: block; height: 20px; left: -54px; margin-top: -10px; position: absolute; text-align: center; top: 50%; width: 20px; }
.timeline .timeline-icon i { color: var(--text-white); font-size: 13px; margin-top: 4px; position: absolute; left: 4px; }
.timeline .time-icon:before { font-size: 16px; margin-top: 5px; }
h3.timeline-title { color: var(--text-muted); font-size: 20px; font-weight: 400; margin: 0 0 5px; text-transform: uppercase; }
.timeline-item { display: table-row; }
.timeline-item:before { content: ""; display: block; width: 50%; }
.timeline-item .timeline-desk .arrow { border-bottom: 12px solid transparent; border-right: 12px solid var(--bg-subtle) !important; border-top: 12px solid transparent; display: block; height: 0; left: -12px; margin-top: -12px; position: absolute; top: 50%; width: 0; }
.timeline-item .timeline-desk .timeline-box { padding: 20px; }
.timeline-item .timeline-date { margin-bottom: 10px; }
.timeline-item.alt:after { content: ""; display: block; width: 50%; }
.timeline-item.alt .timeline-desk .arrow-alt { border-bottom: 12px solid transparent; border-left: 12px solid var(--bg-subtle) !important; border-top: 12px solid transparent; display: block; height: 0; left: auto; margin-top: -12px; position: absolute; right: -12px; top: 50%; width: 0; }
.timeline-item.alt .timeline-desk .album { float: right; margin-top: 20px; }
.timeline-item.alt .timeline-desk .album a { float: right; margin-left: 5px; }
.timeline-item.alt .timeline-icon { left: auto; right: -56px; }
.timeline-item.alt:before { display: none; }
.timeline-item.alt .panel { margin-left: 0; margin-right: 45px; }
.timeline-item.alt h4,.timeline-item.alt p,.timeline-item.alt .timeline-date { text-align: right; }
.timeline-desk { display: table-cell; vertical-align: top; width: 50%; }
.timeline-desk h4 { font-size: 16px; font-weight: 300; margin: 0; }
.timeline-desk .panel { background: var(--bg-subtle); display: block; margin-bottom: 5px; margin-left: 45px; position: relative; text-align: left; border: 0; }
.timeline-desk h5 span { color: var(--text-muted); display: block; font-size: 12px; margin-bottom: 4px; }
.timeline-desk p { color: #999999; font-size: 14px; margin-bottom: 0; }
.timeline-desk .album { margin-top: 12px; }
.timeline-desk .album a { float: left; margin-right: 5px; }
.timeline-desk .album img { height: 36px; width: auto; border-radius: 3px; }
.timeline-desk .notification { background: var(--bg-card); margin-top: 20px; padding: 8px; }
.timeline-left { margin-left: 20px; width: auto; display: block; }
.timeline-left:before { left: 0 !important; }
.timeline-left .timeline-item { display: block; }
.timeline-left .timeline-desk { display: block; width: 100%; }
.timeline-left .panel { margin-bottom: 20px; }

/* Pricing */
.pricing-column { position: relative; margin-bottom: 40px; }
.pricing-column .inner-box { position: relative; padding: 0 0 50px; background-color: var(--bg-page); }
.pricing-column .plan-header { position: relative; padding: 0 0 25px; }
.pricing-column .plan-title { font-size: 16px; padding: 20px 20px 16px; font-family: var(--font-alt); margin: -2px -2px 25px -2px; color: var(--text-white); text-transform: uppercase; letter-spacing: 1px; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: var(--brand-color); }
.pricing-column .plan-price { font-size: 48px; font-family: var(--font-alt); margin-bottom: 10px; color: var(--text-dark); }
.pricing-column .plan-duration { font-size: 13px; color: var(--text-muted); }
.pricing-column .plan-stats { position: relative; padding: 30px 20px 15px; }
.pricing-column .plan-stats li { margin-bottom: 15px; line-height: 24px; }
.ribbon { position: absolute; left: 5px; top: -5px; z-index: 1; overflow: hidden; width: 75px; height: 75px; text-align: right; font-family: var(--font-alt); }
.ribbon span { font-size: 10px; font-weight: bold; color: var(--text-white); text-transform: uppercase; text-align: center; line-height: 20px; transform: rotate(-45deg); width: 100px; display: block; background: var(--color-success); box-shadow: 0 0 8px 0 rgba(0,0,0,0.06), 0 1px 0 0 rgba(0,0,0,0.02); position: absolute; top: 19px; letter-spacing: 1px; left: -21px; }
.ribbon span:before { content: ""; position: absolute; left: 0; top: 100%; z-index: -1; border-left: 3px solid var(--color-success); border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid var(--color-success); filter: brightness(0.8); }
.ribbon span:after { content: ""; position: absolute; right: 0; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid var(--color-success); border-bottom: 3px solid transparent; border-top: 3px solid var(--color-success); filter: brightness(0.8); }

/* Grafici */
#flotTip { padding: 8px 12px; background-color: var(--text-dark); z-index: 100; color: var(--text-white); opacity: 0.9; font-size: 13px; border-radius: 3px; }
.legend tr { height: 20px; font-family: var(--font-alt); }
.legendLabel { padding-left: 5px !important; line-height: 10px; padding-right: 10px; }
.morris-hover.morris-default-style { border-radius: 5px; padding: 10px 12px; background-color: var(--text-dark); border-color: var(--text-dark); }
.morris-hover.morris-default-style .morris-hover-point, .morris-hover.morris-default-style .morris-hover-row-label { color: var(--text-white) !important; }
.chart-detail-list li { margin: 0 10px; }

/* Mappe */
.gmaps,.gmaps-panaroma { height: 300px; background: var(--bg-page); border-radius: 3px; }
.gmaps-overlay { display: block; text-align: center; color: var(--text-white); font-size: 16px; line-height: 40px; background: var(--brand-color); border-radius: 4px; padding: 10px 20px; }
.gmaps-overlay_arrow { left: 50%; margin-left: -16px; width: 0; height: 0; position: absolute; }
.gmaps-overlay_arrow.above { bottom: -15px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-top: 16px solid var(--brand-color); }
.gmaps-overlay_arrow.below { top: -15px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 16px solid var(--brand-color); }
.jvectormap-zoomin,.jvectormap-zoomout { width: 10px; height: 10px; line-height: 10px; }
.jvectormap-zoomout { top: 40px; }

/* Social */
.social-links li a { border-radius: 50%; color: rgba(122,125,132,0.5); display: inline-block; height: 30px; line-height: 27px; border: 2px solid rgba(122,125,132,0.5); text-align: center; width: 30px; }
.social-links li a:hover { color: var(--text-muted); border: 2px solid var(--text-muted); }
.widget-inline { padding: 20px 0 !important; }
.widget-inline .col-lg-3 { padding: 0; }
.widget-inline .col-lg-3:last-of-type .widget-inline-box { border-right: 0; }
.widget-inline .widget-inline-box { border-right: 1px solid var(--border-light); padding: 20px; }
.widget-inline .widget-inline-box i { font-size: 24px; padding-right: 5px; }
.social-feed-box h3 { font-size: 15px; font-weight: normal; line-height: 24px; }
.social-feed-slider { padding-bottom: 50px; }
.social-feed-slider .carousel-indicators { bottom: 0; }

/* Summernote */
.note-editor { position: relative; }
.note-editor .btn-default { background-color: transparent !important; border-color: transparent !important; }
.note-editor .btn-group-sm > .btn, .note-editor .btn-sm { padding: 8px 12px !important; }
.note-editor .note-toolbar { background-color: var(--bg-page); border-bottom: 1px solid var(--bg-page); margin: 0; }
.note-editor .note-statusbar { background-color: var(--bg-card); }
.note-editor .note-statusbar .note-resizebar { border-top: none; height: 15px; padding-top: 3px; }
.note-editor.note-frame { border: 1px solid var(--border-light) !important; }
.note-popover .btn-default { background-color: transparent !important; border-color: transparent !important; }
.note-popover .btn-group-sm > .btn, .note-popover .btn-sm { padding: 8px 12px !important; }
.note-toolbar { padding: 5px 0 10px 5px; }

/* ColVis */
button.ColVis_Button,.ColVis_Button:hover { float: none; border-radius: 3px; outline: none !important; background: none; box-shadow: none; color: var(--text-white) !important; background-color: var(--color-teal) !important; border: 1px solid var(--color-teal) !important; }
.dt-buttons { float: left; }

/* FullCalendar v5+ */
.fc-col-header-cell-cushion { color: var(--menu-text); }
.fc-daygrid-day-number { color: var(--menu-text); }

/* Icon list demo */
.icon-list-demo div { cursor: pointer; line-height: 45px; white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden; }
.icon-list-demo div p { margin-bottom: 0; line-height: inherit; }
.icon-list-demo i { text-align: center; vertical-align: middle; font-size: 24px; border: 1px solid var(--border-light); width: 50px; height: 50px; line-height: 50px; margin-right: 12px; color: rgba(43,61,81,0.7); border-radius: 3px; display: inline-block; transition: all 0.2s; }
.icon-list-demo .col-md-4 { border-radius: 3px; background-clip: padding-box; margin-bottom: 10px; }
.icon-list-demo .col-md-4:hover i { color: var(--brand-color); }


/* ============================================================================
   32. PRINT
   ============================================================================ */
@media print {
    .topbar,.footer,.sidebar-navigation { display: none; margin: 0; padding: 0; }
    .panel-body { padding: 40px 0 0 0; }
    #page-right-content { border: 0 !important; margin: 0; padding: 0; min-height: 1px; }
}


/* ============================================================================
   33. RESPONSIVE
   ============================================================================ */
@media (max-width: 420px) { .dropdown-menu-lg { width: 240px !important; } }

@media (max-width: 576px) {
    .drawer-modal .modal-dialog { width: 100% !important; max-width: 100% !important; }
}

@media (max-width: 767px) {
    .logo-lg { display: none; }
    .logo-sm { display: inline-block !important; }
    .top-menu-item-xs { display: inline-flex !important; }
    .topbar .topbar-left { width: 70px; }
    .navbar-nav .open .dropdown-menu { background-color: var(--bg-card); box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26); left: auto; position: absolute; right: 0; }
    .footer { text-align: center; }
    .col-sm-1 { display: flex; justify-content: flex-end; }
    .kpi-value { font-size: 28px; }
    .home-table thead { display: none; }
    .home-table-row td { display: block; padding: 6px 16px; border: none; }
    .home-table-row { border-bottom: 1px solid var(--border-light); }
    #tbl-clienti-agente thead th:nth-child(3), #tbl-clienti-agente thead th:nth-child(5),
    #tbl-clienti-agente tbody td:nth-child(3), #tbl-clienti-agente tbody td:nth-child(5) { display: none !important; }
    #tbl-agenti-cliente thead th:nth-child(2), #tbl-agenti-cliente thead th:nth-child(4),
    #tbl-agenti-cliente tbody td:nth-child(2), #tbl-agenti-cliente tbody td:nth-child(4) { display: none !important; }
    .home-table-row td, .home-table thead th { padding: 8px 10px; font-size: 12px; }
    .panel-body { padding: 12px; }
    .table-responsive table { min-width: 400px; }
    .mov-toolbar { flex-direction: column; align-items: stretch; }
    .mov-toolbar-left, .mov-toolbar-right { flex-wrap: wrap; gap: 6px; }
    .kpi-card { padding: 12px 14px; }
    .kpi-value { font-size: 17px; }
    .fc-col-header-cell-cushion { font-size: 0.8rem; white-space: normal !important; display: block !important; text-align: center; }
    .fc-timeline-slot-label-cushion { padding: 2px !important; }
}

@media (max-width: 991px) {
    .sidebar-navigation { margin-left: -2200px; z-index: 3; }
    body.nav-collapse .sidebar-navigation { margin-left: 0; box-shadow: 7px 8px 9px rgba(0,0,0,0.11); top: 0; z-index: 999; position: fixed; bottom: 0; }
    .scrollbar-wrapper { overflow: auto; }
    #page-right-content { margin-left: 0; }
    body.nav-collapse #page-right-content { margin-left: 0; }
    body.nav-collapse .logo-lg { display: inline-block !important; }
    body.nav-collapse .logo-sm { display: none !important; }
    .topbar .topbar-left { text-align: left; padding-left: 10px; }
    body.nav-collapse .topbar .topbar-left { width: 150px !important; }
    body.nav-collapse .logo-lg { max-width: 100%; height: auto; max-height: 35px; vertical-align: middle; }
    body.nav-collapse .logo-sm { display: none !important; }
    .top-navbar-items-right { white-space: nowrap !important; }
    .top-navbar-items-right > li { display: inline-block !important; float: none !important; }
}

@media (max-width: 1024px) {
    #page-wrapper { width: 100% !important; }
    .topbar .topbar-left { padding-left: 15px; }
}
/* ============================================================================
   34. HOME PAGE — Dashboard card, Tessera, Azioni profilo, Corsi
   ============================================================================ */

/* ── Dash card (admin/presidente) ── */
.dash-card { background: var(--bg-card); border-radius: 14px; border: 1px solid var(--border-light); box-shadow: var(--shadow-card); margin-bottom: 24px; overflow: hidden; }
.dash-card-header { padding: 16px 20px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
.dash-card-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin: 0; display: flex; align-items: center; gap: 8px; }
.dash-card-title i { color: var(--color-danger); font-size: 16px; }
.dash-card-body { padding: 0; }
.dash-card-footer { padding: 10px 20px; border-top: 1px solid var(--border-light); text-align: right; }
.dash-card-footer a { font-size: 12px; font-weight: 600; color: var(--color-danger); }
.dash-card-footer a:hover { text-decoration: underline; }

.dash-counter { font-size: 11px; font-weight: 700; background: var(--color-danger); color: var(--text-white); border-radius: 20px; padding: 2px 8px; margin-left: 6px; }

/* ── Dash list rows ── */
.dash-list-row { display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid var(--color-gray-50); gap: 12px; transition: background 0.15s; text-decoration: none !important; }
.dash-list-row:last-child { border-bottom: none; }
.dash-list-row:hover { background: var(--bg-subtle); }
.dash-list-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-light); color: var(--brand-color); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.dash-list-main { flex: 1; min-width: 0; }
.dash-list-name { font-size: 14px; font-weight: 600; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list-sub { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.dash-list-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; white-space: nowrap; flex-shrink: 0; }

.dash-empty { padding: 28px 20px; text-align: center; color: var(--color-gray-300); font-size: 13px; }
.dash-empty i { font-size: 28px; display: block; margin-bottom: 6px; color: var(--color-gray-200); }

/* ── Badge dashboard ── */
.badge-attesa    { background: var(--color-warning-light); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.badge-pagamento { background: var(--color-secondary-light); color: var(--color-secondary); border: 1px solid var(--color-secondary-border); }
.badge-corso     { background: var(--color-success-light); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.badge-assemblea { background: rgba(108,99,255,0.10); color: #4c46b6; border: 1px solid rgba(108,99,255,0.20); }
.badge-sold      { background: var(--color-danger-subtle); color: var(--color-danger-dark); border: 1px solid var(--color-danger-border); }

/* ── Sezione title home ── */
.section-title-home { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin: 20px 0 10px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); }
.section-title-home i { color: var(--brand-color); margin-right: 5px; }

/* ── Tessera ABIFB ── */
.abifb-wrap { position: relative; width: 100%; max-width: 460px; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.15); font-family: Helvetica, Arial, sans-serif; display: block; }
.abifb-wrap img.abifb-bg { display: block; width: 100%; height: auto; }
.abifb-val { position: absolute; left: 50.51%; width: 39%; color: #1e1e1e; font-size: clamp(8px, 1.3vw, 14px); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transform: translateY(-50%); }
.abifb-val.anno { font-size: clamp(14px, 2.2vw, 22px); font-weight: 700; }
.abifb-val-socio   { top: calc(18.85% + 4.75%); }
.abifb-val-cognome { top: calc(34.75% + 4.75%); }
.abifb-val-nome    { top: calc(50.49% + 4.75%); }
.abifb-val-anno    { top: calc(65.25% + 5.74%); }
.abifb-val-tessera { top: calc(82.30% + 4.75%); }

/* Bottone download tessera */
.btn-tessera-download { width: 100%; max-width: 460px; display: block; text-align: center; font-size: 13px; }

/* Alert attesa pagamento */
.alert-attesa-pag { background: var(--color-warning-light); border: 1px solid var(--color-warning-border); border-radius: 10px; padding: 16px 18px; color: var(--color-warning-text); }
.alert-attesa-pag i { font-size: 18px; margin-right: 6px; }
.alert-rounded { border-radius: 10px; }

/* ── Home action card (profilo / rinnovo) ── */
.home-action-card { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow-card); padding: 20px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; transition: box-shadow 0.2s; }
.home-action-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,0.08); }
.home-action-inner { display: flex; align-items: center; gap: 14px; }
.home-action-avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--brand-light); color: var(--brand-color); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.home-action-title { font-size: 15px; font-weight: 700; color: var(--text-dark); }
.home-action-sub { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.home-action-sub--warn { color: var(--color-warning-text); }
.home-action-arrow { font-size: 12px; color: var(--brand-color); font-weight: 600; white-space: nowrap; }

/* ── Corsi grid ── */
.corsi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 5px; }
.corso-card { background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border-light); box-shadow: var(--shadow-card); overflow: hidden; }
.corso-card-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border-light); }
.corso-cat { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-color); margin-bottom: 3px; }
.corso-nome { font-size: 14px; font-weight: 700; color: var(--text-dark); }
.corso-card-body { padding: 10px 16px; font-size: 13px; color: var(--text-muted); }
.corso-contenuti-meta { font-size: 12px; color: var(--text-muted); }
.home-corsi-empty { background: var(--bg-subtle); border-radius: 12px; padding: 25px; text-align: center; color: var(--color-gray-400); }
.home-corsi-empty i { font-size: 36px; display: block; margin-bottom: 8px; }

/* ── Widget nav link (ruolo dipendente / fallback) ── */
.widget-nav-link { color: var(--menu-text) !important; display: block; }
.b-r-0 { border-right: none !important; }
.m-r-5 { margin-right: 5px !important; }
/* Lista pre-iscrizioni */
.btn-circle { width: 40px; height: 40px; border-radius: 50% !important; display: inline-flex; align-items: center; justify-content: center; padding: 0 !important; flex: 0 0 40px; }
.header-container-flex { display: flex; flex-direction: column; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
.icon-lg { font-size: 18px; }
@media (max-width: 767px) { .header-container-flex { flex-direction: column; align-items: flex-start; gap: 10px; } }
/* Barra filtri iscritti */
.filtri-bar { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: 10px; padding: 16px 20px; }
.filtro-item { flex: 1; min-width: 140px; }
.filtro-select { border-radius: 8px !important; font-size: 13px; height: 38px; border-color: var(--border-light) !important; }
.filtro-actions { display: flex; gap: 8px; padding-bottom: 1px; }
.filtri-attivi-info { width: 100%; padding-top: 4px; }
/* det_iscritti */
.row-flex-center-header { display: flex; align-items: center; }
.panel-heading-flex { display: flex; align-items: center; justify-content: space-between; }
.form-actions-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.panel-empty-text { text-align: center; padding: 30px 0; color: var(--text-muted); }
.tab-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-left: 5px; vertical-align: middle; }
.tab-dot--warning  { background: var(--color-warning); }
.tab-dot--indigo   { background: #4f46e5; }

/* Badge soft (storico iscrizioni) */
.badge-soft-success { background: var(--color-success-light); color: var(--color-success-text); border: 1px solid var(--color-success-border); }
.badge-soft-danger  { background: var(--color-danger-subtle); color: var(--color-danger-dark); border: 1px solid var(--color-danger-border); }
.badge-soft-warning { background: var(--color-warning-light); color: var(--color-warning-text); border: 1px solid var(--color-warning-border); }
.custom-badge { padding: 5px 10px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.4px; }
.row-grid-spacer { margin-bottom: 24px; }

/* Banner pagamento / rinnovo */
.banner-pagamento { background: linear-gradient(135deg, #fff8e1, #fff3cd); border: 1px solid #ffe082; border-left: 4px solid var(--color-warning); border-radius: 8px; padding: 18px 22px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.banner-pagamento-text { color: var(--color-warning-text); font-weight: 600; font-size: 14px; }
.banner-pagamento-text i { font-size: 20px; margin-right: 8px; vertical-align: middle; }
.banner-rinnovo { background: linear-gradient(135deg, #f0f4ff, #e8eeff); border: 1px solid #c7d2fe; border-left: 4px solid #4f46e5; border-radius: 8px; padding: 18px 22px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; flex-wrap: wrap; }
.banner-rinnovo-text { color: #3730a3; font-weight: 600; font-size: 14px; }
.banner-rinnovo-text i { font-size: 20px; margin-right: 8px; vertical-align: middle; }
.btn-indigo { background: #4f46e5 !important; color: #fff !important; border-color: #4f46e5 !important; }

/* Alert inline → classi */
.alert-pagamento-warn { background: #fff8e1; border: 1px solid #ffe082; border-left: 4px solid var(--color-warning); border-radius: 8px; padding: 15px 20px; color: var(--color-warning-text); margin-bottom: 25px; }
.alert-rinnovo-info   { background: #f0f4ff; border: 1px solid #c7d2fe; border-left: 4px solid #4f46e5; border-radius: 8px; padding: 15px 20px; color: #3730a3; margin-bottom: 25px; }

/* strong label in dettaglio */
.panel-body strong { color: var(--color-gray-700); font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.3px; display: block; margin-bottom: 4px; }

/* Pre-iscrizione info grid */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px 30px; }
.info-item { display: flex; align-items: flex-start; margin-bottom: 10px; }
.info-item-icon { width: 42px; height: 42px; background: var(--color-gray-100); color: var(--text-body); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; margin-right: 15px; flex-shrink: 0; margin-top: 2px; }
.info-item-content { flex: 1; }
.info-item-content h6 { margin: 0 0 5px; font-weight: 600; color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.section-divider { border-top: 1px solid var(--border-light); padding-top: 20px; }
.card-title { font-weight: 700; color: var(--text-dark); font-size: 18px; margin-top: 0; margin-bottom: 25px; border-bottom: 1px solid var(--border-light); padding-bottom: 15px; }
.m-t-10 { margin-top: 10px !important; }
@media (max-width: 767px) { .info-grid { grid-template-columns: 1fr; } }
/* list_personale */
.modal-footer-center { justify-content: center; }
.text-uppercase { text-transform: uppercase; }
.detail-group { margin-bottom: 20px; }
.detail-label { font-weight: 600; font-size: 12px; color: var(--text-muted); margin-bottom: 4px; text-transform: capitalize; }
.detail-value { font-size: 14px; color: var(--text-dark); font-weight: 500; }
.badge-gray-style { display: inline-block; background: var(--color-gray-100); color: var(--color-gray-700); border: 1px solid var(--color-gray-300); padding: 4px 10px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.badge-active   { background: var(--color-success-light); color: var(--color-success-text); border-color: var(--color-success-border); }
.badge-inactive { background: var(--color-danger-subtle); color: var(--color-danger-dark); border-color: var(--color-danger-border); }

.user-profile-container { display: flex; align-items: center; gap: 12px; }
.user-avatar-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: var(--color-gray-100);
    color: var(--text-body);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    flex-shrink: 0;
}

/* ============================================================================
   -- STORICO ASSEMBLEE E VERBALI --
   ============================================================================ */
.verbale-list { margin-top: 6px; }
.verbale-item { display: inline-flex; align-items: center; gap: 6px; background: #f4f0ff; border: 1px solid #d9cfff; border-radius: 8px; padding: 4px 10px; font-size: 12px; color: #5a3e8a; margin: 2px 2px 2px 0; text-decoration: none; transition: background 0.2s; }
.verbale-item:hover { background: #e8e0ff; color: #3d2a70; }
.verbale-item i { font-size: 14px; }
.verbale-del { color: var(--color-danger); cursor: pointer; margin-left: 4px; font-size: 13px; transition: color 0.2s; }
.verbale-del:hover { color: var(--color-danger-hover); }

.btn-upload-verbale { border-radius: var(--radius-btn) !important; padding: 4px 12px !important; font-size: 12px; border: 1px dashed #c9b8f5; color: #7b5ea7; background: #f9f7ff; transition: all 0.2s; }
.btn-upload-verbale:hover { background: #f0ebff; border-color: #7b5ea7; color: #5a3e8a; }

.btn-pro-filter { border-radius: var(--radius-btn) !important; box-shadow: var(--shadow-btn); display: inline-flex !important; align-items: center; justify-content: center; height: 38px; }

/* Box interattivo Visibilità */
.box-visibilita { background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: 10px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; transition: all 0.2s; }
.box-visibilita.active { background: var(--color-success-light); border-color: var(--color-success-border); }
.box-visibilita.active i { color: var(--color-success-text); }
.box-visibilita-title { font-weight: 600; color: var(--text-dark); font-size: 13px; }
.box-visibilita-sub { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* Badges Stato Assemblea */
.badge-programmata { background: #f0ebff; color: #7b5ea7; border: 1px solid #c9b8f5; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-eseguita { background: var(--color-success-light); color: var(--color-success-text); border: 1px solid var(--color-success-border); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }
.badge-annullata { background: var(--color-danger-subtle); color: var(--color-danger-dark); border: 1px solid var(--color-danger-border); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; }

/* ============================================================================
   -- FORM E BOX INFORMATIVI --
   ============================================================================ */
.form-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin: 25px 0 15px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); }
.form-section-title:first-child { margin-top: 0; }

.info-box-side { background: var(--bg-subtle); border-radius: 14px; padding: 20px; border: 1px solid var(--border-light); }
.info-box-side h5 { font-weight: 700; color: var(--text-dark); margin-top: 0; }
.info-box-side ul { font-size: 13px; color: var(--text-muted); padding-left: 18px; line-height: 2; margin-bottom: 0; }

/* ============================================================================
   -- AREA CORSI E STATI VUOTI --
   ============================================================================ */
/* Stato Vuoto (Nessun dato) riutilizzabile ovunque */
.empty-state { padding: 40px; background: var(--bg-subtle); border-radius: 12px; text-align: center; color: var(--text-muted); border: 1px dashed var(--border-light); }
.empty-state i { font-size: 40px; display: block; margin-bottom: 10px; color: #cbd5e1; }
.empty-state-sub { font-size: 12px; margin-top: 8px; display: block; color: var(--text-muted); }

/* Griglia e Card Corsi per gli Iscritti */
.corsi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; margin-top: 10px; }
.corso-card { background: #ffffff; border-radius: 16px; border: 1px solid var(--border-light); box-shadow: 0 4px 12px rgba(0,0,0,0.04); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; height: 100%; }
.corso-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.10); border-color: var(--brand-border); }

.corso-card-header { padding: 20px 20px 12px; border-bottom: 1px solid var(--border-light); }
.corso-card-categoria { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-color); margin-bottom: 5px; }
.corso-card-nome { font-size: 16px; font-weight: 700; color: var(--text-dark); line-height: 1.3; }

.corso-card-body { padding: 15px 20px; flex-grow: 1; }
.corso-card-desc { font-size: 13px; color: var(--text-muted); line-height: 1.5; }

.corso-card-footer { padding: 14px 20px; border-top: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; }
.corso-card-link { font-size: 12px; color: var(--brand-color); font-weight: 600; display: flex; align-items: center; gap: 4px; }

.contenuti-badge { background: var(--bg-subtle); color: var(--text-muted); border-radius: 20px; padding: 3px 10px; font-size: 12px; font-weight: 600; border: 1px solid var(--border-light); }

/* Stili Tabella Admin Corsi */
.td-corso-nome { font-weight: 700; color: var(--text-dark); text-decoration: none; display: block; }
.td-corso-nome:hover { color: var(--brand-color); }
.td-corso-desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

/* ============================================================================
   -- PLAYER CONTENUTI (YOUTUBE-LIKE) --
   ============================================================================ */
.yt-layout { display: grid; grid-template-columns: 1fr 360px; gap: 28px; align-items: stretch; margin-top: 10px; margin-bottom: 20px; }
@media (max-width: 991px) { .yt-layout { grid-template-columns: 1fr; } }

.yt-player-wrap { background: #000; border-radius: 14px; overflow: hidden; position: relative; width: 100%; padding-bottom: 56.25%; box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
.yt-player-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
.yt-no-video { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #555; background: var(--bg-subtle); border-radius: 14px; }
.yt-no-video-dark { background: #1a1a1a; color: #fff; }
.yt-no-video i.main-icon { font-size: 52px; color: #ccc; margin-bottom: 12px; }
.yt-no-video-dark i.main-icon { color: var(--brand-color); font-size: 64px; }

.yt-info { padding: 18px 0 0; }
.yt-categoria { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--brand-color); margin-bottom: 6px; }
.yt-titolo { font-size: 20px; font-weight: 800; color: var(--text-dark); line-height: 1.3; margin: 0 0 12px; }
.yt-desc { font-size: 14px; color: var(--text-muted); line-height: 1.7; white-space: pre-wrap; }

.yt-nav-bar { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light); margin-bottom: 18px; flex-wrap: wrap; }
.yt-nav-counter { margin-left: auto; font-size: 12px; color: var(--text-muted); font-weight: 600; }

.yt-pdf-box { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; background: var(--brand-light); border: 1px solid var(--brand-border); border-radius: 10px; padding: 12px 18px; font-size: 14px; font-weight: 600; color: var(--brand-color); text-decoration: none; transition: all 0.2s; }
.yt-pdf-box:hover { background: var(--brand-light-hover); color: var(--brand-hover); text-decoration: none; }
.yt-pdf-box i { font-size: 22px; }

/* Sidebar Layout */
.yt-sidebar-outer { display: flex; flex-direction: column; height: 100%; }
.yt-sidebar-inner { background: #fff; border-radius: 14px; border: 1px solid var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.04); padding: 18px; display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.yt-sidebar-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--border-light); flex-shrink: 0; display: flex; align-items: center; }
.yt-sidebar-scroll { overflow-y: auto; flex: 1; padding-right: 4px; }
.yt-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.yt-sidebar-scroll::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 4px; }

/* Sidebar Items */
.yt-sidebar-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: 10px; text-decoration: none !important; transition: background 0.15s; margin-bottom: 4px; }
.yt-sidebar-item:hover { background: var(--bg-subtle); }
.yt-sidebar-item.active { background: var(--brand-light); border-left: 3px solid var(--brand-color); }
.yt-sidebar-num { font-size: 12px; font-weight: 700; color: #ccc; width: 20px; flex-shrink: 0; padding-top: 2px; text-align: center; }
.yt-sidebar-thumb { width: 54px; height: 36px; background: #e8e8e8; border-radius: 6px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; color: #aaa; }
.yt-sidebar-thumb.has-video { background: #1a1a1a; color: #fff; }
.yt-sidebar-thumb.has-pdf   { background: var(--brand-light); color: var(--brand-color); }
.yt-sidebar-info { flex: 1; min-width: 0; }
.yt-sidebar-titolo { font-size: 13px; font-weight: 700; color: var(--text-dark); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.yt-sidebar-item.active .yt-sidebar-titolo { color: var(--brand-color); }
.yt-sidebar-meta { font-size: 11px; color: var(--text-muted); margin-top: 3px; }

/* Micro Components */
.section-title-sm { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-dark); margin: 0 0 8px; }
.badge-sidebar-count { background: var(--brand-color); color: #fff; border-radius: 20px; padding: 1px 7px; font-size: 10px; margin-left: auto; }
.breadcrumb-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.breadcrumb-text { font-size: 13px; color: var(--text-muted); }
.breadcrumb-text a { color: var(--text-muted); text-decoration: none; }
.breadcrumb-text a:hover { color: var(--brand-color); }
.breadcrumb-text .active { color: var(--text-dark); font-weight: 600; }
.breadcrumb-text i { font-size: 14px; vertical-align: middle; margin: 0 2px; }

/* ============================================================================
   -- DETTAGLIO CORSO E LISTA CONTENUTI --
   ============================================================================ */
/* Topbar descrittiva del corso */
.corso-topbar { background: #fff; border-radius: 14px; padding: 20px 25px; border: 1px solid var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.04); margin-bottom: 25px; }
.corso-topbar-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.corso-meta { font-size: 13px; color: var(--text-muted); margin-bottom: 4px; }
.corso-nome { font-size: 22px; font-weight: 800; color: var(--text-dark); margin: 0 0 4px; }
.corso-desc { font-size: 14px; color: #555; line-height: 1.6; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-light); }

/* Box inserimento nuovo contenuto */
.aggiungi-box { background: var(--bg-subtle); border-radius: 14px; border: 1px dashed #dee2e6; padding: 25px; margin-bottom: 25px; }
.aggiungi-box-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin: 0 0 20px; display: flex; align-items: center; }

/* Header lista contenuti */
.contenuti-list-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin: 0 0 15px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); display: flex; align-items: center; }

/* Item singolo contenuto */
.contenuto-list-item { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 12px; border: 1px solid var(--border-light); padding: 14px 18px; margin-bottom: 10px; transition: all 0.2s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.03); text-decoration: none; color: inherit; cursor: pointer; }
.contenuto-list-item:hover { border-color: var(--brand-border); box-shadow: 0 6px 18px rgba(0,0,0,0.07); transform: translateY(-2px); text-decoration: none; color: inherit; }

.contenuto-list-num { font-size: 13px; font-weight: 700; color: #ccc; width: 22px; flex-shrink: 0; text-align: center; }
.contenuto-list-icon { width: 42px; height: 42px; background: var(--bg-subtle); border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 22px; }
.contenuto-list-info { flex: 1; min-width: 0; }
.contenuto-list-titolo { font-size: 15px; font-weight: 700; color: var(--text-dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.contenuto-list-desc { font-size: 12px; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.contenuto-list-meta { display: flex; gap: 12px; margin-top: 5px; font-size: 11px; font-weight: 600; color: #aaa; }
.contenuto-list-meta span { display: flex; align-items: center; gap: 3px; }
.contenuto-list-actions { flex-shrink: 0; margin-left: auto; }

/* ============================================================================
   -- FIX MODALI SU MOBILE (Pulsanti tagliati) --
   ============================================================================ */
@media (max-width: 767px) {
    /* Forza la modale a prendere l'altezza dinamica reale dello schermo (dvh) */
    .modal-dialog, 
    .drawer-modal .modal-dialog {
        margin: 0 !important;
        height: 100% !important; /* Fallback per browser vecchi */
        height: 100dvh !important; /* Altezza dinamica reale */
    }
    
    .modal-content {
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    
    /* Il corpo della modale scrolla e prende tutto lo spazio rimanente */
    .modal-body {
        flex-grow: 1 !important;
        overflow-y: auto !important;
        padding-bottom: 20px !important;
    }
    
    /* Il footer resta incollato in basso, sempre visibile */
    .modal-footer {
        flex-shrink: 0 !important;
        position: sticky !important;
        bottom: 0 !important;
        background: #ffffff !important;
        z-index: 100 !important;
        /* Aggiunge spazio extra per la barra home degli iPhone */
        padding-bottom: calc(15px + env(safe-area-inset-bottom)) !important;
        box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.06) !important;
    }
}

/* ============================================================================
   -- WIDGET E REPORTISTICA --
   ============================================================================ */
.report-header-box { background: #fff; border-radius: 14px; border: 1px solid var(--border-light); box-shadow: 0 2px 10px rgba(0,0,0,0.04); padding: 22px 28px; margin-bottom: 24px; display: flex; align-items: center; gap: 18px; }

/* Icona del report (versione blu o brand) */
.report-icon-box { width: 52px; height: 52px; border-radius: 12px; background: rgba(13, 110, 253, 0.10); color: #0a58ca; display: flex; align-items: center; justify-content: center; font-size: 26px; flex-shrink: 0; }
.report-icon-box.brand { background: var(--brand-light); color: var(--brand-color); }
.report-icon-box.success { background: var(--color-success-light); color: var(--color-success-text); }

/* Testi del report */
.report-totale-val { font-size: 32px; font-weight: 800; color: #0a58ca; line-height: 1; }
.report-totale-val.brand { color: var(--brand-color); }
.report-totale-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 4px; }
.report-totale-sub { font-size: 13px; color: var(--text-muted); margin-top: 4px; }

/* Righe cliccabili tabella */
.clickable-row { cursor: pointer; transition: background-color 0.2s; }
.clickable-row:hover { background-color: rgba(0,0,0,0.02) !important; }

/* ============================================================================
   -- DASHBOARD & KPI CARDS --
   ============================================================================ */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; margin-top: 8px; margin-bottom: 24px; }
.kpi-card { background: #fff; border-radius: 14px; border: 1px solid var(--border-light); box-shadow: 0 2px 10px rgba(0,0,0,0.04); padding: 22px 24px; display: flex; align-items: center; gap: 18px; transition: transform 0.2s ease, box-shadow 0.2s ease; text-decoration: none !important; color: inherit !important; }
.kpi-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(0,0,0,0.08); }

.kpi-icon { width: 52px; height: 52px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px; flex-shrink: 0; }

/* Colori Icone KPI */
.kpi-icon-success { background: var(--color-success-light); color: var(--color-success-text); }
.kpi-icon-warning { background: rgba(255,193,7,0.12); color: #d4a017; }
.kpi-icon-info    { background: rgba(13,110,253,0.10); color: #0a58ca; }
.kpi-icon-purple  { background: rgba(108,99,255,0.10); color: #6c63ff; }
.kpi-icon-brand   { background: var(--brand-light); color: var(--brand-color); }
.kpi-icon-danger  { background: var(--color-danger-subtle); color: var(--color-danger-dark); }
.kpi-icon-orange  { background: rgba(253,126,20,0.10); color: #fd7e14; }
.kpi-icon-navy    { background: rgba(46,83,159,0.10); color: #2e539f; }

.kpi-body { flex: 1; min-width: 0; }
.kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); margin-bottom: 6px; }
.kpi-value { font-size: 30px; font-weight: 800; color: var(--text-dark); line-height: 1; }
.kpi-value.small { font-size: 18px; font-weight: 700; }
.kpi-sub { font-size: 12px; color: var(--text-muted); margin-top: 4px; }

/* Badge interni alle KPI */
.kpi-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; margin-top: 6px; display: inline-block; }
.kpi-badge-warning { background: rgba(255,193,7,0.15); color: #856404; border: 1px solid rgba(255,193,7,0.4); }
.kpi-badge-danger  { background: var(--color-danger-subtle); color: var(--color-danger-dark); border: 1px solid var(--color-danger-border); }
.kpi-badge-success { background: var(--color-success-light); color: var(--color-success-text); border: 1px solid var(--color-success-border); }

/* Titoli di separazione sezioni */
.kpi-section-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--text-muted); margin: 28px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--border-light); }

/* Modifica per le flexbox dell'header report e badge neutro */
.report-header-box { justify-content: space-between; flex-wrap: wrap; }
.badge-metodo { background: var(--bg-subtle); color: var(--text-muted); border: 1px solid var(--border-light); border-radius: 20px; padding: 3px 10px; font-size: 11px; font-weight: 600; text-transform: uppercase; }

/* ============================================================================
   -- TOOLBAR FILTRI E MODALI ELIMINAZIONE --
   ============================================================================ */
/* Toolbar per pagine con tabelle complesse */
.mov-toolbar { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 15px 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.03); margin-bottom: 20px; flex-wrap: wrap; gap: 15px; border: 1px solid var(--border-light); }
.mov-toolbar-left { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.mov-toolbar-right { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; }

/* Input arrotondati per i filtri */
.filter-pill { border: 1px solid var(--border-light); border-radius: 20px; padding: 6px 15px; font-size: 13px; color: var(--text-dark); background: var(--bg-subtle); outline: none; transition: all 0.2s; height: 34px; }
.filter-pill:focus, .filter-pill:hover { border-color: var(--brand-color); background: #fff; }

/* Modale Conferma Eliminazione */
.delete-content-wrapper { text-align: center; padding: 20px 0 10px; }
.delete-icon-circle { width: 80px; height: 80px; background: var(--color-danger-subtle); color: var(--color-danger-dark); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 40px; margin: 0 auto 20px; }
.delete-title-text { font-size: 22px; font-weight: 800; color: var(--text-dark); margin: 0 0 10px; }
.delete-sub-text { font-size: 14px; color: var(--text-muted); line-height: 1.5; margin: 0; }

/* Colori Testo Tabella */
.text-success-custom { color: var(--color-success-text) !important; }
.text-danger-custom { color: var(--color-danger-dark) !important; }

/* ============================================================================
   -- GRAFICI E LEGENDE --
   ============================================================================ */
.legenda-lista { list-style: none; padding: 0; margin: 0; }
.legenda-item { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-dark); padding: 8px 0; border-bottom: 1px dashed var(--border-light); }
.legenda-item:last-child { border-bottom: none; }
.legenda-item span { display: flex; align-items: center; color: var(--text-muted); }

/* ============================================================================
   -- ELENCO AVVISI E NOTIFICHE --
   ============================================================================ */
/* Evidenziazione avvisi non letti */
.row-unread { background-color: var(--brand-light) !important; font-weight: 700; }
.row-read { font-weight: 600; }

/* Elementi interni alla cella dell'avviso */
.avviso-icon { font-size: 22px; margin-right: 12px; }
.avviso-title { font-size: 15px; color: var(--text-dark); display: block; }
.text-truncate-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; max-width: 400px; margin-top: 2px; }

/* ============================================================================
   -- DETTAGLIO AVVISI E MESSAGGI --
   ============================================================================ */
.avviso-message-box { font-size: 15px; line-height: 1.6; color: var(--text-dark); background-color: var(--bg-subtle); padding: 20px; border-left: 3px solid var(--border-light); margin: 20px 0; border-radius: 0 8px 8px 0; }
.avviso-meta-box { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-muted); margin-bottom: 20px; }
.avviso-actions-footer { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--border-light); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 15px; }

/* Avatar circolare piccolo per le liste/meta */
.avatar-circle-sm { width: 36px; height: 36px; background-color: var(--border-light); color: var(--text-muted); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; overflow: hidden; }
.avatar-circle-sm img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================================
   -- COMUNICAZIONI E BACHECA --
   ============================================================================ */
.comm-card { background: #fff; border-radius: 14px; border: 1px solid var(--border-light); box-shadow: 0 2px 8px rgba(0,0,0,0.04); margin-bottom: 18px; overflow: hidden; transition: box-shadow 0.2s ease; }
.comm-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }

.comm-card-header { padding: 18px 22px 14px; border-bottom: 1px solid var(--border-light); display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.comm-titolo { font-size: 16px; font-weight: 700; color: var(--text-dark); margin: 0; }
.comm-meta { font-size: 12px; color: var(--text-muted); margin-top: 5px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.comm-body { padding: 18px 22px; font-size: 14px; color: var(--text-dark); line-height: 1.7; white-space: pre-line; }

.comm-footer { padding: 12px 22px; border-top: 1px solid var(--border-light); background: var(--bg-subtle); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Badge Destinatari (Ruolo) */
.badge-role { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: #f0f4ff; color: #4a63d7; border: 1px solid rgba(74,99,215,0.2); }

/* Bottone Allegato PDF */
.btn-attachment { display: inline-flex; align-items: center; gap: 7px; background: var(--brand-light); border: 1px solid var(--brand-border); color: var(--brand-color); border-radius: 20px; padding: 5px 15px; font-size: 12px; font-weight: 700; text-decoration: none; transition: all 0.2s; }
.btn-attachment:hover { background: var(--brand-light-hover); color: var(--brand-hover); border-color: var(--brand-border); text-decoration: none; }

/* ============================================================================
   -- CHECKBOX SELEZIONE RUOLI --
   ============================================================================ */
.ruolo-check-item { display: inline-flex; align-items: center; gap: 8px; background: var(--bg-subtle); border: 1px solid var(--border-light); border-radius: 8px; padding: 10px 16px; margin: 0 8px 8px 0; cursor: pointer; transition: all 0.15s ease; }
.ruolo-check-item:hover { border-color: var(--brand-color); background: var(--brand-light); }
.ruolo-check-item.checked { border-color: var(--brand-color); background: var(--brand-light); }

.ruolo-check-item input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--brand-color); margin: 0; }
.ruolo-check-item label { font-size: 13px; font-weight: 600; color: var(--text-dark); margin: 0; cursor: pointer; }

/* ============================================================================
   -- ANTEPRIMA MESSAGGI (AJAX) --
   ============================================================================ */
.msg-preview-header { background: var(--bg-subtle); border-left: 4px solid var(--brand-color); border-radius: 8px; padding: 16px; margin-bottom: 20px; }
.msg-oggetto-title { font-size: 16px; font-weight: 700; color: var(--brand-color); margin: 0 0 10px 0; display: flex; align-items: center; }

.msg-preview-body { background: #fff; border: 1px solid var(--border-light); border-radius: 8px; padding: 18px; min-height: 120px; font-size: 14px; line-height: 1.6; color: var(--text-dark); margin-bottom: 20px; }

.msg-attachment-box { background: var(--brand-light); border: 1px solid var(--brand-border); border-radius: 8px; padding: 12px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
.msg-attachment-icon { font-size: 20px; color: var(--brand-color); }

/* ============================================================================
   -- MESSAGGI E CHAT --
   ============================================================================ */
.badge-ricevuto { background-color: var(--color-success-light); color: var(--color-success-text); border: 1px solid var(--color-success-border); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }
.badge-inviato { background-color: rgba(13,110,253,0.10); color: #0a58ca; border: 1px solid rgba(13,110,253,0.2); padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; }

/* Box Informativo Composizione Messaggio */
.info-box-msg { background: var(--bg-subtle); border-left: 4px solid var(--brand-color); border-radius: 8px; padding: 14px 16px; margin-bottom: 20px; display: flex; align-items: center; gap: 14px; }
.info-box-msg .info-icon { width: 42px; height: 42px; background: var(--brand-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; flex-shrink: 0; }

.info-box-msg.risposta { border-left-color: #d4a017; }
.info-box-msg.risposta .info-icon { background: #d4a017; }

.info-box-msg.modifica { border-left-color: var(--text-muted); }
.info-box-msg.modifica .info-icon { background: var(--text-muted); }

/* Z-index fix per Select2 dentro le Modali Drawer */
.select2-container--open .select2-dropdown { z-index: 99999 !important; }