/* styles/pages/executive-command.css — Executive Command v1.
 *
 * Токены — те же значения, что styles/pages/director-panel.css уже
 * использует (Warm Jade Enterprise, обе темы), просто под своим корневым
 * классом .ec-root: один и тот же язык цвета на весь руководительский
 * контур, не вторая параллельная палитра. Область действия — только
 * .ec-root, остальное приложение не перекрашивается.
 */

.ec-root {
  --bg:#0b0d0f; --card:#14171a; --card2:#171b1e; --tile:#1a1f22;
  --line:rgba(235,242,245,.11); --line-soft:rgba(235,242,245,.06);
  --t1:#ffffff; --t2:#dfe5e8; --t3:#b0b9bd; --t4:#8d9599;
  --acc:#3ff0b4; --acc-t:#6affc9; --acc-soft:rgba(63,240,180,.12); --acc-line:rgba(63,240,180,.3);
  --red:#f2564d; --red-t:#ff8d80; --red-soft:rgba(242,86,77,.13); --red-line:rgba(242,86,77,.34);
  --orange:#f59042; --orange-t:#ffb066; --orange-soft:rgba(245,144,66,.13); --orange-line:rgba(245,144,66,.32);
  --yellow:#e5b428; --yellow-t:#ffd166; --yellow-soft:rgba(229,180,40,.13); --yellow-line:rgba(229,180,40,.32);
  --green:#2fc27f; --green-t:#5fe3a5; --green-soft:rgba(47,194,127,.13); --green-line:rgba(47,194,127,.32);
  --blue:#4f8ef2; --blue-t:#8ab4ff; --blue-soft:rgba(79,142,242,.13); --blue-line:rgba(79,142,242,.32);
  --purple:#9c6bf0; --purple-t:#c3a0ff; --purple-soft:rgba(156,107,240,.13); --purple-line:rgba(156,107,240,.32);
  --shadow:0 1px 2px rgba(0,0,0,.45);

  background:var(--bg); color:var(--t2); min-height:100vh;
  font-family:'IBM Plex Sans', system-ui, sans-serif; -webkit-font-smoothing:antialiased;
}
[data-theme="light"] .ec-root {
  --bg:#f3f6f4; --card:#ffffff; --card2:#fafcfb; --tile:#f4f7f5;
  --line:rgba(18,34,29,.12); --line-soft:rgba(18,34,29,.06);
  --t1:#111816; --t2:#303b37; --t3:#4f5a55; --t4:#667281;
  --acc:#12775e; --acc-t:#0c5f49; --acc-soft:rgba(18,119,94,.1); --acc-line:rgba(18,119,94,.3);
  --red:#d0342c; --red-t:#a8231c; --red-soft:rgba(208,52,44,.1); --red-line:rgba(208,52,44,.28);
  --orange:#c2701a; --orange-t:#8a5708; --orange-soft:rgba(194,112,26,.1); --orange-line:rgba(194,112,26,.26);
  --yellow:#a8811a; --yellow-t:#7d5f06; --yellow-soft:rgba(168,129,26,.12); --yellow-line:rgba(168,129,26,.28);
  --green:#12775e; --green-t:#0a5c47; --green-soft:rgba(18,119,94,.1); --green-line:rgba(18,119,94,.26);
  --blue:#1f5fd0; --blue-t:#164a9e; --blue-soft:rgba(31,95,208,.1); --blue-line:rgba(31,95,208,.26);
  --purple:#6b3fd0; --purple-t:#4f27a3; --purple-soft:rgba(107,63,208,.1); --purple-line:rgba(107,63,208,.26);
  --shadow:0 1px 2px rgba(16,24,40,.06);
}

.ec-root, .ec-root * { box-sizing:border-box; }
.ec-root button { font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.ec-root a { color:inherit; text-decoration:none; }
.ec-root :focus-visible { outline:2px solid var(--acc); outline-offset:2px; }
.ec-root .ec-mono { font-family:'IBM Plex Mono', ui-monospace, Consolas, monospace; font-variant-numeric:tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .ec-root * { animation:none !important; transition:none !important; }
}

/* ── Header — минимальный, без sidebar ───────────────────────────────── */
.ec-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:0 24px; height:56px; border-bottom:1px solid var(--line);
  background:var(--card); position:sticky; top:0; z-index:20;
}
.ec-header__left { display:flex; align-items:center; gap:4px; }
.ec-header__right { display:flex; align-items:center; gap:12px; }
.ec-brand { display:flex; align-items:center; padding:6px 12px 6px 4px; }
.ec-brand__mark { font-family:'IBM Plex Mono', monospace; font-weight:600; font-size:14px; letter-spacing:.06em; color:var(--acc); }
.ec-navlink {
  font-size:13.5px; font-weight:500; color:var(--t2); padding:8px 12px; border-radius:8px;
  display:flex; align-items:center; gap:7px; transition:background .12s ease, color .12s ease;
}
.ec-navlink:hover { background:var(--tile); color:var(--t1); }
.ec-navlink__icon { flex:none; display:flex; }
.ec-modules { position:relative; }
.ec-mod-panel {
  position:absolute; top:calc(100% + 6px); left:0; min-width:240px;
  background:var(--card2); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 32px rgba(0,0,0,.28);
  padding:6px; display:flex; flex-direction:column; gap:1px; z-index:30;
  max-height:70vh; overflow-y:auto;
}
.ec-mod-item { font-size:13px; color:var(--t2); padding:8px 10px; border-radius:7px; transition:background .1s ease, color .1s ease; }
.ec-mod-item:hover { background:var(--tile); color:var(--t1); }
.ec-mod-sep { height:1px; background:var(--line); margin:5px 4px; }

.ec-periods { display:flex; background:var(--tile); border-radius:8px; padding:2px; gap:2px; }
.ec-period { font-size:12.5px; font-weight:500; color:var(--t3); padding:6px 12px; border-radius:6px; transition:background .12s ease, color .12s ease; }
.ec-period:hover { color:var(--t1); }
.ec-period--active { background:var(--card); color:var(--t1); box-shadow:var(--shadow); }
/* Mobile period control (≤480px) — same 3 values, same handler, native
   <select> instead of a 3-button group that no longer fits next to
   refresh+profile on a phone. Hidden ≥481px (see responsive section). */
.ec-period-select {
  display:none; font-size:12.5px; font-weight:500; color:var(--t1); background:var(--tile);
  border:1px solid var(--line); border-radius:8px; padding:7px 8px; font-family:inherit;
}
.ec-iconbtn { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:8px; color:var(--t3); transition:background .12s ease, color .12s ease; }
.ec-iconbtn:hover { background:var(--tile); color:var(--t1); }
.ec-user { display:flex; align-items:center; gap:8px; padding:5px 10px 5px 5px; border-radius:8px; transition:background .12s ease; }
.ec-user:hover { background:var(--tile); }
.ec-user__avatar {
  flex:none; width:26px; height:26px; border-radius:50%; background:var(--acc-soft); color:var(--acc);
  display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700;
}
.ec-user__name { font-size:13px; font-weight:500; color:var(--t1); }

/* ── Main layout ──────────────────────────────────────────────────────── */
.ec-main { max-width:1720px; margin:0 auto; padding:24px 24px 48px; display:flex; flex-direction:column; gap:20px; }
.ec-loading { padding:96px; text-align:center; color:var(--t4); font-size:14px; }
.ec-card-title { margin:0 0 14px; font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--t3); text-transform:uppercase; }

/* ── KPI ──────────────────────────────────────────────────────────────── */
.ec-kpi { display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:12px; }
/* Specificity note: the generic `.ec-root button { border:none }` reset above
   is (0,1,1) — a bare `.ec-kpi-tile` rule is only (0,1,0) and silently lost
   the border-left accent to it (found in live visual QA: computed style came
   back `border-left: 0px none` despite --k resolving correctly). Qualifying
   with the parent `.ec-kpi` bumps this to (0,2,0), which wins on legitimate
   specificity — no !important needed, the generic button reset is untouched
   and still applies everywhere else. */
.ec-kpi > .ec-kpi-tile {
  text-align:left; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--k);
  border-radius:12px; padding:16px 18px; display:flex; flex-direction:column; gap:6px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.ec-kpi > .ec-kpi-tile:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:var(--line-soft); }
.ec-kpi-tile__label { font-size:10.5px; font-weight:700; letter-spacing:.07em; color:var(--k); text-transform:uppercase; opacity:.85; }
.ec-kpi-tile__value { font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-size:32px; font-weight:600; color:var(--t1); line-height:1.1; }
.ec-kpi-tile__sub { font-size:11.5px; color:var(--t4); line-height:1.35; }
.ec-degraded { color:var(--orange); font-family:'IBM Plex Sans', sans-serif; font-size:11px; font-weight:600; }

/* ── Attention — сигнатурный блок ────────────────────────────────────── */
.ec-attention { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px 22px; }
.ec-attention--error { border-color:var(--red-line); }
.ec-attention__head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px; }
.ec-attention__title { margin:0; font-size:13.5px; font-weight:700; letter-spacing:.07em; color:var(--t1); text-transform:uppercase; }
.ec-attention__note { font-size:11px; color:var(--t4); font-family:'IBM Plex Mono', monospace; }

.ec-attention-band { display:flex; gap:3px; height:72px; margin-bottom:16px; border-radius:8px; overflow:hidden; }
.ec-attn-seg {
  background:var(--c); flex:1 1 0; min-width:64px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:2px; opacity:.92; transition:opacity .12s ease, flex-grow .2s ease;
}
.ec-attn-seg:hover { opacity:1; }
.ec-attn-seg__value { font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-size:22px; font-weight:700; color:#0b0d0f; }
.ec-attn-seg__label { font-size:10px; font-weight:600; color:rgba(11,13,15,.75); text-align:center; padding:0 6px; line-height:1.2; }

.ec-attention-grid { display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:8px; }
.ec-attn-cell {
  display:flex; flex-direction:column; gap:4px; padding:10px 12px; border-radius:9px; background:var(--tile);
  border:1px solid transparent; transition:border-color .12s ease, background .12s ease;
}
.ec-attn-cell:hover { border-color:var(--line); }
.ec-attn-cell__dot { width:7px; height:7px; border-radius:50%; }
.ec-attn-cell__label { font-size:11px; color:var(--t3); line-height:1.25; }
.ec-attn-cell__value { font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-size:16px; font-weight:600; color:var(--t1); }

.ec-empty { padding:24px; text-align:center; color:var(--t4); font-size:13px; }
.ec-empty--good { display:flex; align-items:center; justify-content:center; gap:8px; color:var(--green); background:var(--green-soft); border-radius:9px; padding:16px; }
.ec-error-state { display:flex; align-items:center; gap:8px; color:var(--red); background:var(--red-soft); border-radius:9px; padding:14px 16px; font-size:13px; }

/* ── Operations + Trends row ──────────────────────────────────────────── */
/* stretch (not start): Operations naturally runs to 6 rows, Trends to 2-3 —
   left as `align-items:start` the shorter card just trailed off in empty
   dark space next to a much taller sibling. Stretching gives both cards the
   same height; ec-trends below then distributes its own content down that
   full height instead of leaving it stranded at the top. */
.ec-row2 { display:grid; grid-template-columns:1.4fr 1fr; gap:16px; align-items:stretch; }
.ec-ops, .ec-trends, .ec-activity { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; }
.ec-trends { display:flex; flex-direction:column; }

.ec-ops-table { display:flex; flex-direction:column; }
.ec-ops-head { display:grid; grid-template-columns:minmax(0,1fr) 88px 88px; gap:8px; padding:0 4px 8px; font-size:10.5px; font-weight:700; letter-spacing:.05em; color:var(--t4); text-transform:uppercase; border-bottom:1px solid var(--line); }
.ec-ops-row { display:grid; grid-template-columns:minmax(0,1fr) 88px 88px; gap:8px; align-items:center; padding:11px 4px; border-bottom:1px solid var(--line-soft); transition:background .12s ease; }
.ec-ops-row:last-child { border-bottom:none; }
.ec-ops-row:hover { background:var(--tile); }
.ec-ops-row__name { font-size:13px; font-weight:600; color:var(--t1); display:flex; align-items:center; gap:6px; }
.ec-badge-fe { font-size:9px; font-weight:700; color:var(--t4); background:var(--tile); border:1px solid var(--line); border-radius:4px; padding:1px 4px; letter-spacing:.03em; }
.ec-ops-row__now, .ec-ops-row__prob { font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-size:13.5px; color:var(--t2); text-align:right; }

/* flex column so ec-trend-note (margin-top:auto) settles at the bottom of
   the stretched card instead of leaving a dead gap between it and the last
   row — see .ec-trends { display:flex } above. */
.ec-trend-list { display:flex; flex-direction:column; gap:2px; }
.ec-trend-row--big { padding:16px 4px; }
.ec-trend-row--big .ec-trend-row__label { font-size:13.5px; color:var(--t2); }
.ec-trend-row--big .ec-trend-row__value { font-size:22px; }
.ec-trend-row { display:flex; align-items:center; gap:10px; padding:9px 4px; border-bottom:1px solid var(--line-soft); }
.ec-trend-row:last-child { border-bottom:none; }
.ec-trend-row__label { flex:1; font-size:12.5px; color:var(--t3); }
.ec-trend-row__value { font-family:'IBM Plex Mono', monospace; font-variant-numeric:tabular-nums; font-size:15px; font-weight:600; color:var(--t1); }
.ec-trend-row__delta { display:flex; align-items:center; gap:3px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; font-weight:600; padding:2px 6px; border-radius:6px; }
.ec-trend-row__delta--up { color:var(--green); background:var(--green-soft); }
.ec-trend-row__delta--down { color:var(--red); background:var(--red-soft); }
.ec-trend-row__delta--flat { color:var(--t4); background:var(--tile); }
.ec-trend-note { margin-top:auto; padding-top:12px; font-size:11px; color:var(--t4); line-height:1.5; }

/* ── Activity ─────────────────────────────────────────────────────────── */
.ec-event-list { display:flex; flex-direction:column; }
.ec-event-row { display:grid; grid-template-columns:52px minmax(0,1fr) 160px; gap:12px; align-items:baseline; padding:8px 4px; border-bottom:1px solid var(--line-soft); }
.ec-event-row:last-child { border-bottom:none; }
.ec-event-row__time { font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--t4); }
.ec-event-row__text { font-size:12.5px; color:var(--t2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ec-event-row__who { font-size:11.5px; color:var(--t4); text-align:right; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── Responsive: 1920 / 1440 / 1280 / 390 ─────────────────────────────── */
/* 5 tiles into a 3-conceptual-column layout never divides evenly (row 2 gets
   an empty cell) — same problem styles/pages/director-panel.css already
   solved for its own 5-KPI row. Reusing its fix: a 6-unit grid, first 3
   tiles take 2 units each (fills row 1 exactly), last 2 take 3 units each
   (fills row 2 exactly). No empty cell at any width in this range. */
@media (max-width:1440px) and (min-width:901px) {
  .ec-kpi { grid-template-columns:repeat(6, minmax(0,1fr)); }
  .ec-kpi > .ec-kpi-tile { grid-column:span 2; }
  .ec-kpi > .ec-kpi-tile:nth-child(4),
  .ec-kpi > .ec-kpi-tile:nth-child(5) { grid-column:span 3; }
}
@media (max-width:1280px) {
  .ec-main { padding:18px 16px 40px; gap:16px; }
  .ec-row2 { grid-template-columns:1fr; }
  .ec-attention-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }
}
@media (max-width:900px) {
  .ec-kpi { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ec-header { padding:0 14px; }
  /* Главная/Модули/профиль stay reachable at every width — text labels
     compact to icon-only starting here, the controls themselves never
     disappear (dashboard must not become a dead end with no sidebar). */
  .ec-navlink__text { display:none; }
}
@media (max-width:480px) {
  .ec-kpi { grid-template-columns:1fr; }
  .ec-attention-band { flex-direction:column; height:auto; }
  .ec-attn-seg { flex-direction:row; justify-content:space-between; padding:10px 14px; height:auto; }
  .ec-attn-seg__label { text-align:left; padding:0; }
  .ec-attention-grid { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ec-ops-head, .ec-ops-row { grid-template-columns:minmax(0,1fr) 56px 56px; }
  .ec-event-row { grid-template-columns:44px minmax(0,1fr); }
  .ec-header__right { gap:4px; }
  /* Period: button-group is too wide for a phone next to refresh+profile —
     swap for a native <select>, same data, same handler, just a different
     control. Never fully removed (period must stay changeable on mobile). */
  .ec-periods { display:none; }
  .ec-period-select { display:block; }
  .ec-user__name { display:none; }
}
@media (min-width:481px) {
  .ec-period-select { display:none; }
}