/* Плотная раскладка админки. Грузится ПОСЛЕДНИМ (после admin.css, admin-workspace.css,
   admin-store.css, admin-radio.css) и перекрывает их: на 1366x768 прежняя вёрстка отдавала
   ~210 px под шапку, а строка списка была 70 px; в портрете список сжимался до 160 px,
   а карточка уезжала за край. Здесь: шапка в одну строку, плотные строки, и одна
   схема «список сверху, карточка снизу» для узких и вертикальных экранов. */

/* ---- Шапка, полоса задач, отступы ---------------------------------------- */
.top, body.dock-work .top {
  padding: 8px 16px; gap: 6px 12px; flex-wrap: nowrap; align-items: center;
}
.top > div:first-child {
  display: flex; align-items: baseline; gap: 12px; min-width: 0; flex: 1 1 auto;
}
.top h1, body.dock-work .top h1 { font-size: 18px; white-space: nowrap; }
.top #page-sub, body.dock-work #page-sub {
  display: block; margin: 0; min-width: 0; max-width: none; font-size: 12px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-actions { width: auto !important; flex: 0 1 auto; justify-content: flex-end; gap: 6px; }
.top-actions > button, .top-actions .pulse { height: 32px; display: inline-flex; align-items: center; }
.top-actions > button { padding: 0 12px; }
.play-box-pick { padding: 0 6px 0 10px; border-radius: 8px; }
.play-box-pick select { height: 30px; min-width: 130px; }
.job-strip { padding: 6px 16px 0; }
.job-pill { height: 26px; }
.content, body.dock-work .content { padding: 8px 16px 10px; }

/* ---- Сайдбар ------------------------------------------------------------- */
.side { padding: 12px 8px; gap: 10px; }
.side .brand { padding: 0 6px 4px; }
.nav { gap: 1px; }
.nav-item { padding: 7px 10px; }
.nav-group { padding: 10px 10px 3px; }
.side-foot { flex-direction: row; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 6px 0; }
.side-foot button { flex: none; }
@media (max-height: 820px) and (min-width: 981px) {
  .nav-item { padding: 6px 10px; }
  .nav-group { padding: 8px 10px 2px; }
}

/* ---- Тулбары и колонки --------------------------------------------------- */
.map-toolbar { margin-bottom: 8px; gap: 6px; }
.map-toolbar input[type=search], .map-toolbar select, .map-toolbar .ghost { height: 34px; }
.map-toolbar input[type=search], .map-toolbar select { padding: 0 10px; }
.map-toolbar .chip { height: 30px; }
.catalog-hint { margin: 0 0 6px; font-size: 12px; }
.map-col-head { padding: 6px 12px; min-height: 34px; }

.map-ch, .inbox-row { padding: 6px 12px; min-height: 46px; gap: 8px; }
.map-ch-sub { margin-top: 1px; }
.map-ch .ch-ico-slot { width: 28px; height: 28px; min-height: 28px; flex-basis: 28px; }
.map-cat { padding: 6px 12px; }
#view-radio .map-cat { padding: 6px 12px; }
.fleet-tr td { padding: 6px 10px; }
.fleet-table thead th { height: 32px; }

/* ---- Карточка (инспектор) ------------------------------------------------ */
.ins-tabs { padding: 0 14px; gap: 14px; }
.ins-tab, .ins-form .ins-tabs .ins-tab { padding: 8px 0; }
.ins-scroll, .ins-scroll-fleet, #dev-ins-body .ins-scroll-fleet { padding: 12px 14px; gap: 12px; }
.ins-hero { padding-bottom: 10px; }
.ins-hero-actions { margin-top: 8px; }
.channel-hero-key { margin-bottom: 6px; }
.ins-foot { padding: 8px 14px; }

/* ---- Широкий экран: колонки рядом ---------------------------------------- */
@media (min-width: 1101px) and (min-aspect-ratio: 4/5) {
  #view-map .map-layout { grid-template-columns: minmax(300px, 36%) minmax(0, 1fr); }
  #view-devices .fleet-layout { grid-template-columns: minmax(0, 1fr) minmax(360px, 36%); }
  #view-inbox .inbox-layout { grid-template-columns: minmax(0, 1fr) minmax(170px, 15%) minmax(380px, 40%); }
  #view-catalog .src-layout { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr); }
  #view-epg .epg-layout { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) minmax(0, 1.4fr); }
  #view-radio .rd-layout { grid-template-columns: 170px minmax(0, 1fr) minmax(360px, 38%); }
}

/* ---- Узкий или вертикальный экран: список сверху, карточка снизу --------- */
@media (max-width: 1100px), (max-aspect-ratio: 4/5) {
  .top, body.dock-work .top { flex-wrap: wrap; }
  .top > div:first-child { flex: 1 1 260px; }

  #view-map .map-layout,
  #view-devices .fleet-layout,
  #view-inbox .inbox-layout,
  #view-catalog .src-layout,
  #view-epg .epg-layout,
  #view-radio .rd-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 2fr) minmax(0, 3fr);
    overflow: hidden;
  }
  /* Две верхние колонки рядом, карточка на всю ширину под ними. */
  #view-inbox .inbox-layout { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
  #view-catalog .src-layout, #view-epg .epg-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  #view-radio .rd-layout { grid-template-columns: minmax(120px, .5fr) minmax(0, 1fr); }

  #view-map #map-list-wrap,
  #view-devices #dev-list-wrap { grid-column: 1; grid-row: 1; }
  #view-inbox .inbox-layout > .map-col:first-child,
  #view-catalog #src-list-wrap,
  #view-epg #epg-feeds-wrap,
  #view-radio .rd-layout > .map-col:first-child { grid-column: 1; grid-row: 1; }
  #view-inbox #inbox-thin-wrap,
  #view-catalog #src-entries-wrap,
  #view-epg #epg-cards-wrap,
  #view-radio .rd-layout > .map-col:nth-child(2) {
    grid-column: 2; grid-row: 1; border-left: 1px solid var(--border); border-top: 0;
  }
  #view-map .map-layout > .map-inspector,
  #view-devices .fleet-layout > .map-inspector,
  #view-inbox .inbox-layout > .map-inspector,
  #view-catalog .src-layout > .map-inspector,
  #view-epg .epg-layout > .map-inspector,
  #view-radio .rd-layout > .map-inspector {
    grid-column: 1 / -1; grid-row: 2;
    position: static; height: auto; max-height: none; min-height: 0;
    border-left: 0; border-top: 1px solid var(--border);
  }
  #src-ins, #epg-ins { height: auto; max-height: none; }
}

/* ---- Сайдбар сверху (≤980): оболочка остаётся на всю высоту окна ---------- */
@media (max-width: 980px) {
  .shell { grid-template-rows: auto minmax(0, 1fr); height: 100dvh; min-height: 0; overflow: hidden; }
  .side { padding: 6px 10px; gap: 4px 12px; }
  .side .brand { padding: 0; }
  .nav { gap: 2px; }
  .nav-item { padding: 6px 10px; white-space: nowrap; }
  .nav-group { display: none; }
  .workspace { overflow: hidden; min-height: 0; }
  body.dock-work .content { overflow: hidden; }
  body.dock-work .content > section:not(.hidden) { overflow: hidden; min-height: 0; }
}

/* ---- Телефон ------------------------------------------------------------- */
@media (max-width: 640px) {
  .top #page-sub { display: none; }
  .top-actions { flex: 1 1 100%; justify-content: flex-start; }
  .play-box-pick select { min-width: 0; max-width: 150px; }
  .content, body.dock-work .content { padding: 6px 8px 8px; }
  .job-strip { padding: 4px 8px 0; }
  /* Три колонки на 360 px не помещаются рядом — всё в один столбец. */
  #view-inbox .inbox-layout,
  #view-catalog .src-layout,
  #view-epg .epg-layout,
  #view-radio .rd-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 2fr);
  }
  #view-inbox #inbox-thin-wrap,
  #view-catalog #src-entries-wrap,
  #view-epg #epg-cards-wrap,
  #view-radio .rd-layout > .map-col:nth-child(2) {
    grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid var(--border);
  }
  #view-inbox .inbox-layout > .map-inspector,
  #view-catalog .src-layout > .map-inspector,
  #view-epg .epg-layout > .map-inspector,
  #view-radio .rd-layout > .map-inspector { grid-row: 3; }
}

/* Алиасы в карточке: строка была 52 px из-за полей ввода и кнопок по 40 px. */
.alias-row { padding: 2px 0 2px 10px; }
.alias-row input, .alias-row button { height: 28px; }
.alias-row button { padding: 0 10px; font-size: 12px; }

/* ---- Магазин и версии ---------------------------------------------------- */
.stx-view { gap: 8px; }
.stx-stat { padding: 6px 12px; }
.stx-stat .k { font-size: 10px; }
.stx-stat .v { margin-top: 1px; font-size: 18px; line-height: 1.2; }
.stx-stat .s { margin-top: 0; line-height: 1.35; }
.stx-issues { gap: 4px; max-height: 96px; overflow: auto; }
.stx-issue { padding: 4px 10px; }
.stx-bar { gap: 6px; }
.stx-btn { height: 30px; padding: 0 10px; }
.stx-bar .stx-in, .stx-bar input[type="search"] { height: 30px; }
.stx-pane-h { padding: 6px 12px; min-height: 36px; }
.stx-row { padding: 6px 12px; min-height: 50px; gap: 10px; grid-template-columns: 36px minmax(0, 1fr) auto; }
.stx-row > img, .stx-row > .stx-ico { width: 36px; height: 36px; }
.stx-row .s { margin-top: 1px; }
.stx-row.plain { min-height: 40px; }
.stx-group-h { padding: 5px 12px; }

/* ---- Источники: строка кнопок съедала имя -------------------------------- */
#view-catalog .src-add { flex-wrap: nowrap; }
#view-catalog .src-add input:not([type="file"]) { min-width: 0; height: 34px; }
#view-catalog .src-add button, #view-catalog .src-add .src-file { height: 34px; flex: none; }
#view-catalog .src-workbar > input[type="search"] { height: 34px; }
@media (max-width: 1100px), (max-aspect-ratio: 4/5) {
  /* Фильтры магазина — одна прокручиваемая строка, а не три ряда чипов. */
  .stx-bar .stx-chips { flex: 1 1 100%; order: 3; flex-wrap: nowrap; overflow-x: auto; min-width: 0; scrollbar-width: thin; }
  .stx-bar .stx-chip { flex: none; }
  .stx-bar .grow { display: none; }
}
@media (max-width: 640px) {
  /* Кнопки шапки и фильтры — по одной прокручиваемой строке, иначе на телефоне
     список получал три строки из восьмисот пикселей. */
  .top-actions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .top-actions > * { flex: none; }
  .map-toolbar { flex-wrap: wrap; }
  .map-toolbar input[type=search] { flex: 1 1 100%; min-width: 0; }
  .map-toolbar select { flex: 1 1 0; min-width: 0; max-width: none; }
  .map-toolbar .chips { flex: 1 1 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .map-toolbar .chip { flex: none; }
  #view-map .map-layout, #view-devices .fleet-layout { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
  .side .brand-sub, #inbox-hint { display: none; }
}

/* ---- Диагностика → Фоновые задачи (admin-jobs.js) ------------------------ */
#jobs-panel.jx-on #jobs-list { display: none; }
.jx { display: flex; flex-direction: column; gap: 8px; }
.jx-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); }
.jx-dot.run { background: var(--warn); box-shadow: 0 0 0 3px rgba(251, 191, 36, .18); }
.jx-dot.ok { background: var(--ok); }
.jx-dot.warn { background: #f0a35e; }
.jx-dot.err { background: var(--danger); }
.jx-n { font-size: 11px; font-weight: 600; white-space: nowrap; }
.jx-n.err { color: var(--danger); }

.jx-live { border: 1px solid rgba(251, 191, 36, .4); border-radius: 8px; padding: 8px 12px; }
.jx-live-h { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.jx-live-h b { font-size: 13px; }
.jx-live-h .muted, .jx-live-s { font-size: 12px; }
.jx-live-s { display: flex; flex-wrap: wrap; gap: 2px 12px; margin-top: 4px; }
.jx-live-s .muted { overflow-wrap: anywhere; }
.jx-bar { height: 4px; margin-top: 8px; border-radius: 999px; background: var(--deep); overflow: hidden; }
.jx-bar span { display: block; height: 100%; background: var(--warn); transition: width .35s ease; }
.jx-det { margin-top: 4px; font-size: 12px; }
.jx-det summary { cursor: pointer; color: var(--danger); }

.jx-bar-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; font-size: 12px; }
.jx-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
.jx-seg button {
  appearance: none; border: 0; background: transparent; color: var(--muted);
  font: inherit; font-size: 12px; padding: 4px 10px; cursor: pointer;
}
.jx-seg button + button { border-left: 1px solid var(--border); }
.jx-seg button.on { background: var(--action); color: var(--action-fg); }
.jx-seg i { font-style: normal; opacity: .7; margin-left: 4px; }

.jx-groups { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.jx-grp + .jx-grp { border-top: 1px solid var(--border); }
.jx-grp-h {
  appearance: none; width: 100%; border: 0; background: transparent; color: inherit; font: inherit;
  display: flex; align-items: center; gap: 10px; padding: 7px 12px; text-align: left; cursor: pointer;
}
.jx-grp-h:hover, .jx-grp.on > .jx-grp-h { background: var(--card-hover, rgba(255, 255, 255, .03)); }
.jx-caret { width: 10px; flex: none; color: var(--muted); font-size: 11px; }
.jx-name { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 10px; overflow: hidden; }
.jx-name b { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 0 1 auto; min-width: 0; }
.jx-name .muted { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.jx-strip { display: inline-flex; gap: 2px; flex: none; }
.jx-strip i { width: 6px; height: 14px; border-radius: 2px; background: var(--muted); opacity: .85; }
.jx-strip i.ok { background: var(--ok); opacity: .55; }
.jx-strip i.warn { background: #f0a35e; }
.jx-strip i.err { background: var(--danger); }
.jx-cnt { width: 34px; flex: none; text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

.jx-runs { padding: 2px 0 6px 32px; max-height: 320px; overflow: auto; }
.jx-run {
  display: grid; grid-template-columns: 8px 92px 84px minmax(0, 1fr) 70px 80px;
  gap: 10px; align-items: center; padding: 3px 12px 3px 0; font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.jx-run[data-run] { cursor: pointer; }
.jx-run[data-run]:hover { color: var(--text); background: rgba(255, 255, 255, .03); }
.jx-run .jx-t, .jx-run .jx-d { color: var(--muted); }
.jx-run .jx-p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jx-run .jx-e { color: var(--danger); text-align: right; }
.jx-run.err .jx-st { color: var(--danger); }
.jx-run-more { padding: 2px 12px 8px 18px; font-size: 12px; }
.jx-run-more .muted { overflow-wrap: anywhere; }
.jx-errs { margin: 4px 0 0; padding-left: 18px; max-height: 180px; overflow: auto; font-size: 12px; }
.jx-errs li { overflow-wrap: anywhere; }
.jx-more { align-self: flex-start; font-size: 12px; }
.jx-empty { font-size: 12px; padding: 4px 0; }
@media (max-width: 640px) {
  .jx-strip { display: none; }
  .jx-name { flex-direction: column; gap: 0; }
  .jx-runs { padding-left: 12px; }
  .jx-run { grid-template-columns: 8px 84px minmax(0, 1fr) 64px; }
  .jx-run .jx-st, .jx-run .jx-e { display: none; }
}