/* ═══════════════════════════════════════════
   PASOPAY — Modern Light-Navy Theme v2.1
   ═══════════════════════════════════════════ */
:root{
  --bg-primary:#F0F2F5;
  --bg-secondary:#FFFFFF;
  --bg-card:#FFFFFF;
  --bg-card-hover:#F8FAFC;
  --bg-input:#F8FAFC;
  --border:#E2E8F0;
  --border-light:#CBD5E1;
  --text-primary:#1E293B;
  --text-secondary:#475569;
  --text-muted:#94A3B8;
  --navy:#1E3A5F;
  --navy-light:#2C5282;
  --navy-bg:#EBF0F7;
  --accent:#FF6B2C;
  --accent-hover:#FF8C42;
  --accent-glow:rgba(255,107,44,.1);
  --accent-gradient:linear-gradient(135deg,#FF6B2C,#FF8C42);
  --success:#2563EB;
  --success-bg:rgba(37,99,235,.06);
  --danger:#DC2626;
  --danger-bg:rgba(220,38,38,.06);
  --warning:#D97706;
  --warning-bg:rgba(217,119,6,.08);
  --info:#2563EB;
  --info-bg:rgba(37,99,235,.06);
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:14px;
  --radius-xl:20px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 4px 12px rgba(0,0,0,.4);
  --shadow-lg:0 8px 32px rgba(0,0,0,.5);
  --shadow-glow:0 0 20px rgba(255,107,44,.15);
  --transition:all .2s cubic-bezier(.4,0,.2,1);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Inter',sans-serif;font-size:13px;background:var(--bg-primary);color:var(--text-primary);height:100vh;overflow:hidden;display:flex;flex-direction:column;}

/* HEADER — lacivert */
header{height:48px;background:var(--navy);border-bottom:none;display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.15);}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:16px;white-space:nowrap;letter-spacing:-.3px;color:#fff;}
.logo-icon{width:32px;height:32px;background:var(--accent-gradient);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;box-shadow:0 0 12px rgba(255,107,44,.3);}
.logo span{background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.nav-tabs{display:flex;gap:4px;margin-left:12px;}
.nav-tab{padding:6px 16px;border-radius:var(--radius-sm);cursor:pointer;font-size:12px;font-weight:500;color:rgba(255,255,255,.6);border:none;background:none;display:flex;align-items:center;gap:6px;transition:var(--transition);}
.nav-tab:hover{background:rgba(255,255,255,.1);color:rgba(255,255,255,.9);}
.nav-tab.active{background:rgba(255,255,255,.15);color:#fff;font-weight:700;border:1px solid rgba(255,255,255,.2);}
.badge{background:var(--danger);color:#fff;border-radius:25px;padding:1px 6px;font-size:10px;font-weight:700;}
.hdr-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.live-badge{display:flex;align-items:center;gap:6px;background:rgba(96,165,250,.2);border:1px solid rgba(96,165,250,.35);border-radius:20px;padding:4px 12px;font-size:11px;font-weight:600;color:#93C5FD;}
.live-dot{width:7px;height:7px;background:#60A5FA;border-radius:50%;animation:pulse 1.5s infinite;}
@keyframes pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(96,165,250,.4)}50%{opacity:.6;box-shadow:0 0 0 4px rgba(96,165,250,0)}}
.clock{font-family:'JetBrains Mono',monospace;font-size:13px;color:rgba(255,255,255,.7);font-weight:600;letter-spacing:.5px;}

/* LAYOUT */
.app{flex:1;display:flex;overflow:hidden;}

/* LEFT PANEL */
.lpanel{width:290px;background:#FAFBFD;border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;}
.ltabs{display:flex;border-bottom:1px solid var(--border);background:#F1F5F9;}
.ltab{flex:1;padding:10px 4px;text-align:center;cursor:pointer;font-size:11px;font-weight:600;color:var(--text-muted);border-bottom:2px solid transparent;transition:var(--transition);}
.ltab:hover{color:var(--text-secondary);background:#F8FAFC;}
.ltab.active{color:var(--navy);border-bottom-color:var(--navy);background:#fff;font-weight:700;}

/* SEARCH */
.sbar{padding:10px;border-bottom:1px solid var(--border);}
.sbar-inner{display:flex;align-items:center;background:var(--bg-input);border:1px solid var(--border-light);border-radius:var(--radius-md);padding:7px 10px;gap:8px;transition:var(--transition);}
.sbar-inner:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.sbar-inner input{background:none;border:none;outline:none;font-size:12px;flex:1;color:var(--text-primary);}
.sbar-inner input::placeholder{color:var(--text-muted);}

/* FILTER */
.fbar{display:flex;gap:4px;padding:8px 10px;border-bottom:1px solid var(--border);}
.fchip{padding:4px 12px;border-radius:var(--radius-xl);font-size:11px;font-weight:600;cursor:pointer;border:1px solid var(--border-light);color:var(--text-muted);background:var(--bg-card);transition:var(--transition);}
.fchip:hover{border-color:var(--text-muted);color:var(--text-secondary);}
.fchip.active{border-color:var(--accent);color:var(--accent);background:var(--accent-glow);}
.fchip.act-green{border-color:var(--success);color:var(--success);background:var(--success-bg);}

/* VEHICLE LIST */
.vlist{flex:1;overflow-y:auto;min-height:0;}
.vlist::-webkit-scrollbar{width:14px;}
.vlist::-webkit-scrollbar-thumb{background:var(--navy);border-radius:7px;border:3px solid #FAFBFD;}
.vlist::-webkit-scrollbar-thumb:hover{background:var(--navy-light);}
.vlist::-webkit-scrollbar-track{background:#EBF0F7;border-radius:7px;}
.vitem{display:flex;align-items:center;gap:8px;padding:0 10px;min-height:56px;border-bottom:1px solid var(--border);cursor:pointer;transition:var(--transition);box-sizing:border-box;}
.vitem:hover{background:var(--bg-card-hover);}
.vitem.moving{}
.vitem.moving:hover{background:var(--bg-card-hover);}
.vitem.sel{background:#FFF7ED;}
.vchk{display:none;}
.vico{display:none;}
.vsig{position:absolute;bottom:0;right:0;width:9px;height:9px;border-radius:50%;border:2px solid #FAFBFD;}
.vsig.mv{background:#3B82F6;animation:pmv 1.2s infinite;}
.vsig.st{background:var(--info);}
.vsig.off{background:var(--text-muted);}
@keyframes pmv{0%,100%{box-shadow:0 0 0 0 rgba(59,130,246,.5)}50%{box-shadow:0 0 0 4px rgba(59,130,246,0)}}
.vinfo{flex:1;min-width:0;font-family:'Inter',-apple-system,Segoe UI,sans-serif;color:#000;}
.vrow-top{display:flex;align-items:center;gap:18px;flex-wrap:nowrap;min-width:0;}
.vrow-bottom{display:flex;align-items:center;gap:10px;margin-top:2px;}
.vrow-bottom .vtime-cell{flex:1;min-width:0;margin-top:0;}
.vplate{font-family:inherit;font-size:15px;font-weight:700;color:#000;flex-shrink:0;}
.vitem.moving .vnum{background:#2563EB;}
.vroute{font-family:inherit;font-size:11px;color:#475569;font-weight:500;white-space:nowrap;overflow:visible;margin-top:0;}
.vdt{font-family:inherit;font-size:12px;color:#000;font-weight:500;}
.vtime-cell{
  margin-top:2px;
  padding:2px 6px;
  border-radius:6px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.vtime-cell.stale{
  background:#fef2f2;
  border-color:#fecaca;
}
.vtime-cell > div{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Inter',-apple-system,Segoe UI,sans-serif;font-size:12px;font-weight:500;color:#94a3b8;}
.vtime-sub{
  font-family:'Inter',-apple-system,Segoe UI,sans-serif;
  font-size:12px;
  font-weight:500;
  color:#000;
  line-height:1.2;
}
.vnum{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0;font-family:'JetBrains Mono',monospace;position:relative;box-shadow:0 1px 3px rgba(30,58,95,.3);}
.vmeta{text-align:right;flex-shrink:0;font-family:'Inter',-apple-system,Segoe UI,sans-serif;}
.vspeed{font-family:'Inter',-apple-system,Segoe UI,sans-serif;font-size:12px;font-weight:500;color:#000;letter-spacing:0;flex-shrink:0;}
.vspeed.mv,.vspeed.st{color:#000;}
.vlight{width:7px;height:7px;border-radius:50%;display:inline-block;margin-left:5px;vertical-align:middle;}
.vlight.green{background:#22C55E;animation:vl-pulse 3s ease-in-out infinite;}
.vlight.yellow{background:#FBBF24;animation:vl-pulse 3s ease-in-out infinite;}
.vlight.off{display:none;}
@keyframes vl-pulse{0%,100%{opacity:1}50%{opacity:.55}}
.vago{font-size:10px;color:var(--text-muted);margin-top:2px;display:none;}.vitem:hover .vago{display:block;}
.dots{background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:18px;font-weight:700;padding:2px 4px;border-radius:4px;line-height:1;flex-shrink:0;transition:var(--transition);}
.dots:hover{background:var(--bg-card);color:var(--text-primary);}

/* PANEL STATS */
.pstats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--border);background:#F1F5F9;flex-shrink:0;}
.pstat{padding:8px 4px;text-align:center;}
.pstat-n{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;}
.pstat-l{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}

/* HISTORY TAB CONTENT */
.hform{padding:12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:10px;}
.hlabel{font-size:10px;color:var(--text-muted);font-weight:600;text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;}
.hselect,.hinput{width:100%;padding:7px 10px;border:1px solid var(--border-light);border-radius:var(--radius-sm);font-size:12px;color:var(--text-primary);background:var(--bg-input);outline:none;box-sizing:border-box;transition:var(--transition);}
.hselect:focus,.hinput:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.hselect option{background:var(--bg-card);color:var(--text-primary);}
.hrow{display:flex;gap:6px;}
.hbtn{flex:1;padding:8px;border-radius:var(--radius-sm);border:none;cursor:pointer;font-size:12px;font-weight:700;transition:var(--transition);}
.hbtn.p{background:var(--accent-gradient);color:#fff;box-shadow:0 2px 8px rgba(255,107,44,.3);}
.hbtn.p:hover{box-shadow:0 4px 16px rgba(255,107,44,.4);transform:translateY(-1px);}
.hbtn.s{background:var(--bg-card);border:1px solid var(--border-light);color:var(--text-secondary);}
.hbtn.s:hover{background:var(--bg-card-hover);color:var(--text-primary);}

/* HISTORY TABS */
.hist-tabs{display:flex;border-bottom:2px solid var(--border);background:var(--bg-primary);flex-shrink:0;}
.htab{flex:1;padding:9px 2px;text-align:center;font-size:11px;font-weight:700;cursor:pointer;color:var(--text-muted);border-bottom:2px solid transparent;margin-bottom:-2px;user-select:none;transition:var(--transition);}
.htab:hover{color:var(--text-secondary);}
.htab.active{color:var(--accent);border-bottom-color:var(--accent);background:var(--bg-secondary);}
.hpane{display:none;flex:1;flex-direction:column;overflow:hidden;min-height:0;}
.hpane.active{display:flex;}

/* HISTORY LIST */
.hlist{flex:1;overflow-y:auto;min-height:0;}
.hlist::-webkit-scrollbar{width:3px;}
.hlist::-webkit-scrollbar-thumb{background:var(--border-light);}
.hentry{display:flex;align-items:flex-start;gap:8px;padding:6px 10px;border-bottom:1px solid var(--border);font-size:11px;transition:var(--transition);}
.hentry:hover{background:var(--bg-card);}
.hico{width:16px;height:16px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;flex-shrink:0;margin-top:1px;}
.hico.mv{background:#3B82F6;}
.hico.st{background:var(--info);}

/* MAP */
.map-wrap{flex:1;position:relative;}
#map{width:100%;height:100%;}
.mbar{position:absolute;top:12px;left:12px;z-index:400;display:flex;gap:6px;flex-wrap:wrap;}
.mbtn{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border:1px solid var(--border);color:var(--text-secondary);padding:6px 12px;border-radius:var(--radius-sm);font-size:11px;font-weight:600;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.1);display:flex;align-items:center;gap:5px;transition:var(--transition);}
.mbtn:hover{background:#fff;color:var(--text-primary);border-color:var(--border-light);}
.mbtn.active{background:#FFF7ED;border-color:var(--accent);color:var(--accent);}
.mov{position:absolute;top:12px;right:12px;z-index:400;display:flex;flex-direction:column;gap:6px;}
.ocard{background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border:1px solid var(--border);border-radius:var(--radius-md);padding:8px 12px;min-width:85px;box-shadow:0 2px 8px rgba(0,0,0,.1);}
.oval{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;color:var(--text-primary);}
.olbl{font-size:9px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600;}
.upd-bar{position:absolute;bottom:28px;left:12px;z-index:400;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:var(--radius-sm);padding:4px 10px;font-size:10px;color:var(--text-muted);font-family:'JetBrains Mono',monospace;box-shadow:0 1px 4px rgba(0,0,0,.08);}

/* LAYER MENU */
.lmenu-wrap{position:relative;display:inline-block;}
.lmenu{display:none;position:absolute;top:38px;left:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,.12);z-index:1000;min-width:170px;overflow:hidden;}
.lmitem{padding:9px 14px;font-size:12px;cursor:pointer;color:var(--text-secondary);border-bottom:1px solid #F1F5F9;display:flex;align-items:center;gap:8px;transition:var(--transition);}
.lmitem:last-child{border-bottom:none;}
.lmitem:hover{background:#F8FAFC;color:var(--text-primary);}
.lmitem.active{background:#FFF7ED;color:var(--accent);font-weight:700;}

/* PLAYBACK */
.pbbar{background:#fff;border-top:1px solid var(--border);padding:10px 14px;display:none;flex-direction:column;gap:6px;flex-shrink:0;}
.pbbar.open{display:flex;}
.pbrow{display:flex;align-items:center;gap:7px;}
.pbbtn{background:var(--bg-card);border:1px solid var(--border-light);color:var(--text-secondary);width:30px;height:30px;border-radius:var(--radius-sm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px;transition:var(--transition);}
.pbbtn:hover{background:var(--bg-card-hover);color:var(--text-primary);}
.pbbtn.play{background:var(--accent-gradient);border-color:var(--accent);color:#fff;}
.pbspd{background:var(--bg-input);border:1px solid var(--border-light);color:var(--text-primary);border-radius:var(--radius-sm);padding:4px 8px;font-size:11px;font-family:'JetBrains Mono',monospace;}
.pbtime{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-secondary);margin-left:auto;}
.pbslider{width:100%;height:4px;-webkit-appearance:none;background:var(--border-light);border-radius:2px;cursor:pointer;}
.pbslider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 0 8px rgba(255,107,44,.4);}

/* SPEED GRAPH */
.spgraph{background:#fff;border-top:1px solid var(--border);height:85px;display:none;padding:6px 12px;flex-shrink:0;}
.spgraph.open{display:block;}

/* CONTEXT MENU */
.ctx{position:fixed;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 20px rgba(0,0,0,.12);z-index:9999;min-width:200px;overflow:visible;font-size:12px;}
.ctx-item{padding:9px 14px;cursor:pointer;color:var(--text-secondary);display:flex;align-items:center;gap:8px;border-bottom:1px solid #F1F5F9;position:relative;transition:var(--transition);}
.ctx-item:last-child{border-bottom:none;}
.ctx-item:hover{background:#F8FAFC;color:var(--text-primary);}
.ctx-sep{height:1px;background:#F1F5F9;}
.ctx-sub{position:relative;}
.ctx-sub-menu{display:none;position:absolute;left:100%;top:-1px;background:#fff;border:1px solid var(--border);border-radius:var(--radius-md);box-shadow:0 4px 16px rgba(0,0,0,.12);min-width:170px;z-index:10000;overflow:hidden;}
.ctx-sub:hover .ctx-sub-menu{display:block;}

/* PAGES */
.page{display:none;flex:1;overflow:hidden;}
.page.active{display:flex;}
#page-settings{flex-direction:column;overflow-y:auto;background:#F0F2F5;}
#page-reports{flex-direction:column;overflow-y:auto;overflow-x:hidden;background:#F0F2F5;}
#page-analytics{flex-direction:column;overflow:hidden;background:#f8fafc;}
#anFixedTop{flex-shrink:0;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.07);}
#anScrollArea{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;}
#srResult{min-width:0;}
.settings-wrap{max-width:900px;margin:0 auto;padding:24px;width:100%;}
.sgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.scard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);}
.scard-h{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:13px;display:flex;align-items:center;gap:8px;background:var(--bg-primary);}
.scard-b{padding:16px;}
.flabel{display:block;font-size:11px;color:var(--text-secondary);margin-bottom:5px;font-weight:600;}
.finput{width:100%;background:var(--bg-input);border:1px solid var(--border-light);color:var(--text-primary);border-radius:var(--radius-sm);padding:7px 10px;font-size:12px;font-family:'Inter',sans-serif;transition:var(--transition);}
.finput:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.frow{margin-bottom:12px;}
.fbtn{width:100%;padding:9px;background:var(--accent-gradient);border:none;color:#fff;border-radius:var(--radius-sm);font-size:13px;font-weight:700;cursor:pointer;transition:var(--transition);}
.fbtn:hover{box-shadow:0 4px 16px rgba(255,107,44,.3);transform:translateY(-1px);}
.fbtn.s{background:var(--bg-card);border:1px solid var(--border-light);color:var(--text-secondary);}
.apistat{padding:8px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;margin-top:8px;}
.apistat.ok{background:var(--success-bg);border:1px solid rgba(34,197,94,.25);color:var(--success);}
.apistat.err{background:var(--danger-bg);border:1px solid rgba(239,68,68,.25);color:var(--danger);}
.apistat.wait{background:var(--info-bg);border:1px solid rgba(59,130,246,.25);color:var(--info);}
.sys-row{display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--border);}
.sys-row:last-child{border:none;}
.stop-table{width:100%;border-collapse:collapse;font-size:12px;}
.stop-table th{padding:6px 8px;text-align:left;color:var(--text-muted);font-size:10px;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--bg-primary);}
.stop-table td{padding:5px 8px;border-bottom:1px solid var(--border);}
.stop-table input{background:var(--bg-input);border:1px solid var(--border-light);color:var(--text-primary);border-radius:4px;padding:3px 6px;font-size:11px;width:70px;}
.reports-wrap{margin:0;padding:0;width:100%;}
.rcard{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:visible;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.rcard-h{padding:12px 16px;border-bottom:1px solid var(--border);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:space-between;background:var(--bg-primary);}
.vtable{width:100%;border-collapse:collapse;font-size:12px;}
.vtable th{padding:8px 12px;text-align:left;color:var(--text-muted);font-size:10px;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--bg-primary);}
.vtable td{padding:8px 12px;border-bottom:1px solid var(--border);}
.vtable tr:hover td{background:var(--bg-card-hover);}
.vbadge{display:inline-block;padding:2px 8px;border-radius:25px;font-size:10px;font-weight:700;}
.vbadge.late{background:var(--danger-bg);color:var(--danger);}
.vbadge.gps{background:var(--danger-bg);color:var(--danger);}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--text-muted);gap:8px;padding:30px;flex:1;}
.toast{position:fixed;bottom:20px;right:20px;background:#fff;border:1px solid rgba(37,99,235,.3);border-radius:var(--radius-md);padding:12px 18px;z-index:9999;font-size:12px;font-weight:600;color:var(--success);box-shadow:0 4px 16px rgba(0,0,0,.12);animation:sup .3s ease;}
@keyframes sup{from{transform:translateY(10px);opacity:0}to{transform:translateY(0);opacity:1}}
.hrow-active{
  background:linear-gradient(90deg,var(--info) 3px,var(--info-bg) 3px) !important;
  border-left:3px solid var(--info);
}
.hrow-active span{color:var(--info) !important;font-weight:700 !important;}
.conn-overlay-bg{position:fixed;inset:0;background:rgba(0,0,0,.4);backdrop-filter:blur(4px);z-index:9990;display:flex;align-items:center;justify-content:center;}.conn-overlay{position:relative;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;width:360px;box-shadow:0 8px 32px rgba(0,0,0,.15);}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:var(--border-light);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted);}
::-webkit-scrollbar-track{background:transparent;}
/* GPS sinyal renkleri */
.sig-green,.sig-yellow,.sig-orange,.sig-red,.sig-alarm,.sig-mute{font-family:'Inter',-apple-system,Segoe UI,sans-serif;font-size:12px;font-weight:500;}
.sig-green{color:#16a34a;}
.sig-mute,.sig-yellow,.sig-orange,.sig-red,.sig-alarm{color:#94a3b8;}
.sig-alarm{animation:blink-alarm 2.5s ease-in-out infinite;}
@keyframes blink-alarm{0%,100%{opacity:1}50%{opacity:.65}}
.vitem-alarm{background:#FFF7ED!important;}
/* 36 saat uyarı bandı */
/* SR VEHİCLE PİCKER */
.sr-vp-wrap{position:relative;width:180px;flex-shrink:0;}
.sr-vp-btn{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:5px 10px;background:#fff;border:1px solid #d1d5db;border-radius:6px;cursor:pointer;font-size:12px;min-height:32px;user-select:none;}
.sr-vp-btn:hover{border-color:#94a3b8;}
.sr-vp-arrow{color:#9ca3af;font-size:10px;flex-shrink:0;}
.sr-vp-list{position:absolute;top:calc(100% + 4px);left:0;min-width:220px;background:#fff;border:1px solid #d1d5db;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);z-index:9999;overflow:hidden;}
.sr-vp-search{width:100%;box-sizing:border-box;padding:7px 10px;border:none;border-bottom:1px solid #e5e7eb;font-size:12px;outline:none;background:#f9fafb;}
#srVehicleItems{max-height:280px;overflow-y:auto;}
.sr-vp-item{display:flex;align-items:center;gap:7px;padding:5px 10px;cursor:pointer;border-bottom:1px solid #f1f5f9;}
.sr-vp-item:hover{background:#f0f9ff;}
.sr-vp-item.selected{background:#FFF7ED;}
.sr-vp-num{width:28px;height:22px;border-radius:4px;background:#1e3a5f;color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;flex-shrink:0;}
.sr-vp-plate{font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:#1f2937;}
.sr-vp-all{font-weight:700;color:#e87722;font-size:12px;padding:6px 10px;cursor:pointer;border-bottom:1px solid #f1f5f9;}
.sr-vp-all:hover{background:#FFF7ED;}

.sr-transparent-tip{background:transparent!important;border:none!important;box-shadow:none!important;padding:0!important;}
.sr-transparent-tip::before{display:none!important;}

/* ═══════════════════ MOBİL UYUMLU (≤ 900 px) ═══════════════════ */
.mobile-menu-btn{display:none;background:none;border:none;color:#fff;font-size:22px;cursor:pointer;padding:4px 10px;margin-right:6px;}
@media(max-width:900px){
  .mobile-menu-btn{display:inline-block;}
  /* Header küçültme */
  .hdr{padding:6px 10px;flex-wrap:wrap;gap:6px;}
  .hdr-brand{font-size:12px;}
  .hdr-brand .logo{width:36px;height:36px;font-size:16px;}
  .hdr-brand .brand-text{display:none;}
  .hdr-brand .brand-sub{display:none;}
  .nav-tabs{margin-left:4px;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;}
  .nav-tab{font-size:11px;padding:5px 8px;white-space:nowrap;flex-shrink:0;}
  .hdr-right{gap:6px;}
  .hdr-right > span, .hdr-right .live-indicator{font-size:10px;}
  .hdr-right #clockDisplay{font-size:11px;}

  /* Sol araç paneli: drawer olarak, default gizli */
  .lpanel{
    position:fixed;
    top:0;bottom:0;left:0;
    width:82%;max-width:340px;
    z-index:9500;
    transform:translateX(-100%);
    transition:transform 0.28s ease;
    box-shadow:2px 0 20px rgba(0,0,0,0.25);
    border-right:none;
  }
  body.drawer-open .lpanel{transform:translateX(0);}
  body.drawer-open::before{
    content:'';position:fixed;inset:0;background:rgba(0,0,0,0.4);z-index:9400;
  }

  /* Harita tam ekran */
  #map, .page{width:100%!important;}

  /* Harita üstündeki buton çubuğu daha kompakt + yatay scroll */
  .mbar{top:8px;left:8px;gap:4px;max-width:calc(100% - 16px);overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-right:8px;}
  .mbtn{font-size:11px;padding:5px 9px;flex-shrink:0;}

  /* Sağ üst sayaç kutuları küçültme */
  .stats-box{padding:5px 8px;font-size:11px;}
  .stats-box .st-num{font-size:16px;}

  /* İhlaller paneli mobilde küçük */
  .violations-panel{max-width:280px;font-size:11px;}

  /* Araç kartı yükseklik */
  .vitem{min-height:52px;padding:0 8px;}
  .vplate{font-size:14px;}

  /* Tarih paneli sağ tarafta değil, alt drawer olsun */
  .hist-panel{
    position:fixed;
    left:0;right:0;bottom:0;top:auto;
    width:100%;max-height:60vh;
    border-radius:12px 12px 0 0;
    box-shadow:0 -4px 20px rgba(0,0,0,0.25);
    z-index:9600;
  }

  /* Login kutusu mobil */
  .login-box{width:88%;max-width:340px;padding:24px 20px;}

  /* Ayarlar/rapor sayfaları */
  .settings-wrap, .reports-wrap{padding:12px!important;}

  /* Tablo/rapor tablolarını yatay scrollable */
  .rap-table, .plc-table, .tablo-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;}
}

/* Daha küçük telefonlar (≤ 480 px) */
@media(max-width:480px){
  .hdr-brand{gap:6px;}
  .nav-tab{font-size:10px;padding:4px 7px;}
  .stats-box{padding:4px 6px;}
  .stats-box .st-num{font-size:14px;}
  .violations-panel{max-width:calc(100% - 20px);}
}