/* Начальная страница и общая «мебель» оболочки.
 *
 * Цвета берём только из токенов (tokens.css → палитра Fluent 2), поэтому
 * тёмная тема работает сама: своих #RRGGBB здесь нет.
 */

/* ── Иконки оболочки ────────────────────────────────────────────── */
.ui-ico { flex: 0 0 auto; display: block; }

/* ── Каркас страницы ────────────────────────────────────────────── */
.sf-home { display: flex; flex-direction: column; gap: 16px; }

.sf-home__head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
}
.sf-home__head h1 {
    margin: 0; font-size: var(--fs-title); font-weight: 600; line-height: 1.2;
    color: var(--text-primary); letter-spacing: -.01em;
}
.sf-home__sub { margin: 4px 0 0; font-size: var(--fs-body); color: var(--text-secondary); }

.sf-ghost-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; font: inherit; font-size: var(--fs-body);
    color: var(--text-primary); background: var(--surface-card);
    border: 1px solid var(--border-default); border-radius: var(--radius-sm);
    cursor: pointer; transition: border-color var(--motion-fast), background var(--motion-fast);
}
.sf-ghost-btn:hover:not(:disabled) { border-color: var(--brand-2); color: var(--brand-2); }
.sf-ghost-btn:disabled { opacity: .55; cursor: default; }
.sf-ghost-btn:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }

/* ── Требует внимания ───────────────────────────────────────────── */
.sf-alerts {
    background: var(--color-warning-bg);
    border: 1px solid var(--border-default);
    border-left: 3px solid var(--color-warning);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}
.sf-alerts.is-clear {
    background: var(--color-success-bg);
    border-left-color: var(--color-success);
}
.sf-alerts__head { display: flex; align-items: center; gap: 8px; color: var(--color-warning); }
.sf-alerts.is-clear .sf-alerts__head { color: var(--color-success); }
.sf-alerts__title { font-size: var(--fs-body); font-weight: 600; letter-spacing: .01em; }
.sf-alerts__empty { margin: 6px 0 0 25px; font-size: var(--fs-body); color: var(--text-secondary); }

.sf-link-btn {
    margin-left: auto; padding: 0; border: none; background: none;
    font: inherit; font-size: var(--fs-caption); color: var(--brand-2); cursor: pointer;
}
.sf-link-btn:hover { text-decoration: underline; }
/* Внутри цветной полосы синяя ссылка тонет (особенно в тёмной теме) —
   берём цвет самой полосы, она уже контрастна к своему фону. */
.sf-alerts .sf-link-btn { color: inherit; text-decoration: underline; opacity: .85; }
.sf-alerts .sf-link-btn:hover { opacity: 1; }

.sf-alerts__list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; }
.sf-alerts__list li {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 7px 0; border-top: 1px solid var(--border-default);
}
.sf-alerts__list li:first-child { border-top: none; padding-top: 2px; }
.sf-alerts__ico { margin-top: 1px; color: var(--color-warning); }
.sf-alerts__list li.sev-error .sf-alerts__ico { color: var(--color-danger); }
.sf-alerts__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.sf-alerts__body .t { font-size: var(--fs-body); color: var(--text-primary); }
.sf-alerts__body .d { font-size: var(--fs-caption); color: var(--text-secondary); overflow-wrap: anywhere; }
.sf-alerts__go {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--radius-sm);
    color: var(--text-secondary); text-decoration: none;
}
.sf-alerts__go:hover { background: var(--surface-hover); color: var(--brand-2); }

/* ── Две колонки: работа слева, рабочее место справа ────────────── */
.sf-home__grid {
    display: grid; grid-template-columns: minmax(0, 1fr) 290px;
    gap: 16px; align-items: start;
}
.sf-home__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sf-home__rail { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

@media (max-width: 1000px) {
    .sf-home__grid { grid-template-columns: minmax(0, 1fr); }
    .sf-home__rail { flex-direction: row; flex-wrap: wrap; }
    .sf-home__rail > * { flex: 1 1 240px; }
}

/* ── Карточка ───────────────────────────────────────────────────── */
.sf-card {
    background: var(--surface-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.sf-card__head {
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px; border-bottom: 1px solid var(--border-default);
    color: var(--text-secondary);
}
/* Заголовок карточки главной — заголовок секции: 16px полужирный, без капса. */
.sf-card__head h2 {
    margin: 0; font-size: var(--fs-subtitle); font-weight: var(--fw-semibold);
    color: var(--text-primary);
}
.sf-card__more {
    margin-left: auto; font-size: var(--fs-caption); color: var(--brand-2); text-decoration: none;
}
.sf-card__more:hover { text-decoration: underline; }
.sf-card--tight .sf-card__head { padding: 9px 12px; }

/* ── Поток документов ───────────────────────────────────────────── */
/* Таблица уже страницы не станет: на узком экране скроллим её саму,
   а не весь документ. */
.sf-flow-wrap { overflow-x: auto; }
.sf-flow { width: 100%; min-width: 420px; border-collapse: collapse; font-size: var(--fs-body); }
.sf-flow th {
    text-align: left; font-weight: var(--fw-regular); font-size: var(--fs-caption);
    color: var(--text-secondary);
    padding: 8px 14px; border-bottom: 1px solid var(--border-default); white-space: nowrap;
}
.sf-flow th.num, .sf-flow td.num { text-align: right; }
.sf-flow td {
    padding: 9px 14px; border-bottom: 1px solid var(--border-default);
    color: var(--text-primary);
}
.sf-flow tbody tr:last-child td { border-bottom: none; }
.sf-flow tbody tr { cursor: pointer; }
.sf-flow tbody tr:hover { background: var(--surface-hover); }
.sf-flow td.name { font-weight: 500; }
.sf-flow td.num { font-variant-numeric: tabular-nums; font-weight: 600; }
.sf-flow td.num.zero { color: var(--text-disabled); font-weight: 400; }
.sf-flow td.num.hot { color: var(--brand-2); }
.sf-flow td.num.warn { color: var(--color-warning); }
.sf-flow td.when { color: var(--text-secondary); white-space: nowrap; font-size: var(--fs-caption); }

/* ── Чипы объектов решения ──────────────────────────────────────── */
.sf-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 12px 14px; }
.sf-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; font: inherit; font-size: 12.5px;
    color: var(--text-primary); background: var(--surface-bg);
    border: 1px solid var(--border-default); border-radius: var(--radius-full);
    cursor: pointer; text-decoration: none; max-width: 100%;
    transition: border-color var(--motion-fast), color var(--motion-fast);
}
.sf-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-chip:hover { border-color: var(--brand-2); color: var(--brand-2); }
.sf-chip:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 1px; }
.sf-chip--doc { background: var(--surface-selected); border-color: transparent; }
.sf-chip--more { color: var(--text-secondary); border-style: dashed; }

/* ── Списки ссылок в правой колонке ─────────────────────────────── */
.sf-links { list-style: none; margin: 0; padding: 6px; }
.sf-links li { margin: 0; }
.sf-links a {
    display: block; padding: 6px 8px; border-radius: var(--radius-sm);
    font-size: var(--fs-body); color: var(--text-primary); text-decoration: none;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sf-links a:hover { background: var(--surface-hover); }
.sf-links a:focus-visible { outline: 2px solid var(--brand-2); outline-offset: -2px; }

/* ── Здоровье установки ─────────────────────────────────────────── */
.sf-health {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
}
.sf-health__item {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 13px; text-decoration: none;
    background: var(--surface-card); border: 1px solid var(--border-default);
    border-radius: var(--radius-md); color: var(--text-primary);
    transition: border-color var(--motion-fast);
}
.sf-health__item:hover { border-color: var(--brand-2); }
.sf-health__item:focus-visible { outline: 2px solid var(--brand-2); outline-offset: 2px; }
.sf-health__ico { color: var(--text-secondary); }
.sf-health__item.is-alarm .sf-health__ico { color: var(--color-warning); }
.sf-health__item.is-alarm { border-color: var(--color-warning); }
.sf-health__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.sf-health__text .v { font-size: var(--fs-subtitle); font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-health__text .l { font-size: var(--fs-caption); color: var(--text-primary); }
/* Подсказка — одна строка и без обрезки на многоточие: обрезанное
   «вызовов за сутк…» читается как сбой вёрстки. Не влезает — прячем. */
.sf-health__text .h {
    font-size: var(--fs-caption); color: var(--text-secondary); white-space: nowrap;
}
@media (max-width: 1250px) { .sf-health__text .h { display: none; } }

@media (max-width: 640px) {
    .sf-home__head h1 { font-size: var(--fs-title); }
}

/* ── Форма списка ───────────────────────────────────────────────────
   Колонкам задана ширина по типу реквизита (ListColumnLayout), здесь —
   то, что ширинами не решается: цифры, служебные значения, отметки. */

/* Числа: моноширинные цифры, чтобы разряды вставали столбиком. */
.e-grid .e-rowcell.sf-cell-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}
/* Идентификаторы: приглушены и моноширинно — их читают глазами редко,
   а место они занимают как имя. */
.e-grid .e-rowcell.sf-cell-id {
    font-family: var(--font-mono);
    font-size: 11.5px;
    color: var(--text-secondary);
}

/* Отметка проведения: точка одинакового размера, цвет из токенов —
   раньше были захардкоженные #43A047 / #E53935 мимо тёмной темы. */
.sf-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    box-shadow: 0 0 0 2px var(--surface-card);
}
.sf-dot.is-ok { background: var(--color-success); }
.sf-dot.is-off { background: var(--color-danger); }

/* Сколько всего записей — рядом с командами, а не только в пейджере. */
.synn-list-count {
    margin-left: auto;
    font-size: var(--fs-caption);
    color: var(--text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Каретка узла дерева и стрелка «на уровень вверх». */
.sf-caret {
    display: inline-flex; transform: rotate(-90deg);
    transition: transform var(--motion-fast);
}
.sf-caret.open { transform: rotate(0deg); }
.sf-up { display: inline-flex; vertical-align: -2px; }
.synn-folder { display: inline-flex; align-items: center; gap: 5px; }

/* Заголовки колонок: потише основного текста — это подписи, а не данные.
   Без капители: русские заголовки вроде «Статус выгрузки» в верхнем
   регистре читаются заметно медленнее. */
.e-grid .e-headercell .e-headercelldiv {
    font-size: var(--fs-caption); font-weight: var(--fw-regular); color: var(--text-secondary);
}

/* Ячейка с шаблоном: обрезаем содержимое внутри обёртки, иначе длинное
   имя режется по краю колонки без многоточия. */
/* ClipMode оборачивает содержимое шаблона в <div> — многоточие ячейки до
   него не добирается, и длинное имя резалось ровно по краю колонки. */
.e-grid .e-rowcell > div,
.e-grid .e-rowcell > a,
.e-grid .e-rowcell > span {
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom;
}
/* Кроме служебных: точка проведения и блок действий не текст. */
.e-grid .e-rowcell > span.sf-dot { display: inline-block; overflow: visible; }
.e-grid .e-rowcell > .row-actions { overflow: visible; }

/* ── Виджеты главной (пункты меню «widget»: плитки, таблицы, график из отчётов) ── */
.sf-tiles--wide { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.sf-tile { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.sf-tile.lvl-crit .sf-tile__count { color: var(--color-danger, #c62828); }
.sf-tile__unit { font-size: var(--fs-body); font-weight: 400; color: var(--text-secondary); }
.sf-tile__sub { font-size: var(--fs-caption); color: var(--text-secondary); overflow-wrap: anywhere; }
.sf-widgets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; margin-bottom: 16px; }
.sf-widget--full { grid-column: 1 / -1; }
.sf-widget__empty { margin: 0; padding: 14px; color: var(--text-secondary); font-size: var(--fs-body); }
.sf-flow--plain { min-width: 0; }
.sf-flow--plain tbody tr { cursor: pointer; }
.sf-flow--plain tbody tr.static { cursor: default; }
.sf-flow--plain td.name { overflow-wrap: anywhere; font-weight: 400; }
.sf-chart { width: 100%; height: 210px; display: block; padding: 6px 10px 0; box-sizing: border-box; }
.sf-chart__grid { stroke: var(--border-default); stroke-width: 1; vector-effect: non-scaling-stroke; }
.sf-chart__ax { fill: var(--text-secondary); font-size: 10px; }
.sf-chart__ok { fill: var(--brand-2, #2a8f9a); }
.sf-chart__err { fill: var(--color-danger, #c62828); }
.sf-chart__zero { fill: var(--border-default); }
.sf-chart__legend { display: flex; gap: 18px; padding: 4px 14px 12px; font-size: var(--fs-caption); color: var(--text-secondary); }
.sf-chart__legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.sf-chart__legend i.ok { background: var(--brand-2, #2a8f9a); }
.sf-chart__legend i.err { background: var(--color-danger, #c62828); }
@media (max-width: 1100px) { .sf-widgets { grid-template-columns: minmax(0, 1fr); } }