/* cams.css — RoyalTrax styles */

:root {
  --bg:       #E8ECF4;
  --surface:  #1B3A6B;
  --card:     #FFFFFF;
  --card2:    #F0F3F9;
  --border:   #C8D3E0;
  --border2:  #A8B8CC;
  --accent:   #E8960F;
  --accent2:  #F5A623;
  --blue:     #3872C8;
  --text:     #1A2540;
  --muted:    #7A8A9E;
  --muted2:   #5A6A80;
  --danger:   #DC2626;
  --success:  #059669;
  --warn:     #D97706;
  --info:     #2563EB;
  --offline:  #9CA3AF;
  --mono:     'JetBrains Mono', monospace;
  --head:     'Barlow Condensed', sans-serif;
  --sidebar:  260px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;overflow:hidden;}
body{background:var(--bg);color:var(--text);font-family:var(--mono);font-size:13px;display:flex;flex-direction:column;}

/* ============ TOPBAR ============ */
header{
  height:50px;background:var(--surface);border-bottom:1px solid rgba(0,0,0,.15);
  display:flex;align-items:center;padding:0 16px;gap:16px;flex-shrink:0;z-index:100;
  color:#FFFFFF;
}
.logo{font-family:var(--head);font-size:20px;font-weight:800;letter-spacing:2px;color:#1B3A6B;display:flex;align-items:center;gap:8px;white-space:nowrap;}
.logo em{color:var(--accent);font-style:normal;}
.logo-dot{width:8px;height:8px;background:var(--accent);border-radius:50%;animation:blink 2s infinite;}
@keyframes blink{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.6);}}

.breadcrumb{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.6);}
.bc-sep{color:var(--muted);font-size:11px;}
.bc-item{cursor:pointer;padding:3px 8px;border-radius:3px;transition:all .15s;white-space:nowrap;}
.bc-item:hover{color:#fff;background:rgba(255,255,255,.1);}
.bc-item.active{color:var(--accent);font-weight:600;}
.bc-item.root{color:rgba(255,255,255,.6);}
.bc-item.root:hover{color:#fff;}

.hdr-spacer{flex:1;}
.hdr-user{font-size:12px;color:rgba(255,255,255,.7);letter-spacing:.5px;}

.fleet-strip{display:flex;align-items:center;gap:14px;}
.fs-pill{display:flex;align-items:center;gap:6px;font-size:12px;color:rgba(255,255,255,.7);}
.fs-dot{width:7px;height:7px;border-radius:50%;}
.fs-dot.ok{background:var(--success);box-shadow:0 0 5px var(--success);}
.fs-dot.warn{background:var(--warn);}
.fs-dot.stopped{background:#6b7280;}
.fs-dot.err{background:var(--danger);}
.fs-dot.off{background:var(--muted);}
.fs-num{font-weight:700;color:#fff;}

.notif-btn{position:relative;width:34px;height:34px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:rgba(255,255,255,.7);}
.notif-btn:hover{border-color:var(--accent);color:var(--accent);}
.notif-badge{position:absolute;top:-4px;right:-4px;width:16px;height:16px;background:var(--danger);border-radius:50%;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;color:#fff;border:2px solid var(--bg);}
.notif-badge.hidden{display:none;}

.logout-btn{width:34px;height:34px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:5px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s;color:rgba(255,255,255,.7);}
.logout-btn:hover{border-color:var(--danger);color:var(--danger);}

/* ============ BODY LAYOUT ============ */
.app-body{display:flex;flex:1;overflow:hidden;}

/* ============ FLEET SIDEBAR ============ */
.fleet-sidebar{
  width:var(--sidebar);flex-shrink:0;
  background:var(--card);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow:hidden;
}
.sidebar-header{
  padding:10px 14px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.sidebar-title{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);}
.sidebar-count{margin-left:auto;font-size:12px;color:var(--muted);background:var(--card);border:1px solid var(--border2);padding:2px 7px;border-radius:10px;}

.search-bar{padding:8px 10px;border-bottom:1px solid var(--border);flex-shrink:0;}
.search-input{width:100%;background:var(--card);border:1px solid var(--border2);color:var(--text);font-family:var(--mono);font-size:12px;padding:5px 10px;border-radius:4px;outline:none;}
.search-input::placeholder{color:var(--muted);}
.search-input:focus{border-color:var(--accent);}
.show-all-btn{width:100%;background:none;border:1px solid var(--border2);color:var(--muted2);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:5px 0;margin:6px 0 2px;border-radius:4px;cursor:pointer;transition:all .15s;}
.show-all-btn:hover{border-color:var(--accent);color:var(--accent);}

.vehicle-list{flex:1;overflow-y:auto;padding:6px 0;}
.vehicle-list::-webkit-scrollbar{width:3px;}
.vehicle-list::-webkit-scrollbar-thumb{background:var(--border2);}

.v-card{
  padding:10px 14px;cursor:pointer;border-bottom:1px solid rgba(255,255,255,.03);
  display:flex;flex-direction:column;gap:5px;transition:background .15s;
  border-left:3px solid transparent;
}
.v-card:hover{background:var(--card);}
.v-card.selected{background:var(--card2);border-left-color:var(--accent);}
.v-card.alarm{border-left-color:var(--danger);}
.v-card.alarm.selected{border-left-color:var(--danger);}

.vc-top{display:flex;align-items:center;gap:7px;}
.vc-status{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.vc-status.moving{background:var(--success);box-shadow:0 0 4px var(--success);}
.vc-status.idle{background:var(--warn);}
.vc-status.alarm{background:var(--danger);box-shadow:0 0 6px var(--danger);animation:blink .8s infinite;}
.vc-status.offline{background:var(--muted);}
.vc-plate{font-family:var(--head);font-size:15px;font-weight:700;letter-spacing:1px;color:var(--text);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vc-spd{color:var(--accent);font-weight:600;flex-shrink:0;font-size:12px;}
.vc-spd.zero{color:var(--muted2);}

.vc-mid{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted2);}
.vc-driver{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;}
.vc-evt{flex-shrink:0;font-weight:600;font-size:11px;letter-spacing:.3px;}

.vc-bot{font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.vc-time{font-size:11px;color:var(--muted);letter-spacing:.3px;margin-top:1px;}

.vc-progress{height:2px;background:var(--border);border-radius:1px;margin-top:2px;}
.vc-progress-fill{height:100%;border-radius:1px;transition:width .5s;}

/* ============ MAIN CONTENT ============ */
.main-content{flex:1;display:flex;flex-direction:column;overflow:hidden;}

/* Fleet Overview */
#view-fleet{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.fleet-map-wrap{flex:1;position:relative;}
#fleet-map{width:100%;height:100%;}
.fleet-stats-bar{
  flex-shrink:0;background:var(--surface);border-top:1px solid var(--border);
  display:flex;padding:0;
}
.fstat{flex:1;padding:8px 16px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:1px;}
.fstat:last-child{border-right:none;}
.fstat-label{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.fstat-val{font-family:var(--head);font-size:20px;font-weight:700;line-height:1;}
.fstat-val.ok{color:var(--success);}
.fstat-val.warn{color:var(--warn);}
.fstat-val.err{color:var(--danger);}

/* Fleet heartbeat ribbon */
.fleet-heartbeat{
  flex-shrink:0;background:var(--card);border-top:1px solid var(--border);
  display:flex;align-items:center;padding:6px 16px;gap:18px;
}
.hb-stat{display:flex;align-items:baseline;gap:5px;}
.hb-label{font-size:12px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;}
.hb-val{font-family:var(--head);font-size:15px;font-weight:700;color:var(--text);line-height:1;}
.hb-val.accent{color:var(--accent);}
.hb-val.ok{color:var(--success);}
.hb-val.warn{color:var(--warn);}
.hb-val.err{color:var(--danger);}
.hb-unit{font-size:12px;color:var(--muted2);}
.hb-sub{font-size:12px;color:var(--muted2);}
.hb-sep{width:1px;height:20px;background:var(--border2);flex-shrink:0;}

/* Vehicle Detail View */
#view-vehicle{flex:1;display:flex;flex-direction:column;overflow:hidden;display:none;}
.vehicle-detail-body{flex:1;display:flex;overflow:hidden;}

/* Detail main area (map + bottom data) */
.detail-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

/* Vehicle controls header */
.vehicle-header{height:38px;background:var(--surface);border-bottom:1px solid rgba(0,0,0,.15);display:flex;align-items:center;padding:0 14px;gap:8px;flex-shrink:0;color:#fff;}
.vhdr-label{font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.5);}
.vhdr-sep{width:1px;height:18px;background:rgba(255,255,255,.15);margin:0 2px;}
.vhdr-date,.vhdr-time{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:#fff;font-family:var(--mono);font-size:12px;padding:3px 6px;border-radius:4px;outline:none;cursor:pointer;}
.vhdr-date{width:115px;}
.vhdr-time{width:120px;}
.vhdr-date:focus,.vhdr-time:focus{border-color:var(--accent);}
.vhdr-status{font-size:11px;color:rgba(255,255,255,.6);letter-spacing:.4px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;position:relative;cursor:default;}
.vhdr-status:hover{overflow:visible;z-index:50;}
.vhdr-status:hover::after{content:attr(data-full);position:absolute;left:0;top:100%;margin-top:4px;background:var(--card);border:1px solid var(--accent);color:var(--text);padding:6px 10px;border-radius:6px;font-size:11px;white-space:nowrap;z-index:100;box-shadow:0 4px 16px rgba(0,0,0,.5);pointer-events:none;}
.trail-pts-label{font-size:11px;color:var(--muted);margin-left:auto;letter-spacing:.5px;}

.panel-header{height:38px;background:var(--card2);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 14px;gap:10px;flex-shrink:0;}
.panel-title{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:2px;color:var(--muted2);text-transform:uppercase;}
.vehicle-header .panel-title{color:rgba(255,255,255,.7);}
.vehicle-header .panel-accent{color:var(--accent);}
.panel-accent{color:var(--accent);}

.ch-sel{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);color:var(--accent);font-family:var(--mono);font-size:12px;padding:3px 8px;border-radius:4px;cursor:pointer;outline:none;}

.stream-ctrl-btn{padding:4px 12px;font-family:var(--mono);font-size:12px;font-weight:700;border:none;border-radius:4px;cursor:pointer;transition:all .15s;background:var(--accent);color:#000;display:flex;align-items:center;gap:5px;letter-spacing:.5px;text-transform:uppercase;}
.stream-ctrl-btn:hover{background:var(--accent2);color:#000;}
.stream-ctrl-btn.active{background:var(--danger);border:none;color:#fff;}

/* Stream modal (live video overlay) */
.stream-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);}
.stream-modal.open{display:flex;}
.stream-modal-content{width:90%;max-width:820px;background:var(--card);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.2);}
.stream-modal-hdr{padding:8px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.stream-modal-title{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:1px;color:var(--text);}
.stream-modal-close{background:none;border:none;color:var(--muted2);cursor:pointer;font-size:20px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s;}
.stream-modal-close:hover{background:var(--card);color:var(--text);}
.stream-modal-body{position:relative;background:#000;min-height:400px;display:flex;align-items:center;justify-content:center;overflow:hidden;}
.stream-modal-body::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.1) 3px,rgba(0,0,0,.1) 4px);pointer-events:none;z-index:2;}
.stream-modal-body video{width:100%;height:100%;object-fit:contain;display:none;position:relative;z-index:1;}

.live-badge{background:var(--danger);color:#fff;font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:2px;padding:3px 10px;border-radius:3px;display:none;align-items:center;gap:5px;}
.live-badge.show{display:flex;}
.live-pulse{width:6px;height:6px;border-radius:50%;background:#fff;animation:blink 1s infinite;}

.vid-overlay{position:absolute;bottom:12px;left:12px;right:12px;z-index:5;display:flex;justify-content:space-between;align-items:flex-end;}
.vid-infobox{background:rgba(0,0,0,.65);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.07);border-radius:4px;padding:5px 10px;font-size:12px;line-height:1.6;}
.vid-ts{color:var(--blue);font-weight:600;}
.vid-coord{color:var(--muted2);font-size:12px;}

.no-signal{text-align:center;z-index:3;}
.no-signal svg{opacity:.12;margin-bottom:14px;}
.no-signal .ns-t{font-family:var(--head);font-size:20px;font-weight:700;letter-spacing:4px;color:var(--muted);display:block;}
.no-signal .ns-s{font-size:12px;color:var(--muted);letter-spacing:1px;margin-top:4px;display:block;}

.fetch-overlay{position:absolute;inset:0;z-index:10;background:rgba(0,0,0,.8);display:none;flex-direction:column;align-items:center;justify-content:center;}
.fetch-overlay.show{display:flex;}
.spinner{width:36px;height:36px;border:3px solid var(--border2);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite;margin-bottom:12px;}
@keyframes spin{to{transform:rotate(360deg);}}
.fetch-txt{font-family:var(--head);font-size:13px;letter-spacing:3px;text-transform:uppercase;color:var(--muted2);}

.stream-timer{font-size:12px;color:var(--accent);font-weight:600;display:none;background:rgba(0,0,0,.65);padding:3px 10px;border-radius:3px;border:1px solid rgba(245,158,11,.3);}

/* Delay disclaimer */
.vid-delay-note{display:none;position:absolute;bottom:42px;left:50%;transform:translateX(-50%);z-index:5;background:rgba(0,0,0,.75);border:1px solid rgba(245,158,11,.25);color:var(--accent);font-size:11px;font-weight:600;letter-spacing:.8px;padding:4px 12px;border-radius:3px;white-space:nowrap;text-transform:uppercase;}
.stream-modal-footer{display:none;padding:12px 16px;background:var(--surface);border-top:1px solid var(--border);align-items:center;justify-content:space-between;gap:12px;}
.smf-left{display:flex;align-items:center;gap:10px;}
.smf-select{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:8px 14px;font-size:13px;font-weight:600;cursor:pointer;outline:none;transition:border-color .2s;}
.smf-select:hover,.smf-select:focus{border-color:var(--accent);}
.smf-btn{border:none;padding:9px 20px;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;border-radius:6px;cursor:pointer;transition:all .2s;}
.smf-btn-switch{background:var(--accent);color:#000;box-shadow:0 2px 8px rgba(245,158,11,.25);}
.smf-btn-switch:hover{background:#d97706;transform:translateY(-1px);box-shadow:0 4px 12px rgba(245,158,11,.35);}
.smf-btn-stop{background:var(--danger);color:#fff;box-shadow:0 2px 8px rgba(239,68,68,.2);}
.smf-btn-stop:hover{background:#c0392b;transform:translateY(-1px);box-shadow:0 4px 12px rgba(239,68,68,.3);}
.smf-countdown{font-family:var(--mono,monospace);font-size:12px;font-weight:700;letter-spacing:1px;color:var(--muted2);white-space:nowrap;}
.smf-countdown span{color:var(--accent);font-size:14px;}

/* Stream connection steps */
.stream-steps{display:flex;flex-direction:column;align-items:flex-start;gap:10px;z-index:3;max-width:340px;width:100%;padding:0 20px;}
.stream-steps-title{font-family:var(--head);font-size:16px;font-weight:700;letter-spacing:3px;color:var(--muted);text-transform:uppercase;margin-bottom:6px;align-self:center;}
.stream-step{display:flex;align-items:center;gap:10px;opacity:.35;transition:opacity .4s,color .4s;}
.stream-step.active{opacity:1;}
.stream-step.done{opacity:.6;}
.stream-step-dot{width:10px;height:10px;border-radius:50%;border:2px solid var(--muted);flex-shrink:0;transition:all .3s;position:relative;}
.stream-step.active .stream-step-dot{border-color:var(--accent);background:var(--accent);box-shadow:0 0 8px var(--accent);animation:blink 1s infinite;}
.stream-step.done .stream-step-dot{border-color:var(--success);background:var(--success);box-shadow:none;animation:none;}
.stream-step-msg{font-size:12px;color:var(--muted2);transition:color .3s;}
.stream-step.active .stream-step-msg{color:var(--text);font-weight:600;}
.stream-step.done .stream-step-msg{color:var(--muted2);text-decoration:line-through;text-decoration-color:var(--muted);}
.stream-steps-note{font-size:11px;color:var(--muted);line-height:1.5;margin-top:10px;text-align:center;align-self:center;max-width:280px;}

/* timeline (playback — Phase 2) */
.timeline-section{flex-shrink:0;background:var(--surface);border-top:1px solid var(--border);padding:11px 14px 13px;display:none;}
.timeline-section.show{display:block;}
.tl-row1{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.tl-title{font-family:var(--head);font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);}
.tl-title em{color:var(--accent);font-style:normal;}
.date-inp{background:var(--card);border:1px solid var(--border2);color:var(--text);font-family:var(--mono);font-size:12px;padding:4px 8px;border-radius:4px;outline:none;}
.date-inp:focus{border-color:var(--accent);}
.tl-maxhint{margin-left:auto;font-size:12px;color:var(--muted);letter-spacing:.5px;}

.scrubber{position:relative;height:34px;background:var(--card);border:1px solid var(--border2);border-radius:4px;cursor:crosshair;overflow:hidden;margin-bottom:8px;}
.hour-marks{position:absolute;inset:0;display:flex;pointer-events:none;}
.hr-tick{flex:1;border-right:1px solid var(--border);display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;font-size:11px;color:var(--muted);}
.hr-tick:last-child{border-right:none;}
.ev-mark{position:absolute;top:0;bottom:0;width:3px;opacity:.75;cursor:pointer;transition:opacity .15s;}
.ev-mark:hover{opacity:1;width:4px;}
.ev-mark.danger{background:var(--danger);}
.ev-mark.warn{background:var(--warn);}
.ev-mark.info{background:var(--blue);}
.tl-sel{position:absolute;top:0;bottom:0;background:rgba(245,158,11,.12);border-left:2px solid var(--accent);border-right:2px solid var(--accent);pointer-events:none;display:none;}
.playhead{position:absolute;top:0;bottom:0;width:2px;background:var(--blue);box-shadow:0 0 5px var(--blue);pointer-events:none;}
.file-seg{position:absolute;top:0;bottom:0;background:var(--success);opacity:.35;pointer-events:none;border-radius:1px;min-width:2px;}

.tl-row2{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tl-lbl{font-size:12px;color:var(--muted);letter-spacing:.5px;min-width:26px;}
.time-inp{background:var(--card);border:1px solid var(--border2);color:var(--accent);font-family:var(--mono);font-size:12px;font-weight:600;padding:4px 7px;border-radius:4px;outline:none;width:88px;text-align:center;}
.time-inp:focus{border-color:var(--accent);}
.dur-box{background:var(--card);border:1px solid var(--border2);border-radius:4px;padding:4px 10px;font-size:12px;color:var(--muted2);display:flex;align-items:center;gap:5px;white-space:nowrap;}
.dur-val{font-weight:600;color:var(--text);}
.dur-val.over{color:var(--danger);}
.dur-val.ok{color:var(--success);}
.tl-warn{font-size:11px;color:var(--danger);display:none;}
.tl-warn.show{display:block;}
.tl-actions{display:flex;gap:8px;margin-left:auto;}

.btn{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:1px;padding:5px 16px;border-radius:4px;border:none;cursor:pointer;text-transform:uppercase;transition:all .15s;white-space:nowrap;}
.btn-primary{background:var(--accent);color:#000;font-weight:700;}
.btn-primary:hover{background:var(--accent2);color:#000;}
.btn-primary:disabled{opacity:.35;background:var(--muted);color:var(--muted2);cursor:not-allowed;}
.btn-ghost{background:transparent;border:1px solid var(--border2);color:var(--muted2);}
.btn-ghost:hover{border-color:var(--muted2);color:var(--text);}

/* Capture buttons */
.capture-btns{display:flex;gap:4px;}
.cap-btn{display:flex;align-items:center;gap:4px;padding:3px 10px;font-family:var(--mono);font-size:11px;font-weight:700;border:none;border-radius:4px;cursor:pointer;transition:all .15s;background:var(--accent);color:#000;text-transform:uppercase;letter-spacing:.5px;}
.cap-btn:hover{background:var(--accent2);color:#000;}
.cap-btn:disabled{opacity:.35;cursor:not-allowed;background:var(--muted);color:var(--muted2);}
.cap-btn.loading{background:var(--accent2);color:#000;pointer-events:none;}
.cap-btn.loading svg{animation:spin .8s linear infinite;}

/* Map panel (vehicle detail — full width in detail-main) */
.map-panel{flex:6;display:flex;flex-direction:column;overflow:hidden;min-height:0;}
#vehicle-map{flex:1;}
.map-stats{display:none;}

/* Media strip (recent captures/event thumbnails) */
.media-strip{flex:1;display:flex;align-items:flex-start;overflow-y:auto;}
.media-strip::-webkit-scrollbar{height:3px;}
.media-strip::-webkit-scrollbar-thumb{background:var(--border2);}
.media-strip-empty{font-size:11px;color:var(--muted);letter-spacing:.5px;text-align:center;width:100%;padding:20px 0;}
.media-grid{display:flex;flex-wrap:wrap;gap:6px;padding:8px 10px;align-content:flex-start;}
.media-card{display:flex;align-items:center;gap:8px;background:var(--card);border:1px solid var(--border);border-radius:6px;padding:8px 12px;cursor:pointer;transition:all .15s;min-width:140px;}
.media-card:hover{border-color:var(--accent);background:rgba(245,158,11,.06);}
.media-card-icon{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;flex-shrink:0;}
.media-card-icon.image{background:rgba(59,130,246,.15);color:#3b82f6;}
.media-card-icon.video{background:rgba(245,158,11,.15);color:var(--accent);}
.media-card-info{display:flex;flex-direction:column;gap:1px;}
.media-card-type{font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);}
.media-card-time{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--text);}
.media-card-date{font-size:10px;color:var(--muted);}
.ms-thumb{flex-shrink:0;width:80px;height:56px;border-radius:4px;overflow:hidden;cursor:pointer;border:1px solid var(--border2);position:relative;transition:border-color .15s;}
.ms-thumb:hover{border-color:var(--accent);}
.ms-thumb img{width:100%;height:100%;object-fit:cover;}
.ms-vid-placeholder{width:100%;height:100%;background:var(--card);display:flex;align-items:center;justify-content:center;}
.ms-badge{position:absolute;top:3px;right:3px;font-size:8px;font-weight:700;padding:1px 4px;border-radius:2px;letter-spacing:.5px;}
.ms-badge.vid{background:rgba(244,63,94,.8);color:#fff;}

/* Detail bottom (performance + events side-by-side) */
.detail-bottom{display:none;}
.perf-section{flex:0 0 40%;display:flex;flex-direction:column;border-right:1px solid var(--border);overflow:hidden;}
.perf-section .perf-strip{flex:1;flex-direction:column;padding:8px 12px;gap:8px;}

/* Info Tabs */
.info-tabs{flex:4;display:flex;flex-direction:column;border-top:1px solid var(--border);overflow:hidden;min-height:0;}
.info-tabs-header{display:flex;align-items:center;background:var(--card2);border-bottom:1px solid var(--border);padding:0 12px;flex-shrink:0;height:32px;gap:0;}
.info-tab{background:none;border:none;color:var(--muted2);font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:6px 14px;cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;}
.info-tab:hover{color:var(--text);}
.info-tab.active{color:var(--accent);border-bottom-color:var(--accent);}
.info-tabs-right{margin-left:auto;display:flex;align-items:center;gap:8px;}
.media-filters{display:flex;align-items:center;gap:6px;}
.info-tab-body{display:none;flex:1;overflow-y:auto;overflow-x:hidden;}
.info-tab-body.active{display:flex;flex-direction:column;}
.stats-grid{padding:10px 14px;display:flex;flex-direction:column;gap:10px;}
.usage-section{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:12px 14px;}
.usage-title{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);margin-bottom:10px;}
.usage-row{display:flex;align-items:center;gap:8px;margin-bottom:6px;}
.usage-row:last-child{margin-bottom:0;}
.usage-icon{font-size:14px;flex-shrink:0;width:20px;text-align:center;}
.usage-label{font-size:11px;font-weight:600;color:var(--text);width:75px;flex-shrink:0;}
.usage-track{flex:1;height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.usage-fill{height:100%;border-radius:3px;transition:width .3s,background .3s;}
.usage-fill.green{background:var(--success);}
.usage-fill.amber{background:var(--warn);}
.usage-fill.red{background:var(--danger);}
.usage-nums{font-family:var(--mono);font-size:11px;color:var(--muted2);width:80px;text-align:right;flex-shrink:0;}
.stats-metrics{display:flex;gap:0;}

/* Activity trail bar (right sidebar, full height of detail view) */
.activity-bar{width:280px;flex-shrink:0;background:var(--card);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;}
.act-date-row{flex-shrink:0;display:flex;gap:6px;padding:6px 12px;border-bottom:1px solid var(--border);background:var(--card);}
.act-date-inp{flex:1;background:var(--bg);border:1px solid var(--border2);color:var(--text);font-family:var(--mono);font-size:11px;padding:4px 6px;border-radius:4px;outline:none;}
.act-date-inp:focus{border-color:var(--accent);}
.act-load-btn{background:var(--accent);color:#000;border:none;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:4px 12px;border-radius:4px;cursor:pointer;transition:background .15s;}
.act-load-btn:hover{background:#d97706;}
.act-load-btn:disabled{opacity:.4;cursor:not-allowed;}
.act-summary{flex-shrink:0;display:flex;padding:6px 12px;gap:12px;border-bottom:1px solid var(--border);background:var(--card);}
.act-sum-item{display:flex;flex-direction:column;gap:1px;}
.act-sum-lbl{font-size:11px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;}
.act-sum-val{font-family:var(--head);font-size:14px;font-weight:700;color:var(--text);}
.act-sum-val.accent{color:var(--accent);}
.act-list{flex:1;overflow-y:auto;padding:4px 0;}
.act-list::-webkit-scrollbar{width:3px;}
.act-list::-webkit-scrollbar-thumb{background:var(--border2);}
.act-empty{text-align:center;padding:24px 14px;color:var(--muted);font-size:12px;letter-spacing:.5px;}
.act-item{display:flex;gap:10px;padding:5px 12px 5px 14px;position:relative;}
.act-dot-wrap{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:14px;padding-top:3px;}
.act-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;border:2px solid transparent;}
.act-dot.drive{background:var(--success);border-color:var(--success);}
.act-dot.stop{background:var(--muted);border-color:var(--muted);}
.act-dot.idle{background:var(--warn);border-color:var(--warn);}
.act-dot.event{background:var(--danger);border-color:var(--danger);}
.act-dot.ign{background:var(--blue);border-color:var(--blue);}
.act-line{width:1px;flex:1;background:var(--border2);min-height:8px;}
.act-info{flex:1;min-width:0;}
.act-time{font-size:11px;color:var(--muted);letter-spacing:.5px;}
.act-name{font-size:12px;font-weight:600;color:var(--text);}
.act-detail{font-size:11px;color:var(--muted2);margin-top:1px;}
.act-addr{font-size:11px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Performance strip */
.perf-strip{flex-shrink:0;background:var(--card);border-top:1px solid var(--border);display:flex;align-items:center;padding:6px 12px;gap:14px;}
.perf-bar-wrap{flex:1;min-width:0;}
.perf-bar-label{font-size:11px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;margin-bottom:3px;}
.perf-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--border);}
.perf-seg{height:100%;transition:width .4s ease;}
.perf-seg.transit{background:var(--success);}
.perf-seg.idle{background:var(--warn);}
.perf-seg.stopped{background:var(--muted);}
.perf-seg.spd-low{background:var(--success);}
.perf-seg.spd-mid{background:var(--blue);}
.perf-seg.spd-hi{background:var(--danger);}
.perf-legend{display:flex;gap:8px;margin-top:3px;}
.perf-leg-item{font-size:11px;color:var(--muted2);display:flex;align-items:center;gap:3px;}
.perf-dot{width:5px;height:5px;border-radius:50%;flex-shrink:0;}
.perf-dot.transit{background:var(--success);}
.perf-dot.idle{background:var(--warn);}
.perf-dot.stopped{background:var(--muted);}
.perf-dot.spd-low{background:var(--success);}
.perf-dot.spd-mid{background:var(--blue);}
.perf-dot.spd-hi{background:var(--danger);}
.perf-pct{font-weight:600;color:var(--text);}
.perf-ign{display:flex;flex-direction:column;gap:3px;flex-shrink:0;padding-left:8px;border-left:1px solid var(--border2);}
.perf-ign-item{display:flex;align-items:center;gap:5px;}
.perf-ign-lbl{font-size:11px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;min-width:56px;}
.perf-ign-val{font-family:var(--mono);font-size:11px;font-weight:600;color:var(--text);}
.perf-ign-val.err{color:var(--danger);}
.mstat{flex:1;padding:7px 12px;border-right:1px solid var(--border);display:flex;flex-direction:column;gap:1px;}
.mstat:last-child{border-right:none;}
.mstat-lbl{font-size:12px;color:var(--muted);letter-spacing:1px;text-transform:uppercase;}
.mstat-val{font-family:var(--head);font-size:18px;font-weight:700;line-height:1;}
.mstat-val.accent{color:var(--accent);}
.mstat-unit{font-size:12px;color:var(--muted2);}

/* ============ EVENTS PANEL ============ */
.events-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;}
.evt-filters{display:flex;gap:3px;margin-left:8px;}
.evt-chip{padding:2px 8px;font-family:var(--mono);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;border:1px solid var(--border2);border-radius:10px;background:transparent;color:var(--muted2);transition:all .15s;}
.evt-chip.active{border-color:var(--accent);color:var(--accent);background:rgba(245,158,11,.08);}
.evt-chip.dms.active{border-color:var(--danger);color:var(--danger);background:rgba(244,63,94,.08);}
.evt-chip.adas.active{border-color:var(--blue);color:var(--blue);background:rgba(56,189,248,.08);}
.evt-chip.drv.active{border-color:var(--warn);color:var(--warn);background:rgba(245,158,11,.08);}
.evt-count{margin-left:auto;font-size:12px;color:var(--muted);background:var(--card);border:1px solid var(--border2);padding:1px 7px;border-radius:10px;}

.evt-list{flex:1;overflow-y:auto;padding:4px 0;}
.evt-list::-webkit-scrollbar{width:3px;}
.evt-list::-webkit-scrollbar-thumb{background:var(--border2);}

.evt-empty{text-align:center;padding:24px 14px;color:var(--muted);font-size:12px;letter-spacing:.5px;}

.evt-card{display:flex;align-items:center;gap:8px;padding:6px 12px;border-bottom:1px solid rgba(255,255,255,.03);cursor:pointer;transition:background .1s;}
.evt-card:hover{background:var(--card);}
.evt-ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:12px;font-weight:700;}
.evt-ico.dms{background:rgba(244,63,94,.15);color:var(--danger);}
.evt-ico.adas{background:rgba(56,189,248,.15);color:var(--blue);}
.evt-ico.drv{background:rgba(245,158,11,.15);color:var(--warn);}
.evt-ico.other{background:rgba(100,116,139,.15);color:var(--muted2);}
.evt-body{flex:1;min-width:0;}
.evt-name{font-size:12px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.evt-detail{font-size:11px;color:var(--muted2);margin-top:1px;}
.evt-time{font-size:11px;color:var(--muted);text-align:right;flex-shrink:0;white-space:nowrap;}
.evt-media-tag{display:inline-block;font-size:9px;padding:1px 5px;border-radius:3px;margin-left:4px;font-weight:700;letter-spacing:.5px;vertical-align:middle;}
.evt-media-tag.img{background:rgba(56,189,248,.15);color:var(--blue);}
.evt-media-tag.vid{background:rgba(244,63,94,.15);color:var(--danger);}

/* ============ MEDIA VIEWER MODAL ============ */
.media-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;}
.media-modal.open{display:flex;}
.media-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.85);backdrop-filter:blur(6px);}
.media-content{position:relative;width:90%;max-width:800px;max-height:85vh;background:var(--card);border:1px solid var(--border);border-radius:8px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 12px 48px rgba(0,0,0,.2);}
.media-hdr{padding:10px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.media-title{font-family:var(--head);font-size:13px;font-weight:700;letter-spacing:1px;color:var(--text);}
.media-meta{font-size:12px;color:var(--muted2);margin-left:4px;}
.media-close{margin-left:auto;background:none;border:none;color:var(--muted2);cursor:pointer;font-size:20px;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s;}
.media-close:hover{background:var(--card);color:var(--text);}
.media-body{flex:1;display:flex;align-items:center;justify-content:center;padding:16px;background:#000;min-height:300px;overflow:hidden;}
.media-loading{display:none;flex-direction:column;align-items:center;justify-content:center;}
.media-loading.show{display:flex;}
.media-footer{padding:8px 16px;border-top:1px solid var(--border);display:flex;align-items:center;gap:14px;font-size:12px;color:var(--muted2);}
.media-coords{letter-spacing:.5px;}
.media-speed{color:var(--accent);font-weight:600;}
.media-download{color:var(--blue);text-decoration:none;margin-left:auto;font-weight:600;letter-spacing:.5px;text-transform:uppercase;transition:color .15s;}
.media-download:hover{color:var(--accent);}

/* ============ LOG PANEL ============ */
.log-overlay{position:fixed;inset:0;z-index:200;pointer-events:none;}
.log-backdrop{position:absolute;inset:0;background:transparent;transition:background .25s;pointer-events:none;}
.log-overlay.open .log-backdrop{background:rgba(0,0,0,.5);pointer-events:all;}
.log-panel{position:absolute;top:0;right:0;width:380px;height:100%;background:var(--card);border-left:1px solid var(--border);transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);pointer-events:all;display:flex;flex-direction:column;}
.log-overlay.open .log-panel{transform:translateX(0);}
.log-hdr{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;}
.log-ttl{font-family:var(--head);font-size:15px;font-weight:700;letter-spacing:3px;text-transform:uppercase;}
.log-cnt{background:var(--danger);color:#fff;font-size:11px;font-weight:700;padding:2px 7px;border-radius:10px;}
.log-close{margin-left:auto;background:none;border:none;color:var(--muted2);cursor:pointer;font-size:16px;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .15s;}
.log-close:hover{background:var(--card);color:var(--text);}
.log-filters{padding:8px 18px;border-bottom:1px solid var(--border);display:flex;gap:6px;flex-wrap:wrap;}
.chip{padding:3px 10px;background:var(--card);border:1px solid var(--border2);border-radius:12px;font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;color:var(--muted2);transition:all .15s;}
.chip.active{border-color:var(--accent);color:var(--accent);background:rgba(245,158,11,.08);}
.chip.err.active{border-color:var(--danger);color:var(--danger);background:rgba(244,63,94,.08);}
.chip.inf.active{border-color:var(--blue);color:var(--blue);background:rgba(56,189,248,.08);}
.log-list{flex:1;overflow-y:auto;padding:6px 0;}
.log-list::-webkit-scrollbar{width:3px;}
.log-list::-webkit-scrollbar-thumb{background:var(--border2);}
.log-entry{padding:9px 18px;border-bottom:1px solid rgba(255,255,255,.03);display:flex;gap:10px;align-items:flex-start;cursor:pointer;transition:background .1s;animation:slide-in .25s ease-out;}
.log-entry:hover{background:var(--card);}
@keyframes slide-in{from{opacity:0;transform:translateX(8px);}to{opacity:1;transform:translateX(0);}}
.log-ico{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;font-size:12px;}
.log-ico.danger{background:rgba(244,63,94,.15);color:var(--danger);}
.log-ico.warn{background:rgba(245,158,11,.15);color:var(--warn);}
.log-ico.info{background:rgba(56,189,248,.15);color:var(--blue);}
.log-ico.success{background:rgba(16,185,129,.15);color:var(--success);}
.log-body{flex:1;min-width:0;}
.log-et{font-size:12px;font-weight:600;color:var(--text);margin-bottom:1px;}
.log-ev-vehicle{font-size:11px;color:var(--accent);margin-bottom:1px;}
.log-ed{font-size:12px;color:var(--muted2);line-height:1.4;}
.log-time{font-size:11px;color:var(--muted);margin-top:2px;}

/* ============ TOASTS ============ */
.toast-wrap{position:fixed;top:58px;right:14px;z-index:300;display:flex;flex-direction:column;gap:7px;pointer-events:none;}
.toast{width:310px;background:var(--card);border:1px solid var(--border2);border-radius:5px;padding:10px 12px;display:flex;gap:9px;align-items:flex-start;pointer-events:all;box-shadow:0 8px 28px rgba(0,0,0,.5);animation:t-in .3s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden;}
.toast.removing{animation:t-out .2s ease-in forwards;}
@keyframes t-in{from{opacity:0;transform:translateX(20px) scale(.95);}to{opacity:1;transform:none;}}
@keyframes t-out{from{opacity:1;transform:none;max-height:80px;}to{opacity:0;transform:translateX(20px);max-height:0;padding:0;margin:0;}}
.t-bar{position:absolute;left:0;top:0;bottom:0;width:3px;}
.toast.danger .t-bar{background:var(--danger);}
.toast.warn .t-bar{background:var(--warn);}
.toast.info .t-bar{background:var(--blue);}
.toast.success .t-bar{background:var(--success);}
.t-ico{font-size:16px;flex-shrink:0;margin-top:1px;}
.toast.danger .t-ico{color:var(--danger);}
.toast.warn .t-ico{color:var(--warn);}
.toast.info .t-ico{color:var(--blue);}
.toast.success .t-ico{color:var(--success);}
.t-body{flex:1;min-width:0;}
.t-title{font-size:12px;font-weight:600;color:var(--text);margin-bottom:1px;}
.t-vehicle{font-size:12px;color:var(--accent);margin-bottom:1px;}
.t-msg{font-size:12px;color:var(--muted2);line-height:1.4;}
.t-close{background:none;border:none;color:var(--muted);cursor:pointer;font-size:14px;flex-shrink:0;transition:color .15s;padding:0;}
.t-close:hover{color:var(--text);}
.t-prog{position:absolute;bottom:0;left:0;height:2px;background:rgba(255,255,255,.15);animation:t-shrink linear forwards;}
@keyframes t-shrink{from{width:100%;}to{width:0;}}

/* Leaflet overrides */
.leaflet-container{background:#06090f !important;}
.leaflet-tile{}
.leaflet-control-attribution{display:none !important;}
.leaflet-control-zoom a{background:var(--card) !important;color:var(--text) !important;border-color:var(--border2) !important;}
.leaflet-popup-content-wrapper{background:var(--card) !important;border:1px solid var(--border2) !important;color:var(--text) !important;font-family:var(--mono) !important;font-size:12px !important;border-radius:5px !important;box-shadow:0 4px 20px rgba(0,0,0,.5) !important;}
.leaflet-popup-tip{background:var(--card) !important;}

/* ============ LOGIN PAGE ============ */
.login-wrapper{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--bg);}
.login-box{width:360px;background:var(--card);border:1px solid var(--border);border-radius:8px;padding:40px 32px;box-shadow:0 4px 20px rgba(0,0,0,.08);}
.login-logo{text-align:center;margin-bottom:32px;}
.login-field{margin-bottom:16px;}
.login-label{display:block;font-size:12px;color:var(--muted2);letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;}
.login-input{width:100%;background:var(--card);border:1px solid var(--border2);color:var(--text);font-family:var(--mono);font-size:13px;padding:10px 12px;border-radius:4px;outline:none;transition:border-color .15s;}
.login-input:focus{border-color:var(--accent);}
.login-btn{width:100%;padding:12px;font-family:var(--head);font-size:15px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:var(--accent);color:#000;border:none;border-radius:4px;cursor:pointer;transition:background .15s;margin-top:8px;}
.login-btn:hover{background:var(--accent2);}
.login-btn:disabled{background:var(--muted);color:var(--muted2);cursor:not-allowed;}
.login-error{color:var(--danger);font-size:12px;text-align:center;margin-top:12px;min-height:16px;}

/* ============ LOADING OVERLAY ============ */
.app-loading{position:fixed;inset:0;z-index:999;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.app-loading .spinner{width:40px;height:40px;}
.app-loading .load-text{font-family:var(--head);font-size:14px;letter-spacing:3px;text-transform:uppercase;color:var(--muted2);}