:root{
  --bg:#0d1117; --bg2:#161b22; --card:#1c2330; --line:#2b3442;
  --txt:#dbe4ee; --dim:#8b98a9; --acc:#1e40af; --blue:#4fc3f7;
  --red:#ef5350; --green:#26a69a; --amber:#ffb300;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--txt);font-family:'Inter','Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:14px}
header{display:flex;align-items:center;gap:24px;padding:10px 20px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.logo{font-size:20px;letter-spacing:.5px;color:var(--dim)}
.logo b{color:var(--txt)}
.logo .plane{color:var(--acc);margin-right:6px}
.apt{font-size:11px;background:var(--line);color:var(--acc);padding:2px 8px;border-radius:10px;margin-left:8px;vertical-align:middle}
nav{display:flex;gap:4px;flex:1}
.tab{background:transparent;border:1px solid transparent;color:var(--dim);padding:8px 16px;border-radius:8px;cursor:pointer;font-size:14px}
.tab:hover{color:var(--txt)}
.tab.active{background:var(--card);color:var(--acc);border-color:var(--line)}
.langs{display:flex;gap:4px}
.lang{background:transparent;border:1px solid var(--line);color:var(--dim);padding:5px 10px;border-radius:6px;cursor:pointer;font-size:12px}
.lang.active{color:var(--bg);background:var(--acc);border-color:var(--acc);font-weight:600}

.rangebar{display:flex;align-items:center;gap:8px;padding:8px 20px;background:var(--bg2);border-bottom:1px solid var(--line);flex-wrap:wrap}
.rlabel{color:var(--dim);font-size:12px}
input[type=datetime-local]{background:var(--card);border:1px solid var(--line);color:var(--txt);padding:5px 8px;border-radius:6px;font-size:12px;color-scheme:dark}
.qbtn{background:var(--card);border:1px solid var(--line);color:var(--dim);padding:5px 10px;border-radius:6px;cursor:pointer;font-size:12px}
.qbtn:hover{color:var(--txt);border-color:var(--dim)}
.apply{background:var(--acc);border:none;color:#111;padding:6px 16px;border-radius:6px;cursor:pointer;font-weight:600}
.rangeinfo{color:var(--dim);font-size:12px;margin-left:auto}

main{padding:16px 20px}
.view{display:none}
.view.active{display:block}

/* LIVE */
.livewrap{display:grid;grid-template-columns:1fr 300px;gap:14px}
#liveMap{height:calc(100vh - 210px);min-height:480px;border-radius:12px;border:1px solid var(--line);background:#111}
.replaybar{display:flex;align-items:center;gap:12px;margin-top:10px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px}
.play{background:var(--acc);border:none;width:38px;height:38px;border-radius:50%;font-size:15px;cursor:pointer;color:#111}
#speedSel{background:var(--bg);color:var(--txt);border:1px solid var(--line);border-radius:6px;padding:6px}
.clock{font-family:Consolas,monospace;font-size:20px;color:var(--acc);min-width:170px}
.rwstatus{font-size:11px;font-weight:700;padding:5px 12px;border-radius:12px;letter-spacing:.5px}
.rwstatus.occ{background:rgba(239,83,80,.15);color:var(--red);border:1px solid var(--red)}
.rwstatus.free{background:rgba(38,166,154,.15);color:var(--green);border:1px solid var(--green)}
#scrub{flex:1;accent-color:var(--acc)}
.sidepanel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;height:calc(100vh - 210px);min-height:480px;overflow:auto}
.sidepanel h3{font-size:12px;text-transform:uppercase;color:var(--dim);letter-spacing:1px;margin:14px 0 8px}
.kpis-mini{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kmini{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:10px;text-align:center}
.kmini span{font-size:22px;font-weight:700;display:block}
.kmini label{font-size:10px;color:var(--dim);text-transform:uppercase}
.alerts{display:flex;flex-direction:column;gap:6px}
.alert{background:rgba(239,83,80,.1);border:1px solid rgba(239,83,80,.4);border-left:3px solid var(--red);border-radius:6px;padding:7px 9px;font-size:12px}
.alert.warn{background:rgba(255,179,0,.08);border-color:rgba(255,179,0,.4);border-left-color:var(--amber)}
.alert small{color:var(--dim);display:block}
.noalert{color:var(--dim);font-size:12px}
.legend div{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:12px;color:var(--dim)}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block}
.acft{background:transparent;border:none;color:#fff;font-size:9px;text-shadow:0 0 3px #000,0 0 3px #000;white-space:nowrap}
.rwlabel span{background:rgba(20,26,34,.85);color:#fff;font-size:10px;padding:2px 9px;border-radius:8px;font-weight:600;letter-spacing:.5px;border:1px solid rgba(255,255,255,.25)}

/* KPI & CARDS */
.kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:14px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.kpi .kv{font-size:26px;font-weight:700;color:var(--acc);display:block}
.kpi label{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.card.wide{margin-top:14px}
.card h4{font-size:13px;color:var(--dim);margin-bottom:10px;font-weight:600}

#flowMap{height:260px;border-radius:8px}
#heatMap{height:520px;border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:12px}
th{color:var(--dim);text-transform:uppercase;font-size:10px;letter-spacing:.5px;text-align:left;padding:6px 8px;border-bottom:1px solid var(--line)}
td{padding:6px 8px;border-bottom:1px solid rgba(43,52,66,.5)}
tr:hover td{background:rgba(255,255,255,.02)}
footer{display:flex;justify-content:space-between;padding:10px 20px;color:var(--dim);font-size:11px;border-top:1px solid var(--line);margin-top:10px;flex-wrap:wrap;gap:6px}
@media(max-width:1100px){.livewrap{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}

/* ============ LIGHT THEME ============ */
[data-theme="light"]{
  --bg:#eef1f5; --bg2:#ffffff; --card:#ffffff; --line:#ccd5e0;
  --txt:#1b2430; --dim:#5a6b7f;
}
[data-theme="light"] .tab.active{color:#1e40af}
[data-theme="light"] .lang.active{color:#fff;background:#1e40af;border-color:#1e40af}
[data-theme="light"] .apply{background:#1e40af;color:#fff}
[data-theme="light"] .clock{color:#1e40af}
[data-theme="light"] .play{background:#1e40af;color:#fff}
[data-theme="light"] .acft{text-shadow:0 0 3px #fff,0 0 3px #fff}
[data-theme="light"] #liveMap{background:#dde3ea}
[data-theme="light"] tr:hover td{background:rgba(0,0,0,.04)}
[data-theme="light"] .alert{background:rgba(200,40,40,.06)}
[data-theme="light"] .alert.warn{background:rgba(200,150,20,.08)}
[data-theme="light"] .kpi .kv{color:#1e40af}
[data-theme="light"] input[type=datetime-local]{color-scheme:light}

/* ============ LOADER & ERROR BANNER ============ */
#loader{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;gap:14px;align-items:center;justify-content:center;z-index:9999;color:var(--dim);font-size:14px;letter-spacing:1px}
#loader .spin{width:38px;height:38px;border:3px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#fatalErr{display:none;position:fixed;left:12px;bottom:12px;z-index:9998;background:rgba(180,40,40,.95);color:#fff;padding:10px 14px;border-radius:8px;font-size:12px;max-width:60%;box-shadow:0 4px 18px rgba(0,0,0,.5)}

.routecell{font-family:Consolas,monospace;font-size:11px;white-space:normal;word-break:break-word;max-width:340px}

.chartbox{position:relative;height:240px}
.exp{color:var(--dim);font-size:11px;margin:-2px 0 10px;line-height:1.45}

.acft-dot{width:11px;height:11px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 5px rgba(0,0,0,.7)}
.acft-tip{background:rgba(20,26,34,.88)!important;border:none!important;color:#fff!important;
  font-size:10px!important;font-weight:600!important;padding:1px 8px!important;border-radius:9px!important;box-shadow:none!important}
.acft-tip::before{display:none!important}

.depsec{margin:14px 0 6px;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.5px}
.acft-tip{max-width:260px;white-space:normal;line-height:1.5}

.acft-wrap{display:flex;align-items:center;gap:5px}
.acft-lbl{display:flex;align-items:center;gap:4px;background:rgba(20,26,34,.88);color:#fff;
  font-size:10px;font-weight:600;padding:1px 8px 1px 3px;border-radius:9px;white-space:nowrap}
.acft-lbl i{font-style:normal;font-size:8px;font-weight:700;padding:1px 5px;border-radius:6px;color:#fff}
.acft-lbl b{color:#ffd54f}
.acft-dot{flex:none}
.acft-tip{max-width:300px;min-width:250px}
.lblchk{display:flex;align-items:center;gap:6px;color:var(--dim);font-size:12px;white-space:nowrap;cursor:pointer}
.modal{position:fixed;inset:0;background:rgba(10,15,25,.5);display:none;align-items:center;justify-content:center;z-index:10000}
.modal.open{display:flex}
.modal-card{background:var(--card);color:var(--txt);padding:26px 30px;border-radius:14px;max-width:400px;
  position:relative;border:1px solid var(--line);font-size:14px;line-height:1.6;box-shadow:0 10px 40px rgba(0,0,0,.4)}
.modal-card a{color:var(--acc);font-weight:600}
.modal-x{position:absolute;top:10px;right:12px;background:none;border:none;color:var(--dim);font-size:15px;cursor:pointer}

.chartbox canvas{width:100%!important;height:100%!important}

/* ============ LIVE RADAR ============ */
.radartop{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:10px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 14px;font-size:13px}
.radarwrap{display:grid;grid-template-columns:1fr 300px;gap:14px}
#radarMap{height:calc(100vh - 200px);min-height:480px;border-radius:12px;border:1px solid var(--line)}
.radarpanel{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;
  height:calc(100vh - 200px);min-height:480px;overflow:auto}
.radarpanel h3{font-size:12px;text-transform:uppercase;color:var(--dim);letter-spacing:1px;margin:10px 0 8px}
.radarlist{display:flex;flex-direction:column;gap:4px}
.radar-item{display:grid;grid-template-columns:10px 1fr auto;gap:8px;align-items:center;
  padding:6px 8px;border-radius:8px;cursor:pointer;border:1px solid transparent}
.radar-item:hover{background:rgba(255,255,255,.05);border-color:var(--line)}
.radar-item i{width:9px;height:9px;border-radius:50%;display:block}
.radar-item-main{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.radar-item small{color:var(--dim);font-size:11px;white-space:nowrap}
.radar-plane{font-size:16px;text-shadow:0 0 3px #fff,0 0 3px #fff;line-height:1}
@media(max-width:1100px){.radarwrap{grid-template-columns:1fr}}

/* ============ PAST OPERATIONS: filters + sticky table ============ */
.ops-exp{margin:0 0 10px}
.opsbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 0;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card);z-index:3}
.opsbar input[type=text],.opsbar select{background:var(--bg2);border:1px solid var(--line);color:var(--txt);border-radius:8px;padding:4px 10px;font-size:12px;font-family:inherit}
.opsbar input[type=text]{width:180px}
.opswrap{max-height:60vh;overflow:auto;margin-top:4px}
.opswrap thead th{position:sticky;top:0;background:var(--card);z-index:2}
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
th.sortable::after{content:' \2195';opacity:.35;font-size:9px}
th.sorted-asc::after{content:' \2191';opacity:1;color:#4fc3f7}
th.sorted-desc::after{content:' \2193';opacity:1;color:#4fc3f7}
td.late{color:#ef5350;font-weight:600}
td.canc{color:#ef5350;font-weight:600}
[data-theme="light"] td.late,[data-theme="light"] td.canc{color:#c62828}