/* Панель операторов – единый стиль. Тёмная тема, цвета по смыслу:
   зелёный – хорошо/готово, жёлтый – ждёт/внимание, красный – ошибка/бан,
   синий – идёт сейчас, фиолетовый – диалог, серый – нейтрально/очередь. */
:root {
  --bg: #0E1016; --side: #12151D; --card: #161A24; --card2: #1A1E29;
  --line: #232838; --line2: #2A3042; --hover: #1C2130;
  --text: #E7E9EE; --text2: #C9CDD8; --muted: #9AA1B2;
  --accent: #3B6BFF; --accent-soft: #1E2640; --accent-text: #8FB0FF;
  --ok: #4FD39A; --ok-bg: #123A2C; --ok-bar: #2FB67C;
  --warn: #F2BE5C; --warn-bg: #3A2A12; --warn-bar: #E0A83A;
  --bad: #FF8A93; --bad-bg: #3A1519; --bad-bar: #E5484D;
  --info: #9DBBFF; --info-bg: #17305E; --info-bar: #4C8DFF;
  --dlg: #BDB2FF; --dlg-bg: #2B2457; --dlg-bar: #8B7CF6;
  --gray: #C9CDD8; --gray-bg: #1E2230; --gray-bar: #6B7385;
  --radius: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body { font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
       -webkit-font-smoothing: antialiased; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: #B9CEFF; }
.mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
h1 { margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
h2 { margin: 0; font-size: 16px; font-weight: 600; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; border-radius: 6px; }

/* ---------- раскладка ---------- */
.app { display: flex; min-height: 100vh; }
.side { width: 240px; flex: none; background: var(--side); border-right: 1px solid var(--line);
        padding: 18px 12px; display: flex; flex-direction: column; gap: 18px;
        position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.content { flex: 1; min-width: 0; padding: 28px 36px 56px; display: flex; flex-direction: column; gap: 20px; }
.brand { display: flex; align-items: center; gap: 10px; padding: 2px 8px; }
.brand-logo { width: 30px; height: 30px; border-radius: 8px; background: var(--accent); color: #fff;
              display: flex; align-items: center; justify-content: center; flex: none; }
.brand b { display: block; font-size: 15px; }
.nav { display: flex; flex-direction: column; gap: 2px; }
.nav a { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 8px;
         color: var(--text2); font-weight: 500; }
.nav a:hover { background: var(--hover); color: var(--text); }
.nav a.on { background: var(--accent-soft); color: #fff; font-weight: 600; }
.nav a.on svg { stroke: var(--accent-text); }
.nav .count { margin-left: auto; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 1px 8px; }
.side-label { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 0 8px; }
.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.me { display: flex; align-items: center; gap: 10px; padding: 4px 6px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: #2A3350; color: #B9CEFF;
          display: flex; align-items: center; justify-content: center; font-weight: 600; flex: none; }
.me .who { flex: 1; min-width: 0; line-height: 1.3; }
.me .who b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-head { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; justify-content: space-between; }
.page-head .meta { display: flex; gap: 14px; flex-wrap: wrap; color: var(--muted); font-size: 13px; margin-top: 6px; }
.crumbs { font-size: 13px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

@media (max-width: 860px) {
  .app { flex-direction: column; }
  .side { width: auto; height: auto; position: static; flex-direction: column; }
  .nav { flex-direction: row; flex-wrap: wrap; }
  .side-bottom { margin-top: 0; }
  .content { padding: 20px 16px 40px; }
}

/* ---------- карточки и сетки ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span2 { grid-column: span 2; }
.kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
       display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kpi .label { font-size: 12px; color: var(--muted); }
/* число прижато вниз: если подпись в соседней плитке в две строки, числа всё равно на одном уровне */
.kpi .value { margin-top: auto; font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.kpi .value small { font-size: 16px; color: var(--muted); font-weight: 500; }
.kpi .sub { font-size: 12px; color: var(--muted); }
a.kpi:hover { border-color: var(--line2); background: var(--card2); }
.c-ok { color: var(--ok); } .c-warn { color: var(--warn); } .c-bad { color: var(--bad); }
.c-info { color: var(--accent-text); } .c-dlg { color: var(--dlg); } .c-gray { color: var(--gray); }
@media (max-width: 1100px) { .g3 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .span2 { grid-column: auto; } }
@media (max-width: 760px) { .g2 { grid-template-columns: repeat(1, minmax(0, 1fr)); } }

/* ---------- таблетки статусов ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
        padding: 3px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.5; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.nodot::before { display: none; }
.p-ok { background: var(--ok-bg); color: var(--ok); }
.p-warn { background: var(--warn-bg); color: var(--warn); }
.p-bad { background: var(--bad-bg); color: var(--bad); }
.p-info { background: var(--info-bg); color: var(--info); }
.p-dlg { background: var(--dlg-bg); color: var(--dlg); }
.p-gray { background: var(--gray-bg); color: var(--gray); }
.p-big { font-size: 13px; padding: 5px 12px; }

/* ---------- полосы ---------- */
.bar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #262B39; }
.bar.big { height: 14px; border-radius: 7px; }
.bar > span { display: block; height: 100%; }
.b-ok { background: var(--ok-bar); } .b-ok2 { background: #1E7A55; } .b-warn { background: var(--warn-bar); }
.b-bad { background: var(--bad-bar); } .b-info { background: var(--info-bar); } .b-dlg { background: var(--dlg-bar); }
.b-gray { background: var(--gray-bar); }
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 12px; color: var(--text2); margin-top: 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mini { display: flex; align-items: center; gap: 8px; min-width: 110px; }
.mini .bar { flex: 1; height: 6px; }

/* ---------- таблицы ---------- */
.table-wrap { overflow-x: auto; margin: 0 -4px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t th { text-align: left; font-weight: 500; color: var(--muted); padding: 8px 10px;
             border-bottom: 1px solid var(--line); white-space: nowrap; }
table.t td { padding: 10px; border-bottom: 1px solid #1E2230; vertical-align: middle; }
table.t tr:last-child td { border-bottom: 0; }
table.t tbody tr:hover td { background: #181C27; }
table.t .sub { display: block; font-size: 12px; color: var(--muted); }
.empty { color: var(--muted); padding: 28px 8px; text-align: center; }

/* ---------- кнопки и поля ---------- */
.btn { font: inherit; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       min-height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer;
       background: var(--accent); color: #fff; text-decoration: none; white-space: nowrap; }
.btn:hover { filter: brightness(1.1); color: #fff; }
.btn.ghost { background: var(--card); border-color: var(--line2); color: var(--text); }
.btn.ghost:hover { background: var(--hover); }
.btn.danger { background: var(--bad-bg); border-color: #5A2A30; color: #FF9EA6; }
.btn.sm { min-height: 32px; padding: 0 10px; font-size: 13px; border-radius: 8px; }
.btn.link { background: none; border: 0; color: var(--accent-text); padding: 0 4px; min-height: 28px; font-weight: 500; }
.btn[disabled] { opacity: .5; cursor: default; }
.input, select.input { font: inherit; color: var(--text); background: var(--card2); border: 1px solid var(--line2);
        border-radius: 8px; padding: 8px 10px; min-height: 38px; }
.input:focus { border-color: var(--accent-text); outline: none; }
.input.num { width: 96px; }
.input.wide { width: 100%; max-width: 360px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > span { font-size: 13px; color: var(--text2); }
.form-rows { display: flex; flex-direction: column; }
.form-row { display: grid; grid-template-columns: 300px 380px minmax(0, 1fr); gap: 16px;
            align-items: center; padding: 12px 0; border-bottom: 1px solid #1E2230; }
.form-row:last-child { border-bottom: 0; }
.form-row .hint { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .form-row { grid-template-columns: 1fr; gap: 6px; } }
.check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* сегментный переключатель (фильтры) */
.seg { display: inline-flex; gap: 4px; background: #11141C; border: 1px solid var(--line); border-radius: 10px; padding: 3px; flex-wrap: wrap; }
.seg button { font: inherit; font-size: 13px; font-weight: 600; min-height: 32px; padding: 0 12px; border-radius: 8px;
              border: 0; cursor: pointer; background: transparent; color: var(--muted); }
.seg button.on { background: #2A3350; color: #fff; }
.seg .n { color: var(--muted); font-weight: 500; margin-left: 4px; }

/* уведомления */
.alert { border-radius: var(--radius); padding: 12px 16px; border: 1px solid; }
.alert.ok { background: #0F2A20; border-color: #1E5A42; color: var(--ok); }
.alert.bad { background: #2A1215; border-color: #5A2A30; color: #FFB3B9; }
.alert.info { background: #121D38; border-color: #23386A; color: var(--info); }
.alert.warn { background: #2A2010; border-color: #5C4517; color: var(--warn); }
.alert a { color: inherit; text-decoration: underline; }

/* журнал */
.feed { list-style: none; margin: 0; padding: 0; }
.feed li { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1E2230; }
.feed li:last-child { border-bottom: 0; }
.feed .t { color: var(--muted); font-size: 12px; padding-top: 1px; flex: none; }
.feed .dot { flex: none; margin-top: 7px; width: 8px; height: 8px; border-radius: 50%; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ok); }
.live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok);
                animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }

/* выбор эмуляторов плитками */
.chips { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
         max-height: 320px; overflow-y: auto; padding: 2px; }
.chip { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid var(--line2);
        border-radius: 10px; background: var(--card2); cursor: pointer; }
.chip:hover { border-color: #3A4260; }
.chip input { width: 16px; height: 16px; accent-color: var(--accent); flex: none; }
.chip .chip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.chip .chip-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px;
                   font-size: 12px; color: var(--muted); white-space: nowrap; }
.chip.dim { opacity: .55; }
.step { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.step .n { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-text);
           display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }

/* вход */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login .card { width: 100%; max-width: 400px; padding: 28px; }
.code-input { font: 600 26px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: 8px; text-align: center;
              width: 100%; padding: 14px; border-radius: 10px; border: 1px solid var(--line2); background: var(--card2); color: var(--text); }
.code-input:focus { border-color: var(--accent-text); outline: none; }

input[type=file].input { padding: 6px; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; color: var(--text); background: #262B39;
  border: 1px solid var(--line2); border-radius: 7px; padding: 6px 12px; margin-right: 12px; cursor: pointer; }
input[type=file]::file-selector-button:hover { background: #2E3446; }

input[type=search].input { min-width: 240px; }
@media (max-width: 760px) { input[type=search].input { min-width: 0; width: 100%; } }
details.help { padding: 12px 20px; }
details.help summary { cursor: pointer; color: var(--text2); font-weight: 600; }
.help-grid { display: grid; gap: 10px 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 12px; }
.help-grid > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.person { display: flex; gap: 10px; align-items: center; white-space: nowrap; }
tr.edit-row td { background: #131722; padding: 16px 14px; }
.edit-grid { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }
.slot-legend { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.slot-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.slot-legend b { color: var(--text2); font-weight: 600; text-align: right; }

th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--text2); }
th[data-sort]::after { content: " ⇅"; opacity: .75; font-size: 13px; color: var(--accent-text); }
th[data-sort][data-dir="asc"]::after { content: " ↑"; opacity: 1; }
th[data-sort][data-dir="desc"]::after { content: " ↓"; opacity: 1; }
.num-badge { display: inline-block; min-width: 34px; text-align: center; font-weight: 700; font-size: 12px;
             padding: 2px 6px; border-radius: 6px; background: #232A3D; color: #B9CEFF; font-variant-numeric: tabular-nums; }
.tags { display: flex; gap: 4px; flex-wrap: wrap; }
.tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 6px; white-space: nowrap;
       background: #262B39; color: var(--text2); border: 1px solid transparent; }
.power-on { color: var(--ok); font-weight: 600; white-space: nowrap; }
.power-off { color: var(--muted); white-space: nowrap; }

.clip { max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.t td .tags { max-width: 150px; }

.p-teal { background: #10333A; color: #5FD4E0; }
.b-teal { background: #2BB3C0; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0;
         background: #1E2A44; color: #DCE6FF; border: 1px solid #2E4270; padding: 12px 18px;
         border-radius: 10px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,.4);
         transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50; max-width: 90vw; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.bad { background: #3A1519; color: #FFB3B9; border-color: #5A2A30; }

.qwrap { position: relative; display: inline-block; vertical-align: middle; }
.qhint { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
         border-radius: 50%; border: 0; background: #2A3350; color: #B9CEFF; font: 700 11px/1 Inter, sans-serif;
         cursor: help; margin-left: 4px; padding: 0; }
.qwrap .tip { display: none; position: absolute; top: 26px; left: -40px; z-index: 30; width: 360px;
              background: #1E2433; border: 1px solid #343C52; border-radius: 10px; padding: 12px 14px;
              color: var(--text2); font-size: 12px; font-weight: 400; line-height: 1.6; text-transform: none;
              white-space: normal; text-align: left; box-shadow: 0 12px 30px rgba(0,0,0,.45); }
.qwrap .tip b { color: var(--text); font-weight: 600; }
.qwrap:hover .tip, .qwrap:focus-within .tip { display: block; }


.kpi[title] { cursor: help; }

/* подсказка у заголовка не должна обрезаться прокруткой таблицы */
.table-wrap:has(.qwrap:hover), .table-wrap:has(.qwrap:focus-within) { overflow: visible; }

/* ---------- свёрнутое меню ---------- */
.brand { position: relative; }
.side-toggle { margin-left: auto; background: none; border: 0; color: var(--muted); cursor: pointer;
               width: 32px; height: 32px; border-radius: 8px; display: inline-flex; align-items: center;
               justify-content: center; flex: none; }
.side-toggle:hover { background: var(--hover); color: var(--text); }
.side, .side * { transition: none; }
.app.side-min .side { width: 68px; padding: 18px 10px; align-items: center; }
.app.side-min .side .lbl { display: none !important; }
.app.side-min .brand { flex-direction: column; gap: 10px; padding: 0; }
.app.side-min .side-toggle { margin-left: 0; transform: scaleX(-1); }
.app.side-min .nav a { justify-content: center; padding: 10px; position: relative; }
.app.side-min .nav .count { position: absolute; top: 2px; right: 2px; padding: 0 5px; font-size: 10px; line-height: 16px; }
.app.side-min .me { flex-direction: column; padding: 0; }
@media (max-width: 860px) { .side-toggle { display: none; } .app.side-min .side { width: auto; } }

.btn.pw-on { background: transparent; border-color: #2E4270; color: var(--accent-text); }
.btn.pw-on:hover { background: #17213A; }
.btn.pw-off { background: transparent; border-color: #5C4517; color: var(--warn); }
.btn.pw-off:hover { background: #2A2010; }

.pro { display: inline-block; font-size: 10px; font-weight: 700; letter-spacing: .03em; padding: 1px 6px;
       border-radius: 5px; background: #2B2457; color: var(--dlg); vertical-align: 1px; margin-left: 4px; }

/* статистика: загрузка по часам */
.hours { display: flex; flex-direction: column; gap: 6px; }
.hrow { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; }
.hbars { height: 140px; align-items: end; border-bottom: 1px solid var(--line2); padding-bottom: 2px; }
.hbars .hcell { height: 100%; display: flex; align-items: flex-end; justify-content: center; }
.hbars .hcell span { width: 70%; max-width: 14px; border-radius: 3px 3px 0 0; background: var(--info-bar); }
.hshift .hcell { height: 10px; border-radius: 3px; background: #1E2230; }
.hshift .hcell.on { background: var(--ok-bar); }
.hshift .hcell.gap { background: var(--bad-bar); }
.hlbls span { font-size: 11px; color: var(--muted); text-align: center; }
.mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.mini-stats > div { display: flex; flex-direction: column; gap: 2px; }
.mini-stats b { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.qwrap.end .tip { left: auto; right: -8px; }
.qwrap .tip { max-width: calc(100vw - 48px); }
.qwrap .tip { max-width: calc(100vw - 32px); }
/* шесть плиток: в ряд, по три или по две – без одной «осиротевшей» внизу */
.kpis.k6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1400px) { .kpis.k6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .kpis.k6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* страницы таблиц */
.pg-off { display: none !important; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 12px; margin-top: 4px; border-top: 1px solid #1E2230; }
.pg-nums { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.pg { font: inherit; font-size: 13px; font-weight: 600; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 8px;
      border: 1px solid var(--line2); background: var(--card); color: var(--text2); cursor: pointer; font-variant-numeric: tabular-nums; }
.pg:hover:not([disabled]) { background: var(--hover); color: var(--text); }
.pg.on { background: #2A3350; border-color: #3A4A7A; color: #fff; }
.pg[disabled] { opacity: .4; cursor: default; }
.pg-size { min-height: 32px; padding: 0 8px; font-size: 13px; }

/* выпадающие списки: своя стрелка с отступом от края вместо системной */
select.input { appearance: none; -webkit-appearance: none; padding-right: 38px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B93A7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }
select.input:hover { border-color: #3A4260; }
select.input option { background: var(--card2); color: var(--text); }
.pg-size.input { padding-left: 12px; padding-right: 34px; background-position: right 12px center; }

/* свои выпадающие списки (app.js): кнопка вместо select и всплывающий список */
.cs-native { position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.cs-btn { display: inline-flex; align-items: center; text-align: left; cursor: pointer; padding-right: 38px; position: relative;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B93A7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; }
.cs-btn:hover:not([disabled]) { border-color: #3A4260; }
.cs-btn.open { border-color: var(--accent-text); }
.cs-btn[disabled] { opacity: .6; cursor: default; }
.cs-val { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-pop { position: fixed; z-index: 100; max-width: min(420px, calc(100vw - 16px)); max-height: 340px; display: flex; flex-direction: column;
  background: #1A1F2C; border: 1px solid #343C52; border-radius: 10px; box-shadow: 0 14px 36px rgba(0,0,0,.5); padding: 6px; outline: none; }
.cs-search { font: inherit; font-size: 13px; color: var(--text); background: var(--card2); border: 1px solid var(--line2); border-radius: 8px;
  padding: 7px 10px; margin-bottom: 6px; outline: none; }
.cs-search:focus { border-color: var(--accent-text); }
.cs-list { overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
.cs-opt { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 7px;
  font-size: 14px; color: var(--text2); cursor: pointer; white-space: nowrap; }
.cs-opt.act { background: var(--hover); color: var(--text); }
.cs-opt.sel { color: #fff; font-weight: 600; }
.cs-opt .cs-ok { visibility: hidden; color: var(--accent-text); flex: none; }
.cs-opt.sel .cs-ok { visibility: visible; }
.cs-opt.dis { opacity: .45; cursor: default; }

/* своё окно подтверждения и форм */
.md-back { position: fixed; inset: 0; z-index: 200; background: rgba(5, 7, 12, .62); display: flex;
  align-items: center; justify-content: center; padding: 16px; animation: md-in .12s ease-out; }
.md { width: 100%; max-width: 440px; background: #1A1F2C; border: 1px solid #343C52; border-radius: 14px;
  padding: 22px 22px 18px; box-shadow: 0 24px 60px rgba(0,0,0,.55); }
.md-title { font-size: 17px; margin: 0 0 8px; }
.md-text { margin: 0 0 18px; color: var(--text2); line-height: 1.55; }
.md-text:empty { display: none; }
.md-actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.md .field { margin-bottom: 12px; }
.md .input { width: 100%; }
.btn.danger-solid { background: var(--bad-bar); border-color: var(--bad-bar); color: #fff; }
@keyframes md-in { from { opacity: 0; } to { opacity: 1; } }

/* свои подсказки (вместо title) */
.tipf { position: fixed; z-index: 300; max-width: 320px; background: #1E2433; border: 1px solid #343C52;
  border-radius: 8px; padding: 7px 10px; font-size: 12px; line-height: 1.5; color: var(--text2);
  box-shadow: 0 10px 24px rgba(0,0,0,.45); pointer-events: none; }

/* выбор файла */
.cf { display: inline-flex; align-items: center; gap: 10px; min-height: 38px; }
.cf-name { font-size: 13px; max-width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* календарь */
.cd-btn { text-align: left; cursor: pointer; min-width: 130px; font-variant-numeric: tabular-nums; }
.cal { padding: 10px; width: 280px; }
.cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.cal-head b { font-weight: 600; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-wd { font-size: 11px; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-d { font: inherit; font-size: 13px; height: 34px; border: 0; border-radius: 7px; background: none;
  color: var(--text2); cursor: pointer; font-variant-numeric: tabular-nums; }
.cal-d:hover:not([disabled]) { background: var(--hover); color: var(--text); }
.cal-d.today { box-shadow: inset 0 0 0 1px #3A4A7A; }
.cal-d.sel { background: var(--accent); color: #fff; font-weight: 600; }
.cal-d[disabled] { opacity: .3; cursor: default; }

/* без системных стрелок в числовых полях */
input[type=number] { -moz-appearance: textfield; appearance: textfield; }
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* своя проверка полей */
.input.invalid, .cs-btn.invalid, .cd-btn.invalid { border-color: var(--bad-bar) !important; box-shadow: 0 0 0 3px rgba(229, 72, 77, .18); }
.cf.invalid .btn { border-color: var(--bad-bar); }
.ferr { color: #FF9EA6; font-size: 12px; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
.ferr::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--bad-bar); color: #fff;
  font-weight: 700; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; }

/* итоги чатов – метки с числом */
.oc { display: flex; flex-wrap: wrap; gap: 6px; }
.oc span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 12px;
  background: #1E2230; color: var(--text2); white-space: nowrap; }
.oc b { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.oc i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
/* ошибка под полем в строке формы не сдвигает соседние кнопки */
.field { position: relative; }
.field > .ferr { position: absolute; top: 100%; left: 0; white-space: nowrap; }
.md .field > .ferr { position: static; }
/* статистика операторов: много колонок – заголовки в две строки, итоги столбиком */
table.t.t-tight td { white-space: nowrap; }
table.t.t-tight th, table.t.t-tight td { padding-left: 8px; padding-right: 8px; }
.oc.col { flex-direction: column; align-items: flex-start; gap: 4px; }
form.has-err:has(.field > .ferr) { padding-bottom: 24px; }
.md form.has-err { padding-bottom: 0; }
.pro.test { background: var(--warn-bg); color: var(--warn); border-color: #5C4517; }