/* SE brand – منصة متابعة تنفيذ مهام الصيانة */
@font-face { font-family: SE; src: url(fonts/SE-Light.otf) format("opentype"); font-weight: 300; font-display: swap; }
@font-face { font-family: SE; src: url(fonts/SE-Regular.otf) format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: SE; src: url(fonts/SE-Medium.otf) format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: SE; src: url(fonts/SE-SemiBold.otf) format("opentype"); font-weight: 600 800; font-display: swap; }

:root {
  --db: #001F5E; --blue: #0027B9; --mb: #0080FF; --lb: #32C2FF; --g: #00FF86;
  --edb: #00183A; --g40: #9BA2AF; --g25: #C0C5CD; --g10: #E6E8EB; --g5: #F2F3F5;
  --tgrn: #00B476; --torg: #EF9B00; --tred: #E10054; --body: #33415C;
  --panel: #0A2A6B; --panel-line: rgba(50, 194, 255, .35);
  --grad: linear-gradient(270deg, #0080FF, #00FF86);
  --snip: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: SE, "Segoe UI", Tahoma, Arial, sans-serif; font-size: 15px; line-height: 1.55; }
body.light { background: var(--g5); color: var(--edb); }
body.dark { background: var(--db) radial-gradient(1200px 600px at 0% 100%, rgba(0, 128, 255, .18), transparent 60%) fixed; color: #fff; }
a { color: var(--blue); }
b, strong, h1, h2, h3, h4 { font-weight: 600; }
.muted, .sub { color: var(--g40); }
body.dark .sub { color: var(--g25); font-size: 12.5px; margin: -6px 0 10px; }

/* ---------- Top bar ---------- */
.topbar { display: flex; align-items: center; gap: 24px; padding: 10px 28px; background: var(--db); color: #fff; flex-wrap: wrap; }
.topbar.dark { background: rgba(0, 24, 58, .55); border-bottom: 1px solid rgba(50, 194, 255, .2); backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; font-weight: 600; }
.brand img { height: 42px; }
.topbar nav { display: flex; gap: 4px; flex-wrap: wrap; flex: 1; }
.topbar nav a { color: var(--g25); text-decoration: none; padding: 7px 14px; border-radius: 20px; font-size: 14px; }
.topbar nav a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.topbar nav a.on { color: var(--db); background: #fff; }
.who { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--g25); }
.who a, .who .link { color: var(--lb); }
.who form { margin: 0; }
button.link { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; text-decoration: underline; }

/* ---------- Generic UI ---------- */
.wrap { max-width: 1400px; margin: 0 auto; padding: 24px 28px 60px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h2 { margin: 0; color: var(--db); font-size: 26px; }
.page-head p { margin: 4px 0 0; }
.card { background: #fff; border: 1px solid var(--g10); border-radius: 14px; padding: 20px 22px; margin-bottom: 18px; }
.card h3 { margin: 0 0 14px; color: var(--db); }
.card.narrow { max-width: 520px; margin: 30px auto; }
.card.center { text-align: center; max-width: 520px; margin: 60px auto; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.grid-2.wide-first { grid-template-columns: 1.7fr 1fr; }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
label { display: block; font-weight: 500; margin-bottom: 14px; color: var(--body); font-size: 14px; }
label small, small { display: block; color: var(--g40); font-weight: 400; font-size: 12px; margin-top: 4px; }
input, select, textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; border: 1px solid var(--g25); border-radius: 10px; background: #fff; color: var(--edb); }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--mb); border-color: var(--mb); }
.btn { display: inline-block; border: 1px solid var(--g25); background: #fff; color: var(--db); padding: 10px 20px; border-radius: 10px; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.primary { background: var(--db); border-color: var(--db); color: #fff; }
.btn.primary:hover { background: var(--blue); }
.btn.ok { background: var(--tgrn); border-color: var(--tgrn); color: #fff; }
.btn.danger { background: #fff; border-color: var(--tred); color: var(--tred); }
.btn.block { width: 100%; }
.flash { padding: 12px 16px; border-radius: 10px; margin-bottom: 16px; font-weight: 500; }
.flash.ok { background: #E6FAF2; color: #00744C; border: 1px solid #9BE5C8; }
.flash.err { background: #FDE8EF; color: #A3003D; border: 1px solid #F5A3C0; }
.notice { background: #FFF5E0; color: #8A5A00; padding: 10px 14px; border-radius: 10px; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; background: var(--g10); color: var(--body); }
.tag.pending, .tag.warn { background: #FFF1DB; color: #A86A00; }
.tag.approved { background: #E6FAF2; color: #00744C; }
.tag.rejected { background: #FDE8EF; color: #A3003D; }
.tag.cat { background: #E3F0FF; color: var(--blue); }
.tabs { display: flex; gap: 6px; }
.tabs a { padding: 8px 16px; border-radius: 20px; text-decoration: none; color: var(--body); background: #fff; border: 1px solid var(--g10); }
.tabs a.on { background: var(--db); color: #fff; border-color: var(--db); }

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: center; background: var(--db); color: #fff; padding: 9px 8px; font-weight: 600; font-size: 13px; }
.tbl th:first-child { border-start-start-radius: 8px; } .tbl th:last-child { border-start-end-radius: 8px; }
.tbl td { text-align: center; padding: 8px; border-bottom: 1px solid var(--g10); }
.tbl td.l { text-align: left; }
.tbl tr:nth-child(even) td { background: var(--g5); }
.tbl tr.off td { opacity: .5; }
.tbl.compact td, .tbl.compact th { padding: 6px; font-size: 13px; }
.pbar { display: inline-block; width: 70px; height: 7px; border-radius: 6px; background: var(--g10); vertical-align: middle; overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 6px; }
.pbar i.red { background: var(--tred); } .pbar i.blue { background: var(--mb); } .pbar i.green { background: var(--tgrn); }
.roles ul { margin: 0; padding-inline-start: 20px; color: var(--body); }

/* approvals */
.req { display: grid; grid-template-columns: 1fr 170px; gap: 8px 20px; }
.req-title { font-weight: 600; color: var(--db); text-align: right; }
.req-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--body); font-size: 13.5px; margin-top: 6px; align-items: center; }
.req-note { margin: 10px 0 0; color: var(--body); background: var(--g5); padding: 8px 12px; border-radius: 8px; }
.req-qty { text-align: center; border-inline-start: 1px solid var(--g10); }
.req-qty .big { font-size: 34px; font-weight: 600; color: var(--tgrn); line-height: 1.2; }
.req-actions { grid-column: 1 / -1; display: flex; gap: 12px; flex-wrap: wrap; border-top: 1px dashed var(--g10); padding-top: 12px; }
.req-actions form { display: flex; gap: 8px; flex: 1; min-width: 280px; }
.req-actions input { margin: 0; }

/* login */
.login-page { min-height: 100vh; display: grid; place-items: center; background: var(--db) radial-gradient(900px 500px at 100% 0%, rgba(0, 255, 134, .18), transparent 60%); padding: 20px; }
.login-card { background: #fff; width: 100%; max-width: 420px; padding: 34px 32px; clip-path: var(--snip); border-radius: 4px; }
.login-logo { height: 70px; background: var(--db); padding: 10px 14px; border-radius: 10px; }
.login-card h1 { font-size: 22px; color: var(--db); margin: 18px 0 2px; }
.login-card .muted { margin: 0 0 22px; }

/* ---------- Dashboard (dark) ---------- */
.dash { padding: 22px 28px 50px; max-width: 1680px; margin: 0 auto; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.dash-head h1 { margin: 0; font-size: 30px; }
.dash-head p { margin: 2px 0 0; color: var(--lb); }
.live { display: flex; align-items: center; gap: 10px; color: var(--g25); font-size: 13.5px; background: rgba(255, 255, 255, .05); padding: 8px 16px; border-radius: 30px; border: 1px solid rgba(50, 194, 255, .25); }
.live b { color: #fff; } .live .sep { opacity: .35; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--g); box-shadow: 0 0 0 0 rgba(0, 255, 134, .7); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgba(0, 255, 134, 0); } 100% { box-shadow: 0 0 0 0 rgba(0, 255, 134, 0); } }
body.flash-up .kpi b { animation: pop .9s ease; }
@keyframes pop { 40% { transform: scale(1.12); filter: brightness(1.4); } }

.snip { clip-path: var(--snip); background: var(--panel); position: relative; }
.snip::before { content: ""; position: absolute; inset: 0; padding: 1px; clip-path: var(--snip);
  background: linear-gradient(270deg, rgba(0, 128, 255, .9), rgba(0, 255, 134, .9)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 16px; }
.kpi { padding: 14px 20px; }
.kpi span { color: var(--g25); font-size: 13px; font-weight: 500; }
.kpi b { display: block; font-size: 32px; line-height: 1.25; text-align: right; }
.w { color: #fff; } .lb { color: var(--lb); } .g { color: var(--g); } .o { color: var(--torg); } .r { color: #FF4D8A; }

.dash-grid { display: grid; grid-template-columns: 330px 1fr 340px; gap: 16px; margin-bottom: 16px; align-items: stretch; }
.panel { padding: 18px 20px; }
.panel h3 { margin: 0 0 12px; font-size: 16px; }
.panel h4 { margin: 18px 0 10px; color: var(--lb); font-size: 14px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-head h3 { margin: 0; }
.side-col { display: grid; gap: 16px; grid-template-rows: auto 1fr; }

.gauge { position: relative; width: 210px; margin: 6px auto 0; }
.gauge svg { width: 100%; transform: rotate(-90deg); }
.g-track { fill: none; stroke: #1C3D7E; stroke-width: 22; }
.g-val { fill: none; stroke-width: 22; stroke-linecap: round; transition: stroke-dashoffset 1s ease; }
.g-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.g-center b { font-size: 34px; line-height: 1; }
.g-center small { color: var(--g25); font-size: 11.5px; margin-top: 6px; }

.cat-row, .gap { margin-bottom: 14px; }
.cat-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; font-weight: 500; gap: 8px; }
.cat-row small { color: var(--g40); font-size: 11px; margin-top: 3px; }
.track { display: block; height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 6px; }
.track i { display: block; height: 100%; border-radius: 6px; margin-inline-start: 0; transition: width 1s ease; }
.track.sm { display: inline-block; width: 72px; height: 6px; margin: 0 8px 0 0; vertical-align: middle; background: rgba(255, 255, 255, .14); }
i.grad { background: var(--grad); } i.red { background: var(--tred); } i.blue { background: var(--lb); } i.green { background: var(--g); } i.orange { background: var(--torg); }
b.red { color: #FF4D8A; } b.blue { color: var(--lb); } b.green { color: var(--g); }

.hbars { display: grid; gap: 7px; }
.hbar { display: grid; grid-template-columns: 190px 1fr 48px; gap: 10px; align-items: center; font-size: 12.5px; direction: ltr; }
.hbar .lbl { color: var(--g25); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hbar .bar { height: 14px; background: rgba(255, 255, 255, .06); border-radius: 0 4px 4px 0; }
.hbar .bar i { display: block; height: 100%; border-radius: 0 4px 4px 0; transition: width 1s ease; }
.hbar b { font-size: 12.5px; }

.feed { display: grid; gap: 10px; max-height: 300px; overflow: auto; }
.feed-item { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: center; background: rgba(255, 255, 255, .04); padding: 8px 10px; border-radius: 8px; font-size: 13px; }
.feed-item b { font-size: 18px; text-align: center; }
.feed-item small { display: block; color: var(--g40); font-size: 11.5px; margin: 0; }

.table-panel { padding: 18px 20px 20px; }
.gtable-wrap { overflow-x: auto; }
.gtable { width: 100%; border-collapse: separate; border-spacing: 0; direction: ltr; font-size: 13px; min-width: 1100px; }
.gtable th { background: linear-gradient(90deg, var(--db), var(--mb)); color: #fff; padding: 9px 8px; font-weight: 600; font-size: 12.5px; }
.gtable th:first-child { background: var(--db); }
.gtable td { padding: 6px 8px; text-align: center; border-bottom: 1px solid rgba(255, 255, 255, .06); color: #E3F0FA; }
.gtable tbody tr:nth-child(even) td:not(.chip) { background: rgba(255, 255, 255, .035); }
.gtable tbody tr:hover td:not(.chip) { background: rgba(50, 194, 255, .1); }
.gtable td.l { text-align: left; }
.gtable td.prog { text-align: left; white-space: nowrap; }
.gtable .mute { color: var(--g40); }
.gtable .chip { width: 34px; padding: 4px; color: #fff; font-weight: 600; font-size: 12px; border-bottom: 3px solid var(--db); }
.gtable .chip span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
.gtable .chip.substations { background: linear-gradient(180deg, var(--db), var(--blue)); }
.gtable .chip.protection { background: linear-gradient(180deg, var(--blue), var(--mb)); }
.gtable .chip.other { background: linear-gradient(180deg, var(--lb), var(--g)); color: var(--edb, #00183A); }
.gtable .chip.other span { white-space: normal; line-height: 1.1; display: inline-block; max-height: 64px; font-size: 11px; }
.gtable .chip.mvlv { background: linear-gradient(180deg, var(--mb), var(--lb)); }
.gtable tfoot td { background: var(--edb); font-weight: 600; color: #fff; padding: 10px 8px; border: 0; }
.pend { color: var(--torg); font-size: 11px; font-weight: 600; }
.stag { display: inline-block; min-width: 38px; padding: 1px 8px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.stag.w { background: rgba(0, 128, 255, .2); color: var(--lb); } .stag.s { background: rgba(239, 155, 0, .2); color: var(--torg); } .stag.ws { background: rgba(0, 255, 134, .15); color: var(--g); }
.dash .flash { margin-bottom: 14px; }

@media (max-width: 1250px) {
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid > :nth-child(2) { grid-column: 1 / -1; grid-row: 1; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .dash-grid, .grid-2, .grid-2.wide-first, .row-2 { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .hbar { grid-template-columns: 120px 1fr 42px; }
  .req { grid-template-columns: 1fr; } .req-qty { border: 0; }
  .topbar { padding: 10px 14px; } .wrap, .dash { padding: 16px 14px 40px; }
}
.legend { display: flex; gap: 14px; font-size: 12px; color: var(--g25); flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.legend i.red { background: var(--tred); } .legend i.blue { background: var(--lb); } .legend i.green { background: var(--g); }
[dir="ltr"] { unicode-bidi: isolate; }
.nw { white-space: nowrap; }
.help { margin: 0; padding-inline-start: 18px; color: var(--body); line-height: 1.9; }
.plan-grid td, .plan-grid th { white-space: nowrap; }
.plan-in { width: 74px; margin: 0 auto; padding: 6px; text-align: center; }
.warn-txt { color: var(--torg); font-weight: 600; }
code { background: var(--g5); padding: 1px 6px; border-radius: 4px; }

/* ======================= v2 dashboard ======================= */
.toolbar { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.toolbar label { color: var(--g25); font-size: 12.5px; margin: 0; }
.toolbar select { margin-top: 4px; background: var(--panel); color: #fff; border-color: rgba(50, 194, 255, .35); padding: 8px 12px; min-width: 190px; }
.filter-note { color: var(--torg); font-size: 12.5px; padding-bottom: 10px; }
.tools { margin-inline-start: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.tbtn { display: inline-flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .06); color: #fff; border: 1px solid rgba(50, 194, 255, .35);
  padding: 8px 14px; border-radius: 10px; font: inherit; font-size: 13.5px; cursor: pointer; text-decoration: none; }
.tbtn:hover { background: rgba(50, 194, 255, .15); }
.delta { display: block; font-style: normal; font-size: 12px; font-weight: 600; margin-top: 2px; }
.delta.up { color: var(--g); } .delta.down { color: var(--lb); }

.season { display: flex; gap: 0; margin-bottom: 16px; padding: 14px 6px; flex-wrap: wrap; }
.season .sc { flex: 1; min-width: 170px; padding: 4px 18px; border-inline-start: 1px solid rgba(255, 255, 255, .08); }
.season .sc:first-child { border: 0; }
.season .sc.wide { flex: 1.6; }
.season .sc span { display: block; color: var(--g25); font-size: 12.5px; font-weight: 500; }
.season .sc b { display: block; font-size: 26px; line-height: 1.35; }
.season .sc b small { display: inline; font-size: 13px; color: var(--g25); }
.season .sc > small { color: var(--g40); font-size: 11.5px; margin-top: 2px; }
.season .sc.hint small { color: var(--torg); font-size: 12.5px; }

.dash-grid.two { grid-template-columns: 1.6fr 1fr; }
.dash-grid.two.rev { grid-template-columns: 1fr 1.25fr; }
.trend svg, .map svg { direction: ltr; }
.trend svg { width: 100%; height: auto; display: block; }
.trend .grid, .map .mg { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.trend .ax { fill: var(--g40); font-size: 11px; font-family: SE, sans-serif; }
.trend .ax.o, .map .ax.o { fill: var(--torg); } .trend .ax.w, .map .ax.w { fill: #fff; font-weight: 600; }
.trend .ac { fill: none; stroke: url(#tl); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.trend .pl { fill: none; stroke: var(--lb); stroke-width: 2; stroke-dasharray: 6 5; opacity: .85; }
.trend .tgt { stroke: var(--torg); stroke-width: 1.5; stroke-dasharray: 3 4; }
.trend .now { fill: var(--g); stroke: #fff; stroke-width: 2; }
.legend i.dash-lb, .legend i.dash-o { width: 18px; height: 0; border-radius: 0; border-top: 2px dashed var(--lb); }
.legend i.dash-o { border-top-color: var(--torg); }

.badge { background: rgba(255, 255, 255, .1); color: var(--g25); border-radius: 20px; padding: 1px 12px; font-weight: 600; font-size: 13px; }
.badge.hot { background: rgba(225, 0, 84, .25); color: #FF6B9D; }
.alerts { display: grid; gap: 8px; max-height: 300px; overflow: auto; }
.alert { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; padding: 9px 12px; border-radius: 8px; font-size: 13px;
  background: rgba(255, 255, 255, .04); cursor: pointer; border-inline-start: 3px solid var(--torg); }
.alert.high { border-color: var(--tred); background: rgba(225, 0, 84, .08); }
.alert i { font-style: normal; color: var(--torg); } .alert.high i { color: #FF4D8A; }
.alert:hover { background: rgba(50, 194, 255, .1); }

.perf { display: grid; gap: 4px; font-size: 13px; }
.perf-row { display: grid; grid-template-columns: 1.3fr 1.6fr .8fr .6fr .6fr; gap: 10px; align-items: center; padding: 9px 4px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.perf-row.head { color: var(--g40); font-size: 11.5px; border: 0; padding-bottom: 2px; }
.perf-row .track.sm { width: 64px; margin: 0 8px; }
.pill { font-style: normal; display: inline-block; min-width: 28px; text-align: center; border-radius: 12px; padding: 0 8px; font-weight: 600; font-size: 12px; }
.pill.hot { background: rgba(225, 0, 84, .25); color: #FF6B9D; } .pill.ok { background: rgba(0, 255, 134, .12); color: var(--g); }

.map svg { width: 100%; height: 300px; display: block; background: radial-gradient(circle at 50% 50%, rgba(0, 128, 255, .12), transparent 70%); border-radius: 8px; }
.map .ax { fill: var(--g25); font-size: 11px; font-family: SE, sans-serif; paint-order: stroke; stroke: var(--panel); stroke-width: 3px; }
.map .st { fill: rgba(155, 162, 175, .5); stroke: rgba(255, 255, 255, .4); }
.map .st.on { fill: url(#tl); fill: var(--g); fill-opacity: .8; stroke: #fff; stroke-width: 1.2; }
.map .halo { fill: rgba(0, 255, 134, .08); }

button.hbar { background: none; border: 0; color: inherit; font: inherit; padding: 2px 0; cursor: pointer; width: 100%; border-radius: 4px; }
button.hbar:hover { background: rgba(50, 194, 255, .08); }
.gap, .gtable tbody tr { cursor: pointer; }

.modal { position: fixed; inset: 0; background: rgba(0, 12, 35, .75); display: grid; place-items: center; z-index: 50; padding: 20px; backdrop-filter: blur(3px); }
.modal[hidden] { display: none; }
.modal-box { width: min(1000px, 100%); max-height: 86vh; overflow: auto; padding: 22px 24px; }
.m-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 10px 0 16px; }
.m-kpis div { background: rgba(255, 255, 255, .05); border-radius: 8px; padding: 10px 12px; }
.m-kpis span { display: block; color: var(--g25); font-size: 12px; } .m-kpis b { font-size: 22px; }
.mtable { width: 100%; border-collapse: collapse; font-size: 13px; }
.mtable th { color: var(--g25); font-weight: 500; text-align: right; padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .15); }
.mtable td { padding: 8px; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.stat { font-size: 11.5px; padding: 1px 8px; border-radius: 10px; font-weight: 600; }
.stat.approved { background: rgba(0, 255, 134, .15); color: var(--g); } .stat.pending { background: rgba(239, 155, 0, .2); color: var(--torg); }
.stat.rejected { background: rgba(225, 0, 84, .2); color: #FF6B9D; }

/* TV mode */
.tv-bar { display: flex; align-items: center; gap: 14px; padding: 10px 28px; color: var(--g25); font-weight: 600; }
.tv-bar img { height: 40px; } .tv-bar span { flex: 1; color: #fff; }
body.tv .dash { max-width: none; }
body.tv .dash-head h1 { font-size: 38px; }
body.tv .kpi b { font-size: 42px; }
body.tv #clock { font-size: 18px; color: #fff; }
body.tv .table-panel { display: none; }

@media (max-width: 1250px) { .dash-grid.two, .dash-grid.two.rev { grid-template-columns: 1fr; } .m-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 760px) { .season .sc { min-width: 50%; border: 0; padding: 8px 12px; } .perf-row { grid-template-columns: 1fr 1.4fr .6fr .5fr .5fr; font-size: 12px; } .tools { margin: 0; } }

/* Print / PDF */
@media print {
  @page { size: A3 landscape; margin: 10mm; }
  body.dark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .topbar, .no-print, .tv-bar, .modal { display: none !important; }
  .dash { padding: 0; }
  .panel, .kpi, .season, .gtable tr { break-inside: avoid; }
  .feed, .alerts { max-height: none; overflow: visible; }
}

/* =====================================================================
   DIGITAL ENERGY THEME (v3) — glows, energy waves, glass panels
   ===================================================================== */
:root {
  --glass: linear-gradient(180deg, rgba(16, 52, 128, .62), rgba(5, 25, 70, .68));
  --glass-hi: linear-gradient(180deg, rgba(22, 66, 156, .72), rgba(7, 32, 88, .74));
  --line: rgba(50, 194, 255, .28);
  --glow-b: 0 0 22px rgba(0, 128, 255, .35);
  --glow-g: 0 0 22px rgba(0, 255, 134, .35);
}
html { background: #00122F; }
body.dark { background: radial-gradient(1200px 700px at 85% -10%, rgba(0, 128, 255, .22), transparent 60%),
  radial-gradient(900px 600px at -10% 110%, rgba(0, 255, 134, .12), transparent 60%), linear-gradient(180deg, #001F5E 0%, #00143D 55%, #000E2B 100%) fixed;
  color: #fff; min-height: 100vh; position: relative; }
body.dark::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image: linear-gradient(rgba(50, 194, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(50, 194, 255, .06) 1px, transparent 1px);
  background-size: 44px 44px; -webkit-mask: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); mask: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 75%); }
body.dark > *:not(.bg-fx) { position: relative; z-index: 1; }

/* background energy waves */
.bg-fx { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
.orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; animation: drift 18s ease-in-out infinite alternate; }
.orb.o1 { width: 420px; height: 420px; background: #0080FF; top: -140px; inset-inline-start: -80px; opacity: .28; }
.orb.o2 { width: 360px; height: 360px; background: #00FF86; bottom: -160px; inset-inline-end: 8%; opacity: .16; animation-delay: -6s; }
.orb.o3 { width: 260px; height: 260px; background: #32C2FF; top: 40%; inset-inline-end: -90px; opacity: .14; animation-delay: -11s; }
@keyframes drift { to { transform: translate(40px, -30px) scale(1.12); } }
.energy { position: absolute; left: 0; right: 0; bottom: -10px; width: 100%; height: 42vh; opacity: .55; }
.energy .w { fill: none; stroke: url(#fxg); stroke-linecap: round; }
.energy .w1 { stroke-width: 2.4; opacity: .9; } .energy .w2 { stroke-width: 1.6; opacity: .55; } .energy .w3 { stroke-width: 1; opacity: .35; }
.energy .spark { fill: none; stroke: url(#fxs); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 140 1900; animation: flow 6s linear infinite; }
.energy .s2 { stroke-width: 2.5; animation-duration: 9s; animation-delay: -3s; }
@keyframes flow { from { stroke-dashoffset: 2040; } to { stroke-dashoffset: 0; } }

/* top bar: glass + white logo */
.topbar, .topbar.dark { background: rgba(0, 20, 55, .55); border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 10px 30px rgba(0, 0, 0, .25); position: sticky; top: 0; z-index: 20; }
.topbar::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, #0080FF 30%, #00FF86 60%, transparent); opacity: .8; animation: scan 7s linear infinite; background-size: 200% 100%; }
@keyframes scan { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.brand img { height: 40px; filter: drop-shadow(0 0 10px rgba(50, 194, 255, .45)); }
.topbar nav a { transition: all .2s; }
.topbar nav a.on { color: #fff; background: linear-gradient(90deg, rgba(0, 128, 255, .55), rgba(0, 255, 134, .35)); box-shadow: var(--glow-b), inset 0 0 0 1px rgba(255, 255, 255, .18); }
.topbar nav a:hover:not(.on) { color: #fff; background: rgba(50, 194, 255, .12); }

/* glass panels with sweeping light border */
.snip, .card, .kpi { background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .06); transition: transform .25s, box-shadow .25s; }
.snip::before { background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .95) 50%, transparent 58%) no-repeat,
  linear-gradient(270deg, rgba(0, 128, 255, .75), rgba(0, 255, 134, .65));
  background-size: 260% 100%, 100% 100%; animation: sweep 7s linear infinite; }
@keyframes sweep { from { background-position: 160% 0, 0 0; } to { background-position: -160% 0, 0 0; } }
.kpi:nth-child(2)::before { animation-delay: -1.4s; } .kpi:nth-child(3)::before { animation-delay: -2.8s; }
.kpi:nth-child(4)::before { animation-delay: -4.2s; } .kpi:nth-child(5)::before { animation-delay: -5.6s; }
.snip::after { content: ""; position: absolute; top: 0; inset-inline-end: 0; width: 26px; height: 26px; pointer-events: none;
  background: linear-gradient(225deg, rgba(0, 255, 134, .9) 0 2px, transparent 2px); clip-path: polygon(100% 0, 100% 100%, 0 0); opacity: 0; }
.kpi:hover, .panel:hover { box-shadow: 0 14px 44px rgba(0, 0, 0, .3), var(--glow-b), inset 0 1px 0 rgba(255, 255, 255, .08); }
.kpi:hover { transform: translateY(-3px); }

/* neon numbers */
.kpi b, .season .sc b, .g-center b, .req-qty .big { letter-spacing: .3px; }
.g, b.green { text-shadow: 0 0 18px rgba(0, 255, 134, .55); }
.lb, b.blue { text-shadow: 0 0 18px rgba(50, 194, 255, .5); }
.o { text-shadow: 0 0 18px rgba(239, 155, 0, .45); }
.r, b.red { text-shadow: 0 0 18px rgba(255, 77, 138, .5); }
.w { text-shadow: 0 0 18px rgba(255, 255, 255, .35); }
.kpi b { font-size: 34px; }
.g-val { filter: drop-shadow(0 0 10px rgba(0, 255, 134, .55)); }
.g-track { stroke: rgba(50, 194, 255, .14); }
.gauge::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: radial-gradient(circle, rgba(0, 128, 255, .18), transparent 70%); pointer-events: none; }
i.green, .hbar .bar i.green { box-shadow: 0 0 12px rgba(0, 255, 134, .55); }
i.blue, .hbar .bar i.blue { box-shadow: 0 0 12px rgba(50, 194, 255, .5); }
i.red, .hbar .bar i.red { box-shadow: 0 0 12px rgba(225, 0, 84, .55); }
i.orange { box-shadow: 0 0 12px rgba(239, 155, 0, .5); }
i.grad { box-shadow: 0 0 12px rgba(0, 200, 180, .5); }
.hbar .bar i, .track i { position: relative; overflow: hidden; }
.hbar .bar i::after, .track i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent);
  transform: translateX(-100%); animation: shimmer 3.2s ease-in-out infinite; }
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }
.trend .ac { filter: drop-shadow(0 0 6px rgba(0, 255, 134, .6)); }
.trend .now { filter: drop-shadow(0 0 8px #00FF86); animation: beat 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes beat { 50% { transform: scale(1.35); } }
.map .st.on { filter: drop-shadow(0 0 6px rgba(0, 255, 134, .8)); }
.map .halo { animation: ping 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ping { from { transform: scale(.7); opacity: .9; } to { transform: scale(1.8); opacity: 0; } }
.dot { box-shadow: 0 0 10px #00FF86; }
.live { background: rgba(0, 20, 55, .55); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px var(--line); border: 0; }

/* staggered entrance */
.kpis > *, .season, .dash-grid > *, .table-panel, .wrap > .card, .wrap > .grid-2 > *, .page-head { animation: rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.kpis > :nth-child(2) { animation-delay: .05s; } .kpis > :nth-child(3) { animation-delay: .1s; } .kpis > :nth-child(4) { animation-delay: .15s; } .kpis > :nth-child(5) { animation-delay: .2s; }
.season { animation-delay: .22s; } .dash-grid > :nth-child(2) { animation-delay: .1s; } .dash-grid > :nth-child(3) { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.dash-head h1, .page-head h2 { background: linear-gradient(90deg, #FFFFFF 0%, #CFEFFF 55%, #7DFFC4 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(50, 194, 255, .25)); }
.dash-head p { color: var(--lb); }

/* ---------- app pages (forms, tables) in the same digital theme ---------- */
body.app .wrap { max-width: 1440px; }
body.app .card { border: 1px solid var(--line); border-radius: 16px; color: #E3F0FA; }
body.app .card h3 { color: #fff; }
body.app .page-head h2 { font-size: 28px; }
body.app .muted, body.app small, body.app label small { color: var(--g25); }
body.app label { color: #CFE3F5; }
body.app a { color: var(--lb); }
body.app input, body.app select, body.app textarea { background: rgba(0, 20, 55, .55); color: #fff; border: 1px solid rgba(50, 194, 255, .3); transition: box-shadow .2s, border-color .2s; }
body.app input::placeholder, body.app textarea::placeholder { color: rgba(192, 197, 205, .55); }
body.app input:focus, body.app select:focus, body.app textarea:focus { outline: 0; border-color: var(--lb); box-shadow: 0 0 0 3px rgba(50, 194, 255, .18), var(--glow-b); }
body.app option, body.app optgroup { background: #0A2A6B; color: #fff; }
body.app input[type=file] { padding: 8px; }
body.app input[type=file]::file-selector-button { background: linear-gradient(90deg, #0027B9, #0080FF); color: #fff; border: 0; border-radius: 8px; padding: 6px 14px; margin-inline-end: 10px; font: inherit; cursor: pointer; }
.btn { border-radius: 12px; transition: transform .15s, box-shadow .2s, filter .2s; }
body.app .btn { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(50, 194, 255, .35); }
.btn.primary, body.app .btn.primary { background: linear-gradient(90deg, #0027B9, #0080FF 60%, #32C2FF); border: 0; color: #fff; box-shadow: 0 6px 22px rgba(0, 128, 255, .45); }
.btn.primary:hover, body.app .btn.primary:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(0, 128, 255, .65); filter: brightness(1.08); background: linear-gradient(90deg, #0027B9, #0080FF 60%, #32C2FF); }
.btn.ok, body.app .btn.ok { background: linear-gradient(90deg, #00B476, #00FF86); color: #001F5E; border: 0; box-shadow: var(--glow-g); }
.btn.danger, body.app .btn.danger { background: rgba(225, 0, 84, .12); color: #FF6B9D; border: 1px solid rgba(255, 77, 138, .55); }
body.app .tbl th { background: linear-gradient(90deg, #001F5E, #0050C8); border-bottom: 1px solid var(--line); }
body.app .tbl td { border-bottom: 1px solid rgba(255, 255, 255, .06); color: #E3F0FA; }
body.app .tbl tr:nth-child(even) td { background: rgba(255, 255, 255, .03); }
body.app .tbl tbody tr:hover td { background: rgba(50, 194, 255, .08); }
body.app .tag { background: rgba(255, 255, 255, .1); color: #E3F0FA; }
body.app .tag.pending, body.app .tag.warn { background: rgba(239, 155, 0, .18); color: #FFC35C; }
body.app .tag.approved { background: rgba(0, 255, 134, .14); color: #00FF86; }
body.app .tag.rejected { background: rgba(225, 0, 84, .18); color: #FF6B9D; }
body.app .tag.cat { background: rgba(0, 128, 255, .2); color: #7FD3FF; }
body.app .tabs a { background: rgba(255, 255, 255, .05); color: #CFE3F5; border-color: var(--line); }
body.app .tabs a.on { background: linear-gradient(90deg, #0027B9, #0080FF); color: #fff; box-shadow: var(--glow-b); border-color: transparent; }
.flash.ok { background: rgba(0, 255, 134, .1); color: #7DFFC4; border-color: rgba(0, 255, 134, .4); box-shadow: 0 0 18px rgba(0, 255, 134, .15); }
.flash.err { background: rgba(225, 0, 84, .12); color: #FF8BB2; border-color: rgba(255, 77, 138, .45); box-shadow: 0 0 18px rgba(225, 0, 84, .15); }
body.app .notice { background: rgba(239, 155, 0, .14); color: #FFC35C; }
body.app .req-title { color: #fff; }
body.app .req-meta { color: #CFE3F5; }
body.app .req-note { background: rgba(0, 20, 55, .5); color: #E3F0FA; }
body.app .req-qty { border-color: var(--line); }
body.app .req-qty .big { color: var(--g); text-shadow: 0 0 18px rgba(0, 255, 134, .5); }
body.app .req-actions { border-color: var(--line); }
body.app .pbar { background: rgba(255, 255, 255, .1); }
body.app .pbar i.green { background: var(--g); box-shadow: 0 0 8px rgba(0, 255, 134, .6); } body.app .pbar i.blue { background: var(--lb); } body.app .pbar i.red { background: #FF2E7A; }
body.app code { background: rgba(255, 255, 255, .08); color: #7FD3FF; }
body.app .help { color: #CFE3F5; }
body.app .roles ul { color: #CFE3F5; }
body.app .plan-in { background: rgba(0, 20, 55, .6); }
body.app .card.center h2 { font-size: 64px; margin: 0; color: var(--lb); text-shadow: 0 0 30px rgba(50, 194, 255, .6); }

/* ---------- login: energy hero ---------- */
.login-page { background: none; }
.login-card { position: relative; z-index: 2; background: linear-gradient(180deg, rgba(14, 46, 116, .78), rgba(4, 22, 64, .86)); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); color: #fff; box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 60px rgba(0, 128, 255, .25); padding: 38px 36px 26px; max-width: 440px; }
.login-card::before { content: ""; position: absolute; inset: 0; padding: 1px; clip-path: var(--snip); pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, #fff 50%, transparent 58%) no-repeat, linear-gradient(270deg, #0080FF, #00FF86);
  background-size: 260% 100%, 100% 100%; animation: sweep 5s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.login-logo-wrap { display: flex; justify-content: center; margin-bottom: 4px; }
.login-logo { height: 96px; background: none; padding: 0; filter: drop-shadow(0 0 22px rgba(50, 194, 255, .55)); animation: glowpulse 4s ease-in-out infinite; }
@keyframes glowpulse { 50% { filter: drop-shadow(0 0 34px rgba(0, 255, 134, .55)); } }
.login-card h1 { color: #fff; text-align: center; font-size: 23px; }
.login-card .muted { color: var(--lb); text-align: center; }
.login-card label { color: #CFE3F5; }
.login-card input { background: rgba(0, 20, 55, .6); color: #fff; border: 1px solid rgba(50, 194, 255, .3); }
.login-card input:focus { outline: 0; border-color: var(--lb); box-shadow: 0 0 0 3px rgba(50, 194, 255, .2), var(--glow-b); }
.login-foot { text-align: center; color: var(--g40); font-size: 12px; margin: 18px 0 0; }

/* TV bar & toolbar polish */
.tv-bar { background: rgba(0, 20, 55, .5); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.tv-bar img { filter: drop-shadow(0 0 12px rgba(50, 194, 255, .5)); }
.tbtn { backdrop-filter: blur(8px); transition: all .2s; }
.tbtn:hover { box-shadow: var(--glow-b); border-color: var(--lb); }
.toolbar select { background: rgba(0, 20, 55, .6); }
.gtable th { background: linear-gradient(90deg, #001F5E, #0060E0); }
.gtable tfoot td { background: linear-gradient(90deg, #00143D, #001F5E); box-shadow: inset 0 1px 0 var(--line); }
.modal-box { box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 60px rgba(0, 128, 255, .25); }

/* scrollbar */
* { scrollbar-width: thin; scrollbar-color: rgba(50, 194, 255, .45) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: linear-gradient(#0080FF, #00FF86); border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print { .bg-fx, body.dark::before { display: none !important; } .snip, .card, .kpi { backdrop-filter: none; } }
@media (max-width: 760px) { .topbar, .topbar.dark { position: relative; } .brand img { height: 32px; } .dash-head h1 { font-size: 26px; } }
.demo-banner { position: relative; z-index: 15; text-align: center; padding: 9px 16px; font-size: 13.5px; color: #FFE2A8;
  background: linear-gradient(90deg, rgba(239, 155, 0, .08), rgba(239, 155, 0, .22), rgba(239, 155, 0, .08)); border-bottom: 1px solid rgba(239, 155, 0, .45);
  box-shadow: 0 0 24px rgba(239, 155, 0, .15); }
.demo-banner b { color: #FFC35C; }

/* ===== No red for performance: brand progression (Mid Blue → Light Blue → Green) ===== */
.mb { color: #0080FF; text-shadow: 0 0 18px rgba(0, 128, 255, .55); }
b.red { color: #0080FF; text-shadow: 0 0 16px rgba(0, 128, 255, .55); }
i.red, .hbar .bar i.red, .track i.red, .legend i.red, .pbar i.red, body.app .pbar i.red { background: #0080FF; box-shadow: 0 0 12px rgba(0, 128, 255, .55); }
.r { color: #0080FF; text-shadow: 0 0 18px rgba(0, 128, 255, .55); }
/* alerts & delays → brand orange */
.alert { border-inline-start-color: var(--lb); } .alert i { color: var(--lb); }
.alert.high { border-color: var(--torg); background: rgba(239, 155, 0, .08); } .alert.high i { color: var(--torg); }
.badge.hot, .pill.hot { background: rgba(239, 155, 0, .2); color: #FFC35C; }

/* ======================= v3: live & analytics ======================= */
/* news ticker */
.ticker { display: flex; align-items: center; gap: 0; margin-bottom: 14px; border-radius: 12px; overflow: hidden;
  background: rgba(0, 20, 55, .6); box-shadow: inset 0 0 0 1px var(--line), 0 0 24px rgba(0, 128, 255, .12); backdrop-filter: blur(8px); }
.ticker-tag { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-weight: 600; font-size: 13px; white-space: nowrap;
  background: linear-gradient(90deg, #0027B9, #0080FF); color: #fff; box-shadow: 0 0 20px rgba(0, 128, 255, .5); z-index: 1; }
.ticker-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: #00FF86; display: inline-block; animation: pulse 2s infinite; }
.ticker-track { flex: 1; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.ticker-move { display: inline-flex; align-items: center; gap: 18px; white-space: nowrap; padding: 9px 0; font-size: 13.5px; color: #E3F0FA;
  animation: tick 60s linear infinite; will-change: transform; }
.ticker:hover .ticker-move { animation-play-state: paused; }
@keyframes tick { from { transform: translateX(0); } to { transform: translateX(50%); } }
.ticker .tk.warn { color: #FFC35C; } .ticker .sep { color: var(--lb); font-style: normal; opacity: .6; font-size: 10px; }

/* KPI sparklines */
.kpi { position: relative; padding-bottom: 12px; }
.spark { display: block; width: 100%; height: 30px; margin-top: 6px; overflow: visible; }
.spark .sl { fill: none; stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark .sa { stroke: none; opacity: .14; }
.spark .sd { stroke: #fff; stroke-width: 1; vector-effect: non-scaling-stroke; }
.spark.lb .sl { stroke: #32C2FF; filter: drop-shadow(0 0 4px rgba(50, 194, 255, .8)); } .spark.lb .sa, .spark.lb .sd { fill: #32C2FF; }
.spark.g .sl { stroke: #00FF86; filter: drop-shadow(0 0 4px rgba(0, 255, 134, .8)); } .spark.g .sa, .spark.g .sd { fill: #00FF86; }
.spark.o .sl { stroke: #EF9B00; filter: drop-shadow(0 0 4px rgba(239, 155, 0, .8)); } .spark.o .sa, .spark.o .sd { fill: #EF9B00; }

/* executive summary + simulator */
.dash-grid.exec-row { grid-template-columns: 1.7fr 1fr; }
.exec-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 9px; font-size: 14.5px; line-height: 1.7; color: #E3F0FA; }
.exec-list li { position: relative; padding-inline-start: 20px; }
.exec-list li::before { content: ""; position: absolute; inset-inline-start: 2px; top: .65em; width: 8px; height: 8px; border-radius: 50%; }
.exec-list li.g-dot::before { background: var(--g); box-shadow: 0 0 10px var(--g); }
.exec-list li.lb-dot::before { background: var(--lb); box-shadow: 0 0 10px var(--lb); }
.exec-list li.o-dot::before { background: var(--torg); box-shadow: 0 0 10px var(--torg); }
.exec-list b { color: #fff; }
.sim-rate { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 6px; }
.sim-rate b { font-size: 40px; color: var(--lb); text-shadow: 0 0 22px rgba(50, 194, 255, .6); line-height: 1; }
.sim-rate span { color: var(--g25); font-size: 13px; }
#simRange { width: 100%; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 8px; background: linear-gradient(90deg, #0080FF, #00FF86); outline: none; margin: 8px 0 14px; direction: ltr; }
#simRange::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(50, 194, 255, .35), 0 0 18px rgba(50, 194, 255, .9); cursor: pointer; }
#simRange::-moz-range-thumb { width: 22px; height: 22px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px rgba(50, 194, 255, .35), 0 0 18px rgba(50, 194, 255, .9); cursor: pointer; }
.sim-res { background: rgba(0, 20, 55, .55); border-radius: 12px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--line); }
.sim-res span { display: block; color: var(--g25); font-size: 12.5px; }
.sim-res b { font-size: 26px; display: block; } .sim-res.ok b { color: var(--g); text-shadow: 0 0 18px rgba(0, 255, 134, .5); } .sim-res.late b { color: var(--torg); text-shadow: 0 0 18px rgba(239, 155, 0, .5); }
.sim-res small { color: var(--g25); font-size: 12px; margin: 0; }
.sim-marks { display: flex; gap: 16px; margin-top: 10px; color: var(--g25); font-size: 12.5px; } .sim-marks b { color: #fff; }

/* heatmap */
.dash-grid.two.rev2 { grid-template-columns: 1.35fr 1fr; }
.heat { display: grid; gap: 6px; overflow-x: auto; }
.hm-row { display: grid; grid-template-columns: 150px repeat(12, minmax(34px, 1fr)) 64px; gap: 5px; align-items: center; min-width: 640px; }
.hm-head span { color: var(--g40); font-size: 10.5px; text-align: center; }
.hm-name { font-size: 13px; font-weight: 500; }
.hm-cell { height: 36px; border-radius: 6px; display: grid; place-items: center; font-size: 11.5px; font-weight: 600; color: #fff;
  background: rgba(0, 128, 255, calc(.06 + var(--k) * .85)); box-shadow: 0 0 calc(var(--k) * 18px) rgba(0, 200, 160, calc(var(--k) * .6)), inset 0 0 0 1px rgba(255, 255, 255, .05);
  background-image: linear-gradient(135deg, rgba(0, 255, 134, calc(var(--k) * .55)), transparent); transition: transform .15s; }
.hm-cell:hover { transform: scale(1.12); z-index: 1; }
.hm-row b { text-align: center; }
.hm-scale { display: flex; align-items: center; gap: 8px; justify-content: flex-end; color: var(--g40); font-size: 11px; margin-top: 4px; }
.hm-scale i { width: 120px; height: 8px; border-radius: 6px; background: linear-gradient(270deg, rgba(0, 128, 255, .1), #0080FF 60%, #00FF86); }

/* KSA + zoom map */
.map-wrap { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; align-items: center; }
.map-ksa { position: relative; }
.map-ksa svg { width: 100%; height: auto; display: block; direction: ltr; }
.map-ksa .st { fill: rgba(155, 162, 175, .6); stroke: #fff; stroke-width: 3; }
.map-ksa .st.on { fill: #00FF86; fill-opacity: .9; filter: drop-shadow(0 0 14px rgba(0, 255, 134, .9)); }
.map-ksa .halo { fill: rgba(0, 255, 134, .12); animation: ping 2.6s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ksa-cap { position: absolute; bottom: 6%; inset-inline-start: 4%; background: rgba(0, 20, 55, .7); padding: 8px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line); }
.ksa-cap b { font-size: 22px; display: block; } .ksa-cap span { color: var(--g25); font-size: 12px; }

/* toasts */
.toasts { position: fixed; bottom: 22px; inset-inline-start: 22px; z-index: 60; display: grid; gap: 10px; pointer-events: none; }
.toast { display: flex; gap: 12px; align-items: center; min-width: 300px; max-width: 420px; padding: 12px 16px; border-radius: 14px; color: #fff;
  background: linear-gradient(180deg, rgba(14, 52, 128, .95), rgba(4, 26, 72, .95)); box-shadow: 0 16px 40px rgba(0, 0, 0, .45), 0 0 30px rgba(0, 255, 134, .35), inset 0 0 0 1px rgba(0, 255, 134, .5);
  animation: toastIn .5s cubic-bezier(.2, .9, .3, 1.2) both; }
.toast .dot { flex: none; } .toast b { display: block; font-size: 14px; } .toast span { font-size: 13px; color: #E3F0FA; }
.toast.out { animation: toastOut .6s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateY(20px) scale(.95); } }
@keyframes toastOut { to { opacity: 0; transform: translateX(-30px); } }

/* TV pro */
.tv-banner { display: flex; align-items: center; gap: 20px; margin-bottom: 14px; }
.tv-banner b { font-size: 26px; background: linear-gradient(90deg, #fff, #7DFFC4); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.tv-timer { flex: 1; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.tv-timer i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0080FF, #00FF86); box-shadow: 0 0 10px #00FF86; }
body.tv .rev2, body.tv .sim { display: none; }
body.tv .dash-grid.exec-row { grid-template-columns: 1fr; }
body.tv-swap .kpis > *, body.tv-swap .dash-grid > * { animation: rise .6s cubic-bezier(.2, .8, .2, 1) both; }

@media (max-width: 1250px) { .dash-grid.exec-row, .dash-grid.two.rev2, .map-wrap { grid-template-columns: 1fr; } }
@media print { .ticker, .toasts, .sim { display: none !important; } }

/* v4: delete actions */
.tbl td.acts { white-space: nowrap; }
form.inline { display: inline; margin: 0; padding: 0; }
.link-del { background: none; border: 0; padding: 0 0 0 0; margin-inline-start: 10px; color: #EF9B00; font: inherit; cursor: pointer; text-decoration: underline; }
.link-del:hover { color: #ffb733; }
.bulk-del { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; padding: 10px 14px; border: 1px dashed rgba(239, 155, 0, .45); border-radius: 10px; }
.btn.danger, body.app .btn.danger { background: rgba(239, 155, 0, .14); color: #FFB733; border: 1px solid rgba(239, 155, 0, .6); }
.btn.danger:hover, body.app .btn.danger:hover { background: rgba(239, 155, 0, .26); }