/*
 * Компонентные стили веб-мониторинга.
 * Все значения — из токенов дизайн-системы Claude Design (tokens.css),
 * спецификация: docs/design-system.md. Фаза 3: прямые ссылки на --cd-*.
 */

.htmx-indicator {
    opacity: 0;
    transition: opacity var(--cd-duration-fast) ease-in;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
    opacity: 1;
}
.dropdown-item:active {
    background-color: var(--cd-color-accent);
}
.table td {
    vertical-align: middle;
}

/* Нецветовой маркер статуса (Sprint 2: A-9) */
.status-dot {
    display: inline-block;
    width: var(--cd-status-dot-size);
    height: var(--cd-status-dot-size);
    border-radius: 50%;
    margin-right: 6px;
    vertical-align: middle;
    flex-shrink: 0;
}

/*
 * Единый источник цветов статусов (Sprint 3, item 13).
 * Python знает только ключи (new/in_progress/done/group_damage) и текст меток.
 * Все цвета статусов живут в tokens.css, применяются здесь через data-status.
 */
.badge.status-badge[data-status="new"] {
    background: color-mix(in srgb, var(--cd-status-new-color) var(--cd-tint-alpha), transparent);
    color: var(--cd-status-new-color);
}
.badge.status-badge[data-status="in_progress"] {
    background: color-mix(in srgb, var(--cd-status-in-progress-color) var(--cd-tint-alpha), transparent);
    color: var(--cd-status-in-progress-color);
}
.badge.status-badge[data-status="done"] {
    background: color-mix(in srgb, var(--cd-status-done-color) var(--cd-tint-alpha), transparent);
    color: var(--cd-status-done-color);
}
.badge.status-badge[data-status="group_damage"] {
    background: color-mix(in srgb, var(--cd-status-group-damage-color) var(--cd-tint-alpha), transparent);
    color: var(--cd-status-group-damage-color);
}

.status-dot[data-status="new"]          { background: var(--cd-status-new-color); }
.status-dot[data-status="in_progress"]  { background: var(--cd-status-in-progress-color); }
.status-dot[data-status="done"]         { background: var(--cd-status-done-color); }
.status-dot[data-status="group_damage"] { background: var(--cd-status-group-damage-color); }

/* Подсветка строк по срочности SLA */
table.table tr.sla-expired,
table.table tr.sla-expired:hover {
    background-color: color-mix(in srgb, var(--cd-sla-expired-color) var(--cd-tint-alpha), transparent);
}
table.table tr.sla-warning,
table.table tr.sla-warning:hover {
    background-color: color-mix(in srgb, var(--cd-sla-warning-color) var(--cd-tint-alpha), transparent);
}

/* Единое фокус-кольцо интерактивных элементов */
.sort-btn:focus-visible,
.copy-cell:focus-visible {
    outline: var(--cd-focus-ring-width) solid var(--cd-focus-ring-color);
    outline-offset: var(--cd-focus-ring-offset);
    border-radius: var(--cd-radius-sm);
}

/* Сортируемые заголовки колонок */
.sort-btn {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-weight: inherit;
    font-size: inherit;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--cd-space-1);
}
.sort-btn:hover { color: var(--cd-color-accent); }
.sort-btn.sort-active { color: var(--cd-color-accent); }
.sort-arrow { font-size: .75em; line-height: 1; opacity: .8; }

/* Alpine.js cloak — скрывает элементы до инициализации */
[x-cloak] { display: none !important; }

/* Переключатель темы: луна в светлой, солнце в тёмной */
[data-bs-theme="dark"] .theme-icon-moon { display: none; }
html:not([data-bs-theme="dark"]) .theme-icon-sun { display: none; }

.cursor-pointer { cursor: pointer; }

/* Бейдж уровня обслуживания «Платиновый» */
.level-platinum {
    background: color-mix(in srgb, var(--cd-level-platinum-color) var(--cd-level-platinum-tint), transparent);
    color: var(--cd-level-platinum-color);
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Стат-карточки */
.stat-value {
    font-size: var(--cd-font-size-stat);
    font-weight: var(--cd-font-weight-stat);
    line-height: 1;
}
.stat-label {
    font-size: var(--cd-font-size-xs);
    letter-spacing: var(--cd-letter-spacing-caps);
    text-transform: uppercase;
}

.copy-cell {
    cursor: pointer;
}

/* Дропдаун истории нарядов тикета */
.naryads-toggle {
    border: 0;
    cursor: pointer;
    font: inherit;
    font-size: 11.5px;
    line-height: 1.4;
    vertical-align: baseline;
}
.naryads-toggle:focus-visible {
    outline: var(--cd-focus-ring-width) solid var(--cd-focus-ring-color);
    outline-offset: var(--cd-focus-ring-offset);
}
.naryads-menu .dropdown-item {
    font-variant-numeric: tabular-nums;
}
.copy-cell:hover {
    text-decoration: underline dotted;
}

/* Акцентные варианты стат-карточек */
.stat-card--primary { border-left: var(--cd-stat-card-accent-width) solid var(--cd-color-accent); }
.stat-card--orange  { border-left: var(--cd-stat-card-accent-width) solid var(--tblr-orange); }
.stat-card--danger  { border-left: var(--cd-stat-card-accent-width) solid var(--cd-sla-expired-color); }
.stat-card--warning { border-left: var(--cd-stat-card-accent-width) solid var(--cd-sla-warning-color); }
.stat-card--success { border-left: var(--cd-stat-card-accent-width) solid var(--cd-status-done-color); }
.stat-card--storm   { border-left: var(--cd-stat-card-accent-width) solid var(--cd-level-platinum-color); }

.stat-card--storm .stat-value { color: var(--cd-level-platinum-color); }

.stat-card--danger  .stat-value,
.stat-card--danger  .stat-icon { color: var(--cd-sla-expired-color); }
.stat-card--warning .stat-value,
.stat-card--warning .stat-icon { color: var(--cd-sla-warning-text-color, var(--cd-sla-warning-color)); }
.stat-card--success .stat-value,
.stat-card--success .stat-icon { color: var(--cd-status-done-color); }

.comment-cell {
    max-width: var(--cd-comment-cell-max-width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ячейка «Тип» — одна строка, полный текст в title */
.type-cell {
    max-width: var(--cd-type-cell-max-width);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
 * Липкая шапка таблицы. Только на экранах, где таблица (~1620px) помещается
 * без горизонтального скролла: тогда overflow можно отпустить — иначе
 * .table-responsive становится scroll-контейнером и sticky не работает
 * относительно окна, а страница получает горизонтальный скролл.
 */
@media (min-width: 1700px) {
    .card > .table-responsive {
        overflow: visible;
    }
    .card-table thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: var(--tblr-bg-surface, #fff);
        box-shadow: inset 0 -1px 0 var(--tblr-border-color);
    }
}

/* ── Экран «Требует действия» ─────────────────────────────────────── */
.triage-zone { margin-bottom: 24px; }
.triage-zone-h {
    font-size: var(--cd-font-size-xs);
    letter-spacing: var(--cd-letter-spacing-caps);
    text-transform: uppercase;
    color: var(--tblr-secondary, var(--cd-status-new-color));
    margin: 0 2px 8px;
}
.triage-ticket {
    display: grid;
    grid-template-columns: 130px minmax(0, 1fr) 230px auto;
    gap: 4px 18px;
    align-items: center;
    background: var(--tblr-bg-surface, #fff);
    border: 1px solid var(--tblr-border-color, #e3e8ef);
    border-left-width: var(--cd-stat-card-accent-width);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
@media (max-width: 900px) {
    .triage-ticket { grid-template-columns: 1fr 1fr; }
    .tt-sla { order: -1; }
}
.triage-ticket--overdue { border-left-color: var(--cd-sla-expired-color); }
.triage-ticket--burning { border-left-color: var(--cd-sla-warning-color); }
.triage-ticket--stuck   { border-left-color: var(--cd-status-new-color); }
.triage-ticket--taken   { border-left-color: var(--cd-color-accent); }

.tt-sla { font-variant-numeric: tabular-nums; }
.tt-sla .clock { font-size: 18px; font-weight: 700; display: block; line-height: 1.2; }
.tt-till { font-size: 12px; color: var(--tblr-secondary, var(--cd-status-new-color)); }
.triage-ticket--overdue .clock { color: var(--cd-sla-expired-color); }
.triage-ticket--burning .clock { color: var(--cd-sla-warning-text-color); }
@keyframes cd-pulse { 50% { opacity: .55; } }
.clock.critical { animation: cd-pulse 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .clock.critical { animation: none; } }

.tt-main { min-width: 0; }
.tt-line1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* flex вместо ellipsis на всём блоке: внутри живёт дропдаун нарядов,
   который overflow:hidden обрезал бы; усечение — только на адресе */
.tt-line2 { display: flex; align-items: center; gap: 5px; min-width: 0; }
.tt-line2 .tt-addr { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tt-who { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tt-ava {
    width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: color-mix(in srgb, var(--cd-color-accent) 12%, transparent);
    color: var(--cd-color-accent); font-size: 12px; font-weight: 700;
}
.tt-name { font-size: 13.5px; font-weight: 600; }
.tt-act { display: flex; gap: 6px; justify-self: end; }

.triage-storm { border-left: var(--cd-stat-card-accent-width) solid var(--cd-level-platinum-color); }
.triage-storm-list { margin: 10px 0 0; padding: 0; list-style: none; }
.triage-storm-list li {
    display: flex; gap: 14px; padding: 6px 2px; align-items: baseline; flex-wrap: wrap;
    border-top: 1px solid var(--tblr-border-color, #e3e8ef);
    font-size: 13.5px;
}
.triage-storm-list time { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 12.5px; }

.triage-allclear {
    border: 1px dashed var(--tblr-border-color, #e3e8ef);
    border-radius: 8px; padding: 28px; text-align: center;
}

/* ── Сводка руководителя ─────────────────────────────────────────── */
.summary-chart { width: 100%; height: auto; display: block; }
.summary-chart rect { fill: var(--cd-chart-ok); }
/* красный сегмент «нарушен» — по классу, иначе общее правило выше перекрасит в синий */
.summary-chart rect.seg-bad { fill: var(--cd-chart-bad); }
.summary-chart text {
    font: 11px system-ui, "Segoe UI", sans-serif;
    fill: var(--tblr-secondary, var(--cd-status-new-color));
}
.summary-chart .grid { stroke: var(--tblr-border-color, #e3e8ef); stroke-width: 1; }
.summary-chart .dlabel { font-weight: 700; fill: var(--tblr-body-color, currentColor); }

.sc-legend { display: flex; gap: 14px; flex-wrap: wrap; }
.sc-legend .sw {
    display: inline-block; width: 10px; height: 10px; border-radius: 3px;
    margin-right: 5px; vertical-align: -1px;
}
.sc-legend .sw-open    { background: var(--cd-chart-ok); }
.sc-legend .sw-overdue { background: var(--cd-chart-bad); }

.scrow {
    display: grid; grid-template-columns: minmax(90px, 130px) 1fr 96px;
    gap: 10px; align-items: center; padding: 6px 0;
}
.scrow .nm { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scrow .bar { display: flex; height: 14px; gap: 2px; }
.scrow .seg-open    { background: var(--cd-chart-ok); border-radius: 4px; }
.scrow .seg-overdue { background: var(--cd-chart-bad); border-radius: 4px; }
.scrow .val { font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.scrow .val b { color: var(--cd-sla-expired-color); }

pre.digest {
    background: color-mix(in srgb, var(--cd-status-new-color) 6%, transparent);
    border: 1px solid var(--tblr-border-color, #e3e8ef);
    border-radius: 6px; padding: 10px 12px;
    color: var(--tblr-body-color, inherit);
    font-size: 13px; line-height: 1.55;
    white-space: pre-line;
}

/* Классы вместо inline-стилей шаблонов (фаза 2) */
.filter-multiselect {
    min-width: var(--cd-control-min-width);
}
.filter-multiselect-menu {
    min-width: var(--cd-control-min-width);
    max-height: var(--cd-dropdown-max-height);
    overflow-y: auto;
}
.upload-status {
    min-width: var(--cd-upload-status-width);
}
.progress-thin {
    height: var(--cd-progress-height);
    border-radius: 3px;
}