/* ===== PRO LAYER: диспетчерская тёмная тема (подключается после style.css) ===== */
:root{
  --bg-0:#04070b;--bg-1:#070c12;--bg-2:#0c141d;
  --panel:rgba(12,19,28,.86);--panel-strong:rgba(14,22,32,.96);--panel-soft:rgba(18,28,40,.7);
  --line:rgba(140,170,190,.12);--line-strong:rgba(214,164,70,.38);
  --text:#e9eef3;--text-2:#a3b2bf;--muted:#66788a;
  --cyan:#3cc3e8;--cyan-bright:#7adcf5;--green:#3fd29a;--amber:#e3a83c;--red:#f0545f;
  --gold:#d6a446;--k110:#f0545f;--k35:#e3a83c;--k10:#3fd29a;--k04:#3cc3e8;
  --radius-xl:10px;--radius-lg:8px;--radius-md:6px;
  --mono:ui-monospace,"JetBrains Mono","SF Mono",Consolas,monospace;
  --shadow:0 18px 50px rgba(0,0,0,.55);
}
html body{background:#04070b;font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:.003em}
html body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(1200px 500px at 85% -10%,rgba(214,164,70,.07),transparent 60%),
  radial-gradient(900px 500px at 0% 0%,rgba(60,195,232,.06),transparent 60%)}
.scene-orb,.scene-beam{display:none!important}
.scene-grid{opacity:.5!important;background-image:linear-gradient(rgba(140,170,190,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(140,170,190,.05) 1px,transparent 1px)!important;background-size:32px 32px!important}
.scene-noise{opacity:.06!important}

/* панели: техническая рамка с угловыми метками */
html body .glass-panel,html body .admin-panel,html body .admin-stat-card,html body .division-card,
html body .dispatcher-panel,html body .executive-panel,html body .module-card,html body .active-outage-type-card,
html body .summary-tile,html body .dispatcher-outage-table-card,html body .executive-kpi-tile,html body .dispatcher-assigned-tile{
  border-radius:8px!important;background:linear-gradient(180deg,rgba(18,27,38,.92),rgba(10,16,24,.94))!important;
  border:1px solid var(--line)!important;box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 14px 34px rgba(0,0,0,.45)!important;
  backdrop-filter:none!important;position:relative}
html body .glass-panel::before,html body .executive-panel::before,html body .dispatcher-panel::before,html body .division-card::before{
  content:"";position:absolute;left:-1px;top:-1px;width:14px;height:14px;border-left:2px solid var(--gold);border-top:2px solid var(--gold);border-top-left-radius:8px;pointer-events:none;opacity:.85}
html body .glass-panel::after,html body .executive-panel::after,html body .dispatcher-panel::after{
  content:"";position:absolute;right:-1px;bottom:-1px;width:14px;height:14px;border-right:2px solid rgba(214,164,70,.45);border-bottom:2px solid rgba(214,164,70,.45);border-bottom-right-radius:8px;pointer-events:none}
html body .glass-panel:hover,html body .module-card:hover,html body .division-card:hover,html body .active-outage-type-card:hover{
  transform:none!important;border-color:var(--line-strong)!important}

/* типографика */
html body h1{font-weight:600!important;letter-spacing:-.01em!important;font-size:clamp(22px,3.2vw,34px)!important;line-height:1.12!important}
html body h2{font-weight:600!important;letter-spacing:0!important;font-size:clamp(15px,1.8vw,19px)!important}
html body .micro-label,html body .division-kicker,html body .outage-event-kicker{
  font-family:var(--mono)!important;font-size:10.5px!important;letter-spacing:.14em!important;color:var(--gold)!important;font-weight:600!important}
html body p{color:var(--text-2)}
html body strong,html body .division-count,html body .executive-table-number{font-variant-numeric:tabular-nums}

/* топбар */
html body .topbar{background:rgba(6,10,15,.94)!important;border-bottom:1px solid var(--line)!important;box-shadow:0 1px 0 rgba(214,164,70,.25)!important;border-radius:0!important;backdrop-filter:blur(8px)}
html body .logo-surface{border-radius:6px!important;box-shadow:none!important}
html body .role-badge{border-radius:4px!important;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
html body .brand-context span{font-weight:600}

/* лента телеметрии */
.grid-ribbon{display:flex;align-items:center;gap:18px;padding:7px 16px;border-bottom:1px solid var(--line);background:rgba(8,13,19,.9);font-family:var(--mono);font-size:11px;color:var(--text-2);overflow-x:auto;white-space:nowrap;scrollbar-width:none;position:relative;z-index:2}
.grid-ribbon::-webkit-scrollbar{display:none}
.grid-ribbon .rb-clock{color:var(--text);font-weight:700;font-size:12.5px;letter-spacing:.04em}
.grid-ribbon .rb-sep{width:1px;height:14px;background:var(--line);flex:none}
.grid-ribbon .kv{display:inline-flex;align-items:center;gap:6px}
.grid-ribbon .kv i{width:14px;height:3px;border-radius:2px;display:inline-block}
.grid-ribbon .k110 i{background:var(--k110)}.grid-ribbon .k35 i{background:var(--k35)}
.grid-ribbon .k10 i{background:var(--k10)}.grid-ribbon .k04 i{background:var(--k04)}
.grid-ribbon .rb-live{margin-left:auto;display:inline-flex;align-items:center;gap:6px;color:var(--green);font-weight:700}
.grid-ribbon .rb-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:rbp 2s infinite}
@keyframes rbp{50%{opacity:.35}}

/* hero: однолинейная схема подстанции */
html body .home-hero{border:1px solid var(--line);border-radius:8px;background:linear-gradient(120deg,rgba(18,27,38,.95),rgba(8,13,19,.95));overflow:hidden;padding:26px 28px!important}
html body .hero-visual{border-radius:6px;overflow:hidden;opacity:1!important;background:radial-gradient(circle at 50% 50%,rgba(214,164,70,.08),transparent 70%)}
html body .hero-visual>*{display:none!important}
html body .hero-visual svg.sld{display:block!important;width:100%;height:100%}
.sld .bus{stroke-width:3.2;stroke-linecap:round}.sld .ln{stroke:var(--text-2);stroke-width:1.4;fill:none;opacity:.8}
.sld .tx circle{fill:none;stroke-width:1.6}.sld .br{fill:#0b121a;stroke:var(--text);stroke-width:1.3}
.sld text{font:600 8.5px var(--mono);fill:var(--muted);letter-spacing:.06em}
.sld .flow{stroke-dasharray:5 7;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-24}}
html body .system-line{font-family:var(--mono);font-size:12px;border-radius:4px!important}

/* модули */
html body .module-card{padding:18px!important;gap:14px}
html body .module-icon{border-radius:6px!important;background:rgba(214,164,70,.1)!important;border:1px solid rgba(214,164,70,.35)!important;color:var(--gold)!important}
html body .module-icon svg{stroke:var(--gold)!important}
html body .module-card h3{font-size:17px!important;font-weight:600}
html body .module-status{border-radius:3px!important;font-family:var(--mono);font-size:10px!important;letter-spacing:.1em}
html body .module-footer{border-top:1px solid var(--line);padding-top:12px;color:var(--gold)!important;font-weight:600;font-size:13px}

/* кнопки и поля */
html body .primary-action{border-radius:6px!important;background:linear-gradient(180deg,#e0b152,#b88a2e)!important;color:#15100a!important;font-weight:700!important;border:0!important;box-shadow:0 6px 20px rgba(214,164,70,.22)!important;letter-spacing:.02em}
html body .secondary-action,html body .back-button,html body .icon-button,html body .role-action{border-radius:6px!important;background:rgba(255,255,255,.03)!important;border:1px solid var(--line)!important;color:var(--text)!important}
html body .input-shell,html body .dispatcher-select,html body select,html body textarea{border-radius:6px!important;background:#070b11!important;border:1px solid var(--line)!important;color:var(--text)!important}
html body .input-shell:focus-within,html body select:focus,html body textarea:focus{border-color:var(--gold)!important;box-shadow:0 0 0 3px rgba(214,164,70,.15)!important}
html body .auth-panel{border-radius:10px!important;background:linear-gradient(180deg,rgba(18,27,38,.96),rgba(8,13,19,.97))!important;border:1px solid var(--line)!important;border-top:2px solid var(--gold)!important}

/* KPI / цифры */
html body .summary-tile strong,html body .executive-kpi-tile strong,html body .dispatcher-outage-kpi strong,html body .active-outage-type-count strong,html body .counter strong,html body .admin-stat-card strong{
  font-family:var(--mono)!important;font-weight:700!important;letter-spacing:-.02em;text-shadow:0 0 22px currentColor}
html body .executive-kpi-tile{border-left:3px solid var(--gold)!important;padding:14px 16px!important}
html body .executive-kpi-outages{border-left-color:var(--red)!important}html body .executive-kpi-outages strong{color:#ff7d86}
html body .executive-kpi-appeals{border-left-color:var(--amber)!important}html body .executive-kpi-appeals strong{color:#f0c060}
html body .executive-kpi-requests{border-left-color:var(--cyan)!important}html body .executive-kpi-requests strong{color:#7adcf5}
html body .executive-kpi-workorders{border-left-color:var(--green)!important}html body .executive-kpi-workorders strong{color:#6fe3b4}
html body .executive-kpi-tile span,html body .dispatcher-outage-kpi span{font-size:11.5px;color:var(--text-2);text-transform:uppercase;letter-spacing:.08em}
html body .dispatcher-outage-kpi{border-radius:6px!important;border:1px solid var(--line)!important;background:#0a1018!important;border-left:3px solid var(--red)!important}
html body .dispatcher-outage-kpi.is-planned{border-left-color:var(--cyan)!important}
html body .executive-delta{border-radius:3px!important;font-family:var(--mono);font-size:11px}

/* кольцевые диаграммы: тонкое кольцо + риски */
html body .dispatcher-workorders-donut{position:relative;-webkit-mask:radial-gradient(circle,transparent 57%,#000 58%);mask:radial-gradient(circle,transparent 57%,#000 58%);filter:drop-shadow(0 0 14px rgba(60,195,232,.18))}
html body .dispatcher-workorders-donut::after{display:none!important}
html body .dispatcher-workorders-donut-center{-webkit-mask:none;mask:none;z-index:2}
html body .dispatcher-workorders-donut-center strong{font-family:var(--mono);font-size:30px;color:#fff}
html body .dispatcher-donut-marker{border-radius:3px!important;font-family:var(--mono);font-size:10px!important;color:#0a0f14!important;font-weight:800;box-shadow:0 0 0 2px #0a1018}
html body .dispatcher-workorders-legend-item{border-radius:4px!important;background:rgba(255,255,255,.025)!important;border:1px solid var(--line)!important;border-left-width:3px!important;padding:7px 10px!important}
html body .dispatcher-workorders-legend-item strong{font-family:var(--mono)}
html body .dispatcher-workorders-legend-item i{border-radius:2px!important;width:10px;height:10px}

/* динамика: сетка осциллографа */
html body .executive-trend-card{border-radius:6px!important;background:#080d13!important;border:1px solid var(--line)!important}
html body .executive-sparkline-canvas{background-image:linear-gradient(rgba(140,170,190,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(140,170,190,.07) 1px,transparent 1px);background-size:28px 24px;border-radius:4px}
html body .executive-sparkline-line{stroke-width:2.2!important;filter:drop-shadow(0 0 5px currentColor);vector-effect:non-scaling-stroke}
html body .executive-sparkline-point{filter:drop-shadow(0 0 6px currentColor)}
html body .executive-trend-outages{color:var(--red)}html body .executive-trend-appeals{color:var(--amber)}
html body .executive-trend-requests{color:var(--cyan)}html body .executive-trend-workorders{color:var(--green)}
html body .executive-trend-card>*{color:var(--text)}html body .executive-sparkline{color:inherit}
html body .executive-sparkline-chip{border-radius:3px!important;font-family:var(--mono);font-size:10px}

/* рейтинги → горизонтальные «шкалы» */
html body .executive-ranking-row{border-radius:4px!important;background:rgba(255,255,255,.025)!important;border:1px solid var(--line)!important;border-left:2px solid var(--gold)!important;padding:8px 12px!important}
html body .executive-ranking-index{font-family:var(--mono);color:var(--gold);background:none!important;border-radius:3px!important}
html body .executive-ranking-row strong{font-family:var(--mono);font-size:15px}

/* таблицы: плотные, диспетчерские */
html body table{border-collapse:separate;border-spacing:0}
html body th{font-family:var(--mono);font-size:10.5px!important;letter-spacing:.09em;text-transform:uppercase;color:var(--gold)!important;background:#0a1118!important;border-bottom:1px solid var(--line-strong)!important;padding:9px 12px!important;position:sticky;top:0}
html body td{padding:9px 12px!important;border-bottom:1px solid var(--line)!important;font-size:13px}
html body tbody tr:nth-child(even) td{background:rgba(255,255,255,.015)}
html body tbody tr:hover td{background:rgba(214,164,70,.06)}
html body .executive-status-chip{border-radius:3px!important;font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}

/* карточки подразделений и отключения */
html body .division-card{border-left:3px solid var(--red)!important}
html body .division-icon{border-radius:5px!important;background:rgba(240,84,95,.1)!important;border:1px solid rgba(240,84,95,.4)!important}
html body .outage-card-shift-unassigned{border-left-color:var(--amber)!important}
html body .active-outage-type-card.is-emergency{border-left:3px solid var(--red)!important}
html body .active-outage-type-card.is-planned{border-left:3px solid var(--cyan)!important}
html body .outage-event-card,html body .outage-source-details{border-radius:5px!important;background:#080d13!important;border:1px solid var(--line)!important}
html body .outage-object-chip{border-radius:3px!important;font-family:var(--mono);font-size:11px;background:rgba(60,195,232,.08)!important;border:1px solid rgba(60,195,232,.25)!important}
html body .outage-event-appeals.has-appeals strong,html body .has-appeals b{color:var(--amber)}
html body .dispatcher-live-badge{border-radius:3px!important;font-family:var(--mono);letter-spacing:.12em;color:var(--green)!important;border:1px solid rgba(63,210,154,.4)!important;background:rgba(63,210,154,.08)!important}
html body .management-card,html body .modal-card{border-radius:10px!important;background:#0b1118!important;border:1px solid var(--line-strong)!important}

/* ===== МОБИЛЬНАЯ ВЕРСИЯ: компактнее, больше панелей по вертикали ===== */
@media (max-width:700px){
  html body .app-shell{zoom:.88}
  html body .grid-ribbon{padding:6px 12px;gap:12px;font-size:10.5px}
  html body .topbar{padding:8px 12px!important}
  html body .home-hero{padding:16px!important;gap:10px!important}
  html body .hero-visual{display:none!important}
  html body h1{font-size:21px!important}
  html body .module-grid,html body .active-outage-type-grid,html body .executive-grid,html body .dispatcher-grid,html body .admin-layout{gap:10px!important}
  html body .glass-panel,html body .executive-panel,html body .dispatcher-panel,html body .module-card,html body .division-card{padding:13px!important}
  html body .executive-hero-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  html body .executive-kpi-tile{padding:10px 12px!important}
  html body .executive-kpi-tile strong{font-size:30px!important}
  html body .executive-kpi-foot small{font-size:10px!important;line-height:1.25}
  html body .executive-highlight-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  html body .executive-ranking-columns{grid-template-columns:1fr!important;gap:10px!important}
  html body .executive-trend-grid{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  html body .executive-trend-card{padding:9px!important}
  html body .executive-sparkline-canvas svg{height:70px!important}
  html body .executive-chart-layout,html body .dispatcher-workorders-chart-layout,html body .dispatcher-requests-chart-layout{display:grid!important;grid-template-columns:132px 1fr!important;gap:12px!important;align-items:center}
  html body .dispatcher-workorders-donut{width:132px!important;height:132px!important}
  html body .dispatcher-workorders-donut-center strong{font-size:22px!important}
  html body .dispatcher-workorders-legend{gap:5px!important}
  html body .dispatcher-workorders-legend-item{padding:5px 8px!important;font-size:11.5px!important}
  html body .dispatcher-outage-kpis{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  html body .dispatcher-outage-kpi strong{font-size:30px!important}
  html body .admin-stats{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  html body .outage-counter-metrics{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important}
  html body td,html body th{padding:7px 8px!important;font-size:12px!important}
  html body .executive-table-wrap,html body .dispatcher-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
  html body .micro-label{font-size:9.5px!important}
}
@media (max-width:380px){html body .app-shell{zoom:.82}}
@media (prefers-reduced-motion:reduce){.sld .flow,.grid-ribbon .rb-live::before{animation:none}}


/* Fix donut readability for pro theme */
html body .dispatcher-workorders-donut,
html body .dispatcher-requests-donut,
html body .executive-donut{
  -webkit-mask:none !important;
  mask:none !important;
  filter:drop-shadow(0 0 14px rgba(60,195,232,.18));
}

html body .dispatcher-workorders-donut::after,
html body .dispatcher-requests-donut::after,
html body .executive-donut::after{
  display:block !important;
}

html body .dispatcher-workorders-donut-center,
html body .dispatcher-requests-donut-center{
  z-index:4 !important;
  color:#ffffff !important;
}

html body .dispatcher-workorders-donut-center strong,
html body .dispatcher-requests-donut-center strong{
  color:#ffffff !important;
  text-shadow:0 0 16px rgba(255,255,255,.08);
}

html body .dispatcher-workorders-donut-center span,
html body .dispatcher-requests-donut-center span{
  color:#dbe8f4 !important;
}

html body .dispatcher-donut-marker{
  color:#ffffff !important;
  background:linear-gradient(180deg, rgba(9,16,27,.96), rgba(5,11,20,.96)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 0 0 2px #0a1018, 0 8px 20px rgba(0,0,0,.34) !important;
}

html body .dispatcher-donut-marker span{
  color:#ffffff !important;
}

html body .dispatcher-donut-marker::before{
  opacity:.95;
}

html body .dispatcher-donut-marker::after{
  box-shadow:0 0 0 2px #08111b, 0 0 10px color-mix(in srgb, var(--marker-color, #45c8f4) 55%, transparent 45%) !important;
}

/* =========================================================
   AMBIENT ENERGY TELEMETRY · SUBTLE LIVE SCHEMATICS
   ========================================================= */
html body .active-outages-hero,
html body .dispatcher-hero,
html body .executive-hero,
html body .admin-hero{
  position:relative;
  isolation:isolate;
}

html body .active-outages-hero > *:not(.ambient-energy-schematic),
html body .dispatcher-hero > *:not(.ambient-energy-schematic),
html body .executive-hero > *:not(.ambient-energy-schematic),
html body .admin-hero > *:not(.ambient-energy-schematic){
  position:relative;
  z-index:2;
}

.ambient-energy-schematic{
  position:absolute;
  z-index:1;
  pointer-events:none;
  opacity:.16;
  filter:drop-shadow(0 0 7px rgba(63,210,207,.10));
  color:var(--muted);
}

.ambient-energy-schematic svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
}

.ambient-energy-schematic path,
.ambient-energy-schematic line,
.ambient-energy-schematic circle,
.ambient-energy-schematic rect{
  vector-effect:non-scaling-stroke;
}

.ambient-energy-schematic text{
  fill:rgba(185,205,218,.72);
  font:600 8px var(--mono);
  letter-spacing:.12em;
}

.aes-bus{
  fill:none;
  stroke-width:2.2;
  stroke-linecap:round;
}
.aes-bus-hot{stroke:rgba(240,84,95,.78)}
.aes-bus-cold{stroke:rgba(60,195,232,.76)}
.aes-bus-green{stroke:rgba(63,210,154,.78)}
.aes-line{
  fill:none;
  stroke:rgba(154,181,198,.62);
  stroke-width:1.1;
}
.aes-flow{
  stroke-dasharray:4 7;
  animation:aesFlow 4.8s linear infinite;
}
.aes-flow-slow{animation-duration:7.2s}
.aes-breaker{
  fill:rgba(7,12,18,.92);
  stroke:rgba(214,225,232,.72);
  stroke-width:1.1;
}
.aes-node{
  fill:#0b1118;
  stroke:rgba(60,195,232,.88);
  stroke-width:1.2;
}
.aes-node-live{
  fill:rgba(63,210,154,.7);
  stroke:rgba(95,239,188,.95);
  animation:aesNodePulse 3.8s ease-in-out infinite;
}
.aes-grid{
  fill:none;
  stroke:rgba(137,164,180,.14);
  stroke-width:.8;
}
.aes-wave,
.aes-wave-glow{
  fill:none;
  stroke:rgba(60,195,232,.58);
  stroke-width:1.25;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.aes-wave-glow{
  stroke:rgba(214,164,70,.72);
  stroke-dasharray:18 94;
  stroke-width:1.7;
  animation:aesWaveRun 11s linear infinite;
  filter:drop-shadow(0 0 3px rgba(214,164,70,.25));
}
.aes-switches path{
  fill:none;
  stroke:rgba(165,188,201,.58);
  stroke-width:1.1;
}
.aes-switches circle{
  fill:#0b1118;
  stroke:rgba(214,164,70,.72);
  stroke-width:1.2;
}

.ambient-energy-schematic-outages{
  width:min(250px,28%);
  right:155px;
  bottom:4px;
  opacity:.13;
}
.ambient-energy-schematic-dispatcher{
  width:min(300px,25%);
  right:310px;
  bottom:5px;
  opacity:.12;
}
.ambient-energy-schematic-executive{
  width:min(360px,28%);
  left:36%;
  bottom:4px;
  opacity:.11;
}
.ambient-energy-schematic-admin{
  width:min(270px,24%);
  right:215px;
  bottom:4px;
  opacity:.11;
}

/* barely-visible diagnostic life in status LEDs */
html body .dispatcher-live-badge i,
html body .system-pulse,
html body .secure-dot{
  animation:ambientStatusPulse 4.6s ease-in-out infinite;
}

@keyframes aesFlow{
  to{stroke-dashoffset:-33}
}
@keyframes aesWaveRun{
  to{stroke-dashoffset:-224}
}
@keyframes aesNodePulse{
  0%,100%{opacity:.62;filter:drop-shadow(0 0 0 rgba(63,210,154,0))}
  50%{opacity:1;filter:drop-shadow(0 0 4px rgba(63,210,154,.42))}
}
@keyframes ambientStatusPulse{
  0%,100%{opacity:.72;box-shadow:0 0 5px currentColor}
  50%{opacity:1;box-shadow:0 0 10px currentColor}
}

@media (max-width:1180px){
  .ambient-energy-schematic-dispatcher,
  .ambient-energy-schematic-executive,
  .ambient-energy-schematic-admin{
    opacity:.07;
    width:220px;
    right:18px;
    left:auto;
    bottom:3px;
  }
  .ambient-energy-schematic-outages{
    right:120px;
    width:190px;
    opacity:.08;
  }
}

@media (max-width:760px){
  .ambient-energy-schematic{
    display:none!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .ambient-energy-schematic .aes-flow,
  .ambient-energy-schematic .aes-wave-glow,
  .ambient-energy-schematic .aes-node-live,
  html body .dispatcher-live-badge i,
  html body .system-pulse,
  html body .secure-dot{
    animation:none!important;
  }
}

/* =========================================================
   EXECUTIVE SUMMARY TABLE CONFIG
   ========================================================= */
html body .executive-table-management .admin-panel-heading {
  align-items: flex-start;
}

html body .executive-table-config-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body .executive-table-config-card {
  min-width: 0;
}

html body .executive-config-description {
  margin: 5px 0 0;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.45;
}

html body .executive-config-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

html body .executive-config-source-grid > section {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.018);
  border-radius: 5px;
}

html body .executive-source-editor-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

html body .management-section-head {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

html body .management-section-head strong {
  color: #fff;
  font-size: 12px;
}

html body .management-section-head small {
  color: var(--text-2);
  font-size: 9px;
  line-height: 1.45;
}

html body .executive-source-picker {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

html body .executive-source-picker .permission-option {
  min-width: 0;
}

html body .executive-division-link.is-static {
  cursor: default;
}

@media (max-width: 980px) {
  html body .executive-table-config-list,
  html body .executive-config-source-grid,
  html body .executive-source-picker {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   FIGMA DESKTOP ALIGNMENT · 2026-10-07
   Dispatcher + Executive screens follow the approved Figma composition.
   This is a final PRO-layer override; mobile behavior below 1180px remains
   on the existing compact layout.
   ========================================================= */
@media (min-width: 1181px) {
  /* Figma canvas proportions: 1740 shell / 1680 working canvas on 1920px. */
  html body .app-shell {
    width: min(1740px, calc(100% - 48px));
    margin-inline: auto;
    padding-top: max(12px, env(safe-area-inset-top));
  }

  html body .app-view {
    width: min(1680px, calc(100% - 60px));
    margin-inline: auto;
  }

  html body .topbar {
    width: 100%;
    min-height: 78px;
    margin-inline: auto;
    padding: 10px 16px;
  }

  html body .grid-ribbon {
    width: 100%;
    min-height: 34px;
    padding: 7px 14px;
  }

  html body .view-toolbar {
    margin-top: 16px;
    margin-bottom: 16px;
  }

  /* ------------------------- DISPATCHER ------------------------- */
  #dispatcherView .dispatcher-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(430px, 1fr);
    gap: 16px;
    align-items: start;
  }

  #dispatcherView .dispatcher-hero {
    grid-column: 1;
    min-height: 190px;
    height: 190px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 0;
    align-items: stretch;
    border-radius: 8px !important;
  }

  #dispatcherView .dispatcher-hero > div:first-child {
    min-width: 0;
    padding: 28px 28px;
    justify-content: center;
  }

  #dispatcherView .dispatcher-hero > div:first-child h1 {
    margin: 10px 0 0;
    font-size: clamp(27px, 2vw, 32px) !important;
    line-height: 1.08;
  }

  #dispatcherView .dispatcher-hero > div:first-child p {
    max-width: 690px;
    margin: 16px 0 0;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  #dispatcherView .dispatcher-assigned-tile {
    align-self: center;
    min-height: 104px;
    height: auto;
    margin: 24px 28px 24px 0;
    padding: 17px 18px;
    border-radius: 6px !important;
    background: #0a1118 !important;
    box-shadow: none !important;
  }

  #dispatcherView .dispatcher-assigned-tile span,
  #dispatcherView .dispatcher-assigned-tile small {
    font-size: 8.5px;
    line-height: 1.35;
  }

  #dispatcherView .dispatcher-assigned-tile strong {
    margin: 8px 0 6px;
    font-size: 18px;
    line-height: 1.12;
    overflow-wrap: break-word;
  }

  #dispatcherView .dispatcher-select-wrap {
    grid-column: 2;
    min-height: 190px;
    height: 190px;
    padding: 24px 20px;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 18px;
    align-content: start;
    border-radius: 8px !important;
  }

  #dispatcherView .dispatcher-select-wrap h2 {
    margin: 7px 0 0;
    font-size: 19px;
    line-height: 1.15;
  }

  #dispatcherView .dispatcher-select-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
  }

  #dispatcherView .dispatcher-select-label {
    gap: 6px;
  }

  #dispatcherView .dispatcher-select-label span {
    font-family: var(--mono);
    color: var(--muted);
    font-size: 8px;
    letter-spacing: .06em;
  }

  #dispatcherView .dispatcher-select {
    min-height: 34px;
    height: 34px;
    padding: 0 10px;
    border-radius: 4px !important;
    font-size: 9px;
  }

  #dispatcherView > .dispatcher-shell > .dispatcher-data-notice {
    grid-column: 1 / -1;
  }

  /* Flatten old nested grids so the Figma two-column workbench can be used. */
  #dispatcherView .dispatcher-grid,
  #dispatcherView .dispatcher-side-stack {
    display: contents;
  }

  #dispatcherView .dispatcher-outages-panel {
    grid-column: 1;
    grid-row: span 2;
    align-self: stretch;
    min-height: 545px;
    height: 100%;
    padding: 20px;
    border-radius: 8px !important;
  }

  #dispatcherView .dispatcher-grid > .dispatcher-panel:first-child {
    grid-column: 2;
    min-height: 300px;
    height: 300px;
    padding: 18px;
    border-radius: 8px !important;
  }

  #dispatcherView .dispatcher-side-stack > .dispatcher-panel:first-child {
    display: none !important;
  }

  #dispatcherView .dispatcher-workorders-panel {
    grid-column: 2;
    min-height: 229px;
    height: 229px;
    padding: 16px 18px;
    border-radius: 8px !important;
  }

  #dispatcherView .dispatcher-panel-head {
    padding-bottom: 10px;
    gap: 12px;
  }

  #dispatcherView .dispatcher-panel-head h2 {
    margin-top: 6px;
    font-size: 18px;
    line-height: 1.15;
  }

  #dispatcherView .dispatcher-live-badge {
    min-height: 28px;
    padding: 0 10px;
    font-size: 9px;
  }

  #dispatcherView .dispatcher-source-meta {
    min-height: 0;
    margin-top: 10px;
    padding: 8px 10px;
    border-radius: 4px;
    font-size: 8px;
  }

  #dispatcherView .dispatcher-outage-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 14px;
  }

  #dispatcherView .dispatcher-outage-kpi {
    min-height: 90px;
    padding: 14px 16px !important;
  }

  #dispatcherView .dispatcher-outage-kpi > span {
    font-size: 8px;
  }

  #dispatcherView .dispatcher-outage-kpi > strong {
    margin-top: 8px;
    font-size: 28px;
    line-height: 1;
  }

  #dispatcherView .dispatcher-outage-kpi small {
    margin-top: 7px;
    font-size: 8px;
  }

  #dispatcherView .dispatcher-outage-tables {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 12px;
  }

  #dispatcherView .dispatcher-outage-table-card {
    min-height: 300px;
    padding: 14px;
    border-radius: 6px !important;
  }

  #dispatcherView .dispatcher-outage-table-head h3 {
    margin: 6px 0 0;
    font-size: 14px;
  }

  #dispatcherView .dispatcher-outage-table th,
  #dispatcherView .dispatcher-outage-table td {
    padding: 8px 8px !important;
    font-size: 9px !important;
  }

  #dispatcherView .dispatcher-outage-details summary {
    min-height: 36px;
    font-size: 8.5px;
  }

  #dispatcherView .dispatcher-requests-chart-layout {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 188px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
  }

  #dispatcherView .dispatcher-requests-donut {
    width: 142px !important;
    height: 142px !important;
    margin-inline: auto;
  }

  #dispatcherView .dispatcher-requests-side {
    min-width: 0;
  }

  #dispatcherView .dispatcher-requests-legend,
  #dispatcherView .dispatcher-workorders-legend {
    gap: 6px !important;
  }

  #dispatcherView .dispatcher-workorders-legend-item {
    min-height: 34px;
    height: 34px;
    padding: 6px 9px !important;
    border-radius: 4px !important;
  }

  #dispatcherView .dispatcher-workorders-legend-item span {
    font-size: 10px;
    white-space: nowrap;
  }

  #dispatcherView .dispatcher-workorders-legend-item strong {
    font-size: 13px;
    color: #fff;
  }

  /* Not present in the approved Figma dispatch panel. */
  #dispatcherView .dispatcher-requests-caption,
  #dispatcherView .dispatcher-ending-live-card {
    display: none !important;
  }

  #dispatcherView .dispatcher-workorders-meta,
  #dispatcherView .dispatcher-workorders-notice,
  #dispatcherView .dispatcher-workorders-breakdown {
    margin-top: 8px;
  }

  #dispatcherView .dispatcher-workorders-chart-layout {
    margin-top: 10px;
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
  }

  #dispatcherView .dispatcher-workorders-donut {
    width: 118px !important;
    height: 118px !important;
    margin-inline: auto;
  }

  #dispatcherView .dispatcher-workorders-donut-center strong {
    font-size: 25px !important;
  }

  #dispatcherView .dispatcher-workorders-donut-center span {
    font-size: 8px !important;
  }

  #dispatcherView .dispatcher-workorders-panel .dispatcher-workorders-legend-item {
    min-height: 27px;
    height: 27px;
    padding: 4px 8px !important;
  }

  #dispatcherView .dispatcher-workorders-panel .dispatcher-workorders-legend-item span {
    font-size: 8.5px;
  }

  #dispatcherView .dispatcher-workorders-panel .dispatcher-workorders-legend-item strong {
    font-size: 11px;
  }

  /* ------------------------- EXECUTIVE ------------------------- */
  #executiveView .executive-shell {
    gap: 16px;
  }

  #executiveView .executive-hero {
    min-height: 220px;
    height: 220px;
    padding: 32px 28px !important;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 790px;
    gap: 24px;
    align-items: center;
    border-radius: 8px !important;
  }

  #executiveView .executive-hero-copy h1 {
    margin: 10px 0 0;
    max-width: none;
    font-size: 31px !important;
    line-height: 1.08;
  }

  #executiveView .executive-hero-copy p {
    max-width: 790px;
    margin-top: 16px;
    font-size: 11px;
    line-height: 1.55;
  }

  #executiveView .executive-hero-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch;
  }

  #executiveView .executive-kpi-tile {
    min-height: 150px !important;
    height: 150px;
    padding: 16px 14px !important;
    display: grid;
    grid-template-rows: auto auto 1fr !important;
    gap: 8px !important;
    border-radius: 5px !important;
  }

  #executiveView .executive-kpi-tile > span {
    min-height: 0 !important;
    max-width: none !important;
    font-size: 9px !important;
    line-height: 1.25;
    overflow-wrap: normal;
  }

  #executiveView .executive-kpi-tile > strong {
    min-height: 0 !important;
    margin: 0 !important;
    display: block !important;
    font-size: 32px !important;
    line-height: 1 !important;
  }

  #executiveView .executive-kpi-foot {
    margin-top: auto;
    align-self: end;
    display: grid;
    gap: 8px;
  }

  #executiveView .executive-kpi-foot small {
    font-size: 8px !important;
  }

  #executiveView .executive-delta {
    width: 46px;
    min-height: 20px;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 8px !important;
  }

  #executiveView .executive-filter-panel {
    min-height: 84px;
    padding: 14px 18px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 720px;
    align-items: center;
    gap: 24px;
    border-radius: 8px !important;
  }

  #executiveView .executive-filter-panel h2 {
    margin: 6px 0 0;
    font-size: 18px;
  }

  #executiveView .executive-filter-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  #executiveView .dispatcher-select {
    min-height: 38px;
    height: 38px;
    border-radius: 4px !important;
    font-size: 9px;
  }

  #executiveView .executive-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: start;
  }

  #executiveView .executive-panel {
    gap: 12px;
    padding: 18px;
    min-height: 0;
    border-radius: 8px !important;
  }

  #executiveView .executive-panel-head {
    gap: 12px;
  }

  #executiveView .executive-panel-head h2 {
    margin-top: 5px;
    font-size: 18px;
    line-height: 1.15;
  }

  #executiveView .executive-overview-panel {
    grid-column: span 7;
    min-height: 250px;
    height: 250px;
  }

  #executiveView .executive-outages-panel {
    grid-column: span 5;
    min-height: 250px;
    height: 250px;
  }

  #executiveView .executive-chart-panel {
    grid-column: span 6;
    min-height: 285px;
    height: 285px;
  }

  #executiveView .executive-overview-panel .executive-meta-line,
  #executiveView .executive-outages-panel .executive-meta-line {
    margin-top: -2px;
    font-size: 8px;
  }

  #executiveView .executive-highlight-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-top: 8px;
  }

  #executiveView .executive-highlight-card {
    min-height: 118px !important;
    height: 118px;
    padding: 12px !important;
    gap: 8px;
    border-radius: 6px !important;
  }

  #executiveView .executive-highlight-card > span {
    font-family: var(--mono);
    font-size: 8px;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: .04em;
  }

  #executiveView .executive-highlight-card > strong {
    margin: auto 0 0;
    display: block;
    -webkit-line-clamp: 2;
    font-size: 13px !important;
    line-height: 1.18;
    overflow-wrap: break-word;
  }

  #executiveView .executive-highlight-card > small {
    margin-top: 6px;
    font-family: var(--mono);
    font-size: 9px;
  }

  /* The approved Figma panel shows ranking rows, not the large total tile. */
  #executiveView .executive-total-tile {
    display: none !important;
  }

  #executiveView .executive-outages-panel .executive-panel-head {
    display: flex !important;
    grid-template-columns: none !important;
  }

  #executiveView .executive-outages-panel .executive-ranking-list {
    max-height: none !important;
    overflow: visible !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    padding: 0 !important;
  }

  #executiveView .executive-outages-panel .executive-ranking-row {
    min-height: 32px !important;
    height: 32px;
    padding: 5px 9px !important;
    border-radius: 4px !important;
  }

  #executiveView .executive-outages-panel .executive-ranking-index {
    width: 22px;
    height: 16px;
    border-radius: 8px !important;
    font-size: 8px;
  }

  #executiveView .executive-outages-panel .executive-ranking-name {
    font-size: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  #executiveView .executive-outages-panel .executive-ranking-row > strong {
    font-size: 12px;
  }

  #executiveView .executive-chart-layout {
    margin-top: 6px;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 18px;
    align-items: center;
  }

  #executiveView .executive-donut {
    width: 150px !important;
    height: 150px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-inline: auto;
  }

  #executiveView .dispatcher-workorders-donut-center strong {
    font-size: 26px !important;
  }

  #executiveView .dispatcher-workorders-donut-center span {
    font-size: 8px !important;
  }

  #executiveView .executive-legend {
    gap: 6px !important;
  }

  #executiveView .executive-legend .dispatcher-workorders-legend-item {
    min-height: 34px;
    height: 34px;
    padding: 6px 10px !important;
    border-radius: 4px !important;
  }

  #executiveView .executive-legend .dispatcher-workorders-legend-item span {
    font-size: 10px;
  }

  #executiveView .executive-legend .dispatcher-workorders-legend-item strong {
    font-size: 13px;
    color: #fff;
  }

  #executiveView .executive-legend .is-ending {
    display: none !important;
  }

  #executiveView .executive-chart-panel .executive-meta-line {
    display: none;
  }

  /* Figma places the summary table immediately after charts. Keep the
     richer ranking/trend modules available on smaller screens but remove
     them from the approved desktop operations layout. */
  #executiveView .executive-ranking-panel,
  #executiveView .executive-trend-panel {
    display: none !important;
  }

  #executiveView .executive-table-panel {
    grid-column: 1 / -1;
    padding: 18px;
    border-radius: 8px !important;
  }

  #executiveView .executive-table-wrap {
    max-height: none;
    overflow-x: auto;
  }

  #executiveView .executive-table th {
    padding: 9px 10px !important;
    font-size: 9px !important;
  }

  #executiveView .executive-table td {
    padding: 9px 10px !important;
    font-size: 11px !important;
  }

  /* Decorative live schematics remain subtle, exactly as intended. */
  #dispatcherView .ambient-energy-schematic-dispatcher {
    right: 250px;
    width: 245px;
    opacity: .08;
  }

  #executiveView .ambient-energy-schematic-executive {
    left: 31%;
    width: 340px;
    opacity: .08;
  }
}

/* Intermediate desktop/laptop: preserve the same visual hierarchy without
   forcing tiny right columns. */
@media (min-width: 1181px) and (max-width: 1480px) {
  #dispatcherView .dispatcher-shell {
    grid-template-columns: minmax(0, 1.6fr) minmax(390px, 1fr);
  }

  #executiveView .executive-hero {
    grid-template-columns: minmax(0, 1fr) 650px;
  }

  #executiveView .executive-filter-panel {
    grid-template-columns: minmax(0, 1fr) 600px;
  }
}

/* Dispatcher hero child-order fix: the ambient schematic is the first DOM
   child, while legacy rules treated first-child as the copy column. */
@media (min-width: 1181px) {
  #dispatcherView .dispatcher-hero > .ambient-energy-schematic {
    position: absolute !important;
    display: block !important;
    padding: 0 !important;
    z-index: 1 !important;
    width: 245px !important;
    height: auto !important;
    right: 250px !important;
    left: auto !important;
    top: auto !important;
    bottom: 4px !important;
  }

  #dispatcherView .dispatcher-hero > div:nth-child(2) {
    grid-column: 1;
    position: relative;
    z-index: 2;
    min-width: 0;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }

  #dispatcherView .dispatcher-hero > div:nth-child(2) h1 {
    margin: 10px 0 0;
    font-size: clamp(27px, 2vw, 32px) !important;
    line-height: 1.08;
  }

  #dispatcherView .dispatcher-hero > div:nth-child(2) p {
    max-width: 690px;
    margin: 16px 0 0;
    font-size: 11px !important;
    line-height: 1.55 !important;
  }

  #dispatcherView .dispatcher-assigned-tile {
    grid-column: 2;
  }
}

@media (min-width: 1181px) {
  #dispatcherView .dispatcher-outages-panel {
    min-height: 560px;
  }

  #dispatcherView .dispatcher-grid > .dispatcher-panel:first-child {
    min-height: 316px;
    height: 316px;
  }

  #dispatcherView .dispatcher-workorders-panel {
    min-height: 228px;
    height: 228px;
  }
}

/* =========================================================
   FIGMA LAYOUT POLISH · 2026-10-07
   - right dispatcher column gets enough vertical room
   - Executive OMS ranking gets an internal scroll
   - four trend/sparkline cards return before the summary table
   ========================================================= */
@media (min-width: 1181px) {
  /* Keep the dispatcher workbench aligned: 340 + 16 + 350 = 706px. */
  #dispatcherView .dispatcher-outages-panel {
    min-height: 706px !important;
    height: 706px !important;
  }

  #dispatcherView .dispatcher-grid > .dispatcher-panel:first-child {
    min-height: 340px !important;
    height: 340px !important;
    overflow: visible !important;
  }

  #dispatcherView .dispatcher-workorders-panel {
    min-height: 350px !important;
    height: 350px !important;
    overflow: hidden !important;
  }

  #dispatcherView .dispatcher-requests-chart-layout {
    min-height: 184px;
  }

  #dispatcherView .dispatcher-workorders-chart-layout {
    min-height: 152px;
    margin-top: 12px;
  }

  #dispatcherView .dispatcher-workorders-panel .dispatcher-source-meta {
    margin-top: 8px;
  }

  #dispatcherView .dispatcher-workorders-panel .dispatcher-source-breakdown {
    margin-top: 8px;
  }

  /* If source details are expanded, keep the panel tidy instead of clipping
     the donut/legend below it. */
  #dispatcherView .dispatcher-workorders-panel .dispatcher-breakdown-options {
    max-height: 86px !important;
    overflow-y: auto !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(214,164,70,.38) rgba(255,255,255,.025);
  }

  #dispatcherView .dispatcher-workorders-panel .dispatcher-breakdown-options::-webkit-scrollbar {
    width: 6px;
  }

  #dispatcherView .dispatcher-workorders-panel .dispatcher-breakdown-options::-webkit-scrollbar-track {
    background: rgba(255,255,255,.02);
  }

  #dispatcherView .dispatcher-workorders-panel .dispatcher-breakdown-options::-webkit-scrollbar-thumb {
    border: 1px solid transparent;
    border-radius: 999px;
    background: rgba(214,164,70,.42);
    background-clip: padding-box;
  }

  /* OMS operational background: always allow the user to inspect the rest
     of the ranking without growing the entire dashboard. */
  #executiveView .executive-outages-panel .executive-ranking-list {
    max-height: 166px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding-right: 6px !important;
    scrollbar-width: thin;
    scrollbar-color: rgba(214,164,70,.45) rgba(255,255,255,.025);
  }

  #executiveView .executive-outages-panel .executive-ranking-list::-webkit-scrollbar {
    width: 6px;
  }

  #executiveView .executive-outages-panel .executive-ranking-list::-webkit-scrollbar-track {
    background: rgba(255,255,255,.018);
    border-radius: 999px;
  }

  #executiveView .executive-outages-panel .executive-ranking-list::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(214,164,70,.62), rgba(60,195,232,.38));
  }

  /* Keep the ranking module hidden in the approved desktop layout, but bring
     the four historical trend graphs back exactly before the final table. */
  #executiveView .executive-ranking-panel {
    display: none !important;
  }

  #executiveView .executive-trend-panel {
    display: grid !important;
    grid-column: 1 / -1 !important;
    min-height: 250px;
    padding: 18px !important;
    gap: 14px !important;
    border-radius: 8px !important;
  }

  #executiveView .executive-trend-panel .executive-panel-head {
    align-items: center;
  }

  #executiveView .executive-trend-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  #executiveView .executive-trend-card {
    min-height: 176px;
    padding: 13px !important;
    border-radius: 6px !important;
    background:
      linear-gradient(rgba(140,170,190,.045) 1px, transparent 1px),
      linear-gradient(90deg, rgba(140,170,190,.045) 1px, transparent 1px),
      #080d13 !important;
    background-size: 26px 22px !important;
  }

  #executiveView .executive-trend-head > div > span {
    font-size: 9px;
    font-family: var(--mono);
    letter-spacing: .035em;
  }

  #executiveView .executive-trend-head strong {
    margin-top: 5px;
    font-size: 25px;
  }

  #executiveView .executive-trend-card .executive-delta {
    width: auto;
    min-width: 42px;
  }

  #executiveView .executive-sparkline {
    height: 96px;
    margin-top: 10px;
    border-radius: 4px;
    background: rgba(2,8,13,.26);
  }

  #executiveView .executive-table-panel {
    grid-column: 1 / -1;
  }
}

/* On mid-size desktops keep the four graphs readable without squeezing them. */
@media (min-width: 1181px) and (max-width: 1450px) {
  #executiveView .executive-trend-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #executiveView .executive-trend-panel {
    min-height: 430px;
  }
}

/* =========================================================
   EXECUTIVE TREND GRAPHS · DESKTOP FULL VISIBILITY FIX
   Keep all four historical charts fully inside their cards.
   ========================================================= */
@media (min-width: 1181px) {
  #executiveView .executive-trend-panel {
    min-height: 0 !important;
    padding: 18px !important;
  }

  #executiveView .executive-trend-grid {
    align-items: stretch !important;
  }

  #executiveView .executive-trend-card {
    min-height: 232px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }

  #executiveView .executive-trend-head {
    flex: 0 0 auto;
  }

  #executiveView .executive-sparkline {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin-top: 10px !important;
    padding: 0 !important;
    overflow: visible !important;
    border-radius: 4px !important;
    background: transparent !important;
  }

  #executiveView .executive-sparkline-canvas {
    width: 100% !important;
    height: 118px !important;
    min-height: 118px !important;
    overflow: hidden !important;
    border-radius: 4px !important;
    background-image:
      linear-gradient(rgba(140,170,190,.065) 1px, transparent 1px),
      linear-gradient(90deg, rgba(140,170,190,.065) 1px, transparent 1px) !important;
    background-size: 28px 22px !important;
    background-color: rgba(2,8,13,.26) !important;
  }

  #executiveView .executive-sparkline-canvas svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
  }

  #executiveView .executive-sparkline-meta {
    min-height: 26px !important;
    margin-top: 7px !important;
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  #executiveView .executive-sparkline-chip {
    min-width: 0 !important;
    min-height: 24px !important;
    padding: 5px 7px !important;
    border-radius: 3px !important;
    font-size: 9px !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
}

@media (min-width: 1181px) and (max-width: 1450px) {
  #executiveView .executive-trend-card {
    min-height: 224px !important;
  }

  #executiveView .executive-sparkline-canvas {
    height: 112px !important;
    min-height: 112px !important;
  }
}

/* =========================================================
   EXECUTIVE REGIONAL MAP · SPB + LENINGRAD OBLAST
   Simplified municipal geometry for the operations dashboard.
   ========================================================= */
html body .executive-regional-map-panel {
  grid-column: 1 / -1;
  padding: 18px !important;
  border-radius: 8px !important;
  overflow: hidden;
}

html body .executive-map-panel-head {
  align-items: flex-start;
  gap: 18px;
}

html body .executive-map-copy {
  margin: 6px 0 0;
  color: var(--text-2);
  font-size: 10px;
  line-height: 1.45;
}

html body .executive-map-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 14px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

html body .executive-map-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html body .executive-map-legend i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,.14);
}

html body .executive-map-legend i.is-clear {
  background: rgba(60,195,232,.08);
  border-color: rgba(60,195,232,.35);
}

html body .executive-map-legend i.is-alert {
  background: rgba(240,84,95,.34);
  border-color: rgba(240,84,95,.75);
  box-shadow: 0 0 9px rgba(240,84,95,.18);
}

html body .executive-regional-map {
  margin-top: 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: 14px;
  min-width: 0;
}

html body .executive-map-stage {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background:
    radial-gradient(circle at 36% 42%, rgba(60,195,232,.045), transparent 28%),
    linear-gradient(rgba(140,170,190,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(140,170,190,.035) 1px, transparent 1px),
    #070c12;
  background-size: auto, 28px 28px, 28px 28px, auto;
}

html body .executive-map-svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 430px;
  max-height: 620px;
}

html body .executive-map-water {
  fill: url(#executiveMapWater);
  stroke: rgba(60,195,232,.12);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
}

html body .executive-map-water-label {
  fill: rgba(98,139,160,.42);
  font: 600 9px var(--mono);
  letter-spacing: .14em;
}

html body .executive-map-grid path {
  fill: none;
  stroke: rgba(133,163,180,.045);
  stroke-width: .8;
  vector-effect: non-scaling-stroke;
}

html body .executive-map-zone .executive-map-shape {
  vector-effect: non-scaling-stroke;
  fill: rgba(60,195,232,.035);
  stroke: rgba(121,166,190,.34);
  stroke-width: 1.15;
  transition: fill .35s ease, stroke .35s ease, filter .35s ease;
}

html body .executive-map-zone.is-enabled:hover .executive-map-shape {
  stroke: rgba(122,220,245,.68);
}

html body .executive-map-zone.has-outages .executive-map-shape {
  fill: rgba(240,84,95,var(--zone-alert-alpha,.20));
  stroke: rgba(255,102,115,.78);
  filter: drop-shadow(0 0 4px rgba(240,84,95,.14));
  animation: executiveMapZoneAlert 5.8s ease-in-out infinite;
}

html body .executive-map-zone.is-disabled .executive-map-shape {
  fill: rgba(255,255,255,.012);
  stroke: rgba(122,150,166,.12);
  stroke-dasharray: 3 4;
}

html body .executive-map-zone-name {
  fill: #d9e4ec;
  font: 700 10px var(--mono);
  paint-order: stroke;
  stroke: rgba(4,7,11,.95);
  stroke-width: 3px;
  stroke-linejoin: round;
  pointer-events: none;
}

html body .executive-map-zone.is-disabled .executive-map-zone-name {
  fill: rgba(135,154,168,.35);
}

html body .executive-map-metric rect {
  fill: rgba(5,11,17,.92);
  stroke: rgba(214,164,70,.42);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

html body .executive-map-zone.has-outages .executive-map-metric rect {
  stroke: rgba(240,84,95,.66);
  fill: rgba(28,10,15,.94);
}

html body .executive-map-metric text {
  fill: #fff;
  font: 800 10px var(--mono);
  letter-spacing: .03em;
  pointer-events: none;
}

html body .executive-map-pulse {
  fill: none;
  stroke: rgba(240,84,95,.9);
  stroke-width: 1.2;
  transform-box: fill-box;
  transform-origin: center;
  animation: executiveMapPulse 2.8s ease-out infinite;
}

html body .executive-map-side-summary {
  display: grid;
  grid-template-rows: repeat(3, minmax(0, 1fr)) auto;
  gap: 8px;
  min-width: 0;
}

html body .executive-map-summary-kpi,
html body .executive-map-summary-note {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan);
  border-radius: 5px;
  background: rgba(255,255,255,.018);
}

html body .executive-map-summary-kpi.is-alert {
  border-left-color: var(--red);
}

html body .executive-map-summary-kpi.is-appeals {
  border-left-color: var(--amber);
}

html body .executive-map-summary-kpi span,
html body .executive-map-summary-note span {
  display: block;
  color: var(--muted);
  font: 600 9px var(--mono);
  text-transform: uppercase;
  letter-spacing: .07em;
}

html body .executive-map-summary-kpi strong {
  display: block;
  margin-top: 7px;
  color: #fff;
  font: 800 30px var(--mono);
  line-height: 1;
}

html body .executive-map-summary-note strong {
  display: block;
  margin-top: 7px;
  color: var(--text);
  font: 700 12px var(--mono);
}

html body .executive-map-summary-note small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
}

html body .executive-map-footer {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font: 600 8.5px var(--mono);
}

@keyframes executiveMapZoneAlert {
  0%,100% { filter: drop-shadow(0 0 2px rgba(240,84,95,.10)); }
  50% { filter: drop-shadow(0 0 7px rgba(240,84,95,.22)); }
}

@keyframes executiveMapPulse {
  0% { opacity: .75; transform: scale(.65); }
  75%,100% { opacity: 0; transform: scale(2.3); }
}

/* Map configuration in system control */
html body .executive-map-config-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

html body .executive-map-config-card.is-disabled {
  opacity: .62;
}

html body .executive-map-config-state {
  padding: 5px 7px;
  border: 1px solid rgba(63,210,154,.28);
  border-radius: 3px;
  color: var(--green);
  background: rgba(63,210,154,.06);
  font: 700 9px var(--mono);
  letter-spacing: .08em;
}

html body .executive-map-config-state.is-off {
  color: var(--muted);
  border-color: var(--line);
  background: rgba(255,255,255,.02);
}

html body .executive-map-source-grid {
  grid-template-columns: 1fr 1fr;
}

html body .executive-map-source-grid strong {
  display: block;
  margin-bottom: 7px;
  color: var(--text-2);
  font-size: 10px;
}

html body .executive-map-unit-picker {
  display: grid;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(214,164,70,.42) rgba(255,255,255,.02);
}

html body .executive-map-unit-group {
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255,255,255,.015);
}

html body .executive-map-unit-group > strong {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font: 700 10px var(--mono);
}

html body .executive-map-enabled-option {
  margin-bottom: 10px;
}

@media (max-width: 1180px) {
  html body .executive-regional-map {
    grid-template-columns: 1fr;
  }

  html body .executive-map-side-summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: none;
  }

  html body .executive-map-svg {
    min-height: 360px;
  }

  html body .executive-map-config-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  html body .executive-regional-map-panel {
    padding: 12px !important;
  }

  html body .executive-map-panel-head {
    display: grid;
    gap: 8px;
  }

  html body .executive-map-legend {
    justify-content: flex-start;
  }

  html body .executive-map-stage {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  html body .executive-map-svg {
    width: 760px;
    max-width: none;
    min-height: 0;
  }

  html body .executive-map-side-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  html body .executive-map-summary-kpi,
  html body .executive-map-summary-note {
    padding: 9px;
  }

  html body .executive-map-summary-kpi strong {
    font-size: 24px;
  }

  html body .executive-map-footer {
    display: grid;
    gap: 4px;
  }

  html body .executive-map-source-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .executive-map-zone.has-outages .executive-map-shape,
  html body .executive-map-pulse {
    animation: none !important;
  }
}

html body .executive-config-source-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

html body .executive-config-source-tags > span {
  max-width: 100%;
  padding: 4px 6px;
  border: 1px solid rgba(60,195,232,.16);
  border-radius: 3px;
  color: var(--text-2);
  background: rgba(60,195,232,.035);
  font: 600 9px var(--mono);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .executive-config-source-tags > span.is-empty {
  border-color: transparent;
  color: var(--muted);
  background: transparent;
  padding-left: 0;
}

/* =========================================================
   EXCEL EXPORTS · XLSX REPORT BUILDER
   ========================================================= */
html body .module-card-excel {
  border-left: 3px solid var(--green) !important;
}
html body .module-card-excel .module-icon {
  color: var(--green) !important;
  border-color: rgba(63,210,154,.35) !important;
  background: rgba(63,210,154,.08) !important;
}
html body .module-card-excel .module-icon svg { stroke: var(--green) !important; }

.excel-export-shell { display:grid; gap:14px; }
.excel-export-hero {
  margin-top:14px;
  padding:24px 26px !important;
  display:grid;
  grid-template-columns:minmax(0,1fr) 190px;
  align-items:center;
  gap:22px;
  overflow:hidden;
}
.excel-export-hero h1 { margin:7px 0 0; }
.excel-export-hero p { max-width:720px; margin:10px 0 0; font-size:11px; line-height:1.6; color:var(--text-2); }
.excel-export-hero-mark {
  min-height:92px;
  padding:14px;
  display:grid;
  grid-template-columns:1fr auto;
  align-content:center;
  gap:5px 12px;
  border:1px solid rgba(63,210,154,.23);
  border-left:3px solid var(--green);
  border-radius:5px;
  background:linear-gradient(135deg,rgba(63,210,154,.08),rgba(8,13,19,.78));
  font-family:var(--mono);
}
.excel-export-hero-mark span { color:var(--green); font-size:11px; letter-spacing:.15em; }
.excel-export-hero-mark strong { grid-row:1 / span 2; grid-column:2; align-self:center; font-size:34px; color:#fff; }
.excel-export-hero-mark small { color:var(--muted); font-size:9px; }

.excel-export-product,
.excel-preview-panel { padding:20px 22px !important; }
.excel-export-product-head,
.excel-preview-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-bottom:14px;
  border-bottom:1px solid var(--line);
}
.excel-export-product-head h2,
.excel-preview-head h2 { margin:5px 0 0; }
.excel-export-product-head p { margin:7px 0 0; color:var(--text-2); font-size:10px; line-height:1.5; }
.excel-export-status {
  min-width:150px;
  padding:10px 12px;
  border:1px solid rgba(63,210,154,.22);
  border-radius:5px;
  background:rgba(63,210,154,.05);
  display:grid;
  grid-template-columns:1fr auto;
  gap:4px 12px;
}
.excel-export-status span { font:600 9px var(--mono); color:var(--green); text-transform:uppercase; letter-spacing:.08em; }
.excel-export-status strong { grid-row:1 / span 2; grid-column:2; font:700 25px var(--mono); color:#fff; }
.excel-export-status small { color:var(--muted); font-size:8px; }
.excel-export-actions { margin-top:14px; display:flex; align-items:end; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
.excel-preview-limit { display:grid; gap:5px; margin-right:auto; }
.excel-preview-limit > span { font:600 9px var(--mono); color:var(--muted); text-transform:uppercase; }
.excel-download-action { min-width:170px; min-height:40px !important; margin:0 !important; }
.excel-preview-meta { font:600 10px var(--mono); color:var(--muted); }
.excel-preview-state { padding:36px 10px; color:var(--text-2); text-align:center; font-size:11px; }
.excel-preview-sheet {
  margin-top:14px;
  padding:14px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:5px;
  background:#e9eef2;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 16px 45px rgba(0,0,0,.24);
}
.excel-preview-document-title { padding:11px 13px; font-weight:700; border-radius:2px 2px 0 0; }
.excel-preview-document-subtitle { min-height:24px; padding:6px 13px; color:#667788; background:#fff; font-size:10px; border-bottom:1px solid #dce3e8; }
.excel-preview-scroll { overflow:auto; max-height:520px; background:#fff; }
.excel-preview-table { width:max-content; min-width:100%; border-collapse:collapse; color:#17212b; background:#fff; }
.excel-preview-table th,
.excel-preview-table td { position:static !important; padding:8px 10px !important; border:1px solid #d6dee4 !important; line-height:1.35; }
.excel-preview-table th { font-family:Arial,sans-serif !important; letter-spacing:0 !important; text-transform:none !important; }
.excel-preview-table td { font-family:Arial,sans-serif; vertical-align:middle; }

/* admin constructor */
.excel-export-management { margin-top:16px; }
.excel-template-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.excel-template-section {
  min-width:0;
  padding:14px;
  border:1px solid var(--line);
  border-radius:6px;
  background:rgba(255,255,255,.018);
}
.excel-template-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.excel-template-form-grid label,
.excel-style-group label,
.excel-template-column label { min-width:0; display:grid; gap:5px; color:var(--text-2); font-size:9px; }
.excel-template-form-grid input,
.excel-style-group input,
.excel-template-column input,
.excel-template-column select {
  width:100%; min-width:0; height:34px; padding:0 9px;
  border:1px solid var(--line); border-radius:4px; outline:0;
  color:var(--text); background:#070b11; font:600 10px var(--mono);
}
.excel-template-form-grid input:focus,
.excel-style-group input:focus,
.excel-template-column input:focus,
.excel-template-column select:focus { border-color:var(--gold); box-shadow:0 0 0 2px rgba(214,164,70,.1); }
.excel-template-flags { display:flex; gap:12px; flex-wrap:wrap; margin-top:12px; }
.excel-template-flags label,
.excel-col-check { display:flex !important; align-items:center; gap:6px; color:var(--text-2); font-size:9px; }
.excel-template-flags input,
.excel-col-check input { width:14px !important; height:14px !important; accent-color:var(--gold); }
.excel-style-groups { display:grid; gap:8px; }
.excel-style-group { display:grid; grid-template-columns:90px repeat(4,minmax(0,1fr)); align-items:end; gap:8px; padding:9px; border:1px solid var(--line); border-radius:4px; background:#080d13; }
.excel-style-group b { align-self:center; color:#fff; font-size:10px; }
.excel-style-group input[type="color"] { padding:3px; }
.excel-template-divisions-section,
.excel-template-columns-section { margin-top:12px; }
.excel-template-division-picker { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.excel-template-division-picker .permission-option { margin:0; }
.excel-template-columns-head { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.excel-template-columns { display:grid; gap:7px; }
.excel-template-column {
  display:grid;
  grid-template-columns:34px minmax(135px,.9fr) minmax(150px,1.15fr) 80px 70px 105px minmax(220px,1fr) auto;
  align-items:end;
  gap:7px;
  padding:9px;
  border:1px solid var(--line);
  border-left:2px solid rgba(214,164,70,.55);
  border-radius:4px;
  background:#080d13;
}

.excel-col-flags {
  display:grid;
  grid-template-columns:repeat(2,minmax(95px,1fr));
  gap:6px 10px;
  align-self:end;
  padding:5px 7px;
  min-height:34px;
  border:1px solid var(--line);
  border-radius:4px;
  background:rgba(255,255,255,.015);
}
.excel-col-flags .excel-col-check { min-width:0; white-space:nowrap; }
.excel-template-column input:disabled {
  opacity:.42;
  cursor:not-allowed;
  background:#05080d;
}
.excel-column-order { align-self:center; display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:3px; color:var(--gold); font:700 10px var(--mono); }
.excel-column-actions { display:flex; gap:4px; align-self:center; }
.excel-column-actions button { width:29px; height:29px; border:1px solid var(--line); border-radius:3px; color:var(--text); background:rgba(255,255,255,.03); cursor:pointer; }
.excel-column-actions button:hover { border-color:var(--gold); color:var(--gold); }
.excel-column-actions button.is-danger { color:#ff8890; }
.excel-column-actions button:disabled { opacity:.25; cursor:default; }

@media (max-width:1180px) {
  .excel-template-grid { grid-template-columns:1fr; }
  .excel-template-division-picker { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .excel-template-columns { overflow-x:auto; padding-bottom:5px; }
  .excel-template-column { min-width:1080px; }
}

@media (max-width:700px) {
  .excel-export-hero { grid-template-columns:1fr; padding:15px !important; }
  .excel-export-hero-mark { display:none; }
  .excel-export-product,
  .excel-preview-panel { padding:13px !important; }
  .excel-export-product-head,
  .excel-preview-head { display:grid; gap:9px; }
  .excel-export-status { width:100%; }
  .excel-export-actions { display:grid; grid-template-columns:1fr 1fr; align-items:end; }
  .excel-preview-limit { margin:0; }
  .excel-download-action { min-width:0; width:100%; }
  .excel-preview-sheet { padding:7px; }
  .excel-preview-scroll { max-height:430px; }
  .excel-template-form-grid,
  .excel-template-division-picker { grid-template-columns:1fr; }
  .excel-style-group { grid-template-columns:1fr 1fr; }
  .excel-style-group b { grid-column:1/-1; }
  .excel-template-column { min-width:1040px; }
}


/* =========================================================
   EXCEL PREVIEW · COLLAPSIBLE + SAFE VIEWPORT WIDTH
   ========================================================= */
html body .excel-export-shell,
html body .excel-export-product,
html body .excel-preview-panel,
html body .excel-preview-sheet {
  min-width:0 !important;
  width:100%;
  max-width:100%;
}

html body .excel-export-shell {
  overflow:visible;
}

html body .excel-export-product,
html body .excel-preview-panel {
  overflow:hidden;
}

html body .excel-preview-sheet {
  box-sizing:border-box;
  overflow:hidden;
}

html body .excel-preview-scroll {
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow-x:auto !important;
  overflow-y:auto !important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  -webkit-overflow-scrolling:touch;
}

html body .excel-preview-table {
  width:max-content !important;
  min-width:100% !important;
  max-width:none !important;
}

html body .excel-preview-scroll::-webkit-scrollbar {
  height:10px;
  width:10px;
}
html body .excel-preview-scroll::-webkit-scrollbar-track {
  background:#dfe6eb;
}
html body .excel-preview-scroll::-webkit-scrollbar-thumb {
  background:#81909c;
  border:2px solid #dfe6eb;
  border-radius:999px;
}
html body .excel-preview-scroll::-webkit-scrollbar-thumb:hover {
  background:#65747f;
}

html body .excel-preview-panel[hidden],
html body #excelRefreshPreviewButton[hidden] {
  display:none !important;
}

@media (max-width:700px) {
  html body .excel-preview-sheet {
    padding:6px !important;
  }
  html body .excel-preview-scroll {
    max-height:58vh;
  }
}

/* =========================================================
   MODULE ACCESS STATES · role-gated panels stay discoverable
   ========================================================= */
html body .module-card.is-access-locked {
  opacity: .72;
  filter: saturate(.72);
  border-color: rgba(240,84,95,.18) !important;
  cursor: pointer;
}

html body .module-card.is-access-locked:hover {
  opacity: .88;
  filter: saturate(.9);
  border-color: rgba(240,84,95,.38) !important;
}

html body .module-card.is-access-locked .module-icon {
  color: #ff7d86 !important;
  background: rgba(240,84,95,.07) !important;
  border-color: rgba(240,84,95,.25) !important;
}

html body .module-card.is-access-locked .module-icon svg {
  stroke: #ff7d86 !important;
}

html body .module-status.module-status-denied {
  color: #ff8b94 !important;
  border-color: rgba(240,84,95,.34) !important;
  background: rgba(240,84,95,.075) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}

html body .module-status.module-status-denied::before {
  content: "";
  width: 6px;
  height: 6px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 50%;
  background: #f0545f;
  box-shadow: 0 0 9px rgba(240,84,95,.45);
}

html body .module-card.is-access-locked .module-footer {
  color: #a87f84 !important;
}

html body .modal-icon.is-denied {
  box-shadow: 0 0 0 1px rgba(240,84,95,.04), 0 0 28px rgba(240,84,95,.06);
}

/* =========================================================
   DISPATCHER ROLE HIERARCHY · 2026-10-14
   Compact operational chain for selected RES / district.
   ========================================================= */
#dispatcherView .dispatcher-hierarchy-panel {
  grid-column: 1 / -1;
  min-width: 0;
  min-height: 112px;
  padding: 14px 18px !important;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 18px;
  align-items: stretch;
  border-radius: 8px !important;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(228, 174, 63, .035), transparent 28%),
    #0b141e !important;
}

#dispatcherView .dispatcher-hierarchy-head {
  min-width: 0;
  padding-right: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-right: 1px solid rgba(115, 150, 173, .14);
}

#dispatcherView .dispatcher-hierarchy-head h3 {
  margin: 7px 0 0;
  color: #eef7fc;
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

#dispatcherView .dispatcher-hierarchy-count {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid rgba(227, 177, 67, .24);
  border-radius: 4px;
  color: #e6ba58;
  background: rgba(227, 177, 67, .055);
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .08em;
}

#dispatcherView .dispatcher-hierarchy-flow {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(270px, .9fr) 42px minmax(0, 1.5fr);
  align-items: center;
  gap: 12px;
}

#dispatcherView .dispatcher-hierarchy-main,
#dispatcherView .dispatcher-hierarchy-subordinates {
  min-width: 0;
}

#dispatcherView .dispatcher-hierarchy-main > span,
#dispatcherView .dispatcher-hierarchy-subordinates > span {
  display: block;
  margin-bottom: 7px;
  color: #718b9e;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
}

#dispatcherView .dispatcher-hierarchy-role {
  min-width: max-content;
  max-width: 100%;
  padding: 9px 11px;
  border: 1px solid rgba(68, 188, 226, .15);
  border-radius: 5px;
  background: rgba(5, 18, 29, .72);
  color: #e8f4fb;
  font-size: 9px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: inset 2px 0 0 rgba(64, 203, 239, .48);
}

#dispatcherView .dispatcher-hierarchy-role.is-main {
  min-width: 0;
  width: 100%;
  border-color: rgba(227, 177, 67, .20);
  box-shadow: inset 2px 0 0 rgba(227, 177, 67, .72);
}

#dispatcherView .dispatcher-hierarchy-role span {
  color: #7792a5;
  font-weight: 500;
  white-space: nowrap;
}

#dispatcherView .dispatcher-hierarchy-role.is-empty {
  color: #7890a0;
  box-shadow: inset 2px 0 0 rgba(120, 144, 160, .28);
}

#dispatcherView .dispatcher-hierarchy-link {
  height: 36px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

#dispatcherView .dispatcher-hierarchy-link::before {
  content: "";
  position: absolute;
  left: 1px;
  right: 1px;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, rgba(227,177,67,.38), rgba(67,200,239,.50));
}

#dispatcherView .dispatcher-hierarchy-link i {
  position: relative;
  z-index: 1;
  width: 4px;
  height: 4px;
  margin: 0 3px;
  border-radius: 50%;
  background: #46c8ef;
  box-shadow: 0 0 8px rgba(70, 200, 239, .45);
  animation: dispatcherHierarchyPulse 2.6s ease-in-out infinite;
}

#dispatcherView .dispatcher-hierarchy-link i:nth-child(2) { animation-delay: .35s; }
#dispatcherView .dispatcher-hierarchy-link i:nth-child(3) { animation-delay: .70s; }

@keyframes dispatcherHierarchyPulse {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50% { opacity: 1; transform: scale(1.15); }
}

#dispatcherView .dispatcher-hierarchy-subordinate-list {
  min-width: 0;
  display: flex;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(72, 177, 211, .34) transparent;
}

#dispatcherView .dispatcher-hierarchy-subordinate-list::-webkit-scrollbar {
  height: 4px;
}

#dispatcherView .dispatcher-hierarchy-subordinate-list::-webkit-scrollbar-thumb {
  background: rgba(72, 177, 211, .34);
  border-radius: 999px;
}

#dispatcherView .dispatcher-hierarchy-empty {
  padding: 9px 11px;
  color: #6e8696;
  font-size: 9px;
  border: 1px dashed rgba(112, 143, 163, .16);
  border-radius: 5px;
}

/* Admin hierarchy builder */
.dispatcher-hierarchy-management .access-heading {
  align-items: end;
}

.dispatcher-hierarchy-filter {
  min-width: min(360px, 36vw);
}

.dispatcher-hierarchy-config-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dispatcher-hierarchy-config-card {
  min-width: 0;
}

.dispatcher-hierarchy-admin-main {
  margin-top: 10px;
  padding: 11px 12px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(227, 177, 67, .14);
  border-radius: 5px;
  background: rgba(227, 177, 67, .025);
}

.dispatcher-hierarchy-admin-main > span {
  color: #758ea0;
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .10em;
  text-transform: uppercase;
}

.dispatcher-hierarchy-admin-main strong {
  color: #eef7fc;
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.dispatcher-hierarchy-admin-sources {
  max-height: 94px;
  overflow: hidden;
}

.dispatcher-hierarchy-more {
  color: #e1b34e !important;
  border-color: rgba(225, 179, 78, .20) !important;
}

.dispatcher-hierarchy-editor-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 4px;
}

@media (max-width: 1180px) {
  #dispatcherView .dispatcher-hierarchy-panel {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  #dispatcherView .dispatcher-hierarchy-head {
    padding-right: 0;
    padding-bottom: 10px;
    border-right: 0;
    border-bottom: 1px solid rgba(115, 150, 173, .14);
  }

  #dispatcherView .dispatcher-hierarchy-flow {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  #dispatcherView .dispatcher-hierarchy-link {
    display: none;
  }

  .dispatcher-hierarchy-config-list {
    grid-template-columns: 1fr;
  }

  .dispatcher-hierarchy-filter {
    min-width: 0;
    width: 100%;
  }
}

@media (max-width: 760px) {
  #dispatcherView .dispatcher-hierarchy-panel {
    min-height: 0;
    padding: 11px !important;
  }

  #dispatcherView .dispatcher-hierarchy-head h3 {
    font-size: 13px;
  }

  #dispatcherView .dispatcher-hierarchy-role,
  #dispatcherView .dispatcher-hierarchy-empty {
    padding: 8px 9px;
    font-size: 8px;
  }

  #dispatcherView .dispatcher-hierarchy-role span {
    white-space: normal;
  }
}

@media (prefers-reduced-motion: reduce) {
  #dispatcherView .dispatcher-hierarchy-link i {
    animation: none !important;
  }
}

/* =========================================================
   DISPATCHER HIERARCHY V2 · personnel roster + vertical table
   ========================================================= */
#dispatcherView .dispatcher-hierarchy-panel {
  min-width: 0;
  overflow: hidden;
}

#dispatcherView .dispatcher-hierarchy-panel .dispatcher-panel-head {
  margin: 0;
}

#dispatcherView .dispatcher-hierarchy-count {
  flex: 0 0 auto;
  padding: 6px 8px;
  border: 1px solid rgba(227,177,67,.24);
  border-radius: 4px;
  color: #e6ba58;
  background: rgba(227,177,67,.055);
  font-family: var(--mono);
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .08em;
}

#dispatcherView .dispatcher-hierarchy-source-meta {
  margin-top: 8px;
}

#dispatcherView .dispatcher-hierarchy-main-card {
  margin-top: 10px;
  padding: 10px 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  border: 1px solid rgba(227,177,67,.16);
  border-left: 2px solid rgba(227,177,67,.75);
  border-radius: 5px;
  background: rgba(227,177,67,.025);
}

#dispatcherView .dispatcher-hierarchy-main-card > span {
  color: #718b9e;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .12em;
}

#dispatcherView .dispatcher-hierarchy-main-card strong {
  color: #eef7fc;
  font-size: 10px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#dispatcherView .dispatcher-hierarchy-main-card small {
  color: #61d6f3;
  font-size: 9px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

#dispatcherView .dispatcher-hierarchy-main-card small.is-missing {
  color: #718796;
}

#dispatcherView .dispatcher-hierarchy-table-wrap {
  min-width: 0;
  max-height: 178px;
  margin-top: 10px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(77,124,153,.13);
  border-radius: 5px;
  scrollbar-width: thin;
  scrollbar-color: rgba(72,177,211,.34) transparent;
}

#dispatcherView .dispatcher-hierarchy-table-wrap::-webkit-scrollbar { width: 5px; }
#dispatcherView .dispatcher-hierarchy-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(72,177,211,.34);
  border-radius: 999px;
}

#dispatcherView .dispatcher-hierarchy-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  color: #dceaf2;
  font-size: 8px;
}

#dispatcherView .dispatcher-hierarchy-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 7px 9px;
  text-align: left;
  color: #7e9caf;
  background: #0b151f;
  border-bottom: 1px solid rgba(227,177,67,.18);
  font-family: var(--mono);
  font-size: 6.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#dispatcherView .dispatcher-hierarchy-table th:first-child { width: 56%; }
#dispatcherView .dispatcher-hierarchy-table th:last-child { width: 44%; }

#dispatcherView .dispatcher-hierarchy-table td {
  padding: 7px 9px;
  vertical-align: top;
  border-bottom: 1px solid rgba(88,126,149,.10);
  line-height: 1.3;
  overflow-wrap: anywhere;
  word-break: normal;
}

#dispatcherView .dispatcher-hierarchy-table tr:last-child td { border-bottom: 0; }
#dispatcherView .dispatcher-hierarchy-table td:last-child { color: #72d9f3; }
#dispatcherView .dispatcher-hierarchy-table td.is-missing { color: #667f90; }
#dispatcherView .dispatcher-hierarchy-table td.is-empty { color: #667f90; text-align: center; }

/* The values are already present in the legend and centre; external pills can escape compact panels. */
#dispatcherView .dispatcher-donut-marker {
  display: none !important;
}

#dispatcherView .dispatcher-workorders-donut,
#dispatcherView .dispatcher-requests-donut {
  overflow: hidden !important;
}

/* Admin: MAX personnel source */
.dispatcher-personnel-source-card {
  margin: 14px 0 12px;
  padding: 14px;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, .75fr) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid rgba(62,196,229,.16);
  border-left: 2px solid rgba(62,196,229,.62);
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(52,187,224,.035), transparent 40%), #08131d;
}

.dispatcher-personnel-source-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.dispatcher-personnel-source-copy strong {
  color: #edf7fc;
  font-size: 12px;
}

.dispatcher-personnel-source-copy small {
  color: #7894a7;
  font-size: 9px;
  line-height: 1.4;
}

.dispatcher-personnel-source-copy small.is-warning { color: #d2a652; }
.dispatcher-personnel-chat-field { margin: 0 !important; }

@media (min-width: 1181px) {
  #dispatcherView .dispatcher-outages-panel {
    grid-row: span 3 !important;
    min-height: 858px !important;
  }

  #dispatcherView .dispatcher-hierarchy-panel {
    grid-column: 2 !important;
    min-height: 285px !important;
    height: 285px !important;
    padding: 16px 18px !important;
    border-radius: 8px !important;
    background: #0b141e !important;
  }

  #dispatcherView .dispatcher-workorders-panel {
    min-height: 245px !important;
    height: 245px !important;
  }
}

@media (max-width: 1180px) {
  #dispatcherView .dispatcher-hierarchy-panel {
    min-height: 0 !important;
    height: auto !important;
    padding: 14px !important;
  }

  #dispatcherView .dispatcher-hierarchy-table-wrap {
    max-height: 250px;
  }

  .dispatcher-personnel-source-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  #dispatcherView .dispatcher-hierarchy-table {
    font-size: 7.5px;
  }

  #dispatcherView .dispatcher-hierarchy-table th:first-child { width: 54%; }
  #dispatcherView .dispatcher-hierarchy-table th:last-child { width: 46%; }
  #dispatcherView .dispatcher-hierarchy-table th,
  #dispatcherView .dispatcher-hierarchy-table td { padding: 7px; }
}

/* =========================================================
   DISPATCHER DUTY PERSONNEL · VERTICAL TILE + SAFE CHART FIT
   ========================================================= */
#dispatcherView .dispatcher-hierarchy-panel {
  min-width: 0;
  width: 100%;
  padding: 16px 18px !important;
  display: block;
  border-radius: 8px !important;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(227,177,67,.025), transparent 34%),
    #0b141e !important;
}

#dispatcherView .dispatcher-hierarchy-panel .dispatcher-panel-head {
  margin-bottom: 10px;
}

#dispatcherView .dispatcher-hierarchy-panel .dispatcher-panel-head h2 {
  max-width: 100%;
  overflow-wrap: anywhere;
}

#dispatcherView .dispatcher-hierarchy-source-meta {
  min-height: 34px !important;
  margin: 0 0 10px;
  padding: 8px 10px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  border: 1px solid rgba(74,164,197,.12);
  border-radius: 5px;
  background: rgba(4,16,26,.44);
  color: #7f9aae;
  font-family: var(--mono);
  font-size: 7.5px;
  line-height: 1.35;
}

#dispatcherView .dispatcher-hierarchy-source-meta.is-warning {
  color: #d9ad57;
  border-color: rgba(227,177,67,.18);
}

#dispatcherView .dispatcher-hierarchy-main-card {
  min-width: 0;
  margin-bottom: 10px;
  padding: 11px 12px;
  display: grid;
  gap: 5px;
  border: 1px solid rgba(227,177,67,.20);
  border-left: 2px solid rgba(227,177,67,.78);
  border-radius: 5px;
  background: rgba(227,177,67,.035);
}

#dispatcherView .dispatcher-hierarchy-main-card > span {
  color: #7f94a4;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .11em;
}

#dispatcherView .dispatcher-hierarchy-main-card strong {
  min-width: 0;
  color: #f0f7fb;
  font-size: 10px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#dispatcherView .dispatcher-hierarchy-main-card small {
  color: #cbd9e2;
  font-size: 9px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#dispatcherView .dispatcher-hierarchy-main-card small.is-missing {
  color: #748b9b;
}

#dispatcherView .dispatcher-hierarchy-table-wrap {
  width: 100%;
  min-width: 0;
  max-height: 360px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(74,164,197,.12);
  border-radius: 5px;
  background: rgba(3,13,22,.46);
  scrollbar-width: thin;
  scrollbar-color: rgba(69,180,214,.34) transparent;
}

#dispatcherView .dispatcher-hierarchy-table-wrap::-webkit-scrollbar {
  width: 6px;
}

#dispatcherView .dispatcher-hierarchy-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(69,180,214,.34);
  border-radius: 999px;
}

#dispatcherView .dispatcher-hierarchy-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

#dispatcherView .dispatcher-hierarchy-table th,
#dispatcherView .dispatcher-hierarchy-table td {
  min-width: 0;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(92,130,154,.10);
  overflow-wrap: anywhere;
  word-break: normal;
}

#dispatcherView .dispatcher-hierarchy-table th:first-child,
#dispatcherView .dispatcher-hierarchy-table td:first-child {
  width: 54%;
}

#dispatcherView .dispatcher-hierarchy-table th:last-child,
#dispatcherView .dispatcher-hierarchy-table td:last-child {
  width: 46%;
}

#dispatcherView .dispatcher-hierarchy-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  color: #7893a6;
  background: #09141f;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}

#dispatcherView .dispatcher-hierarchy-table td {
  color: #e5f0f6;
  font-size: 9px;
  line-height: 1.35;
}

#dispatcherView .dispatcher-hierarchy-table td:last-child {
  color: #ffffff;
  font-weight: 650;
}

#dispatcherView .dispatcher-hierarchy-table td.is-missing,
#dispatcherView .dispatcher-hierarchy-table td.is-empty {
  color: #6f8797;
  font-weight: 500;
}

/* Duty-personnel MAX source in admin. */
.dispatcher-personnel-source-card {
  margin: 0 0 14px;
  padding: 13px 14px;
  display: grid;
  grid-template-columns: minmax(260px,1.2fr) minmax(260px,.85fr) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid rgba(67,184,219,.13);
  border-left: 2px solid rgba(67,184,219,.55);
  border-radius: 5px;
  background: rgba(4,15,24,.52);
}

.dispatcher-personnel-source-copy {
  min-width: 0;
  display: grid;
  gap: 5px;
}

.dispatcher-personnel-source-copy strong {
  color: #eef7fc;
  font-size: 11px;
}

.dispatcher-personnel-source-copy small {
  color: #7991a2;
  font-size: 8px;
  line-height: 1.4;
}

.dispatcher-personnel-source-copy small.is-warning {
  color: #d8ab56;
}

.dispatcher-personnel-chat-field {
  margin: 0 !important;
}

/* The right dispatcher tiles must grow with their content instead of clipping it. */
@media (min-width: 1181px) {
  #dispatcherView .dispatcher-grid > .dispatcher-panel:first-child {
    height: auto !important;
    min-height: 340px !important;
    overflow: hidden !important;
  }

  #dispatcherView .dispatcher-workorders-panel {
    height: auto !important;
    min-height: 350px !important;
    overflow: hidden !important;
  }

  #dispatcherView .dispatcher-hierarchy-panel {
    grid-column: 2 !important;
    min-height: 310px !important;
    height: auto !important;
  }
}

/* Keep donut value markers inside the instrument panel. */
#dispatcherView .dispatcher-workorders-donut,
#dispatcherView .dispatcher-requests-donut {
  overflow: visible !important;
  isolation: isolate;
}

#dispatcherView .dispatcher-donut-marker {
  min-width: 24px;
  min-height: 21px;
  padding: 0 6px;
  font-size: 9px;
  white-space: nowrap;
}

#dispatcherView .dispatcher-workorders-legend-item {
  min-width: 0;
  overflow: hidden;
}

#dispatcherView .dispatcher-workorders-legend-item span {
  min-width: 0;
  overflow-wrap: anywhere;
}

#dispatcherView .dispatcher-workorders-legend-item strong {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  #dispatcherView .dispatcher-hierarchy-panel {
    grid-column: auto !important;
  }

  .dispatcher-personnel-source-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

@media (max-width: 760px) {
  #dispatcherView .dispatcher-hierarchy-table-wrap {
    max-height: 320px;
  }

  #dispatcherView .dispatcher-hierarchy-table th,
  #dispatcherView .dispatcher-hierarchy-table td {
    padding: 8px;
  }

  #dispatcherView .dispatcher-hierarchy-table th:first-child,
  #dispatcherView .dispatcher-hierarchy-table td:first-child {
    width: 50%;
  }

  #dispatcherView .dispatcher-hierarchy-table th:last-child,
  #dispatcherView .dispatcher-hierarchy-table td:last-child {
    width: 50%;
  }
}

/* =========================================================
   DISPATCHER OUTAGE DETAILS · INTERNAL WHEEL SCROLL
   2026-10-14
   ========================================================= */
#dispatcherView .dispatcher-outage-details[open] .dispatcher-outage-details-body {
  max-height: min(54vh, 560px);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
  padding-right: 8px;
}

#dispatcherView .dispatcher-outage-details[open] .dispatcher-outage-details-body::-webkit-scrollbar {
  width: 7px;
}

#dispatcherView .dispatcher-outage-details[open] .dispatcher-outage-details-body::-webkit-scrollbar-track {
  background: rgba(3, 12, 20, .55);
  border-radius: 999px;
}

#dispatcherView .dispatcher-outage-details[open] .dispatcher-outage-details-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(69, 200, 244, .62), rgba(51, 122, 154, .58));
  border: 1px solid rgba(120, 220, 250, .12);
  border-radius: 999px;
}

#dispatcherView .dispatcher-outage-details[open] .dispatcher-outage-details-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(83, 211, 250, .82), rgba(58, 145, 179, .72));
}

@media (min-width: 1181px) {
  #dispatcherView .dispatcher-outage-details[open] .dispatcher-outage-details-body {
    max-height: 500px;
  }
}

@media (max-width: 760px) {
  #dispatcherView .dispatcher-outage-details[open] .dispatcher-outage-details-body {
    max-height: 58vh;
    padding-right: 5px;
  }
}


/* Temporary executive monitoring cleanup — keep panels in DOM/code, hide in all layouts. */
#executiveView .is-temporarily-hidden {
  display: none !important;
}


/* Temporary executive monitoring focus: only Requests + NDR analytics on desktop.
   Operational background remains in DOM and can be restored by removing is-temporarily-hidden. */
@media (min-width: 1181px) {
  #executiveView .executive-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    align-items: stretch;
  }

  #executiveView .executive-chart-panel {
    grid-column: span 6 !important;
    min-height: 300px !important;
    height: 300px !important;
    align-self: stretch;
  }

  #executiveView .executive-chart-panel .executive-chart-layout {
    min-height: 205px;
    grid-template-columns: minmax(170px, 220px) minmax(0, 1fr);
    align-items: center;
  }

  #executiveView .executive-table-panel,
  #executiveView .executive-map-panel {
    grid-column: 1 / -1 !important;
  }
}

/* =========================================================
   DONUT · значения на кольце (без выносок и наложений)
   ========================================================= */
.donut-ring-label {
  position: absolute;
  z-index: 3;
  min-width: 22px;
  height: 20px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--label-color, #45c8f4) 70%, #ffffff 30%);
  background: rgba(5, 12, 22, .88);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
  color: #ffffff;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

@media (max-width: 760px) {
  .donut-ring-label {
    min-width: 18px;
    height: 17px;
    padding: 0 4px;
    font-size: 9.5px;
  }
}

/* =========================================================
   EXECUTIVE · в шапке только отключения и обращения
   ========================================================= */
#executiveView .executive-hero-stats {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

@media (min-width: 1181px) {
  #executiveView .executive-hero {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 520px) !important;
  }
}

/* =========================================================
   Мгновенный отклик карточек главного экрана
   ========================================================= */
.module-card {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.module-card:active {
  transform: scale(.985) !important;
  transition-duration: .08s !important;
}

.view-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: grid;
  place-items: center;
  gap: 14px;
  align-content: center;
  background: rgba(1, 8, 17, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #dbe8f4;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  animation: viewLoadingIn .18s ease;
}

.view-loading-overlay[hidden] {
  display: none;
}

@keyframes viewLoadingIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* =========================================================
   Подтверждение выхода из приложения
   ========================================================= */
.exit-confirm-backdrop {
  z-index: 260;
}

.exit-confirm-card {
  text-align: center;
}

.exit-confirm-card .modal-icon {
  margin-inline: auto;
}

.exit-confirm-card h2 {
  margin: 8px 0 22px;
}

.exit-confirm-card .secondary-action {
  width: 100%;
  justify-content: center;
}

#executiveView .executive-hero-stats .executive-delta {
  width: auto !important;
  max-width: 100%;
  white-space: nowrap;
  justify-self: start;
}

/* =========================================================
   EXECUTIVE MAP · реальные контуры районов
   ========================================================= */
html body .executive-map-sea {
  fill: #0a1c29;
}

html body .executive-map-neighbors {
  fill: #0c1218;
  stroke: rgba(122,150,166,.16);
  stroke-width: .8;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

html body .executive-map-water,
html body .executive-map-ladoga {
  fill: #0a1c29;
  stroke: rgba(60,195,232,.16);
  stroke-width: .9;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

html body .executive-map-context-label {
  fill: rgba(122,150,166,.30);
  font: 600 9px var(--mono);
  letter-spacing: .16em;
  pointer-events: none;
}

html body .executive-map-zone .executive-map-shape {
  fill: #0f1c26;
  stroke-linejoin: round;
}

html body .executive-map-zone.is-enabled.is-clear:hover .executive-map-shape {
  fill: #13283a;
}

html body .executive-map-label {
  pointer-events: none;
}

html body .executive-map-leader {
  fill: none;
  stroke: rgba(217,228,236,.45);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

html body .executive-map-leader-dot {
  fill: #d9e4ec;
}

@media (min-width: 701px) {
  html body .executive-map-svg {
    min-height: 0;
    max-height: none;
  }
}

html body .executive-map-footer a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(122,150,166,.4);
}

/* =========================================================
   ЦЕНТР УПРАВЛЕНИЯ · выгрузка отключений в Excel
   ========================================================= */
html body .outages-export-panel {
  margin-top: 16px;
}

html body .outages-export-body {
  display: grid;
  gap: 14px;
}

html body .outages-export-copy {
  margin: 0;
  max-width: 900px;
  color: #a9bccb;
  font-size: 13px;
  line-height: 1.55;
}

html body .outages-export-sheets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .outages-export-sheets li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,.025);
  color: #dbe8f4;
  font: 700 11px var(--mono, ui-monospace, monospace);
  letter-spacing: .04em;
}

html body .outages-export-sheets i {
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: #d6a446;
}

html body .outages-export-sheets i.is-emergency { background: #e0565b; }
html body .outages-export-sheets i.is-planned { background: #4f8fca; }

html body .outages-export-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

html body .outages-export-status {
  color: #7f9ab0;
  font-size: 12px;
}

html body .outages-export-status.is-error {
  color: #ff8a8f;
}

html body #outagesExportButton.is-loading {
  opacity: .7;
  cursor: progress;
}

@media (max-width: 620px) {
  html body .outages-export-footer {
    display: grid;
  }

  html body #outagesExportButton {
    width: 100%;
    justify-content: center;
  }
}

/* =========================================================
   ЗАЯВКИ · переход из панели и отдельное окно
   ========================================================= */
html body .requests-open-panel {
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

html body .requests-open-panel:hover,
html body .requests-open-panel:focus-visible {
  border-color: rgba(60,195,232,.45) !important;
  box-shadow: 0 0 0 1px rgba(60,195,232,.18);
  outline: none;
}

html body .requests-open-panel:active {
  transform: scale(.995);
}

html body .requests-open-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

html body .requests-open-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid rgba(60,195,232,.32);
  border-radius: 4px;
  color: #7fd8f2;
  font: 700 10px var(--mono, ui-monospace, monospace);
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

html body .requests-open-link b {
  font-size: 12px;
  transition: transform .2s ease;
}

html body .requests-open-panel:hover .requests-open-link b {
  transform: translateX(3px);
}

#executiveView .requests-open-panel .executive-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

/* Окно заявок */
html body .requests-shell {
  display: grid;
  gap: 14px;
  padding-bottom: 32px;
}

html body .requests-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 22px 24px !important;
}

html body .requests-hero h1 {
  margin: 8px 0 6px;
}

html body .requests-shift-line {
  margin: 0;
  color: #93abbd;
  font-size: 12px;
}

html body .requests-hero-total {
  display: grid;
  justify-items: end;
  gap: 2px;
}

html body .requests-hero-total strong {
  color: #fff;
  font: 800 40px/1 var(--mono, ui-monospace, monospace);
}

html body .requests-hero-total span {
  color: #7f9ab0;
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

html body .requests-notice {
  padding: 10px 14px;
  border: 1px solid rgba(240,84,95,.4);
  border-radius: 5px;
  background: rgba(240,84,95,.08);
  color: #ffb3b7;
  font-size: 12px;
}

html body .requests-notice.is-warning {
  border-color: rgba(214,164,70,.45);
  background: rgba(214,164,70,.08);
  color: #f1d39a;
}

html body .requests-toolbar {
  display: grid;
  gap: 12px;
  padding: 12px !important;
  background: rgba(8,14,21,.94) !important;
  backdrop-filter: blur(10px);
}

html body .requests-status-filters {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

html body .requests-status-filters::-webkit-scrollbar {
  display: none;
}

html body .requests-filter {
  --chip: #9fb3c3;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,.02);
  color: #c6d5e1;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
}

html body .requests-filter i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--chip);
}

html body .requests-filter b {
  color: #fff;
  font: 800 12px var(--mono, ui-monospace, monospace);
}

html body .requests-filter.is-active {
  border-color: var(--chip);
  background: color-mix(in srgb, var(--chip) 16%, transparent);
  color: #fff;
}

html body .requests-filter:disabled {
  opacity: .4;
  cursor: default;
}

html body .requests-filter.is-all { --chip: #d6a446; }
html body .requests-filter.is-review,
html body .request-card.is-review { --chip: #38bdf8; }
html body .requests-filter.is-approved,
html body .request-card.is-approved { --chip: #22c55e; }
html body .requests-filter.is-open,
html body .request-card.is-open { --chip: #8b5cf6; }
html body .requests-filter.is-closed,
html body .request-card.is-closed { --chip: #f59e0b; }
html body .requests-filter.is-acknowledged,
html body .request-card.is-acknowledged { --chip: #f43f5e; }
html body .requests-filter.is-ending { --chip: #fb7185; }
html body .request-card.is-other { --chip: #9fb3c3; }

html body .requests-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0,0,0,.25);
}

html body .requests-search svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #7f9ab0;
  stroke-width: 2;
  flex: 0 0 auto;
}

html body .requests-search input {
  width: 100%;
  min-height: 38px;
  border: 0;
  outline: none;
  background: transparent;
  color: #fff;
  font-size: 14px;
}

html body .requests-result-line {
  color: #7f9ab0;
  font: 600 11px var(--mono, ui-monospace, monospace);
  letter-spacing: .04em;
}

html body .requests-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 12px;
  align-items: start;
}

html body .requests-empty {
  grid-column: 1 / -1;
  padding: 28px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  color: #7f9ab0;
  text-align: center;
}

html body .request-card {
  --chip: #9fb3c3;
  position: relative;
  display: grid;
  gap: 9px;
  min-width: 0;
  padding: 14px 14px 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--chip);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
}

html body .request-card.is-ending {
  box-shadow: inset 0 0 0 1px rgba(251,113,133,.22);
}

html body .request-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

html body .request-number {
  color: #fff;
  font: 800 15px var(--mono, ui-monospace, monospace);
}

html body .request-status {
  padding: 3px 8px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--chip) 18%, transparent);
  color: color-mix(in srgb, var(--chip) 70%, #ffffff 30%);
  font-size: 11px;
  font-weight: 700;
}

html body .request-ending {
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(251,113,133,.14);
  color: #fda4af;
  font-size: 11px;
  font-weight: 700;
}

html body .request-object {
  color: #f2f7fb;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

html body .request-equipment {
  color: #b9cad7;
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

html body .request-times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

html body .request-times div {
  padding: 6px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,.22);
}

html body .request-times dt {
  color: #7f9ab0;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body .request-times dd {
  margin: 2px 0 0;
  color: #fff;
  font: 700 12px var(--mono, ui-monospace, monospace);
}

html body .request-label {
  display: block;
  margin-bottom: 4px;
  color: #7f9ab0;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body .request-works {
  color: #d3e0ea;
  font-size: 12.5px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

html body .request-works p,
html body .request-works ul {
  margin: 0;
}

html body .request-works ul {
  padding-left: 16px;
}

html body .request-works.is-collapsed p,
html body .request-works.is-collapsed ul {
  max-height: 5.8em;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 60%, transparent);
  mask-image: linear-gradient(#000 60%, transparent);
}

html body .request-works-toggle {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: #7fd8f2;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

html body .request-sources {
  display: grid;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  line-height: 1.35;
}

html body .request-source-main {
  color: #d6a446;
  font-weight: 700;
}

html body .request-source-also {
  color: #8ea5b6;
}

html body .requests-more-button {
  justify-self: center;
  min-width: 240px;
}

@media (max-width: 620px) {
  html body .requests-hero {
    padding: 16px !important;
  }

  html body .requests-hero-total strong {
    font-size: 30px;
  }

  html body .requests-list {
    grid-template-columns: 1fr;
  }

  html body .requests-open-head .dispatcher-live-badge {
    display: none;
  }
}

html body .request-number small {
  margin-right: 1px;
  font: 700 13px var(--font, system-ui, sans-serif);
  color: #9fb3c3;
}

/* =========================================================
   Загрузчик в стиле энергосети: опора ЛЭП, ток по проводам, 50 Гц
   ========================================================= */
html body .view-loading-overlay {
  gap: 10px;
}

html body .grid-loader {
  width: 170px;
  height: auto;
  overflow: visible;
}

html body .grid-loader .gl-wires path {
  fill: none;
  stroke: rgba(122,166,190,.35);
  stroke-width: 1.4;
}

html body .grid-loader .gl-current path {
  fill: none;
  stroke: #45c8f4;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 14 46;
  filter: drop-shadow(0 0 4px rgba(69,200,244,.9));
  animation: gridLoaderCurrent 1.1s linear infinite;
}

html body .grid-loader .gl-current .gl-current-2 {
  stroke: #d6a446;
  filter: drop-shadow(0 0 4px rgba(214,164,70,.85));
  animation-duration: 1.4s;
  animation-delay: -.5s;
}

html body .grid-loader .gl-tower path {
  fill: none;
  stroke: #9fb6c6;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html body .grid-loader .gl-insulators circle {
  fill: #0a1018;
  stroke: #d6a446;
  stroke-width: 1.4;
  animation: gridLoaderSpark 1.1s ease-in-out infinite;
}

html body .grid-loader .gl-insulators circle:nth-child(2) { animation-delay: .27s; }
html body .grid-loader .gl-insulators circle:nth-child(3) { animation-delay: .55s; }
html body .grid-loader .gl-insulators circle:nth-child(4) { animation-delay: .82s; }

html body .grid-loader .gl-wave {
  fill: none;
  stroke: #45c8f4;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: .8;
  animation: gridLoaderWave .8s linear infinite;
}

html body .grid-loader-caption {
  color: rgba(127,154,176,.75);
  font: 700 9px var(--mono, ui-monospace, monospace);
  letter-spacing: .22em;
}

@keyframes gridLoaderCurrent {
  to { stroke-dashoffset: -60; }
}

@keyframes gridLoaderWave {
  to { transform: translateX(-40px); }
}

@keyframes gridLoaderSpark {
  0%, 100% { fill: #0a1018; }
  50% { fill: #d6a446; filter: drop-shadow(0 0 4px rgba(214,164,70,.9)); }
}

@media (prefers-reduced-motion: reduce) {
  html body .grid-loader * {
    animation: none !important;
  }
}

/* =========================================================
   ЭНЕРГЕТИЧЕСКИЕ АНИМАЦИИ (ПК и мобильная версия)
   ========================================================= */

/* Токовое кольцо вокруг круговых диаграмм */
html body .donut-orbit {
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 1px dashed rgba(69,200,244,.22);
  pointer-events: none;
  z-index: 0;
  animation: donutOrbit 14s linear infinite;
}

html body .donut-orbit::before {
  content: "";
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #45c8f4;
  box-shadow: 0 0 8px 2px rgba(69,200,244,.75);
}

html body .donut-orbit::after {
  content: "";
  position: absolute;
  bottom: -2.5px;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #d6a446;
  box-shadow: 0 0 7px 2px rgba(214,164,70,.7);
}

@keyframes donutOrbit {
  to { transform: rotate(360deg); }
}

/* Значки модулей: «прорисовка» и мягкое свечение */
html body #homeView.is-active .module-icon svg path {
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: moduleIconDraw 1.4s cubic-bezier(.4,0,.2,1) .15s forwards;
}

html body .module-icon {
  animation: moduleIconGlow 4.8s ease-in-out infinite;
}

html body .module-card:nth-child(2) .module-icon { animation-delay: -1.2s; }
html body .module-card:nth-child(3) .module-icon { animation-delay: -2.4s; }
html body .module-card:nth-child(4) .module-icon { animation-delay: -3.6s; }

@keyframes moduleIconDraw {
  to { stroke-dashoffset: 0; }
}

@keyframes moduleIconGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(214,164,70,0); }
  50% { box-shadow: 0 0 16px 0 rgba(214,164,70,.22); }
}

/* Карточки заявок: каскадное появление, пульс у заканчивающихся */
html body .request-card {
  animation: requestCardIn .42s cubic-bezier(.16,.84,.32,1) both;
  animation-delay: calc(min(var(--i, 0), 24) * 22ms);
}

html body .request-card.is-ending {
  animation:
    requestCardIn .42s cubic-bezier(.16,.84,.32,1) both,
    requestEndingPulse 2.4s ease-in-out 1s infinite;
  animation-delay: calc(min(var(--i, 0), 24) * 22ms), 1s;
}

@keyframes requestCardIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes requestEndingPulse {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(251,113,133,.18); }
  50% { box-shadow: inset 0 0 0 1px rgba(251,113,133,.5), 0 0 14px rgba(251,113,133,.14); }
}

/* Выключение анимаций */
@media (prefers-reduced-motion: reduce) {
  html body .donut-orbit { display: none; }
  html body .module-icon,
  html body .request-card { animation: none !important; }
  html body #homeView.is-active .module-icon svg path { animation: none !important; stroke-dashoffset: 0; }
}

body.low-bandwidth .donut-orbit { display: none !important; }
body.low-bandwidth .module-icon,
body.low-bandwidth .request-card { animation: none !important; }

/* =========================================================
   ЗАЯВКИ · одинаковые карточки на ПК
   ========================================================= */
html body .request-times div.is-empty dd {
  color: #5f7486;
}

@media (min-width: 621px) {
  html body .requests-list {
    align-items: stretch;
  }

  html body .request-card {
    display: flex;
    flex-direction: column;
    gap: 9px;
  }

  html body .request-card-head {
    flex-wrap: nowrap;
    min-height: 24px;
    white-space: nowrap;
  }

  html body .request-ending {
    overflow: hidden;
    text-overflow: ellipsis;
  }

  html body .request-object,
  html body .request-equipment {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
  }

  html body .request-object { min-height: calc(2 * 1.3em); }
  html body .request-equipment { min-height: calc(2 * 1.35em); }

  /* Блок работ одной высоты: короткий текст получает тот же размер,
     что и свёрнутый длинный (подпись + 4 строки + кнопка). */
  html body .request-works {
    min-height: calc(14px + 5.8em + 22px);
  }

  html body .request-works.is-collapsed p,
  html body .request-works.is-collapsed ul {
    max-height: 5.8em;
  }

  html body .request-works:not(.is-collapsible) p,
  html body .request-works:not(.is-collapsible) ul {
    max-height: 5.8em;
    overflow: hidden;
  }

  html body .request-sources {
    margin-top: auto;
  }

  html body .request-source-main {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body .request-source-also {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: calc(2 * 1.35em);
  }
}

/* =========================================================
   НДР · ДАШБОРД И НАРЯДЫ
   ========================================================= */
html body .workorders-open-panel {
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease;
}

html body .workorders-open-panel:hover,
html body .workorders-open-panel:focus-visible {
  border-color: rgba(60,195,232,.45) !important;
  box-shadow: 0 0 0 1px rgba(60,195,232,.18);
  outline: none;
}

html body .workorders-open-panel:active { transform: scale(.995); }
html body .workorders-open-panel:hover .requests-open-link b { transform: translateX(3px); }

#executiveView .workorders-open-panel .executive-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

html body .wo-shell {
  display: grid;
  gap: 14px;
  padding-bottom: 32px;
}

/* Шапка с индикатором % начатых работ */
html body .wo-hero-gauge {
  position: relative;
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
}

html body .wo-hero-gauge svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

html body .wo-gauge-track {
  fill: none;
  stroke: rgba(255,255,255,.07);
  stroke-width: 9;
}

html body .wo-gauge-value {
  fill: none;
  stroke: #22c55e;
  stroke-width: 9;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(.16,.84,.32,1), stroke .3s ease;
  filter: drop-shadow(0 0 6px currentColor);
}

html body .wo-gauge-value.is-low { stroke: #f59e0b; color: rgba(245,158,11,.5); }
html body .wo-gauge-value.is-mid { stroke: #facc15; color: rgba(250,204,21,.45); }
html body .wo-gauge-value.is-high { stroke: #22c55e; color: rgba(34,197,94,.45); }

html body .wo-gauge-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
}

html body .wo-gauge-center strong {
  color: #fff;
  font: 800 22px/1 var(--mono, ui-monospace, monospace);
}

html body .wo-gauge-center span {
  margin-top: 4px;
  color: #7f9ab0;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* Вкладки */
html body .wo-tabs {
  display: flex;
  gap: 6px;
  padding: 6px !important;
}

html body .wo-tab {
  flex: 1 1 0;
  min-height: 40px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: #9fb3c3;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

html body .wo-tab b {
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(255,255,255,.06);
  color: #fff;
  font: 800 11px var(--mono, ui-monospace, monospace);
}

html body .wo-tab.is-active {
  border-color: rgba(214,164,70,.55);
  background: rgba(214,164,70,.1);
  color: #fff;
}

html body .wo-dashboard {
  display: grid;
  gap: 14px;
}

html body .wo-dashboard[hidden],
html body .wo-list-view[hidden] {
  display: none;
}

html body .wo-list-view {
  display: grid;
  gap: 12px;
}

/* KPI */
html body .wo-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

html body .wo-kpi {
  --kpi: #45c8f4;
  position: relative;
  display: grid;
  gap: 6px;
  min-width: 0;
  padding: 14px 14px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--kpi);
  border-radius: 6px;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
  animation: requestCardIn .5s cubic-bezier(.16,.84,.32,1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

html body .wo-kpi span {
  color: #9fb3c3;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

html body .wo-kpi strong {
  color: #fff;
  font: 800 28px/1 var(--mono, ui-monospace, monospace);
}

html body .wo-kpi small {
  color: #6f879a;
  font-size: 11px;
}

html body .wo-kpi.is-total { --kpi: #d6a446; }
html body .wo-kpi.is-started { --kpi: #22c55e; }
html body .wo-kpi.is-checked { --kpi: #38bdf8; }
html body .wo-kpi.is-notChecked { --kpi: #a78bfa; }
html body .wo-kpi.is-notAdmitted { --kpi: #f43f5e; }
html body .wo-kpi.is-other { --kpi: #64748b; }
html body .wo-kpi.is-admission { --kpi: #45c8f4; }
html body .wo-kpi.is-percent.is-low { --kpi: #f59e0b; }
html body .wo-kpi.is-percent.is-mid { --kpi: #facc15; }
html body .wo-kpi.is-percent.is-high { --kpi: #22c55e; }
html body .wo-kpi.is-percent strong { color: var(--kpi); }

/* Панели */
html body .wo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

html body .wo-panel {
  display: grid;
  align-content: start;
  gap: 14px;
  min-width: 0;
  padding: 18px !important;
}

html body .wo-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

html body .wo-panel-head h2 {
  margin: 6px 0 0;
  font-size: 18px;
}

/* Статусы */
html body .wo-status-layout {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr);
  gap: 20px;
  align-items: center;
}

html body .wo-donut {
  width: 170px !important;
  height: 170px !important;
  margin: 8px auto;
}

html body .wo-legend {
  display: grid;
  gap: 6px;
}

html body .wo-legend-item {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto 52px;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,.02);
  font-size: 12px;
  color: #c6d5e1;
}

html body .wo-legend-item i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

html body .wo-legend-item strong {
  color: #fff;
  font: 800 13px var(--mono, ui-monospace, monospace);
}

html body .wo-legend-item small {
  color: #7f9ab0;
  font: 700 11px var(--mono, ui-monospace, monospace);
  text-align: right;
}

/* Столбцы по дням */
html body .wo-bars {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(44px, 1fr);
  gap: 8px;
  align-items: end;
  min-height: 230px;
  overflow-x: auto;
  padding-bottom: 2px;
}

html body .wo-bar {
  display: grid;
  grid-template-rows: auto 160px auto auto;
  justify-items: center;
  gap: 5px;
  min-width: 0;
}

html body .wo-bar-value {
  font: 800 11px var(--mono, ui-monospace, monospace);
}

html body .wo-bar-track {
  position: relative;
  width: 100%;
  max-width: 46px;
  height: 160px;
  display: flex;
  align-items: flex-end;
  border-radius: 4px;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.035) 0 1px, transparent 1px 32px);
}

html body .wo-bar-column {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  border-radius: 4px 4px 2px 2px;
  transform-origin: bottom;
  animation: woGrow .8s cubic-bezier(.16,.84,.32,1) both;
  animation-delay: calc(var(--i, 0) * 60ms);
}

html body .wo-bar-column i {
  display: block;
  min-height: 2px;
}

html body .wo-bar-label {
  color: #dbe8f4;
  font: 700 11px var(--mono, ui-monospace, monospace);
}

html body .wo-bar small {
  color: #6f879a;
  font-size: 10px;
  white-space: nowrap;
}

html body .wo-bar.is-older .wo-bar-label { color: #8ea5b6; }

@keyframes woGrow {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* Пороговые цвета */
html body .is-low.wo-bar-value,
html body .wo-chip.is-low { color: #fbbf5a; }
html body .is-mid.wo-bar-value,
html body .wo-chip.is-mid { color: #fde047; }
html body .is-high.wo-bar-value,
html body .wo-chip.is-high { color: #4ade80; }

html body .wo-chip {
  display: inline-block;
  min-width: 58px;
  padding: 3px 8px;
  border-radius: 3px;
  font: 800 11px var(--mono, ui-monospace, monospace);
  text-align: center;
}

html body .wo-chip.is-low { background: rgba(245,158,11,.14); }
html body .wo-chip.is-mid { background: rgba(250,204,21,.12); }
html body .wo-chip.is-high { background: rgba(34,197,94,.14); }

html body .wo-tone {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin: 0 3px -1px;
  border-radius: 2px;
}

html body .wo-tone.is-low { background: #f59e0b; }
html body .wo-tone.is-mid { background: #facc15; }
html body .wo-tone.is-high { background: #22c55e; }

/* Воронка */
html body .wo-segmented {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0,0,0,.2);
}

html body .wo-segmented button {
  padding: 6px 12px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #9fb3c3;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

html body .wo-segmented button.is-active {
  background: rgba(214,164,70,.16);
  color: #fff;
}

html body .wo-funnel {
  display: grid;
  gap: 6px;
}

html body .wo-funnel-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 4px;
  color: #8ea5b6;
  font-size: 11px;
}

html body .wo-funnel-legend i {
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-right: 5px;
  border-radius: 2px;
}

html body .wo-funnel-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.3fr) minmax(160px, 2fr) auto 44px 74px;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,.018);
  animation: requestCardIn .4s cubic-bezier(.16,.84,.32,1) both;
  animation-delay: calc(var(--i, 0) * 25ms);
}

html body .wo-funnel-name {
  overflow: hidden;
  color: #f2f7fb;
  font-size: 12.5px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .wo-stack {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: 3px;
  background: rgba(255,255,255,.05);
}

html body .wo-stack i {
  display: block;
  height: 100%;
  transform-origin: left;
  animation: woStack .7s cubic-bezier(.16,.84,.32,1) both;
}

@keyframes woStack {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

html body .wo-funnel-numbers {
  display: flex;
  gap: 4px;
}

html body .wo-funnel-numbers span {
  min-width: 28px;
  padding: 2px 5px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: color-mix(in srgb, var(--c) 65%, #ffffff 35%);
  font: 700 11px var(--mono, ui-monospace, monospace);
  text-align: center;
}

html body .wo-funnel-total {
  color: #fff;
  font: 800 13px var(--mono, ui-monospace, monospace);
  text-align: right;
}

/* Длительность допуска */
html body .wo-admission-stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

html body .wo-stat {
  display: grid;
  gap: 4px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,.02);
}

html body .wo-stat span {
  color: #7f9ab0;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

html body .wo-stat strong {
  color: #fff;
  font: 800 18px var(--mono, ui-monospace, monospace);
}

html body .wo-stat small {
  margin-left: 3px;
  color: #7f9ab0;
  font-size: 10px;
}

html body .wo-hist-bars {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  align-items: end;
}

html body .wo-hist-bar {
  display: grid;
  grid-template-rows: auto 110px auto;
  justify-items: center;
  gap: 5px;
}

html body .wo-hist-bar b {
  color: #fff;
  font: 800 12px var(--mono, ui-monospace, monospace);
}

html body .wo-hist-track {
  width: 100%;
  max-width: 44px;
  height: 110px;
  display: flex;
  align-items: flex-end;
  border-radius: 4px;
  background: rgba(255,255,255,.03);
}

html body .wo-hist-track i {
  display: block;
  width: 100%;
  border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, #45c8f4, rgba(69,200,244,.35));
  transform-origin: bottom;
  animation: woGrow .8s cubic-bezier(.16,.84,.32,1) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}

html body .wo-hist-bar.is-long .wo-hist-track i {
  background: linear-gradient(180deg, #f59e0b, rgba(245,158,11,.35));
}

html body .wo-hist-bar span {
  color: #9fb3c3;
  font: 700 10.5px var(--mono, ui-monospace, monospace);
}

html body .wo-hist-caption,
html body .wo-footnote {
  color: #6f879a;
  font-size: 11px;
}

html body .wo-admission-top {
  display: grid;
  gap: 6px;
}

html body .wo-top-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-left: 3px solid #45c8f4;
  border-radius: 4px;
  background: rgba(255,255,255,.02);
}

html body .wo-top-row.is-long {
  border-left-color: #f59e0b;
  background: rgba(245,158,11,.07);
}

html body .wo-top-row div:first-child {
  display: grid;
  gap: 2px;
  min-width: 0;
}

html body .wo-top-row strong {
  color: #fff;
  font: 800 12.5px var(--mono, ui-monospace, monospace);
}

html body .wo-top-row span,
html body .wo-top-row small {
  overflow: hidden;
  color: #9fb3c3;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .wo-top-times {
  display: grid;
  gap: 2px;
  color: #7f9ab0;
  font: 600 10.5px var(--mono, ui-monospace, monospace);
  text-align: right;
}

html body .wo-top-row > b {
  color: #fff;
  font: 800 18px var(--mono, ui-monospace, monospace);
}

html body .wo-top-row.is-long > b { color: #fbbf5a; }

html body .wo-top-row > b small {
  margin-left: 3px;
  color: #7f9ab0;
  font-size: 10px;
}

/* Таблица по дням */
html body .wo-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

html body .wo-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

html body .wo-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  color: #d3e0ea;
  font: 600 12px var(--mono, ui-monospace, monospace);
  text-align: center;
}

html body .wo-table td:first-child { text-align: left; }
html body .wo-table th { text-align: center; }

html body .wo-table tr.is-total td {
  border-top: 1px solid rgba(214,164,70,.45);
  color: #fff;
  font-weight: 800;
  background: rgba(214,164,70,.06);
}

/* Карточки нарядов */
html body .wo-card .request-status {
  background: rgba(255,255,255,.07);
  color: #e6eef5;
}

html body .wo-group-chip {
  padding: 3px 8px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--chip) 18%, transparent);
  color: color-mix(in srgb, var(--chip) 70%, #ffffff 30%);
  font-size: 11px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
}

html body .wo-card-meta {
  overflow: hidden;
  color: #8ea5b6;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

html body .wo-card-meta b {
  color: #d6a446;
}

html body .wo-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 22px;
}

html body .wo-badge {
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(69,200,244,.12);
  color: #8fe0f7;
  font-size: 11px;
  font-weight: 700;
}

html body .wo-badge.is-shift {
  background: rgba(214,164,70,.14);
  color: #f1d39a;
}

html body .wo-badge.is-long {
  background: rgba(245,158,11,.16);
  color: #fbbf5a;
}

html body .wo-times {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html body .wo-people,
html body .wo-more dl {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 12px;
}

html body .wo-people div,
html body .wo-more dl div {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 8px;
}

html body .wo-people dt,
html body .wo-more dt {
  color: #7f9ab0;
}

html body .wo-people dd,
html body .wo-more dd {
  margin: 0;
  color: #d3e0ea;
  overflow-wrap: anywhere;
}

html body .wo-more {
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

html body .wo-more summary {
  color: #7fd8f2;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

html body .wo-more summary::-webkit-details-marker { display: none; }
html body .wo-more summary::before { content: "▸ "; }
html body .wo-more[open] summary::before { content: "▾ "; }
html body .wo-more dl { margin-top: 8px; }

html body .wo-people .is-empty dd { color: #5f7486; }

@media (min-width: 621px) {
  html body .wo-people dd {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html body .wo-card .wo-more {
    margin-top: auto;
  }
}

/* Адаптив */
@media (max-width: 1180px) {
  html body .wo-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html body .wo-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  html body .wo-hero-gauge { width: 88px; height: 88px; }
  html body .wo-gauge-center strong { font-size: 17px; }

  html body .wo-kpi strong { font-size: 22px; }

  html body .wo-status-layout {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  html body .wo-legend { width: 100%; }

  html body .wo-funnel-row {
    grid-template-columns: minmax(0, 1fr) auto 70px;
    grid-template-areas:
      "name total percent"
      "bar bar bar"
      "numbers numbers numbers";
    gap: 8px;
  }

  html body .wo-funnel-name { grid-area: name; }
  html body .wo-funnel-bar { grid-area: bar; }
  html body .wo-funnel-numbers { grid-area: numbers; }
  html body .wo-funnel-total { grid-area: total; }
  html body .wo-funnel-percent { grid-area: percent; }

  html body .wo-admission-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  html body .wo-top-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  html body .wo-top-times { display: none; }

  html body .wo-times { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  html body .wo-people div,
  html body .wo-more dl div {
    grid-template-columns: 1fr;
    gap: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .wo-kpi,
  html body .wo-bar-column,
  html body .wo-stack i,
  html body .wo-hist-track i,
  html body .wo-funnel-row { animation: none !important; }
}

html body .wo-funnel-small {
  border: 1px dashed var(--line);
  border-radius: 4px;
  padding: 0 6px;
}

html body .wo-funnel-small summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 4px;
  color: #9fb3c3;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

html body .wo-funnel-small summary::-webkit-details-marker { display: none; }
html body .wo-funnel-small summary span::before { content: "▸ "; }
html body .wo-funnel-small[open] summary span::before { content: "▾ "; }
html body .wo-funnel-small summary b { color: #7f9ab0; font: 700 11px var(--mono, ui-monospace, monospace); }
html body .wo-funnel-small[open] { display: grid; gap: 6px; padding-bottom: 6px; }

html body .wo-older-toggle { cursor: pointer; }
html body .wo-older-toggle td { color: #9fb3c3 !important; background: rgba(255,255,255,.02); }
html body .wo-older-row { display: none; }
html body #woDaysTable.is-older-open .wo-older-row { display: table-row; }
html body .wo-older-row td { color: #8ea5b6; }

/* =========================================================
   НДР · телефон: ничего не выходит за ширину экрана
   ========================================================= */
html body .wo-short { display: none; }

html body .wo-grid,
html body .wo-dashboard,
html body .wo-shell {
  min-width: 0;
}

html body .wo-grid > *,
html body .wo-dashboard > *,
html body .wo-panel > * {
  min-width: 0;
}

@media (max-width: 1180px) {
  html body .wo-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  html body .wo-panel { padding: 14px !important; }

  /* График по дням: все столбцы помещаются в ширину */
  html body .wo-bars {
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    min-height: 0;
    overflow: visible;
  }

  html body .wo-bar {
    grid-template-rows: auto 130px auto auto;
    gap: 4px;
  }

  html body .wo-bar-track { height: 130px; }

  html body .wo-bar-value {
    font-size: 9px;
    letter-spacing: -.02em;
  }

  html body .wo-bar-label {
    font-size: 9.5px;
    letter-spacing: -.02em;
  }

  html body .wo-bar small {
    max-width: 100%;
    overflow: hidden;
    font-size: 8.5px;
    text-align: center;
    text-overflow: clip;
    white-space: normal;
    line-height: 1.2;
  }

  /* Гистограмма допуска */
  html body .wo-hist-bars { gap: 5px; }
  html body .wo-hist-bar { grid-template-rows: auto 90px auto; }
  html body .wo-hist-track { height: 90px; }
  html body .wo-hist-bar span { font-size: 9px; }

  /* Таблица по дням: компактная, без горизонтальной прокрутки */
  html body .wo-table-wrap { overflow-x: visible; }
  html body .wo-long { display: none; }
  html body .wo-short { display: inline; }
  html body .wo-col-day { display: none; }

  html body .wo-table {
    min-width: 0;
    table-layout: fixed;
  }

  html body .wo-table th {
    padding: 7px 2px !important;
    font-size: 8.5px !important;
    letter-spacing: .02em !important;
    white-space: normal;
    word-break: break-word;
  }

  html body .wo-table td {
    padding: 7px 2px !important;
    font-size: 10.5px !important;
  }

  html body .wo-table th:first-child,
  html body .wo-table td:first-child { width: 17%; }
  html body .wo-table th:last-child,
  html body .wo-table td:last-child { width: 17%; }

  html body .wo-table .wo-chip {
    min-width: 0;
    padding: 2px 3px;
    font-size: 9.5px;
  }

  html body .wo-panel-head h2 { font-size: 16px; }
}

html body .wo-funnel-name small {
  display: block;
  overflow: hidden;
  color: #6f879a;
  font-size: 10.5px;
  font-weight: 500;
  text-overflow: ellipsis;
}

/* =========================================================
   НДР · АРХИВ (32 дня): выбор сводки и жизнь наряда
   ========================================================= */
html body .wo-archive-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

html body .wo-archive-select {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  padding: 0 0 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0,0,0,.25);
}

html body .wo-archive-select span {
  color: #7f9ab0;
  font: 700 10px var(--mono, ui-monospace, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
}

html body .wo-archive-select select {
  min-width: 0;
  max-width: 340px;
  min-height: 34px;
  padding: 0 10px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
}

html body .wo-archive-select select option,
html body .wo-archive-select select optgroup {
  background: #0b121a;
  color: #e6eef5;
}

html body .wo-archive-quick {
  display: inline-flex;
  gap: 4px;
}

html body .wo-archive-quick button {
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,255,255,.02);
  color: #c6d5e1;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

html body .wo-archive-quick button.is-active {
  border-color: rgba(53,214,151,.5);
  color: #6ee7b7;
}

html body .wo-archive-quick button:disabled {
  opacity: .4;
  cursor: default;
}

html body .wo-archive-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(167,139,250,.45);
  border-left: 3px solid #a78bfa;
  border-radius: 5px;
  background: rgba(167,139,250,.08);
  color: #ddd6fe;
  font-size: 12.5px;
  font-weight: 600;
}

html body .wo-archive-banner[hidden] { display: none; }

html body .wo-archive-banner button {
  padding: 6px 12px;
  border: 1px solid rgba(167,139,250,.55);
  border-radius: 4px;
  background: transparent;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

html body #workordersView.is-archive .wo-hero {
  border-color: rgba(167,139,250,.35) !important;
}

/* Кнопка «История» в карточке */
html body .wo-history-button {
  margin-left: auto;
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid rgba(69,200,244,.4);
  border-radius: 3px;
  background: rgba(69,200,244,.08);
  color: #8fe0f7;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
}

html body .wo-history-button:hover {
  background: rgba(69,200,244,.18);
}

html body .wo-top-row[data-wo-history] {
  cursor: pointer;
}

html body .wo-top-row[data-wo-history]:hover {
  border-color: rgba(69,200,244,.4);
}

/* Окно истории */
html body .wo-history-backdrop { z-index: 240; }

html body .wo-history-card {
  width: min(100%, 860px) !important;
  max-height: min(88vh, 900px);
  overflow-y: auto;
  text-align: left;
}

html body .wo-history-card h2 {
  margin: 6px 0 4px;
  padding-right: 40px;
}

html body .wo-history-subtitle {
  margin: 0 0 16px;
  color: #dbe8f4;
  font-size: 13.5px;
  line-height: 1.5;
}

html body .wo-history-subtitle span {
  color: #8ea5b6;
  font-size: 12px;
}

html body .wo-history-meta {
  display: block;
  margin-top: 6px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 11px !important;
}

html body .wo-history-meta b { color: #fff; }

html body .wo-timeline {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
}

html body .wo-timeline::before {
  content: "";
  position: absolute;
  top: 6px;
  bottom: 6px;
  left: 6px;
  width: 2px;
  background: linear-gradient(180deg, rgba(69,200,244,.5), rgba(69,200,244,.08));
}

html body .wo-tl-item {
  --chip: #64748b;
  position: relative;
  padding: 0 0 16px;
  animation: requestCardIn .4s cubic-bezier(.16,.84,.32,1) both;
  animation-delay: calc(var(--i, 0) * 40ms);
}

html body .wo-tl-dot {
  position: absolute;
  top: 5px;
  left: -21px;
  width: 12px;
  height: 12px;
  border: 2px solid var(--chip);
  border-radius: 50%;
  background: #0a1018;
  box-shadow: 0 0 8px color-mix(in srgb, var(--chip) 60%, transparent);
}

html body .wo-tl-item.is-first .wo-tl-dot { background: var(--chip); }
html body .wo-tl-item.is-gone .wo-tl-dot { border-color: #64748b; border-style: dashed; box-shadow: none; }
html body .wo-tl-item.is-long .wo-tl-dot { border-color: #f59e0b; }

html body .wo-tl-content {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255,255,255,.02);
}

html body .wo-tl-item.is-long .wo-tl-content {
  border-color: rgba(245,158,11,.45);
  background: rgba(245,158,11,.05);
}

html body .wo-tl-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

html body .wo-tl-head > b {
  color: #fff;
  font: 800 12.5px var(--mono, ui-monospace, monospace);
}

html body .wo-tl-tag {
  padding: 2px 8px;
  border-radius: 3px;
  background: rgba(214,164,70,.14);
  color: #f1d39a;
  font-size: 11px;
  font-weight: 700;
}

html body .wo-tl-item.is-gone .wo-tl-tag {
  background: rgba(100,116,139,.2);
  color: #cbd5e1;
}

html body .wo-tl-alert {
  padding: 6px 10px;
  border-radius: 4px;
  background: rgba(245,158,11,.14);
  color: #fbbf5a;
  font-size: 12px;
  font-weight: 700;
}

html body .wo-tl-note {
  margin: 0;
  color: #8ea5b6;
  font-size: 12px;
}

html body .wo-tl-changes {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

html body .wo-tl-changes li {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}

html body .wo-tl-changes span { color: #7f9ab0; }

html body .wo-tl-changes s {
  color: #8a9aa8;
  text-decoration-color: rgba(244,63,94,.6);
  overflow-wrap: anywhere;
}

html body .wo-tl-changes b {
  color: #6ee7b7;
  font-weight: 700;
  overflow-wrap: anywhere;
}

@media (max-width: 620px) {
  html body .wo-archive-select { width: 100%; }
  html body .wo-archive-select select { flex: 1 1 auto; max-width: none; }
  html body .wo-archive-quick { width: 100%; }
  html body .wo-archive-quick button { flex: 1 1 0; padding: 0 4px; font-size: 11px; }

  html body .wo-history-card {
    max-height: 92vh;
    padding: 20px 14px !important;
  }

  html body .wo-tl-changes li {
    grid-template-columns: 1fr;
    gap: 1px;
    padding-bottom: 4px;
    border-bottom: 1px dashed var(--line);
  }
}

html body .wo-hero {
  align-items: flex-start;
}

html body .wo-hero > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 620px) {
  html body .wo-hero { gap: 10px; }
  html body .wo-hero .wo-hero-gauge { width: 72px; height: 72px; }
  html body .wo-hero .wo-gauge-center strong { font-size: 14px; }
  html body .wo-hero .wo-gauge-center span { font-size: 8px; }
}

html body .wo-shell > *,
html body .requests-shell > * {
  min-width: 0;
}

html body .wo-archive-select select {
  width: 100%;
  text-overflow: ellipsis;
}

html body .admin-storage-info {
  margin-top: 8px;
  font-size: 11.5px;
  color: #7f9ab0;
}

html body .admin-storage-info.is-warning {
  color: #fbbf5a;
}

/* =========================================================
   Переключатель подразделения / РЭС в окнах «Заявки» и «НДР»
   ========================================================= */
html body .scope-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 260px));
  gap: 8px;
  margin-top: 12px;
}

html body .scope-switch-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

html body .scope-switch-field span {
  color: #7f9ab0;
  font: 700 10px var(--mono, ui-monospace, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
}

html body .scope-switch-field select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(0,0,0,.25);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-overflow: ellipsis;
}

html body .scope-switch-field select:disabled {
  opacity: .55;
}

html body .scope-switch-field select option {
  background: #0b121a;
  color: #e6eef5;
}

@media (max-width: 620px) {
  html body .scope-switch {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   ФИЛИАЛЫ · ИНФОРМАЦИОННЫЕ ПАНЕЛИ
   ========================================================= */
html body .module-card-branches { border-left: 3px solid var(--cyan) !important; }
html body .module-card-branches .module-icon {
  color: var(--cyan) !important;
  border-color: rgba(60,195,232,.35) !important;
  background: rgba(60,195,232,.08) !important;
}
html body .module-card-branches .module-icon svg { stroke: var(--cyan) !important; }

html body .branch-shell { display: grid; gap: 14px; padding-bottom: 32px; }
html body .branch-shell > *, html body .branch-stage > * { min-width: 0; }
html body .branch-stage { display: grid; gap: 14px; }
html body .branch-stage[hidden] { display: none; }

html body .branch-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 12px; color: var(--muted); font: 600 11px/1 var(--mono); letter-spacing: .06em;
}
html body .branch-crumbs button {
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.02);
  color: var(--text-2); padding: 7px 11px; font: inherit; cursor: pointer;
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html body .branch-crumbs button:hover { border-color: var(--line-strong); color: var(--text); }
html body .branch-crumbs button[aria-current="page"] {
  border-color: rgba(214,164,70,.45); color: var(--gold); background: rgba(214,164,70,.08); cursor: default;
}

html body .branch-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 22px 24px !important;
}
html body .branch-hero h1 { margin: 8px 0 6px; overflow-wrap: anywhere; }
html body .branch-hero p { margin: 0; font-size: 13px; }
html body .branch-hero-total { display: grid; justify-items: end; gap: 2px; flex: none; }
html body .branch-hero-total strong { color: #fff; font: 800 40px/1 var(--mono); }
html body .branch-hero-total span {
  color: #7f9ab0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}

html body .branch-search {
  display: flex; align-items: center; gap: 10px; padding: 0 14px !important; min-height: 48px; cursor: text;
}
html body .branch-search svg { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; flex: none; }
html body .branch-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text);
  font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.2; padding: 12px 0;
}
html body .branch-search:focus-within { border-color: var(--line-strong) !important; }

/* Плитки филиалов: крупные зоны нажатия, адаптивная сетка */
html body .branch-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr));
}
html body .branch-tile {
  position: relative; display: grid; align-content: space-between; gap: 10px;
  min-height: 112px; padding: 16px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: 8px; color: var(--text);
  background: linear-gradient(180deg, rgba(18,27,38,.92), rgba(10,16,24,.94));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 26px rgba(0,0,0,.4);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
html body .branch-tile::before {
  content: ""; position: absolute; left: -1px; top: -1px; width: 12px; height: 12px;
  border-left: 2px solid var(--gold); border-top: 2px solid var(--gold); border-top-left-radius: 8px; opacity: .8;
}
html body .branch-tile:hover { border-color: var(--line-strong); background: linear-gradient(180deg, rgba(24,35,48,.95), rgba(12,19,28,.96)); }
html body .branch-tile:active { transform: scale(.98); }
html body .branch-tile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html body .branch-tile-code { font: 700 24px/1.05 var(--mono); letter-spacing: .02em; overflow-wrap: anywhere; }
html body .branch-tile-desc { color: var(--text-2); font-size: 12px; line-height: 1.3; }
html body .branch-tile-meta {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); font: 600 10.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
html body .branch-tile-meta i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(63,210,154,.7); }
html body .branch-tile.is-empty .branch-tile-meta i { background: var(--muted); box-shadow: none; }

html body .branch-empty {
  padding: 22px !important; color: var(--text-2); font-size: 13px; text-align: center; grid-column: 1 / -1;
}

/* Информационные панели филиала */
html body .branch-panel-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
html body .branch-panel-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 16px 18px !important; text-align: left; cursor: pointer; color: var(--text); min-height: 76px;
  -webkit-tap-highlight-color: transparent;
}
html body .branch-panel-card:hover { border-color: var(--line-strong) !important; }
html body .branch-panel-card:active { transform: scale(.99) !important; }
html body .branch-panel-index { color: var(--gold); font: 700 13px/1 var(--mono); }
html body .branch-panel-copy { display: grid; gap: 4px; min-width: 0; }
html body .branch-panel-copy strong { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
html body .branch-panel-copy small { color: var(--muted); font-size: 12px; }
html body .branch-panel-card svg { width: 18px; height: 18px; fill: none; stroke: var(--gold); stroke-width: 2; }

/* Лента сообщений */
html body .branch-feed-subtitle[hidden] { display: none; }
html body .branch-live {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 8px 12px; border: 1px solid rgba(63,210,154,.35); border-radius: 999px;
  color: var(--green); font: 700 11px/1 var(--mono); letter-spacing: .14em; background: rgba(63,210,154,.07);
}
html body .branch-live i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: branch-live-pulse 1.6s ease-in-out infinite; }
html body .branch-live.is-offline { color: var(--red); border-color: rgba(240,84,95,.4); background: rgba(240,84,95,.07); }
html body .branch-live.is-offline i { animation: none; }
@keyframes branch-live-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(63,210,154,.55); } 50% { box-shadow: 0 0 0 6px rgba(63,210,154,0); } }

html body .branch-feed-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
}
html body .branch-feed-meta { color: var(--muted); font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
html body .branch-feed-actions { display: flex; align-items: center; gap: 8px; }
html body .branch-feed-actions .secondary-action { min-height: 38px; padding: 0 14px; }
html body .branch-feed-actions .secondary-action[hidden] { display: none; }
html body #branchRefreshButton.is-loading svg { animation: branch-spin .9s linear infinite; }
@keyframes branch-spin { to { transform: rotate(360deg); } }

html body .branch-new-messages {
  position: sticky; top: 10px; z-index: 5; justify-self: center;
  padding: 9px 16px; border: 1px solid rgba(214,164,70,.55); border-radius: 999px; cursor: pointer;
  background: rgba(20,16,8,.94); color: var(--gold); font: 700 12px/1 var(--mono); letter-spacing: .04em;
  box-shadow: 0 8px 22px rgba(0,0,0,.5);
}
html body .branch-new-messages[hidden] { display: none; }

html body .branch-feed { display: grid; gap: 10px; }
html body .branch-day {
  display: flex; align-items: center; gap: 12px; margin: 6px 0 0;
  color: var(--gold); font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
html body .branch-day::before, html body .branch-day::after { content: ""; flex: 1; height: 1px; background: var(--line); }

html body .branch-message {
  position: relative; display: grid; gap: 10px; padding: 14px 16px;
  border: 1px solid var(--line); border-left: 3px solid rgba(60,195,232,.55); border-radius: 8px;
  background: linear-gradient(180deg, rgba(18,27,38,.92), rgba(10,16,24,.94));
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 26px rgba(0,0,0,.35);
}
html body .branch-message.is-new { animation: branch-new 2.4s ease-out; }
@keyframes branch-new {
  0% { border-color: rgba(214,164,70,.8); box-shadow: 0 0 0 3px rgba(214,164,70,.25); transform: translateY(-4px); }
  100% { box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 26px rgba(0,0,0,.35); transform: none; }
}
html body .branch-message-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
html body .branch-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid rgba(60,195,232,.35); background: rgba(60,195,232,.1); color: var(--cyan);
  font: 700 11px/1 var(--mono);
}
html body .branch-avatar.is-bot { border-color: rgba(214,164,70,.45); background: rgba(214,164,70,.1); color: var(--gold); }
html body .branch-message-author { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .branch-message-author em {
  margin-left: 6px; padding: 2px 6px; border-radius: 4px; font: 600 9.5px/1 var(--mono); font-style: normal;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold); background: rgba(214,164,70,.1);
}
html body .branch-message-head time { color: var(--muted); font: 600 12px/1 var(--mono); }

html body .branch-message-body { display: grid; gap: 10px; min-width: 0; }
html body .branch-message-text {
  color: var(--text); font-size: 14px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
html body .branch-message-text a { color: var(--cyan-bright); text-decoration: underline; text-underline-offset: 2px; }
html body .branch-message-text code {
  padding: 1px 5px; border-radius: 4px; background: rgba(255,255,255,.06); font: 13px/1.4 var(--mono);
}
html body .branch-message-text mark { background: rgba(214,164,70,.25); color: inherit; }
html body .branch-mention { color: var(--cyan-bright); }

html body .branch-message-linked {
  display: grid; gap: 6px; padding: 10px 12px; border-left: 2px solid var(--gold);
  border-radius: 0 6px 6px 0; background: rgba(214,164,70,.05);
}
html body .branch-message-linked > span { color: var(--gold); font: 600 10.5px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
html body .branch-message-linked .branch-message-text { color: var(--text-2); font-size: 13px; }

html body .branch-message-images { display: flex; flex-wrap: wrap; gap: 8px; }
html body .branch-message-images img {
  display: block; max-width: min(100%, 320px); max-height: 220px; border-radius: 6px;
  border: 1px solid var(--line); object-fit: cover;
}
html body .branch-message-files { display: flex; flex-wrap: wrap; gap: 6px; }
html body .branch-file-chip {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--text-2);
  font-size: 12px; background: rgba(255,255,255,.03); overflow-wrap: anywhere;
}
html body .branch-file-chip i { width: 8px; height: 10px; flex: none; border: 1.5px solid var(--gold); border-radius: 2px; }

/* Сворачивание длинных сообщений */
html body .branch-message.is-long:not(.is-expanded) .branch-message-body {
  max-height: 260px; overflow: hidden; cursor: pointer;
  -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent);
  mask-image: linear-gradient(180deg, #000 70%, transparent);
}
html body .branch-message-toggle {
  display: inline-flex; align-items: center; justify-self: start; gap: 6px;
  padding: 8px 12px; border: 1px solid rgba(214,164,70,.4); border-radius: 6px; cursor: pointer;
  background: rgba(214,164,70,.08); color: var(--gold); font-family: inherit; font-size: 12.5px; font-weight: 600; line-height: 1;
}
html body .branch-message-toggle[hidden] { display: none; }
html body .branch-message-toggle svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
html body .branch-message.is-expanded .branch-message-toggle svg { transform: rotate(180deg); }

html body .branch-message.is-skeleton { min-height: 96px; gap: 10px; }
html body .branch-message.is-skeleton span {
  display: block; height: 10px; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.1), rgba(255,255,255,.04));
  background-size: 200% 100%; animation: branch-shimmer 1.3s linear infinite;
}
html body .branch-message.is-skeleton span:nth-child(1) { width: 40%; }
html body .branch-message.is-skeleton span:nth-child(3) { width: 70%; }
@keyframes branch-shimmer { to { background-position: -200% 0; } }

@media (max-width: 640px) {
  html body .branch-hero { padding: 16px !important; gap: 12px; }
  html body .branch-hero-total strong { font-size: 30px; }
  html body .branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  html body .branch-tile { min-height: 92px; padding: 13px; }
  html body .branch-tile-code { font-size: 20px; }
  html body .branch-message { padding: 12px; }
  html body .branch-message-text { font-size: 14px; }
  html body .branch-feed-hero { align-items: flex-start; }
}
@media (max-width: 340px) {
  html body .branch-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html body .branch-live i, html body .branch-message.is-new, html body .branch-message.is-skeleton span { animation: none; }
}

/* Центр управления: управление филиалами */
html body .branch-admin-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
html body .branch-admin-list { display: grid; gap: 8px; margin-top: 12px; }
html body .branch-admin-item { border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.02); }
html body .branch-admin-item.is-open { border-color: rgba(214,164,70,.3); }
html body .branch-admin-item-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 4px; }
html body .branch-admin-expander {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px;
  border: 0; background: transparent; color: var(--text); cursor: pointer; text-align: left;
}
html body .branch-admin-expander svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--gold); stroke-width: 2; transition: transform .2s ease; }
html body .branch-admin-item.is-open .branch-admin-expander svg { transform: rotate(90deg); }
html body .branch-admin-expander strong { font: 700 15px/1.2 var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .branch-admin-expander small { color: var(--muted); font-size: 12px; white-space: nowrap; }
html body .branch-admin-item-actions, html body .branch-admin-chat-actions { display: flex; gap: 4px; flex: none; }
html body .branch-admin-item-actions .icon-button, html body .branch-admin-chat-actions .icon-button {
  width: 32px; height: 32px; min-width: 32px; font-size: 14px;
}
html body .branch-admin-item-actions .icon-button:disabled, html body .branch-admin-chat-actions .icon-button:disabled { opacity: .3; }
html body .icon-button.is-danger { color: var(--red); }
html body .branch-admin-item-body { display: none; gap: 12px; padding: 4px 14px 14px; }
html body .branch-admin-item.is-open .branch-admin-item-body { display: grid; }
html body .branch-admin-fields, html body .branch-admin-chat {
  display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr));
}
html body .branch-admin-chats { display: grid; gap: 8px; }
html body .branch-admin-chat {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto; align-items: end;
  padding: 10px; border: 1px dashed var(--line); border-radius: 6px;
}
html body .branch-admin-chat-wide { grid-column: 1 / 3; }
html body .branch-admin-chat-actions { grid-column: 3; grid-row: 1; align-self: end; }
html body .branch-admin-fields label, html body .branch-admin-chat label { display: grid; gap: 5px; min-width: 0; }
html body .branch-admin-fields span, html body .branch-admin-chat span {
  color: var(--muted); font: 600 10px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase;
}
html body .branch-admin-fields input, html body .branch-admin-chat input {
  width: 100%; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px;
  background: rgba(0,0,0,.25); color: var(--text); font-family: inherit; font-size: 14px; line-height: 1.2;
}
html body .branch-admin-fields input:focus, html body .branch-admin-chat input:focus { outline: none; border-color: var(--line-strong); }
html body .branch-admin-hint { color: var(--muted); font-size: 12px; }
html body .branch-admin-item-body > .secondary-action { justify-self: start; }
@media (max-width: 640px) {
  html body .branch-admin-fields { grid-template-columns: 1fr; }
  html body .branch-admin-chat { grid-template-columns: minmax(0, 1fr) auto; }
  html body .branch-admin-chat label { grid-column: 1 / 2; }
  html body .branch-admin-chat-wide { grid-column: 1 / 2; }
  html body .branch-admin-chat-actions { grid-column: 2; grid-row: 1 / 4; flex-direction: column; align-self: start; }
  html body .branch-admin-expander small { display: none; }
}

/* Центр управления: сворачиваемые разделы */
html body .admin-collapse-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 14px 0 0;
}
html body .admin-collapse-bar > span { color: var(--muted); font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
html body .admin-collapse-bar > div { display: flex; gap: 8px; }
html body .admin-collapse-bar .secondary-action { min-height: 34px; padding: 0 12px; font-size: 12px; }
html body .admin-panel.is-collapsible > .admin-panel-heading { cursor: pointer; user-select: none; }
html body .admin-panel.is-collapsible > .admin-panel-heading { position: relative; padding-left: 40px !important; }
html body .admin-collapse-toggle {
  position: absolute; left: 0; top: 2px; display: grid; place-items: center;
  width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  background: rgba(214,164,70,.06); color: var(--gold);
}
html body .admin-collapse-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .2s ease; }
html body .admin-panel.is-collapsed .admin-collapse-toggle svg { transform: rotate(-90deg); }
html body .admin-panel.is-collapsed { align-self: start; }
html body .admin-panel.is-collapsed > :not(.admin-panel-heading),
html body .admin-panel.is-collapsed > .admin-panel-heading > :not(:first-of-type):not(.admin-collapse-toggle),
html body .admin-panel.is-collapsed > .admin-panel-heading .access-heading-copy { display: none !important; }
html body .admin-panel.is-collapsed > .admin-panel-heading { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: 0 !important; }
html body #branchRefreshButton { width: 38px; height: 38px; min-width: 38px; border-radius: 6px; }
html body #branchRefreshButton svg { width: 18px; height: 18px; }
html body .admin-collapse-bar .secondary-action { white-space: nowrap; }
html body .branch-admin-toolbar .secondary-action,
html body .branch-admin-toolbar .primary-action { width: auto !important; min-height: 40px; padding: 0 16px !important; white-space: nowrap; }
html body .branch-feed-actions .secondary-action { white-space: nowrap; }