/* Vozilo24 UI V5 — shared visual layer for legacy HTML modules */
:root{
 --v24-bg:#07111f;--v24-bg2:#0a1627;--v24-panel:#0d1b2e;--v24-panel2:#10223a;
 --v24-line:#1b3657;--v24-line2:#24496f;--v24-text:#eef6ff;--v24-muted:#7f98b7;
 --v24-blue:#2f81f7;--v24-blue2:#4ea1ff;--v24-cyan:#37c7ff;--v24-red:#f0445d;
 --v24-green:#2dd4a0;--v24-orange:#ffb020;--v24-purple:#9b7cff;
 --v24-shadow:0 18px 55px rgba(0,0,0,.28);--v24-radius:16px;--v24-radius-sm:11px;
}
:root[data-theme="light"]{
 --v24-bg:#eef4f9;--v24-bg2:#e8f0f7;--v24-panel:#ffffff;--v24-panel2:#f7faff;
 --v24-line:#d7e2ee;--v24-line2:#c4d6e8;--v24-text:#10233b;--v24-muted:#637b96;
 --v24-shadow:0 14px 38px rgba(37,63,91,.10);
}
html,body{background:linear-gradient(145deg,var(--v24-bg),var(--v24-bg2))!important;color:var(--v24-text)!important}
body{font-family:'Barlow',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif!important}
header,.header,.page-header{background:rgba(9,23,40,.92)!important;border-bottom:1px solid var(--v24-line)!important;box-shadow:0 8px 28px rgba(0,0,0,.18)!important;backdrop-filter:blur(16px)}
:root[data-theme="light"] header,:root[data-theme="light"] .header,:root[data-theme="light"] .page-header{background:rgba(255,255,255,.94)!important}
.logo-icon,.h-logo-icon{background:linear-gradient(135deg,#1467df,#0a3f9d)!important;border-radius:10px!important;box-shadow:0 8px 22px rgba(47,129,247,.28)!important}
.header-title,.h-logo-text,.page-header h1{color:var(--v24-text)!important;letter-spacing:.2px!important}.header-sub,.subtitle,.last-update{color:var(--v24-muted)!important}
.container{max-width:1480px!important;padding:22px 24px 70px!important}
.card,.vehicle-card,.stat-box,.summary-card,.sum-card,.health-card,.user-card,.vehicle-info-box,.route-result,.create-panel,.zones-sidebar,.controls,.panel,.detail-panel,.list-panel{
 background:linear-gradient(180deg,var(--v24-panel),rgba(13,27,46,.96))!important;border:1px solid var(--v24-line)!important;border-radius:var(--v24-radius)!important;box-shadow:var(--v24-shadow)!important
}
:root[data-theme="light"] .card,:root[data-theme="light"] .vehicle-card,:root[data-theme="light"] .stat-box,:root[data-theme="light"] .summary-card,:root[data-theme="light"] .sum-card,:root[data-theme="light"] .health-card,:root[data-theme="light"] .user-card,:root[data-theme="light"] .vehicle-info-box,:root[data-theme="light"] .route-result,:root[data-theme="light"] .create-panel,:root[data-theme="light"] .zones-sidebar,:root[data-theme="light"] .controls,:root[data-theme="light"] .panel,:root[data-theme="light"] .detail-panel,:root[data-theme="light"] .list-panel{background:var(--v24-panel)!important}
.card-header,.sidebar-header,.sidebar-head,.detail-header{background:linear-gradient(180deg,rgba(255,255,255,.035),transparent)!important;border-color:var(--v24-line)!important}
.card-tag,.section-label,.vc-section-title,.health-card-title,.route-stat-label,.stat-label{color:var(--v24-muted)!important;text-transform:uppercase;letter-spacing:.08em!important;font-size:11px!important}
.card:hover,.vehicle-card:hover,.summary-card:hover,.health-card:hover{border-color:var(--v24-line2)!important;transform:translateY(-1px);transition:.18s ease}
.stats-grid,.summary-cards,.summary-row,.health-grid{gap:12px!important}.stats-grid .stat-box,.summary-card,.sum-card,.health-card{position:relative;overflow:hidden}
.stats-grid .stat-box:before,.summary-card:before,.sum-card:before,.health-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--v24-blue2),var(--v24-cyan));opacity:.9}
.stat-val,.route-stat-val,.health-card-value,.summary-card .val{color:var(--v24-text)!important;font-weight:700!important}
input,select,textarea,.field,.search-input,.date-input,.stop-input,.company-input,.vehicle-select,.veh-btn{
 background:#09182a!important;color:var(--v24-text)!important;border:1px solid var(--v24-line)!important;border-radius:10px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.02)!important
}
:root[data-theme="light"] input,:root[data-theme="light"] select,:root[data-theme="light"] textarea,:root[data-theme="light"] .field,:root[data-theme="light"] .search-input,:root[data-theme="light"] .date-input,:root[data-theme="light"] .stop-input,:root[data-theme="light"] .company-input,:root[data-theme="light"] .vehicle-select,:root[data-theme="light"] .veh-btn{background:#fff!important}
input:focus,select:focus,textarea:focus,.field:focus,.search-input:focus,.date-input:focus,.stop-input:focus{outline:none!important;border-color:var(--v24-blue)!important;box-shadow:0 0 0 3px rgba(47,129,247,.14)!important}
.btn,.btn-primary,.btn-run,.btn-new,.btn-save-zone,.btn-pdf,.btn-back,.btn-ghost,.btn-mini,.filter-btn,.draw-btn,.tab,.tab-btn,.dtab{
 border-radius:10px!important;font-weight:600!important;transition:.16s ease!important
}
.btn-primary,.btn-run,.btn-new,.btn-save-zone{background:linear-gradient(135deg,#2f81f7,#1765cf)!important;border:1px solid #4a98ff!important;color:#fff!important;box-shadow:0 8px 24px rgba(47,129,247,.22)!important}
.btn-primary:hover,.btn-run:hover,.btn-new:hover,.btn-save-zone:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-outline,.btn-ghost,.btn-mini,.filter-btn,.draw-btn,.btn-back{background:rgba(255,255,255,.025)!important;border:1px solid var(--v24-line)!important;color:var(--v24-muted)!important}
.btn-outline:hover,.btn-ghost:hover,.btn-mini:hover,.filter-btn:hover,.draw-btn:hover,.btn-back:hover{border-color:var(--v24-blue)!important;color:var(--v24-text)!important;background:rgba(47,129,247,.10)!important}
.filter-btn.active,.tab.active,.tab-btn.active,.dtab.active{background:rgba(47,129,247,.14)!important;border-color:rgba(78,161,255,.58)!important;color:#74b6ff!important}
.count-badge,.header-badge,.h-badge{background:rgba(47,129,247,.12)!important;color:#7db9ff!important;border:1px solid rgba(47,129,247,.25)!important;border-radius:999px!important}
.alert,.error-msg{border-radius:12px!important;border:1px solid rgba(240,68,93,.28)!important;background:rgba(240,68,93,.08)!important}.note{border-radius:12px!important;background:rgba(47,129,247,.07)!important;border-color:rgba(47,129,247,.2)!important}
.progress-bg{background:#07111f!important;border:1px solid var(--v24-line)!important;border-radius:999px!important;overflow:hidden}.progress-fill{background:linear-gradient(90deg,var(--v24-blue),var(--v24-cyan))!important;border-radius:999px!important}
.steps,.toolbar,.filter-bar,.rcontrols,.health-toolbar{background:rgba(8,21,37,.55)!important;border:1px solid var(--v24-line)!important;border-radius:14px!important;padding:10px!important}
:root[data-theme="light"] .steps,:root[data-theme="light"] .toolbar,:root[data-theme="light"] .filter-bar,:root[data-theme="light"] .rcontrols,:root[data-theme="light"] .health-toolbar{background:rgba(255,255,255,.7)!important}
.step.active .step-num,.step-item.active .step-dot{background:linear-gradient(135deg,var(--v24-blue),var(--v24-cyan))!important;box-shadow:0 0 0 5px rgba(47,129,247,.10)!important}
/* Realtime */
.vehicles-grid{gap:14px!important}.vehicle-card{padding:0!important;overflow:hidden!important}.vc-header{padding:14px 16px!important;background:linear-gradient(90deg,rgba(47,129,247,.08),transparent)!important;border-bottom:1px solid var(--v24-line)!important}.vc-body{padding:14px 16px!important}.activity-badge{border-radius:999px!important;padding:5px 9px!important}.driver-card{background:rgba(255,255,255,.025)!important;border:1px solid var(--v24-line)!important;border-radius:11px!important}
/* Wizard/report pages */
.device-grid{gap:10px!important}.device-item,.device-card,.veh-row,.device-row{border-radius:11px!important;border:1px solid var(--v24-line)!important;background:rgba(255,255,255,.02)!important}.vtabs,.tabs-row,.tabs{gap:6px!important;border-color:var(--v24-line)!important}
/* Routing */
.routing-v24 .sidebar,.app>.sidebar{background:linear-gradient(180deg,#09192c,#071321)!important;border-right:1px solid var(--v24-line)!important;box-shadow:18px 0 45px rgba(0,0,0,.2)!important}.sidebar-title{font-size:22px!important;color:var(--v24-text)!important}.sidebar-sub{color:var(--v24-muted)!important}.stops-list{gap:10px!important}.stop-input-wrap{background:rgba(255,255,255,.02)!important;border-radius:12px!important}.route-stats{gap:10px!important}.route-stat{background:rgba(47,129,247,.06)!important;border:1px solid var(--v24-line)!important;border-radius:12px!important}
:root[data-theme="light"] .routing-v24 .sidebar,:root[data-theme="light"] .app>.sidebar{background:linear-gradient(180deg,#f8fbff,#eef4fb)!important;border-right-color:#d7e0ec!important;box-shadow:12px 0 32px rgba(30,64,105,.10)!important}
:root[data-theme="light"] .stop-input-wrap{background:rgba(47,129,247,.035)!important}
:root[data-theme="light"] .route-stat{background:#f5f9ff!important;border-color:#d7e0ec!important}
:root[data-theme="light"] .sidebar-header{background:linear-gradient(180deg,#fff,#f7faff)!important}
:root[data-theme="light"] .sidebar-title{color:#17243a!important}
:root[data-theme="light"] .sidebar-sub,:root[data-theme="light"] .section-label{color:#66768e!important}
#map,#map-zones,#map-route{background:#07111f!important}
.leaflet-control-zoom a,.leaflet-control-layers{background:var(--v24-panel)!important;color:var(--v24-text)!important;border-color:var(--v24-line)!important}
/* Geofence */
.zones-sidebar{border-radius:0!important;box-shadow:12px 0 35px rgba(0,0,0,.18)!important}.zone-item{border:1px solid transparent!important;border-radius:11px!important}.zone-item:hover{background:rgba(47,129,247,.08)!important;border-color:var(--v24-line)!important}.create-panel{margin:12px!important}.color-row{gap:8px!important}
/* Notifications */
.toggle-row{padding:14px 0!important;border-color:var(--v24-line)!important}.sub-section{background:rgba(47,129,247,.035)!important;border:1px solid var(--v24-line)!important;border-radius:12px!important}.device-list{border-radius:12px!important;border-color:var(--v24-line)!important}.device-row{padding:10px 12px!important}
/* Traccar reports */
.body-wrap{padding:18px!important;gap:14px!important}.controls{padding:14px!important}.content-area{background:transparent!important}.panel{padding:14px!important}.veh-panel{background:var(--v24-panel)!important;border:1px solid var(--v24-line)!important;border-radius:12px!important;box-shadow:var(--v24-shadow)!important}
/* Admin */
.main{padding:22px!important}.page-title{font-size:24px!important}.users-grid{gap:14px!important}.user-card{padding:16px!important}.audit-table-wrap{border:1px solid var(--v24-line)!important;border-radius:14px!important;overflow:hidden!important}.audit-table th{background:rgba(47,129,247,.06)!important;color:var(--v24-muted)!important}.audit-table td,.audit-table th{border-color:var(--v24-line)!important}
/* DDD analysis */
.toolbar{margin:10px 12px!important}.main{gap:12px!important;padding:0 12px 12px!important}.list-panel,.detail-panel{overflow:hidden!important}.driver-card{border:1px solid transparent!important;border-radius:12px!important}.driver-card:hover,.driver-card.active{background:rgba(47,129,247,.08)!important;border-color:var(--v24-line2)!important}.dc-avatar{border-radius:12px!important}.dc-score,.dh-score-big{background:rgba(47,129,247,.06)!important;border:1px solid var(--v24-line)!important;border-radius:12px!important}.summary-grid{gap:10px!important}.summary-grid .stat-box{box-shadow:none!important}
/* tables */
table{border-collapse:separate!important;border-spacing:0!important}thead th{background:rgba(47,129,247,.055)!important;color:var(--v24-muted)!important;border-color:var(--v24-line)!important}tbody td{border-color:var(--v24-line)!important}tbody tr:hover td{background:rgba(47,129,247,.045)!important}
/* responsive */
@media(max-width:900px){.container{padding:14px 12px 80px!important}.stats-grid,.summary-cards,.summary-row,.health-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.body-wrap{padding:10px!important}.main{padding:10px!important}.routing-v24 .sidebar,.app>.sidebar{width:320px!important}}
@media(max-width:700px){header,.header,.page-header{height:54px!important;padding:0 12px!important}.container{padding:12px 10px 82px!important}.card,.vehicle-card,.stat-box,.summary-card,.health-card{border-radius:13px!important}.stats-grid,.summary-cards,.summary-row,.health-grid{grid-template-columns:1fr 1fr!important;gap:8px!important}.steps{overflow-x:auto!important;justify-content:flex-start!important}.step-label{white-space:nowrap!important}.filter-bar,.toolbar,.rcontrols{border-radius:12px!important}.routing-v24 .sidebar,.app>.sidebar{width:100%!important}.main{padding:6px!important;gap:6px!important}.list-panel,.detail-panel{border-radius:12px!important}.body-wrap{padding:6px!important}}