/*
    DBSentryX UI styles
    ===================
    Общий файл стилей для web-части.

    Здесь собраны:
    - базовый layout
    - шапка и переключатель организации
    - карточки и таблицы
    - статусные цвета
    - KPI-блоки
    - полосы распределения на dashboards
    - page toolbar / actions
    - severity / blocking highlight
*/

/* =========================================================
   1. БАЗОВЫЙ LAYOUT
   ========================================================= */
body {
    --page-gutter: clamp(16px, 2vw, 36px);
    margin: 0;
    font-family: Arial, sans-serif;
    background: #0f172a;
    color: #e2e8f0;
}

main {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    padding: 32px var(--page-gutter);
}

header {
    background: #111827;
    border-bottom: 1px solid #334155;
    padding: 16px 24px;
}

.topbar {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.brand {
    flex-shrink: 0;
    color: #f8fafc;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
}

.site-nav {
    display: flex;
    flex: 1;
    position: relative;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding-right: 76px;
}

.site-nav-primary,
.site-nav-secondary {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.site-nav-primary {
    flex: 1 1 520px;
}

.site-nav-secondary {
    justify-content: flex-end;
}

.site-nav-language-floating {
    position: absolute;
    top: 2px;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
}

.nav-link,
.nav-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid transparent;
    color: #cbd5e1;
    font-size: 14px;
    text-decoration: none;
    background: transparent;
    cursor: pointer;
}

.nav-link:hover,
.nav-button:hover {
    color: #ffffff;
    background: rgba(30, 41, 59, 0.8);
    text-decoration: none;
}

.nav-link.is-active,
.nav-button.is-active {
    color: #eff6ff;
    background: rgba(37, 99, 235, 0.18);
    border-color: rgba(96, 165, 250, 0.65);
}

.nav-link-secondary {
    border-color: #334155;
}

.nav-dropdown {
    position: relative;
}

.nav-button {
    font-family: inherit;
}

.nav-button-arrow {
    color: #94a3b8;
    font-size: 11px;
}

.nav-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 1000;
    display: none;
    min-width: 240px;
    max-width: 320px;
    padding: 8px;
    background: #111827;
    border: 1px solid #334155;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.nav-menu.is-open {
    display: block;
}

.nav-menu-link {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: #e2e8f0;
    font-size: 14px;
    text-decoration: none;
}

.nav-menu-link:hover {
    background: #1e293b;
    color: #ffffff;
    text-decoration: none;
}

.nav-menu-link.is-active {
    background: rgba(37, 99, 235, 0.22);
    color: #eff6ff;
    font-weight: 600;
}

.nav-inline-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-inline-label,
.nav-user {
    white-space: nowrap;
}

.nav-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.nav-language-toggle {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(71, 85, 105, 0.56);
    border-radius: 999px;
    background: rgba(30, 41, 59, 0.72) !important;
    background-color: rgba(30, 41, 59, 0.72) !important;
    background-image: none !important;
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.04);
    font-family: inherit;
    border-image: none;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.nav-language-toggle:hover {
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(96, 165, 250, 0.38);
    color: #ffffff;
}

.nav-language-toggle:focus {
    outline: 2px solid rgba(96, 165, 250, 0.32);
    outline-offset: 2px;
}

.nav-language-toggle-text {
    display: inline-flex;
    align-items: center;
}

@media (max-width: 980px) {
    .site-nav-secondary {
        justify-content: flex-start;
    }
}

.nav-spacer {
    flex: 1 1 auto;
    min-width: 12px;
}

.global-scroll-top {
    position: fixed;
    right: 22px;
    bottom: 24px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(96, 165, 250, 0.65);
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.92);
    box-shadow: 0 12px 28px rgba(2, 6, 23, 0.34);
    color: #eff6ff;
    font-weight: 700;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms ease, background 160ms ease;
}

.global-scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.global-scroll-top:hover {
    background: rgba(30, 41, 59, 0.98);
}

.message-shell {
    width: 100%;
    box-sizing: border-box;
    margin: 24px 0 0;
}

/* =========================================================
   2. ПЕРЕКЛЮЧАТЕЛЬ ОРГАНИЗАЦИИ
   ========================================================= */
.org-switcher {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
}

.org-label {
    color: #94a3b8;
    font-size: 14px;
}

.org-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 220px;
    max-width: 320px;
    padding: 8px 14px;
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid #475569;
    border-radius: 999px;
    font-size: 14px;
    cursor: pointer;
}

.org-button:hover {
    background: #1e293b;
}

.org-button-text {
    flex: 1;
    overflow: hidden;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.org-button-arrow {
    flex-shrink: 0;
    color: #94a3b8;
    font-size: 12px;
}

.org-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 260px;
    max-width: 360px;
    background: #111827;
    border: 1px solid #334155;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

.org-menu.is-open {
    display: block;
}

.org-menu a,
.org-menu .org-menu-current {
    display: block;
    padding: 10px 14px;
    background: transparent;
    color: #e2e8f0;
    font-size: 14px;
    text-decoration: none;
}

.org-menu a:hover {
    background: #1e293b;
    color: #ffffff;
    text-decoration: none;
}

.org-menu .org-menu-current {
    background: #1d4ed8;
    color: #eff6ff;
    font-weight: 600;
}

/* =========================================================
   3. ОБЩИЕ ЭЛЕМЕНТЫ И БАЗОВЫЕ КОМПОНЕНТЫ
   ========================================================= */
a {
    color: #93c5fd;
    text-decoration: none;
}

a:hover {
    color: #dbeafe;
    text-decoration: underline;
}

code {
    background: #1e293b;
    color: #cbd5e1;
    padding: 2px 6px;
    border-radius: 6px;
}

.card {
    margin-bottom: 20px;
    padding: 24px;
    background: #111827;
    border: 1px solid #334155;
    border-radius: 12px;
}

.card-compact {
    padding: 16px 18px;
}

.product-shell {
    display: grid;
    gap: 20px;
}

.product-hero {
    display: grid;
    gap: 16px;
    padding: 24px;
    border-radius: 18px;
    border: 1px solid rgba(71, 85, 105, 0.78);
    background:
        radial-gradient(circle at top right, rgba(45, 212, 191, 0.1), transparent 28%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.96) 100%);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.05);
}

.product-hero-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.product-hero-title {
    margin: 10px 0 8px;
    color: #f8fafc;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.05;
    letter-spacing: -0.03em;
}

.product-hero-copy {
    max-width: 820px;
    color: #a5b4c7;
    font-size: 15px;
    line-height: 1.7;
}

.product-hero-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.product-summary-strip {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.product-summary-chip {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.92);
    background: rgba(15, 23, 42, 0.54);
}

.product-summary-chip-label {
    color: #7dd3fc;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.product-summary-chip-value {
    margin-top: 8px;
    color: #f8fafc;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.product-summary-chip-copy {
    margin-top: 6px;
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
}

.product-section-card {
    border-radius: 16px;
}

@media (max-width: 1040px) {
    .product-summary-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .product-summary-strip {
        grid-template-columns: 1fr;
    }
}

.server-surface-card {
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-color: rgba(71, 85, 105, 0.72);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.04);
}

.server-surface-card-accent {
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-color: rgba(56, 189, 248, 0.22);
}

.server-surface-card-warm {
    background:
        radial-gradient(circle at top right, rgba(249, 115, 22, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-color: rgba(249, 115, 22, 0.24);
}

.server-surface-card-gold {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.08), transparent 28%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-color: rgba(245, 158, 11, 0.22);
}

.server-nav-card {
    padding: 14px 18px;
}

.server-nav-links {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.server-panel-tight {
    padding: 16px 18px;
}

.server-panel-tight-alt {
    padding: 14px 18px;
}

.performance-sections-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.performance-section-card {
    min-width: 0;
    overflow: hidden;
}

.performance-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.performance-mini-stat {
    min-height: 0;
    padding: 16px;
}

.performance-mini-stat .stat-label {
    margin-bottom: 8px;
    font-size: 12px;
}

.performance-mini-stat .stat-value {
    font-size: 22px;
}

.performance-chart-shell {
    margin-top: 12px;
    padding: 12px;
    background: linear-gradient(180deg, #0b1220 0%, #111827 100%);
    border-radius: 16px;
    overflow: hidden;
}

.muted {
    color: #94a3b8;
}

.badge {
    display: inline-block;
    padding: 4px 10px;
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 999px;
    font-size: 12px;
}

.help-tip {
    position: relative;
}

.help-tip[data-tooltip] {
    cursor: help;
}

.help-tip-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.help-tip-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 1px solid #475569;
    border-radius: 999px;
    color: #94a3b8;
    font-size: 11px;
    line-height: 1;
}

th .help-tip {
    display: inline-block;
}

.floating-tooltip {
    position: fixed;
    z-index: 5000;
    max-width: 320px;
    padding: 10px 12px;
    background: #020617;
    border: 1px solid #475569;
    border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    color: #e2e8f0;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    pointer-events: none;
}

.empty-state {
    padding: 24px;
    color: #94a3b8;
    border: 1px dashed #475569;
    border-radius: 12px;
}

.alert-context-compact-empty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    color: #94a3b8;
    border: 1px dashed #475569;
    border-radius: 12px;
}

.alert-context-compact-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

@media (max-width: 900px) {
    .alert-context-compact-empty {
        align-items: flex-start;
        flex-direction: column;
    }

    .alert-context-compact-actions {
        justify-content: flex-start;
    }
}

.health-banner {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px;
    border: 1px solid #334155;
    border-radius: 12px;
}

.health-banner-title {
    min-width: 160px;
    font-size: 18px;
    font-weight: 700;
}

.health-banner-lines {
    flex: 1;
    display: grid;
    gap: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.health-banner-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.health-banner-high {
    background: rgba(127, 29, 29, 0.28);
    border-color: rgba(248, 113, 113, 0.35);
}

.health-banner-high .health-banner-title {
    color: #fecaca;
}

.health-banner-medium {
    background: rgba(120, 53, 15, 0.24);
    border-color: rgba(251, 191, 36, 0.35);
}

.health-banner-medium .health-banner-title {
    color: #fde68a;
}

.health-banner-ok {
    background: rgba(20, 83, 45, 0.24);
    border-color: rgba(74, 222, 128, 0.35);
}

.health-banner-ok .health-banner-title {
    color: #bbf7d0;
}

.wizard-intake-card {
    background:
        radial-gradient(circle at top right, rgba(245, 158, 11, 0.08), transparent 32%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    border-color: rgba(148, 163, 184, 0.28);
}

.wizard-intake-explainer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.wizard-decision-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.wizard-decision-card {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(71, 85, 105, 0.54);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(17, 24, 39, 0.94) 100%);
}

.wizard-decision-card-positive {
    border-color: rgba(74, 222, 128, 0.24);
    box-shadow: inset 0 1px 0 rgba(74, 222, 128, 0.04);
}

.wizard-decision-card-neutral {
    border-color: rgba(148, 163, 184, 0.22);
}

.wizard-decision-title {
    margin-bottom: 8px;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wizard-decision-copy {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.55;
}

.wizard-intake-callout {
    position: relative;
    min-width: 0;
    padding: 18px 18px 18px 20px;
    border-radius: 16px;
    border: 1px solid rgba(71, 85, 105, 0.56);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.78) 0%, rgba(17, 24, 39, 0.94) 100%);
    overflow: hidden;
}

.wizard-intake-callout::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    border-radius: 16px 0 0 16px;
    background: rgba(148, 163, 184, 0.5);
}

.wizard-intake-callout-primary::before {
    background: linear-gradient(180deg, #38bdf8 0%, #22c55e 100%);
}

.wizard-intake-callout-warning::before {
    background: linear-gradient(180deg, #f59e0b 0%, #fb7185 100%);
}

.wizard-intake-callout-label {
    margin-bottom: 10px;
    color: #f8fafc;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.wizard-intake-callout-copy {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.55;
}

.wizard-intake-recovery-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.wizard-intake-form {
    display: grid;
    gap: 14px;
}

.wizard-intake-grid {
    display: grid;
    gap: 14px;
}

.wizard-intake-grid-primary {
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(180px, 1fr));
}

.wizard-intake-grid-secondary {
    grid-template-columns: minmax(220px, 1.1fr) minmax(180px, 0.9fr) minmax(220px, 1.2fr);
}

.wizard-field {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border: 1px solid rgba(51, 65, 85, 0.9);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.04);
}

.wizard-field-label {
    color: #e2e8f0;
    font-size: 13px;
    font-weight: 700;
}

.wizard-field-help {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
}

.wizard-field-wide {
    grid-column: span 1;
}

.wizard-intake-card .form-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(71, 85, 105, 0.92);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.84);
    color: #f8fafc;
    font: inherit;
}

.wizard-intake-card .form-control::placeholder {
    color: #64748b;
}

.wizard-intake-card .form-control:focus {
    outline: 2px solid rgba(96, 165, 250, 0.26);
    outline-offset: 1px;
    border-color: rgba(96, 165, 250, 0.7);
}

.btn-primary,
a.btn-primary {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: #fff7ed !important;
    box-shadow: 0 10px 24px rgba(234, 88, 12, 0.24);
}

.btn-primary:hover,
a.btn-primary:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
    border-color: rgba(253, 224, 71, 0.65);
    color: #ffffff !important;
}

.wizard-intake-submit {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.wizard-intake-submit-copy {
    color: #94a3b8;
    font-size: 13px;
    line-height: 1.5;
}

@media (max-width: 1180px) {
    .wizard-intake-grid-primary,
    .wizard-intake-grid-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .wizard-decision-strip,
    .wizard-intake-explainer,
    .wizard-intake-grid-primary,
    .wizard-intake-grid-secondary {
        grid-template-columns: 1fr;
    }

    .wizard-intake-submit {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   4. СТАТУСЫ СЕРВЕРОВ
   ========================================================= */
.status-online {
    color: #86efac;
    font-weight: bold;
}

.status-delayed {
    color: #facc15;
    font-weight: bold;
}

.status-offline {
    color: #fca5a5;
    font-weight: bold;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.status-pill-delayed {
    color: #facc15;
    background: rgba(250, 204, 21, 0.12);
    border-color: rgba(250, 204, 21, 0.35);
}

.status-pill-offline {
    color: #fca5a5;
    background: rgba(252, 165, 165, 0.12);
    border-color: rgba(252, 165, 165, 0.35);
}

/* =========================================================
   5. ТАБЛИЦЫ
   ========================================================= */
table {
    width: 100%;
    margin-top: 16px;
    border-collapse: collapse;
}

.data-table-shell {
    margin-top: 12px;
    height: min(64vh, 720px);
    min-height: 360px;
    overflow-x: auto;
    overflow-y: auto;
    border: 1px solid #334155;
    border-radius: 14px;
    background: rgba(2, 6, 23, 0.68);
}

.data-table-shell table {
    margin-top: 0;
    min-width: 980px;
    border-collapse: separate;
    border-spacing: 0;
}

.data-table-shell thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #0b1220;
    box-shadow: inset 0 -1px 0 #334155, 0 10px 18px rgba(2, 6, 23, 0.36);
}

.data-table-shell tbody tr:last-child td {
    border-bottom: none;
}

.table-meta-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.table-meta-row h2 {
    margin: 0 0 6px 0;
}

.table-meta-row p {
    margin: 0;
}

.table-meta-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

th,
td {
    padding: 12px 10px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid #334155;
}

th {
    color: #cbd5e1;
    font-size: 14px;
}

td {
    color: #e2e8f0;
    font-size: 14px;
}

.mono-number {
    font-variant-numeric: tabular-nums;
}

/* sortable table headers */
.sortable-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #cbd5e1;
    font-weight: 600;
    text-decoration: none;
}

.sortable-header:hover {
    color: #ffffff;
    text-decoration: none;
}

.sort-indicator {
    color: #93c5fd;
    font-size: 12px;
    line-height: 1;
}

/* =========================================================
   6. KPI / STATS CARDS
   ========================================================= */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.stat-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 110px;
    padding: 20px;
    background: #0b1220;
    border: 1px solid #334155;
    border-radius: 14px;
}

.stat-card-online {
    border-color: rgba(134, 239, 172, 0.35);
}

.stat-card-delayed {
    border-color: rgba(250, 204, 21, 0.35);
}

.stat-card-offline {
    border-color: rgba(252, 165, 165, 0.35);
}

.stat-label {
    margin-bottom: 10px;
    color: #94a3b8;
    font-size: 14px;
}

.stat-value {
    color: #f8fafc;
    font-size: 40px;
    font-weight: 700;
    line-height: 1;
}

.agents-summary-card-shell {
    margin-top: 0;
}

.agents-summary-table-wrap {
    overflow-x: auto;
}

.agents-summary-table {
    width: 100%;
}

.agents-summary-table th:nth-child(1) {
    width: 26%;
}

.agents-summary-table th:nth-child(2) {
    width: 12%;
}

.agents-summary-table th:nth-child(3) {
    width: 62%;
}

.agents-summary-metric {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.agents-summary-number {
    display: inline-block;
    min-width: 44px;
    color: #f8fafc;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
}

.agents-summary-info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, 0.5);
    color: #cbd5e1;
    font-size: 10px;
    font-weight: 700;
    background: rgba(30, 41, 59, 0.82);
    flex-shrink: 0;
}

.agents-compact-card {
    margin-bottom: 14px;
    padding: 16px 18px;
}

.agents-page-title {
    margin: 8px 0 6px;
}

.agents-page-lead {
    margin: 0;
    max-width: 820px;
}

.agents-summary-card-shell .section-header-row,
.agents-compact-card .section-header-row {
    margin-bottom: 8px;
}

.agents-summary-table {
    margin-top: 8px;
}

.agents-summary-table th,
.agents-summary-table td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.agents-list-table {
    margin-top: 8px;
}

.agents-list-table th,
.agents-list-table td {
    padding-top: 9px;
    padding-bottom: 9px;
}

.agents-list-table td .muted {
    line-height: 1.3;
}

.agents-studio-page {
    gap: 18px;
}

.agents-surface-hero {
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 24%),
        radial-gradient(circle at bottom left, rgba(34, 197, 94, 0.08), transparent 22%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.96) 100%);
}

.agents-surface-card {
    border-radius: 18px;
    border-color: rgba(71, 85, 105, 0.72);
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.05), transparent 20%),
        linear-gradient(180deg, rgba(17, 24, 39, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.04);
}

.agents-surface-grid {
    display: grid;
    gap: 18px;
}

.agents-surface-grid--split {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: start;
}

.agents-surface-grid--bottom {
    grid-template-columns: minmax(280px, 0.7fr) minmax(0, 1.3fr);
}

.agents-surface-card > .section-header-row {
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(51, 65, 85, 0.72);
}

.agents-surface-card > .section-header-row:first-of-type,
.agents-surface-card-head {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.agents-surface-card-head {
    margin-bottom: 18px;
}

.agents-studio-page .metric-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.agents-studio-page .metric-item {
    display: grid;
    gap: 8px;
    min-width: 0;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.9);
    background: rgba(15, 23, 42, 0.72);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.04);
}

.agents-inline-help {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}

.agents-inline-help-card {
    display: grid;
    gap: 6px;
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.84), rgba(2, 6, 23, 0.76));
}

.agents-studio-page .metric-label {
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.agents-studio-page .metric-help {
    color: #94a3b8;
    font-size: 12px;
    line-height: 1.45;
}

.agents-studio-page .form-control {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid rgba(71, 85, 105, 0.92);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.84);
    color: #f8fafc;
    font: inherit;
}

.agents-studio-page textarea.form-control {
    min-height: 110px;
    resize: vertical;
}

.agents-studio-page .form-control::placeholder {
    color: #64748b;
}

.agents-studio-page .form-control:focus {
    outline: 2px solid rgba(96, 165, 250, 0.24);
    outline-offset: 1px;
    border-color: rgba(96, 165, 250, 0.72);
}

.agents-surface-card > form {
    margin-bottom: 16px;
    padding: 16px 18px;
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 16px;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.68), rgba(17, 24, 39, 0.92));
    backdrop-filter: blur(10px);
}

.agents-surface-card > form:last-of-type {
    margin-bottom: 0;
}

.agents-surface-card .empty-state {
    background: rgba(15, 23, 42, 0.54);
}

.agents-summary-card-shell .product-summary-strip {
    margin-top: 4px;
}

.agents-summary-card-shell .product-summary-chip {
    min-height: 120px;
}

.agents-summary-card-shell .product-summary-chip-label {
    letter-spacing: 0.08em;
}

.agents-summary-table-wrap {
    border: 1px solid rgba(51, 65, 85, 0.72);
    border-radius: 16px;
    background: rgba(2, 6, 23, 0.42);
    overflow: hidden;
}

.agents-summary-table {
    margin-top: 0;
}

.agents-summary-table thead th {
    background: rgba(11, 18, 32, 0.92);
}

.agents-summary-table tbody tr:hover td {
    background: rgba(30, 41, 59, 0.32);
}

.agents-surface-card .data-table-shell {
    background: rgba(2, 6, 23, 0.58);
}

.agents-workspace-slab {
    display: grid;
    gap: 14px;
    padding-top: 8px;
}

.agents-workspace-card {
    padding-top: 18px;
}

.agents-workspace-head {
    margin-bottom: 12px;
    padding: 0 2px;
}

.agents-workspace-head-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.agents-workspace-toolbar {
    display: grid;
    gap: 12px;
    margin-bottom: 10px;
    padding: 14px 16px 16px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.52);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.03);
}

.agents-toolbar-section-label {
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.agents-workspace-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.agents-filter-more {
    position: relative;
}

.agents-filter-more summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    border: 1px solid rgba(71, 85, 105, 0.92);
    border-radius: 10px;
    background: rgba(2, 6, 23, 0.84);
    color: #e2e8f0;
    font-weight: 600;
}

.agents-filter-more[open] summary {
    border-color: rgba(96, 165, 250, 0.7);
    background: rgba(15, 23, 42, 0.92);
}

.agents-filter-more summary::-webkit-details-marker {
    display: none;
}

.agents-filter-more-menu {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
    padding: 10px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.76);
}

.agents-workspace-actions {
    display: grid;
    gap: 10px;
}

.agents-toolbar-form {
    display: flex;
    gap: 10px;
    align-items: end;
    flex-wrap: wrap;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.52);
    background: rgba(2, 6, 23, 0.28);
}

.agents-toolbar-form--baseline {
    align-items: center;
}

.agents-toolbar-field {
    display: grid;
    gap: 6px;
    min-width: min(320px, 100%);
    flex: 1 1 320px;
}

.agents-toolbar-linkout {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    padding: 12px;
    border-radius: 12px;
    border: 1px dashed rgba(71, 85, 105, 0.52);
    background: rgba(15, 23, 42, 0.22);
}

.agents-workspace-inline-head {
    margin-top: 0;
    padding: 12px 2px 0;
    border-top: 1px solid rgba(51, 65, 85, 0.56);
}

.agents-workspace-slab .data-table-shell {
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.58);
    background: rgba(2, 6, 23, 0.46);
}

.agents-workspace-slab .empty-state {
    border-radius: 14px;
    border: 1px dashed rgba(71, 85, 105, 0.58);
    background: rgba(15, 23, 42, 0.36);
}

.agents-summary-disclosure {
    border: 1px solid rgba(51, 65, 85, 0.58);
    border-radius: 16px;
    background: rgba(15, 23, 42, 0.32);
    overflow: hidden;
}

.agents-summary-disclosure summary {
    cursor: pointer;
    padding: 14px 16px;
    color: #e2e8f0;
    font-weight: 700;
}

.agents-summary-disclosure-body {
    display: grid;
    gap: 16px;
    padding: 0 16px 16px;
}

@media (max-width: 900px) {
    .agents-surface-grid--split,
    .agents-surface-grid--bottom {
        grid-template-columns: 1fr;
    }

    .agents-surface-card > form {
        padding: 14px;
    }

    .agents-toolbar-form,
    .agents-toolbar-linkout {
        align-items: stretch;
    }

    .agents-toolbar-form .btn,
    .agents-toolbar-linkout .btn {
        width: 100%;
    }

    .agents-filter-more {
        width: 100%;
    }
}

/* =========================================================
   6.1. KPI-КАРТОЧКИ ДЛЯ BLOCKING SEVERITY
   ========================================================= */
/*
    Подсветка верхних KPI-блоков на detail page:
    - high   = красный
    - medium = жёлтый
    - low    = зелёный
*/

.stat-card-severity-high {
    background: linear-gradient(
        180deg,
        rgba(255, 77, 77, 0.14),
        rgba(11, 18, 32, 0.96)
    );
    border-color: rgba(255, 77, 77, 0.38);
    box-shadow: inset 0 0 0 1px rgba(255, 77, 77, 0.08);
}

.stat-card-severity-medium {
    background: linear-gradient(
        180deg,
        rgba(255, 193, 7, 0.14),
        rgba(11, 18, 32, 0.96)
    );
    border-color: rgba(255, 193, 7, 0.38);
    box-shadow: inset 0 0 0 1px rgba(255, 193, 7, 0.08);
}

.stat-card-severity-low {
    background: linear-gradient(
        180deg,
        rgba(40, 167, 69, 0.12),
        rgba(11, 18, 32, 0.96)
    );
    border-color: rgba(40, 167, 69, 0.34);
    box-shadow: inset 0 0 0 1px rgba(40, 167, 69, 0.08);
}

.stat-card-severity-high .stat-label {
    color: #ffb3b8;
}

.stat-card-severity-medium .stat-label {
    color: #ffe08a;
}

.stat-card-severity-low .stat-label {
    color: #9fe3b8;
}

.deadlock-detail-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 16px;
    margin-top: 20px;
}

.deadlock-detail-card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 18px 20px;
    background: #0b1220;
    border: 1px solid #334155;
    border-radius: 14px;
}

.deadlock-detail-span-3 {
    grid-column: span 3;
}

.deadlock-detail-span-6 {
    grid-column: span 6;
}

.deadlock-detail-label {
    color: #93c5fd;
    font-size: 14px;
}

.deadlock-detail-value {
    min-width: 0;
    color: #f8fafc;
    font-size: clamp(24px, 3vw, 38px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.03em;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.deadlock-detail-value-compact {
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.15;
}

@media (max-width: 1080px) {
    .deadlock-detail-span-3,
    .deadlock-detail-span-6 {
        grid-column: span 6;
    }
}

@media (max-width: 720px) {
    .deadlock-detail-grid {
        grid-template-columns: 1fr;
    }

    .deadlock-detail-span-3,
    .deadlock-detail-span-6 {
        grid-column: auto;
    }
}

/* =========================================================
   7. DISTRIBUTION BARS / DASHBOARD METRICS
   ========================================================= */
.metric-bar-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 280px;
}

.metric-bar {
    flex: 1;
    height: 10px;
    background: #0b1220;
    border: 1px solid #334155;
    border-radius: 999px;
    overflow: hidden;
}

/*
    Базовый класс заполнения полоски.
    ВАЖНО: background здесь не задаём,
    чтобы его можно было переопределять severity-классами.
*/
.metric-bar-fill {
    height: 100%;
    border-radius: 999px;
}

.metric-value {
    min-width: 90px;
    color: #e2e8f0;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Цвета распределительных полос */
.metric-bar-low {
    background: linear-gradient(90deg, #60a5fa, #3b82f6);
}

.metric-bar-medium {
    background: linear-gradient(90deg, #22c55e, #16a34a);
}

.metric-bar-high {
    background: linear-gradient(90deg, #facc15, #f59e0b);
}

.metric-bar-critical {
    background: linear-gradient(90deg, #fb7185, #ef4444);
}

/* =========================================================
   8. PAGE HEADER / ACTIONS / TOOLBARS
   ========================================================= */
.page-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.page-toolbar-left {
    justify-content: flex-start;
}

.page-header-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.page-title {
    margin: 0;
    color: #f8fafc;
    font-size: 32px;
    line-height: 1.15;
    word-break: break-word;
}

.link-back {
    display: inline-flex;
    align-items: center;
    color: #9fc4ff;
    font-weight: 500;
    text-decoration: none;
}

.link-back:hover {
    color: #c5dcff;
    text-decoration: underline;
}

/* Базовые кнопки */
.button,
a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 14px;
    background: #132544;
    border: 1px solid #2c436d;
    border-radius: 10px;
    color: #e7eefc !important;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: 0.15s ease-in-out;
}

.button:hover,
a.button:hover {
    background: #183056;
    border-color: #3b5b93;
    color: #ffffff !important;
    text-decoration: none !important;
}

.button-danger,
a.button-danger {
    background: #3b1620;
    border-color: #7d2d41;
    color: #ffd9df !important;
}

.button-danger:hover,
a.button-danger:hover {
    background: #521b29;
    border-color: #a23b56;
    color: #ffffff !important;
}

/* Старый класс из шаблонов — оставляем для совместимости */
.btn,
a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: 0.15s ease-in-out;
}

.btn-secondary,
a.btn-secondary {
    background: #132544;
    border: 1px solid #2c436d;
    color: #e7eefc !important;
}

.btn-secondary:hover,
a.btn-secondary:hover {
    background: #183056;
    border-color: #3b5b93;
    color: #ffffff !important;
}

.btn-danger-soft,
a.btn-danger-soft {
    background: rgba(220, 38, 38, 0.14);
    border: 1px solid rgba(248, 113, 113, 0.35);
    color: #fecaca !important;
}

.btn-danger-soft:hover,
a.btn-danger-soft:hover {
    background: rgba(220, 38, 38, 0.24);
    border-color: rgba(248, 113, 113, 0.5);
    color: #ffffff !important;
}

.btn-success-soft,
a.btn-success-soft {
    background: rgba(22, 163, 74, 0.14);
    border: 1px solid rgba(74, 222, 128, 0.35);
    color: #bbf7d0 !important;
}

.btn-success-soft:hover,
a.btn-success-soft:hover {
    background: rgba(22, 163, 74, 0.24);
    border-color: rgba(74, 222, 128, 0.5);
    color: #ffffff !important;
}

.danger-zone {
    background: linear-gradient(180deg, rgba(59, 22, 32, 0.28), rgba(17, 24, 39, 1));
    border-color: rgba(162, 59, 86, 0.55);
}

.danger-zone-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.danger-zone-header h2 {
    margin: 0 0 6px 0;
}

.section-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.inline-filter-form {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alerts-filter-form .page-toolbar-left {
    display: flex;
    align-items: end;
    gap: 12px;
    flex-wrap: wrap;
}

.alerts-rules-filter-panel {
    padding: 16px 18px;
    border: 1px solid rgba(71, 85, 105, 0.7);
    border-radius: 16px;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.12), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(2, 6, 23, 0.96));
}

.alerts-filter-grid {
    flex: 1 1 760px;
}

.alerts-filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 176px;
    padding: 10px 12px 12px;
    border: 1px solid rgba(51, 65, 85, 0.95);
    border-radius: 14px;
    background: rgba(11, 18, 32, 0.88);
    box-shadow: inset 0 1px 0 rgba(148, 163, 184, 0.05);
}

.alerts-filter-field span.muted {
    display: block;
    line-height: 1.2;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.alerts-filter-field select {
    width: 100%;
    min-height: 44px;
    padding: 0 40px 0 12px;
    border: 1px solid #475569;
    border-radius: 12px;
    background-color: rgba(15, 23, 42, 0.98);
    color: #f8fafc;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image:
        linear-gradient(45deg, transparent 50%, #94a3b8 50%),
        linear-gradient(135deg, #94a3b8 50%, transparent 50%);
    background-position:
        calc(100% - 18px) calc(50% - 3px),
        calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    box-sizing: border-box;
}

.alerts-filter-field select:hover {
    border-color: #64748b;
    background-color: rgba(15, 23, 42, 1);
}

.alerts-filter-field select:focus {
    outline: none;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.alerts-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    align-self: stretch;
    padding-left: 4px;
}

@media (max-width: 900px) {
    .site-nav {
        width: 100%;
        padding-right: 0;
    }

    .site-nav-primary,
    .site-nav-secondary {
        width: 100%;
    }

    .site-nav-secondary {
        justify-content: flex-start;
    }

    .site-nav-language-floating {
        position: static;
        order: 3;
    }

    .nav-menu {
        left: 0;
        right: auto;
    }
}

@media (max-width: 640px) {
    .org-button {
        min-width: 180px;
        max-width: 100%;
    }

    .nav-link,
    .nav-button {
        min-height: 36px;
        padding: 0 12px;
    }

    .global-scroll-top {
        right: 16px;
        bottom: 18px;
        min-height: 40px;
        padding: 0 14px;
    }
}
    .alerts-filter-field {
        min-width: 100%;
    }

    .alerts-filter-form .page-toolbar-left {
        width: 100%;
    }

    .alerts-filter-actions {
        width: 100%;
        justify-content: flex-start;
        padding-left: 0;
    }
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cbd5e1;
    font-size: 14px;
    user-select: none;
}

.checkbox-inline input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #3b82f6;
}

/* =========================================================
   9. ТАБЛИЧНЫЕ АКЦЕНТЫ ДЛЯ DASHBOARD
   ========================================================= */
/* Старые warning/critical-строки на overview/dashboard */
.table-row-critical td {
    background: rgba(127, 29, 29, 0.14);
    border-bottom-color: rgba(248, 113, 113, 0.18);
}

.table-row-warning td {
    background: rgba(120, 113, 16, 0.10);
    border-bottom-color: rgba(250, 204, 21, 0.16);
}

.table-row-critical td:first-child {
    box-shadow: inset 3px 0 0 rgba(248, 113, 113, 0.75);
}

.table-row-warning td:first-child {
    box-shadow: inset 3px 0 0 rgba(250, 204, 21, 0.65);
}

/* =========================================================
   10. BLOCKING SEVERITY (RED / YELLOW / GREEN)
   ========================================================= */
/*
    Эти классы используются на detail page блокировок.
    Мы специально красим не только badge, но и всю строку,
    чтобы опасные блокировки бросались в глаза сразу.
*/

/* Критично: долгие или опасные блокировки */
.row-severity-high td {
    background: rgba(255, 77, 77, 0.12);
    border-bottom-color: rgba(255, 77, 77, 0.22);
}

.row-severity-high td:first-child {
    box-shadow: inset 3px 0 0 #ff4d4d;
}

.row-severity-high:hover td {
    background: rgba(255, 77, 77, 0.18);
}

/* Внимание: средняя серьёзность */
.row-severity-medium td {
    background: rgba(255, 193, 7, 0.12);
    border-bottom-color: rgba(255, 193, 7, 0.22);
}

.row-severity-medium td:first-child {
    box-shadow: inset 3px 0 0 #ffc107;
}

.row-severity-medium:hover td {
    background: rgba(255, 193, 7, 0.18);
}

/* Низкая серьёзность: блокировка есть, но пока не критично */
.row-severity-low td {
    background: rgba(40, 167, 69, 0.10);
    border-bottom-color: rgba(40, 167, 69, 0.20);
}

.row-severity-low td:first-child {
    box-shadow: inset 3px 0 0 #28a745;
}

.row-severity-low:hover td {
    background: rgba(40, 167, 69, 0.16);
}

/* =========================================================
   11. BADGES ДЛЯ SEVERITY
   ========================================================= */
/*
    У badge тот же смысл:
    - high   = красный
    - medium = жёлтый
    - low    = зелёный
*/
.badge-danger,
.badge-primary,
.badge-success,
.badge-watch,
.badge-warning,
.badge-info,
.badge-neutral {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid transparent;
}

.badge-danger {
    background: rgba(255, 77, 77, 0.20);
    border-color: rgba(255, 77, 77, 0.40);
    color: #ff9aa2;
}

.badge-primary {
    background: rgba(59, 130, 246, 0.20);
    border-color: rgba(59, 130, 246, 0.40);
    color: #bfdbfe;
}

.badge-success {
    background: rgba(34, 197, 94, 0.18);
    border-color: rgba(34, 197, 94, 0.34);
    color: #a7f3d0;
}

.badge-watch {
    background: rgba(249, 115, 22, 0.16);
    border-color: rgba(249, 115, 22, 0.34);
    color: #fdba74;
}

.badge-warning {
    background: rgba(255, 193, 7, 0.20);
    border-color: rgba(255, 193, 7, 0.40);
    color: #ffd76a;
}

.badge-info {
    background: rgba(40, 167, 69, 0.20);
    border-color: rgba(40, 167, 69, 0.40);
    color: #7ee2a8;
}

.badge-neutral {
    background: rgba(100, 116, 139, 0.20);
    border-color: rgba(100, 116, 139, 0.40);
    color: #cbd5e1;
}

/* =========================================================
   12. RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
    .page-title {
        font-size: 28px;
    }

    .danger-zone-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .stats-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .performance-sections-grid {
        grid-template-columns: 1fr;
    }

    .health-banner {
        flex-direction: column;
    }

    .health-banner-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 560px) {
    .page-title {
        font-size: 24px;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .agents-summary-number {
        font-size: 22px;
    }

    main {
        padding: 24px var(--page-gutter);
    }
}


/* =========================================================
   13. CPU
   ========================================================= */
.cpu-bar {
    width: 120px;
    height: 8px;
    background: #1e293b;
    border-radius: 4px;
    overflow: hidden;
}

.cpu-bar-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.cpu-low {
    background: #22c55e;
}

.cpu-medium {
    background: #f59e0b;
}

.cpu-high {
    background: #ef4444;
}

.cpu-value {
    font-size: 12px;
    margin-top: 2px;
}

.row-severity-high {
    background: rgba(239, 68, 68, 0.1);
}

.row-severity-medium {
    background: rgba(245, 158, 11, 0.1);
}

.row-severity-low {
    background: rgba(34, 197, 94, 0.1);
}

.row-selected {
    outline: 2px solid rgba(59, 130, 246, 0.7);
    outline-offset: -2px;
}

.query-stack {
    display: grid;
    gap: 16px;
}

.query-card {
    border: 1px solid #334155;
    border-radius: 10px;
    background: #0f172a;
    overflow: hidden;
}

.query-card-summary {
    display: block;
    padding: 16px 18px;
}

.query-card-summary-grid {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: start;
    gap: 18px;
}

.query-card-lead {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.query-card-main {
    min-width: 0;
}

.query-sql-preview {
    color: #e2e8f0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.query-card-actions {
    padding: 0 18px 14px;
}

.query-card-body {
    border-top: 1px solid #1e293b;
    padding: 14px 18px 18px;
    background: rgba(2, 6, 23, 0.45);
}

.query-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 10px;
}

.query-sql-full {
    margin: 0;
    max-height: 280px;
    padding: 12px;
    background: #020617;
    border: 1px solid #1e293b;
    border-radius: 8px;
    color: #cbd5e1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: auto;
}

.query-copy-actions {
    margin-bottom: 10px;
}

.sql-events-hero {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.96), rgba(11, 18, 32, 1));
}

.sql-events-hero-copy,
.sql-events-feed-copy,
.sql-events-filter-copy {
    max-width: 760px;
}

.sql-events-hero-side {
    display: flex;
    align-items: flex-start;
}

.sql-events-stats-grid {
    margin-top: 18px;
}

.sql-events-stats-grid .stat-card {
    min-height: 94px;
}

.sql-events-latest-value {
    color: #f8fafc;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
}

.sql-events-filter-shell {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(71, 85, 105, 0.45);
}

.sql-events-filter-header {
    margin-bottom: 14px;
}

.sql-events-filter-grid {
    margin-top: 0;
}

.sql-events-feed-title {
    margin: 0;
}

.sql-events-card {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.88));
}

.sql-events-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 16px 18px;
}

.sql-events-row-main {
    min-width: 0;
}

.sql-events-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}

.sql-events-row-lead {
    flex-wrap: wrap;
    white-space: normal;
}

.sql-events-row-meta {
    justify-content: flex-end;
    margin-bottom: 0;
}

.sql-events-message {
    -webkit-line-clamp: 3;
}

.sql-events-headline {
    color: #f8fafc;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 10px;
}

.sql-events-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.sql-events-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(71, 85, 105, 0.9);
    background: rgba(15, 23, 42, 0.72);
    color: #cbd5e1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.sql-events-details {
    margin-top: 12px;
}

.sql-events-details summary {
    cursor: pointer;
    color: #93c5fd;
    font-size: 13px;
    font-weight: 600;
}

.sql-events-raw {
    margin-top: 10px;
}

.sql-events-footnote {
    margin-top: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.sql-events-actions {
    display: grid;
    gap: 10px;
    padding: 0;
    min-width: 190px;
}

.sql-events-actions .btn {
    justify-content: center;
}

.sql-events-card .query-card-meta .badge {
    padding: 2px 8px;
}

.server-sql-events-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.server-sql-events-row-top {
    align-items: start;
}

.server-sql-events-row-meta {
    justify-content: flex-start;
}

.server-sql-events-message {
    -webkit-line-clamp: 4;
}

.server-environment-form {
    margin: 0;
}

.server-environment-select {
    min-width: 132px;
    min-height: 34px;
    padding: 0 32px 0 12px;
    border: 1px solid rgba(45, 212, 191, 0.48);
    border-radius: 999px;
    background-color: rgba(15, 23, 42, 0.92);
    background-image:
        linear-gradient(45deg, transparent 50%, #5eead4 50%),
        linear-gradient(135deg, #5eead4 50%, transparent 50%);
    background-position:
        calc(100% - 17px) calc(50% - 3px),
        calc(100% - 11px) calc(50% - 3px);
    background-repeat: no-repeat;
    background-size: 6px 6px, 6px 6px;
    color: #ccfbf1;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.server-environment-select:hover {
    border-color: rgba(94, 234, 212, 0.82);
    background-color: rgba(15, 23, 42, 1);
}

.server-environment-select:focus {
    outline: none;
    border-color: #2dd4bf;
    box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.18);
}

.query-copy-button {
    min-width: 88px;
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.2;
}

.mail-settings-lead-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.mail-settings-shell {
    display: grid;
    gap: 18px;
}

.mail-settings-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(280px, 0.9fr);
    gap: 18px;
    align-items: stretch;
    background:
        radial-gradient(circle at top left, rgba(59, 130, 246, 0.18), transparent 38%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96));
}

.mail-settings-hero-copy h1 {
    margin: 10px 0 10px;
}

.mail-settings-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.mail-settings-hero-side {
    display: flex;
}

.mail-settings-status-card {
    width: 100%;
    padding: 18px;
    border: 1px solid rgba(59, 130, 246, 0.24);
    border-radius: 16px;
    background: rgba(9, 16, 31, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.mail-settings-status-label {
    margin-bottom: 12px;
    color: #bfdbfe;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.mail-settings-guide-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(300px, 1fr));
    gap: 18px;
}

.mail-settings-note {
    padding: 16px 18px;
    border: 1px solid rgba(51, 65, 85, 0.95);
    border-radius: 16px;
    background: rgba(11, 18, 32, 0.88);
}

.mail-settings-note h3 {
    margin: 0 0 10px 0;
}

.mail-settings-panel {
    padding: 22px 24px;
}

.mail-settings-panel-accent {
    background:
        radial-gradient(circle at top right, rgba(34, 197, 94, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96));
}

.mail-settings-panel-head {
    margin-bottom: 16px;
}

.mail-settings-panel-head h2 {
    margin: 0 0 8px 0;
}

.mail-settings-list {
    margin: 0;
    padding-left: 18px;
    display: grid;
    gap: 8px;
}

.mail-settings-steps {
    display: grid;
    gap: 12px;
}

.mail-settings-step {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 12px 0;
    border-top: 1px solid rgba(51, 65, 85, 0.72);
}

.mail-settings-step:first-child {
    border-top: 0;
    padding-top: 0;
}

.mail-settings-step-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.22);
    border: 1px solid rgba(96, 165, 250, 0.45);
    color: #dbeafe;
    font-weight: 700;
}

.mail-settings-pre {
    margin: 0;
    padding: 12px;
    border: 1px solid #334155;
    border-radius: 10px;
    background: #020617;
    color: #e2e8f0;
    white-space: pre-wrap;
}

.mail-settings-accent-note {
    margin-top: 12px;
}

.mail-settings-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.mail-settings-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid rgba(51, 65, 85, 0.95);
    border-radius: 14px;
    background: rgba(11, 18, 32, 0.88);
}

.mail-settings-field label {
    font-weight: 600;
}

.mail-settings-field-wide {
    grid-column: span 2;
}

.mail-settings-field input[type="text"],
.mail-settings-field input[type="email"],
.mail-settings-field input[type="password"],
.mail-settings-field input[type="number"] {
    width: 100%;
}

.mail-settings-field-inline {
    justify-content: space-between;
}

.mail-settings-toggle-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.mail-settings-toggle-card {
    padding: 16px 18px;
    border: 1px solid rgba(51, 65, 85, 0.95);
    border-radius: 14px;
    background: rgba(11, 18, 32, 0.88);
}

.mail-settings-boolean {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

.mail-settings-save-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.mail-settings-test-card {
    padding: 22px 24px;
}

.mail-settings-test-form {
    display: flex;
    align-items: end;
    gap: 14px;
    flex-wrap: wrap;
}

.mail-settings-test-input-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 360px;
}

.executive-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(2, 6, 23, 0.96));
}

.executive-risk-high {
    border-color: rgba(239, 68, 68, 0.45);
}

.executive-risk-attention {
    border-color: rgba(245, 158, 11, 0.45);
}

.executive-risk-healthy {
    border-color: rgba(34, 197, 94, 0.35);
}

.executive-hero-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.executive-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 18px;
    margin-top: 18px;
}

.executive-panel {
    padding: 20px 22px;
}

.executive-card-stack {
    display: grid;
    gap: 12px;
}

.executive-mini-card {
    display: block;
    padding: 14px 16px;
    border: 1px solid rgba(51, 65, 85, 0.85);
    border-radius: 14px;
    background: rgba(11, 18, 32, 0.88);
    color: inherit;
    text-decoration: none;
}

.executive-mini-card:hover {
    border-color: rgba(96, 165, 250, 0.55);
    background: rgba(15, 23, 42, 0.96);
    text-decoration: none;
}

.executive-mini-card-high {
    border-color: rgba(239, 68, 68, 0.38);
}

.executive-mini-card-medium {
    border-color: rgba(245, 158, 11, 0.34);
}

.executive-mini-card-low {
    border-color: rgba(34, 197, 94, 0.3);
}

.executive-mini-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.branded-summary {
    border: 1px solid rgba(148, 163, 184, 0.22);
    background:
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.18), transparent 32%),
        radial-gradient(circle at bottom left, rgba(16, 185, 129, 0.14), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94));
}

.branded-summary-attention {
    background:
        radial-gradient(circle at top right, rgba(251, 191, 36, 0.16), transparent 32%),
        radial-gradient(circle at bottom left, rgba(56, 189, 248, 0.12), transparent 36%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94));
}

.branded-summary-critical {
    background:
        radial-gradient(circle at top right, rgba(248, 113, 113, 0.18), transparent 30%),
        radial-gradient(circle at bottom left, rgba(251, 191, 36, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94));
}

.branded-summary-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(260px, 0.7fr);
    gap: 20px;
    align-items: start;
}

.branded-summary-story {
    display: grid;
    gap: 10px;
    margin-top: 18px;
}

.branded-summary-storyline {
    padding: 12px 14px;
    border: 1px solid rgba(148, 163, 184, 0.18);
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.52);
}

.branded-summary-actions {
    display: grid;
    gap: 10px;
    align-content: start;
}

.branded-summary-metrics {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
    margin: 22px 0;
}

.branded-metric-card {
    border: 1px solid rgba(148, 163, 184, 0.18);
}

.branded-metric-value {
    margin-top: 10px;
    font-size: 28px;
    line-height: 1.1;
    font-weight: 700;
    color: #f8fafc;
}

.branded-metric-good {
    box-shadow: inset 0 0 0 1px rgba(34, 197, 94, 0.12);
}

.branded-metric-warn {
    box-shadow: inset 0 0 0 1px rgba(250, 204, 21, 0.12);
}

.branded-metric-danger {
    box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.12);
}

.branded-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.branded-summary-panel {
    min-height: 100%;
}

.branded-summary-coverage-note {
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px dashed rgba(148, 163, 184, 0.22);
    border-radius: 12px;
    color: #cbd5e1;
}

.executive-action-list {
    display: grid;
    gap: 10px;
}

.executive-action-link {
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.85);
    background: rgba(11, 18, 32, 0.82);
    color: #e2e8f0;
    text-decoration: none;
}

.executive-action-link:hover {
    background: rgba(15, 23, 42, 0.96);
    text-decoration: none;
}

.executive-list {
    display: grid;
    gap: 12px;
}

.executive-list-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    border: 1px solid rgba(51, 65, 85, 0.82);
    border-radius: 14px;
    background: rgba(11, 18, 32, 0.84);
}

.executive-list-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.executive-coverage-strip {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.executive-coverage-strip > div {
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(51, 65, 85, 0.82);
    background: rgba(11, 18, 32, 0.84);
}

.onboarding-step-list {
    display: grid;
    gap: 14px;
}

.onboarding-step-card {
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(51, 65, 85, 0.82);
    background: rgba(11, 18, 32, 0.84);
}

.onboarding-step-done {
    border-color: rgba(34, 197, 94, 0.32);
}

.onboarding-step-pending {
    border-color: rgba(100, 116, 139, 0.32);
}

.onboarding-step-warning {
    border-color: rgba(245, 158, 11, 0.34);
}

.onboarding-step-failed {
    border-color: rgba(239, 68, 68, 0.38);
}

.onboarding-step-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.onboarding-step-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
}

.onboarding-step-details {
    color: #cbd5e1;
    margin-bottom: 12px;
}

.onboarding-step-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.onboarding-gap-block {
    padding: 14px 16px;
    border-radius: 14px;
    border: 1px solid rgba(51, 65, 85, 0.82);
    background: rgba(11, 18, 32, 0.78);
}

.form-errors {
    color: #fca5a5;
    font-size: 13px;
}

.form-errors-box {
    margin-bottom: 16px;
    padding: 12px 14px;
    border: 1px solid rgba(239, 68, 68, 0.45);
    border-radius: 12px;
    background: rgba(69, 10, 10, 0.28);
}

@media (max-width: 700px) {
    .query-card-summary-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .sql-events-row {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sql-events-row-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .sql-events-row-meta {
        justify-content: flex-start;
    }

    .server-sql-events-row-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .server-sql-events-row-meta {
        justify-content: flex-start;
    }

    .sql-events-actions {
        min-width: 0;
    }

    .mail-settings-hero,
    .branded-summary-hero,
    .branded-summary-grid,
    .mail-settings-guide-grid,
    .executive-grid,
    .mail-settings-lead-grid,
    .mail-settings-form-grid,
    .mail-settings-toggle-row {
        grid-template-columns: 1fr;
    }

    .mail-settings-field-wide {
        grid-column: span 1;
    }

    .mail-settings-test-form {
        align-items: stretch;
    }

    .executive-list-row,
    .executive-hero,
    .onboarding-step-top,
    .onboarding-step-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .branded-summary-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.deadlocks-filter-form {
    display: flex;
    gap: 12px;
    align-items: stretch;
    flex-wrap: wrap;
}

.deadlocks-filter-block,
.deadlocks-filter-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 168px;
    padding: 12px 14px;
    border: 1px solid rgba(51, 65, 85, 0.92);
    border-radius: 14px;
    background: rgba(11, 18, 32, 0.88);
}

.deadlocks-filter-block {
    min-width: 300px;
}

.deadlocks-filter-label {
    color: #94a3b8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.deadlocks-preset-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.deadlocks-filter-field input[type="date"] {
    min-height: 42px;
    padding: 0 12px;
    border: 1px solid #475569;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.96);
    color: #f8fafc;
    font-size: 14px;
    box-sizing: border-box;
}

.deadlocks-filter-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.deadlocks-signature-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.deadlocks-signature-table-shell {
    min-height: 0;
    height: auto;
    max-height: min(68vh, 760px);
}

.deadlocks-signature-table {
    min-width: 1280px;
}

.deadlocks-signature-row td {
    background: rgba(6, 12, 24, 0.78);
}

.deadlocks-signature-row:hover td {
    background: rgba(15, 23, 42, 0.96);
}

.deadlocks-signature-hash {
    color: #f8fafc;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    word-break: break-all;
}

.deadlocks-primary-value,
.deadlocks-primary-link {
    color: #f8fafc;
    font-weight: 700;
}

.deadlocks-primary-link {
    text-decoration: none;
}

.deadlocks-primary-link:hover {
    color: #bfdbfe;
    text-decoration: underline;
}

.deadlocks-summary-text {
    color: #dbe7f5;
    line-height: 1.45;
}

.deadlocks-signature-subline {
    margin-top: 6px;
    line-height: 1.35;
}

.deadlocks-repeat-badge {
    font-size: 13px;
    padding: 6px 10px;
}

.deadlocks-detail-btn {
    min-width: 88px;
    justify-content: center;
}

@media (max-width: 900px) {
    .deadlocks-filter-form {
        width: 100%;
    }

    .deadlocks-filter-block,
    .deadlocks-filter-field,
    .deadlocks-filter-actions {
        width: 100%;
    }

    .deadlocks-filter-actions {
        justify-content: flex-start;
    }
}