@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

/* =========================================================
FLEET MANAGER - FULL ENTERPRISE DEFINITIVE UI
========================================================= */

/* =========================================================
ROOT
========================================================= */
:root{
--bg-body: #75b3ff;
--bg-body-2: #e8edf5;
--bg-body-3: #dde6f1;

--bg-dark: #0f172a;  
--bg-dark-2: #111827;  
--bg-dark-3: #1e293b;  
--bg-dark-4: #334155;  


--panel: #ffffff;  
--panel-soft: #f8fafc;  
--panel-soft-2: #f1f5f9;  
--panel-soft-3: #e2e8f0;  
--panel-soft-4: #cbd5e1;  


--text: #0f172a;  
--text-soft: #334155;  
--text-muted: #64748b;  
--text-faint: #94a3b8;  


--line: #e2e8f0;  
--line-strong: #cbd5e1;  
--line-dark: rgba(255,255,255,0.08);  


--primary: #2563eb;  
--primary-2: #1d4ed8;  
--primary-3: #3b82f6;  
--primary-4: #60a5fa;  
--primary-soft: #eff6ff;  
--primary-soft-2: #dbeafe;  


--success: #16a34a;  
--success-2: #15803d;  
--success-soft: #dcfce7;  
--success-soft-2: #bbf7d0;  


--warning: #d97706;  
--warning-2: #b45309;  
--warning-soft: #fff7ed;  
--warning-soft-2: #fef3c7;  


--danger: #dc2626;  
--danger-2: #b91c1c;  
--danger-soft: #fef2f2;  
--danger-soft-2: #fee2e2;  


--info: #0891b2;  
--info-2: #0e7490;  
--info-soft: #ecfeff;  
--info-soft-2: #cffafe;  


--purple: #7c3aed;  
--purple-soft: #f3e8ff;  


--shadow-2xs: 0 1px 2px rgba(15, 23, 42, 0.03);  
--shadow-xs: 0 2px 6px rgba(15, 23, 42, 0.04);  
--shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);  
--shadow-md: 0 10px 28px rgba(15, 23, 42, 0.08);  
--shadow-lg: 0 16px 42px rgba(15, 23, 42, 0.12);  
--shadow-xl: 0 26px 70px rgba(15, 23, 42, 0.18);  


--radius-xs: 8px;  
--radius-sm: 12px;  
--radius-md: 16px;  
--radius-lg: 20px;  
--radius-xl: 24px;  
--radius-2xl: 30px;  


--sidebar-width: 292px;  


--transition-fast: 0.16s ease;  
--transition: 0.22s ease;  
--transition-slow: 0.32s ease;  


--ease-god: cubic-bezier(.22,.61,.36,1);  
--glow-primary: 0 0 0 1px rgba(59,130,246,.18), 0 18px 40px rgba(37,99,235,.16);  
--glow-success: 0 0 0 1px rgba(34,197,94,.18), 0 18px 40px rgba(34,197,94,.12);  
--glow-warning: 0 0 0 1px rgba(245,158,11,.18), 0 18px 40px rgba(245,158,11,.14);  
--glow-danger: 0 0 0 1px rgba(239,68,68,.18), 0 18px 40px rgba(239,68,68,.14);

}

body.dark-mode{
--bg-body: #0b1220;
--bg-body-2: #0f172a;
--bg-body-3: #111827;

--panel: #111827;  
--panel-soft: #182233;  
--panel-soft-2: #1e293b;  
--panel-soft-3: #243041;  
--panel-soft-4: #334155;  


--text: #e5edf7;  
--text-soft: #cbd5e1;  
--text-muted: #94a3b8;  
--text-faint: #64748b;  


--line: rgba(148,163,184,0.18);  
--line-strong: rgba(148,163,184,0.28);  


--primary-soft: rgba(37,99,235,0.14);  
--primary-soft-2: rgba(59,130,246,0.18);  


--success-soft: rgba(34,197,94,0.12);  
--success-soft-2: rgba(34,197,94,0.18);  


--warning-soft: rgba(245,158,11,0.12);  
--warning-soft-2: rgba(245,158,11,0.18);  


--danger-soft: rgba(239,68,68,0.12);  
--danger-soft-2: rgba(239,68,68,0.18);  


--info-soft: rgba(6,182,212,0.12);  
--info-soft-2: rgba(6,182,212,0.18);  


--shadow-2xs: 0 1px 2px rgba(0,0,0,0.2);  
--shadow-xs: 0 2px 6px rgba(0,0,0,0.22);  
--shadow-sm: 0 8px 18px rgba(0,0,0,0.24);  
--shadow-md: 0 14px 34px rgba(0,0,0,0.28);  
--shadow-lg: 0 20px 44px rgba(0,0,0,0.32);  
--shadow-xl: 0 34px 80px rgba(0,0,0,0.38);

}


/* =========================================================
   RESET
========================================================= */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

html, body{
    min-height: 100%;
}

body{
    font-family: "Poppins","Segoe UI",Tahoma,Geneva,Verdana,sans-serif;
    background:
        radial-gradient(circle at top right, rgba(59,130,246,0.05), transparent 26%),
        radial-gradient(circle at bottom left, rgba(14,165,233,0.04), transparent 28%),
        linear-gradient(180deg, var(--bg-body) 0%, var(--bg-body-2) 55%, var(--bg-body-3) 100%);
    color: var(--text);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: background .35s var(--ease-god), color .25s var(--ease-god);
}

body.dark-mode{
    background:
        radial-gradient(circle at top right, rgba(37,99,235,0.08), transparent 26%),
        radial-gradient(circle at bottom left, rgba(8,145,178,0.07), transparent 28%),
        linear-gradient(180deg, var(--bg-body) 0%, var(--bg-body-2) 55%, var(--bg-body-3) 100%);
}

a{
    color: inherit;
    text-decoration: none;
}

img{
    display: block;
    max-width: 100%;
}

button,
input,
select,
textarea{
    font: inherit;
}

ul, ol{
    padding-left: 18px;
}

hr{
    border: none;
    border-top: 1px solid var(--line);
    margin: 18px 0;
}

/* =========================================================
   SCROLLBAR
========================================================= */
::-webkit-scrollbar{
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track{
    background: transparent;
}

::-webkit-scrollbar-thumb{
    background: #cbd5e1;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover{
    background: #94a3b8;
}

/* =========================================================
   HELPERS
========================================================= */
.hidden{ display: none !important; }
.center{ text-align: center; }
.right{ text-align: right; }
.bold{ font-weight: 800; }
.w-full{ width: 100%; }

.mt-8{ margin-top: 8px; }
.mt-10{ margin-top: 10px; }
.mt-12{ margin-top: 12px; }
.mt-16{ margin-top: 16px; }
.mt-20{ margin-top: 20px; }
.mb-8{ margin-bottom: 8px; }
.mb-10{ margin-bottom: 10px; }
.mb-12{ margin-bottom: 12px; }
.mb-16{ margin-bottom: 16px; }
.mb-20{ margin-bottom: 20px; }

/* =========================================================
   LOGIN PAGE
========================================================= */
.login-body,
.login-page{
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(37,99,235,0.22), transparent 28%),
        radial-gradient(circle at bottom right, rgba(8,145,178,0.20), transparent 30%),
        linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-dark-2) 52%, var(--bg-dark-3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px;
}

.login-shell{
    width: 100%;
    max-width: 1240px;
    min-height: 720px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    border-radius: 32px;
    overflow: hidden;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: var(--shadow-xl);
    backdrop-filter: blur(15px);
}

.login-left{
    padding: 56px 52px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
    background:
        linear-gradient(160deg, rgba(37,99,235,0.18), rgba(8,145,178,0.08)),
        transparent;
}

.login-brand h1{
    font-size: 44px;
    line-height: 1.04;
    letter-spacing: -0.5px;
    margin: 0;
}

.login-brand p{
    margin-top: 8px;
    color: rgba(255,255,255,0.72);
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
}

.login-copy{
    max-width: 540px;
}

.login-copy h2{
    margin: 0 0 16px;
    font-size: 44px;
    line-height: 1.06;
    letter-spacing: -0.8px;
}

.login-copy p{
    margin: 0;
    color: rgba(255,255,255,0.84);
    font-size: 18px;
    line-height: 1.65;
}

.login-hero-badges{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.login-hero-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.2px;
}

.login-right{
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 42px;
}

.login-card,
.login-box{
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border-radius: 26px;
    padding: 34px 32px;
}

.login-card h2,
.login-box h1{
    margin: 0;
    font-size: 34px;
    line-height: 1.12;
    color: var(--text);
}

.login-card .subtitle,
.login-box .subtitle{
    margin: 10px 0 24px;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.55;
}

.login-card form,
.login-box form{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.login-card label,
.login-box label{
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 800;
}

.login-card input,
.login-box input{
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    padding: 13px 14px;
    outline: none;
    transition: var(--transition);
}

.login-card input:focus,
.login-box input:focus{
    border-color: rgba(37,99,235,0.46);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.11);
}

.login-note{
    margin-top: 18px;
    text-align: center;
}

/* =========================================================
   APP LAYOUT
========================================================= */
.app-shell{
    min-height: 100vh;
    display: flex;
}

.sidebar{
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    background:
        linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-dark-2) 48%, var(--bg-dark-3) 100%);
    color: #ffffff;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 22px 18px;
    box-shadow: 8px 0 34px rgba(15,23,42,0.16);
    z-index: 10;
    backdrop-filter: blur(14px);
}

.sidebar-brand{
    padding: 10px 12px 22px;
    border-bottom: 1px solid var(--line-dark);
    margin-bottom: 16px;
}

.sidebar-brand h2{
    font-size: 30px;
    line-height: 1.04;
    margin: 0;
    letter-spacing: -0.4px;
}

.sidebar-brand p{
    margin-top: 8px;
    color: rgba(255,255,255,0.66);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 700;
}

.sidebar-nav{
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
    padding-right: 4px;
}

.nav-link,
.sidebar-nav a{
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 14px;
    color: rgba(255,255,255,0.82);
    font-size: 14px;
    font-weight: 700;
    transition: var(--transition);
    border: 1px solid transparent;
    position: relative;
}

.nav-link::before,
.sidebar-nav a::before{
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 0;
    border-radius: 999px;
    background: rgba(255,255,255,.9);
    transition: width .22s var(--ease-god);
}

.nav-link:hover::before,
.sidebar-nav a:hover::before{
    width: 3px;
}

.nav-link.active::before,
.sidebar-nav a.active::before{
    width: 4px;
}

.nav-link:hover,
.sidebar-nav a:hover{
    color: #fff;
    background: rgba(255,255,255,0.08);
    transform: translateX(2px);
}

.nav-link.active,
.sidebar-nav a.active{
    color: #fff;
    background: linear-gradient(135deg, rgba(37,99,235,0.96), rgba(8,145,178,0.96));
    box-shadow: 0 10px 24px rgba(37,99,235,0.28);
}

.sidebar-footer{
    padding-top: 18px;
    margin-top: 16px;
    border-top: 1px solid var(--line-dark);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-user{
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    color: #ffffff;
}

.sidebar-logout{
    width: 100%;
}

.main-content{
    flex: 1;
    min-width: 0;
    padding: 28px;
}

/* =========================================================
   TYPOGRAPHY / HEADERS
========================================================= */
.page-header{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 24px;
    animation: godFadeUp .45s var(--ease-god);
}

.page-header h1{
    margin: 0;
    font-size: 38px;
    line-height: 1.02;
    letter-spacing: -1.1px;
    font-weight: 900;
    color: var(--text);
}

.subtitle{
    margin: 10px 0 0;
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.7;
    font-weight: 500;
}

.page-header-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.section-block{
    margin-top: 24px;
    animation: godFadeUp .45s var(--ease-god);
}

.section-header{
    margin-bottom: 16px;
}

.section-header h2{
    margin: 0;
    font-size: 25px;
    line-height: 1.16;
}

.section-subtitle{
    margin-top: 8px;
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
}

.page-kicker{
    display: inline-block;
    margin-bottom: 10px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.theme-toggle{
    width: 46px;
    height: 46px;
    min-width: 46px;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow-xs);
    cursor: pointer;
    transition: var(--transition);
    padding: 0;
}

.theme-toggle:hover{
    transform: translateY(-1px);
    background: var(--panel-soft);
}

/* =========================================================
   BUTTONS
========================================================= */
button,
.btn{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    border-radius: 14px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: var(--transition);
    line-height: 1.15;
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

button::after,
.btn::after{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.16) 50%, transparent 100%);
    transform: translateX(-120%);
    transition: transform .55s var(--ease-god);
}

button:hover::after,
.btn:hover::after{
    transform: translateX(120%);
}

button{
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    box-shadow: 0 10px 24px rgba(37,99,235,0.22);
}

button:hover{
    transform: translateY(-1px);
    filter: brightness(1.02);
}

.btn.back{
    background: #ffffff;
    color: var(--text);
    border: 1px solid var(--line);
    box-shadow: none;
}

.btn.back:hover{
    background: var(--panel-soft);
}

.btn.edit{
    color: #ffffff;
    background: linear-gradient(135deg, var(--primary-3), var(--primary));
}

.btn.delete{
    color: #ffffff;
    background: linear-gradient(135deg, #ef4444, var(--danger));
}

.btn:disabled,
button:disabled{
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* =========================================================
   ALERTS / INFO / BADGES
========================================================= */
.alert-box{
    background: var(--warning-soft);
    color: #9a3412;
    border: 1px solid #fdba74;
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    margin-bottom: 20px;
    box-shadow: var(--shadow-md);
}

.alert-box h3,
.alert-box strong{
    display: block;
    margin-bottom: 8px;
}

.alert-box p,
.alert-box li{
    margin: 6px 0;
    line-height: 1.5;
}

.info-box{
    margin-bottom: 20px;
    background: var(--info-soft);
    color: #155e75;
    border: 1px solid #a5f3fc;
    border-radius: var(--radius-sm);
    padding: 16px 18px;
    box-shadow: var(--shadow-md);
}

.muted-text{
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.45;
}

.user-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 800;
}

.status-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.status-pill.success{
    background: var(--success-soft);
    color: #166534;
}

.status-pill.warning{
    background: var(--warning-soft-2);
    color: #92400e;
}

.status-pill.danger{
    background: var(--danger-soft-2);
    color: #991b1b;
}

.status-pill.info{
    background: var(--primary-soft-2);
    color: #1d4ed8;
}

.inline-tag{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-2);
    border: 1px solid #bfdbfe;
    font-size: 12px;
    font-weight: 800;
}

.smart-badge{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--danger), #ef4444);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    box-shadow: var(--shadow-sm);
    animation: badgeBounce 1.8s ease-in-out infinite;
}

/* =========================================================
   METRICS / CARDS
========================================================= */
.metric-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
    animation: godFadeUp .45s var(--ease-god);
}

.metric-card,
.card,
.branch-quick-card{
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow-md);
    min-height: 132px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god),
        color .22s var(--ease-god),
        opacity .22s var(--ease-god);
}

.metric-card:hover,
.card:hover,
.chart-box:hover,
.form-box:hover,
.table-box:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.metric-card.info:hover{ box-shadow: var(--glow-primary); }
.metric-card.success:hover{ box-shadow: var(--glow-success); }
.metric-card.warning:hover{ box-shadow: var(--glow-warning); }
.metric-card.danger:hover{ box-shadow: var(--glow-danger); }

.metric-card.info,
.card.info{
    border-left: 6px solid var(--info);
}

.metric-card.success,
.card.success{
    border-left: 6px solid var(--success);
}

.metric-card.warning,
.card.warning{
    border-left: 6px solid var(--warning);
}

.metric-card.danger,
.card.danger{
    border-left: 6px solid var(--danger);
}

.metric-label{
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.metric-value,
.card p{
    margin: 0;
    font-size: 34px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -1px;
    color: var(--text);
}

.metric-value.small{
    font-size: 22px;
    line-height: 1.28;
}

.metric-note,
.card-link-text,
.branch-quick-text{
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.metric-link,
.card-link,
.action-tile,
.branch-quick-card{
    transition: var(--transition);
}

.metric-link:hover,
.card-link:hover,
.action-tile:hover,
.branch-quick-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-lg);
}

.metric-card.danger .metric-value{
    animation: godPulse 2.2s ease-in-out infinite;
}

.branch-quick-title{
    font-size: 16px;
    font-weight: 900;
    color: var(--text);
    margin-bottom: 8px;
}

/* =========================================================
   DASHBOARD / ACTION TILES
========================================================= */
.dashboard{
    display: grid;
    gap: 18px;
    margin-bottom: 24px;
    animation: godFadeUp .45s var(--ease-god);
}

.dashboard-2{
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-actions{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.action-tile{
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px 18px;
    box-shadow: var(--shadow-md);
    font-weight: 800;
    color: var(--text);
}

.action-tile:hover{
    background: var(--panel-soft);
}

/* =========================================================
   CHARTS
========================================================= */
.chart-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
    animation: godFadeUp .45s var(--ease-god);
}

.chart-box{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    min-height: 360px;
    box-shadow: var(--shadow-md);
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
}

.chart-box-full {
    grid-column: 1 / -1;
}

.vehicle-status-box{
    overflow: hidden;
}

.vehicle-status-layout{
    display: grid;
    grid-template-columns: 380px minmax(0, 1fr);
    gap: 28px;
    align-items: center;
    margin-top: 8px;
}

.vehicle-status-side{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.vehicle-status-summary{
    background: linear-gradient(135deg, var(--panel-soft), var(--panel));
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow-sm);
}

.vehicle-status-total-label{
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.vehicle-status-total-value{
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    color: var(--text-soft);
}

.status-kpi-grid-pro{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.status-kpi-grid-pro .status-kpi-card{
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}


.status-kpi-grid-pro .status-kpi-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    border-radius: 18px 0 0 18px;
}

.status-kpi-link{
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.status-kpi-link:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.status-kpi-link:active{
    transform: translateY(-1px);
}

.status-kpi-available::before{
    background: var(--success);
}

.status-kpi-assigned::before{
    background: var(--primary);
}

.status-kpi-maintenance::before{
    background: var(--warning);
}

.status-kpi-stop::before{
    background: var(--danger);
}

.status-kpi-dismissed::before{
    background: var(--info);
}

.status-kpi-grid-pro .status-kpi-label{
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.status-kpi-grid-pro .status-kpi-value{
    font-size: 30px;
    font-weight: 900;
    color: var(--text-soft);
    line-height: 1;
}

.vehicle-status-chart-area{
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.vehicle-status-chart-wrap{
    width: 100%;
    max-width: 460px;
    height: 460px;
    margin: 0 auto;
    position: relative;
}

.vehicle-status-chart-wrap canvas{
    cursor: pointer;
}

body.dark-mode .vehicle-status-summary,
body.dark-mode .status-kpi-grid-pro .status-kpi-card{
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

@media (max-width: 1200px){
    .vehicle-status-layout{
        grid-template-columns: 1fr;
    }

    .vehicle-status-chart-wrap{
        max-width: 420px;
        height: 420px;
    }
}

@media (max-width: 680px){
    .status-kpi-grid-pro{
        grid-template-columns: 1fr;
    }

    .vehicle-status-chart-wrap{
        max-width: 320px;
        height: 320px;
    }

    .vehicle-status-total-value{
        font-size: 34px;
    }
}

.chart-box-full .chart-canvas-wrap {
    min-height: 360px;
}

.chart-canvas-wrap-large{
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.status-kpi-grid{
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.status-kpi-card{
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 16px;
    box-shadow: var(--shadow-sm);
}

.status-kpi-label{
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.status-kpi-value{
    font-size: 28px;
    font-weight: 900;
    color: var(--text-soft);
    line-height: 1;
}

body.dark-mode .status-kpi-card{
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}

@media (max-width: 1200px){
    .status-kpi-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px){
    .status-kpi-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px){
    .status-kpi-grid{
        grid-template-columns: 1fr;
    }
}

.chart-box h3{
    margin: 0 0 18px;
    font-size: 22px;
    line-height: 1.2;
}

.chart-wrap{
    position: relative;
    height: 260px;
}

.chart-toolbar{
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 8px;
}

.chart-legend-note{
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* =========================================================
   FORMS
========================================================= */
.form-box{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 24px;
    box-shadow: var(--shadow-md);
    margin-bottom: 22px;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
    animation: godFadeUp .45s var(--ease-god);
}

.form-box h2{
    margin: 0 0 18px;
    font-size: 24px;
    line-height: 1.18;
}

.form-box h3{
    margin: 24px 0 14px;
    font-size: 18px;
    line-height: 1.2;
    color: var(--text);
}

.form-box form{
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.grid-2{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.form-box label{
    display: block;
    margin-bottom: 8px;
    color: var(--text-soft);
    font-size: 14px;
    font-weight: 800;
}

input,
select,
textarea{
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    color: var(--text);
    padding: 13px 14px;
    outline: none;
    transition: var(--transition);
}

input:focus,
select:focus,
textarea:focus{
    border-color: rgba(37,99,235,0.46);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.11);
    transform: translateY(-1px);
}

input[readonly]{
    background: var(--panel-soft);
    color: var(--text-muted);
}

input[type="file"]{
    padding: 11px 12px;
    background: #ffffff;
}

textarea{
    min-height: 110px;
    resize: vertical;
}

.form-actions-row{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
}

/* =========================================================
   SEARCH / FILTERS
========================================================= */
.search-toolbar-group{
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 20px;
}

.search-toolbar{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 16px;
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
}

.search-toolbar:hover{
    transform: translateY(-1px);
}

.search-toggle{
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    padding: 0;
    font-size: 18px;
}

.search-label{
    font-weight: 800;
    color: var(--text);
}

.search-panel{
    display: none;
}

.search-panel.open{
    display: block;
    animation: godExpand .34s var(--ease-god);
}

.live-filter-bar{
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
    gap: 12px;
    margin-bottom: 18px;
    animation: godFadeUp .45s var(--ease-god);
}

.live-filter-bar .filter-chip{
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xs);
    transition: var(--transition);
}

.live-filter-bar .filter-chip:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.live-filter-bar .filter-chip span{
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.live-result-count{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 16px;
    border-radius: 14px;
    background: var(--primary-soft);
    color: var(--primary-2);
    border: 1px solid rgba(59,130,246,0.20);
    font-weight: 900;
    box-shadow: var(--shadow-xs);
}

/* =========================================================
   TABLES
========================================================= */
.table-box{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 22px;
    box-shadow: var(--shadow-md);
    margin-bottom: 22px;
    overflow: hidden;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
    animation: godFadeUp .45s var(--ease-god);
}

.table-box h2{
    margin: 0 0 18px;
    font-size: 24px;
    line-height: 1.18;
}

.table-box p{
    color: var(--text-muted);
    line-height: 1.55;
}

.table-scroll{
    overflow-x: auto;
}

.table-scroll table{
    min-width: 780px;
}

table{
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

thead th{
    text-align: left;
    padding: 14px 12px;
    background: var(--panel-soft);
    color: var(--text-soft);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    position: sticky;
    top: 0;
    z-index: 1;
}

tbody td{
    padding: 14px 12px;
    border-bottom: 1px solid #eef2f7;
    vertical-align: top;
}

tbody tr{
    transition: background .18s var(--ease-god), transform .18s var(--ease-god);
}

tbody tr:hover{
    background: rgba(148,163,184,0.08);
    transform: scale(1.002);
}

.actions{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.actions form{
    margin: 0;
}

.row-danger{
    background: rgba(239,68,68,0.05);
}

.row-warning{
    background: rgba(245,158,11,0.07);
}

.row-success{
    background: rgba(34,197,94,0.04);
}

/* =========================================================
   VEHICLE EXPAND DETAIL
========================================================= */
.vehicle-summary-row{
    cursor: pointer;
    transition:
        background var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
    position: relative;
}

.vehicle-summary-row:hover{
    background: rgba(59,130,246,0.08);
    transform: translateY(-1px);
}

.vehicle-summary-row.is-open{
    background: rgba(37,99,235,0.10);
    box-shadow: inset 3px 0 0 var(--primary);
}

.vehicle-arrow{
    min-width: 28px;
    justify-content: center;
    transition: transform .28s var(--ease-god), background .22s var(--ease-god), color .22s var(--ease-god);
}

.vehicle-summary-row.is-open .vehicle-arrow{
    transform: rotate(90deg);
    background: var(--primary-soft);
    color: var(--primary-2);
}

.vehicle-details-row{
    display: table-row;
}

.vehicle-details-row td{
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.vehicle-details-row .details-panel{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition:
        max-height 0.35s ease,
        opacity 0.25s ease,
        transform 0.25s ease,
        padding 0.25s ease,
        margin 0.25s ease;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.vehicle-details-row.open .details-panel{
    max-height: 2200px;
    opacity: 1;
    transform: translateY(0);
    padding: 18px;
    margin-top: 10px;
    margin-bottom: 14px;
    animation: godExpand .34s var(--ease-god);
}

.details-panel{
    background: linear-gradient(180deg, var(--panel-soft) 0%, var(--panel) 100%);
    border: 1px solid var(--line);
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god);
}

.details-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}

.details-item{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 12px 14px;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
}

.details-item:hover{
    transform: translateY(-1px);
    box-shadow: var(--shadow-xs);
}

.details-item-wide{
    grid-column: 1 / -1;
}

.details-item-label{
    font-size: 12px;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}

.details-item-value{
    font-size: 14px;
    font-weight: 800;
    color: var(--text);
    line-height: 1.4;
    word-break: break-word;
}

.details-section{
    margin-top: 18px;
}

.details-section h3{
    margin: 0 0 12px;
    font-size: 17px;
    line-height: 1.2;
    color: var(--text);
}

.doc-links{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.doc-link{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 12px;
    border: 1px solid var(--line-strong);
    background: var(--panel);
    color: var(--primary-2);
    font-weight: 800;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
}

.doc-link:hover{
    background: var(--primary-soft);
    transform: translateY(-1px);
}

.photo-grid{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.photo-card{
    width: 160px;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
}

.photo-card:hover{
    transform: translateY(-2px);
}

.photo-card span{
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: var(--text-soft);
    font-weight: 800;
    text-align: center;
}

.detail-actions{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.row-hint{
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 800;
    margin-left: 8px;
}

/* =========================================================
   PREVIEW / FILES
========================================================= */
.thumb{
    width: 150px;
    height: 110px;
    object-fit: cover;
    border-radius: 14px;
    border: 1px solid var(--line);
    background: #ffffff;
    box-shadow: 0 8px 18px rgba(15,23,42,0.08);
    transition: transform .26s var(--ease-god), box-shadow .26s var(--ease-god);
}

.photo-card:hover .thumb{
    transform: scale(1.035);
    box-shadow: var(--shadow-md);
}

.preview-box{
    margin-top: 12px;
}

.file-link{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 800;
}

.file-link:hover{
    text-decoration: underline;
}

/* =========================================================
   INFO GRID / EMPTY STATES
========================================================= */
.info-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.info-item{
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 14px 16px;
    transition:
        background .28s var(--ease-god),
        border-color .28s var(--ease-god),
        box-shadow .28s var(--ease-god),
        transform .22s var(--ease-god);
}

.info-item-label{
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.info-item-value{
    color: var(--text);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.45;
}

.empty-state{
    text-align: center;
    padding: 38px 20px;
    color: var(--text-muted);
}

.empty-state h3{
    margin: 0 0 8px;
    color: var(--text);
    font-size: 22px;
}

.empty-state p{
    line-height: 1.6;
}

.empty-state-pro{
    border: 1px dashed var(--line-strong);
    border-radius: 20px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-soft) 100%);
    padding: 38px 22px;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.empty-state-pro h3{
    margin-bottom: 8px;
    font-size: 22px;
    color: var(--text);
}

.empty-state-pro p{
    color: var(--text-muted);
    line-height: 1.6;
}

.table-summary-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.table-summary-pill{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    color: var(--text-soft);
    font-size: 13px;
    font-weight: 800;
}

/* =========================================================
   FILIALI / QUICK CARDS
========================================================= */
.filiale-row-clickable{
    cursor: pointer;
    transition: background 0.2s ease;
}

.filiale-row-clickable:hover{
    background: #f8fafc;
}

.filiale-main-link{
    display: inline-block;
    font-weight: 800;
    color: var(--text);
}

.filiale-main-link:hover{
    color: var(--primary-2);
}

.branch-quick-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* =========================================================
   RIFORNIMENTI BADGES
========================================================= */
.rifornimenti-title-row{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

.rifornimenti-badge{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary-2);
    border: 1px solid #bfdbfe;
    font-weight: 800;
    font-size: 13px;
}

.rifornimenti-badge.adblue{
    background: var(--info-soft);
    color: var(--info-2);
    border-color: #a5f3fc;
}

.rifornimenti-badge.periodo{
    background: var(--warning-soft);
    color: #9a3412;
    border-color: #fdba74;
}

/* =========================================================
   TOAST
========================================================= */
.toast-stack{
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.toast{
    min-width: 280px;
    max-width: 420px;
    border-radius: 16px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(-8px) translateX(10px);
    animation: toastIn .28s var(--ease-god) forwards;
}

.toast.success{ border-left: 5px solid var(--success); }
.toast.info{ border-left: 5px solid var(--primary); }
.toast.warning{ border-left: 5px solid var(--warning); }
.toast.danger{ border-left: 5px solid var(--danger); }

.toast-title{
    font-weight: 900;
    font-size: 13px;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.toast-text{
    font-size: 14px;
    line-height: 1.45;
    color: var(--text-soft);
}

.toast.hide{
    animation: toastOut .24s var(--ease-god) forwards;
}

/* =========================================================
   LOADER
========================================================= */
.app-loader{
    position: fixed;
    inset: 0;
    background: rgba(15,23,42,.28);
    backdrop-filter: blur(6px);
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
}

.app-loader.show{
    display: flex;
}

.loader-card{
    min-width: 220px;
    padding: 22px 24px;
    border-radius: 20px;
    background: var(--panel);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-xl);
    text-align: center;
}

.loader-ring{
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 4px solid rgba(148,163,184,.22);
    border-top-color: var(--primary);
    margin: 0 auto 14px;
    animation: spinGod .8s linear infinite;
}

.loader-text{
    font-size: 14px;
    font-weight: 800;
    color: var(--text-soft);
}

/* =========================================================
   ANIMATIONS
========================================================= */
@keyframes godFadeUp{
    from{
        opacity: 0;
        transform: translateY(10px);
    }
    to{
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes godExpand{
    from{
        opacity: 0;
        transform: translateY(-6px) scale(.995);
    }
    to{
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes godPulse{
    0%,100%{ transform: scale(1); }
    50%{ transform: scale(1.03); }
}

@keyframes toastIn{
    to{
        opacity: 1;
        transform: translateY(0) translateX(0);
    }
}

@keyframes toastOut{
    to{
        opacity: 0;
        transform: translateY(-6px) translateX(16px);
    }
}

@keyframes badgeBounce{
    0%,100%{ transform: translateY(0); }
    50%{ transform: translateY(-2px); }
}

@keyframes spinGod{
    to{ transform: rotate(360deg); }
}

/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 1450px){
    .metric-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-actions,
    .branch-quick-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .info-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px){
    .login-shell{
        grid-template-columns: 1fr;
    }

    .login-left{
        min-height: 290px;
    }

    .dashboard-2,
    .chart-grid{
        grid-template-columns: 1fr;
    }

    .metric-grid,
    .dashboard-actions,
    .branch-quick-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .info-grid{
        grid-template-columns: 1fr;
    }
}

@media (max-width: 980px){
    .app-shell{
        flex-direction: column;
    }

    .sidebar{
        width: 100%;
        min-width: 100%;
        height: auto;
        position: relative;
        top: auto;
        border-radius: 0 0 20px 20px;
    }

    .main-content{
        padding: 20px;
    }

    .page-header{
        flex-direction: column;
    }

    .grid-2,
    .metric-grid,
    .dashboard-actions,
    .details-grid,
    .branch-quick-grid{
        grid-template-columns: 1fr;
    }

    .table-box{
        overflow-x: auto;
    }

    .table-box table{
        min-width: 960px;
    }

    .photo-card{
        width: 100%;
        max-width: 220px;
    }

    .live-filter-bar{
        grid-template-columns: 1fr;
    }

    .toast-stack{
        right: 12px;
        left: 12px;
        top: 12px;
    }

    .toast{
        max-width: 100%;
        min-width: 0;
    }
}

@media (max-width: 680px){
    .login-body,
    .login-page{
        padding: 14px;
    }

    .login-left,
    .login-right{
        padding: 24px;
    }

    .login-copy h2{
        font-size: 30px;
    }

    .sidebar{
        padding: 16px;
    }

    .main-content{
        padding: 16px;
    }

    .page-header h1{
        font-size: 28px;
    }

    .form-box,
    .table-box,
    .metric-card,
    .card,
    .chart-box,
    .branch-quick-card{
        padding: 18px;
        border-radius: 18px;
    }

    .search-toolbar{
        width: 100%;
        justify-content: flex-start;
    }

    .page-header-actions,
    .form-actions-row{
        width: 100%;
    }

    .page-header-actions .btn,
    .form-actions-row .btn,
    .theme-toggle{
        width: 100%;
    }

    .thumb{
        width: 100%;
        max-width: 220px;
        height: auto;
        aspect-ratio: 4 / 3;
    }
}

.panel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:12px;
}

#newFormPanel{
    display:none;
    margin-top:12px;
}

#newFormPanel.open{
    display:block;
}

.tree-level{
    margin-bottom:12px;
    border:1px solid #dbe4f0;
    border-radius:14px;
    background:#ffffff;
    padding:10px 14px;
}

.tree-level summary{
    cursor:pointer;
    font-weight:700;
    color:#0A2342;
    padding:6px 0;
    list-style:none;
}

.tree-level summary::-webkit-details-marker{
    display:none;
}

.tree-level summary::before{
    content:"▸";
    display:inline-block;
    margin-right:8px;
    color:#1E3A5F;
    transition:transform 0.2s ease;
}

.tree-level[open] > summary::before{
    transform:rotate(90deg);
}

.month-level{
    margin-top:10px;
    margin-left:16px;
}

.day-level{
    margin-top:10px;
    margin-left:16px;
}

.storico-tree .table-scroll{
    margin-top:12px;
}

.storico-tree table{
    width:100%;
    border-collapse:collapse;
}

.storico-tree th,
.storico-tree td{
    padding:10px 12px;
    text-align:left;
    vertical-align:top;
}

.storico-tree th{
    background:#f4f7fb;
    color:#0A2342;
    font-weight:700;
    border-bottom:1px solid #dbe4f0;
}

.storico-tree td{
    border-bottom:1px solid #eef2f7;
}

.storico-tree tr:hover td{
    background:#f8fbff;
}

.vehicle-status-summary{
    position: relative;
    overflow: hidden;
}

.vehicle-status-summary::after{
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        rgba(59,130,246,.14),
        rgba(34,197,94,.12)
    );
}

.status-detail-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 22px;
}

.status-detail-column{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.status-detail-card{
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 20px;
    box-shadow: var(--shadow-md);
}

.status-detail-success{
    border-top: 4px solid var(--success);
}

.status-detail-primary{
    border-top: 4px solid var(--primary);
}

.status-detail-warning{
    border-top: 4px solid var(--warning);
}

.status-detail-danger{
    border-top: 4px solid var(--danger);
}

.status-detail-neutral{
    border-top: 4px solid #9ca3af;
}

.status-detail-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.status-detail-header h2{
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-soft);
}

.status-vehicle-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.status-vehicle-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 16px;
    background: var(--panel-soft);
    text-decoration: none;
    color: inherit;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.status-vehicle-item:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.status-vehicle-main{
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.status-vehicle-main strong{
    font-size: 15px;
    color: var(--text-soft);
}

.status-vehicle-main span{
    font-size: 13px;
    color: var(--text-muted);
}

.status-vehicle-meta{
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: right;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 700;
}

.metric-card.primary{
    background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(59,130,246,.06));
}

.metric-card.neutral{
    background: linear-gradient(135deg, rgba(156,163,175,.18), rgba(156,163,175,.08));
}

@media (max-width: 1200px){
    .status-detail-grid{
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px){
    .status-detail-grid{
        grid-template-columns: 1fr;
    }
}

.status-detail-toggle{
    width: 100%;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0 0 16px 0;
    cursor: pointer;
    text-align: left;
}

.status-detail-header-right{
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-detail-chevron{
    font-size: 18px;
    font-weight: 900;
    color: var(--text-muted);
    transition: transform .18s ease;
}

.status-detail-toggle.active .status-detail-chevron{
    transform: rotate(-180deg);
}

.status-detail-body{
    display: none;
}

.status-detail-body.open{
    display: block;
}

.sheet-detail-grid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.sheet-detail-grid > div{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-soft);
}

.sheet-detail-grid strong{
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
}

.sheet-detail-grid span{
    font-size: 14px;
    font-weight: 700;
    color: var(--text-soft);
}

.sheet-link-list,
.sheet-mini-list{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sheet-link-item{
    display: block;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-soft);
    text-decoration: none;
    color: var(--text-soft);
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease;
}

.sheet-link-item:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

.sheet-link-item.disabled{
    opacity: .6;
    pointer-events: none;
}

.sheet-mini-item{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel-soft);
}

.sheet-mini-item strong{
    font-size: 13px;
    color: var(--text-soft);
}

.sheet-mini-item span{
    font-size: 13px;
    color: var(--text-muted);
}

@media (max-width: 760px){
    .sheet-detail-grid{
        grid-template-columns: 1fr;
    }
}

.vehicle-photo-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.vehicle-photo-card{
    background: var(--panel-soft);
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.vehicle-photo-label{
    padding: 10px 12px;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--text-muted);
    border-bottom: 1px solid var(--line);
    background: var(--panel);
}

.vehicle-photo-card a{
    display: block;
}

.vehicle-photo-card img{
    width: 100%;
    height: 190px;
    object-fit: cover;
    display: block;
    transition: transform .2s ease;
}

.vehicle-photo-card img:hover{
    transform: scale(1.02);
}

@media (max-width: 760px){
    .vehicle-photo-grid{
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   BRANDING DINAMICO
========================================================= */

.sidebar-logo-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:12px;
}

.sidebar-logo{
    max-width:72px;
    max-height:72px;
    width:auto;
    height:auto;
    object-fit:contain;
    display:block;
    border-radius:14px;
    background:#fff;
    padding:6px;
    box-shadow:0 8px 20px rgba(15, 23, 42, 0.14);
}

.sidebar-brand h2{
    margin:0;
    font-size:1.2rem;
    font-weight:800;
    text-align:center;
}

.sidebar-brand p{
    margin:6px 0 0 0;
    font-size:.88rem;
    opacity:.9;
    text-align:center;
}

/* =========================================================
   DASHBOARD ADMIN - EXECUTIVE OVERVIEW
========================================================= */

.admin-overview-grid{
    display:grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.9fr);
    gap:22px;
    align-items:stretch;
}

.admin-chart-box,
.admin-scadenze-box{
    min-height:100%;
}

.admin-expiry-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:14px;
    margin-top:8px;
}

.admin-expiry-card{
    border-radius:18px;
    padding:16px 16px 14px;
    border:1px solid var(--line);
    background:var(--panel-soft);
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.admin-expiry-card:hover{
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.admin-expiry-card.danger{
    background: linear-gradient(135deg, rgba(239,68,68,.14), rgba(239,68,68,.06));
    border-color: rgba(239,68,68,.22);
}

.admin-expiry-card.warning{
    background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(245,158,11,.07));
    border-color: rgba(245,158,11,.24);
}

.admin-expiry-label{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-muted);
    margin-bottom:10px;
}

.admin-expiry-value{
    font-size:30px;
    font-weight:900;
    line-height:1;
    color:var(--text-soft);
}

.admin-branch-grid{
    display:grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:20px;
}

.admin-branch-card{
    display:flex;
    flex-direction:column;
    gap:18px;
    text-decoration:none;
    color:inherit;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:24px;
    padding:20px;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
    position:relative;
    overflow:hidden;
}

.admin-branch-card::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:5px;
    background:linear-gradient(90deg, var(--primary), var(--info));
    opacity:.95;
}

.admin-branch-card:hover{
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: rgba(59,130,246,.22);
}

.admin-branch-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    padding-top:4px;
}

.admin-branch-name{
    font-size:20px;
    font-weight:900;
    color:var(--text-soft);
    line-height:1.1;
}

.admin-branch-coordinator{
    margin-top:6px;
    font-size:13px;
    color:var(--text-muted);
    font-weight:700;
}

.admin-branch-open{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--primary);
    white-space:nowrap;
}

.admin-branch-metrics{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
}

.admin-branch-metric{
    background:var(--panel-soft);
    border:1px solid var(--line);
    border-radius:16px;
    padding:12px 12px 10px;
    min-height:74px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
}

.admin-branch-metric span{
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-muted);
}

.admin-branch-metric strong{
    margin-top:8px;
    font-size:22px;
    line-height:1;
    color:var(--text-soft);
    font-weight:900;
}

.admin-branch-footer{
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:10px;
    padding-top:4px;
    border-top:1px dashed var(--line);
}

.admin-branch-fuel-label{
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--text-muted);
}

.admin-branch-fuel-value{
    font-size:22px;
    font-weight:900;
    color:var(--text-soft);
}

.metric-card.primary{
    background: linear-gradient(135deg, rgba(59,130,246,.12), rgba(59,130,246,.06));
    border:1px solid rgba(59,130,246,.18);
}

.metric-card.neutral{
    background: linear-gradient(135deg, rgba(156,163,175,.18), rgba(156,163,175,.08));
    border:1px solid rgba(156,163,175,.20);
}

@media (max-width: 1350px){
    .admin-branch-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px){
    .admin-overview-grid{
        grid-template-columns: 1fr;
    }

    .admin-expiry-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 820px){
    .admin-branch-grid{
        grid-template-columns: 1fr;
    }

    .admin-expiry-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px){
    .admin-expiry-grid{
        grid-template-columns: 1fr;
    }

    .admin-branch-metrics{
        grid-template-columns: 1fr;
    }

    .admin-branch-top,
    .admin-branch-footer{
        flex-direction:column;
        align-items:flex-start;
    }

    .admin-branch-fuel-value{
        font-size:20px;
    }
}

/* KPI COLORI ADMIN */

/* KPI COLORI ADMIN */

.metric-card.primary {
    background: #ffffff;
    border: 1px solid var(--line);
    border-left: 4px solid var(--primary);
}

.metric-card.neutral {
    background: #ffffff;
    border: 1px solid var(--line);
    border-left: 4px solid #9ca3af;
}

.metric-grid .metric-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.admin-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 22px;
}

.admin-kpi-grid .metric-card {
    min-height: 118px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
@media (max-width: 1100px) {
    .admin-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .admin-kpi-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   STATO FILIALI - VERSIONE PRO (NO SEMAFORI)
========================================================= */

.admin-branch-card-ok{
    border:1px solid rgba(34,197,94,.25);
    background: linear-gradient(180deg, #ffffff 0%, #f0fdf4 100%);
}

.admin-branch-card-attenzione{
    border:1px solid rgba(245,158,11,.35);
    background: linear-gradient(180deg, #ffffff 0%, #fffbeb 100%);
}

.admin-branch-card-critica{
    border:1px solid rgba(239,68,68,.35);
    background: linear-gradient(180deg, #ffffff 0%, #fef2f2 100%);
}

/* Badge stato */
.admin-branch-status-badge{
    font-size:11px;
    font-weight:700;
    padding:4px 10px;
    border-radius:999px;
    letter-spacing:.4px;
}

/* Verde */
.admin-branch-status-ok{
    background: rgba(34,197,94,.12);
    color:#15803d;
}

/* Giallo */
.admin-branch-status-attenzione{
    background: rgba(245,158,11,.15);
    color:#b45309;
}

/* Rosso */
.admin-branch-status-critica{
    background: rgba(239,68,68,.15);
    color:#b91c1c;
}
.admin-branch-card-ok:hover{
    box-shadow: 0 20px 45px rgba(34,197,94,.12);
}

.admin-branch-card-attenzione:hover{
    box-shadow: 0 20px 45px rgba(245,158,11,.15);
}

.admin-branch-card-critica:hover{
    box-shadow: 0 20px 45px rgba(239,68,68,.18);
}

.admin-branch-card{
    position: relative;
    overflow: hidden;
}

.admin-branch-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
}

/* Colori top */
.admin-branch-card-ok::before{
    background:#22c55e;
}

.admin-branch-card-attenzione::before{
    background:#f59e0b;
}

.admin-branch-card-critica::before{
    background:#ef4444;
}

.admin-branch-metric.alert-danger{
    background: linear-gradient(135deg, rgba(239,68,68,.10), rgba(239,68,68,.04));
    border:1px solid rgba(239,68,68,.18);
}

.admin-branch-metric.alert-warning{
    background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(245,158,11,.05));
    border:1px solid rgba(245,158,11,.18);
}

.admin-branch-summary{
    margin-top:8px;
    font-size:13px;
    line-height:1.45;
    color:var(--text-muted);
    font-weight:600;
    min-height:38px;
}

/* =========================================================
   ADMIN FILIALI - HEADER CARD PREMIUM
========================================================= */

.admin-branch-top{
    display:grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, .9fr);
    gap:18px;
    align-items:start;
}

.admin-branch-top-left{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.admin-branch-top-right{
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    gap:10px;
}

.admin-branch-name{
    font-size:19px;
    font-weight:900;
    line-height:1.1;
    color:var(--text-soft);
    margin:0;
}

.admin-branch-meta-row{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:10px;
}

.admin-branch-status-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:28px;
    padding:4px 10px;
    border-radius:999px;
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.admin-branch-coordinator-inline{
    font-size:13px;
    font-weight:700;
    color:var(--text-muted);
}

.admin-branch-summary-box{
    width:100%;
    background:rgba(15,23,42,.035);
    border:1px solid rgba(15,23,42,.07);
    border-radius:14px;
    padding:10px 12px;
    font-size:13px;
    line-height:1.45;
    color:var(--text-muted);
    font-weight:700;
    text-align:left;
    min-height:58px;
    display:flex;
    align-items:center;
}

.admin-branch-open{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:38px;
    padding:0 14px;
    border-radius:12px;
    background:rgba(37,99,235,.08);
    border:1px solid rgba(37,99,235,.12);
    color:var(--primary);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
    white-space:nowrap;
}

@media (max-width: 900px){
    .admin-branch-top{
        grid-template-columns: 1fr;
    }

    .admin-branch-top-right{
        align-items:flex-start;
    }

    .admin-branch-summary-box{
        min-height:auto;
    }
}

.export-flotta-box{
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:20px;
    box-shadow:var(--shadow-sm);
    margin-bottom:20px;
}

.export-flotta-box h3{
    margin:0 0 14px 0;
    font-size:18px;
    font-weight:800;
}

.export-flotta-form{
    display:grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap:14px;
    align-items:end;
}

.export-flotta-form label{
    display:block;
    margin-bottom:6px;
    font-size:13px;
    font-weight:700;
    color:var(--text-muted);
}

.export-flotta-form input,
.export-flotta-form select{
    width:100%;
    min-height:42px;
    border:1px solid var(--line);
    border-radius:12px;
    padding:0 12px;
    background:#fff;
}

.export-flotta-actions{
    display:flex;
    align-items:end;
    height:100%;
}

.brand-box{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 12px 18px 12px;
}

.brand-logo{
    width:48px;
    height:48px;
    object-fit:contain;
    border-radius:12px;
    background:#fff;
    padding:4px;
    box-shadow:0 6px 18px rgba(15, 23, 42, 0.10);
}

.brand-text{
    display:flex;
    flex-direction:column;
    line-height:1.1;
}

.brand-text strong{
    font-size:16px;
    font-weight:800;
    color:var(--text-soft, #0f172a);
}

.brand-text span{
    font-size:11px;
    font-weight:600;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--text-muted, #64748b);
}

.sidebar-logo-wrap{
    display:flex;
    justify-content:center;
    align-items:center;
    margin-bottom:12px;
}

.sidebar-logo{
    width:70px;
    height:auto;
    object-fit:contain;
}

/* =========================================================
   SIDEBAR PRO UPGRADE
========================================================= */

.sidebar{
    width: 270px;
    background: linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
    border-right: 1px solid #dbe7f3;
    padding: 18px 16px;
    display: flex;
    flex-direction: column;
}

/* BRAND BOX */
.sidebar-brand-pro{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;

    padding: 16px;
    background: #ffffff;
    border: 1px solid #dfe8f2;
    border-radius: 18px;

    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06);
}

/* LOGO GRANDE */
.sidebar-logo-big{
    width: 100%;
    max-width: 120px;
    height: auto;
    object-fit: contain;
}

/* TESTO SOTTO LOGO */
.sidebar-brand-text{
    text-align: center;
}

.sidebar-brand-text h2{
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

.sidebar-brand-text p{
    margin: 2px 0 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #2563eb;
}

/* NAV */
.sidebar-nav{
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

.sidebar-nav .nav-link{
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 12px 14px;
    border-radius: 14px;
    font-weight: 700;
    font-size: 14px;
    color: #334155;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    transition: all .2s ease;
}

.sidebar-nav .nav-link:hover{
    background: #ffffff;
    color: #0f172a;
    border-color: #dbe7f3;
    transform: translateX(2px);
}

.sidebar-nav .nav-link.active{
    background: linear-gradient(135deg, #2563eb, #0ea5e9);
    color: #ffffff;
}

/* FOOTER */
.sidebar-footer{
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid #dbe7f3;
}

/* 👇 FIX TESTO NON LEGGIBILE */
.sidebar-user{
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;   /* <-- FIX */
    background: #ffffff;
    border: 1px solid #dbe7f3;
    border-radius: 14px;
    padding: 12px;
}

/* BOTTONI */
.sidebar-logout{
    width: 100%;
    text-align: center;
}

.vehicle-summary-row {
    cursor: pointer;
}

.vehicle-summary-row.is-open {
    background: rgba(15, 23, 42, 0.04);
}

.vehicle-details-row {
    display: none;
}

.vehicle-details-row.open {
    display: table-row;
}

[id^="details-branch-"] {
    display: none;
}

[id^="details-branch-"].open {
    display: table-row;
}

/* ===== LISTA FILIALI - ALLINEAMENTO CENTRATO ===== */

.filiali-table th,
.filiali-table td {
    text-align: center;
    vertical-align: middle;
}

/* Migliora spaziatura */
.filiali-table th {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* Riga filiale */
.filiale-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Lista veicoli dentro filiale */
.filiale-veicoli {
    width: 100%;
    margin-top: 10px;
}

.filiale-veicoli th,
.filiale-veicoli td {
    text-align: center;
}

/* Freccia + icona centrata */
.filiale-toggle,
.vehicle-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
}

.filiali-table td {
    padding: 12px 10px;
}

.filiali-table tr:hover {
    background: rgba(0, 0, 0, 0.03);
}

.branch-details-row,
.vehicle-details-row {
    display: none;
}

.branch-details-row.open,
.vehicle-details-row.open {
    display: table-row;
}

/* =========================================================
   PRO UI DEFINITIVO - SAAS CLEAN ENTERPRISE
   INCOLLA QUESTO BLOCCO ALLA FINE DI style.css
========================================================= */

:root{
    --sidebar-width: 300px;
    --saas-bg: #f3f7fd;
    --saas-panel: #ffffff;
    --saas-blue: #1266f1;
    --saas-blue-2: #0ea5e9;
    --saas-text: #07152d;
    --saas-muted: #64748b;
    --saas-line: #e5edf7;
    --saas-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
    --saas-shadow-soft: 0 10px 25px rgba(15, 23, 42, 0.06);
}

/* BODY */
body{
    background:
        radial-gradient(circle at top right, rgba(18,102,241,0.08), transparent 32%),
        linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%) !important;
    color: var(--saas-text);
}

/* LAYOUT */
.app-shell{
    display: flex !important;
    min-height: 100vh;
    background: transparent;
}

.main-content{
    flex: 1;
    min-width: 0;
    padding: 28px 34px !important;
}

/* SIDEBAR COME MOCKUP */
.sidebar{
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    padding: 20px 18px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%) !important;
    border-right: 1px solid #dce8f5 !important;
    box-shadow: 10px 0 30px rgba(15,23,42,0.05) !important;
    color: #0f172a !important;
    overflow: hidden;
}

.sidebar-brand,
.sidebar-brand-pro{
    background: #ffffff !important;
    border: 1px solid #e2eaf5 !important;
    border-radius: 22px !important;
    padding: 22px 18px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--saas-shadow-soft) !important;
    text-align: center !important;
}

.sidebar-logo,
.sidebar-logo-big{
    width: 128px !important;
    max-width: 128px !important;
    height: auto !important;
    margin: 0 auto 10px !important;
    object-fit: contain !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.sidebar-brand h2,
.sidebar-brand-text h2{
    color: #0f172a !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    text-align: center !important;
}

.sidebar-brand p,
.sidebar-brand-text p{
    color: #1266f1 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
}

/* NAV */
.sidebar-nav{
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    overflow-y: auto !important;
    padding-right: 4px !important;
}

.sidebar-nav a,
.sidebar-nav .nav-link,
.nav-link{
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 52px !important;
    padding: 14px 16px !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: #334155 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

.sidebar-nav a:hover,
.sidebar-nav .nav-link:hover,
.nav-link:hover{
    background: #eef5ff !important;
    color: #1266f1 !important;
    border-color: #d7e6fb !important;
    transform: translateX(2px) !important;
}

.sidebar-nav a.active,
.sidebar-nav .nav-link.active,
.nav-link.active{
    background: linear-gradient(135deg, #1266f1, #0ea5e9) !important;
    color: #ffffff !important;
    box-shadow: 0 12px 26px rgba(18,102,241,0.25) !important;
}

.sidebar-nav a::before,
.nav-link::before{
    display: none !important;
}

/* FOOTER SIDEBAR */
.sidebar-footer{
    margin-top: auto !important;
    padding-top: 18px !important;
    border-top: 1px solid #e2eaf5 !important;
}

.sidebar-user{
    background: #ffffff !important;
    border: 1px solid #e2eaf5 !important;
    color: #0f172a !important;
    border-radius: 18px !important;
    padding: 14px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    box-shadow: var(--saas-shadow-soft) !important;
}

.sidebar-logout,
.sidebar-footer .btn.delete{
    width: 100% !important;
    min-height: 52px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #ff5b62, #ef4444) !important;
    color: #ffffff !important;
    font-weight: 900 !important;
}

/* HEADER */
.page-header{
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 18px !important;
    margin-bottom: 26px !important;
}

.page-kicker{
    color: #1266f1 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 0.18em !important;
}

.page-header h1{
    font-size: 38px !important;
    font-weight: 900 !important;
    letter-spacing: -1.2px !important;
    color: #07152d !important;
}

.subtitle{
    color: #475569 !important;
    font-size: 17px !important;
    margin-top: 8px !important;
}

.page-header-actions{
    display: flex !important;
    gap: 12px !important;
    align-items: center !important;
}

.theme-toggle,
.btn.back,
.btn.edit{
    min-height: 52px !important;
    border-radius: 16px !important;
    padding: 0 20px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2eaf5 !important;
    box-shadow: var(--saas-shadow-soft) !important;
    font-weight: 900 !important;
}

.btn.edit{
    background: linear-gradient(135deg, #1266f1, #0b5de8) !important;
    color: #ffffff !important;
    border: none !important;
}

/* KPI COME IMMAGINE */
.metric-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    margin-bottom: 24px !important;
}

.metric-card{
    min-height: 150px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid #e2eaf5 !important;
    box-shadow: var(--saas-shadow-soft) !important;
    padding: 26px 24px !important;
    position: relative !important;
    overflow: hidden !important;
    justify-content: center !important;
    gap: 12px !important;
}

.metric-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    border-radius: 24px 0 0 24px;
}

.metric-card.info::before{ background: #0ea5e9; }
.metric-card.success::before{ background: #22c55e; }
.metric-card.warning::before{ background: #f97316; }
.metric-card.danger::before{ background: #8b5cf6; }
.metric-card.primary::before{ background: #1266f1; }
.metric-card.neutral::before{ background: #64748b; }

.metric-card.info,
.metric-card.success,
.metric-card.warning,
.metric-card.danger,
.metric-card.primary,
.metric-card.neutral{
    border-left: 1px solid #e2eaf5 !important;
}

.metric-label{
    font-size: 13px !important;
    font-weight: 900 !important;
    color: #475569 !important;
    letter-spacing: 0.09em !important;
}

.metric-value{
    font-size: 31px !important;
    font-weight: 900 !important;
    color: #07152d !important;
    letter-spacing: -0.7px !important;
}

.metric-value.small{
    font-size: 28px !important;
}

.metric-note{
    font-size: 14px !important;
    color: #64748b !important;
    font-weight: 600 !important;
}

/* BADGE RIFORNIMENTI */
.rifornimenti-title-row{
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 22px !important;
}

.rifornimenti-badge{
    background: #eef5ff !important;
    color: #1266f1 !important;
    border: 1px solid #d7e6fb !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    font-weight: 900 !important;
}

.rifornimenti-badge.adblue{
    background: #ecfeff !important;
    color: #0891b2 !important;
    border-color: #cffafe !important;
}

.rifornimenti-badge.periodo{
    background: #fff7ed !important;
    color: #c2410c !important;
    border-color: #fed7aa !important;
}

/* BOX TABELLE PREMIUM */
.table-box,
.form-box,
.chart-box{
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid #e2eaf5 !important;
    border-radius: 28px !important;
    box-shadow: var(--saas-shadow) !important;
    padding: 26px !important;
}

.table-box h2{
    font-size: 25px !important;
    font-weight: 900 !important;
    color: #07152d !important;
}

.row-hint{
    color: #64748b !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* TABELLE */
table{
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
}

thead th{
    background: #f4f7fc !important;
    color: #475569 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-align: center !important;
    padding: 16px 14px !important;
    border-bottom: 1px solid #e2eaf5 !important;
}

thead th:first-child{
    border-top-left-radius: 14px !important;
    border-bottom-left-radius: 14px !important;
}

thead th:last-child{
    border-top-right-radius: 14px !important;
    border-bottom-right-radius: 14px !important;
}

tbody td{
    text-align: center !important;
    vertical-align: middle !important;
    padding: 18px 14px !important;
    border-bottom: 1px solid #edf2f8 !important;
    color: #0f172a !important;
    font-weight: 600 !important;
}

tbody tr:hover{
    background: #f8fbff !important;
    transform: none !important;
}

/* RIGHE MESE / GIORNO CHIUSE */
.month-details-row,
.day-details-row,
.branch-details-row,
.vehicle-details-row{
    display: none !important;
}

.month-details-row.open,
.day-details-row.open,
.branch-details-row.open,
.vehicle-details-row.open{
    display: table-row !important;
}

.branch-summary-row,
.month-summary-row,
.day-summary-row,
.vehicle-summary-row{
    cursor: pointer !important;
}

.branch-summary-row.is-open,
.month-summary-row.is-open,
.day-summary-row.is-open,
.vehicle-summary-row.is-open{
    background: #eef5ff !important;
    box-shadow: inset 4px 0 0 #1266f1 !important;
}

.vehicle-arrow,
.inline-tag{
    width: 34px !important;
    height: 34px !important;
    border-radius: 999px !important;
    background: #eef5ff !important;
    color: #1266f1 !important;
    border: 1px solid #d7e6fb !important;
    font-weight: 900 !important;
    padding: 0 !important;
}

/* DETTAGLI APERTI */
.details-panel{
    background: #ffffff !important;
    border: 1px solid #e2eaf5 !important;
    border-radius: 22px !important;
    box-shadow: inset 0 0 0 1px rgba(226,234,245,0.6) !important;
    padding: 18px !important;
}

.details-grid{
    gap: 16px !important;
}

.details-item{
    background: #f8fbff !important;
    border: 1px solid #e2eaf5 !important;
    border-radius: 18px !important;
    padding: 16px !important;
}

/* FILTRI */
.live-filter-bar{
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr auto auto !important;
    gap: 14px !important;
    margin-bottom: 22px !important;
}

.live-filter-bar .filter-chip,
.live-result-count{
    min-height: 56px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.9) !important;
    border: 1px solid #e2eaf5 !important;
    box-shadow: var(--saas-shadow-soft) !important;
}

.live-filter-bar .filter-chip span{
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

.live-filter-bar input,
.live-filter-bar select{
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* INPUT GENERALE */
input,
select,
textarea{
    background: #ffffff !important;
    border: 1px solid #dbe7f3 !important;
    border-radius: 15px !important;
    min-height: 48px !important;
}

/* RESPONSIVE */
@media (max-width: 1450px){
    .metric-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1050px){
    .app-shell{
        flex-direction: column !important;
    }

    .sidebar{
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        position: relative !important;
    }

    .metric-grid,
    .live-filter-bar{
        grid-template-columns: 1fr !important;
    }

    .main-content{
        padding: 22px !important;
    }
}

/* =========================================================
   PRO UI CLEAN DEFINITIVO - COME MOCKUP
   INCOLLA ALLA FINE DI style.css
========================================================= */

:root{
    --sidebar-width: 260px;
    --pro-bg: #f6f9fd;
    --pro-panel: #ffffff;
    --pro-text: #07152d;
    --pro-muted: #64748b;
    --pro-line: #e2eaf5;
    --pro-blue: #1266f1;
    --pro-blue-2: #0ea5e9;
    --pro-green: #16a34a;
    --pro-orange: #f97316;
    --pro-purple: #7c3aed;
    --pro-red: #ef4444;
    --pro-shadow: 0 14px 34px rgba(15, 23, 42, 0.07);
    --pro-shadow-soft: 0 8px 22px rgba(15, 23, 42, 0.05);
}

/* BASE */
body{
    background:
        radial-gradient(circle at top right, rgba(18,102,241,0.06), transparent 32%),
        linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%) !important;
    color: var(--pro-text) !important;
    font-family: "Poppins", sans-serif !important;
}

/* LAYOUT */
.app-shell{
    display: flex !important;
    min-height: 100vh !important;
}

.main-content{
    flex: 1 !important;
    padding: 22px 30px !important;
    min-width: 0 !important;
}

/* =========================================================
   SIDEBAR COMPATTA CON TUTTA LA LISTA
========================================================= */

.sidebar{
    width: var(--sidebar-width) !important;
    min-width: var(--sidebar-width) !important;
    max-width: var(--sidebar-width) !important;
    height: 100vh !important;
    position: sticky !important;
    top: 0 !important;
    padding: 14px 14px !important;
    background: #ffffff !important;
    border-right: 1px solid var(--pro-line) !important;
    box-shadow: 8px 0 26px rgba(15,23,42,0.04) !important;
    color: var(--pro-text) !important;
    overflow: hidden !important;
}

.sidebar-brand,
.sidebar-brand-pro{
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    border-radius: 18px !important;
    padding: 14px 12px !important;
    margin-bottom: 14px !important;
    box-shadow: var(--pro-shadow-soft) !important;
    text-align: center !important;
}

.sidebar-logo,
.sidebar-logo-big{
    width: 92px !important;
    max-width: 92px !important;
    height: auto !important;
    margin: 0 auto 8px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.sidebar-brand h2,
.sidebar-brand-text h2{
    font-size: 15px !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    color: var(--pro-text) !important;
    margin: 0 !important;
}

.sidebar-brand p,
.sidebar-brand-text p{
    font-size: 10px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: var(--pro-blue) !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    margin-top: 4px !important;
}

/* NAV LISTA SENZA SCROLL */
.sidebar-nav{
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    overflow: visible !important;
    padding-right: 0 !important;
    margin-top: 8px !important;
}

.sidebar-nav a,
.sidebar-nav .nav-link,
.nav-link{
    min-height: 40px !important;
    height: 40px !important;
    padding: 8px 11px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #254168 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    transform: none !important;
}

.sidebar-nav a:hover,
.sidebar-nav .nav-link:hover,
.nav-link:hover{
    background: #eef5ff !important;
    color: var(--pro-blue) !important;
    border-color: #d7e6fb !important;
}

.sidebar-nav a.active,
.sidebar-nav .nav-link.active,
.nav-link.active{
    background: linear-gradient(135deg, var(--pro-blue), var(--pro-blue-2)) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(18,102,241,0.22) !important;
}

.sidebar-nav a::before,
.nav-link::before{
    display: none !important;
}

.nav-icon{
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

/* FOOTER COMPATTO */
.sidebar-footer{
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 1px solid var(--pro-line) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.sidebar-user{
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    border-radius: 14px !important;
    padding: 9px 10px !important;
    color: var(--pro-text) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    box-shadow: var(--pro-shadow-soft) !important;
}

.sidebar-logout,
.sidebar-footer .btn.delete{
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #ff5b62, #ef4444) !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
}

/* =========================================================
   HEADER PULITO
========================================================= */

.page-header{
    margin-bottom: 20px !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
}

.page-kicker{
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .20em !important;
    color: var(--pro-blue) !important;
    margin-bottom: 8px !important;
}

.page-header h1{
    font-size: 34px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
    color: var(--pro-text) !important;
}

.subtitle{
    margin-top: 8px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #475569 !important;
    line-height: 1.45 !important;
}

.page-header-actions{
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
}

.theme-toggle,
.btn.back,
.btn.edit{
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 17px !important;
    border-radius: 14px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    color: var(--pro-text) !important;
    border: 1px solid var(--pro-line) !important;
    box-shadow: var(--pro-shadow-soft) !important;
}

.btn.edit,
button{
    background: linear-gradient(135deg, var(--pro-blue), #0b5de8) !important;
    color: #ffffff !important;
    border: none !important;
}

/* =========================================================
   CARD KPI PIÙ LEGGERE
========================================================= */

.metric-grid{
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-bottom: 20px !important;
}

.metric-card{
    min-height: 122px !important;
    padding: 20px 22px !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    box-shadow: var(--pro-shadow-soft) !important;
    position: relative !important;
    overflow: hidden !important;
    justify-content: center !important;
    gap: 9px !important;
}

.metric-card::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
}

.metric-card.info::before,
.metric-card.primary::before{ background: var(--pro-blue); }

.metric-card.success::before{ background: var(--pro-green); }

.metric-card.warning::before{ background: var(--pro-orange); }

.metric-card.danger::before{ background: var(--pro-purple); }

.metric-card.neutral::before{ background: #64748b; }

.metric-card.info,
.metric-card.success,
.metric-card.warning,
.metric-card.danger,
.metric-card.primary,
.metric-card.neutral{
    border-left: 1px solid var(--pro-line) !important;
}

.metric-label{
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #52637a !important;
    letter-spacing: .08em !important;
}

.metric-value{
    font-size: 29px !important;
    line-height: 1.05 !important;
    font-weight: 800 !important;
    color: var(--pro-text) !important;
    letter-spacing: -.6px !important;
}

.metric-value.small{
    font-size: 23px !important;
}

.metric-note{
    font-size: 13px !important;
    font-weight: 400 !important;
    color: var(--pro-muted) !important;
}

/* =========================================================
   CARD FUNZIONI / FORM / TABELLE
========================================================= */

.form-box,
.table-box,
.chart-box,
.branch-quick-card,
.card{
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    border-radius: 22px !important;
    box-shadow: var(--pro-shadow-soft) !important;
    padding: 22px !important;
    margin-bottom: 18px !important;
}

.form-box h2,
.table-box h2,
.chart-box h3{
    font-size: 23px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    color: var(--pro-text) !important;
    margin-bottom: 14px !important;
}

.branch-quick-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

.branch-quick-card{
    min-height: 115px !important;
}

.branch-quick-title{
    font-size: 16px !important;
    font-weight: 750 !important;
}

.branch-quick-text{
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--pro-muted) !important;
}

/* =========================================================
   FILTRI COMPATTI
========================================================= */

.search-toolbar-group{
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.search-toolbar{
    min-height: 48px !important;
    padding: 8px 13px !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    box-shadow: var(--pro-shadow-soft) !important;
}

.search-toggle{
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 11px !important;
}

.search-label{
    font-size: 14px !important;
    font-weight: 700 !important;
}

.live-filter-bar{
    display: grid !important;
    grid-template-columns: 1.2fr 1fr 1fr auto auto !important;
    gap: 12px !important;
    margin-bottom: 18px !important;
}

.live-filter-bar .filter-chip,
.live-result-count{
    min-height: 48px !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    box-shadow: var(--pro-shadow-soft) !important;
}

.live-filter-bar .filter-chip span{
    font-size: 11px !important;
    font-weight: 800 !important;
    color: #52637a !important;
}

.live-filter-bar input,
.live-filter-bar select{
    border: none !important;
    background: transparent !important;
    min-height: 36px !important;
    padding: 0 !important;
    box-shadow: none !important;
}

/* =========================================================
   TABELLE PIÙ PULITE
========================================================= */

.table-scroll{
    overflow-x: auto !important;
}

table{
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 14px !important;
}

thead th{
    background: #f6f9fd !important;
    color: #52637a !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: .06em !important;
    padding: 14px 12px !important;
    border-bottom: 1px solid var(--pro-line) !important;
    text-align: center !important;
}

tbody td{
    padding: 15px 12px !important;
    border-bottom: 1px solid #edf2f8 !important;
    text-align: center !important;
    vertical-align: middle !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #10233f !important;
}

tbody td strong{
    font-weight: 700 !important;
}

tbody tr:hover{
    background: #f8fbff !important;
    transform: none !important;
}

.actions{
    justify-content: center !important;
}

/* BOTTONI TABELLA */
.actions .btn,
td .btn{
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 14px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.btn.delete{
    background: linear-gradient(135deg, #ff4d55, #ef4444) !important;
    color: #ffffff !important;
}

/* FORM PIÙ COMPATTI */
.grid-2{
    gap: 14px !important;
}

.form-box label{
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #334155 !important;
}

input,
select,
textarea{
    min-height: 45px !important;
    border-radius: 14px !important;
    border: 1px solid #dce7f3 !important;
    background: #ffffff !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

/* DETTAGLI */
.details-panel{
    background: #ffffff !important;
    border: 1px solid var(--pro-line) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    padding: 16px !important;
}

.details-grid{
    gap: 12px !important;
}

.details-item{
    background: #f8fbff !important;
    border: 1px solid var(--pro-line) !important;
    border-radius: 15px !important;
    padding: 13px !important;
}

.details-item-label{
    font-size: 11px !important;
    font-weight: 800 !important;
}

.details-item-value{
    font-size: 14px !important;
    font-weight: 600 !important;
}

/* FRECCE */
.vehicle-arrow,
.inline-tag{
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    border-radius: 999px !important;
    background: #eef5ff !important;
    color: var(--pro-blue) !important;
    border: 1px solid #d7e6fb !important;
    padding: 0 !important;
    font-weight: 800 !important;
}

.branch-summary-row,
.vehicle-summary-row,
.month-summary-row,
.day-summary-row{
    cursor: pointer !important;
}

.branch-summary-row.is-open,
.vehicle-summary-row.is-open,
.month-summary-row.is-open,
.day-summary-row.is-open{
    background: #eef5ff !important;
    box-shadow: inset 4px 0 0 var(--pro-blue) !important;
}

.branch-details-row,
.vehicle-details-row,
.month-details-row,
.day-details-row{
    display: none !important;
}

.branch-details-row.open,
.vehicle-details-row.open,
.month-details-row.open,
.day-details-row.open{
    display: table-row !important;
}

/* SPAZI VUOTI RIDOTTI */
.section-block{
    margin-top: 18px !important;
}

.table-summary-row{
    margin-bottom: 14px !important;
    gap: 10px !important;
}

.table-summary-pill{
    padding: 8px 13px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

/* RESPONSIVE */
@media (max-width: 1450px){
    .metric-grid{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1180px){
    .metric-grid,
    .branch-quick-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 980px){
    .app-shell{
        flex-direction: column !important;
    }

    .sidebar{
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        position: relative !important;
    }

    .sidebar-nav{
        overflow-x: auto !important;
        flex-direction: row !important;
    }

    .sidebar-nav a,
    .sidebar-nav .nav-link{
        min-width: max-content !important;
    }

    .main-content{
        padding: 18px !important;
    }

    .metric-grid,
    .branch-quick-grid,
    .live-filter-bar{
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   SIDEBAR FIX - SCROLL + ICONE PROFESSIONALI
========================================================= */

.sidebar{
    overflow: hidden !important;
}

.sidebar-nav{
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px !important;
    margin-right: -4px !important;
}

.sidebar-nav::-webkit-scrollbar{
    width: 6px !important;
}

.sidebar-nav::-webkit-scrollbar-track{
    background: transparent !important;
}

.sidebar-nav::-webkit-scrollbar-thumb{
    background: #cbd5e1 !important;
    border-radius: 999px !important;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover{
    background: #94a3b8 !important;
}

.nav-icon{
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    filter: grayscale(1) !important;
}

.nav-link.active .nav-icon,
.sidebar-nav a.active .nav-icon{
    color: #ffffff !important;
    filter: grayscale(1) brightness(3) !important;
}

.sidebar-nav a,
.sidebar-nav .nav-link{
    font-weight: 600 !important;
}

.sidebar-footer{
    flex-shrink: 0 !important;
}

/* =========================================================
   SIDEBAR UPGRADE FINALE - SVG PREMIUM
========================================================= */

.sidebar{
    overflow: hidden !important;
}

.sidebar-nav{
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 6px !important;
}

.sidebar-nav::-webkit-scrollbar{
    width: 6px !important;
}

.sidebar-nav::-webkit-scrollbar-thumb{
    background: #cbd5e1 !important;
    border-radius: 999px !important;
}

.nav-icon{
    width: 22px !important;
    min-width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.nav-icon svg{
    width: 19px !important;
    height: 19px !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    fill: none !important;
}

.sidebar-nav .nav-link{
    gap: 12px !important;
    font-weight: 600 !important;
    color: #334155 !important;
}

.sidebar-nav .nav-link.active{
    color: #ffffff !important;
}

.sidebar-nav .nav-link:hover{
    color: #1266f1 !important;
}

.sidebar-nav .nav-link.active:hover{
    color: #ffffff !important;
}

.sidebar-footer{
    flex-shrink: 0 !important;
}

/* =========================================================
   STEP FINALE UI - SIDEBAR COLLASSABILE PREMIUM
========================================================= */

.sidebar-collapse-btn{
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 12px !important;
    background: #ffffff !important;
    color: #334155 !important;
    border: 1px solid #e2eaf5 !important;
    box-shadow: 0 8px 18px rgba(15,23,42,.06) !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    font-size: 18px !important;
}

.sidebar-collapsed .sidebar{
    width: 86px !important;
    min-width: 86px !important;
    max-width: 86px !important;
}

.sidebar-collapsed .sidebar-brand-text,
.sidebar-collapsed .nav-link span:not(.nav-icon),
.sidebar-collapsed .sidebar-user span:not(.nav-icon),
.sidebar-collapsed .sidebar-logout{
    display: none !important;
}

.sidebar-collapsed .sidebar-logo-big{
    width: 42px !important;
    max-width: 42px !important;
    margin-bottom: 0 !important;
}

.sidebar-collapsed .sidebar-brand{
    padding: 12px !important;
}

.sidebar-collapsed .nav-link{
    justify-content: center !important;
    padding: 10px !important;
}

.sidebar-collapsed .nav-icon{
    margin: 0 !important;
}

.sidebar-collapsed .main-content{
    padding-left: 30px !important;
}

.nav-link{
    position: relative !important;
}

.sidebar-collapsed .nav-link:hover::after{
    content: attr(data-title);
    position: fixed;
    left: 92px;
    background: #0f172a;
    color: #ffffff;
    padding: 8px 11px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    z-index: 9999;
    box-shadow: 0 12px 28px rgba(15,23,42,.22);
}

/* =========================================================
   FONT TUNING POPPINS (LOOK SaaS PREMIUM)
========================================================= */

body{
    letter-spacing: 0.2px;
}

/* Titoli */
h1, h2, h3{
    font-weight: 700 !important;
    letter-spacing: -0.3px;
}

/* Sottotitoli */
.subtitle{
    font-weight: 400 !important;
    opacity: 0.85;
}

/* Label e piccoli testi */
label,
.metric-label,
.details-item-label,
.table-box th{
    font-weight: 600 !important;
}

/* Valori importanti */
.metric-value,
.admin-branch-name{
    font-weight: 700 !important;
}

/* Bottoni */
button,
.btn{
    font-weight: 600 !important;
}

/* Sidebar */
.sidebar-nav .nav-link{
    font-weight: 500 !important;
}

/* Tabelle */
table td{
    font-weight: 400 !important;
}

/* =========================================================
   UI SLIM MODE (LOOK PROFESSIONALE)
========================================================= */

/* Titolo principale */
.page-header h1{
    font-size: 26px !important;
    font-weight: 600 !important;
    letter-spacing: -0.3px !important;
}

/* Sottotitolo */
.subtitle{
    font-size: 13px !important;
    font-weight: 400 !important;
    opacity: 0.75 !important;
}

/* Sezioni */
.section-header h2{
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* KPI card */
.metric-value{
    font-size: 26px !important;
    font-weight: 600 !important;
}

/* Label KPI */
.metric-label{
    font-size: 11px !important;
    font-weight: 600 !important;
    opacity: 0.7;
}

/* Riduzione padding card */
.metric-card,
.card{
    padding: 16px !important;
    border-radius: 16px !important;
}

/* Riduce spazio tra elementi */
.metric-grid{
    gap: 14px !important;
}

.dashboard{
    gap: 14px !important;
}

/* Tabelle */
table td{
    padding: 10px 10px !important;
    font-size: 13px !important;
}

thead th{
    font-size: 11px !important;
}

/* Bottoni più compatti */
button,
.btn{
    padding: 9px 14px !important;
    font-size: 13px !important;
}

/* Sidebar più compatta */
.sidebar-nav .nav-link{
    min-height: 40px !important;
    padding: 10px 12px !important;
    font-size: 13px !important;
}

/* Riduce header spacing */
.page-header{
    margin-bottom: 18px !important;
}

/* Riduce blocchi */
.section-block{
    margin-top: 18px !important;
}

/* =========================================================
   GLOBAL TEXT LIGHT MODE - UI PIÙ SNELLA
========================================================= */

/* Base */
body{
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* Titoli principali */
.page-header h1{
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -0.35px !important;
}

/* Titoli sezioni / box */
h2,
.table-box h2,
.form-box h2,
.chart-box h3,
.section-header h2{
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.25px !important;
}

/* Sottotitoli */
.subtitle,
.section-subtitle,
.table-box p,
.form-box p{
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #64748b !important;
}

/* Kicker sopra i titoli */
.page-kicker{
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
}

/* KPI */
.metric-label,
.card label,
.details-item-label,
.info-item-label,
.admin-expiry-label{
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .8px !important;
}

.metric-value,
.card p,
.admin-expiry-value,
.status-kpi-value{
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -0.4px !important;
}

.metric-value.small{
    font-size: 18px !important;
    font-weight: 600 !important;
}

/* Testi piccoli nelle card */
.metric-note,
.card-link-text,
.branch-quick-text,
.admin-branch-summary,
.admin-branch-coordinator,
.admin-branch-coordinator-inline{
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #64748b !important;
}

/* Tabelle */
table{
    font-size: 13px !important;
}

thead th{
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .7px !important;
}

tbody td{
    font-size: 13px !important;
    font-weight: 400 !important;
}

tbody td strong,
table strong{
    font-weight: 600 !important;
}

/* Form */
label{
    font-size: 12px !important;
    font-weight: 500 !important;
}

input,
select,
textarea{
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Bottoni */
button,
.btn{
    font-size: 12.5px !important;
    font-weight: 500 !important;
}

/* Sidebar */
.sidebar-brand-text h2{
    font-size: 14px !important;
    font-weight: 600 !important;
}

.sidebar-brand-text p{
    font-size: 10px !important;
    font-weight: 500 !important;
}

.sidebar-nav .nav-link{
    font-size: 13px !important;
    font-weight: 400 !important;
}

.sidebar-nav .nav-link.active{
    font-weight: 500 !important;
}

.sidebar-user{
    font-size: 12px !important;
    font-weight: 400 !important;
}

/* Badge / pill */
.status-pill,
.inline-tag,
.table-summary-pill,
.rifornimenti-badge{
    font-size: 11px !important;
    font-weight: 500 !important;
}

/* Admin branch */
.admin-branch-name{
    font-size: 17px !important;
    font-weight: 600 !important;
}

.admin-branch-metric span{
    font-size: 10px !important;
    font-weight: 500 !important;
}

.admin-branch-metric strong,
.admin-branch-fuel-value{
    font-size: 19px !important;
    font-weight: 600 !important;
}

/* =========================================================
   GLOBAL ULTRA LIGHT TYPOGRAPHY - DEFINITIVO
   Deve stare come ULTIMO blocco del CSS
========================================================= */

html,
body,
body *{
    font-family: "Poppins","Segoe UI",Tahoma,Geneva,Verdana,sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
}

/* TITOLI */
h1,
.page-header h1{
    font-size: 24px !important;
    font-weight: 600 !important;
    letter-spacing: -0.4px !important;
    line-height: 1.15 !important;
}

h2,
.table-box h2,
.form-box h2,
.section-header h2{
    font-size: 19px !important;
    font-weight: 500 !important;
    letter-spacing: -0.2px !important;
    line-height: 1.2 !important;
}

h3,
.chart-box h3,
.details-section h3{
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: -0.1px !important;
}

/* TESTI GENERALI */
p,
li,
span,
div,
a{
    font-weight: 400 !important;
}

.subtitle,
.section-subtitle,
.muted-text,
.metric-note,
.card-link-text,
.branch-quick-text,
.table-box p,
.form-box p{
    font-size: 12.5px !important;
    font-weight: 300 !important;
    line-height: 1.5 !important;
    color: #64748b !important;
}

/* LABEL / KICKER */
.page-kicker,
.metric-label,
.details-item-label,
.info-item-label,
.status-kpi-label,
.admin-expiry-label,
label{
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .7px !important;
    text-transform: uppercase !important;
}

/* NUMERI KPI */
.metric-value,
.card p,
.status-kpi-value,
.admin-expiry-value,
.details-item-value{
    font-size: 22px !important;
    font-weight: 500 !important;
    letter-spacing: -0.3px !important;
}

.metric-value.small{
    font-size: 17px !important;
    font-weight: 500 !important;
}

/* TABELLE */
table,
table *{
    font-weight: 400 !important;
}

thead th,
table th{
    font-size: 10.5px !important;
    font-weight: 500 !important;
    letter-spacing: .6px !important;
    text-transform: uppercase !important;
    color: #64748b !important;
}

tbody td,
table td{
    font-size: 12.5px !important;
    font-weight: 300 !important;
    color: #334155 !important;
}

tbody td strong,
table td strong,
table strong{
    font-weight: 500 !important;
    color: #0f172a !important;
}

/* BOTTONI */
button,
.btn,
button *,
.btn *{
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}

/* FORM */
input,
select,
textarea,
option{
    font-size: 12.5px !important;
    font-weight: 300 !important;
}

input::placeholder,
textarea::placeholder{
    font-weight: 300 !important;
    color: #94a3b8 !important;
}

/* SIDEBAR */
.sidebar,
.sidebar *{
    font-weight: 400 !important;
}

.sidebar-brand-text h2{
    font-size: 13.5px !important;
    font-weight: 500 !important;
}

.sidebar-brand-text p{
    font-size: 9.5px !important;
    font-weight: 500 !important;
    letter-spacing: .7px !important;
}

.sidebar-nav .nav-link,
.sidebar-nav .nav-link span{
    font-size: 12.5px !important;
    font-weight: 400 !important;
}

.sidebar-nav .nav-link.active,
.sidebar-nav .nav-link.active span{
    font-weight: 500 !important;
}

.sidebar-user,
.sidebar-user span{
    font-size: 11.5px !important;
    font-weight: 400 !important;
}

/* BADGE / TAG / PILL */
.status-pill,
.inline-tag,
.table-summary-pill,
.rifornimenti-badge,
.smart-badge,
.admin-branch-status-badge{
    font-size: 10.5px !important;
    font-weight: 500 !important;
}

/* DETTAGLI / CARD */
.details-item-value,
.info-item-value,
.admin-branch-name,
.admin-branch-metric strong,
.admin-branch-fuel-value,
.status-vehicle-main strong,
.sheet-mini-item strong{
    font-weight: 500 !important;
}

.admin-branch-summary,
.admin-branch-coordinator,
.admin-branch-coordinator-inline,
.status-vehicle-main span,
.status-vehicle-meta,
.sheet-mini-item span{
    font-weight: 300 !important;
}

/* RIDUZIONE SPAZI PER LOOK PIÙ SNELLO */
.metric-card,
.card,
.form-box,
.table-box,
.chart-box{
    padding: 16px !important;
}

.metric-grid,
.chart-grid,
.grid-2,
.details-grid{
    gap: 12px !important;
}

tbody td{
    padding: 9px 10px !important;
}

thead th{
    padding: 10px 10px !important;
}

button,
.btn{
    padding: 8px 13px !important;
}

/* =========================================================
   FILIALI - ADD PANEL PREMIUM
========================================================= */

.add-branch-btn{
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 10px 16px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

.add-branch-btn:hover{
    transform: translateY(-1px) !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.09) !important;
}

.add-branch-icon{
    width: 38px !important;
    height: 38px !important;
    border-radius: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    color: #ffffff !important;
}

.add-branch-icon svg{
    width: 19px !important;
    height: 19px !important;
    stroke: currentColor !important;
    stroke-width: 2.3 !important;
    fill: none !important;
    stroke-linecap: round !important;
}

.add-filiale-panel{
    display: none !important;
}

.add-filiale-panel.open{
    display: block !important;
    animation: godExpand .28s ease !important;
}

.add-filiale-panel.is-hidden{
    display: none !important;
}

.add-filiale-panel:not(.is-hidden){
    display: block !important;
}

.search-toggle{
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

.search-toolbar{
    display: flex;
    align-items: center;
    gap: 10px;
}

.add-branch-btn{
    display: inline-flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 10px 18px 10px 10px !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06) !important;
}

.add-branch-icon{
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 12px !important;
    background: linear-gradient(135deg, #2563eb, #0ea5e9) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.24) !important;
}

.add-branch-icon svg{
    width: 21px !important;
    height: 21px !important;
    stroke: #ffffff !important;
    stroke-width: 2.1 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.add-branch-btn span:last-child{
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

/* =========================================================
   UI DEPTH UPGRADE - MENO BIANCO, PIÙ PREMIUM
========================================================= */

body{
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.12), transparent 28%),
        radial-gradient(circle at bottom left, rgba(14, 165, 233, 0.10), transparent 30%),
        linear-gradient(135deg, #edf3fb 0%, #e6eef7 45%, #dce7f3 100%) !important;
}

.main-content{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.08));
    border-left: 1px solid rgba(148, 163, 184, 0.25);
}

.metric-card,
.table-box,
.form-box,
.search-toolbar,
.live-filter-bar .filter-chip,
.live-result-count{
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(248,250,252,0.78)) !important;
    border: 1px solid rgba(203,213,225,0.95) !important;
    box-shadow:
        0 18px 40px rgba(15,23,42,0.08),
        inset 0 1px 0 rgba(255,255,255,0.85) !important;
    backdrop-filter: blur(10px);
}

.metric-card{
    min-height: 110px !important;
}

.table-box{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.95), rgba(241,245,249,0.86)) !important;
}

thead th{
    background: linear-gradient(180deg, #eef4fb, #e8eff7) !important;
    color: #475569 !important;
}

tbody tr:nth-child(even){
    background: rgba(248,250,252,0.65);
}

tbody tr:hover{
    background: rgba(219,234,254,0.55) !important;
}

.page-kicker{
    color: #1d4ed8 !important;
}

.page-header h1{
    color: #111827 !important;
}

.subtitle{
    color: #64748b !important;
}

.metric-label,
.table-box th,
.filter-chip span{
    color: #475569 !important;
}

.metric-value{
    color: #111827 !important;
}

.metric-note,
tbody td{
    color: #475569 !important;
}

.btn.back{
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(203,213,225,0.95) !important;
    box-shadow: 0 10px 24px rgba(15,23,42,0.06) !important;
}

.add-branch-btn{
    background: linear-gradient(180deg, #ffffff, #f1f5f9) !important;
    border: 1px solid rgba(203,213,225,0.95) !important;
    box-shadow: 0 14px 30px rgba(15,23,42,0.08) !important;
}

.sidebar{
    background: linear-gradient(180deg, #f8fbff 0%, #edf4fb 52%, #e5eef8 100%) !important;
    border-right: 1px solid rgba(148,163,184,0.35) !important;
    box-shadow: 12px 0 34px rgba(15,23,42,0.08) !important;
}

.sidebar-brand-pro,
.sidebar-user{
    background: rgba(255,255,255,0.82) !important;
    border: 1px solid rgba(203,213,225,0.95) !important;
    box-shadow: 0 14px 30px rgba(15,23,42,0.07) !important;
}

.nav-link{
    color: #334155 !important;
}

.nav-link:hover{
    background: rgba(255,255,255,0.78) !important;
}

.nav-link.active{
    background: linear-gradient(135deg, #2563eb, #0284c7) !important;
    color: #ffffff !important;
    box-shadow: 0 14px 28px rgba(37,99,235,0.25) !important;
}

.vehicle-cost-form{
    margin-top: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--panel-soft);
}

.no-anim {
    animation: none !important;
    transition: none !important;
}

.no-anim .metric-value {
    animation: none !important;
    transform: none !important;
}

/* =========================================================
   COSTI VEICOLO - PREMIUM BOX
========================================================= */

.form-section-title{
    margin: 26px 0 12px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

.cost-premium-box{
    margin: 12px 0 24px;
    padding: 18px;
    border-radius: 20px;
    border: 1px solid rgba(203,213,225,0.9);
    background:
        linear-gradient(180deg, rgba(255,255,255,0.96), rgba(241,245,249,0.88));
    box-shadow:
        0 16px 34px rgba(15,23,42,0.07),
        inset 0 1px 0 rgba(255,255,255,0.9);
}

.cost-premium-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid #e2e8f0;
}

.cost-premium-header strong{
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: #0f172a;
}

.cost-premium-header span{
    display: block;
    margin-top: 3px;
    font-size: 12px;
    color: #64748b;
}

.cost-premium-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.cost-premium-grid label{
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin-bottom: 6px;
}

.cost-premium-grid input{
    background: #ffffff !important;
    border: 1px solid #dbe7f3 !important;
    border-radius: 14px !important;
    min-height: 46px !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,0.04);
}

@media (max-width: 1200px){
    .cost-premium-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px){
    .cost-premium-grid{
        grid-template-columns: 1fr;
    }
}

/* FIX toolbar veicoli più ordinata */
.search-toolbar-group{
    align-items: center !important;
    gap: 18px !important;
    margin-top: 6px !important;
    margin-bottom: 18px !important;
}

.search-toolbar-group .add-branch-btn{
    min-width: 260px !important;
    height: 64px !important;
    padding: 10px 22px 10px 12px !important;
    justify-content: flex-start !important;
}

.search-toolbar-group .add-branch-icon{
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
}

.search-toolbar-group .add-branch-btn span:last-child{
    white-space: nowrap !important;
}

.metric-card.danger .metric-value,
.metric-card.danger .metric-value.small{
    animation: none !important;
    transform: none !important;
    transition: none !important;
}

/* DASHBOARD ADMIN TOP - COSTO + KPI COMPATTI */

.admin-dashboard-top{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
    margin-bottom: 22px !important;
}

.fleet-cost-hero{
    min-height: 250px !important;
    display: flex !important;
    align-items: center !important;
    padding: 26px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #ffffff, #eef5ff) !important;
    border: 1px solid rgba(203,213,225,0.95) !important;
    box-shadow: 0 18px 40px rgba(15,23,42,0.08) !important;
    border-left: 5px solid #7c3aed !important;
    text-decoration: none !important;
    color: inherit !important;
}

.fleet-cost-value{
    font-size: 38px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin: 14px 0 8px !important;
    animation: none !important;
    transform: none !important;
}

.admin-mini-kpi-grid{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.admin-mini-kpi-grid .metric-card{
    min-height: 118px !important;
    padding: 15px !important;
    border-radius: 18px !important;
    animation: none !important;
}

.admin-mini-kpi-grid .metric-value{
    font-size: 22px !important;
    animation: none !important;
    transform: none !important;
}

.admin-mini-kpi-grid .metric-note{
    font-size: 11.5px !important;
}

.fleet-cost-hero *,
.admin-dashboard-top .metric-value{
    animation: none !important;
}

@media (max-width: 1200px){
    .admin-dashboard-top{
        grid-template-columns: 1fr !important;
    }

    .admin-mini-kpi-grid{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* DASHBOARD ADMIN - COSTO FLOTTA + KPI COMPATTI */

.admin-executive-top{
    display: grid !important;
    grid-template-columns: minmax(360px, 1fr) minmax(520px, 1.15fr) !important;
    gap: 18px !important;
    margin-bottom: 20px !important;
    align-items: stretch !important;
}

.admin-cost-card{
    min-height: 100% !important;
    justify-content: center !important;
}

.admin-cost-card .metric-value{
    font-size: 30px !important;
    font-weight: 500 !important;
}

.admin-kpi-grid-compact{
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
}

.admin-kpi-grid-compact .metric-card{
    min-height: 92px !important;
    padding: 14px !important;
}

.admin-kpi-grid-compact .metric-value{
    font-size: 22px !important;
}

.admin-kpi-grid-compact .metric-note{
    font-size: 11px !important;
}

.no-anim,
.no-anim *,
.admin-cost-card,
.admin-cost-card *{
    animation: none !important;
    transition: none !important;
    transform: none !important;
}

@media (max-width: 1200px){
    .admin-executive-top{
        grid-template-columns: 1fr !important;
    }

    .admin-kpi-grid-compact{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

.cost-card-link{
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
}

.cost-card-link:hover{
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.cost-card-link {
    text-decoration: none;
    display: block;
}

.cost-card-link .metric-card {
    cursor: pointer;
    transition: all 0.2s ease;
}

.cost-card-link .metric-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* =========================================================
   DASHBOARD COSTI FLOTTA PRO
========================================================= */

.cost-card-link{
    text-decoration: none !important;
    color: inherit !important;
}

.cost-card-link:hover{
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-lg) !important;
}

.chart-canvas-wrap-large{
    height: 420px !important;
    min-height: 420px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#fleetCostChart{
    max-height: 420px !important;
}

/* =========================================================
   COSTI FLOTTA - LAYOUT PRO
========================================================= */

.cost-dashboard-pro{
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    gap: 22px !important;
    align-items: stretch !important;
    margin-bottom: 26px !important;
}

.cost-kpi-column{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
}

.cost-kpi-column .metric-card{
    min-height: 118px !important;
    margin-bottom: 0 !important;
}

.cost-chart-panel{
    min-height: 514px !important;
    display: flex !important;
    flex-direction: column !important;
}

.cost-chart-wrap{
    flex: 1 !important;
    min-height: 410px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cost-chart-wrap canvas{
    max-width: 520px !important;
    max-height: 420px !important;
}

@media (max-width: 1100px){
    .cost-dashboard-pro{
        grid-template-columns: 1fr !important;
    }

    .cost-kpi-column{
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px){
    .cost-kpi-column{
        grid-template-columns: 1fr !important;
    }

    .cost-chart-panel{
        min-height: 380px !important;
    }
}

/* =========================================================
   COSTI FLOTTA - DETTAGLIO VEICOLO COMPATTO
========================================================= */

.costs-vehicle-detail .details-panel{
    padding: 14px 16px;
    border-radius: 18px;
}

.costs-vehicle-detail .details-grid{
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 10px;
}

.costs-vehicle-detail .details-item{
    padding: 10px 12px;
    border-radius: 14px;
    min-height: auto;
}

.costs-vehicle-detail .details-item-label{
    font-size: 10px;
    letter-spacing: .08em;
    margin-bottom: 4px;
}

.costs-vehicle-detail .details-item-value{
    font-size: 15px;
    font-weight: 800;
    line-height: 1.15;
}

.costs-vehicle-detail .details-section{
    margin-top: 14px;
    padding-top: 12px;
}

.costs-vehicle-detail .detail-actions{
    margin-top: 12px;
    gap: 8px;
}

.costs-vehicle-detail .btn{
    padding: 8px 12px;
    font-size: 12px;
}

@media (max-width: 1200px){
    .costs-vehicle-detail .details-grid{
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }
}

@media (max-width: 800px){
    .costs-vehicle-detail .details-grid{
        grid-template-columns: repeat(2, minmax(130px, 1fr));
    }
}

/* COSTI FLOTTA - SCHEDA COMPATTA DEFINITIVA */

.details-panel.costs-vehicle-detail{
    padding: 10px 12px !important;
}

.details-panel.costs-vehicle-detail .details-grid{
    grid-template-columns: repeat(5, minmax(120px, 1fr)) !important;
    gap: 8px !important;
}

.details-panel.costs-vehicle-detail .details-item{
    padding: 8px 10px !important;
    border-radius: 12px !important;
    min-height: 58px !important;
}

.details-panel.costs-vehicle-detail .details-item-label{
    font-size: 9px !important;
    margin-bottom: 3px !important;
}

.details-panel.costs-vehicle-detail .details-item-value{
    font-size: 14px !important;
    line-height: 1.1 !important;
}

.details-panel.costs-vehicle-detail .details-section{
    margin-top: 10px !important;
    padding-top: 10px !important;
}

/* =========================================================
   FLOTTA VEICOLI - VERSIONE COMPATTA
========================================================= */

.details-panel.compact-vehicle{
    padding: 12px 14px !important;
}

.details-panel.compact-vehicle .details-grid{
    grid-template-columns: repeat(4, minmax(140px, 1fr)) !important;
    gap: 10px !important;
}

.details-panel.compact-vehicle .details-item{
    padding: 10px 12px !important;
    border-radius: 14px !important;
    min-height: 64px !important;
}

.details-panel.compact-vehicle .details-item-label{
    font-size: 10px !important;
    margin-bottom: 4px !important;
}

.details-panel.compact-vehicle .details-item-value{
    font-size: 15px !important;
    font-weight: 400 !important;
}

.details-panel.compact-vehicle .details-section{
    margin-top: 12px !important;
    padding-top: 10px !important;
}

/* RESPONSIVE */
@media (max-width: 1100px){
    .details-panel.compact-vehicle .details-grid{
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 700px){
    .details-panel.compact-vehicle .details-grid{
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* RIMUOVE GRASSETTO DETTAGLI VEICOLO */

.details-panel .details-item-value{
    font-weight: 500 !important;
}

.details-panel .details-item-value{
    font-weight: 500 !important;
    color: #1e293b !important;
}

.details-panel .details-item-label{
    font-weight: 600 !important;
    color: #64748b !important;
}

/* LABEL leggere */
.vehicle-details-row .details-item-label{
    font-weight: 500 !important;
    color: #64748b !important;
}

/* VALORI normali */
.vehicle-details-row .details-item-value{
    font-weight: 400 !important;
    color: #0f172a !important;
}

/* LABEL leggere */
.details-grid div{
    font-weight: 400 !important;
    color: #1e293b;
}

/* SOLO numeri importanti evidenziati */
.details-grid div:has(span),
.details-grid div:has(.value){
    font-weight: 600 !important;
}

.metric-card{
    font-weight: 400 !important;
}


.finance-chart-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 28px;
    padding: 24px;
    box-shadow: var(--shadow-soft);
    min-height: 430px;
}

.finance-chart-wrap {
    height: 340px;
    margin-top: 18px;
}

.cost-card-link {
    text-decoration: none;
    color: inherit;
}

.cost-card-link:hover {
    transform: translateY(-2px);
}



.finance-monthly-chart-wrap {
    height: 360px;
    margin-top: 20px;
}



.ceo-dashboard-grid{
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
}

.ceo-kpi-column{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.ceo-kpi-column .metric-card{
    margin-bottom: 0 !important;
}

.ceo-chart-box{
    min-height: 520px;
}

.ceo-chart-wrap{
    height: 420px;
    margin-top: 18px;
}

@media (max-width: 1100px){
    .ceo-dashboard-grid{
        grid-template-columns: 1fr;
    }
}

/* ===== COSTI FLOTTA - LAYOUT COMPATTO ===== */



.finance-chart-panel{
    min-height: 420px;
    padding: 22px !important;
}

.finance-chart-wrap{
    height: 300px !important;
}



/* ===== ACCORDION COSTI FLOTTA ===== */

.fleet-accordion{
    overflow: hidden;
}

/* KPI dimensioni corrette enterprise */
.metric-card{
    padding: 16px 18px !important;
    min-height: 90px;
}

.metric-value{
    font-size: 22px;
    font-weight: 500;
}

.metric-label{
    font-size: 11px;
    color: var(--text-muted);
}

.metric-note{
    font-size: 12px;
    color: var(--text-muted);
}

/* =========================================================
   COSTI FLOTTA - UI DEFINITIVA PULITA
========================================================= */

.finance-center-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:18px;
    align-items:stretch;
    margin-top:18px;
}

.finance-kpi-column{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

.finance-kpi-column .metric-card{
    min-height:78px !important;
    padding:14px 16px !important;
}

.finance-kpi-column .metric-label,
.finance-kpi-strip .metric-label{
    font-size:10px !important;
    letter-spacing:.08em;
    font-weight:500;
    color:#64748b;
}

.finance-kpi-column .metric-value,
.finance-kpi-strip .metric-value{
    font-size:22px !important;
    line-height:1.1;
    font-weight:500 !important;
}

.finance-kpi-column .metric-note,
.finance-kpi-strip .metric-note{
    font-size:11px !important;
    color:#64748b;
}

.finance-chart-panel{
    min-height:360px !important;
    padding:20px !important;
}

.finance-chart-wrap{
    height:260px !important;
}

.finance-kpi-strip{
    display:grid;
    grid-template-columns:repeat(4, minmax(160px, 1fr));
    gap:12px;
    margin-top:16px;
}

.finance-kpi-strip .metric-card{
    min-height:78px !important;
    padding:14px 16px !important;
}

.chart-box{
    padding:18px !important;
}

.finance-monthly-chart-wrap{
    height:300px !important;
}

/* Accordion tabelle grigio professionale */
.fleet-accordion{
    background:#ffffff;
    border:1px solid #e5e7eb;
    border-radius:18px;
    padding:12px;
    margin-top:16px;
    box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.fleet-accordion-header{
    width:100%;
    border:0;
    background:#f1f5f9 !important;
    color:#334155 !important;
    border-radius:14px;
    padding:13px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    font-size:15px !important;
    font-weight:500;
    cursor:pointer;
}

.fleet-accordion-header:hover{
    background:#e2e8f0 !important;
}

.fleet-accordion-arrow{
    width:30px;
    height:30px;
    border-radius:10px;
    background:#ffffff !important;
    border:1px solid #cbd5e1;
    color:#334155 !important;
    display:flex;
    align-items:center;
    justify-content:center;
}

.fleet-accordion-body{
    display:none;
    margin-top:14px;
}

.fleet-accordion-body.open{
    display:block;
}

@media(max-width:1100px){
    .finance-center-layout{
        grid-template-columns:1fr;
    }

    .finance-kpi-strip{
        grid-template-columns:repeat(2, 1fr);
    }
}

/* SPAZIO TRA KPI E GRAFICO MENSILE */
.finance-kpi-strip{
    margin-bottom: 34px !important;
}

.chart-grid{
    margin-top: 34px !important;
}

.chart-box{
    padding: 26px !important;
    border-radius: 24px !important;
}

/* =========================================================
   FIX DEFINITIVO DETTAGLIO VEICOLI - COSTI / DOCUMENTI / FOTO
   INCOLLARE IN FONDO A style.css
========================================================= */

.vehicle-cost-form,
.cost-premium-box{
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 24px rgba(15,23,42,.06) !important;
    padding: 18px !important;
}

.vehicle-cost-form *,
.cost-premium-box *,
.details-panel *,
.details-section *,
.doc-links *,
.photo-grid *,
.table-scroll *{
    color: #111827 !important;
    opacity: 1 !important;
}

.vehicle-cost-form label,
.cost-premium-box label{
    color: #334155 !important;
    font-weight: 600 !important;
}

.vehicle-cost-form input,
.vehicle-cost-form select,
.vehicle-cost-form textarea,
.cost-premium-box input,
.cost-premium-box select,
.cost-premium-box textarea{
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #cbd5e1 !important;
}

.vehicle-cost-form input::placeholder,
.vehicle-cost-form textarea::placeholder,
.cost-premium-box input::placeholder,
.cost-premium-box textarea::placeholder{
    color: #64748b !important;
    opacity: 1 !important;
}

.doc-link,
.file-link{
    background: #f8fafc !important;
    color: #1d4ed8 !important;
    border: 1px solid #cbd5e1 !important;
}

.photo-card span,
.vehicle-photo-label{
    color: #111827 !important;
    opacity: 1 !important;
}

.fleet-accordion-title{
    display:flex;
    align-items:center;
    gap:12px;
}

.fleet-accordion-total{
    font-size:12px;
    color:#64748b;
    background:#f1f5f9;
    padding:5px 11px;
    border-radius:999px;
}

.fleet-accordion-total strong{
    color:#0f172a;
    font-weight:700;
}

/* =========================================================
   DETTAGLIO TESSERE CARBURANTE - COME DETTAGLI VEICOLI
========================================================= */

.details-panel.compact-vehicle{
    padding:14px 16px !important;
    border-radius:18px !important;
    background:#ffffff !important;
    border:1px solid #e2e8f0 !important;
    box-shadow:0 10px 26px rgba(15,23,42,.05) !important;
}

.details-panel.compact-vehicle .details-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(140px,1fr)) !important;
    gap:10px !important;
}

.details-panel.compact-vehicle .details-item{
    padding:11px 12px !important;
    border-radius:14px !important;
    min-height:64px !important;
    background:#f8fafc !important;
    border:1px solid #e2e8f0 !important;
}

.details-panel.compact-vehicle .details-item-label{
    font-size:10px !important;
    font-weight:700 !important;
    letter-spacing:.06em !important;
    text-transform:uppercase !important;
    color:#334155 !important;
    margin-bottom:5px !important;
}

.details-panel.compact-vehicle .details-item-value{
    font-size:15px !important;
    font-weight:500 !important;
    color:#0f172a !important;
}

.details-panel.compact-vehicle .details-section{
    margin-top:14px !important;
    padding-top:12px !important;
    border-top:1px solid #e2e8f0 !important;
}

.details-panel.compact-vehicle .details-section h3{
    font-size:15px !important;
    font-weight:600 !important;
    margin:0 0 10px 0 !important;
    color:#0f172a !important;
}

.details-panel.compact-vehicle .detail-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
}

.details-panel.compact-vehicle .btn{
    min-height:36px !important;
    padding:8px 13px !important;
    border-radius:11px !important;
    font-size:12px !important;
}

@media(max-width:1100px){
    .details-panel.compact-vehicle .details-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:650px){
    .details-panel.compact-vehicle .details-grid{
        grid-template-columns:1fr !important;
    }
}

#gpsMap{
    width:100%;
    height:700px;
    border-radius:22px;
    overflow:hidden;
    margin-top:18px;
    border:1px solid rgba(255,255,255,0.08);
}

/* GPS LIVE - MAPPA FULL WIDTH */

.gps-kpi-grid{
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

.gps-kpi-grid .metric-card{
    min-height: 90px !important;
}

.gps-map-box{
    width: 100% !important;
    padding: 20px !important;
    margin-bottom: 22px !important;
}

#gpsMap{
    width: 100% !important;
    height: 620px !important;
    min-height: 620px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid #dbe4f0 !important;
    background: #f1f5f9 !important;
}

@media(max-width: 900px){
    .gps-kpi-grid{
        grid-template-columns: 1fr !important;
    }

    #gpsMap{
        height: 480px !important;
        min-height: 480px !important;
    }
}

.gps-map-box{
    width: 100% !important;
    padding: 20px !important;
    margin-bottom: 22px !important;
}

#gpsMap{
    width: 100% !important;
    height: 620px !important;
    min-height: 620px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid #dbe4f0 !important;
    background: #f1f5f9 !important;
}

.leaflet-container{
    font-family: "Poppins", sans-serif !important;
}

@media(max-width: 900px){
    #gpsMap{
        height: 480px !important;
        min-height: 480px !important;
    }
}

/* GPS ENTERPRISE MARKERS */

.gps-marker{
    background: transparent !important;
    border: none !important;
}

.gps-marker-pin{
    width: 34px;
    height: 34px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 10px 24px rgba(15,23,42,.28);
    border: 3px solid #ffffff;
    position: relative;
}

.gps-marker-pin span{
    position: absolute;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    top: 9px;
    left: 9px;
}

.gps-popup{
    min-width: 260px;
    font-family: "Poppins", sans-serif;
}

.gps-popup-title{
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 2px;
}

.gps-popup-subtitle{
    font-size: 12px;
    color: #64748b;
    margin-bottom: 12px;
}

.gps-popup-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.gps-popup-grid div{
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px;
}

.gps-popup-grid span{
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    color: #64748b;
    margin-bottom: 3px;
}

.gps-popup-grid strong{
    font-size: 12px;
    color: #0f172a;
}

.gps-popup-footer{
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    color: #64748b;
}

.gps-online{
    color: #16a34a !important;
}

.gps-offline{
    color: #dc2626 !important;
}

/* GPS LIVE - KPI SOTTO MAPPA COMPATTI */

.gps-map-box{
    margin-bottom: 16px !important;
}

#gpsMap{
    height: 560px !important;
    min-height: 560px !important;
}

.gps-kpi-under-map{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
}

.gps-kpi-under-map .metric-card{
    min-height: 78px !important;
    height: 78px !important;
    padding: 11px 14px !important;
    border-radius: 16px !important;
    gap: 4px !important;
}

.gps-kpi-under-map .metric-label{
    font-size: 9px !important;
    line-height: 1.1 !important;
}

.gps-kpi-under-map .metric-value{
    font-size: 20px !important;
    line-height: 1 !important;
}

.gps-kpi-under-map .metric-note{
    font-size: 10px !important;
    line-height: 1.15 !important;
}

@media(max-width: 1200px){
    .gps-kpi-under-map{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media(max-width: 700px){
    .gps-kpi-under-map{
        grid-template-columns: 1fr !important;
    }

    #gpsMap{
        height: 460px !important;
        min-height: 460px !important;
    }
}

/* GPS LIVE LIST ENTERPRISE */

.gps-live-list-box{
    margin-top: 18px !important;
}

.gps-live-list-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.gps-live-list-header h2{
    margin: 0;
    font-size: 22px;
    font-weight: 700;
}

.gps-live-list-header p{
    margin: 4px 0 0;
    color: #64748b;
    font-size: 13px;
}

.gps-live-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.gps-live-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 20px;
    border: 1px solid #e2e8f0;
    background: #ffffff;
    transition: .2s ease;
}

.gps-live-row:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(15,23,42,.08);
}

.gps-live-row-left{
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 220px;
}

.gps-live-status{
    width: 14px;
    height: 14px;
    border-radius: 50%;
    font-size: 0;
}

.gps-live-status.online{
    background: #16a34a;
    box-shadow: 0 0 0 6px rgba(22,163,74,.15);
}

.gps-live-status.offline{
    background: #dc2626;
    box-shadow: 0 0 0 6px rgba(220,38,38,.12);
}

.gps-live-targa{
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.gps-live-sub{
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.gps-live-center{
    display: flex;
    align-items: center;
    gap: 24px;
    flex: 1;
}

.gps-live-info{
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.gps-live-info span{
    font-size: 10px;
    text-transform: uppercase;
    color: #64748b;
}

.gps-live-info strong{
    font-size: 13px;
    color: #0f172a;
}

.gps-live-row-right{
    display: flex;
    align-items: center;
    gap: 14px;
}

.gps-live-update{
    font-size: 12px;
    color: #64748b;
}

.gps-center-btn{
    border: none;
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    color: white;
    padding: 10px 14px;
    border-radius: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: .2s ease;
}

.gps-center-btn:hover{
    transform: translateY(-1px);
    box-shadow: 0 10px 20px rgba(37,99,235,.25);
}

.gps-empty-state{
    padding: 40px;
    text-align: center;
    color: #64748b;
}

@media(max-width: 1100px){

    .gps-live-row{
        flex-direction: column;
        align-items: flex-start;
    }

    .gps-live-center{
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 14px;
    }

    .gps-live-row-right{
        width: 100%;
        justify-content: space-between;
    }
}

/* GPS LIVE - LAYOUT ORDINATO COMPATTO */

.gps-map-box{
    margin-bottom: 14px !important;
    padding: 18px !important;
}

#gpsMap{
    height: 520px !important;
    min-height: 520px !important;
}

.gps-compact-kpi-row{
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 14px 0 !important;
}

.gps-compact-kpi-row .metric-card{
    min-height: 64px !important;
    height: 64px !important;
    padding: 9px 12px !important;
    border-radius: 14px !important;
    gap: 2px !important;
    justify-content: center !important;
}

.gps-compact-kpi-row .metric-label{
    font-size: 8.5px !important;
    line-height: 1 !important;
}

.gps-compact-kpi-row .metric-value{
    font-size: 18px !important;
    line-height: 1 !important;
}

.gps-compact-kpi-row .metric-note{
    font-size: 9px !important;
    line-height: 1.1 !important;
}

.gps-live-list-box{
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    padding: 16px !important;
}

.gps-live-list-header{
    margin-bottom: 10px !important;
}

.gps-live-list-header h2{
    font-size: 18px !important;
    margin: 0 !important;
}

.gps-live-list-header p{
    font-size: 11px !important;
    margin: 3px 0 0 !important;
}

.gps-live-row{
    padding: 10px 12px !important;
    border-radius: 14px !important;
    gap: 12px !important;
}

@media(max-width: 1200px){
    .gps-compact-kpi-row{
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media(max-width: 700px){
    .gps-compact-kpi-row{
        grid-template-columns: 1fr !important;
    }

    #gpsMap{
        height: 440px !important;
        min-height: 440px !important;
    }
}

.form-actions{
    display:flex;
    gap:12px;
    margin-top:22px;
    align-items:center;
}

/* GPS STORICO PERCORSO */

.gps-history-filter-box{
    margin-bottom: 16px !important;
}

.gps-history-map-box{
    padding: 18px !important;
    margin-bottom: 14px !important;
}

.gps-history-toolbar{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 14px;
}

.gps-history-toolbar h2{
    margin: 0 !important;
    font-size: 20px !important;
}

.gps-history-toolbar p{
    margin: 4px 0 0 !important;
    color: #64748b !important;
    font-size: 12px !important;
}

#gpsHistoryMap{
    width: 100% !important;
    height: 540px !important;
    min-height: 540px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    border: 1px solid #dbe4f0 !important;
    background: #f1f5f9 !important;
}

.gps-history-kpi-row{
    margin-bottom: 18px !important;
}

@media(max-width: 800px){
    #gpsHistoryMap{
        height: 440px !important;
        min-height: 440px !important;
    }
}