/* ==========================================================
   AeroOps Premium Aviation Command Center — Shared theme
   Loaded LAST on mobile/, ramp/, workforce/, customer-service/
   Full command-center treatment: dark navy base, cyan/purple
   accents, glassmorphism, HUD, luminous accents, animations.
   Strictly visual — never touches logic, IDs, or interactivity.
   ========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --pt-bg-0:#020617;
  --pt-bg-1:#061426;
  --pt-bg-2:#0a1f3f;
  --pt-panel:rgba(11,31,58,.72);
  --pt-panel-2:rgba(17,44,84,.65);
  --pt-line:rgba(59,130,246,.28);
  --pt-line-2:rgba(56,189,248,.22);
  --pt-ink:#e8f5ff;
  --pt-ink-dim:#9fb4ce;
  --pt-muted:#7f93ad;
  --pt-cyan:#22d3ee;
  --pt-cyan-2:#67e8f9;
  --pt-purple:#a855f7;
  --pt-indigo:#818cf8;
  --pt-amber:#f59e0b;
  --pt-good:#22c55e;
  --pt-warn:#fbbf24;
  --pt-risk:#fb7185;
  --pt-glow-cyan:0 0 12px rgba(34,211,238,.45);
  --pt-glow-purple:0 0 14px rgba(168,85,247,.4);
  --pt-fontUI:'Manrope','Inter','Segoe UI',system-ui,sans-serif;
  --pt-fontDisp:'Chakra Petch','Manrope','Inter',system-ui,sans-serif;

  /* Override the pages' own CSS variables so their inline styles inherit dark palette */
  --bg:var(--pt-bg-1) !important;
  --bg2:var(--pt-bg-0) !important;
  --panel:var(--pt-panel) !important;
  --panel2:var(--pt-panel-2) !important;
  --panel3:var(--pt-panel-2) !important;
  --ink:var(--pt-ink) !important;
  --muted:var(--pt-muted) !important;
  --muted2:var(--pt-ink-dim) !important;
  --line:var(--pt-line) !important;
  --nav:#0a1f3f !important;
  --star:#f2c94c !important;
}

/* ---------- Body + typography ---------- */
html,body{background:var(--pt-bg-0) !important;color:var(--pt-ink) !important;font-family:var(--pt-fontUI) !important}
body{
  background:
    radial-gradient(1200px 600px at 8% -12%,rgba(34,211,238,.10),transparent 55%),
    radial-gradient(1000px 500px at 108% 5%,rgba(168,85,247,.10),transparent 55%),
    linear-gradient(180deg,#020617 0%,#061426 60%,#020617 100%) !important;
  min-height:100vh !important;
}
h1,h2,h3,h4{font-family:var(--pt-fontDisp) !important;letter-spacing:.02em}

/* ---------- Top nav / header ---------- */
.top,.topbar{
  background:linear-gradient(180deg,rgba(6,20,38,.92),rgba(10,31,63,.85)) !important;
  color:var(--pt-ink) !important;
  border-bottom:1px solid var(--pt-line) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.35),inset 0 -1px 0 rgba(56,189,248,.18) !important;
  backdrop-filter:blur(10px) saturate(1.1);
  -webkit-backdrop-filter:blur(10px) saturate(1.1);
  position:relative;
}
.top::after,.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,211,238,.7),rgba(168,85,247,.55),transparent);
  background-size:46% 100%;background-repeat:no-repeat;
  animation:ptDataStream 10s ease-in-out infinite;pointer-events:none;z-index:1;
}
@keyframes ptDataStream{0%,100%{background-position:-46% 0}50%{background-position:146% 0}}

.brand,.brandBlock .brand{color:var(--pt-cyan-2) !important;text-shadow:var(--pt-glow-cyan);font-family:var(--pt-fontDisp) !important}
.brandSub{color:var(--pt-ink-dim) !important;letter-spacing:.16em !important}
.brandMark{box-shadow:0 0 26px rgba(34,211,238,.4),inset 0 0 12px rgba(103,232,249,.15) !important}
.pill,.badge,.chip,.tab,.statusPill{
  background:rgba(11,31,58,.7) !important;
  color:var(--pt-ink) !important;
  border:1px solid var(--pt-line) !important;
  border-radius:999px !important;
  padding:5px 10px !important;
  font-weight:700 !important;
  letter-spacing:.02em;
}
.pill.primary,.chip.primary,.tab.active,.syncBtn.active{
  background:linear-gradient(135deg,rgba(34,211,238,.30),rgba(168,85,247,.26)) !important;
  border-color:rgba(103,232,249,.7) !important;
  color:#fff !important;
  box-shadow:var(--pt-glow-cyan),inset 0 0 12px rgba(34,211,238,.15);
  text-shadow:0 0 8px rgba(103,232,249,.5);
}
.chip.star{background:linear-gradient(135deg,rgba(242,201,76,.22),rgba(242,201,76,.05)) !important;border-color:rgba(242,201,76,.55) !important;color:#f2c94c !important}

/* ---------- Panels / cards ---------- */
.filters,.cards,.card,.board,.section,.modal,.modalWrap,.suggestCard,.details,.settings,.settingsWrap,.gateGroup,.gateHead,.flight,.team,.notes,.timeBox,.times,.empty,.reasonList{
  color:var(--pt-ink) !important;
}
.filters{
  background:linear-gradient(180deg,rgba(11,31,58,.85),rgba(6,20,38,.85)) !important;
  border-bottom:1px solid var(--pt-line) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.35) !important;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.card,.suggestCard,.gateGroup,.section,.settings,.settingsWrap,.details,.modal,.flight,.team{
  background:linear-gradient(180deg,rgba(11,31,58,.72),rgba(6,20,38,.72)) !important;
  border:1px solid var(--pt-line) !important;
  border-radius:12px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.35),inset 0 1px 0 rgba(103,232,249,.08) !important;
  backdrop-filter:blur(6px) saturate(1.1);
  -webkit-backdrop-filter:blur(6px) saturate(1.1);
  color:var(--pt-ink) !important;
  position:relative;
}
.card::before,.suggestCard::before{
  content:"";position:absolute;left:14px;right:14px;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(103,232,249,.55),transparent);
  pointer-events:none;opacity:.7;
}
.card:hover,.suggestCard:hover{border-color:rgba(103,232,249,.5) !important;box-shadow:0 14px 30px rgba(0,0,0,.4),0 0 22px rgba(34,211,238,.18) !important}

.gateHead,.sectionHead,.suggestHead{
  color:var(--pt-cyan-2) !important;
  border-bottom:1px solid var(--pt-line-2) !important;
  letter-spacing:.05em;
  text-transform:uppercase;
  font-weight:800 !important;
}

.notes,.subline,.small,.meta{color:var(--pt-ink-dim) !important}
.status,.stamp,.scrollState{color:var(--pt-ink) !important}
.empty{background:rgba(11,31,58,.4) !important;border:1px dashed var(--pt-line) !important;border-radius:10px !important;color:var(--pt-muted) !important;padding:14px !important}

/* ---------- Inputs / selects / buttons ---------- */
input,select,textarea{
  background:rgba(6,20,38,.75) !important;
  color:var(--pt-ink) !important;
  border:1px solid var(--pt-line) !important;
  border-radius:8px !important;
  font:inherit;
  padding:6px 10px !important;
  transition:border-color .2s,box-shadow .2s;
}
input::placeholder,textarea::placeholder{color:var(--pt-muted) !important}
input:focus,select:focus,textarea:focus{outline:0;border-color:rgba(103,232,249,.7) !important;box-shadow:0 0 0 3px rgba(34,211,238,.15),var(--pt-glow-cyan) !important}
/* Custom chevron for <select> in dark theme */
select{
  -webkit-appearance:none !important;-moz-appearance:none !important;appearance:none !important;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2367e8f9' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
  background-repeat:no-repeat !important;
  background-position:right 10px center !important;
  background-size:12px 12px !important;
  padding-right:32px !important;
}
select option{background:#061426 !important;color:var(--pt-ink) !important}
input[type=checkbox]{accent-color:#22d3ee}
input[type=number]{padding-right:6px !important}

button,.syncBtn,.ackBtn,.filters button,.mainActions button,.modalActions button,.suggestActions button{
  background:linear-gradient(180deg,rgba(11,31,58,.9),rgba(6,20,38,.9)) !important;
  color:var(--pt-ink) !important;
  border:1px solid var(--pt-line) !important;
  border-radius:8px !important;
  font:inherit;
  font-weight:700 !important;
  padding:7px 12px !important;
  cursor:pointer;
  transition:transform .12s,border-color .18s,box-shadow .18s;
  position:relative;
  overflow:hidden;
}
button:hover,.syncBtn:hover,.ackBtn:hover{border-color:rgba(103,232,249,.55) !important;box-shadow:0 0 14px rgba(34,211,238,.22) !important;transform:translateY(-1px)}
button:focus-visible,.syncBtn:focus-visible,.ackBtn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid rgba(103,232,249,.6) !important;outline-offset:2px}
button.primary,.mainActions button.primary,.modalActions button.primary,.filters button.primary{
  background:linear-gradient(135deg,#22d3ee,#818cf8 55%,#c084fc) !important;
  color:#04121f !important;
  border-color:transparent !important;
  box-shadow:0 10px 24px rgba(34,211,238,.28),0 0 20px rgba(168,85,247,.25) !important;
  font-weight:800 !important;
}
button.primary:hover{filter:brightness(1.08) saturate(1.05)}
.ackBtn.done,.syncStatus.live{background:linear-gradient(135deg,rgba(34,197,94,.28),rgba(34,197,94,.1)) !important;color:#86efac !important;border-color:rgba(34,197,94,.55) !important}
.syncStatus.warn,.badge.warning,.warning{background:linear-gradient(135deg,rgba(245,158,11,.25),rgba(245,158,11,.08)) !important;color:#fde68a !important;border-color:rgba(245,158,11,.55) !important}
.badge.danger,.danger{background:linear-gradient(135deg,rgba(251,113,133,.28),rgba(251,113,133,.1)) !important;color:#fecdd3 !important;border-color:rgba(251,113,133,.55) !important}

/* Button glint sweep on primary */
button.primary::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg) translateX(0);transition:transform .55s ease;pointer-events:none}
button.primary:hover::after{transform:skewX(-18deg) translateX(430%)}

/* ---------- Tabs / tab bars (mobile) ---------- */
.tabbar{background:linear-gradient(180deg,rgba(11,31,58,.9),rgba(6,20,38,.9)) !important;border-top:1px solid var(--pt-line) !important;box-shadow:0 -8px 24px rgba(0,0,0,.4) !important;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.tab{background:transparent !important;color:var(--pt-muted) !important;border:0 !important;padding:8px 10px !important}
.tab.active{color:var(--pt-cyan-2) !important;background:linear-gradient(180deg,rgba(34,211,238,.15),rgba(34,211,238,.02)) !important;text-shadow:var(--pt-glow-cyan) !important;border:1px solid rgba(103,232,249,.35) !important}

/* ---------- Flight / team / gate rows (ramp) ---------- */
.flight,.team{padding:10px !important}
.flight strong,.flight b,.team strong,.team b{color:var(--pt-cyan-2) !important;font-family:var(--pt-fontDisp) !important;letter-spacing:.03em}
.badges .badge{margin-right:4px}

/* ---------- Modal ---------- */
.modalWrap{background:rgba(2,6,23,.72) !important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal{background:linear-gradient(180deg,rgba(11,31,58,.95),rgba(6,20,38,.95)) !important;border:1px solid rgba(103,232,249,.35) !important;box-shadow:0 30px 80px rgba(0,0,0,.55),0 0 40px rgba(34,211,238,.15) !important}

/* ---------- Scrollbars ---------- */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:rgba(6,20,38,.4)}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#1d4ed8,#0ea5e9);border-radius:999px;border:2px solid rgba(6,20,38,.6)}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#22d3ee,#a855f7)}
*{scrollbar-width:thin;scrollbar-color:#1d4ed8 rgba(6,20,38,.4)}

/* ---------- HUD corner brackets on the main content area ---------- */
.board,main,.settingsWrap,.suggestList{position:relative}
.board::before,.board::after{content:"";position:absolute;width:22px;height:22px;pointer-events:none;z-index:5;opacity:.7;background:transparent}
.board::before{left:6px;top:6px;border-left:2px solid rgba(34,211,238,.7);border-top:2px solid rgba(34,211,238,.7);border-top-left-radius:8px}
.board::after{right:6px;bottom:6px;border-right:2px solid rgba(168,85,247,.55);border-bottom:2px solid rgba(168,85,247,.55);border-bottom-right-radius:8px}
/* Mobile Operator filter boards: hide HUD corners that look like a floating cyan glitch */
body.mobileOperator .board::before,
body.mobileOperator .board::after,
body.agentRamp .board::before,
body.agentRamp .board::after{content:none!important;display:none!important;width:0!important;height:0!important;border:0!important}

/* ---------- Live indicator dots ---------- */
.status i,.statusPill i,.syncStatus i,.chip i{animation:ptPulse 2.2s ease-in-out infinite}
@keyframes ptPulse{0%,100%{opacity:.6;box-shadow:0 0 4px currentColor}50%{opacity:1;box-shadow:0 0 12px currentColor,0 0 20px currentColor}}

/* ---------- Toast notifications ---------- */
.toast{background:linear-gradient(180deg,rgba(11,31,58,.95),rgba(6,20,38,.95)) !important;color:var(--pt-ink) !important;border:1px solid rgba(103,232,249,.5) !important;border-radius:10px !important;box-shadow:0 10px 30px rgba(0,0,0,.4),0 0 20px rgba(34,211,238,.18) !important;padding:10px 14px !important;font-weight:600 !important}

/* ---------- Text selection ---------- */
::selection{background:rgba(34,211,238,.35);color:#fff}

/* ---------- Luminous background grid overlay on the board ---------- */
.board{
  background-image:
    linear-gradient(rgba(56,189,248,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.06) 1px,transparent 1px) !important;
  background-size:44px 44px !important;
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion:reduce){
  .top::after,.topbar::after,button.primary::after,.status i,.statusPill i,.dot,.sideNav a.active span,main::before{animation:none !important;transition:none !important}
}

/* ---------- Aux-page HUD chrome (workforce/, customer-service/, mobile/, ramp/) ---------- */
/* Side nav active glow */
.sideNav a.active span{box-shadow:0 0 22px rgba(34,211,238,.5),inset 0 0 12px rgba(103,232,249,.22) !important;border-color:rgba(103,232,249,.6) !important}
.sideNav a.active{color:#e0f7ff !important}
.sideNav a:hover span{border-color:rgba(103,232,249,.42) !important;box-shadow:0 0 14px rgba(34,211,238,.22)}
.sideNav a span{transition:box-shadow .2s,border-color .2s}

/* Top KPI mini-cards (workforce): premium glass */
.topKpi{background:linear-gradient(180deg,rgba(15,42,74,.78),rgba(11,31,58,.62)) !important;border:1px solid rgba(56,189,248,.28) !important;border-radius:10px !important;box-shadow:inset 0 1px 0 rgba(103,232,249,.09),0 6px 16px rgba(0,0,0,.28) !important;position:relative;overflow:hidden}
.topKpi::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(103,232,249,.5),transparent);opacity:.7;pointer-events:none}
.topKpi b{color:#e6f7ff !important;text-shadow:0 0 12px rgba(34,211,238,.22)}
.topKpi span{color:var(--pt-cyan-2) !important;text-shadow:var(--pt-glow-cyan)}

/* Panels (workforce): premium glass + hairline glow */
.panel{background:linear-gradient(180deg,rgba(11,31,58,.82),rgba(6,20,38,.86)) !important;border:1px solid rgba(56,189,248,.25) !important;border-radius:12px !important;box-shadow:0 14px 32px rgba(0,0,0,.38),inset 0 1px 0 rgba(103,232,249,.08) !important;backdrop-filter:blur(6px) saturate(1.1);-webkit-backdrop-filter:blur(6px) saturate(1.1);position:relative}
.panel::before{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(103,232,249,.55),transparent);pointer-events:none;opacity:.7}

/* Tabs (workforce Overview/Uploads/etc) */
.tabs .tab{background:rgba(11,31,58,.55) !important;color:var(--pt-ink-dim) !important;border:1px solid rgba(56,189,248,.22) !important;border-radius:999px !important;padding:9px 13px !important;font-weight:800 !important;transition:border-color .2s,color .2s,box-shadow .2s}
.tabs .tab:hover{color:var(--pt-cyan-2) !important;border-color:rgba(103,232,249,.4) !important}
.tabs .tab.active{background:linear-gradient(135deg,rgba(34,211,238,.24),rgba(168,85,247,.22)) !important;color:#fff !important;border-color:rgba(103,232,249,.65) !important;box-shadow:var(--pt-glow-cyan),inset 0 0 10px rgba(34,211,238,.12) !important;text-shadow:0 0 8px rgba(103,232,249,.5)}

/* Buttons (workforce .btn) */
.btn{background:linear-gradient(180deg,rgba(11,31,58,.85),rgba(6,20,38,.85)) !important;border:1px solid rgba(56,189,248,.32) !important;color:var(--pt-ink) !important;border-radius:9px !important;font-weight:800 !important;transition:transform .12s,border-color .18s,box-shadow .18s;position:relative;overflow:hidden}
.btn:hover{border-color:rgba(103,232,249,.55) !important;box-shadow:0 0 16px rgba(34,211,238,.24) !important;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(135deg,#22d3ee,#818cf8 55%,#c084fc) !important;color:#04121f !important;border-color:transparent !important;box-shadow:0 10px 24px rgba(34,211,238,.28),0 0 20px rgba(168,85,247,.25) !important}
.btn.primary::after{content:"";position:absolute;top:0;bottom:0;left:-45%;width:38%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg) translateX(0);transition:transform .55s ease;pointer-events:none}
.btn.primary:hover::after{transform:skewX(-18deg) translateX(430%)}

/* Cockpit HUD corner brackets on main content (aux pages) */
main{position:relative}
main > *:first-child{position:relative}
main::before,main::after{content:"";position:absolute;width:26px;height:26px;pointer-events:none;z-index:5;opacity:.75}
main::before{left:8px;top:8px;border-left:2px solid rgba(34,211,238,.7);border-top:2px solid rgba(34,211,238,.7);border-top-left-radius:8px;box-shadow:-2px -2px 12px rgba(34,211,238,.15) inset}
main::after{right:8px;bottom:8px;border-right:2px solid rgba(168,85,247,.55);border-bottom:2px solid rgba(168,85,247,.55);border-bottom-right-radius:8px}

/* Live status dot / heartbeat */
.dot,.status i,.statusPill i,.syncStatus i,.chip i,.opsStripHeader::before{animation:ptHeartbeat 2.4s ease-in-out infinite}
@keyframes ptHeartbeat{0%,58%,100%{opacity:.7;box-shadow:0 0 6px currentColor}18%{opacity:1;box-shadow:0 0 10px currentColor,0 0 18px currentColor}30%{opacity:.75;box-shadow:0 0 6px currentColor}42%{opacity:1;box-shadow:0 0 12px currentColor,0 0 20px currentColor}}

/* Chart / demand areas — containment only (no traveling scan beam) */
.chartPanel,.blockChart,.opsDemandGraph{position:relative;overflow:hidden}
/* Intentionally no ::after scan/sweep on .chartPanel / .blockChart — that vertical
   traveling light was distracting on Workforce Intelligence / Proposed Bid Generator.
   Static panel borders and hairline glows remain via .panel / .panel::before. */

/* Recommendation / list rows */
.rec{background:linear-gradient(180deg,rgba(11,31,58,.55),rgba(6,20,38,.55)) !important;border:1px solid rgba(56,189,248,.22) !important;border-left-width:4px !important;border-radius:10px !important;box-shadow:inset 0 1px 0 rgba(103,232,249,.06),0 4px 12px rgba(0,0,0,.18) !important;transition:border-color .18s,box-shadow .18s}
.rec:hover{border-color:rgba(103,232,249,.4) !important;box-shadow:0 0 14px rgba(34,211,238,.16),0 6px 18px rgba(0,0,0,.24) !important}
.rec.high{border-left-color:#fb7185 !important;background:linear-gradient(180deg,rgba(251,113,133,.14),rgba(6,20,38,.55)) !important}
.rec.medium{border-left-color:#fbbf24 !important;background:linear-gradient(180deg,rgba(251,191,36,.12),rgba(6,20,38,.55)) !important}
.rec.low{border-left-color:#22c55e !important}

/* Metric mini-cards inside panels */
.metric{background:linear-gradient(180deg,rgba(15,42,74,.6),rgba(11,31,58,.5)) !important;border:1px solid rgba(56,189,248,.22) !important;border-radius:10px !important;position:relative;overflow:hidden}
.metric::before{content:"";position:absolute;left:10px;right:10px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(103,232,249,.4),transparent);opacity:.7;pointer-events:none}
.metric b{color:#e0f7ff !important;text-shadow:0 0 12px rgba(34,211,238,.18)}
.metric span{color:var(--pt-cyan-2) !important;text-shadow:var(--pt-glow-cyan)}
.metric small{color:var(--pt-ink-dim) !important}

/* Filters band (mobile) heading pass */
.filters .badge,.filters .chip{background:rgba(11,31,58,.7) !important}

/* Heatmap cells (workforce) - preserve category tints but polish borders */
.heatCell{border-radius:10px !important;box-shadow:inset 0 1px 0 rgba(103,232,249,.05) !important}
.heatCell b{color:#e6f7ff !important;text-shadow:0 0 8px rgba(34,211,238,.12)}

/* Utilisation bars */
.utilBar{background:rgba(11,31,58,.55) !important;border:1px solid rgba(56,189,248,.18) !important;border-radius:999px !important;box-shadow:inset 0 1px 2px rgba(0,0,0,.4) !important}
.utilFill{box-shadow:0 0 12px rgba(34,211,238,.28)}
.utilFill.hot{box-shadow:0 0 12px rgba(249,115,22,.35)}
.utilFill.low{box-shadow:0 0 10px rgba(100,116,139,.28)}