:root{ --bg:#F3F6F8;--surface:#FFFFFF;--surface-2:#F8FAFC;--surface-3:#EEF3F6; --ink:#102A3E;--muted:#6B7D8D;--soft:#8C9AA7;--line:#DCE5EB; --navy:#183B57;--navy-2:#0E283B;--blue:#2B6CB0;--gold:#D6AA45; --green:#14965F;--red:#D4434B;--amber:#D58A08;--purple:#7C3AED;--cyan:#0EA5E9; --shadow-sm:0 1px 2px rgba(14,40,59,.04);--shadow:0 8px 26px rgba(14,40,59,.07); --radius:12px;--radius-sm:8px;--header-h:58px } *{box-sizing:border-box} html,body{margin:0;min-height:100%;font-family:Inter,"Segoe UI","Noto Sans Arabic",Tahoma,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14px} body{overflow-x:hidden} button,input,select,textarea{font:inherit} button{color:inherit} .hidden{display:none!important} [hidden]{display:none!important} .app-shell{min-height:100vh} .st-icon{display:block;flex:none} .eyebrow{display:inline-block;color:#708394;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px} /* Embedded top navigation: no duplicate brand logo */ .topbar{position:sticky;top:0;z-index:60;min-height:var(--header-h);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(14px)} .main-nav{display:flex;align-items:center;gap:3px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:2px} .main-nav::-webkit-scrollbar{display:none} .nav-btn{display:inline-flex;align-items:center;gap:7px;border:0;background:transparent;color:#607487;padding:9px 10px;border-radius:9px;white-space:nowrap;cursor:pointer;font-weight:700;font-size:12px;transition:.15s ease} .nav-btn:hover{background:#F1F5F8;color:var(--navy)} .nav-btn.active{background:#EAF1F5;color:var(--navy);box-shadow:inset 0 -2px 0 var(--gold)} .nav-btn svg{width:16px;height:16px} .top-actions{display:flex;align-items:center;gap:7px;flex:none} .period-control{display:flex;align-items:center;gap:3px;flex-wrap:nowrap} .period-btn,.icon-btn,.lang-switch button,.soft-btn,.primary-btn,.danger-btn,.export-btn{border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;transition:.15s ease} .period-btn{padding:7px 8px;font-size:12px;color:#607487} .period-btn:hover,.soft-btn:hover,.icon-btn:hover,.export-btn:hover{background:#F3F7F9;border-color:#CBD7DE} .period-btn.active{background:var(--navy);border-color:var(--navy);color:#fff} .icon-btn{width:34px;height:34px;display:grid;place-items:center;color:#5D7183} .lang-switch{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff} .lang-switch button{border:0;border-radius:0;padding:7px 8px;font-size:12px;color:#728393;background:transparent} .lang-switch button.active{background:#EAF1F5;color:var(--navy);font-weight:800} .select{height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 9px;color:var(--ink);outline:none;min-width:0} .select:focus,input:focus,textarea:focus{border-color:#9CB4C4;box-shadow:0 0 0 3px rgba(43,108,176,.08)} .primary-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--navy);border-color:var(--navy);color:#fff;padding:8px 11px;font-size:12px;font-weight:800} .primary-btn:hover{background:var(--navy-2)} .primary-btn:disabled{opacity:.55;cursor:wait} .soft-btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 9px;font-size:12px;color:#536A7D} .soft-btn.active{background:#EAF1F5;border-color:#BFD0DB;color:var(--navy)} .danger-btn{background:#fff;color:var(--red);border-color:#F2C8CB;padding:8px 10px} /* Page structure */ .page-root{padding:16px 18px 42px;max-width:1920px;margin:0 auto} .page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:2px 0 13px} .page-head h1{font-size:22px;line-height:1.2;margin:0;font-weight:800;letter-spacing:-.02em} .page-head p{margin:4px 0 0;color:var(--muted);font-size:12px} .dashboard-head{align-items:center} .head-analytics-link{display:inline-flex;align-items:center;gap:6px;border:1px solid #CBD8E1;background:#fff;color:var(--navy);border-radius:8px;padding:8px 11px;font-weight:800;font-size:12px;cursor:pointer} .head-analytics-link:hover{background:#F2F7F9} .session-state{margin:12px 18px;padding:13px 14px;border-radius:10px;background:#FFF8E8;border:1px solid #F0D79A;color:#805C13;font-weight:700} .loading-state{display:grid;place-items:center;min-height:300px;color:var(--muted);text-align:center} .spinner{width:28px;height:28px;border:3px solid #E3EAF0;border-top-color:var(--navy);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 9px} @keyframes spin{to{transform:rotate(360deg)}} .empty-chart{min-height:150px;display:grid;place-items:center;color:#96A4B0;font-size:12px;text-align:center} .empty-state-compact{min-height:96px;display:flex;align-items:center;justify-content:center;gap:8px;color:#7E8F9D;font-size:12px;text-align:center;padding:16px} .analysis-warning{margin-top:8px;border:1px solid #F2D3D5;background:#FFF5F5;color:#A33238;border-radius:8px;padding:8px 10px;font-size:12px} /* KPI system */ .kpi-grid{display:grid;grid-template-columns:repeat(8,minmax(120px,1fr));gap:8px;margin-bottom:10px} .kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px;min-height:82px;display:flex;align-items:center;gap:9px;box-shadow:var(--shadow-sm)} .kpi-icon{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;flex:none;background:#EEF3F6;color:var(--navy)} .kpi-card .meta{min-width:0} .kpi-card span{display:block;color:#6E8191;font-size:12px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kpi-card b{display:block;font-size:21px;line-height:1.15;margin-top:2px;color:var(--navy-2)} .kpi-card small{display:block;color:#97A4AF;font-size:12px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tone-green .kpi-icon{background:#EAF7F0;color:var(--green)} .tone-red .kpi-icon{background:#FDEFF0;color:var(--red)} .tone-amber .kpi-icon{background:#FFF6E3;color:var(--amber)} .tone-purple .kpi-icon{background:#F2EDFF;color:var(--purple)} .tone-cyan .kpi-icon{background:#EAF8FC;color:#148AA7} .tone-slate .kpi-icon{background:#EEF2F5;color:#627486} /* Panels and dashboard */ .dashboard-grid,.analytics-layout{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:10px} .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm);min-width:0;overflow:hidden} .panel-head{display:flex;justify-content:space-between;align-items:flex-start;padding:11px 12px 9px;border-bottom:1px solid #E8EEF2} .panel-head h2{font-size:12px;margin:0;font-weight:800;color:#1A354A} .panel-head small{display:block;color:#8A9AA7;font-size:12px;margin-top:3px} .panel-body{padding:11px 12px} .no-pad{padding:0!important} .span-2{grid-column:span 2} .span-3{grid-column:span 3} .dashboard-map-panel{grid-row:span 2} .attention-panel .panel-body{max-height:430px;overflow:auto} .map-toolbar{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px} .map-mode-group{display:flex;gap:4px} .live-indicator{display:inline-flex;align-items:center;gap:5px;color:#65808F;font-size:12px;font-weight:700} .live-indicator i{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(20,150,95,.10)} .map-shell{height:420px;border-radius:9px;overflow:hidden;border:1px solid #DCE5EA;background:#E9EFF3} .map-shell-dashboard{height:520px} .map-error{height:100%;display:grid;place-content:center;text-align:center;gap:6px;color:#617285;background:linear-gradient(135deg,#F8FAFB,#EEF3F6)} .map-error strong{color:var(--navy);font-size:13px} .map-error span{font-size:12px;max-width:520px} .map-popup{font:11px/1.45 "Segoe UI","Noto Sans Arabic",Arial,sans-serif;min-width:190px;color:#1F3445} .map-popup b{font-size:12px}.map-popup small{display:block;color:#82919D}.map-popup a{color:var(--blue);font-weight:800;text-decoration:none} /* Charts */ .hbar-chart{display:flex;flex-direction:column;gap:8px} .hbar-row{display:grid;grid-template-columns:minmax(92px,150px) 1fr 44px;gap:7px;align-items:center} .hbar-label{display:flex;align-items:center;gap:6px;font-size:12px;color:#566B7D;min-width:0} .hbar-label span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dot{width:7px;height:7px;border-radius:50%;flex:none} .hbar-track{height:7px;background:#EDF2F5;border-radius:7px;overflow:hidden} .hbar-track i{display:block;height:100%;border-radius:7px} .hbar-row b{font-size:12px;text-align:end} .line-chart{width:100%;height:190px;overflow:visible} .line-chart .axis{stroke:#DFE7EC;stroke-width:1} .line-chart text{font-size:12px;fill:#8797A4} .donut-layout{display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center;min-height:178px} .donut-wrap{width:145px;height:145px;position:relative;margin:auto} .donut-chart{width:145px;height:145px} .donut-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none} .donut-center b{font-size:24px;color:var(--navy-2)} .donut-center span{font-size:12px;color:#82919E} .donut-legend{display:grid;gap:7px} .donut-legend-row{display:grid;grid-template-columns:8px 1fr auto;gap:7px;align-items:center;font-size:12px;color:#607486} .donut-legend-row b{color:#1C3447} .health-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px} .gauge-card{border:1px solid #E4EBEF;border-radius:9px;padding:9px;text-align:center;background:#FBFCFD} .gauge-ring{--p:0;--c:#2B6CB0;width:78px;height:78px;margin:auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--c) calc(var(--p)*1%),#E7EDF1 0);position:relative} .gauge-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff} .gauge-ring>div{position:relative;z-index:1} .gauge-ring b{display:block;font-size:16px;color:var(--navy)} .gauge-ring span{font-size:12px;color:#7C8D9A;font-weight:700} .gauge-card small{display:block;margin-top:6px;color:#94A2AE;font-size:12px;min-height:18px} /* Attention */ .attention-list{display:grid;gap:6px} .attention-item{width:100%;border:1px solid #E5ECEF;background:#FBFCFD;border-radius:8px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:7px;padding:7px;text-align:start;cursor:pointer} .attention-item:hover{border-color:#C9D7DF;background:#F6F9FA} .attention-icon{width:29px;height:29px;border-radius:7px;display:grid;place-items:center;background:#EDF3F6;color:#536D80} .attention-item strong{display:block;font-size:12px} .attention-item small{display:block;color:#8B99A5;font-size:12px;margin-top:2px} .severity{font-size:12px;font-weight:800;padding:3px 6px;border-radius:10px;text-transform:uppercase} .severity.critical,.severity.high{color:#B3333A;background:#FDEDEE} .severity.medium{color:#9A6507;background:#FFF3D8} .severity.info{color:#245F9D;background:#EAF2FA} /* Tables */ .table-wrap{overflow:auto;max-height:460px} .data-table,.ranking-table{width:100%;border-collapse:separate;border-spacing:0} .data-table th,.data-table td,.ranking-table th,.ranking-table td{padding:7px 8px;border-bottom:1px solid #E8EEF2;text-align:start;font-size:12px;vertical-align:middle;white-space:nowrap} .data-table th,.ranking-table th{position:sticky;top:0;z-index:2;background:#F3F7F9;color:#5F7384;font-weight:800} .data-table tbody tr:nth-child(even),.ranking-table tbody tr:nth-child(even){background:#FBFCFD} .data-table tbody tr:hover,.ranking-table tbody tr:hover{background:#F0F6F9;cursor:pointer} .data-table td b,.ranking-table td b{font-size:12px} .data-table td small,.ranking-table td small{display:block;color:#8C9AA6;font-size:12px;margin-top:2px} .live-fleet-table-wrap{max-height:540px} .live-fleet-table th,.live-fleet-table td{font-size:12px} .vehicle-cell{display:flex;align-items:center;gap:7px;min-width:145px} .vehicle-cell>div{min-width:0} .vehicle-cell b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vehicle-cell small{display:block;color:#8B99A5;font-size:12px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .status-dot{width:8px;height:8px;border-radius:50%;background:#94A3B8;box-shadow:0 0 0 3px rgba(148,163,184,.12);flex:none} .status-dot.moving{background:var(--green);box-shadow:0 0 0 3px rgba(20,150,95,.12)} .status-dot.idle{background:var(--amber);box-shadow:0 0 0 3px rgba(213,138,8,.12)} .status-dot.parked,.status-dot.stopped{background:var(--blue);box-shadow:0 0 0 3px rgba(43,108,176,.12)} .status-dot.offline{background:var(--red);box-shadow:0 0 0 3px rgba(212,67,75,.12)} .status-chip{display:inline-flex;align-items:center;padding:3px 6px;border-radius:10px;font-size:12px;font-weight:800;background:#EEF2F5;color:#607486} .status-chip.moving{background:#E8F6EF;color:#15774D} .status-chip.idle{background:#FFF4DD;color:#9B6305} .status-chip.parked,.status-chip.stopped{background:#EAF2FA;color:#285D93} .status-chip.offline{background:#FDEDEE;color:#B23940} /* Search / tools */ .page-tools{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-bottom:10px} .search-box{min-width:280px;max-width:560px;flex:1;position:relative} .search-box input{width:100%;height:37px;border:1px solid var(--line);border-radius:8px;padding:0 36px 0 10px;background:#fff;outline:none;color:var(--ink)} .search-box svg{position:absolute;inset-inline-start:11px;top:10px;color:#8293A0} .filter-group{display:flex;align-items:center;gap:5px;flex-wrap:wrap} .pagination{display:flex;justify-content:center;gap:4px;margin-top:12px} .pagination button{min-width:31px;height:31px;border:1px solid var(--line);border-radius:7px;background:#fff;color:#607486;cursor:pointer} .pagination button.active{background:var(--navy);border-color:var(--navy);color:#fff} /* Fleet */ .fleet-table-shell{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden} .fleet-table-wrap{max-height:calc(100vh - 210px);min-height:420px} .fleet-table{min-width:1650px} .fleet-table th{top:0} .plate-cell{min-width:118px} .plate-cell .plate,.plate-cell .registration-plate{transform:scale(.82);transform-origin:center;min-width:110px} .row-actions{display:flex;align-items:center;gap:3px} .row-actions button{width:28px;height:28px;border:1px solid #DDE6EB;background:#fff;border-radius:7px;display:grid;place-items:center;color:#5E7283;cursor:pointer} .row-actions button:hover{background:#EEF4F7;color:var(--navy)} .fleet-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:9px} .vehicle-card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;box-shadow:var(--shadow-sm);min-width:0} .vehicle-card:hover{border-color:#C9D7DF;box-shadow:var(--shadow)} .vehicle-head{display:grid;grid-template-columns:118px minmax(0,1fr) 58px;align-items:center;gap:9px} .vehicle-info{min-width:0} .vehicle-info h3{margin:0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vehicle-info p{margin:3px 0 0;color:#718394;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vehicle-avatar{width:56px;height:56px;border-radius:11px;background:#EDF3F6;color:var(--navy);display:grid;place-items:center;border:1px solid #DCE6EB} .vehicle-art{width:42px;height:42px} .metric-grid,.profile-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:8px} .metric-tile{border:1px solid #E6ECEF;border-radius:8px;padding:7px;display:flex;align-items:center;gap:6px;min-width:0;background:#FBFCFD} .metric-icon{width:26px;height:26px;display:grid;place-items:center;border-radius:7px;background:#EDF3F6;color:#536F82;flex:none} .metric-tile span{display:block;color:#81919D;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .metric-tile b{display:block;font-size:12px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .vehicle-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:8px} .vehicle-action{border:1px solid #E0E8ED;background:#fff;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px;color:#5D7182;font-size:12px;cursor:pointer} .vehicle-action:hover{background:#EFF5F7;color:var(--navy)} .vehicle-foot{display:flex;justify-content:space-between;gap:8px;margin-top:7px;color:#94A1AC;font-size:12px} /* Saudi plate */ .plate{min-height:55px;border:1.5px solid #44515D;border-radius:6px;background:#fff;display:grid;grid-template-columns:1fr 21px;overflow:hidden;color:#111} .plate-grid{display:grid;grid-template-columns:1fr 1fr} .plate-grid>div{display:grid;place-items:center;border-inline-end:1px solid #A9B1B8;padding:2px} .plate-grid span{font-size:12px}.plate-grid b{font-size:13px;letter-spacing:.6px} .ksa{display:grid;place-items:center;border-inline-start:1px solid #7E878F;font-size:12px;padding:2px} .tracker-plate,.registration-plate{display:flex;flex-direction:column;justify-content:center;align-items:center;border-color:#D2DCE3;color:#334B5D;background:#fff} .tracker-plate small,.registration-plate small{font-size:12px;color:#8B99A6} .tracker-plate b,.registration-plate b{font-size:12px} /* Analytics page */ .analysis-stat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:10px} .analysis-stat{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;display:flex;align-items:center;gap:8px} .analysis-stat-icon{width:34px;height:34px;border-radius:8px;background:#EDF3F6;color:var(--navy);display:grid;place-items:center} .analysis-stat span{display:block;color:#718392;font-size:12px;font-weight:700} .analysis-stat b{display:block;color:var(--navy-2);font-size:19px;margin-top:2px} .analysis-stat b small{font-size:12px;color:#7E8E9A} .analytics-card .panel-body{min-height:220px} .analytics-rank-wrap{max-height:250px} .analytics-fleet-wrap{max-height:540px} .analytics-wide{min-width:1450px} .analytics-table th,.analytics-table td{font-size:12px} /* Vehicle Profile */ .vehicle-dialog{width:min(1380px,96vw);max-height:94vh;border:0;border-radius:12px;padding:0;box-shadow:0 24px 70px rgba(14,40,59,.24)} .vehicle-dialog::backdrop,.ai-dialog::backdrop{background:rgba(14,40,59,.32);backdrop-filter:blur(2px)} .dialog-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line);background:#fff} .dialog-head strong{display:block;font-size:13px}.dialog-head small{display:block;color:#7F8F9B;font-size:12px;margin-top:2px} .dialog-close{width:30px;height:30px;border:1px solid var(--line);background:#fff;border-radius:7px;cursor:pointer;color:#6A7C8B} .profile-dialog-head{position:sticky;top:0;z-index:5} .vehicle-profile{padding:12px;max-height:calc(94vh - 58px);overflow:auto} .vehicle-profile-head{display:grid;grid-template-columns:155px 1fr 110px;gap:12px;align-items:center;border:1px solid #DEE7EC;border-radius:10px;padding:10px;background:#F8FAFB} .profile-identity h2{margin:0;font-size:18px}.profile-identity p{margin:3px 0 0;color:#6E8292;font-size:12px} .profile-identity-meta{display:flex;flex-wrap:wrap;gap:10px;margin:5px 0;color:#8796A2;font-size:12px} .vehicle-profile .vehicle-avatar{width:104px;height:82px;border-radius:10px} .vehicle-profile .vehicle-art{width:74px;height:74px} .profile-metrics{grid-template-columns:repeat(6,1fr);margin-top:7px} .profile-actions{display:flex;justify-content:flex-start;gap:5px;margin:7px 0 0} .profile-actions .vehicle-action{min-width:105px;padding:7px 9px} .profile-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);margin:10px 0 0;position:sticky;top:0;background:#fff;z-index:2} .profile-tabs button{display:inline-flex;align-items:center;gap:5px;border:0;background:transparent;padding:9px 12px;color:#687B8B;font-weight:800;font-size:12px;cursor:pointer;border-bottom:2px solid transparent} .profile-tabs button.active{color:var(--navy);border-bottom-color:var(--gold)} [data-profile-panel]{padding:10px 0} .profile-analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px} .profile-analysis-top .profile-section{min-height:260px} .profile-section{border:1px solid var(--line);border-radius:9px;background:#fff;padding:10px;min-width:0} .profile-section-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px} .profile-section-head h3{margin:0;font-size:12px} .profile-section-head small{display:block;color:#8998A4;font-size:12px;margin-top:2px} .profile-score{font-size:20px;color:var(--navy)} .vehicle-analysis-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:8px} .vehicle-analysis-kpis>div{border:1px solid #E2E9ED;border-radius:8px;background:#F9FBFC;padding:8px} .vehicle-analysis-kpis span{display:block;color:#7C8D99;font-size:12px} .vehicle-analysis-kpis b{display:block;font-size:17px;color:#183B57;margin-top:2px} .vehicle-live-sensors{display:grid;grid-template-columns:repeat(4,1fr);gap:6px} .vehicle-live-sensors>div{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;align-items:center;column-gap:6px;border:1px solid #E5ECEF;border-radius:8px;padding:8px;background:#FBFCFD} .vehicle-live-sensors svg{grid-row:1/3;color:var(--navy)} .vehicle-live-sensors span{font-size:12px;color:#81919D} .vehicle-live-sensors b{font-size:12px} .profile-recommendations{display:grid;gap:5px} .profile-recommendation{display:grid;grid-template-columns:56px 1fr;gap:7px;border:1px solid #E6ECEF;border-radius:7px;padding:7px} .profile-recommendation>span{font-size:12px;font-weight:800;text-transform:uppercase} .profile-recommendation p{margin:0;font-size:12px;line-height:1.55} .profile-recommendation.critical,.profile-recommendation.high{border-inline-start:3px solid var(--red)} .profile-recommendation.medium{border-inline-start:3px solid var(--amber)} .profile-recommendation.info{border-inline-start:3px solid var(--blue)} .compact-table th,.compact-table td{padding:6px 7px} .profile-events-wrap{max-height:620px} .sensor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:7px} .sensor-card{border:1px solid #E3EAEE;border-radius:8px;background:#FBFCFD;padding:9px;position:relative;min-height:76px} .sensor-card-icon{position:absolute;inset-inline-end:8px;top:8px;width:27px;height:27px;border-radius:7px;background:#EDF3F6;color:var(--navy);display:grid;place-items:center} .sensor-card span{display:block;color:#7B8C99;font-size:12px;padding-inline-end:32px} .sensor-card b{display:block;margin-top:5px;font-size:12px;color:#17364C} .sensor-card small{display:block;color:#9AA6AF;font-size:12px;margin-top:3px} /* Events / drivers / sensor overview */ .analysis-kpis{display:grid;grid-template-columns:repeat(8,1fr);gap:7px;margin-bottom:10px} .analysis-kpi{border:1px solid var(--line);border-radius:9px;background:#fff;padding:9px} .analysis-kpi span{display:block;color:#7B8C99;font-size:12px} .analysis-kpi b{display:block;font-size:18px;color:var(--navy);margin-top:2px} /* Reports */ .report-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:9px;align-items:start} .report-catalog{display:grid;gap:10px;position:sticky;top:72px;max-height:calc(100vh - 90px);overflow:auto;padding-inline-end:2px} .report-catalog-group{display:grid;gap:4px} .report-catalog-group h3{margin:1px 2px 2px;font-size:12px;color:#8796A2;text-transform:uppercase;letter-spacing:.08em} .report-card{width:100%;border:1px solid #E2E9ED;background:#fff;border-radius:8px;padding:7px;display:grid;grid-template-columns:30px 1fr;gap:7px;align-items:center;text-align:start;cursor:pointer} .report-card:hover{border-color:#C8D6DE;background:#F8FAFB} .report-card .ri{width:29px;height:29px;border-radius:7px;background:#EDF3F6;color:#536F82;display:grid;place-items:center} .report-card strong{display:block;font-size:12px;color:#2A4356} .report-card small{display:block;font-size:12px;color:#93A0AA;margin-top:2px} .report-card.active{border-color:#AFC3D0;background:#F1F6F8;box-shadow:inset 3px 0 0 var(--gold)} [dir="rtl"] .report-card.active{box-shadow:inset -3px 0 0 var(--gold)} .report-workbench{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden;min-width:0} .report-toolbar{display:flex;align-items:end;gap:6px;flex-wrap:wrap;padding:9px 10px;border-bottom:1px solid var(--line);background:#FBFCFD} .report-filter-block{display:grid;gap:3px} .report-filter-block>label{font-size:12px;color:#718392;font-weight:800} .report-period-inputs{display:flex;align-items:center;gap:4px} .report-period-inputs span{color:#91A0AB;font-size:12px} .report-vehicle-filter{min-width:190px} .report-vehicle-filter .select{width:100%} .report-compare{display:flex;align-items:center;gap:4px;font-size:12px;color:#607486;padding:0 3px 10px} .report-run-btn{margin-inline-start:auto} .export-buttons{display:flex;align-items:center;gap:4px} .export-btn{display:inline-flex;align-items:center;gap:4px;padding:7px 8px;font-size:12px;color:#5C7182} .intelligence-btn{border-color:#E7D7A8;background:#FFFBF2;color:#745A19} .report-result{padding:11px} .report-empty{min-height:520px;display:grid;place-items:center;text-align:center;color:#718391} .report-empty>div{max-width:480px} .report-empty h3{color:#17364C;margin:8px 0 4px} .report-empty p{font-size:12px;line-height:1.7} .report-result-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:9px;margin-bottom:9px} .report-result-head h2{font-size:17px;margin:4px 0 2px} .report-result-head p{font-size:12px;color:#83929E;margin:0} .report-source-badge{display:inline-flex;border:1px solid #DFC982;background:#FFF9E8;color:#745A1A;border-radius:10px;padding:3px 7px;font-size:12px;font-weight:800} .report-result-meta{text-align:end}.report-result-meta span{display:block;font-size:12px;color:#94A1AB}.report-result-meta b{font-size:12px;font-weight:600;color:#657A8A} .report-intelligence,.navixy-original-section{border:1px solid var(--line);border-radius:9px;padding:10px;margin-top:9px} .report-intelligence{border-top:3px solid var(--gold);background:linear-gradient(180deg,#FFFEFA 0,#FFF 95px)} .navixy-original-section{border-top:3px solid var(--navy)} .report-section-title{display:flex;align-items:flex-start;gap:7px;margin-bottom:9px} .report-section-title>div:first-child{width:30px;height:30px;border-radius:7px;background:#EDF3F6;display:grid;place-items:center;color:var(--navy)} .report-section-title h3{margin:0;font-size:12px}.report-section-title p{margin:2px 0 0;color:#84939F;font-size:12px} .report-headline-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-bottom:8px} .report-headline-kpi{border:1px solid #E4EAEE;background:#fff;border-radius:8px;padding:8px;min-width:0} .report-headline-kpi span{display:block;color:#7E8E9A;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .report-headline-kpi b{display:block;color:var(--navy);font-size:15px;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .report-analysis-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px} .report-analysis-card{border:1px solid #E3EAEE;border-radius:8px;padding:9px;min-width:0;background:#fff} .report-analysis-card h3{font-size:12px;margin:0 0 7px;color:#2C4659} .report-numeric-card{margin-top:8px} .recommendation-list{display:grid;gap:5px} .recommendation{border:1px solid #E5ECEF;border-radius:7px;padding:7px;display:grid;grid-template-columns:55px 1fr;gap:7px;align-items:start} .recommendation p{margin:0;font-size:12px;line-height:1.55} .severity-box.critical,.severity-box.high{border-inline-start:3px solid var(--red)} .severity-box.medium{border-inline-start:3px solid var(--amber)} .severity-box.info{border-inline-start:3px solid var(--blue)} .report-sheet{border-top:1px solid #E5EBEF;padding-top:10px;margin-top:10px} .native-sheet-head{display:flex;gap:7px;align-items:center} .native-sheet-head>span{display:grid;place-items:center;width:27px;height:27px;border-radius:6px;background:#EDF3F6;color:var(--navy);font-size:12px;font-weight:800} .native-sheet-head h3{margin:0;font-size:12px} .report-group-title{padding:6px 7px;background:#F4F7F9;border:1px solid #E3EAEE;border-bottom:0;font-size:12px;font-weight:800;color:#536A7C} .native-table-wrap{max-height:540px;border:1px solid #E3EAEE} .native-report-table th{background:#EDF3F6;color:#334B5D} .preview-note{display:block;color:#8C9AA6;font-size:12px;margin-top:4px} .report-text{font-size:12px;color:#526A7C;line-height:1.65} .report-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:5px} .report-summary-item{border:1px solid #E5ECEF;border-radius:7px;padding:7px;background:#F9FBFC} .report-summary-item span{display:block;color:#80909C;font-size:12px}.report-summary-item b{display:block;font-size:12px;margin-top:2px} /* AI */ .ai-fab{position:fixed;inset-inline-end:18px;bottom:18px;z-index:70;width:48px;height:48px;border:0;border-radius:13px;background:var(--navy);color:#fff;display:grid;place-items:center;box-shadow:0 10px 26px rgba(24,59,87,.26);cursor:pointer} .ai-fab:hover{background:var(--navy-2)} .ai-dialog{width:min(720px,94vw);height:min(760px,88vh);border:0;border-radius:12px;padding:0;box-shadow:0 24px 70px rgba(14,40,59,.24)} .ai-dialog .dialog-head{height:58px} .ai-quick{display:flex;gap:5px;flex-wrap:wrap;padding:9px;border-bottom:1px solid var(--line)} .ai-chip{border:1px solid #DDE6EB;background:#F8FAFB;border-radius:14px;padding:6px 9px;font-size:12px;color:#607486;cursor:pointer} .ai-messages{height:calc(100% - 184px);overflow:auto;padding:12px;display:flex;flex-direction:column;gap:8px;background:#F8FAFB} .message{max-width:82%;padding:8px 10px;border-radius:10px;font-size:12px;line-height:1.55;white-space:pre-wrap} .message.user{align-self:flex-end;background:var(--navy);color:#fff} .message.assistant{align-self:flex-start;background:#fff;border:1px solid #E0E8ED} .message .mode{display:block;margin-top:5px;font-size:12px;opacity:.65} .ai-compose{display:grid;grid-template-columns:1fr auto;gap:6px;padding:9px;border-top:1px solid var(--line);background:#fff} .ai-compose textarea{resize:none;border:1px solid var(--line);border-radius:8px;padding:8px;outline:none;min-height:54px} /* Zones */ .zone-actions{display:flex;justify-content:flex-end;margin-bottom:8px} .zones-layout{display:grid;grid-template-columns:280px 1fr;gap:9px} .zone-list{background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;max-height:680px;overflow:auto} .zone-list h3{font-size:12px;color:#6C8191;margin:8px 4px} .zone-item{display:block;width:100%;border:1px solid #E6ECEF;background:#FBFCFD;border-radius:7px;padding:7px;margin-bottom:4px;text-align:start} .zone-item-button{cursor:pointer}.zone-item-button:hover{background:#F1F6F8} .zone-item strong{display:block;font-size:12px}.zone-item small{display:block;color:#8E9BA5;font-size:12px;margin-top:2px} /* Toast/export */ .toast-root{position:fixed;top:72px;inset-inline-end:16px;z-index:200;display:grid;gap:6px} .toast{min-width:220px;max-width:420px;background:#fff;border:1px solid var(--line);border-radius:9px;box-shadow:var(--shadow);padding:9px 11px;font-size:12px} .toast.error{border-inline-start:3px solid var(--red)}.toast.success{border-inline-start:3px solid var(--green)} .export-ready-box{position:fixed;inset-inline-end:16px;bottom:76px;z-index:180;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:9px;display:none;align-items:center;gap:6px;max-width:520px} .export-ready-box.show{display:flex}.export-ready-box b{display:block;font-size:12px}.export-ready-box small{font-size:12px;color:#8B99A5} /* Responsive */ @media(max-width:1500px){ .kpi-grid{grid-template-columns:repeat(4,1fr)} .analysis-stat-grid{grid-template-columns:repeat(3,1fr)} .report-headline-grid{grid-template-columns:repeat(3,1fr)} } @media(max-width:1200px){ .dashboard-grid,.analytics-layout{grid-template-columns:1fr 1fr} .span-3{grid-column:span 2} .dashboard-map-panel{grid-column:span 2;grid-row:auto} .profile-metrics{grid-template-columns:repeat(3,1fr)} .vehicle-analysis-kpis{grid-template-columns:repeat(3,1fr)} .report-layout{grid-template-columns:215px minmax(0,1fr)} .profile-analysis-grid,.report-analysis-grid{grid-template-columns:1fr} } @media(max-width:900px){ .topbar{align-items:flex-start;flex-direction:column}.top-actions{width:100%;overflow:auto}.main-nav{width:100%} .page-root{padding:12px} .dashboard-grid,.analytics-layout{grid-template-columns:1fr}.span-2,.span-3,.dashboard-map-panel{grid-column:span 1} .kpi-grid{grid-template-columns:repeat(2,1fr)} .analysis-stat-grid{grid-template-columns:repeat(2,1fr)} .report-layout{grid-template-columns:1fr}.report-catalog{position:static;display:grid;grid-template-columns:1fr 1fr;max-height:none} .zones-layout{grid-template-columns:1fr}.zone-list{max-height:300px} .vehicle-profile-head{grid-template-columns:1fr;text-align:center}.vehicle-profile .vehicle-avatar{margin:auto}.profile-identity-meta{justify-content:center} .vehicle-live-sensors{grid-template-columns:1fr 1fr} .report-analysis-grid{grid-template-columns:1fr} .report-run-btn{margin-inline-start:0} } @media(max-width:560px){ .period-control .period-btn:nth-of-type(n+4){display:none} .page-head{align-items:flex-start}.head-analytics-link{padding:7px} .analysis-kpis,.analysis-stat-grid,.vehicle-analysis-kpis,.report-headline-grid{grid-template-columns:1fr 1fr} .health-grid{grid-template-columns:1fr} .donut-layout{grid-template-columns:1fr} .report-catalog{grid-template-columns:1fr} .vehicle-live-sensors{grid-template-columns:1fr} .profile-metrics{grid-template-columns:1fr 1fr} } .telemetry-pill{display:inline-flex;align-items:center;gap:3px;border:1px solid #DDE6EB;background:#F7FAFB;border-radius:12px;padding:3px 6px;margin:2px;font-size:12px;color:#667C8D}.telemetry-pill b{font-size:12px;color:#1F3A4E}.analysis-kpi .analysis-stat-icon{float:inline-end;margin-inline-start:6px;width:28px;height:28px} /* Progressive analytics: current data renders immediately while historical aggregation completes. */ .analysis-sync-banner{display:flex;align-items:center;gap:8px;margin:0 0 10px;padding:8px 11px;border:1px solid #D5E1E8;border-radius:9px;background:#F8FBFC;color:#5E7485;font-size:12px;font-weight:650} .analysis-sync-banner svg{color:var(--navy);animation:softspin 1.8s linear infinite} .dashboard-sync{margin-top:2px} .analysis-loading-note{min-height:145px;display:grid;place-items:center;color:#8696A3;font-size:12px;background:linear-gradient(90deg,#FAFCFD,#F4F8FA,#FAFCFD);background-size:220% 100%;animation:shimmer 1.8s ease-in-out infinite} .profile-live-grid{grid-template-columns:minmax(280px,.8fr) minmax(420px,1.2fr)} @keyframes softspin{to{transform:rotate(360deg)}} @keyframes shimmer{0%,100%{background-position:100% 0}50%{background-position:0 0}} @media(max-width:900px){.profile-live-grid{grid-template-columns:1fr}} /* ============================================================ V11.4 Professional Web Analytics Workspace Light-mode, data-driven, capability-aware, RTL/LTR safe. ============================================================ */ .analytics-pro{display:grid;gap:12px} .analytics-pro-hero{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:4px 2px 2px} .analytics-pro-hero h1{margin:0;font-size:27px;letter-spacing:-.03em;color:var(--navy-2)} .analytics-pro-hero p{margin:5px 0 0;color:var(--muted);font-size:12px;max-width:840px;line-height:1.65} .analytics-data-badge{display:flex;align-items:center;gap:9px;border:1px solid #DCE6EC;background:#fff;border-radius:11px;padding:9px 12px;box-shadow:var(--shadow-sm);min-width:210px} .analytics-data-badge>span{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:#EAF7F0;color:var(--green)} .analytics-data-badge b{display:block;font-size:12px;color:#1C3A4F}.analytics-data-badge small{display:block;margin-top:2px;font-size:12px;color:#8A99A5} .analytics-filter-deck{position:sticky;top:68px;z-index:38;display:grid;grid-template-columns:minmax(290px,1.35fr) minmax(260px,1fr) minmax(240px,1fr) minmax(210px,.8fr) auto;gap:9px;align-items:end;background:rgba(255,255,255,.97);border:1px solid #D9E4EA;border-radius:13px;padding:10px;box-shadow:0 12px 34px rgba(14,40,59,.08);backdrop-filter:blur(14px)} .analytics-filter-block{display:grid;gap:5px;min-width:0}.analytics-filter-block>span{font-size:12px;color:#728494;font-weight:800}.analytics-filter-actions{display:flex;align-items:end;justify-content:flex-end} .analytics-segmented{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid #DCE6EC;background:#F6F9FB;border-radius:9px;min-height:38px} .analytics-segmented button{border:0;background:transparent;color:#617486;border-radius:7px;padding:7px 10px;min-width:68px;font-size:12px;font-weight:800;cursor:pointer;white-space:nowrap}.analytics-segmented button:hover{background:#EDF3F6;color:var(--navy)}.analytics-segmented button.active{background:var(--navy);color:#fff;box-shadow:0 2px 8px rgba(24,59,87,.16)} .analytics-custom-range{display:flex;align-items:center;gap:5px;grid-column:1/-1}.analytics-custom-range .select{height:32px;flex:1}.analytics-custom-range>span{color:#9AA6AF} .analytics-static-selection{height:38px;border:1px solid #DCE5EB;background:#FBFCFD;border-radius:9px;padding:0 10px;display:flex;align-items:center;gap:7px;font-size:12px;color:#617486;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.analytics-static-selection svg{color:var(--navy)} .analytics-switch{height:38px;border:1px solid #DCE5EB;background:#FBFCFD;border-radius:9px;padding:0 9px;display:flex;align-items:center;gap:7px;cursor:pointer}.analytics-switch input{display:none}.analytics-switch i{width:32px;height:18px;border-radius:10px;background:#CCD7DE;position:relative;transition:.15s}.analytics-switch i:after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:2px;inset-inline-start:2px;box-shadow:0 1px 3px rgba(0,0,0,.15);transition:.15s}.analytics-switch input:checked+i{background:var(--green)}.analytics-switch input:checked+i:after{inset-inline-start:16px}.analytics-switch b{font-size:12px;color:#536A7C} .analytics-pro-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:11px;align-items:start}.analytics-widget.size-small{grid-column:span 3}.analytics-widget.size-medium{grid-column:span 4}.analytics-widget.size-large{grid-column:span 6}.analytics-widget.size-full{grid-column:span 12} .analytics-pro-card{background:#fff;border:1px solid #DCE5EB;border-radius:12px;box-shadow:0 4px 18px rgba(14,40,59,.045);min-width:0;overflow:hidden;transition:transform .15s ease,box-shadow .15s ease}.analytics-pro-card:hover{box-shadow:0 9px 30px rgba(14,40,59,.075)} .analytics-pro-card-head{min-height:52px;display:flex;justify-content:space-between;align-items:flex-start;gap:9px;padding:11px 12px 9px;border-bottom:1px solid #E8EEF2;background:linear-gradient(180deg,#fff,#FDFEFE)}.analytics-pro-card-head h2{margin:0;font-size:12px;color:#19364B;font-weight:850}.analytics-pro-card-head small{display:block;margin-top:3px;font-size:12px;color:#8B99A5}.analytics-pro-card-body{padding:11px 12px;min-height:178px} .analytics-pro-kpi-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.analytics-pro-kpi{border:1px solid #E2E9EE;border-radius:10px;padding:9px;background:#FBFCFD;display:flex;align-items:center;gap:8px;min-width:0}.analytics-pro-kpi-icon{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;background:#EDF3F6;color:var(--blue)}.analytics-pro-kpi span{display:block;font-size:12px;color:#718391;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.analytics-pro-kpi b{display:block;margin-top:2px;font-size:18px;color:#17364C;white-space:nowrap}.analytics-pro-kpi small{display:block;font-size:12px;color:#97A4AE;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.analytics-pro-kpi.tone-green .analytics-pro-kpi-icon{background:#E9F7EF;color:var(--green)}.analytics-pro-kpi.tone-red .analytics-pro-kpi-icon{background:#FDEDEE;color:var(--red)}.analytics-pro-kpi.tone-amber .analytics-pro-kpi-icon{background:#FFF5E1;color:var(--amber)}.analytics-pro-kpi.tone-purple .analytics-pro-kpi-icon{background:#F2EDFF;color:var(--purple)}.analytics-pro-kpi.tone-cyan .analytics-pro-kpi-icon{background:#EAF8FC;color:var(--cyan)} .analytics-pro-map{height:430px;border:1px solid #D9E3E9;border-radius:10px;overflow:hidden;background:#EDF2F5}.analytics-map-legend{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:8px;font-size:12px;color:#667A8A}.analytics-map-legend span{display:inline-flex;align-items:center;gap:5px}.analytics-map-legend i{width:8px;height:8px;border-radius:50%}.analytics-map-legend .moving{background:var(--green)}.analytics-map-legend .parked{background:var(--blue)}.analytics-map-legend .idle{background:var(--amber)}.analytics-map-legend .offline{background:var(--red)} .analytics-pro-empty{min-height:145px;display:grid;place-content:center;text-align:center;gap:7px;color:#8A9AA6;font-size:12px}.analytics-pro-empty svg{margin:auto;color:#91A4B2}.analytics-good-state{min-height:145px;display:grid;place-content:center;text-align:center;gap:8px;color:var(--green)}.analytics-good-state b{font-size:12px;color:#365B4A} .analytics-insight-list{display:grid;gap:6px}.analytics-insight{display:grid;grid-template-columns:30px 1fr;gap:8px;align-items:center;border:1px solid #E4EAEE;border-radius:8px;padding:7px 9px;background:#FBFCFD}.analytics-insight>span{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;background:#EDF3F6;color:var(--blue)}.analytics-insight p{margin:0;font-size:12px;line-height:1.55;color:#425D70}.analytics-insight.high>span,.analytics-insight.critical>span{background:#FDEEEF;color:var(--red)}.analytics-insight.medium>span{background:#FFF5E2;color:var(--amber)} .analytics-engine-grid,.analytics-inline-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.analytics-engine-grid .analytics-pro-kpi,.analytics-inline-kpis .analytics-pro-kpi{min-height:72px}.analytics-subchart{margin-top:10px;padding-top:10px;border-top:1px solid #EDF1F4} .analytics-health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.gauge-card{display:grid;justify-items:center;gap:5px;padding:4px}.gauge-ring{--p:0;--c:#2B6CB0;width:112px;height:112px;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p)*1%),#E8EEF2 0);display:grid;place-items:center;position:relative}.gauge-ring:after{content:"";position:absolute;inset:12px;border-radius:50%;background:#fff}.gauge-ring>div{position:relative;z-index:2;text-align:center}.gauge-ring b{display:block;font-size:19px;color:#17364C}.gauge-ring span{font-size:12px;color:#708393}.gauge-card>small{font-size:12px;color:#8A99A5;text-align:center} .analytics-event-list{display:grid;gap:4px}.analytics-event-row{width:100%;border:1px solid #E7EDF1;background:#FBFCFD;border-radius:8px;padding:6px 8px;display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:8px;align-items:center;text-align:start;cursor:pointer}.analytics-event-row:hover{background:#F2F6F8}.analytics-event-severity{width:8px;height:32px;border-radius:6px;background:#8091A0}.analytics-event-severity.critical,.analytics-event-severity.power_disconnect{background:var(--red)}.analytics-event-severity.speeding{background:#F59E0B}.analytics-event-severity.harsh{background:#EA6A5A}.analytics-event-severity.geofence{background:var(--cyan)}.analytics-event-row b{display:block;font-size:12px;color:#2B4558}.analytics-event-row span:not(.analytics-event-severity){display:block;font-size:12px;color:#768998;margin-top:2px}.analytics-event-row small{font-size:12px;color:#98A4AD;white-space:nowrap} .analytics-split{display:grid;grid-template-columns:1fr 1fr;gap:12px}.analytics-mini-table{display:grid;border:1px solid #E3E9ED;border-radius:9px;overflow:hidden}.analytics-mini-table>div{display:grid;grid-template-columns:minmax(120px,1.2fr) minmax(120px,1fr) minmax(80px,.6fr);gap:8px;align-items:center;padding:7px 9px;border-bottom:1px solid #EDF1F4;font-size:12px}.analytics-mini-table>div:last-child{border-bottom:0}.analytics-mini-table-head{background:#F4F7F9;color:#617486;font-weight:800}.analytics-mini-table b{color:#294456}.analytics-mini-table span{color:#718493}.analytics-mini-table strong{text-align:end;color:#1C3D52}.text-red{color:var(--red)!important} .analytics-camera-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.analytics-camera-grid button{border:1px solid #E3E9ED;background:#FBFCFD;border-radius:8px;padding:8px;display:flex;align-items:center;gap:8px;text-align:start;cursor:pointer}.analytics-camera-grid button:hover{background:#F1F6F8}.analytics-camera-grid button>span{width:32px;height:32px;border-radius:8px;background:#EAF1F5;color:var(--navy);display:grid;place-items:center}.analytics-camera-grid b{display:block;font-size:12px}.analytics-camera-grid small{display:block;font-size:12px;color:#8796A1;margin-top:2px} .analytics-pro-table-wrap{max-height:560px;border:1px solid #E1E8EC;border-radius:9px}.analytics-pro-table{min-width:1320px}.analytics-pro-table th{position:sticky;top:0;z-index:2;background:#EDF3F6}.analytics-pro-table td:first-child b{display:block}.analytics-pro-table td:first-child small{display:block;color:#92A0AA;font-size:12px;margin-top:2px} .analytics-compare-panel{background:#fff;border:1px solid #D9E4EA;border-radius:12px;box-shadow:var(--shadow-sm);overflow:hidden}.analytics-compare-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0}.analytics-compare-grid>div{padding:10px 12px;border-inline-end:1px solid #E8EEF2}.analytics-compare-grid>div:last-child{border-inline-end:0}.analytics-compare-grid span{display:block;font-size:12px;color:#768997}.analytics-compare-grid>div>div{display:flex;align-items:baseline;gap:7px;margin-top:5px}.analytics-compare-grid b{font-size:18px;color:#17364C}.analytics-compare-grid i{font-style:normal;font-size:12px;color:#A0ABB3}.analytics-compare-grid small{display:block;font-size:12px;color:#9AA5AE;margin-top:3px} .vbar-chart,.multi-line-chart{width:100%;height:210px;overflow:visible}.vbar-chart .axis,.multi-line-chart .axis{stroke:#DEE7EC;stroke-width:1}.vbar-chart text,.multi-line-chart text{font-size:12px;fill:#8495A2}.vbar-value{font-weight:800;fill:#334E61!important}.multi-line-legend{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px;font-size:12px;color:#687D8D}.multi-line-legend span{display:inline-flex;align-items:center;gap:4px}.multi-line-legend i{width:9px;height:3px;border-radius:3px}.multi-line-chart{height:225px} .analytics-customize-dialog{width:min(760px,94vw);max-height:88vh;border:0;border-radius:13px;padding:0;box-shadow:0 30px 90px rgba(14,40,59,.25)}.analytics-customize-dialog::backdrop{background:rgba(8,25,37,.34);backdrop-filter:blur(2px)}.analytics-customize-dialog .dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:14px;border-bottom:1px solid #E5ECEF}.analytics-customize-dialog .dialog-head b{display:block;font-size:12px}.analytics-customize-dialog .dialog-head small{display:block;margin-top:3px;font-size:12px;color:#85949F;max-width:590px;line-height:1.55}.analytics-custom-body{padding:10px 12px;overflow:auto;max-height:64vh}.analytics-custom-list{display:grid;gap:5px}.analytics-custom-row{display:grid;grid-template-columns:24px minmax(0,1fr) 120px;gap:8px;align-items:center;border:1px solid #E4EAEE;border-radius:8px;padding:7px;background:#fff}.analytics-custom-row.dragging{opacity:.45;border-style:dashed}.analytics-custom-row.unavailable{background:#F7F9FA;opacity:.62}.analytics-drag{color:#91A0AB;font-weight:900;cursor:grab}.analytics-custom-row label{display:grid;grid-template-columns:18px 1fr;column-gap:6px;align-items:center}.analytics-custom-row label input{grid-row:1/3}.analytics-custom-row label b{font-size:12px}.analytics-custom-row label small{font-size:12px;color:#8B99A5;margin-top:2px}.analytics-custom-row .select{height:31px;font-size:12px}.analytics-custom-footer{display:flex;justify-content:space-between;gap:8px;padding:10px 12px;border-top:1px solid #E5ECEF;background:#FBFCFD}.analytics-custom-footer>div{display:flex;gap:6px} @media(max-width:1500px){.analytics-filter-deck{grid-template-columns:1.25fr 1fr 1fr .8fr}.analytics-filter-actions{grid-column:1/-1;justify-content:flex-start}.analytics-pro-kpi-grid{grid-template-columns:repeat(3,1fr)}.analytics-widget.size-small{grid-column:span 4}.analytics-widget.size-medium{grid-column:span 6}.analytics-widget.size-large{grid-column:span 6}.analytics-health-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:1050px){.analytics-filter-deck{position:static;grid-template-columns:1fr 1fr}.analytics-entity-block,.analytics-compare-block{grid-column:span 1}.analytics-pro-hero{align-items:flex-start}.analytics-widget.size-small,.analytics-widget.size-medium,.analytics-widget.size-large{grid-column:span 6}.analytics-split{grid-template-columns:1fr}.analytics-camera-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:720px){.analytics-pro-hero{display:grid}.analytics-data-badge{width:100%}.analytics-filter-deck{grid-template-columns:1fr}.analytics-entity-block,.analytics-compare-block{grid-column:span 1}.analytics-segmented{overflow-x:auto}.analytics-segmented button{min-width:78px}.analytics-pro-grid{grid-template-columns:1fr}.analytics-widget.size-small,.analytics-widget.size-medium,.analytics-widget.size-large,.analytics-widget.size-full{grid-column:span 1}.analytics-pro-kpi-grid{grid-template-columns:1fr 1fr}.analytics-pro-map{height:330px}.analytics-health-grid{grid-template-columns:1fr 1fr}.analytics-engine-grid,.analytics-inline-kpis{grid-template-columns:1fr 1fr}.analytics-camera-grid{grid-template-columns:1fr}.analytics-compare-grid{grid-template-columns:1fr 1fr}.analytics-compare-grid>div{border-bottom:1px solid #E8EEF2}.analytics-custom-row{grid-template-columns:20px 1fr}.analytics-custom-row .select{grid-column:2}.analytics-pro-hero h1{font-size:23px}} /* ======================================================================== V11.4.2 — Web Analytics visual reference Matches the approved light desktop dashboard composition without changing data rules: verified Navixy/SIMATRACK data only, capability-driven widgets. ======================================================================== */ body.analytics-reference-mode{background:#eef3f8;overflow-x:hidden} body.analytics-reference-mode .topbar{display:none} body.analytics-reference-mode .page-root{padding:0;max-width:none;margin:0;background:#eef3f8} body.analytics-reference-mode .ai-fab{display:none} .analytics-reference-shell{display:grid;grid-template-columns:178px minmax(0,1fr);min-height:100vh;direction:ltr;background:#eef3f8} .analytics-ref-sidebar{direction:rtl;background:linear-gradient(180deg,#173d61 0%,#0f2e4a 100%);color:#fff;min-height:100vh;padding:18px 10px 16px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh;z-index:30;box-shadow:10px 0 30px rgba(15,46,74,.08)} .analytics-ref-brand{height:58px;display:flex;align-items:center;justify-content:center;gap:8px;border-bottom:1px solid rgba(255,255,255,.08);padding-bottom:14px;direction:ltr}.analytics-ref-brand-mark{font-size:30px;font-weight:1000;font-style:italic;line-height:1;color:#27a8ff;text-shadow:0 3px 12px rgba(39,168,255,.25)}.analytics-ref-brand b{display:block;font-size:13px;letter-spacing:.02em;color:#fff}.analytics-ref-brand small{display:block;font-size:12px;letter-spacing:.08em;color:#a9c8dc;margin-top:1px} .analytics-ref-sidebar nav{display:grid;gap:4px} .analytics-ref-sidebar nav button{width:100%;border:0;background:transparent;color:#d9e6f0;display:flex;align-items:center;gap:10px;padding:10px 11px;border-radius:8px;font-size:12px;font-weight:750;cursor:pointer;text-align:start;transition:.14s ease} .analytics-ref-sidebar nav button svg{opacity:.82} .analytics-ref-sidebar nav button:hover{background:rgba(255,255,255,.07);color:#fff} .analytics-ref-sidebar nav button.active{background:#245f96;color:#fff;box-shadow:inset 3px 0 0 #55a8ff,0 8px 18px rgba(3,24,44,.14)} [dir="rtl"] .analytics-ref-sidebar nav button.active{box-shadow:inset -3px 0 0 #55a8ff,0 8px 18px rgba(3,24,44,.14)} .analytics-ref-support{margin-top:auto;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:10px;display:grid;grid-template-columns:28px 1fr;gap:8px;align-items:center;background:rgba(255,255,255,.045)} .analytics-ref-support b{display:block;font-size:12px}.analytics-ref-support small{display:block;font-size:12px;color:#9fc5dd;margin-top:2px} .analytics-reference-main{direction:rtl;min-width:0;background:#f5f8fb} .analytics-ref-topbar{height:52px;background:#fff;border-bottom:1px solid #dde7ef;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 18px;position:sticky;top:0;z-index:35;box-shadow:0 2px 10px rgba(22,55,81,.035)} .analytics-ref-search{width:min(390px,36vw);height:34px;border:1px solid #dde6ee;border-radius:7px;background:#f8fafc;display:flex;align-items:center;gap:8px;padding:0 10px;color:#7e91a2} .analytics-ref-search input{border:0;outline:0;background:transparent;width:100%;height:100%;color:#17364c;font-size:12px;direction:rtl} .analytics-ref-search input::placeholder{color:#9aa8b4} .analytics-ref-top-actions{display:flex;align-items:center;gap:13px;direction:rtl} .analytics-ref-alert{border:0;background:transparent;display:flex;align-items:center;gap:4px;color:#607587;cursor:pointer;position:relative} .analytics-ref-alert span{min-width:18px;height:18px;border-radius:9px;background:#e33f49;color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;padding:0 4px} .analytics-ref-lang{font-size:12px;color:#6d8090;border-inline-start:1px solid #e6edf2;padding-inline-start:12px} .analytics-ref-user{display:flex;align-items:center;gap:8px;text-align:start} .analytics-ref-avatar{width:31px;height:31px;border-radius:50%;display:grid;place-items:center;background:#2f80ed;color:#fff;font-weight:900;font-size:12px} .analytics-ref-user b{display:block;font-size:12px;color:#17364c}.analytics-ref-user small{display:block;font-size:12px;color:#8b99a5;margin-top:1px} .analytics-reference-canvas{padding:12px 15px 24px;max-width:1760px;margin:0 auto} .analytics-reference-hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:8px} .analytics-reference-hero h1{font-size:22px;line-height:1.1;margin:0;color:#102a3e;letter-spacing:-.025em} .analytics-reference-hero p{margin:4px 0 0;font-size:12px;color:#168b74;font-weight:650} .analytics-reference-date{display:inline-flex;align-items:center;gap:7px;height:34px;border:1px solid #dbe5ec;background:#fff;border-radius:7px;padding:0 10px;color:#425f75;font-size:12px;box-shadow:0 1px 2px rgba(14,40,59,.03)} .analytics-reference-controls{background:#fff;border:1px solid #dde7ee;border-radius:10px;padding:8px 9px;margin-bottom:8px;box-shadow:0 2px 9px rgba(14,40,59,.035)} .analytics-reference-control-row{display:flex;align-items:center;gap:7px;min-width:0;flex-wrap:wrap} .analytics-reference-control-row.secondary{margin-top:6px;padding-top:6px;border-top:1px solid #eef3f6} .analytics-reference-period,.analytics-reference-scope{display:flex;align-items:center;gap:7px;min-width:0} .analytics-reference-period>b,.analytics-reference-scope>b{font-size:12px;color:#536a7d;white-space:nowrap} .analytics-reference-controls .analytics-segmented{min-height:32px;padding:2px;border-color:#dce6ee;background:#f7f9fb;border-radius:7px} .analytics-reference-controls .analytics-segmented button{min-width:64px;padding:5px 10px;font-size:12px;border-radius:6px} .analytics-reference-controls .analytics-segmented button.active{background:#2f80ed;color:#fff;box-shadow:0 2px 7px rgba(47,128,237,.20)} .analytics-ref-customize{margin-inline-start:auto;height:32px;background:#116aab;border-color:#116aab;font-size:12px;padding:0 12px} .analytics-static-selection{height:32px;min-width:300px;flex:1;border:1px solid #e0e8ee;background:#f8fafc;border-radius:7px;display:flex;align-items:center;gap:7px;padding:0 10px;color:#64798a;font-size:12px} .analytics-reference-select{height:32px;min-width:220px;font-size:12px} .analytics-compare-inline{display:inline-flex;align-items:center;gap:6px;border:1px solid #dbe6ed;border-radius:7px;height:32px;padding:0 10px;font-size:12px;color:#4f6679;background:#fff;cursor:pointer} .analytics-compare-inline input{accent-color:#14965f} .analytics-reference-controls .analytics-custom-range{margin:0;display:flex;align-items:center;gap:5px}.analytics-reference-controls .analytics-custom-range .select{height:32px;font-size:12px} .analytics-reference-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;align-items:start} .analytics-reference-grid .analytics-widget.size-small{grid-column:span 2} .analytics-reference-grid .analytics-widget.size-medium{grid-column:span 3} .analytics-reference-grid .analytics-widget.size-large{grid-column:span 4} .analytics-reference-grid .analytics-widget.size-full{grid-column:span 12} .analytics-reference-grid .analytics-pro-card{border-radius:9px;border-color:#dfe8ee;box-shadow:0 2px 8px rgba(14,40,59,.035)} .analytics-reference-grid .analytics-pro-card:hover{transform:none;box-shadow:0 5px 16px rgba(14,40,59,.06)} .analytics-reference-grid .analytics-pro-card-head{min-height:36px;padding:7px 9px 6px;align-items:center;border-bottom-color:#edf2f5;background:#fff} .analytics-reference-grid .analytics-pro-card-head h2{font-size:12px;color:#17364c} .analytics-reference-grid .analytics-pro-card-head small{font-size:12px;margin-top:1px} .analytics-reference-grid .analytics-pro-card-body{padding:8px 9px;min-height:152px} .analytics-reference-grid [data-widget-key="summary"]{border:0;background:transparent;box-shadow:none;overflow:visible} .analytics-reference-grid [data-widget-key="summary"] .analytics-pro-card-head{display:none} .analytics-reference-grid [data-widget-key="summary"] .analytics-pro-card-body{padding:0;min-height:0} .analytics-reference-grid .analytics-pro-kpi-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px} .analytics-reference-grid .analytics-pro-kpi{min-height:76px;border-radius:8px;padding:8px 9px;background:#fff;border-color:#dfe8ee;box-shadow:0 1px 3px rgba(14,40,59,.025)} .analytics-reference-grid .analytics-pro-kpi-icon{width:36px;height:36px;border-radius:8px} .analytics-reference-grid .analytics-pro-kpi span{font-size:12px}.analytics-reference-grid .analytics-pro-kpi b{font-size:19px}.analytics-reference-grid .analytics-pro-kpi small{font-size:12px} .analytics-reference-grid [data-widget-key="map"] .analytics-pro-card-body{padding:7px} .analytics-reference-grid .analytics-pro-map{height:252px;border-radius:7px} .analytics-reference-grid .analytics-map-legend{margin-top:6px;gap:11px;font-size:12px;padding-inline:2px} .analytics-reference-grid .donut-layout{grid-template-columns:116px 1fr;gap:7px;min-height:150px} .analytics-reference-grid .donut-wrap,.analytics-reference-grid .donut-chart{width:112px;height:112px} .analytics-reference-grid .donut-center b{font-size:19px}.analytics-reference-grid .donut-legend-row{font-size:12px;gap:5px} .analytics-reference-grid .gauge-ring{width:92px;height:92px}.analytics-reference-grid .gauge-ring:after{inset:10px}.analytics-reference-grid .gauge-ring b{font-size:16px} .analytics-reference-grid .analytics-safety-layout{display:grid;grid-template-columns:112px minmax(0,1fr);gap:8px;align-items:center;min-height:150px} .analytics-reference-grid .analytics-safety-list{display:grid;gap:7px} .analytics-reference-grid .analytics-safety-list>div{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;color:#5d7283} .analytics-reference-grid .analytics-safety-list span{display:flex;align-items:center;gap:5px}.analytics-reference-grid .analytics-safety-list i{width:7px;height:7px;border-radius:50%}.analytics-reference-grid .analytics-safety-list b{font-size:12px;color:#17364c} .analytics-reference-grid .line-chart{height:165px} .analytics-reference-grid [data-widget-key="activity"] .line-chart{height:190px} .analytics-reference-grid .vbar-chart{height:170px} .analytics-reference-grid .hbar-chart{gap:6px}.analytics-reference-grid .hbar-row{grid-template-columns:minmax(70px,110px) 1fr 34px;gap:5px}.analytics-reference-grid .hbar-label,.analytics-reference-grid .hbar-row b{font-size:12px} .analytics-reference-grid .analytics-insight-list{gap:5px}.analytics-reference-grid .analytics-insight{grid-template-columns:25px 1fr;gap:6px;padding:6px 7px;border-radius:6px}.analytics-reference-grid .analytics-insight>span{width:24px;height:24px}.analytics-reference-grid .analytics-insight p{font-size:12px;line-height:1.4} .analytics-reference-grid .analytics-engine-grid,.analytics-reference-grid .analytics-inline-kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.analytics-reference-grid .analytics-engine-grid .analytics-pro-kpi{min-height:62px} .analytics-reference-grid .analytics-health-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.analytics-reference-grid [data-widget-key="deviceHealth"] .analytics-health-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.analytics-reference-grid [data-widget-key="deviceHealth"] .gauge-card:nth-child(n+4){display:none} .analytics-reference-grid .analytics-mini-table>div{grid-template-columns:minmax(74px,1.1fr) minmax(70px,1fr) minmax(54px,.6fr);padding:6px 7px;font-size:12px} .analytics-reference-grid .analytics-split{grid-template-columns:1fr;gap:7px}.analytics-reference-grid .analytics-split .analytics-event-list{max-height:104px;overflow:auto} .analytics-reference-grid .analytics-event-list{gap:4px}.analytics-reference-grid .analytics-event-row{padding:5px 6px}.analytics-reference-grid .analytics-event-row b{font-size:12px}.analytics-reference-grid .analytics-event-row span,.analytics-reference-grid .analytics-event-row small{font-size:12px} .analytics-reference-grid .analytics-camera-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.analytics-reference-grid .analytics-camera-grid button{min-height:54px} .analytics-reference-grid [data-widget-key="fleetTable"]{margin-top:2px}.analytics-reference-grid [data-widget-key="fleetTable"] .analytics-pro-card-body{min-height:0} .analytics-reference-grid .analytics-pro-table-wrap{max-height:430px}.analytics-reference-grid .analytics-pro-table th,.analytics-reference-grid .analytics-pro-table td{font-size:12px;padding:6px 7px} .analytics-compare-panel{margin-bottom:8px;border-radius:9px;box-shadow:none} .analysis-sync-banner{margin-bottom:8px} .analytics-customize-dialog{border-radius:12px} @media(max-width:1380px){ .analytics-reference-shell{grid-template-columns:156px minmax(0,1fr)} .analytics-ref-sidebar{padding-inline:8px}.analytics-ref-sidebar nav button{padding:9px 8px;font-size:12px}.analytics-ref-brand-mark{font-size:26px}.analytics-ref-brand b{font-size:12px} .analytics-reference-canvas{padding-inline:10px} .analytics-reference-grid .analytics-pro-kpi-grid{grid-template-columns:repeat(3,1fr)} .analytics-reference-grid [data-widget-key="summary"] .analytics-pro-kpi-grid{grid-template-columns:repeat(6,1fr)} } @media(max-width:1100px){ .analytics-reference-shell{grid-template-columns:72px minmax(0,1fr)} .analytics-ref-brand div{display:none}.analytics-ref-brand-mark{font-size:28px} .analytics-ref-sidebar nav button{justify-content:center;padding:10px}.analytics-ref-sidebar nav button span,.analytics-ref-support div{display:none}.analytics-ref-support{grid-template-columns:1fr;place-items:center} .analytics-reference-grid .analytics-widget.size-small{grid-column:span 3}.analytics-reference-grid .analytics-widget.size-medium{grid-column:span 4}.analytics-reference-grid .analytics-widget.size-large{grid-column:span 6} .analytics-reference-grid [data-widget-key="summary"] .analytics-pro-kpi-grid{grid-template-columns:repeat(3,1fr)} .analytics-ref-search{width:300px} } @media(max-width:760px){ body.analytics-reference-mode .topbar{display:flex} body.analytics-reference-mode .page-root{padding:12px} .analytics-reference-shell{display:block;min-height:0}.analytics-ref-sidebar,.analytics-ref-topbar{display:none}.analytics-reference-canvas{padding:0} .analytics-reference-hero{align-items:flex-start}.analytics-reference-date{font-size:12px} .analytics-reference-control-row{display:grid;grid-template-columns:1fr}.analytics-reference-period,.analytics-reference-scope{display:grid}.analytics-reference-controls .analytics-segmented{overflow-x:auto}.analytics-ref-customize{margin:0;width:100%} .analytics-reference-grid{grid-template-columns:1fr}.analytics-reference-grid .analytics-widget.size-small,.analytics-reference-grid .analytics-widget.size-medium,.analytics-reference-grid .analytics-widget.size-large,.analytics-reference-grid .analytics-widget.size-full{grid-column:span 1} .analytics-reference-grid [data-widget-key="summary"] .analytics-pro-kpi-grid{grid-template-columns:1fr 1fr} .analytics-reference-grid .analytics-pro-map{height:310px} } /* Notification workspace: same production palette, responsive RTL-aware controls. */ .notification-grid{display:grid;grid-template-columns:minmax(300px,1fr) minmax(400px,1.6fr);gap:20px}.notification-wide{grid-column:1/-1}.notification-identity{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#edf4fa;border:1px solid #d6e3ef;padding:16px;border-radius:12px;margin-bottom:20px;color:var(--navy)}.notification-channel{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid #e8eef5}.notification-channel h3{margin:0 0 6px}.notification-channel p{margin:4px 0;font-size:13px;color:#607487}.notification-form{display:flex;flex-direction:column;gap:18px}.notification-form label,.notification-admin label{display:flex;flex-direction:column;gap:7px;font-weight:600;font-size:14px}.notification-check{display:flex!important;flex-direction:row!important;align-items:center;gap:9px;font-weight:500!important}.notification-check input{width:17px;height:17px;accent-color:var(--navy)}.notification-options{display:grid;gap:10px;max-height:190px;overflow:auto;background:#f7f9fc;border:1px solid #e1e8f0;border-radius:9px;padding:14px}.notification-two{display:grid;grid-template-columns:1fr 1fr;gap:15px}.notification-two>div{display:grid;gap:12px}.notification-balance{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.notification-balance div{display:grid;gap:7px;padding:13px;background:#f2f6fb;border-radius:9px}.notification-balance span{font-size:12px;color:#617485}.notification-balance b{font-size:19px;color:var(--navy)}.notification-warning{background:#fff5de;color:#805d10;padding:12px;border-radius:8px;font-size:13px}.notification-status{background:#edf3f9;padding:5px 9px;border-radius:6px;white-space:nowrap;font-size:12px}.notification-status[data-status=delivered],.notification-status[data-status=read]{background:#e4f4eb;color:#146c43}.notification-status[data-status=rejected],.notification-status[data-status=failed],.notification-status[data-status=unknown]{background:#fff0ee;color:#9e352b}.notification-admin{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}.notification-form small{font-weight:400;color:#607487}.notification-form p{font-size:13px;line-height:1.8;color:#607487}.notification-form .select{width:100%}@media(max-width:1000px){.notification-grid{grid-template-columns:1fr}.notification-admin{grid-template-columns:1fr 1fr}}@media(max-width:600px){.notification-two,.notification-admin{grid-template-columns:1fr}.notification-balance{grid-template-columns:1fr}.notification-channel{flex-wrap:wrap}} /* Account management */ [data-notification-view="settings"] .policy-panel,[data-notification-view="settings"] .history-panel,[data-notification-view="settings"] .admin-panel{display:none} [data-notification-view="settings"] .messaging-panel{grid-column:1/-1} .notification-channel h3{display:flex;gap:10px;align-items:center} .account-login{max-width:480px;margin:64px auto;padding:20px}.account-login form{display:grid;gap:18px;margin:24px 0}.account-login label{display:grid;gap:8px}.account-login input{width:100%;box-sizing:border-box}.login-symbol{color:var(--primary,#165675)}.account-login h1{font-size:24px}.account-login p,.account-login small{line-height:1.8}.account-login button{display:flex;align-items:center;justify-content:center;gap:8px} /* Shared account layout on every page */ body.analytics-reference-mode .topbar{display:flex} body.analytics-reference-mode .ai-fab{display:flex} body.analytics-reference-mode .page-root{padding:20px;max-width:1800px;margin:0 auto} .analytics-reference-shell{display:block;min-height:0;background:transparent} .analytics-reference-canvas{padding:0!important} .analytics-reference-grid{gap:16px!important} .analytics-reference-grid .panel,.analytics-reference-grid .analytics-card{min-width:0} .zone-import-report{padding:14px;margin:12px 0;border:1px solid #dce6ec;border-radius:10px;background:#fff;line-height:1.8;max-height:280px;overflow:auto} .zone-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.zone-actions p{margin:0;color:#64748b} .analytics-reference-grid .analytics-pro-table th,.analytics-reference-grid .analytics-pro-table td{font-size:12px;padding:9px 10px} .analytics-reference-grid .analytics-pro-card-head h3{font-size:14px} .analytics-reference-grid .analytics-pro-kpi span,.analytics-reference-grid .analytics-pro-kpi small{font-size:12px} .analytics-reference-grid .multi-line-chart text,.analytics-reference-grid .vbar-chart text{font-size:12px} .analytics-reference-hero{margin-bottom:16px} /* Navigation-ready dashboard KPIs: keyboard accessible, theme-compatible */ .kpi-link{font:inherit;text-align:inherit;color:inherit;cursor:pointer;width:100%;border:1px solid var(--border, #e2e8f0);appearance:none;} .kpi-link:hover{border-color:var(--navy,#183B57);box-shadow:0 4px 18px rgba(24,59,87,.1);transform:translateY(-1px);} .kpi-link:focus-visible,.nav-btn:focus-visible{outline:3px solid var(--gold,#D6AA45);outline-offset:2px;} @media(prefers-reduced-motion:reduce){.kpi-link{transition:none;transform:none!important}} /* SIMATRACK 12.2: spacious yet data-dense responsive dashboard */ .modern-dashboard{grid-template-columns:repeat(12,minmax(0,1fr));gap:14px;align-items:start} .modern-dashboard>.panel{grid-column:span 4;min-width:0;height:auto;align-self:start} .modern-dashboard>.panel.span-2{grid-column:span 8} .modern-dashboard>.panel.span-3{grid-column:1/-1} .modern-dashboard>.panel .panel-body{min-height:0} .modern-dashboard .dashboard-map-panel{grid-column:span 8} .modern-dashboard .attention-panel{grid-column:span 4} .modern-dashboard .empty-chart,.modern-dashboard .empty-state-compact{min-height:90px;display:flex;align-items:center;justify-content:center} .vehicle-card{position:relative;min-width:0} .vehicle-icon-edit{position:absolute;inset-inline-end:12px;top:71px;display:grid;place-items:center;width:27px;height:27px;border-radius:8px;border:1px solid #d6e2ed;background:white;cursor:pointer;z-index:1;color:#274765} .vehicle-avatar{overflow:hidden;flex-shrink:0}.vehicle-custom-art{height:100%;width:100%;object-fit:contain;padding:4px;box-sizing:border-box} .simatrack-icon-dialog{width:min(720px,calc(100% - 24px));max-height:85vh;border:1px solid #d7e2ee;border-radius:16px;padding:20px;background:#fff;color:#243c52;box-shadow:0 18px 70px #122c4260} .simatrack-icon-dialog::backdrop{background:#061b2ca8} .simatrack-icon-dialog h2{font-size:19px;margin:0 0 8px}.simatrack-icon-dialog p{font-size:13px;margin:0 0 16px;line-height:1.8;color:#5a6b7c} .vehicle-icon-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:9px;max-height:53vh;overflow:auto;padding:8px} .vehicle-icon-choice{min-height:82px;display:grid;place-items:center;border:1px solid #dce5ef;border-radius:10px;background:#f6f9fc;cursor:pointer} .vehicle-icon-choice img{width:72px;height:72px;object-fit:contain}.vehicle-icon-choice:hover,.vehicle-icon-choice.selected{border-color:#1773a5;box-shadow:0 0 0 2px #1773a526} .vehicle-icon-default{padding:9px 13px;border-radius:8px;border:1px solid #d0deea;background:white;margin:12px 8px 0 0;cursor:pointer} @media(max-width:1100px){.modern-dashboard>.panel,.modern-dashboard>.panel.span-2,.modern-dashboard .dashboard-map-panel,.modern-dashboard .attention-panel{grid-column:span 6}} @media(max-width:720px){.modern-dashboard{grid-template-columns:minmax(0,1fr)}.modern-dashboard>.panel,.modern-dashboard>.panel.span-2,.modern-dashboard>.panel.span-3,.modern-dashboard .dashboard-map-panel,.modern-dashboard .attention-panel{grid-column:1/-1}} @media(prefers-reduced-motion:reduce){.vehicle-icon-choice,.vehicle-icon-edit{transition:none}} /* V12.3: adaptive, denser information architecture and explicit data provenance */ :root{--v123-ink:#173249;--v123-muted:#64798b;--v123-line:#dce6ef} .modern-dashboard{grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;align-items:start;grid-auto-flow:row dense} .modern-dashboard>.panel{grid-column:span 4;align-self:start;min-width:0;height:fit-content;overflow:hidden} .modern-dashboard>.panel.span-2{grid-column:span 8} .modern-dashboard>.panel.span-3{grid-column:1/-1} .modern-dashboard>.dashboard-map-panel{grid-column:span 8} .modern-dashboard .panel-head{padding:14px 16px 10px} .modern-dashboard .panel-head h2{font-size:15px;line-height:1.35} .modern-dashboard .panel-head small{font-size:12px;line-height:1.6} .modern-dashboard .panel-body{padding:10px 14px 15px;min-height:0!important} .modern-dashboard .map-shell-dashboard{height:clamp(350px,34vw,510px)} .modern-dashboard .attention-panel .panel-body{max-height:510px;overflow:auto} .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px} .kpi-grid .kpi-card{min-height:94px;display:flex;align-items:center;gap:14px;padding:13px 16px;min-width:0} .kpi-grid .meta{min-width:0} .kpi-grid .meta b{font-size:clamp(21px,2.2vw,30px);line-height:1.2} .kpi-grid .meta small{white-space:normal;line-height:1.4} .v123-empty{padding:26px 18px;border:1px dashed var(--v123-line);border-radius:10px;color:var(--v123-muted);background:#f9fbfd;text-align:center;font-size:13px;line-height:1.85} .v123-report-notice{padding:16px 18px;border:1px solid #f0d9a5;border-radius:10px;background:#fff9ec;color:#76551c;margin-bottom:14px;line-height:1.7} .v123-report-empty{min-height:240px;display:grid;place-items:center;text-align:center} .v123-report-empty>div{max-width:520px} .modern-dashboard .live-fleet-table-wrap{overflow:auto;max-height:510px} .modern-dashboard .live-fleet-table{min-width:1180px} @media(max-width:1250px){.modern-dashboard>.panel,.modern-dashboard>.panel.span-2,.modern-dashboard>.dashboard-map-panel{grid-column:span 6}.modern-dashboard>.panel.span-3{grid-column:1/-1}} @media(max-width:800px){.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.modern-dashboard{grid-template-columns:1fr}.modern-dashboard>.panel,.modern-dashboard>.panel.span-2,.modern-dashboard>.panel.span-3,.modern-dashboard>.dashboard-map-panel{grid-column:1/-1}.modern-dashboard .map-shell-dashboard{height:380px}} @media(max-width:480px){.kpi-grid{gap:8px}.kpi-grid .kpi-card{padding:10px;min-height:84px}.modern-dashboard .map-shell-dashboard{height:310px}} /* SIMATRACK V13 — Operations workspace. Intentionally scoped; previous pages preserved. */ .v13-dashboard{--v13-ink:#14283d;--v13-muted:#6f7f90;--v13-stroke:#e0e8f0;--v13-surface:#fff;max-width:1760px;margin:0 auto;padding:12px 14px 36px;color:var(--v13-ink);font-family:inherit} .v13-dashboard *{box-sizing:border-box}.v13-dashboard button{font:inherit;cursor:pointer}.v13-dashboard button:focus-visible{outline:3px solid #3485d6;outline-offset:2px} .v13-hero{display:flex;justify-content:space-between;gap:18px;align-items:center;padding:13px 2px 20px}.v13-eyebrow{font-size:12px;letter-spacing:.14em;font-weight:800;color:#4380ab}.v13-hero h1{margin:5px 0 5px;font-size:clamp(23px,2vw,32px);font-weight:800;line-height:1.3;letter-spacing:-.02em}.v13-hero p{font-size:12px;color:var(--v13-muted);margin:0}.v13-period{border:1px solid var(--v13-stroke);border-radius:12px;background:#fff;display:flex;align-items:center;gap:9px;padding:10px 13px;font-size:12px;white-space:nowrap}.v13-period small{font-size:12px;color:var(--v13-muted)} .v13-stat-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-bottom:14px}.v13-stat{position:relative;text-align:start;display:flex;flex-direction:column;align-items:stretch;gap:10px;background:var(--v13-surface);border:1px solid var(--v13-stroke);border-radius:14px;padding:16px 16px 13px;min-height:145px;color:var(--v13-ink);box-shadow:0 2px 10px rgba(31,56,79,.035);transition:border-color .18s,transform .18s,box-shadow .18s}.v13-stat:hover{border-color:#7baedb;box-shadow:0 8px 24px rgba(30,75,116,.09);transform:translateY(-2px)}.v13-stat-top{display:flex;align-items:center;gap:9px;color:#577085;font-size:12px;font-weight:700}.v13-stat-top svg{color:#236eaa}.v13-stat strong{font-size:clamp(27px,2.5vw,39px);font-weight:800;line-height:1}.v13-stat small{font-size:12px;color:var(--v13-muted);min-height:13px}.v13-stat-arrow{position:absolute;bottom:13px;inset-inline-end:13px;color:#8ea2b1}.v13-stat.good .v13-stat-top svg{color:#13976b}.v13-stat.danger .v13-stat-top svg{color:#d75060} .v13-workspace{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(310px,.85fr);gap:14px;margin-bottom:14px;align-items:stretch}.v13-block{min-width:0;background:var(--v13-surface);border:1px solid var(--v13-stroke);border-radius:16px;box-shadow:0 3px 13px rgba(31,56,79,.03);overflow:hidden}.v13-block-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 19px 13px;border-bottom:1px solid #eff3f7}.v13-block-head h2{margin:0;font-size:15px;font-weight:800;color:var(--v13-ink)}.v13-block-head p{margin:4px 0 0;font-size:12px;color:var(--v13-muted)}.v13-block-content{padding:15px 18px;min-width:0}.v13-map-block .v13-block-content{padding:0}.v13-map-toolbar{height:40px;padding:0 15px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #edf1f5}.v13-live-tag{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:#158865;letter-spacing:.04em}.v13-live-tag i{width:7px;height:7px;background:#16a06c;border-radius:50%}.v13-outline-btn,.v13-text-btn{border:0;background:transparent;color:#2875ab;font-size:12px!important;font-weight:800;display:flex;align-items:center;gap:5px}.v13-outline-btn:hover,.v13-text-btn:hover{text-decoration:underline}.v13-map{height:470px!important;min-height:400px;border:0;border-radius:0;overflow:hidden}.v13-vehicles-block .v13-block-content{padding:0 12px}.v13-vehicle-list{display:flex;flex-direction:column}.v13-vehicle{display:flex;align-items:center;gap:10px;text-align:start;padding:11px 5px;border:0;background:transparent;border-bottom:1px solid #eff3f7;min-width:0;width:100%}.v13-vehicle:last-child{border-bottom:0}.v13-vehicle:hover{background:#f6fafd}.v13-vehicle-art{width:46px;height:40px;flex:none;background:#f0f5f9;border-radius:9px;display:flex;align-items:center;justify-content:center;overflow:hidden}.v13-vehicle-art img{max-width:100%;max-height:100%;object-fit:contain}.v13-vehicle-meta{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.v13-vehicle-meta b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px}.v13-vehicle-meta small{color:#8593a0;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.v13-vehicle-speed{min-width:58px;text-align:end;font-size:13px;font-weight:800}.v13-vehicle-speed small{font-size:12px;color:#8c9eae}.v13-state{display:inline-flex;gap:5px;align-items:center;white-space:nowrap;color:#65788a;font-size:12px}.v13-state i{width:7px;height:7px;border-radius:50%;background:#9daab5}.v13-state.moving i,.v13-state.online i{background:#13a773}.v13-state.idle i{background:#f0a439}.v13-state.offline i{background:#e25f6c}.v13-state.parked i,.v13-state.stopped i{background:#4386c2} .v13-insights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}.v13-insights .v13-block-content{min-height:205px}.v13-distribution{display:grid;gap:16px;padding:4px 0 8px}.v13-dist-row{display:grid;grid-template-columns:85px minmax(0,1fr) 30px;align-items:center;gap:12px;font-size:12px}.v13-dist-row b{text-align:end;font-size:12px}.v13-track{height:9px;border-radius:99px;background:#eff3f7;overflow:hidden}.v13-track i{display:block;height:100%;border-radius:99px}.v13-data-caption{margin:14px 0 0;font-size:12px;color:#8494a2;line-height:1.5}.v13-event-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.v13-event-item{border:1px solid #ebf0f4;border-radius:10px;background:#fafcfe;padding:13px;text-align:start;display:flex;justify-content:space-between;gap:8px;align-items:center;color:var(--v13-ink)}.v13-event-item span{font-size:12px;color:#64788a}.v13-event-item strong{font-size:23px}.v13-event-item:hover{border-color:#85b2d4}.v13-no-data{display:flex;align-items:center;gap:10px;padding:18px 10px;color:#7c8e9e;font-size:12px;line-height:1.6}.v13-attention-list{display:grid;gap:2px}.v13-attention{width:100%;border:0;border-bottom:1px solid #edf1f5;background:transparent;text-align:start;display:flex;align-items:center;gap:9px;padding:10px 3px}.v13-attention span:nth-child(2){flex:1;display:grid;gap:4px}.v13-attention b{font-size:12px}.v13-attention small{font-size:12px;color:#8294a5}.v13-priority{height:8px;width:8px;border-radius:50%;background:#e4a33c}.v13-priority.critical,.v13-priority.high{background:#df5360}.v13-full-table .v13-block-content{padding:0}.v13-table-scroller{width:100%;overflow:auto}.v13-table{width:100%;border-collapse:collapse;font-size:12px;text-align:start}.v13-table th{text-align:start;white-space:nowrap;background:#f7fafc;color:#738496;padding:13px 16px;border-bottom:1px solid #e8eef3}.v13-table td{padding:12px 16px;border-bottom:1px solid #edf1f5;white-space:nowrap}.v13-table tr[data-open-vehicle]{cursor:pointer}.v13-table tbody tr:hover{background:#f5f9fc} @media(max-width:1199px){.v13-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.v13-stat{min-height:126px}.v13-insights{grid-template-columns:repeat(2,minmax(0,1fr))}.v13-insights .v13-block:last-child{grid-column:1/-1}.v13-workspace{grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr)}} @media(max-width:900px){.v13-workspace,.v13-insights{grid-template-columns:1fr}.v13-insights .v13-block:last-child{grid-column:auto}.v13-hero{align-items:flex-start;flex-direction:column}.v13-period{white-space:normal}.v13-map{height:410px!important}} @media(max-width:560px){.v13-dashboard{padding:8px 7px 24px}.v13-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.v13-stat{padding:11px;min-height:114px}.v13-stat strong{font-size:29px}.v13-stat-top{font-size:12px}.v13-block-head{padding:13px}.v13-block-content{padding:12px}.v13-map{height:325px!important}.v13-vehicle-speed{min-width:45px}.v13-vehicle-art{width:37px;height:35px}} /* V13.1: dense operations workbench + readable vehicle modal/report states */ @media(min-width:1100px){ .v13-report-layout{grid-template-columns:minmax(220px,270px) minmax(0,1fr)!important;align-items:start;gap:18px!important} .v13-report-layout .report-catalog{max-height:calc(100vh - 172px);overflow:auto;position:sticky;top:96px} .v13-report-layout .report-workbench{min-width:0} } .v13-catalog-empty{padding:20px;line-height:1.7;border:1px dashed #b9c7d6;border-radius:12px;background:#f7fafc;color:#42566d} .profile-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:16px} .vehicle-profile .profile-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:10px} .vehicle-profile .profile-tabs{display:flex;flex-wrap:wrap;gap:6px;position:sticky;top:0;z-index:3;background:var(--surface,#fff);padding:9px 0} .vehicle-profile .profile-section{min-width:0} .vehicle-profile .profile-analysis-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px} .vehicle-profile .profile-section .table-wrap{max-width:100%;overflow:auto} .vehicle-profile .profile-section-head small{line-height:1.4} @media(max-width:850px){.vehicle-profile .profile-analysis-grid{grid-template-columns:minmax(0,1fr)}.v13-report-layout{display:block}.v13-report-layout .report-catalog{position:static;max-height:250px;overflow:auto;margin-bottom:14px}} /* V13.2 analytics: data provenance and operational information density */ .v132-data-disclosure{display:flex;align-items:flex-start;gap:9px;padding:12px 15px;margin:10px 0 15px;border:1px solid #cfdfea;border-radius:12px;background:#f2f7fc;color:#27445f;font-size:12px;line-height:1.8} .v132-data-disclosure svg{flex-shrink:0;margin-top:3px} .analytics-reference-grid{align-items:start;grid-auto-flow:row dense} .analytics-reference-grid>.analytics-widget{min-width:0;align-self:start;overflow:hidden} .analytics-reference-grid .analytics-pro-card-body{min-width:0} .analytics-pro-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(158px,1fr))} .analytics-reference-grid .analytics-pro-empty{min-height:105px;display:flex;justify-content:center;align-items:center;padding:16px;text-align:center} .analytics-reference-grid .analytics-pro-card-head{gap:10px;align-items:flex-start} .analytics-reference-grid .analytics-pro-card-head h2{overflow-wrap:anywhere} @media(max-width:900px){.analytics-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.analytics-reference-grid>.analytics-widget{grid-column:1/-1}} @media(max-width:560px){.analytics-reference-grid{grid-template-columns:minmax(0,1fr)}.analytics-pro-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v132-data-disclosure{font-size:12px;padding:10px}} /* V13.4 original map markers: consistent footprint and state ring */ .vehicle-icon-choice img{width:65px;height:65px;object-fit:contain} /* V13.5: consistent design tokens and compact information density */ :root{--sim-gap:12px;--sim-radius:14px;--sim-border:#e0e8ef} .v13-dashboard,.analytics-page,.fleet-page,.report-page{min-width:0} .v13-stat-grid,.v13-workspace,.v13-insights,.analytics-reference-grid,.analytics-pro-kpi-grid{gap:var(--sim-gap)!important} .v13-stat,.v13-block,.analytics-widget,.vehicle-card{border-radius:var(--sim-radius);min-width:0;box-sizing:border-box} .v13-stat{min-height:114px;padding:13px} .v13-insights .v13-block-content{min-height:0} .v13-vehicle-list{max-height:470px;overflow-y:auto;overscroll-behavior:contain} .v13-map{height:430px!important;min-height:330px} .v13-dashboard :is(h1,h2,h3,p,small,b,span){overflow-wrap:break-word} .vehicle-custom-art{object-fit:contain;image-rendering:auto} .plate.registration-plate{max-width:100%;overflow:hidden} .plate.registration-plate b{white-space:normal;overflow-wrap:anywhere;unicode-bidi:plaintext} @media(max-width:1199px){.v13-stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.v13-insights{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:780px){.v13-workspace,.v13-insights{grid-template-columns:minmax(0,1fr)}.v13-insights .v13-block:last-child{grid-column:auto}.v13-map{height:360px!important}.v13-vehicle-list{max-height:380px}} @media(max-width:560px){.v13-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.v13-stat{min-height:108px;padding:11px}.v13-map{height:320px!important}} /* Shared map tools */ .map-provider-notice{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);z-index:1000;background:white;padding:8px 12px;border-radius:8px;max-width:80%;box-shadow:var(--shadow);font-size:12px} .map-track-toolbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;align-items:center}.map-track-toolbar input,.map-track-toolbar select{padding:8px;border:1px solid var(--line);border-radius:8px;max-width:100%} @media(max-width:600px){.zones-layout .zone-list{max-height:200px}.map-track-toolbar{gap:6px}.map-track-toolbar input{min-width:0;flex:1 1 180px}.map-shell{min-height:420px}} /* Self-hosted MapLibre: WebGL layers avoid one DOM marker per vehicle. */ .maplibregl-map{font:inherit;direction:ltr}.maplibregl-popup-content{direction:rtl;border-radius:12px;font:13px "Segoe UI",Tahoma,sans-serif}.maplibregl-popup .map-popup{display:grid;gap:6px}.maplibregl-popup .map-popup a{color:var(--blue)} .map-fit-control{position:absolute;top:10px;right:10px;z-index:2;background:white}.maplibregl-canvas{outline:none}.map-shell:fullscreen{width:100vw!important;height:100vh!important}.maplibregl-ctrl-attrib{direction:ltr;font-size:12px} /* Shared original artwork and bidi-safe Saudi registration cells. */ .plate.saudi-plate{display:block;position:relative;aspect-ratio:944.72/432.86;min-height:0;width:100%;border:0;border-radius:5px;overflow:hidden;background:transparent;direction:ltr;container-type:inline-size;} .plate-template{display:block;width:100%;height:100%;object-fit:fill;} .plate-registration{position:absolute;inset:3% 18% 3% 2%;display:grid;grid-template-rows:1fr 1fr;color:#231f20;} .plate-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;text-align:center;gap:4px;white-space:nowrap;} .plate-row b{font-size:clamp(12px,11cqw,24px);line-height:1.15;font-family:"Noto Sans Arabic",Tahoma,Arial,sans-serif;letter-spacing:1px;} .vehicle-state-art{width:22px;height:22px;object-fit:contain;flex:0 0 auto;vertical-align:middle;margin-inline-end:5px;} .status-chip{display:inline-flex;align-items:center;gap:3px;} .vehicle-display-controls{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-block-end:14px;} .vehicle-display-controls select{font:inherit;padding:7px;border:1px solid var(--line);border-radius:7px;background:var(--surface);color:var(--ink);} .map-zone-control{position:absolute;inset-inline-start:12px;bottom:45px;z-index:2;} .map-zone-control[aria-pressed=true]{background:var(--ink);color:var(--surface);} @media(max-width:600px){.plate-row b{font-size:clamp(12px,11cqw,24px);}.vehicle-display-controls{align-items:stretch;}.vehicle-display-controls label{width:100%;}} /* Shared design tokens: readable controls, deliberate spacing, RTL and touch targets. */ :root{--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--radius:14px} html,body{font-size:14px;line-height:1.55} .page-root{padding:24px;max-width:1680px}.page-head{margin-bottom:24px}.page-head p{font-size:13px} .nav-btn{font-size:13px;min-height:42px;padding:10px 12px}.topbar{flex-wrap:wrap;gap:12px;padding:12px 20px}.main-nav{flex:1 1 680px}.top-actions{flex-wrap:wrap}.period-control{flex-wrap:wrap} .primary-btn,.soft-btn,.export-btn,.period-btn,.select,.lang-switch button{font-size:13px;min-height:38px}.icon-btn,.dialog-close{min-width:40px;min-height:40px} .panel-head{padding:16px 20px}.panel-head h2{font-size:16px}.panel-body{padding:20px}.panel-head small,.kpi-card span{font-size:13px}.kpi-card small{font-size:12px;white-space:normal}.kpi-card b{font-size:28px} .data-table{font-size:13px}.data-table th,.data-table td{padding:12px 14px}.data-table td small{font-size:12px} button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #2B6CB0;outline-offset:3px} button:disabled{cursor:not-allowed}.summary-error{padding:16px 20px;margin-bottom:20px}.summary-error p{overflow-wrap:anywhere} .settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.settings-grid dl{display:grid;grid-template-columns:auto 1fr;gap:12px}.settings-grid dd{margin:0;overflow-wrap:anywhere}.settings-grid button{margin:4px} .vehicle-command-box{padding:16px;border:1px solid var(--line);border-radius:12px;margin:16px 0}.vehicle-command-box p{overflow-wrap:anywhere} @media(max-width:760px){.page-root{padding:16px}.topbar{padding:8px 12px;gap:8px}.main-nav{flex-basis:100%}.top-actions{width:100%;justify-content:space-between}.page-head{align-items:flex-start;flex-wrap:wrap}.panel-head,.panel-body{padding:16px}.settings-grid{grid-template-columns:1fr}.vehicle-profile-head{gap:12px}.vehicle-actions{flex-wrap:wrap}.vehicle-dialog{max-width:calc(100vw - 20px)}.period-btn{padding:6px 8px}} @media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}} .camera-channels video,.camera-channels iframe{width:100%;max-height:420px;border:0;border-radius:12px;background:#102A3E}.camera-channels iframe{height:350px}.command-options{display:flex;gap:8px;flex-wrap:wrap}.command-confirmation{flex-basis:100%;padding:12px;background:var(--surface-2)} .notification-grid .messaging-panel{display:block}.notification-grid{gap:20px}.v13-insights .v13-block-content{min-height:140px}.v13-vehicles-block .v13-block-content{min-height:0}.v13-map{height:400px!important;min-height:300px} /* Analytics cards must have enough room for their contents. */ .analytics-reference-grid{grid-template-columns:repeat(12,minmax(0,1fr));gap:20px!important} .analytics-reference-grid .analytics-widget.size-small{grid-column:span 3} .analytics-reference-grid .analytics-widget.size-medium,.analytics-reference-grid .analytics-widget.size-large{grid-column:span 6} .analytics-reference-grid .analytics-widget.size-full{grid-column:1/-1} .analytics-reference-grid .analytics-pro-card-head{padding:14px 16px}.analytics-reference-grid .analytics-pro-card-head h2{font-size:15px} .analytics-reference-grid .analytics-pro-card-body{padding:16px;min-height:0} .analytics-reference-grid .analytics-health-grid,.analytics-reference-grid [data-widget-key="deviceHealth"] .analytics-health-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .analytics-reference-grid [data-widget-key="deviceHealth"] .gauge-card:nth-child(n+4){display:grid} .analytics-reference-grid .gauge-ring{width:88px;height:88px;max-width:100%}.analytics-reference-grid .analytics-inline-kpis{grid-template-columns:1fr}.analytics-inline-kpis .analytics-pro-kpi{min-height:56px} @media(max-width:1100px){.analytics-reference-grid .analytics-widget.size-small{grid-column:span 6}} @media(max-width:760px){.analytics-reference-grid{grid-template-columns:1fr}.analytics-reference-grid .analytics-widget.size-small,.analytics-reference-grid .analytics-widget.size-medium,.analytics-reference-grid .analytics-widget.size-large,.analytics-reference-grid .analytics-widget.size-full{grid-column:1/-1}} .notification-grid{align-items:start}