:root {
    /* Primary palette */
    --color-ink: #1a1a2e;
    --color-ink-light: #2d2d44;
    --color-ink-muted: #4a4a6a;
    --color-parchment: #f8f6f1;
    --color-parchment-dark: #ebe8e0;
    --color-gold: #b8860b;
    --color-gold-light: #daa520;
    --color-gold-pale: #f5e6c8;
    --color-burgundy: #722f37;
    --color-sage: #6b7f6b;

    /* Semantic */
    --color-bg: var(--color-parchment);
    --color-text: var(--color-ink);
    --color-text-muted: var(--color-ink-muted);
    --color-border: #d4d0c8;
    --color-border-light: #e8e5dd;
    --color-accent: var(--color-gold);
    --color-accent-hover: var(--color-gold-light);

    /* Typography */
    --font-display: var(--font-body);
    --font-body: 'Segoe UI', Inter, Arial, -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* Borders */
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(26, 26, 46, 0.05);
    --shadow-md: 0 4px 12px rgba(26, 26, 46, 0.08);
    --shadow-lg: 0 8px 24px rgba(26, 26, 46, 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 400ms ease;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-variant-numeric: tabular-nums;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

ul, ol {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

.header {
    background: var(--color-ink);
    border-bottom: 1px solid rgba(184, 134, 11, 0.2);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xl);
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-parchment);
    transition: opacity var(--transition-fast);
}

.logo:hover {
    opacity: 0.9;
}

.logo-mark {
    width: 44px;
    height: 44px;
    color: var(--color-gold);
}

.logo-mark svg {
    width: 100%;
    height: 100%;
}

.logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.logo-title {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-parchment);
}

.logo-subtitle {
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0.8;
}

.nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav-link {
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-parchment);
    opacity: 0.7;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: var(--color-gold);
    transition: width var(--transition-normal);
}

.nav-link:hover,
.nav-link.active {
    opacity: 1;
}

.nav-link.active::after,
.nav-link:hover::after {
    width: 100%;
}

/* === user-menu (task 5): бургер-меню пользователя в тёмной шапке === */
.header-right {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    min-width: 0; /* let .nav shrink/scroll instead of pushing the burger off-screen */
}

.user-menu {
    position: relative;
    display: flex;
    align-items: center;
    flex-shrink: 0; /* burger toggle must always stay visible in the header */
}

.user-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    color: var(--color-parchment);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.user-menu-toggle:hover,
.user-menu.is-open .user-menu-toggle {
    background: var(--color-ink-light);
    color: var(--color-gold);
}

.user-menu-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 20px;
}

.user-menu-burger span {
    display: block;
    height: 2px;
    width: 100%;
    background: currentColor;
    border-radius: var(--radius-sm);
}

.user-menu-panel {
    position: absolute;
    top: calc(100% + var(--space-sm));
    right: 0;
    z-index: 200;
    min-width: 220px;
    max-width: 280px;
    display: none;
    flex-direction: column;
    padding: var(--space-xs);
    background: var(--color-parchment);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

/* Раскрытие по клику (JS управляет классом .is-open). */
.user-menu.is-open .user-menu-panel {
    display: flex;
}

/* Мягкая деградация без JS: :focus-within раскрывает панель. Действует ТОЛЬКО
   когда JS не пометил меню как .user-menu--js — иначе :focus-within конфликтует
   с JS-закрытием (рефокус кнопки после Escape/повторный клик держал бы панель). */
.user-menu:not(.user-menu--js):focus-within .user-menu-panel {
    display: flex;
}

.user-menu-name {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
    margin-bottom: var(--space-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-menu-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text);
    border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.user-menu-item:hover,
.user-menu-item:focus-visible {
    background: var(--color-gold-pale);
    color: var(--color-ink);
}

.user-menu-logout {
    margin: 0;
}

.user-menu-logout-btn {
    color: var(--color-burgundy);
}

.user-menu-logout-btn:hover,
.user-menu-logout-btn:focus-visible {
    background: var(--color-burgundy);
    color: var(--color-parchment);
}


.main {
    flex: 1;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: var(--space-2xl) var(--space-xl);
}


.page-header {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.page-header::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-gold), transparent);
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.breadcrumb-link {
    color: var(--color-accent);
    transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
    color: var(--color-accent-hover);
}

.breadcrumb-sep {
    opacity: 0.4;
}

.page-title {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-ink);
    margin-bottom: var(--space-sm);
}

.page-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    font-weight: 300;
}

.page-subtitle-main {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-ink);
    letter-spacing: -0.01em;
    margin-bottom: var(--space-sm);
}

.page-meta {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-top: var(--space-md);
}

.meta-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.meta-value {
    font-weight: 600;
    color: var(--color-ink);
}


.toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.search-form {
    flex: 1;
    max-width: 400px;
    position: relative;
}

.search-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    padding-left: 2.75rem;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--color-text);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.search-input::placeholder {
    color: var(--color-text-muted);
    opacity: 0.6;
}

.search-input:focus {
    outline: none;
    border-color: var(--color-gold);
    box-shadow: 0 0 0 3px var(--color-gold-pale);
}

.search-icon {
    position: absolute;
    left: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: var(--color-text-muted);
    opacity: 0.5;
}

.filter-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.filter-btn {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: var(--color-text-muted);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.filter-btn:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.filter-btn.active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: white;
}

.case-filter-panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.case-filter-main,
.case-filter-secondary {
    display: grid;
    gap: var(--space-md);
    align-items: end;
}

.case-filter-main {
    grid-template-columns: minmax(420px, 2.4fr) repeat(3, minmax(170px, 1fr));
}

.case-filter-secondary {
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.sro-search-form {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto;
    align-items: center;
    gap: var(--space-sm);
    max-width: 640px;
}

.sro-search-field {
    position: relative;
}

.sro-search-actions {
    display: flex;
    gap: var(--space-xs);
}

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

.case-filter-search {
    position: relative;
    display: flex;
    align-items: center;
}

.case-filter-search .search-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--color-ink-muted);
    pointer-events: none;
}

.case-filter-search .search-input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-parchment);
    color: var(--color-text);
    font: inherit;
    padding: 9px 12px 9px 42px;
}

.case-filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.case-filter-field label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.case-filter-field select,
.case-filter-field input {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-parchment);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    padding: 9px 12px;
}

.case-period-inputs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.case-filter-actions {
    display: flex;
    grid-column: 3 / -1;
    align-items: end;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--space-sm);
    min-height: 44px;
}

.case-filter-note {
    margin: var(--space-sm) 0 0;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.case-export-btn {
    align-self: end;
    white-space: nowrap;
}

.case-filter-panel .btn-export,
.case-filter-panel .btn-primary,
.case-filter-panel .btn-secondary {
    min-height: 44px;
    padding: 9px 14px;
}

.btn-export {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 40px;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    font-weight: 600;
    color: white;
    background: #217346;
    border: none;
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: all var(--transition-fast);
    white-space: nowrap;
}

.btn-export:hover {
    background: #1a5c38;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    min-height: 40px;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--color-gold);
    border-radius: var(--radius-md);
    background: var(--color-gold);
    color: white;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.btn-primary:hover {
    border-color: var(--color-gold-light);
    background: var(--color-gold-light);
}

/* «Применить» неактивна, пока фильтры не изменены относительно загруженных
   (JS выставляет :disabled). Приглушаем, чтобы кнопка не «горела» без нужды. */
.btn-primary:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.btn-primary:disabled:hover {
    border-color: var(--color-gold);
    background: var(--color-gold);
}

.btn-export svg {
    width: 16px;
    height: 16px;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: var(--space-lg);
}

.card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: all var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--color-gold);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform var(--transition-normal);
}

.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--color-border);
    transform: translateY(-2px);
}

.card:hover::before {
    transform: scaleY(1);
}

.card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gold-pale);
    border-radius: var(--radius-md);
    color: var(--color-gold);
    flex-shrink: 0;
}

.card-icon svg {
    width: 24px;
    height: 24px;
}

.card-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-parchment-dark);
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
}

.card-title {
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-xs);
    letter-spacing: -0.01em;
}

.card-subtitle {
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.card-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-light);
}

.stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-value {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-ink);
}

.stat-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    letter-spacing: 0.02em;
}

.card-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-accent);
    transition: all var(--transition-fast);
}

.card-action svg {
    width: 16px;
    height: 16px;
    transition: transform var(--transition-fast);
}

.card:hover .card-action {
    color: var(--color-accent-hover);
}

.card:hover .card-action svg {
    transform: translateX(4px);
}


/* Полосы прокрутки таблицы стилизуются тем же набором, что уже применён к
   прокручиваемым блокам аналитики (.analytics-table-wrap и соседи): системная
   полоса выбивалась из остального интерфейса. Полоса НЕ скрывается
   (scrollbar-width: thin, а не none) — прокрутка колесом, трекпадом и клавиатурой
   не затрагивается, контейнер остаётся фокусируемым скролл-портом. */
.table-container {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    overflow: auto;
    max-height: calc(100vh - 180px);
    scrollbar-color: rgba(26, 26, 46, 0.45) transparent;
    scrollbar-width: thin;
}

.table-container::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.table-container::-webkit-scrollbar-track {
    background: transparent;
}

.table-container::-webkit-scrollbar-thumb {
    border: 2px solid white;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.45);
}

.table-container::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 26, 46, 0.65);
}

/* Угол между горизонтальной и вертикальной полосами: без этого правила там
   остаётся системный серый квадрат. */
.table-container::-webkit-scrollbar-corner {
    background: transparent;
}

.table-scroll-hint {
    margin: 0 0 8px;
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    text-align: right;
}

/* Дублёр горизонтальной прокрутки над таблицей: полоса здесь — единственное
   содержимое блока, поэтому её вид особенно заметен. Высота блока 16px (минус 1px
   рамки с каждой стороны) вмещает 10px полосу. */
.table-top-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    height: 16px;
    margin-bottom: 8px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: white;
    scrollbar-color: rgba(26, 26, 46, 0.45) transparent;
    scrollbar-width: thin;
}

.table-top-scroll::-webkit-scrollbar {
    height: 10px;
}

.table-top-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.table-top-scroll::-webkit-scrollbar-thumb {
    border: 2px solid white;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.45);
}

.table-top-scroll::-webkit-scrollbar-thumb:hover {
    background: rgba(26, 26, 46, 0.65);
}

.table-top-scroll-inner {
    height: 1px;
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table-compact {
    /* Горизонтальный скролл сохраняет новые колонки без сжатия текста до нечитаемого
       состояния. Значение = сумма ширин <th> в sro_cases.html (1892px): при
       table-layout: fixed побеждает большее из двух, поэтому расхождение молча
       обессмысливает min-width — держим их в паре. */
    min-width: 1892px;
    table-layout: fixed;
}

.table-compact thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-ink);
}

.sro-table thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--color-ink);
}

.table-compact th:first-child,
.table-compact td:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    box-shadow: 6px 0 10px rgba(26, 26, 46, 0.05);
}

.table-compact th:first-child {
    z-index: 30;
    background: var(--color-ink);
}

.table-compact td:first-child {
    background: white;
}

.table-compact tbody tr:hover td:first-child {
    background: var(--color-parchment);
}

.table thead {
    background: var(--color-ink);
}

.table th {
    padding: 0.8rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--color-parchment);
    border-bottom: 2px solid var(--color-gold);
}

.table th:first-child {
    padding-left: 0.9rem;
}

.table th:last-child {
    padding-right: 0.9rem;
}

.table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #151529;
}

.table td {
    padding: 0.75rem 0.75rem;
    font-size: 0.9375rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border-light);
    vertical-align: top;
}

.table td:first-child {
    padding-left: 0.9rem;
}

.table td:last-child {
    padding-right: 0.9rem;
}

.table tbody tr {
    transition: background var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--color-parchment);
}

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

.boolean-badge,
.case-instance-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    padding: 5px 9px;
}

.boolean-badge.yes {
    background: #fef3c7;
    color: #92400e;
}

.boolean-badge.no {
    background: #eef2ed;
    color: #3f5a43;
}

/* max-width была прибита к прежней ширине колонки «Инст.» (105px) и резала канон
   «Первая инстанция» (нужно 136px) вторым, независимым от ширины колонки способом.
   Теперь границу задаёт сама ячейка: расширение колонки в шаблоне сразу доходит до
   пилюли, и второй сломанной копии ширины не остаётся. */
.case-instance-pill {
    max-width: 100%;
    overflow: hidden;
    background: var(--color-parchment);
    color: var(--color-ink-muted);
    text-overflow: ellipsis;
}

.case-number {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-ink);
    display: inline-block;
    white-space: nowrap;
}

.case-number-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 0.35rem;
}

.case-number-link {
    color: var(--color-ink);
    transition: color var(--transition-fast);
}

.case-number-link:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.case-date {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-ink-muted);
}

.case-role-badge,
.case-status-badge,
.result-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* Класс бейджа строится из СЫРОЙ роли (шаблон больше не сводит всё не-ответчика
   к role-third), поэтому заливка нужна каждой роли домена. Дефолт нейтральный и
   стоит первым: роль без своего правила — пустая, unknown, будущая роль модели —
   рендерится читаемым серым бейджем, а не голой рамкой без фона. */
.case-role-badge {
    background: #f1f5f9;
    color: #475569;
}

.case-role-badge.role-defendant {
    background: #fee2e2;
    color: #991b1b;
}

/* Соответчик — юридически та же позиция, что ответчик (взыскание солидарное), и
   та же группа фильтра: тот же красный тон, на ступень светлее. */
.case-role-badge.role-co_defendant {
    background: #fef2f2;
    color: #b91c1c;
}

.case-role-badge.role-third {
    background: #e0e7ff;
    color: #3730a3;
}

/* «Иное лицо» — своя, отличная от «не определена» заливка: раньше эта роль
   ошибочно носила индиго третьего лица. */
.case-role-badge.role-other {
    background: #e2e8f0;
    color: #334155;
}

.case-type-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}

.case-type-badge.bankruptcy {
    background: #fef3c7;
    color: #92400e;
}

.case-type-badge.civil {
    background: #dbeafe;
    color: #1e40af;
}

.case-type-badge.administrative {
    background: #e0e7ff;
    color: #3730a3;
}

.case-type-badge.other {
    background: var(--color-parchment-dark);
    color: var(--color-text-muted);
}

/* Пятизначный вычисляемый статус дела (computed_case_status). */
.case-status-badge.status-completed {
    background: var(--color-parchment-dark);
    color: var(--color-text-muted);
}

.case-status-badge.status-in_review {
    background: #dcfce7;
    color: #166534;
}

.case-status-badge.status-supervision {
    background: #ede9fe;
    color: #5b21b6;
}

.case-status-badge.status-appeal_expired {
    background: #fef3c7;
    color: #92400e;
}

.case-status-badge.status-terminated {
    background: #e0e7ff;
    color: #3730a3;
}

.case-status-badge.status-unknown {
    background: var(--color-parchment-dark);
    color: var(--color-text-muted);
}

.case-instance-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    background: var(--color-parchment);
    color: var(--color-text-muted);
    white-space: nowrap;
    text-align: center;
}

.case-instance-badge.instance-первая-инстанция {
    background: #dbeafe;
    color: #1e40af;
}

.case-instance-badge.instance-апелляционная-инстанция {
    background: #fef3c7;
    color: #92400e;
}

.case-instance-badge.instance-кассационная-инстанция {
    background: #fee2e2;
    color: #991b1b;
}

.case-instance-badge.instance-надзорная-инстанция {
    background: #f3e8ff;
    color: #6b21a8;
}

.party-name {
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.5;
}

.party-role {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 2px;
}

.court-name {
    font-size: 0.875rem;
    color: var(--color-text);
    line-height: 1.5;
}

.judge-name {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 4px;
}


.case-analysis {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.analysis-amount {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-ink);
}

.analysis-status {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.6875rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.analysis-status.status-satisfied {
    background: #dcfce7;
    color: #166534;
}

.analysis-status.status-partially {
    background: #fef3c7;
    color: #92400e;
}

.analysis-status.status-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.analysis-status.status-pending {
    background: #dbeafe;
    color: #1e40af;
}

.analysis-status.status-unknown {
    background: var(--color-parchment);
    color: var(--color-text-muted);
}

.analysis-grounds {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

.analysis-none {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    font-style: italic;
}


.table-compact {
    font-size: 0.8125rem;
}

.table-compact th {
    text-align: center;
}

.table-compact th,
.table-compact td {
    padding: 0.42rem 0.45rem;
}

.case-instance-text {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.parties-cell {
    font-size: 0.8125rem;
    line-height: 1.4;
}

.party-line {
    display: -webkit-box;
    overflow: hidden;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.3;
    padding: 4px 0;
}

.party-line:first-child {
    border-bottom: 1px solid var(--color-border-light);
}

.party-line:last-child {
    padding-top: 4px;
}

.party-label {
    font-weight: 600;
    color: var(--color-text-muted);
    font-size: 0.6875rem;
}

.amount-value {
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--color-ink);
    white-space: nowrap;
}

.amount-value.satisfied {
    color: #166534;
}

.result-badge.result-satisfied {
    background: #dcfce7;
    color: #166534;
}

.result-badge.result-partially {
    background: #fef3c7;
    color: #92400e;
}

.result-badge.result-rejected {
    background: #fee2e2;
    color: #991b1b;
}

.result-badge.result-pending {
    background: #dbeafe;
    color: #1e40af;
}

.result-badge.result-unknown {
    background: var(--color-parchment-dark);
    color: var(--color-text-muted);
}

.grounds-text {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.3;
}

.text-muted {
    color: var(--color-text-muted);
}

/* Sort links in table headers */
.sort-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.sort-link:hover {
    color: var(--color-gold);
}

.sort-link.active {
    color: var(--color-gold);
}

.sort-icon {
    font-size: 0.75rem;
    opacity: 0.8;
}

.sort-icon-muted {
    opacity: 0.35;
}

.sort-link:hover .sort-icon-muted {
    opacity: 0.8;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.metric-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
}

.metric-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
}

.metric-icon.pending {
    background: #dcfce7;
    color: #166534;
}

.metric-icon.completed {
    background: var(--color-parchment-dark);
    color: var(--color-text-muted);
}

.metric-icon svg {
    width: 24px;
    height: 24px;
}

.metric-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.metric-value {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--color-ink);
    line-height: 1;
}

.metric-label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}


.sro-detail-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    align-items: stretch;
}

.cases-pagination-bottom {
    margin-top: 14px;
    scroll-margin-top: 24px;
}

.sro-pagination-bottom {
    margin-top: 14px;
    scroll-margin-top: 24px;
}

.sro-detail-info,
.sro-detail-stats {
    display: flex;
    flex-direction: column;
}

.sro-detail-info .detail-card,
.sro-detail-stats .detail-card {
    flex: 1;
}

.detail-card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.detail-card-header {
    padding: 18px var(--space-lg);
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1px solid var(--color-border-light);
}

.detail-card-body {
    padding: 22px var(--space-lg);
    flex: 1;
}

.sro-detail-info .detail-card-body {
    display: flex;
    flex-direction: column;
}

.sro-detail-grid {
    display: flex;
    flex-direction: column;
}

.sro-detail-item {
    display: grid;
    grid-template-columns: minmax(110px, 0.42fr) minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--space-lg);
    min-width: 0;
    border-bottom: 1px solid var(--color-border-light);
    padding: 11px 0;
}

.sro-detail-item:last-child {
    border-bottom: 0;
}

.sro-detail-item:nth-child(odd) {
    padding-right: 0;
}

.sro-detail-item:nth-child(even) {
    padding-left: 0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-border-light);
}

.detail-row:last-of-type {
    border-bottom: none;
}

.detail-label {
    min-width: 0;
    font-size: 0.875rem;
    color: var(--color-ink-muted);
    line-height: 1.35;
}

.detail-value {
    min-width: 0;
    color: var(--color-ink);
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    text-align: right;
    overflow-wrap: anywhere;
}

.detail-value a {
    color: var(--color-gold);
    text-decoration: none;
}

.detail-value a:hover {
    text-decoration: underline;
}

.detail-links {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
}

.detail-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8125rem;
    color: var(--color-gold);
    text-decoration: none;
    transition: opacity var(--transition-fast);
}

.detail-link:hover {
    opacity: 0.8;
}

.sro-detail-info .sro-info-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--color-border-light);
}

.sro-detail-info .sro-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: var(--color-gold);
    font-size: 0.875rem;
    font-weight: 650;
    text-decoration: none;
    transition: color var(--transition-fast), opacity var(--transition-fast);
}

.sro-detail-info .sro-link:hover,
.sro-detail-info .sro-link:focus-visible {
    background: transparent;
    color: var(--color-accent-hover);
    opacity: 0.85;
}

.sro-detail-info .sro-link svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 1fr 1fr;
    gap: 8px;
    height: 100%;
}

.stat-card {
    background: var(--color-parchment);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}

.stat-card:nth-child(4) {
    grid-column: 1 / 2;
}

.stat-card:nth-child(5) {
    grid-column: 2 / 4;
}

.stat-card-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.1;
}

.stat-card-label {
    font-size: 0.6875rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.stat-card.accent {
    background: var(--color-ink);
    border-color: var(--color-ink);
}

.stat-card.accent .stat-card-value {
    color: white;
}

.stat-card.accent .stat-card-label {
    color: rgba(255,255,255,0.7);
}

.stat-card.claim {
    background: #fef3c7;
    border-color: #f59e0b;
}

.stat-card.claim .stat-card-value {
    color: #92400e;
    font-size: 1rem;
}

.stat-card.claim .stat-card-label {
    color: #b45309;
}

.stat-card.satisfied {
    background: #dcfce7;
    border-color: #22c55e;
}

.stat-card.satisfied .stat-card-value {
    color: #166534;
    font-size: 1rem;
}

.stat-card.satisfied .stat-card-label {
    color: #15803d;
}

.stats-layout {
    display: grid;
    grid-template-columns: minmax(280px, 0.95fr) minmax(300px, 1.05fr);
    gap: var(--space-lg);
    align-items: center;
    min-height: 230px;
}

.sro-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    justify-content: flex-start;
}

.sro-summary-kpis {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.sro-kpi-card {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    padding: 13px 14px;
}

.sro-kpi-card span,
.region-bars-header span {
    color: var(--color-ink-muted);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sro-kpi-card strong {
    color: var(--color-ink);
    font-size: 1.18rem;
    font-weight: 800;
    line-height: 1.15;
    overflow-wrap: anywhere;
}

.sro-kpi-card small {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
}

.sro-kpi-card-main {
    background: var(--color-gold-pale);
    border-color: #ead49d;
}

.sro-kpi-card-success {
    background: #ecfdf5;
    border-color: #bbf7d0;
}

.sro-kpi-card-success strong {
    color: #166534;
}

.region-bars {
    display: grid;
    gap: 13px;
    border-top: 1px solid var(--color-border-light);
    padding-top: 18px;
}

.region-bars-header,
.region-bar-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
}

.region-bars-header strong {
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 700;
}

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

.region-bar-row {
    display: grid;
    gap: 7px;
}

.region-bar-meta strong {
    min-width: 0;
    color: var(--color-ink);
    font-size: 0.86rem;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.region-bar-meta span {
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 400;
}

.region-bar-track {
    width: 100%;
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(191, 140, 14, 0.13);
}

.region-bar-track span {
    display: block;
    max-width: 100%;
    height: 100%;
    border-radius: inherit;
    background: var(--color-gold);
}

.stats-left {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stats-right {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(128px, 150px) minmax(190px, 1fr);
    gap: var(--space-md);
    align-items: center;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: var(--radius-md);
    margin-bottom: 6px;
    font-size: 0.9375rem;
}

.stat-row.total {
    background: var(--color-parchment-dark);
}

.stat-row.pending {
    background: #fef3c7;
}

.stat-row.completed {
    background: #dcfce7;
}

.stat-label {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
}

.stat-label strong {
    color: var(--color-ink);
    margin-left: 6px;
    font-size: 1.125rem;
}

.stat-amounts {
    font-weight: 400;
    color: var(--color-text-muted);
    font-size: 0.875rem;
    white-space: nowrap;
}

.stat-amounts strong {
    font-weight: 600;
    color: var(--color-ink);
}

.stat-amounts strong.success {
    color: #166534;
}

.stat-legend {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    text-align: right;
    margin-top: 6px;
    font-style: italic;
}

.stats-text {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-line {
    font-size: 0.9375rem;
    color: var(--color-text);
    line-height: 1.5;
    margin: 0;
}

.stats-line strong {
    color: var(--color-ink);
    font-weight: 600;
}

.stats-line strong.success {
    color: #166534;
}

.chart-wrapper {
    position: relative;
    height: 160px;
    width: 100%;
}

.region-chart-wrapper {
    width: 142px;
    min-width: 142px;
    height: 142px;
    justify-self: center;
}

.region-legend {
    display: grid;
    gap: 6px;
    max-height: none;
    overflow: visible;
    padding-right: 0;
}

.region-legend-item {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    font-size: 0.8125rem;
    color: var(--color-text);
}

.region-legend-item span {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

.region-legend-item strong {
    overflow: hidden;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.region-legend-item em {
    color: var(--color-text-muted);
    font-style: normal;
    font-weight: 700;
}

.stats-types {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.type-stat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xs) 0;
}

.type-stat-label {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.type-stat-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text);
}


.stats-bar {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    padding: var(--space-lg) var(--space-xl);
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.stats-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.stats-bar-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-parchment);
    border-radius: var(--radius-md);
    color: var(--color-gold);
}

.stats-bar-icon svg {
    width: 20px;
    height: 20px;
}

.stats-bar-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stats-bar-value {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-ink);
}

.stats-bar-label {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    margin-top: var(--space-2xl);
}

.pagination-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.pagination-btn.active {
    background: var(--color-ink);
    border-color: var(--color-ink);
    color: white;
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn svg {
    width: 16px;
    height: 16px;
}

.pagination-ellipsis {
    padding: 0 var(--space-sm);
    color: var(--color-text-muted);
}


.empty-state {
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
}

.empty-state-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-parchment-dark);
    border-radius: 50%;
    color: var(--color-text-muted);
}

.empty-state-icon svg {
    width: 40px;
    height: 40px;
    opacity: 0.5;
}

.empty-state-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-sm);
}

.empty-state-text {
    font-size: 1rem;
    color: var(--color-text-muted);
}


.footer {
    background: var(--color-ink);
    border-top: 1px solid rgba(184, 134, 11, 0.2);
    margin-top: auto;
}

.footer-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--space-lg) var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
}

.footer-copyright {
    font-size: 0.875rem;
    color: var(--color-parchment);
    opacity: 0.6;
}

.footer-note {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-gold);
    opacity: 0.6;
}


@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeInUp 0.5s ease backwards;
}

.cards-grid .card:nth-child(1) { animation-delay: 0.05s; }
.cards-grid .card:nth-child(2) { animation-delay: 0.1s; }
.cards-grid .card:nth-child(3) { animation-delay: 0.15s; }
.cards-grid .card:nth-child(4) { animation-delay: 0.2s; }
.cards-grid .card:nth-child(5) { animation-delay: 0.25s; }
.cards-grid .card:nth-child(6) { animation-delay: 0.3s; }

.table tbody tr {
    animation: fadeInUp 0.4s ease backwards;
}

.table tbody tr:nth-child(1) { animation-delay: 0.02s; }
.table tbody tr:nth-child(2) { animation-delay: 0.04s; }
.table tbody tr:nth-child(3) { animation-delay: 0.06s; }
.table tbody tr:nth-child(4) { animation-delay: 0.08s; }
.table tbody tr:nth-child(5) { animation-delay: 0.1s; }
.table tbody tr:nth-child(6) { animation-delay: 0.12s; }
.table tbody tr:nth-child(7) { animation-delay: 0.14s; }
.table tbody tr:nth-child(8) { animation-delay: 0.16s; }


@media (max-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .header-inner {
        padding: var(--space-md);
        gap: var(--space-md);
    }

    .header-right {
        gap: var(--space-md);
    }

    /* On narrow viewports the union links can outgrow the row; let the nav shrink
       and scroll horizontally so the burger toggle (flex-shrink:0) stays in view. */
    .nav {
        min-width: 0;
        overflow-x: auto;
    }

    .logo-subtitle {
        display: none;
    }

    .main {
        padding: var(--space-lg) var(--space-md);
    }

    .page-title {
        font-size: 1.75rem;
    }

    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .search-form {
        max-width: none;
    }

    .sro-search-form {
        grid-template-columns: 1fr;
    }

    .sro-search-actions > * {
        flex: 1;
    }

    .filter-group {
        overflow-x: auto;
        padding-bottom: var(--space-sm);
    }

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

    .sro-detail-layout {
        grid-template-columns: 1fr;
    }

    .stats-compact {
        flex-wrap: wrap;
    }

    .table-container {
        overflow-x: auto;
    }

    .table {
        min-width: 800px;
    }

    .stats-bar {
        flex-wrap: wrap;
        gap: var(--space-md);
    }

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

    .footer-inner {
        flex-direction: column;
        text-align: center;
        gap: var(--space-sm);
    }
}

@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

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

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

    .metric-card {
        padding: var(--space-md);
    }
}

.card-address {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: var(--space-sm);
    line-height: 1.5;
}

.card-contacts {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-border-light);
}

.contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.contact-item svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

.card-links {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
    flex-wrap: wrap;
}

.card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-accent);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-gold-pale);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.card-link:hover {
    background: var(--color-gold);
    color: white;
}

.card-link svg {
    width: 12px;
    height: 12px;
}

.card-disabled {
    opacity: 0.6;
    cursor: default;
}

.card-disabled:hover {
    transform: none;
    box-shadow: none;
}

.card-disabled::before {
    display: none;
}

.card-action-disabled {
    color: var(--color-text-muted);
    opacity: 0.5;
}


.sro-info-card {
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg) var(--space-xl);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-lg);
    position: relative;
}

.sro-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-gold), var(--color-gold-light), transparent);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.sro-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-lg);
}

.sro-info-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sro-info-item-wide {
    grid-column: 1 / -1;
}

.sro-info-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.sro-info-value {
    font-size: 0.9375rem;
    color: var(--color-ink);
    line-height: 1.5;
}

.sro-info-value a {
    color: var(--color-accent);
    transition: color var(--transition-fast);
}

.sro-info-value a:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.sro-info-links {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-light);
    flex-wrap: wrap;
}

.sro-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-accent);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-gold-pale);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.sro-link:hover {
    background: var(--color-gold);
    color: white;
}

.sro-link svg {
    width: 16px;
    height: 16px;
}


@media (max-width: 768px) {
    .sro-info-grid {
        grid-template-columns: 1fr;
    }

    .sro-info-links {
        flex-direction: column;
    }

    .sro-link {
        justify-content: center;
    }

    .card-links {
        flex-direction: column;
    }

    .card-link {
        justify-content: center;
    }
}


.sro-table tbody tr {
    transition: background var(--transition-fast);
}

.sro-table tbody tr:hover {
    background: var(--color-parchment);
}

.sro-num {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-align: center;
}

.sro-name,
.sro-name-link {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    color: var(--color-ink);
    line-height: 1.3;
    display: block;
}

.sro-name-link {
    text-decoration: none;
    transition: color var(--transition-fast);
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.sro-table tbody tr:hover .sro-name,
.sro-table tbody tr:hover .sro-name-link,
.sro-name-link:hover {
    color: var(--color-gold);
}

.sro-address {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.4;
    margin-bottom: 6px;
}

.sro-contacts-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: 4px;
}

.sro-contact {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.sro-contact svg {
    width: 12px;
    height: 12px;
    min-width: 12px;
    max-width: 12px;
    opacity: 0.6;
    flex-shrink: 0;
}

.sro-inn {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 0.875rem;
    color: var(--color-ink);
    background: var(--color-parchment-dark);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.sro-reg {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
}

.sro-cases-count {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.cases-total {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-ink);
}

.cases-active {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--color-gold);
    background: var(--color-gold-pale);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
}

.sro-claim-total {
    font-family: var(--font-body);
    font-size: 1.125rem;
    font-weight: 700;
    color: #92400e;
    white-space: nowrap;
}

.sro-links-cell {
    display: flex;
    gap: var(--space-sm);
}

.sro-ext-link {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    background: var(--color-parchment-dark);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.sro-ext-link:hover {
    color: var(--color-gold);
    background: var(--color-gold-pale);
}

.sro-ext-link svg {
    width: 16px;
    height: 16px;
    min-width: 16px;
    max-width: 16px;
}

.btn-view-cases {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: white;
    background: var(--color-gold);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.btn-view-cases:hover {
    background: var(--color-gold-light);
}

.btn-view-cases svg {
    width: 14px;
    height: 14px;
}

.no-cases {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    opacity: 0.6;
}

.page-header-with-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

.page-header-with-stats::before {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-gold), transparent);
}

.page-header-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-xs);
}

.page-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .sro-table {
        min-width: 900px;
    }
}

@media (max-width: 768px) {
    .sro-contacts-row {
        flex-direction: column;
        gap: var(--space-xs);
    }
}

.analytics-page {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.analytics-filters {
    display: grid;
    grid-template-columns:
        minmax(220px, 1.1fr)
        minmax(170px, 0.75fr)
        minmax(210px, 1fr)
        minmax(210px, 1fr)
        minmax(230px, 0.9fr);
    gap: var(--space-md);
    align-items: end;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
}

.filter-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-field label,
.filter-check {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
}

.filter-field input,
.filter-field select {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-parchment);
    color: var(--color-text);
    font: inherit;
    padding: 9px 12px;
}

.filter-dropdown {
    position: relative;
    width: 100%;
}

.filter-dropdown summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 44px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-parchment);
    color: var(--color-text);
    font-weight: 600;
    padding: 9px 12px;
    cursor: pointer;
    list-style: none;
}

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

.filter-dropdown summary::after {
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--color-ink-muted);
    border-bottom: 2px solid var(--color-ink-muted);
    transform: rotate(45deg) translateY(-2px);
    transition: transform var(--transition-fast);
}

.filter-dropdown[open] summary {
    border-color: var(--color-gold);
    background: white;
}

.filter-dropdown[open] summary::after {
    transform: rotate(225deg) translate(-2px, -2px);
}

.filter-dropdown-menu {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 240px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: white;
    box-shadow: var(--shadow-md);
    padding: 8px;
}

.filter-option {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 36px;
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    padding: 7px 8px;
    cursor: pointer;
}

.filter-option:hover {
    background: var(--color-parchment);
}

.filter-option input {
    width: 16px;
    height: 16px;
    accent-color: var(--color-gold);
}

.filter-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-parchment);
    padding: 9px 12px;
}

.filter-check input {
    width: 18px;
    height: 18px;
}

.filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-xs);
    flex-wrap: wrap;
    min-height: 44px;
}

.analytics-filters .filter-actions {
    /* Defect 1: span the whole filter grid so the actions become their own last
       row and the buttons pin to the panel's bottom-right on every breakpoint
       (mirrors .case-filter-actions). Previously `width:100%` inside a single grid
       cell stranded the buttons in column 1, so they read as bottom-left.
       Right-alignment comes from the shared `.filter-actions` justify-content:flex-end. */
    grid-column: 1 / -1;
}

.analytics-kpi-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-md);
}

.analytics-kpi-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    min-height: 118px;
    justify-content: flex-start;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 18px 18px 18px 20px;
    overflow: hidden;
}

.analytics-kpi-card::before {
    content: "";
    position: absolute;
    inset: 18px auto 18px 0;
    width: 4px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(180deg, var(--color-gold), #722f37);
}

/* Только прямой потомок-ярлык: `> span` не задевает span.analytics-kpi-role-label /
   -role-value внутри .analytics-kpi-roles (иначе min-height:48px просочился бы в
   подстроки-флекс-элементы на главной и раздул бы стек ролей). */
.analytics-kpi-card > span {
    position: relative;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-ink-muted);
    /* Дефект 2: фиксируем регион ярлыка по самому длинному (3-строчному)
       из KPI_CARD_SPEC — «СУММА ТРЕБОВАНИЙ В РАССМАТРИВАЕМЫХ ДЕЛАХ».
       12px × line-height 1.3 = 15.6px/строка × 3 строки = 46.8px → min-height 48px.
       Так значение на КАЖДОЙ карточке стартует с одного Y (2- и 3-строчные ярлыки выровнены). */
    line-height: 1.3;
    min-height: 48px;
    /* Симметрично значению: длинное неразрывное слово ярлыка мягко переносится,
       а не обрезается card-овским overflow:hidden. */
    overflow-wrap: anywhere;
}

.analytics-kpi-card strong {
    position: relative;
    font-family: var(--font-display);
    /* Дефект 1: кегль уменьшен, чтобы самая длинная сумма «79 481 885 597 ₽»
       (~16 tabular-глифов, ≈7.8em) умещалась в ОДНУ строку при шести колонках.
       Контент карточки ≈151px на 1280px (1216 − 5×16 gap)/6 = 189; −38 паддинг = 151),
       ≈170px на 1400px. Верхняя граница 1.12rem = 17.92px → 17.92×7.8 ≈ 140px < 151px (запас).
       overflow-wrap: anywhere оставлен фолбэком: ещё более длинное значение мягко уйдёт в 2 строки. */
    font-size: clamp(0.95rem, 1.2vw, 1.12rem);
    line-height: 1.1;
    color: var(--color-ink);
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: normal;
    font-variant-numeric: tabular-nums;
    /* Дефект 2: фиксированная высота под 2 строки значения при max-кегле
       (2 × 17.92 × 1.1 ≈ 39.4px → 42px) + прижатие к низу, чтобы 1-строчное «787»
       стояло на той же нижней линии, что нижняя строка 2-строчной суммы.
       Итог до делителя: 18 паддинг + 48 ярлык + 6 gap + 42 значение = 114px на ВСЕХ карточках. */
    display: flex;
    align-items: flex-end;
    min-height: 42px;
}

/* Подстроки KPI-карточек по ролям — рендерятся только на главной (with_roles=True).
   Их спаны лежат в li.analytics-kpi-role (три уровня вглубь) и НЕ матчатся `> span`
   выше — весь их вид задаётся ниже правилами .analytics-kpi-role-label/-value. */
.analytics-kpi-roles {
    position: relative;
    list-style: none;
    margin: 10px 0 0;
    padding: 10px 0 0;
    border-top: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    /* Дефект 3: каждая роль теперь занимает 2 строки (ярлык над значением),
       поэтому увеличенный зазор отделяет три пары друг от друга (было 5px). */
    gap: 10px;
}

.analytics-kpi-role {
    /* Дефект 3: подстроки в СТОЛБИК — ярлык сверху, значение снизу.
       Было display:flex + justify-content:space-between (2 колонки в одну строку) →
       «СРО ответчик» сжимался и прыгал между 1 и 2 строками. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.analytics-kpi-roles .analytics-kpi-role-label {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--color-ink-muted);
    /* Дефект 3: «СРО третье лицо» (≈82px @11px) не переносится — карточка ≈151px. */
    white-space: nowrap;
}

.analytics-kpi-roles .analytics-kpi-role-value {
    flex: none;
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink);
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    text-decoration: none;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.btn-secondary:hover {
    border-color: var(--color-gold);
    color: var(--color-gold);
}

.analytics-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--space-lg);
    align-items: start;
}

.analytics-card {
    display: flex;
    flex-direction: column;
    background: white;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-lg);
    height: 100%;
    min-width: 0;
    grid-column: span 3;
}

.analytics-chart-card {
    grid-column: span 3;
}

.analytics-donut-card {
    min-height: 500px;
}

.analytics-donut-card .analytics-card-header {
    min-height: 0;
    justify-content: flex-start;
    margin-bottom: 12px;
    text-align: left;
}

.analytics-donut-card .analytics-card-header > div {
    width: 100%;
}

/* Широкие карточки занимают всю строку сетки.
   Фиксированная высота не даёт длинным спискам растягивать страницу портянкой. */
.analytics-chart-card-wide,
.analytics-card-wide {
    grid-column: 1 / -1;
    height: 520px;
    display: flex;
    flex-direction: column;
}

/* В широких аналитических карточках заголовок остаётся сверху,
   а длинный список или таблица прокручивается внутри карточки. */
.analytics-card-wide .analytics-list,
.analytics-card-wide .analytics-table-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

/* Широкие карточки читаются как в блоке "Дела по текущей инстанции":
   сверху название, количество и сумма, снизу bar на всю ширину строки. */
.analytics-card-wide .analytics-row,
.analytics-card-wide .analytics-row-simple,
.analytics-card-wide .analytics-list.compact .analytics-row {
    grid-template-columns: minmax(220px, 1fr) minmax(90px, 0.25fr) minmax(180px, max-content);
    padding: 20px 28px;
    row-gap: 18px;
}

.analytics-card-wide .analytics-row-title {
    font-size: 1rem;
}

.analytics-card-wide .analytics-row-metrics strong {
    font-size: clamp(1.15rem, 1.2vw, 1.4rem);
}

.analytics-card-wide .analytics-bar-cell {
    grid-column: 1 / -1;
    align-self: stretch;
}

.analytics-card-wide .analytics-bar-cell small {
    display: none;
}

.analytics-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-md);
    min-height: 96px;
    margin-bottom: var(--space-lg);
}

.analytics-card h2 {
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 1.35vw, 1.5rem);
    line-height: 1.18;
    color: var(--color-ink);
}

.analytics-kicker {
    margin-bottom: var(--space-sm);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-gold);
}

.analytics-chart {
    position: relative;
    width: 100%;
    min-height: 320px;
}

.analytics-chart-donut {
    height: 380px;
}

.analytics-donut-card .analytics-chart-donut {
    flex: 1 1 auto;
    min-height: 0;
}

.analytics-donut-card .analytics-svg-chart {
    gap: 12px;
}

.analytics-donut-card .analytics-svg-stage {
    min-height: 300px;
}

.analytics-donut-card .analytics-svg-legend {
    min-height: 32px;
    padding: 4px 8px 0;
    justify-content: flex-start;
}

.analytics-chart-bar {
    height: 420px;
}

.analytics-period-card {
    height: 520px;
    overflow: hidden;
}

.analytics-period-card .analytics-card-header {
    min-height: 0;
    margin-bottom: var(--space-md);
}

.analytics-period-card .analytics-segmented {
    margin-bottom: 10px;
}

.analytics-period-card .analytics-chart-bar {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    overflow: hidden;
}

.analytics-period-card .analytics-svg-chart {
    gap: 8px;
    overflow: hidden;
}

.analytics-period-card .analytics-svg-stage {
    min-height: 0;
}

.analytics-period-card .analytics-chart-bar .analytics-svg-stage {
    min-height: 0;
}

.analytics-period-card .analytics-svg-stage-scroll {
    padding-bottom: 0;
}

.analytics-svg-chart {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    height: 100%;
    min-height: 0;
}

.analytics-svg-stage {
    flex: 1 1 auto;
    width: 100%;
    min-height: 260px;
}

.analytics-svg-stage-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 4px;
    scrollbar-color: var(--color-border) transparent;
    scrollbar-width: thin;
}

.analytics-chart-bar .analytics-svg-stage {
    min-height: 360px;
}

.analytics-svg-stage-scroll::-webkit-scrollbar {
    height: 8px;
}

.analytics-svg-stage-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.analytics-svg-stage-scroll::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--color-border);
}

.analytics-svg-stage svg {
    display: block;
    width: 100%;
    height: 100%;
}

.analytics-svg-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-ink);
}

.analytics-svg-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.analytics-svg-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 2px;
}

.analytics-svg-label {
    fill: white;
    font-size: 13px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: middle;
}

.analytics-svg-center-value {
    fill: var(--color-ink);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 800;
    text-anchor: middle;
    dominant-baseline: middle;
}

.analytics-svg-center-label {
    fill: var(--color-ink-muted);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-anchor: middle;
    text-transform: uppercase;
}

.analytics-svg-bar-label {
    fill: var(--color-ink);
    font-size: 12px;
    font-weight: 800;
    text-anchor: middle;
}

.analytics-svg-axis-label {
    fill: var(--color-ink-muted);
    font-size: 12px;
    text-anchor: middle;
}

.analytics-svg-y-label {
    fill: var(--color-ink-muted);
    font-size: 10px;
    text-anchor: start;
}

.analytics-svg-grid-line {
    stroke: rgba(212, 208, 200, 0.72);
    stroke-width: 1;
}

.analytics-svg-axis-line {
    stroke: #d4d0c8;
    stroke-width: 1;
}

.analytics-svg-trend-area {
    fill: rgba(184, 134, 11, 0.12);
}

.analytics-svg-trend-line {
    fill: none;
    stroke: #b8860b;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.analytics-svg-trend-line-secondary {
    fill: none;
    stroke: #722f37;
    stroke-width: 2.5;
    stroke-dasharray: 8 7;
    stroke-linecap: round;
}

.analytics-svg-trend-marker {
    fill: white;
    stroke: #b8860b;
    stroke-width: 3;
}

.analytics-svg-trend-marker.is-peak {
    fill: #722f37;
    stroke: white;
}

.analytics-svg-point-label {
    fill: var(--color-ink);
    font-size: 11px;
    font-weight: 800;
    text-anchor: middle;
}

.analytics-chart-message {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    text-align: center;
    padding: var(--space-lg);
}

.analytics-segmented {
    display: inline-flex;
    gap: 4px;
    margin-bottom: var(--space-md);
    padding: 4px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-parchment);
}

.analytics-segmented button {
    min-height: 34px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink-muted);
    font: inherit;
    font-weight: 600;
    padding: 6px 14px;
    cursor: pointer;
}

.analytics-segmented button.active {
    background: var(--color-ink);
    color: white;
}

.analytics-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.analytics-list.compact {
    gap: 10px;
}

.analytics-row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(70px, 0.55fr) minmax(110px, 0.9fr) minmax(130px, 1fr);
    gap: var(--space-md);
    align-items: center;
    min-height: 70px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-parchment);
    padding: var(--space-md);
}

.analytics-list.compact .analytics-row {
    grid-template-columns: minmax(120px, 1fr) minmax(64px, 0.35fr) minmax(160px, max-content);
    align-items: start;
}

.analytics-list.compact .analytics-bar-cell {
    grid-column: 1 / -1;
}

.analytics-row-simple,
.analytics-list.compact .analytics-row-simple {
    grid-template-columns: minmax(120px, 1fr) minmax(130px, 0.9fr) minmax(120px, 1fr);
}

.analytics-list-wide .analytics-row-simple {
    grid-template-columns: minmax(80px, 0.5fr) minmax(90px, 0.45fr) minmax(150px, 0.9fr) minmax(160px, 1.4fr);
}

.analytics-row-title {
    font-weight: 700;
    color: var(--color-ink);
    min-width: 0;
}

.analytics-row-metrics {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.analytics-row-metrics strong {
    font-family: var(--font-display);
    font-size: clamp(1rem, 1.05vw, 1.25rem);
    line-height: 1.15;
    color: var(--color-ink);
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    font-variant-numeric: tabular-nums;
}

.analytics-row-metrics span,
.analytics-bar-cell small,
.analytics-empty {
    font-size: 0.875rem;
    color: var(--color-ink-muted);
}

.analytics-role-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 14px;
    min-height: 0;
}

.analytics-role-card .analytics-card-header {
    min-height: 0;
    margin-bottom: 0;
}

.analytics-role-list {
    height: auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: visible;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: white;
    scrollbar-color: rgba(26, 26, 46, 0.45) transparent;
    scrollbar-width: thin;
}

.analytics-role-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.analytics-role-list::-webkit-scrollbar-track {
    background: transparent;
}

.analytics-role-list::-webkit-scrollbar-thumb {
    border: 2px solid white;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.45);
}

.analytics-role-head,
.analytics-role-row {
    display: grid;
    /* Семь колонок: Роль | Дел | Доля дел | Сумма | Доля | К взысканию | Доля.
       Сумма минимумов ≈874px + 6×16px gap ≈970px < min-width 1000px; в широкой карточке
       (внутренняя ширина ≈1168px на 1280px) таблица помещается без горизонтального скролла,
       на более узких экранах скроллится внутри .analytics-role-list (overflow-x:auto). */
    grid-template-columns: minmax(150px, 1.05fr) minmax(64px, 0.35fr) minmax(120px, 0.7fr) minmax(150px, 0.85fr) minmax(120px, 0.7fr) minmax(150px, 0.85fr) minmax(120px, 0.7fr);
    gap: var(--space-md);
    min-width: 1000px;
}

.analytics-role-head {
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: center;
    padding: 12px 18px;
    background: var(--color-ink);
    border-bottom: 2px solid var(--color-gold);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.analytics-role-head span:not(:first-child) {
    text-align: right;
}

.analytics-role-row {
    align-items: center;
    min-height: 62px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--color-border-light);
}

.analytics-role-row:nth-child(odd) {
    background: rgba(248, 246, 241, 0.45);
}

.analytics-role-row:hover {
    background: #fff7df;
}

.analytics-role-row:last-child {
    border-bottom: 0;
}

.analytics-role-title {
    min-width: 0;
}

/* Внутри таблицы ролей бейдж де-филится: без фона/паддинга он читается как обычный текст
   первой колонки и совпадает кеглем (1rem/700/ink) с .analytics-result-title и прочими
   первыми колонками таблиц дашборда. Скоуп строго под .analytics-role-title — на
   /sro/<id>/cases/ общий .case-role-badge сохраняет заливку (роли домена + нейтральный
   дефолт). Правило идёт ПОЗЖЕ ролевых и не уступает им в специфичности — иначе
   бейдж роли в таблице дашборда снова получил бы фон. */
.analytics-role-title .case-role-badge {
    width: fit-content;
    min-height: 0;
    padding: 0;
    background: transparent;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0;
    white-space: normal;
}

.analytics-role-metric {
    min-width: 0;
    text-align: right;
}

.analytics-role-metric strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    /* Defect 3: match the «Статистика СРО» body values (.analytics-table-number:
       1rem / 700). Was clamp up to 1.18rem @ 800 — visibly larger than the table. */
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Defect 4: share cell is a flex ROW — full-width bar track (flex:1, stable left+right
   edge inside the cell) with the percent pinned to the right on the same line. Only the
   fill (.analytics-bar span) varies; nothing floats horizontally. Was a column stack. */
.analytics-role-bar-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.analytics-role-bar-cell .analytics-bar {
    flex: 1;
    min-width: 0;
    height: 12px;
}

.analytics-role-bar-cell small {
    flex: none;
    min-width: 3em;
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.analytics-bar {
    width: 100%;
    max-width: 100%;
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-parchment-dark);
}

.analytics-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-sage);
}

.analytics-bar-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.analytics-claim-structure-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 25px;
    height: min(520px, calc(100vh - 200px));
    min-height: 390px;
    padding-bottom: 16px;
}

.analytics-claim-structure-card .analytics-card-header {
    min-height: 0;
    margin-bottom: 0;
}

.analytics-claim-structure-list {
    height: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: scroll;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: white;
    scrollbar-color: rgba(26, 26, 46, 0.45) transparent;
    scrollbar-width: thin;
}

.analytics-claim-structure-list::-webkit-scrollbar {
    width: 10px;
}

.analytics-claim-structure-list::-webkit-scrollbar-track {
    background: transparent;
}

.analytics-claim-structure-list::-webkit-scrollbar-thumb {
    border: 2px solid white;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.45);
}

.analytics-claim-structure-head,
.analytics-claim-structure-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) minmax(190px, max-content) minmax(300px, 0.9fr);
    gap: var(--space-lg);
    min-width: 820px;
}

.analytics-claim-structure-head {
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: center;
    padding: 14px 28px;
    background: var(--color-ink);
    border-bottom: 2px solid var(--color-gold);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.analytics-claim-structure-head span:not(:first-child) {
    text-align: right;
}

.analytics-claim-structure-row {
    align-items: center;
    min-height: 88px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--color-border-light);
}

.analytics-claim-structure-row:nth-of-type(odd) {
    background: rgba(248, 246, 241, 0.45);
}

.analytics-claim-structure-row:hover {
    background: #fff7df;
}

.analytics-claim-structure-row:last-child {
    border-bottom: 0;
}

.analytics-claim-structure-title {
    min-width: 0;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.analytics-claim-structure-amount {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: right;
}

.analytics-claim-structure-amount strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1.1vw, 1.28rem);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.analytics-claim-structure-bar-cell small {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.25;
}

.analytics-claim-structure-bar-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.analytics-claim-structure-bar-cell .analytics-bar {
    height: 12px;
}

.analytics-claim-structure-bar-cell small {
    display: block;
    text-align: center;
}

.analytics-result-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 25px;
    height: min(520px, calc(100vh - 200px));
    min-height: 390px;
    padding-bottom: 16px;
}

.analytics-result-card .analytics-card-header {
    min-height: 0;
    margin-bottom: 0;
}

.analytics-result-list {
    height: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: scroll;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: white;
    scrollbar-color: rgba(26, 26, 46, 0.45) transparent;
    scrollbar-width: thin;
}

.analytics-result-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.analytics-result-list::-webkit-scrollbar-track {
    background: transparent;
}

.analytics-result-list::-webkit-scrollbar-thumb {
    border: 2px solid white;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.45);
}

.analytics-result-head,
.analytics-result-row {
    display: grid;
    /* Пять колонок: Статус | Дел | Доля дел | Сумма текущих требований | Доля текущих требований
       (Task 2 добавил колонку доли по деньгам). Мины 750px + 4×16px gap = 814px < min-width 820px. */
    grid-template-columns: minmax(200px, 1fr) minmax(70px, 0.35fr) minmax(150px, 0.7fr) minmax(180px, 0.85fr) minmax(150px, 0.7fr);
    gap: var(--space-md);
    min-width: 820px;
}

.analytics-result-head {
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: center;
    padding: 14px 28px;
    background: var(--color-ink);
    border-bottom: 2px solid var(--color-gold);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.analytics-result-head span:not(:first-child) {
    text-align: right;
}

.analytics-result-row {
    align-items: center;
    min-height: 86px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--color-border-light);
}

.analytics-result-row:nth-child(odd) {
    background: rgba(248, 246, 241, 0.45);
}

.analytics-result-row:hover {
    background: #fff7df;
}

.analytics-result-row:last-child {
    border-bottom: 0;
}

.analytics-result-title {
    min-width: 0;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.analytics-result-metric {
    display: flex;
    flex-direction: column;
    min-width: 0;
    text-align: right;
}

.analytics-result-metric strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    /* Defect 3: match the «Статистика СРО» body values (.analytics-table-number:
       1rem / 700). Was clamp up to 1.28rem @ 800 — visibly larger than the table. */
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Defect 4: share cell is a flex ROW — full-width bar track (flex:1, stable left+right
   edge inside the cell) with the percent pinned to the right on the same line. Only the
   fill (.analytics-bar span) varies; nothing floats horizontally. Was a column stack. */
.analytics-result-bar-cell {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.analytics-result-bar-cell .analytics-bar {
    flex: 1;
    min-width: 0;
    height: 12px;
}

.analytics-result-bar-cell small {
    flex: none;
    min-width: 3em;
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.analytics-appeal-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 25px;
    height: min(520px, calc(100vh - 200px));
    min-height: 390px;
    padding-bottom: 16px;
}

.analytics-appeal-card .analytics-card-header {
    min-height: 0;
    margin-bottom: 0;
}

.analytics-appeal-list {
    height: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: scroll;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: white;
    scrollbar-color: rgba(26, 26, 46, 0.45) transparent;
    scrollbar-width: thin;
}

.analytics-appeal-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.analytics-appeal-list::-webkit-scrollbar-track {
    background: transparent;
}

.analytics-appeal-list::-webkit-scrollbar-thumb {
    border: 2px solid white;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.45);
}

.analytics-appeal-head,
.analytics-appeal-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(90px, 0.25fr) minmax(300px, 0.8fr);
    gap: var(--space-lg);
    min-width: 820px;
}

.analytics-appeal-head {
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: center;
    padding: 14px 28px;
    background: var(--color-ink);
    border-bottom: 2px solid var(--color-gold);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.analytics-appeal-head span:not(:first-child) {
    text-align: right;
}

.analytics-appeal-row {
    align-items: center;
    min-height: 86px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--color-border-light);
}

.analytics-appeal-row:nth-child(odd) {
    background: rgba(248, 246, 241, 0.45);
}

.analytics-appeal-row:hover {
    background: #fff7df;
}

.analytics-appeal-row:last-child {
    border-bottom: 0;
}

.analytics-appeal-title {
    min-width: 0;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.analytics-appeal-metric {
    min-width: 0;
    text-align: right;
}

.analytics-appeal-metric strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1.1vw, 1.28rem);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.analytics-appeal-bar-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.analytics-appeal-bar-cell .analytics-bar {
    height: 12px;
}

.analytics-appeal-bar-cell small {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: center;
}

.analytics-instance-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 25px;
    height: min(520px, calc(100vh - 200px));
    min-height: 390px;
    padding-bottom: 16px;
}

.analytics-instance-card .analytics-card-header {
    min-height: 0;
    margin-bottom: 0;
}

.analytics-instance-list {
    height: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: scroll;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: white;
    scrollbar-color: rgba(26, 26, 46, 0.45) transparent;
    scrollbar-width: thin;
}

.analytics-instance-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.analytics-instance-list::-webkit-scrollbar-track {
    background: transparent;
}

.analytics-instance-list::-webkit-scrollbar-thumb {
    border: 2px solid white;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.45);
}

.analytics-instance-head,
.analytics-instance-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(90px, 0.25fr) minmax(220px, max-content) minmax(300px, 0.8fr);
    gap: var(--space-lg);
    min-width: 980px;
}

.analytics-instance-head {
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: center;
    padding: 14px 28px;
    background: var(--color-ink);
    border-bottom: 2px solid var(--color-gold);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.analytics-instance-head span:not(:first-child) {
    text-align: right;
}

.analytics-instance-row {
    align-items: center;
    min-height: 86px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--color-border-light);
}

.analytics-instance-row:nth-child(odd) {
    background: rgba(248, 246, 241, 0.45);
}

.analytics-instance-row:hover {
    background: #fff7df;
}

.analytics-instance-row:last-child {
    border-bottom: 0;
}

.analytics-instance-title {
    min-width: 0;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.analytics-instance-metric {
    min-width: 0;
    text-align: right;
}

.analytics-instance-metric strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1.1vw, 1.28rem);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.analytics-instance-bar-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.analytics-instance-bar-cell .analytics-bar {
    height: 12px;
}

.analytics-instance-bar-cell small {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: center;
}

.analytics-year-card {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 25px;
    height: min(520px, calc(100vh - 200px));
    min-height: 390px;
    padding-bottom: 16px;
}

.analytics-year-card .analytics-card-header {
    min-height: 0;
    margin-bottom: 0;
}

.analytics-year-list {
    height: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: scroll;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: white;
    scrollbar-color: rgba(26, 26, 46, 0.45) transparent;
    scrollbar-width: thin;
}

.analytics-year-list::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.analytics-year-list::-webkit-scrollbar-track {
    background: transparent;
}

.analytics-year-list::-webkit-scrollbar-thumb {
    border: 2px solid white;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.45);
}

.analytics-year-head,
.analytics-year-row {
    display: grid;
    grid-template-columns: minmax(140px, 0.45fr) minmax(90px, 0.25fr) minmax(220px, max-content) minmax(300px, 0.8fr);
    gap: var(--space-lg);
    min-width: 920px;
}

.analytics-year-head {
    position: sticky;
    top: 0;
    z-index: 5;
    align-items: center;
    padding: 14px 28px;
    background: var(--color-ink);
    border-bottom: 2px solid var(--color-gold);
    color: white;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}

.analytics-year-head span:not(:first-child) {
    text-align: right;
}

.analytics-year-row {
    align-items: center;
    min-height: 86px;
    padding: 18px 28px;
    border-bottom: 1px solid var(--color-border-light);
}

.analytics-year-row:nth-child(odd) {
    background: rgba(248, 246, 241, 0.45);
}

.analytics-year-row:hover {
    background: #fff7df;
}

.analytics-year-row:last-child {
    border-bottom: 0;
}

.analytics-year-title {
    min-width: 0;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

.analytics-year-metric {
    min-width: 0;
    text-align: right;
}

.analytics-year-metric strong {
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: clamp(1.08rem, 1.1vw, 1.28rem);
    font-weight: 800;
    line-height: 1.15;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.analytics-year-bar-cell {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.analytics-year-bar-cell .analytics-bar {
    height: 12px;
}

.analytics-year-bar-cell small {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    line-height: 1.25;
    text-align: center;
}

.analytics-attention {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-height: 100%;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: var(--color-parchment);
    padding: var(--space-lg);
}

.analytics-attention-total {
    display: flex;
    align-items: baseline;
    gap: 6px;
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
}

.analytics-attention-total strong {
    color: var(--color-burgundy);
    font-size: 1.5rem;
    line-height: 1;
}

.analytics-attention-copy {
    display: grid;
    gap: 4px;
    color: var(--color-ink-muted);
    font-size: 0.9rem;
    line-height: 1.45;
}

.analytics-attention-copy strong {
    color: var(--color-ink);
    font-size: 1rem;
}

.analytics-attention-value {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-burgundy);
}

.analytics-reason-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: var(--space-sm);
    border-top: 1px solid var(--color-border-light);
}

.analytics-reason-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(90px, 0.7fr);
    gap: var(--space-sm);
    align-items: center;
}

.analytics-reason-row div:first-child {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.analytics-reason-row strong {
    font-size: 0.875rem;
    color: var(--color-ink);
}

.analytics-reason-row span {
    font-size: 0.8125rem;
    color: var(--color-ink-muted);
}

.analytics-table-wrap {
    max-height: 520px;
    overflow: auto;
}

.analytics-table {
    width: 100%;
    min-width: 720px;
}

.analytics-organizations-card {
    height: min(560px, calc(100vh - 180px));
    min-height: 430px;
    padding-bottom: 16px;
}

.analytics-organizations-card,
.analytics-grid > .analytics-card:last-child {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 25px;
}

.analytics-organizations-card .analytics-card-header,
.analytics-grid > .analytics-card:last-child .analytics-card-header {
    min-height: 0;
    margin-bottom: 0;
}

.analytics-organizations-card .analytics-table-wrap,
.analytics-grid > .analytics-card:last-child .analytics-table-wrap {
    flex: initial;
    height: 100%;
    min-height: 0;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    background: white;
    overflow-x: auto;
    overflow-y: scroll;
    scrollbar-color: rgba(26, 26, 46, 0.45) transparent;
    scrollbar-width: thin;
}

.analytics-organizations-card .analytics-table-wrap::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

.analytics-organizations-card .analytics-table-wrap::-webkit-scrollbar-track {
    background: transparent;
}

.analytics-organizations-card .analytics-table-wrap::-webkit-scrollbar-thumb {
    border: 2px solid white;
    border-radius: 999px;
    background: rgba(26, 26, 46, 0.45);
}

.analytics-organizations-card .analytics-table {
    /* +1 колонка ИНН после разделения «СРО»/«ИНН» (Task 2) → min-width поднят 920→1040px,
       проценты колонок пересчитаны (44+13+8+17.5+17.5=100). Скроллится внутри
       .analytics-table-wrap (overflow-x:auto), body горизонтально не растягивает. */
    min-width: 1040px;
    table-layout: fixed;
}

.analytics-org-col-name {
    width: 44%;
}

.analytics-org-col-inn {
    width: 13%;
}

.analytics-org-col-cases {
    width: 8%;
}

.analytics-org-col-money {
    width: 17.5%;
}

.analytics-organizations-card .analytics-table thead th {
    top: 0;
    z-index: 6;
    padding: 12px 14px;
    /* Defect 2 (4th fix, root cause CONFIRMED live). The table is table-layout:fixed and the
       money columns are locked to 17.5% (.analytics-org-col-money). With the previous
       `white-space: nowrap`, the two long headers («Сумма текущих требований», «Сумма
       требований к взысканию») were WIDER than their fixed cell, so the text overflowed and
       left zero room for the trailing sort-arrow ::after: on the middle money column the arrow
       spilled into the next cell and was hidden, and on the last column both text and arrow
       overflowed past the table's right edge and were clipped by the horizontal-scroll
       container. Letting the header text WRAP keeps it inside the 17.5% cell, so the in-flow
       ::after arrow now lands at the end of the last line INSIDE the cell on every column.
       Wrapping only REDUCES horizontal width pressure, so min-width:1040px fits better, not
       worse — no new overflow. */
    white-space: normal;
    /* One-line («СРО», «ИНН», «Дел») and two-line (money) headers coexist in the sticky row;
       bottom-align so every label sits on the same baseline row and the arrow reads level. */
    vertical-align: bottom;
}

.analytics-organizations-card .analytics-table th:not(:first-child),
.analytics-organizations-card .analytics-table td:not(:first-child) {
    text-align: right;
}

.analytics-organizations-card .analytics-table td {
    padding: 13px 14px;
    vertical-align: middle;
}

.analytics-organizations-card .analytics-table tbody tr:nth-child(even) {
    background: rgba(248, 246, 241, 0.45);
}

.analytics-organizations-card .analytics-table tbody tr:hover {
    background: #fff7df;
}

.analytics-table-number {
    white-space: nowrap;
    color: var(--color-ink);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.dashboard-sro-cell {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.dashboard-sro-cell strong {
    color: var(--color-ink);
    font-weight: 700;
    line-height: 1.25;
}

.analytics-organizations-card .dashboard-sro-cell strong {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.25;
}

/* Отдельная колонка ИНН (Task 2 вынес ИНН из ячейки названия в самостоятельный td.sro-inn). */
.analytics-organizations-card .analytics-table td.sro-inn {
    color: var(--color-ink-muted);
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Аффордансы клиентской сортировки (Task 4). Кликабельны заголовки-колонки с data-sort-key
   (span в шапках ролей/статусов и th в «Статистике СРО»); индикатор направления вешаем на
   aria-sort="ascending|descending", который table-sort.js проставляет на активном заголовке
   и снимает с остальных. Никаких собственных классов-маркеров — ровно эти два хука. */
[data-sort-key] {
    cursor: pointer;
    user-select: none;
}

.analytics-role-head [data-sort-key]:hover,
.analytics-result-head [data-sort-key]:hover,
.analytics-organizations-card .analytics-table th[data-sort-key]:hover {
    color: var(--color-gold-light);
}

[data-sort-key][aria-sort="ascending"]::after {
    content: "\25B2";
    margin-left: 6px;
    font-size: 0.7em;
    vertical-align: middle;
}

[data-sort-key][aria-sort="descending"]::after {
    content: "\25BC";
    margin-left: 6px;
    font-size: 0.7em;
    vertical-align: middle;
}

/* Defect 2 (re-solved, flow-based; the absolute approach failed live). The real
   «Статистика дел по СРО» <table> sits in a HORIZONTAL-scroll container and is wider than
   it (table-layout:fixed, min-width 1040px). The previous fix positioned the arrow
   ABSOLUTELY against the cell's right/padding edge — which for the last column
   («…К ВЗЫСКАНИЮ») coincides with the container's scroll/scrollbar clip edge, so the arrow
   rendered outside the visible area — and, being out of flow, it ignored the reserved
   padding and could overlap a long right-aligned header («СУММА ТЕКУЩИХ ТРЕБОВАНИЙ»).
   Root fix: render the arrow as a normal IN-FLOW inline pseudo (never absolute), always
   present as a fixed-width inline-block slot, so it (a) flows immediately after the
   right-aligned text and cannot overlap it, (b) lives inside the cell's content box
   (≥14px padding from the edge) and so is never in the scrollbar/clip zone even on the
   last column scrolled to the end, and (c) reserves its width on every sortable header so
   nothing shifts when aria-sort toggles the glyph in. We do NOT touch the <th> `position`
   (stays sticky via .table thead th) nor its `display` (stays table-cell — no table-layout
   risk). Grid heads are not matched by these selectors and keep the generic inline ::after. */
.analytics-organizations-card .analytics-table th[data-sort-key]::after {
    content: "";
    display: inline-block;
    width: 1em;
    margin-left: 5px;
    font-size: 0.7em;
    line-height: 1;
    text-align: center;
    vertical-align: middle;
}

.analytics-organizations-card .analytics-table th[data-sort-key][aria-sort="ascending"]::after {
    content: "\25B2";
}

.analytics-organizations-card .analytics-table th[data-sort-key][aria-sort="descending"]::after {
    content: "\25BC";
}

/* Скрыты по Decision 7: разметка остаётся в DOM (существующие assert'ы на скрытый текст
   зелёные, таблицу можно вернуть удалением этого правила). Стоит после индивидуальных
   правил карточек и после .analytics-card-wide (display:flex) — та же специфичность (0,1,0),
   но позже по источнику, поэтому display:none выигрывает. Видимыми остаются
   .analytics-result-card (статусы) и donut-карточки. */
.analytics-instance-card,
.analytics-year-card,
.analytics-appeal-card,
.analytics-claim-structure-card {
    display: none;
}

@media (max-width: 1300px) {
    .stats-layout {
        grid-template-columns: 1fr;
    }

    .stats-right {
        grid-template-columns: minmax(130px, 180px) minmax(0, 1fr);
    }

    .case-filter-main {
        grid-template-columns: minmax(260px, 1.5fr) repeat(2, minmax(150px, 1fr));
    }

    .case-filter-secondary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .case-export-btn,
    .case-filter-actions {
        grid-column: 1 / -1;
        justify-self: end;
    }

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

    .analytics-filters {
        grid-template-columns: repeat(4, minmax(180px, 1fr));
    }

    .analytics-card,
    .analytics-chart-card {
        grid-column: span 1;
    }

}

/* Шесть KPI-карточек держатся в один ряд вплоть до 1280px (требование T5);
   на более узких экранах сворачиваются на три, затем (≤720px) в одну колонку ниже. */
@media (max-width: 1200px) {
    .analytics-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .case-filter-main,
    .case-filter-secondary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .case-filter-search-field {
        grid-column: 1 / -1;
    }

    .analytics-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

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

    .region-chart-wrapper {
        justify-self: start;
    }

    .sro-detail-grid,
    .sro-summary-kpis,
    .case-filter-main,
    .case-filter-secondary,
    .case-period-inputs {
        grid-template-columns: 1fr;
    }

    .sro-detail-item:nth-child(odd),
    .sro-detail-item:nth-child(even) {
        padding-left: 0;
        padding-right: 0;
    }

    .sro-detail-item {
        grid-template-columns: 1fr;
        row-gap: 5px;
    }

    .detail-value {
        text-align: left;
    }

    .sro-detail-info .sro-info-links {
        gap: 14px;
    }

    .sro-detail-info .sro-link {
        min-height: 38px;
    }

    .case-export-btn,
    .case-filter-actions {
        justify-self: stretch;
    }

    .analytics-filters,
    .analytics-row,
    .analytics-row-simple,
    .analytics-list-wide .analytics-row-simple,
    .analytics-list.compact .analytics-row {
        grid-template-columns: 1fr;
    }

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

    .analytics-kpi-grid {
        grid-template-columns: 1fr;
    }

    .analytics-card,
    .analytics-chart-card,
    .analytics-chart-card-wide,
    .analytics-card-wide {
        grid-column: 1;
    }

    .analytics-chart {
        height: 280px;
    }

    .analytics-claim-structure-amount {
        text-align: left;
    }

    .analytics-appeal-head,
    .analytics-claim-structure-head,
    .analytics-instance-head,
    .analytics-result-head,
    .analytics-role-head,
    .analytics-year-head {
        display: none;
    }

    .analytics-claim-structure-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        min-width: 0;
    }

    .analytics-appeal-bar-cell small,
    .analytics-claim-structure-bar-cell small,
    .analytics-instance-bar-cell small,
    .analytics-result-bar-cell small,
    .analytics-role-bar-cell small,
    .analytics-year-bar-cell small {
        text-align: left;
    }

    .analytics-appeal-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        min-width: 0;
    }

    .analytics-appeal-metric {
        text-align: left;
    }

    .analytics-instance-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        min-width: 0;
    }

    .analytics-instance-metric {
        text-align: left;
    }

    .analytics-result-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        min-width: 0;
    }

    .analytics-result-metric {
        text-align: left;
    }

    .analytics-role-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        min-width: 0;
    }

    .analytics-role-metric {
        text-align: left;
    }

    .analytics-year-row {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
        min-width: 0;
    }

    .analytics-year-metric {
        text-align: left;
    }
}

/* KPI-значение исключено из этого nowrap-набора: при шести узких карточках длинная сумма
   должна переноситься по разрядам, а не обрезаться (см. .analytics-kpi-card strong выше). */
.analytics-row-metrics strong,
.analytics-attention-value {
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
    font-variant-numeric: tabular-nums;
}

/* Таблица дел: не даём длинному тексту вылезать за границы ячеек. */
.table-compact td {
    overflow: hidden;
    vertical-align: top;
}

/* Стороны дела: аккуратно режем длинные названия внутри своей колонки.

   font-size здесь, а не в `.parties-cell` (:1353), потому что тот проигрывает по
   специфичности: `.table td` (:1010) задаёт 0.9375rem с весом (0,1,1), а голый
   `.parties-cell` — (0,1,0). В компактной таблице объявленный автором размер
   колонки НИКОГДА не применялся: текст сторон рендерился 15px — крупнее всего
   остального в ряду (суд 14px, дата и суммы 13px, основания 12px, бейджи 11.5px),
   потому что у него, в отличие от соседей, нет вложенного элемента со своим
   размером. `.table-compact .parties-cell` даёт (0,2,0) и возвращает 0.8125rem —
   тот же кегль, что объявлен у самой `.table-compact` (:1336). */
.table-compact .parties-cell {
    overflow: hidden;
    font-size: 0.8125rem;
}

/* `anywhere` рвало названия сторон посреди слова даже когда слово целиком влезало
   в следующую строку. `break-word` сначала переносит по пробелам и рвёт только то,
   что не помещается в строку целиком (длинные ОРГАНИЗАЦИОННО-ПРАВОВЫЕ формы). */
.table-compact .party-line {
    display: block;
    overflow: hidden;
    max-width: 100%;
    white-space: normal;
    overflow-wrap: break-word;
}

/* Суд и основания тоже не должны оставлять визуальные хвосты на границах колонок. */
.table-compact .court-name,
.table-compact .judge-name,
.table-compact .grounds-text {
    display: block;
    overflow: hidden;
    max-width: 100%;
}

/* Глобальный overlay загрузки для переходов и обновления данных. */
.page-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(248, 246, 241, 0.86);
    backdrop-filter: blur(3px);
}

.page-loading-overlay.is-visible {
    display: flex;
}

.page-loading-card {
    min-width: 280px;
    padding: 28px 32px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    background: white;
    box-shadow: 0 18px 45px rgba(26, 26, 46, 0.16);
    text-align: center;
}

.page-loading-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 16px;
    border: 4px solid rgba(184, 134, 11, 0.18);
    border-top-color: var(--color-gold);
    border-radius: 50%;
    animation: page-loading-spin 0.8s linear infinite;
}

.page-loading-title {
    margin-bottom: 6px;
    color: var(--color-ink);
    font-size: 0.875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.page-loading-text {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

@keyframes page-loading-spin {
    to {
        transform: rotate(360deg);
    }
}

.case-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
    gap: 1rem;
    margin-bottom: 1rem;
}

.case-detail-main .sro-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.case-detail-actions {
    margin-top: 1rem;
}

.case-detail-text-block {
    margin-bottom: 1rem;
}

.case-detail-text-block:last-child {
    margin-bottom: 0;
}

.case-detail-text-block p {
    margin: 0.25rem 0 0;
    color: var(--color-text);
    line-height: 1.5;
}

.case-side-block {
    border-bottom: 1px solid var(--color-border-light);
    padding: 0 0 0.9rem;
    margin-bottom: 0.9rem;
}

.case-side-block:last-child {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.case-side-block p {
    margin: 0.3rem 0 0;
    color: var(--color-ink);
    font-size: 0.98rem;
    line-height: 1.45;
}

.case-side-block-muted p {
    color: var(--color-text);
}

.detail-value-note {
    display: block;
    margin-top: 0.15rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.detail-value-note.warning { color: #8a5a00; }
.detail-value-note.danger { color: #991b1b; }

.case-flag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.85rem;
}

.case-history-defendant-list {
    display: grid;
    gap: 0.45rem;
    margin: 0.35rem 0 0;
    padding: 0;
    list-style: none;
}

.case-history-defendant-list li {
    display: grid;
    gap: 0.1rem;
}

.case-defendant-list {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0.45rem 0 0;
    padding: 0;
    color: var(--color-text);
    line-height: 1.5;
    list-style: none;
}

.case-defendant-list li {
    border-radius: var(--radius-sm);
    background: #f8fafc;
    padding: 0.5rem 0.65rem;
}

.case-defendant-list li + li {
    margin-top: 0;
}

.case-claim-section,
.case-instance-section,
.case-history-section {
    margin-top: 1rem;
}

/* Судебные инстанции и сроки — таблица (MR-d): строка = раунд инстанции. */
.case-instance-table-wrap {
    overflow-x: auto;
}

.case-instance-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.case-instance-table thead th {
    text-align: left;
    padding: 0.5rem 0.65rem;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

.case-instance-table tbody td {
    padding: 0.6rem 0.65rem;
    border-top: 1px solid var(--color-border-light);
    color: var(--color-ink);
    vertical-align: top;
    line-height: 1.4;
}

.case-instance-table tbody tr:first-child td {
    border-top: none;
}

.case-instance-col-name {
    min-width: 180px;
}

.case-instance-name-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.case-instance-name-line strong {
    color: var(--color-ink);
    font-weight: 700;
}

.case-instance-court {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.35;
}

.case-instance-col-name .case-instance-badge.warning {
    margin-top: 0.3rem;
}

.case-instance-meta {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.case-instance-dates {
    display: grid;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.case-instance-dates li {
    display: flex;
    flex-direction: column;
}

.case-instance-dates li span {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    line-height: 1.3;
}

.case-instance-dates li strong {
    color: var(--color-ink);
    font-weight: 600;
}

.case-instance-state {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0.18rem 0.5rem;
    background: #f1f5f9;
    color: #475569;
    font-size: 0.75rem;
    font-weight: 700;
}

.case-instance-state.success {
    background: #dcfce7;
    color: #166534;
}

.case-instance-state.info {
    background: #dbeafe;
    color: #1e40af;
}

.case-instance-state.warning {
    background: #fff7d6;
    color: #8a5a00;
}

.case-instance-state.danger {
    background: #fee2e2;
    color: #991b1b;
}

.case-instance-date-note {
    display: block;
    margin-top: 0.25rem;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.case-instance-summary {
    display: grid;
    gap: 0.2rem;
    margin-top: 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    line-height: 1.25;
}

.case-instance-badge {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    border-radius: 999px;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.case-instance-badge.warning {
    background: #fff7d6;
    color: #8a5a00;
}

.case-instance-badge.danger {
    margin-left: 0.35rem;
    background: #fee2e2;
    color: #991b1b;
}

.current-claims-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 0.85rem;
}

.current-claim-card {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 1rem;
}

.current-claim-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.9rem;
}

.current-claim-defendant {
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}

.current-claim-liability {
    flex-shrink: 0;
    border-radius: 999px;
    background: var(--color-parchment);
    color: var(--color-text-muted);
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.current-claim-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
}

.current-claim-total span,
.current-claim-components span {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.current-claim-total strong {
    color: var(--color-ink);
    font-size: 1.35rem;
}

.current-claim-components {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.current-claim-components div {
    min-width: 0;
}

.current-claim-components strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-ink);
    font-size: 0.95rem;
}

.case-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.case-history-filters-panel {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    background: #fff;
    padding: 1rem;
    margin-bottom: 1rem;
}

.case-history-filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 0.85rem;
}

.case-history-filter-grid label,
.case-history-filter-actions label {
    color: var(--color-text-muted);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.case-history-filter-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.case-history-filter-grid select,
.case-history-filter-grid input {
    min-height: 2.55rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-ink);
    font-size: 0.95rem;
    padding: 0.45rem 0.6rem;
}

.case-history-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.9rem;
}

.case-history-current-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-transform: none;
    letter-spacing: 0;
}

.case-history-item {
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
    padding: 1rem;
    background: #fff;
}

.case-history-item-current {
    border-left: 4px solid #16a34a;
}

.case-history-item-historical {
    border-left: 4px solid #94a3b8;
    background: #f8fafc;
}

.case-history-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    font-size: 0.6875rem;
    font-weight: 700;
    margin-right: 0.35rem;
}

.case-history-status-badge.current {
    background: #dcfce7;
    color: #166534;
}

.case-history-status-badge.historical {
    background: #e2e8f0;
    color: #475569;
}

.case-history-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.85rem;
}

.case-history-event-title {
    color: var(--color-ink);
    font-size: 1rem;
    font-weight: 800;
}

.case-history-event-subtitle {
    margin-top: 0.2rem;
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.case-history-party-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr);
    gap: 0.85rem;
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    padding: 0.75rem 0;
    margin-bottom: 0.75rem;
}

.case-history-party-row span,
.case-history-source span,
.case-history-evidence span {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.case-history-party-row strong {
    display: block;
    margin-top: 0.2rem;
    color: var(--color-ink);
    line-height: 1.35;
}

.case-history-party-row small {
    display: block;
    margin-top: 0.15rem;
    color: var(--color-text-muted);
}

.claim-change-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.claim-change-row {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(180px, max-content);
    align-items: center;
    gap: 0.65rem;
    border-radius: var(--radius-sm);
    background: #fafafa;
    padding: 0.55rem 0.65rem;
}

.claim-change-row span {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.claim-change-row strong {
    color: var(--color-ink);
    font-size: 0.95rem;
    white-space: nowrap;
}

.claim-change-value {
    display: flex;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.45rem;
    text-align: right;
}

.claim-change-value small {
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 700;
}

.claim-change-row-total {
    background: var(--color-parchment);
}

.claim-change-row-total strong {
    font-size: 1.05rem;
}

.case-history-source,
.case-history-evidence,
.case-history-ai {
    margin-top: 0.75rem;
}

.case-history-source {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    color: var(--color-text-muted);
}

.case-history-source span {
    flex-basis: 100%;
}

.case-history-source strong {
    color: var(--color-ink);
}

/* Единая строка «название от даты» под заголовком «Источник». Перебивает
   uppercase/bold/flex-basis правило .case-history-source span (специфичность 0,1,1):
   селекторы ниже имеют 0,2,0 (.case-history-source.case-history-source-doc как <a>)
   и 0,1,1+0,1,0 для span.case-history-source-doc — оба ≥ перебиваемого. */
.case-history-source .case-history-source-doc {
    flex-basis: 100%;
    text-transform: none;
    font-weight: 400;
    font-size: 0.9rem;
    letter-spacing: normal;
    color: var(--color-ink);
}

.case-history-source a.case-history-source-doc {
    text-decoration: underline;
    color: var(--color-accent);
    transition: color var(--transition-fast);
}

.case-history-source a.case-history-source-doc:hover {
    color: var(--color-accent-hover);
}

.case-history-ai {
    color: var(--color-text-muted);
    font-size: 0.82rem;
}

.case-history-evidence {
    border-radius: var(--radius-sm);
    background: #f8fafc;
    padding: 0.7rem 0.8rem;
}

.case-history-evidence p {
    margin: 0.25rem 0 0;
    color: var(--color-text);
    line-height: 1.45;
}

.case-history-meta,
.case-history-values {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.case-history-meta {
    justify-content: space-between;
    margin-bottom: 0.45rem;
    color: var(--color-text-muted);
    font-size: 0.8125rem;
}

.case-history-meta strong {
    color: var(--color-ink);
}

.case-history-values {
    font-size: 0.875rem;
}

.case-external-link {
    display: inline-flex;
    align-items: center;
    min-height: 1.35rem;
    padding: 0;
    color: var(--color-accent);
    background: transparent;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
}

.case-external-link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .case-detail-layout {
        grid-template-columns: 1fr;
    }

    .case-detail-main .sro-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* === auth-* (task 4) === */
/* Базовое семейство классов для страниц входа / сброса / смены пароля / логаута.
   Владелец — Task 4 (portal-access-management). Task 8 (wave 2) ПЕРЕИСПОЛЬЗУЕТ.
   Построено только на существующих токенах :root — новых цветов не вводим. */
.auth-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: var(--space-3xl) var(--space-md);
}

.auth-card {
    width: 100%;
    max-width: 26rem;
    background: var(--color-parchment);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-2xl) var(--space-xl);
}

.auth-card h1 {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-ink);
    margin-bottom: var(--space-md);
}

.auth-hint {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin-bottom: var(--space-lg);
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.auth-field > span {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-ink-light);
}

.auth-input {
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    font-family: var(--font-body);
    font-size: 0.95rem;
    color: var(--color-text);
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.auth-input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-gold-pale);
}

.auth-submit {
    display: inline-block;
    width: 100%;
    padding: var(--space-sm) var(--space-lg);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 700;
    text-align: center;
    color: var(--color-parchment);
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast), border-color var(--transition-fast);
}

.auth-submit:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

/* Ссылка, оформленная как кнопка (страницы-подтверждения без формы). */
.auth-submit-link {
    margin-top: var(--space-md);
    text-decoration: none;
}

.auth-error {
    display: block;
    color: var(--color-burgundy);
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
}
/* === end auth-* === */

/* === request-password (task 8) === */
/* Узкие правила поверх auth-базы Task 4 (её НЕ переопределяем). Только ссылка
   «Запросить смену пароля» под формой входа, ссылка «назад» и зелёный тон
   success-сообщения (auth-error по умолчанию бордовый — для ошибок). */
.request-password-link,
.request-password-back {
    display: inline-block;
    margin-top: var(--space-md);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
    text-decoration: none;
}

.request-password-link:hover,
.request-password-back:hover {
    text-decoration: underline;
}

.request-password-success {
    color: var(--color-sage);
}
/* === end request-password === */

/* === login-help (task 6) === */
/* Анонимный блок справки под ссылкой «Запросить смену пароля» на странице входа.
   Санитизирован урезанным списком (без <a>/таблиц) — оформляем скромно, чтобы он
   пояснял, а не соперничал с формой. Соседствует с auth-* / request-password. */
.login-help {
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-border-light);
    text-align: left;
}

.login-help-section + .login-help-section {
    margin-top: var(--space-md);
}

.login-help-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-xs);
}

.login-help-body {
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.login-help-body p + p {
    margin-top: var(--space-sm);
}
/* === end login-help === */

/* === help-page (task 6) === */
/* Страница /help/: оглавление-якоря, разделы и таблица описаний полей.
   Таблицу переиспользует базовый .table/.table-container. */
.help-page {
    max-width: 860px;
}

.help-toc {
    margin-bottom: var(--space-2xl);
    padding: var(--space-lg);
    background: var(--color-parchment-dark);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
}

.help-toc-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.help-toc-link {
    color: var(--color-accent);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.help-toc-link:hover {
    color: var(--color-accent-hover);
    text-decoration: underline;
}

.help-section {
    margin-bottom: var(--space-2xl);
    /* Компенсация фиксированной высоты шапки при переходе по якорю. */
    scroll-margin-top: var(--space-xl);
}

.help-section-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-ink);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-border-light);
}

.help-section-body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--color-text);
}

.help-section-body p + p,
.help-section-body ul,
.help-section-body ol,
.help-section-body blockquote {
    margin-top: var(--space-md);
}

.help-section-body ul,
.help-section-body ol {
    padding-left: var(--space-lg);
}

.help-section-body h3,
.help-section-body h4 {
    margin-top: var(--space-lg);
    margin-bottom: var(--space-sm);
    color: var(--color-ink);
}

.help-report-table-wrap {
    margin-top: var(--space-lg);
}

.help-report-field-title {
    font-weight: 600;
    color: var(--color-ink);
    white-space: nowrap;
}

.help-admin-link {
    margin-top: var(--space-lg);
}
/* === end help-page === */