html, body {
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
}

/* Страницы входа и ошибок (без MudBlazor) */
.login-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f4f7;
    padding: 16px;
}

.login-card {
    width: 100%;
    max-width: 360px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login-card h1 {
    font-size: 22px;
    font-weight: 500;
    margin: 0;
}

.login-card label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 14px;
    color: #444;
}

.login-card input {
    font-size: 15px;
    padding: 10px 12px;
    border: 1px solid #c8ccd2;
    border-radius: 6px;
}

.login-card input:focus {
    outline: 2px solid #2E5C8A;
    border-color: #2E5C8A;
}

.login-card button {
    font-size: 15px;
    padding: 10px;
    border: 0;
    border-radius: 6px;
    background: #2E5C8A;
    color: #fff;
    cursor: pointer;
}

.login-error {
    background: #fdecec;
    color: #8a1f1f;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
}

/* Сообщение Blazor о сбое */
#blazor-error-ui {
    background: #fff3cd;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 2000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.text-right {
    text-align: right;
}

/* ───────── Общий стиль рабочих страниц ───────── */
.mud-main-content {
    background: #f5f7fa;
    min-height: 100vh;
}

.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

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

.filter-bar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.filter-bar > * {
    flex: 0 1 auto;
    min-width: 170px;
    max-width: 260px;
}

/* Кнопки в строке фильтров не сжимаются и не наезжают на поля */
.filter-bar > .mud-button-root,
.filter-bar > .mud-button-group-root,
.filter-bar > .mud-icon-button {
    flex: none;
    min-width: auto;
    max-width: none;
}

.filter-bar > .mud-input-control,
.filter-bar > .mud-select {
    margin-top: 0;
}

.filter-wide,
.filter-bar > .filter-wide {
    flex: 1 1 320px;
    min-width: 260px;
    max-width: 420px;
}

.num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    text-align: right;
}

.money-in {
    color: #1b7f3b;
}

.money-out {
    color: #c62828;
}

.warn {
    color: #b26a00;
}

.select-hint {
    margin-left: 8px;
    font-size: 12px;
    color: #8a929c;
}

.muted {
    color: #8a929c;
}

.nowrap {
    white-space: nowrap;
}

.purpose {
    max-width: 380px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #5f6b7a;
    font-size: 13px;
}

/* ───────── Карточки показателей ───────── */
.kpi-card {
    padding: 16px 18px;
    height: 100%;
    border-radius: 10px !important;
    background: #fff;
}

.kpi-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #5f6b7a;
}

.kpi-value {
    font-size: 24px;
    font-weight: 500;
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

.kpi-note {
    margin-top: 4px;
    font-size: 12px;
    color: #8a929c;
}

.panel {
    padding: 16px;
    border-radius: 10px !important;
    background: #fff;
}

.panel-title {
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
}

/* ───────── Отчеты (ДДС, ОПиУ) ───────── */
.report-wrap {
    overflow: auto;
    max-height: 72vh;
    background: #fff;
    border: 1px solid #e3e7ec;
    border-radius: 10px;
}

.report {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    font-size: 13.5px;
}

.report th, .report td {
    padding: 7px 12px;
    border-bottom: 1px solid #eef1f4;
}

.report thead th {
    position: sticky;
    top: 0;
    background: #f8fafc;
    font-weight: 500;
    color: #5f6b7a;
    text-align: right;
    z-index: 2;
    white-space: nowrap;
}

.report .report-title-col {
    position: sticky;
    left: 0;
    background: inherit;
    text-align: left;
    min-width: 280px;
    z-index: 1;
}

.report thead .report-title-col {
    z-index: 3;
    background: #f8fafc;
}

.report tbody tr {
    background: #fff;
}

.report tbody tr:hover {
    background: #f4f8fd;
}

.report .report-total-col {
    font-weight: 500;
    background: #fafbfc;
}

.report .r-section td {
    background: #eef3f9;
    font-weight: 500;
    color: #2E5C8A;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .04em;
}

.report .r-group td {
    font-weight: 500;
}

.report .r-subtotal td {
    font-weight: 500;
    background: #f8fafc;
}

.report .r-total td {
    font-weight: 600;
    background: #eef3f9;
}

.report .r-balance td {
    font-weight: 500;
    color: #2E5C8A;
    background: #fbfcfe;
}

.report .r-percent td {
    color: #5f6b7a;
    font-style: italic;
}

.report-link {
    cursor: pointer;
    color: inherit;
}

.report-link:hover {
    color: #2E5C8A;
    text-decoration: underline;
}

/* ───────── Платежный календарь ───────── */
.day-negative {
    background: #fdecec !important;
}

.overdue {
    color: #c62828;
    font-size: 12px;
}

.edit-panel {
    padding: 16px;
    border-radius: 10px !important;
    border-left: 4px solid #2E5C8A;
    margin-bottom: 12px;
}

/* ═════════════ Оболочка: боковое меню (ТЗ v1.4, раздел III) и верхняя панель ═════════════ */
body, .mud-typography {
    font-family: "Inter", "Segoe UI", Roboto, Arial, sans-serif;
}

:root {
    --sb-w: 248px;
    --sb-w-collapsed: 72px;
    --sb-bg: linear-gradient(180deg, #0B1F3B 0%, #0F274D 100%);
    --sb-text: #FFFFFF;
    --sb-text-2: #B3C1E1;
    --sb-active: #3B82F6;
}

.shell { min-height: 100vh; background: #F4F6FA; }

.sb {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1250;
    width: var(--sb-w);
    display: flex; flex-direction: column;
    background: var(--sb-bg);
    color: var(--sb-text);
    transition: width .18s ease, transform .2s ease;
}
.shell-main {
    margin-left: var(--sb-w);
    min-width: 0;
    overflow-x: clip;
    transition: margin-left .18s ease;
}
.shell.collapsed .sb { width: var(--sb-w-collapsed); }
.shell.collapsed .shell-main { margin-left: var(--sb-w-collapsed); }

.sb-head { display: flex; align-items: center; gap: 6px; padding: 14px 10px 14px 14px; flex: none; }
.sb-logo {
    display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1;
    color: var(--sb-text); text-decoration: none; font-size: 16px; font-weight: 600; line-height: 1.25;
}
.sb-logo-icon {
    flex: none; width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(59, 130, 246, .18); color: #60A5FA;
}
.sb-collapse, .sb-close, .topbar-menu {
    flex: none; border: 0; background: transparent; cursor: pointer;
    width: 36px; height: 36px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
}
.sb-collapse, .sb-close { color: var(--sb-text-2); }
.sb-collapse:hover, .sb-close:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.sb-close { display: none; }

.sb-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px 10px; }
.sb-scroll::-webkit-scrollbar { width: 6px; }
.sb-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15); border-radius: 3px; }
.sb-foot { flex: none; padding: 8px 10px 14px; border-top: 1px solid rgba(255, 255, 255, .08); }

.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-tip { display: block !important; width: 100%; }
.sb-item, .sb-sub {
    display: flex; align-items: center; gap: 10px; width: 100%;
    border: 0; background: transparent; cursor: pointer; text-align: left;
    font: inherit; color: var(--sb-text); text-decoration: none;
    border-radius: 12px; box-sizing: border-box;
}
.sb-item { min-height: 44px; padding: 4px 8px; font-size: 14.5px; font-weight: 500; }
.sb-icon {
    flex: none; width: 34px; height: 34px; border-radius: 9px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .06); color: var(--sb-text-2);
}
.sb-title { flex: 1; min-width: 0; line-height: 1.25; overflow-wrap: anywhere; }
.sb-arrow { flex: none; display: inline-flex; color: var(--sb-text-2); transition: transform .15s ease; }
.sb-group.open .sb-arrow { transform: rotate(180deg); }
.sb-item:hover, .sb-sub:hover { background: rgba(255, 255, 255, .07); }
.sb-item.active { background: var(--sb-active); }
.sb-item.active .sb-icon { background: rgba(255, 255, 255, .18); color: #fff; }
.sb-item.has-active .sb-icon { color: #fff; }
.sb-item:focus-visible, .sb-sub:focus-visible, .sb-collapse:focus-visible, .sb-close:focus-visible {
    outline: 2px solid #93C5FD; outline-offset: 1px;
}

.sb-children { display: flex; flex-direction: column; gap: 2px; margin: 2px 0 6px 20px; padding-left: 12px; border-left: 1px solid rgba(179, 193, 225, .2); }
.sb-sub { min-height: 38px; padding: 4px 8px; font-size: 14px; color: var(--sb-text-2); }
.sb-sub-icon { flex: none; display: inline-flex; }
.sb-sub:hover { color: #fff; }
.sb-sub.active { background: var(--sb-active); color: #fff; }

/* Свернутое десктопное меню: только иконки, подписи и подпункты скрыты */
.shell.collapsed .sb-head { flex-direction: column; padding: 14px 0 10px; gap: 8px; }
.shell.collapsed .sb-logo { flex: none; }
.shell.collapsed .sb-title, .shell.collapsed .sb-arrow, .shell.collapsed .sb-children { display: none; }
.shell.collapsed .sb-item { justify-content: center; padding: 4px 0; }

.sb-overlay { display: none; }

/* Верхняя панель */
.topbar {
    position: sticky; top: 0; z-index: 1100;
    display: flex; align-items: center; gap: 8px;
    min-height: 60px; padding: 8px 20px 8px 12px;
    background: #fff; border-bottom: 1px solid #e6eaf0; color: #1F2A3D;
}
.topbar-menu { color: #4A5568; }
.topbar-menu:hover { background: #f1f4f9; }
.only-mobile { display: none !important; }

.topbar-inner { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; }
.ctx { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; flex: 1; }
.topbar-actions { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: none; }

.ctx-period { position: relative; display: inline-flex; align-items: center; gap: 2px; }
.ctx-arrow {
    width: 32px; height: 36px; border: 1px solid #dfe4ec; background: #fff; color: #4A5568; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
}
.ctx-arrow:disabled { opacity: .4; cursor: default; }
.ctx-arrow:not(:disabled):hover, .ctx-chip:hover { background: #f5f7fb; }
.ctx-chip {
    height: 36px; display: inline-flex; align-items: center; gap: 8px; padding: 0 12px;
    border: 1px solid #dfe4ec; background: #fff; border-radius: 8px; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 500; color: #1F2A3D; white-space: nowrap;
}
.ctx-chip .mud-icon-root { color: #6b778a; }
.ctx-arrow:focus-visible, .ctx-chip:focus-visible, .topbar-menu:focus-visible { outline: 2px solid #2F6FED; outline-offset: 1px; }

.ctx-pop { z-index: 1400 !important; }
.ctx-pop-inner { padding: 14px; max-width: calc(100vw - 24px); }
.ctx-pop-title { font-weight: 600; margin-bottom: 8px; }
.ctx-pop-sub { font-size: 12.5px; color: #6b778a; margin: 12px 0 4px; }
.ctx-presets { display: flex; flex-wrap: wrap; }
.ctx-range .mud-picker-content { min-width: 0; }
.ctx-pop-actions { display: flex; align-items: center; gap: 6px; justify-content: flex-end; margin-top: 6px; }
.ctx-pop-draft { margin-right: auto; font-size: 13px; color: #4A5568; }

.ctx-org { width: 240px; flex: none; }
.ctx-org .mud-input-outlined-border { border-color: #dfe4ec; }
.ctx-org-item { display: inline-flex; align-items: center; gap: 8px; }

.user-chip {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 8px; border-radius: 8px; cursor: pointer;
}
.user-chip:hover { background: #f1f4f9; }
.user-name { font-size: 14px; font-weight: 500; }

.menu-notice { display: flex; flex-direction: column; max-width: 300px; font-size: 13px; white-space: normal; }
.menu-notice span { color: #6b778a; }

.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }

.main-inner { display: block; padding: 24px 24px 40px; }

.page-header .mud-typography-h5 { font-weight: 600; }

.dependency-card { max-width: 720px; }
.dependency-card ul { margin: 8px 0 0 18px; padding: 0; }
.period-note {
    display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 8px; background: #EEF4FF; color: #1E40AF; font-size: 13px; margin-bottom: 12px;
}
.period-note button { border: 0; background: transparent; color: #2F6FED; cursor: pointer; font: inherit; text-decoration: underline; padding: 0; }

/* Планшет и телефон: меню выезжает поверх страницы, фон затемняется и не прокручивается */
@media (max-width: 959.98px) {
    .sb {
        width: min(84vw, 340px) !important;
        transform: translateX(-105%);
        visibility: hidden;
        transition: transform .2s ease, visibility 0s linear .2s;
    }
    .shell-main, .shell.collapsed .shell-main { margin-left: 0; }
    .shell.mobile-open .sb { transform: none; visibility: visible; transition: transform .2s ease; box-shadow: 0 0 40px rgba(0, 0, 0, .35); }
    .sb-overlay { display: block; position: fixed; inset: 0; z-index: 1240; background: rgba(8, 15, 30, .55); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
    .shell.mobile-open .sb-overlay { opacity: 1; pointer-events: auto; }
    body:has(.shell.mobile-open) { overflow: hidden; }

    /* Внутри мобильного меню всегда развернутый вид */
    .shell.collapsed .sb-head { flex-direction: row; padding: 16px 12px 12px 16px; }
    .shell.collapsed .sb-logo { flex: 1; }
    .shell.collapsed .sb-title, .shell.collapsed .sb-arrow { display: initial; }
    .shell.collapsed .sb-children { display: flex; }
    .shell.collapsed .sb-item { justify-content: flex-start; padding: 8px 10px; }

    .sb-collapse { display: none; }
    .sb-close { display: inline-flex; }
    .sb-head { padding: 16px 12px 12px 16px; }
    .sb-item { min-height: 58px; padding: 8px 10px; font-size: 15.5px; background: rgba(255, 255, 255, .04); margin-bottom: 4px; }
    .sb-icon { width: 38px; height: 38px; border-radius: 10px; }
    .sb-sub { min-height: 46px; font-size: 15px; }

    .only-mobile { display: inline-flex !important; }
    .only-desktop { display: none !important; }
}

@media (max-width: 720px) {
    .topbar { flex-wrap: wrap; padding: 6px 10px; gap: 6px; }
    .topbar-inner { display: contents; }
    .topbar-actions { order: 1; }
    .topbar-menu { order: 0; }
    .ctx { order: 2; flex: 1 1 100%; gap: 6px; flex-wrap: nowrap; }
    .ctx-period { flex: none; }
    .ctx-chip { padding: 0 8px; font-size: 13px; gap: 6px; }
    .ctx-arrow { width: 28px; }
    .ctx-org { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* ═════════════ Главная ═════════════ */
.dash {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 16px;
    align-items: start;
}

.dash-main, .dash-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.kpi-row {
    display: grid;
    /* Карточка не уже 230px: при нехватке места — два ряда, на телефоне — одна колонка */
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}

.kpi-row.three {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-bottom: 16px;
}

.dash-row {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.dash-row.wide-left {
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
}

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

.dash-row.three {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr);
}

/* Боковая колонка (последние операции, события) — только когда основной области хватает ширины */
@media (max-width: 1680px) {
    .dash {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1100px) {
    .dash-row.wide-left, .dash-row.three, .dash-row.two {
        grid-template-columns: 1fr;
    }

}

.card {
    background: #fff;
    border: 1px solid #E6EAF0;
    border-radius: 12px;
    padding: 16px 18px;
    min-width: 0;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.card-head h3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: #1F2A3D;
}

.card-hint {
    font-weight: 400;
    font-size: 12px;
    color: #8a929c;
    margin-left: 6px;
}

.card-link {
    font-size: 13px;
    color: #2F6FED;
    text-decoration: none;
}

.empty {
    color: #8a929c;
    padding: 28px 8px;
    text-align: center;
    font-size: 14px;
}

/* Карточки показателей */
.dkpi {
    background: #fff;
    border: 1px solid #E6EAF0;
    border-radius: 12px;
    padding: 16px 18px;
}

.dkpi-head {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4A5568;
    font-size: 14px;
}

.dkpi-icon, .recent-icon, .tile-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 10px;
    flex: none;
}

.tone-green { background: #E3F5EC; color: #1F9D5B; }
.tone-red { background: #FDE8E8; color: #E5484D; }
.tone-blue { background: #E6EEFE; color: #2F6FED; }
.tone-purple { background: #F1E8FD; color: #8B3FD9; }
.tone-orange { background: #FEF0E1; color: #E07B12; }
.tone-gray { background: #EEF1F5; color: #5F6B7A; }

.dkpi-value {
    font-size: 26px;
    font-weight: 600;
    margin: 12px 0 4px;
    font-variant-numeric: tabular-nums;
    color: #1F2A3D;
    white-space: nowrap;
}

.dkpi-change {
    font-size: 14px;
    font-weight: 500;
}

.dkpi-change.good { color: #1F9D5B; }
.dkpi-change.bad { color: #E5484D; }

.dkpi-note {
    font-size: 13px;
    color: #8a929c;
}

/* Последние операции */
.recent-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F0F2F6;
}

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

.recent-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
}

.recent-body {
    flex: 1;
    min-width: 0;
}

.recent-title {
    font-size: 14px;
    font-weight: 500;
    color: #1F2A3D;
}

.recent-sub {
    font-size: 13px;
    color: #6B778A;
}

.recent-date {
    font-size: 12px;
    color: #9AA3AF;
    margin-top: 2px;
}

.recent-amount {
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}

/* Уведомления */
.notice {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid #F0F2F6;
}

.notice:last-child {
    border-bottom: 0;
}

.notice.no-link {
    cursor: default;
}

.notice:not(.no-link):hover .notice-title {
    color: #2F6FED;
}

.notice-icon {
    display: inline-flex;
    padding-top: 1px;
}

.level-error { color: #E5484D; }
.level-warning { color: #F0A202; }
.level-info { color: #2F6FED; }
.level-success { color: #1F9D5B; }

.notice-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.notice-title {
    font-size: 14px;
    font-weight: 500;
    color: #1F2A3D;
}

.notice-text {
    font-size: 13px;
    color: #6B778A;
}

.notice-when {
    font-size: 12px;
    color: #9AA3AF;
    margin-top: 2px;
}

/* Мини-таблицы */
.mini-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    table-layout: fixed;
}

.mini-table th {
    text-align: left;
    font-weight: 500;
    color: #8a929c;
    font-size: 12px;
    padding: 6px 4px;
    border-bottom: 1px solid #EEF1F5;
}

.mini-table td {
    padding: 8px 4px;
    border-bottom: 1px solid #F3F5F8;
}

.mini-table th:first-child, .mini-table td:first-child {
    width: 50%;
}

.mini-table .group-row td {
    font-weight: 600;
    background: #F8FAFC;
}

.mini-table .total-row td {
    font-weight: 700;
    background: #EEF3F9;
}

.mini-table .indent {
    padding-left: 20px;
    color: #4A5568;
}

.mini-table tr.clickable {
    cursor: pointer;
}

.mini-table tr.clickable:hover td {
    background: #F4F8FD;
}

/* ═════════════ Графики ═════════════ */
.chart-svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.chart-grid {
    stroke: #EEF1F5;
    stroke-width: 1;
}

.chart-zero {
    stroke: #C9D1DC;
    stroke-width: 1;
}

.chart-box { width: 100%; min-width: 0; }

.chart-axis {
    fill: #4F5B6E;
    font-size: 13px;
}

.chart-value {
    fill: #4A5568;
    font-size: 12px;
}

.chart-hit {
    cursor: crosshair;
}

.chart-hit:hover {
    fill: rgba(47, 111, 237, .15);
}

.chart-legend {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    font-size: 12.5px;
    color: #4A5568;
}

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

.donut {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.donut-svg {
    flex: none;
}

.donut-center {
    font-size: 17px;
    font-weight: 600;
    fill: #1F2A3D;
}

.donut-sub {
    font-size: 11px;
    fill: #8A929C;
}

.donut-legend {
    flex: 1;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.donut-legend-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
}

.donut-legend-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #4A5568;
}

.donut-legend-pct {
    font-variant-numeric: tabular-nums;
    color: #1F2A3D;
    font-weight: 500;
}

/* ═════════════ Плитки (настройки, отчеты) ═════════════ */
.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.tile {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #fff;
    border: 1px solid #E6EAF0;
    border-radius: 12px;
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: box-shadow .15s, border-color .15s;
}

.tile:hover {
    border-color: #C7D6F5;
    box-shadow: 0 4px 16px rgba(31, 42, 61, .06);
}

.tile-title {
    font-size: 15px;
    font-weight: 600;
    color: #1F2A3D;
}

.tile-text {
    font-size: 13px;
    color: #6B778A;
}

.color-pick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.color-swatch {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 0 0 1px #d5dbe4;
    cursor: pointer;
}

.color-swatch.active {
    box-shadow: 0 0 0 2px #1F2A3D;
}

/* ═════════════ Трекер задач ═════════════ */
.tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid #E6EAF0;
}

.tab {
    border: 0;
    background: transparent;
    padding: 8px 2px 10px;
    font-size: 14px;
    color: #6B778A;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.tab.active {
    color: #2F6FED;
    font-weight: 600;
    border-bottom-color: #2F6FED;
}

.task-search {
    max-width: 260px;
}

.task-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.task-table th {
    text-align: left;
    font-weight: 500;
    color: #6B778A;
    font-size: 12.5px;
    padding: 10px 8px;
    border-bottom: 1px solid #EEF1F5;
}

.task-table td {
    padding: 10px 8px;
    border-bottom: 1px solid #F3F5F8;
    vertical-align: middle;
}

.task-table tbody tr {
    cursor: pointer;
}

.task-table tbody tr:hover td {
    background: #F7FAFE;
}

.task-title {
    color: #1F2A3D;
    font-weight: 500;
}

.task-check {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #22A06B;
}

.pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.prio-high { background: #FDE8E8; color: #D12E34; }
.prio-medium { background: #FEF0E1; color: #C2680C; }
.prio-low { background: #E3F5EC; color: #1A8A4F; }

.st-overdue { background: #FDE8E8; color: #D12E34; }
.st-progress { background: #E6EEFE; color: #2F6FED; }
.st-planned { background: #EEF1F5; color: #5F6B7A; }
.st-done { background: #E3F5EC; color: #1A8A4F; }
.st-cancelled { background: #EEF1F5; color: #9AA3AF; text-decoration: line-through; }

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    margin-right: 8px;
    vertical-align: middle;
}

.task-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    font-size: 13px;
}

.progress {
    height: 6px;
    background: #EEF1F5;
    border-radius: 99px;
    margin-top: 10px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    border-radius: 99px;
}

.tone-bar-green { background: #22A06B; }
.tone-bar-blue { background: #2F6FED; }
.tone-bar-red { background: #E5484D; }

.link-btn {
    border: 0;
    background: transparent;
    color: #2F6FED;
    font-size: 13px;
    cursor: pointer;
    padding: 0;
}

/* Календарь задач */
.tcal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

.tcal-nav {
    border: 0;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: #4A5568;
    padding: 2px 8px;
    border-radius: 6px;
}

.tcal-nav:hover {
    background: #F1F4F9;
}

.tcal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    text-align: center;
}

.tcal-wd {
    font-size: 11.5px;
    color: #8A929C;
    padding: 4px 0;
}

.tcal-day {
    border: 0;
    background: transparent;
    border-radius: 8px;
    padding: 5px 0 3px;
    font-size: 13px;
    color: #1F2A3D;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 38px;
}

.tcal-day:hover {
    background: #F1F4F9;
}

.tcal-day.other {
    color: #B6BEC9;
}

.tcal-day.today span:first-child {
    background: #2F6FED;
    color: #fff;
    border-radius: 6px;
    padding: 1px 6px;
}

.tcal-day.selected {
    box-shadow: inset 0 0 0 1.5px #2F6FED;
}

.tcal-dots {
    display: flex;
    gap: 2px;
    height: 6px;
}

.dot.small {
    width: 5px;
    height: 5px;
}

/* ───────────── Проваливание из цифр ───────────── */
.dkpi-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.dkpi-link:hover {
    border-color: #2F6FED;
    box-shadow: 0 2px 10px rgba(47, 111, 237, .12);
}
.dkpi-go { margin-left: auto; color: #9AA3AF; }
.dkpi-badge {
    margin-left: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}
.dkpi-badge + .dkpi-go { margin-left: 4px; }
.dkpi-badge.ok { background: #E3F5EC; color: #1A8A4F; }
.dkpi-badge.warn { background: #FEF0E1; color: #C2680C; }
.dkpi-badge.error { background: #FDE8E8; color: #D12E34; }
.dkpi-badge.muted { background: #EEF1F5; color: #5F6B7A; }

.chart-click { cursor: pointer; }
.chart-click:hover { opacity: .85; }
.clickable { cursor: pointer; }
.recent-row.clickable:hover, .donut-legend-row.clickable:hover { background: #F4F6FA; border-radius: 6px; }
.chart-note { font-size: 12px; color: #8A94A6; margin-top: 4px; }
.small { font-size: 12px; }

.report-cell-link { cursor: pointer; }
.report-cell-link:hover { color: #2F6FED; text-decoration: underline; background: #F4F8FF; }

/* Переключатель периода */
.seg { display: inline-flex; border: 1px solid #DDE3EC; border-radius: 8px; overflow: hidden; }
.seg button {
    border: 0;
    background: #fff;
    padding: 4px 12px;
    font-size: 13px;
    color: #4A5568;
    cursor: pointer;
    font-family: inherit;
}
.seg button + button { border-left: 1px solid #DDE3EC; }
.seg button.on { background: #2F6FED; color: #fff; }

/* Подсказка на линейном графике */
.lc-hover .lc-tip { opacity: 0; pointer-events: none; transition: opacity .08s; }
.lc-hover:hover .lc-tip { opacity: 1; }
.lc-cursor { stroke: #9AA3AF; stroke-width: 1; stroke-dasharray: 3 3; }
.lc-tip-box { fill: #fff; stroke: #DDE3EC; filter: drop-shadow(0 2px 6px rgba(20, 33, 61, .12)); }
.lc-tip-title { font-size: 13px; font-weight: 600; fill: #1F2A3D; }
.lc-tip-text { font-size: 12.5px; fill: #4A5568; }

/* ───────────── Сверка ───────────── */
.pill-green { background: #E3F5EC; color: #1A8A4F; }
.pill-red { background: #FDE8E8; color: #D12E34; }
.pill-orange { background: #FEF0E1; color: #C2680C; }
.pill-blue { background: #E6EEFE; color: #2F6FED; }
.pill-gray { background: #EEF1F5; color: #5F6B7A; }

.recon-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.recon-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.recon-actions .recon-reason { flex: 1 1 320px; min-width: 260px; max-width: 520px; }
.recon-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1100px) { .recon-grid { grid-template-columns: 1fr; } }
.recon-list { max-height: 520px; overflow-y: auto; }
.recon-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 8px 10px;
    border-bottom: 1px solid #EEF1F5;
    border-left: 3px solid transparent;
}
.recon-row.clickable:hover { background: #F7F9FC; }
.recon-row.selected { background: #EAF1FF; border-left-color: #2F6FED; }
.recon-main { flex: 1; min-width: 0; }
.recon-top { display: flex; gap: 8px; align-items: baseline; }
.recon-date { font-variant-numeric: tabular-nums; color: #5F6B7A; white-space: nowrap; }
.recon-amount { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 500; }
.recon-row .pill { margin-left: 6px; padding: 1px 8px; font-size: 11px; }
.recon-balances td, .recon-balances th { white-space: nowrap; }

.card.attention { border-color: #F5C9A3; background: #FFFBF6; }

.recon-state { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 10px; margin: 4px 0 10px; font-size: 14px; }
.recon-state.none { background: #EEF1F5; color: #4A5568; }
.recon-state.ok { background: #E3F5EC; color: #1A8A4F; }
.recon-state.bad { background: #FEF0E1; color: #9A4A06; }

/* ───────────── Пакет B: главная ───────────── */
.dkpi { min-width: 0; }
.dkpi-title { min-width: 0; line-height: 1.25; }
.dkpi-status { margin-top: 8px; }
.dkpi-status .dkpi-badge { margin-left: 0; }
.dkpi-value { font-size: clamp(20px, 1.9vw, 26px); overflow: hidden; text-overflow: ellipsis; }
.dkpi-change.neutral { color: #4A5568; }
.dash-asof {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    font-size: 13px; color: #4A5568; margin-top: -6px;
}
.dash-asof .muted { color: #8A94A6; }
.attention-card { border-color: #F5C9A3; background: #FFFBF6; }
.attention-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); column-gap: 24px; }
.attention-list .notice:last-child { border-bottom: 1px solid #F0F2F6; }

/* Телефон: компактная шапка, без горизонтальной прокрутки */
@media (max-width: 600px) {
    .main-inner { padding-left: 12px !important; padding-right: 12px !important; }
    .user-name, .user-chip .mud-icon-root { display: none; }
    .card { padding: 14px; }
    .dkpi { padding: 14px; }
    .dkpi-value { font-size: 24px; }
    .card-head .seg button { padding: 4px 9px; }
    .page-header .mud-typography-h5 { font-size: 1.25rem; }
}

/* Подсказки графиков: касание и клавиатура */
.lc-hover.on .lc-tip, .lc-hover:focus .lc-tip, .lc-hover:focus-visible .lc-tip { opacity: 1; }
.lc-hover:focus { outline: none; }
.lc-hover:focus-visible > rect:first-child { fill: rgba(47, 111, 237, .06); }
.chart-click:focus-visible, .dkpi-link:focus-visible, .clickable:focus-visible, .notice:focus-visible {
    outline: 2px solid #2F6FED; outline-offset: 2px;
}

/* Таблица остатков сверки: группы «Банк» / «1С» */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.recon-balances { table-layout: fixed; min-width: 1060px; }
.recon-balances col.c-acc { width: 220px; }
.recon-balances col.c-date { width: 92px; }
.recon-balances col.c-num { width: 118px; }
.recon-balances col.c-state { width: 112px; }
.recon-balances td:first-child div { overflow: hidden; text-overflow: ellipsis; }
.recon-balances th.grp { text-align: center; font-weight: 600; border-bottom: 1px solid #E6EAF0; }
.recon-balances th.grp-bank { background: #F4F8FF; }
.recon-balances th.grp-ledger { background: #F7F4FF; }
.recon-balances .grp-start { border-left: 1px solid #E6EAF0; padding-left: 10px; }

/* Платежный календарь: итог дня */
tr.day-total td { background: #F7F9FC; border-bottom: 2px solid #E6EAF0 !important; font-size: 13px; }
tr.day-total.day-negative td { background: #fdecec; }

/* Трекер: компактные показатели и сворачиваемая аналитика */
.kpi-compact .dkpi { padding: 10px 14px; }
.kpi-compact .dkpi-icon { width: 32px; height: 32px; border-radius: 8px; }
.kpi-compact .dkpi-value { font-size: 20px; margin: 6px 0 2px; }
.kpi-compact .dkpi-note, .kpi-compact .dkpi-change { font-size: 12px; }
.analytics-card { padding: 0; }
.analytics-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: none; border: 0; padding: 12px 18px; cursor: pointer;
    font: inherit; font-size: 14px; font-weight: 500; color: #1F2A3D; text-align: left;
}
.analytics-toggle:hover { background: #F7F9FC; border-radius: 12px; }
.analytics-toggle:focus-visible { outline: 2px solid #2F6FED; outline-offset: -2px; }

/* Загрузка выписок: зона перетаскивания и итог */
.drop-zone {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 26px 16px; text-align: center;
    border: 2px dashed #C9D3E3; border-radius: 12px; background: #F8FAFD; transition: border-color .15s, background .15s;
}
.drop-zone:hover, .drop-zone.over { border-color: #2F6FED; background: #EEF4FF; }
.drop-zone:focus-within { border-color: #2F6FED; }
.drop-zone.busy { opacity: .8; }
.drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-icon { color: #2F6FED; }
.drop-title { font-size: 15px; font-weight: 500; color: #1F2A3D; }
.drop-link { color: #2F6FED; text-decoration: underline; }
.drop-hint { font-size: 13px; color: #6B778A; }
.drop-progress { width: 260px; margin-top: 6px; }
.import-result { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.import-result.ok { border-color: #BFE5D0; background: #F3FBF7; color: #1A8A4F; }
.import-result.warn { border-color: #F5C9A3; background: #FFFBF6; color: #C2680C; }
.import-result.bad { border-color: #F3B8BA; background: #FFF6F6; color: #D12E34; }
.import-result-body { flex: 1 1 260px; min-width: 0; color: #1F2A3D; }
.import-result-title { font-weight: 600; font-size: 14px; }
.import-result-text { font-size: 13px; color: #5F6B7A; }
.import-result-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Обычный регистр в кнопках и вкладках */
.mud-tab, .mud-button-root { text-transform: none !important; }

/* KPI главной: 4 в ряд на широкой колонке, 2 × 2 на средней, 1 на телефоне (по ширине колонки, а не окна) */
.dash-main { container-type: inline-size; }
.dash-main > .kpi-row:not(.three) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@container (max-width: 1040px) { .dash-main > .kpi-row:not(.three) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (max-width: 520px) { .dash-main > .kpi-row:not(.three) { grid-template-columns: 1fr; } }

/* Главная: выбор периода */
.period-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -4px 0 14px; }
.period-bar .seg button { padding: 6px 14px; font-size: 13.5px; }
.period-date { max-width: 170px; }
.period-label { font-size: 13px; color: #6B778A; }
@media (max-width: 600px) {
    .period-bar .seg { width: 100%; overflow-x: auto; }
    .period-bar .seg button { flex: 1 0 auto; padding: 6px 10px; }
    .period-date { max-width: none; flex: 1 1 140px; }
}

/* Сравнение «было / стало» при конфликте повторного разбора */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-title { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: #1F2A3D; }
.compare-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; border: 1px solid #E6EAF0; border-radius: 8px; background: #fff; }
.compare-list li { padding: 6px 10px; border-bottom: 1px solid #F0F2F6; font-size: 13px; font-variant-numeric: tabular-nums; }
.compare-list li:last-child { border-bottom: 0; }
.compare-list li.has-work { background: #FFF6EC; }

.danger-card { border-color: #F3B8BA; background: #FFF8F8; }

/* Круговая диаграмма с одним сектором — строкой */
.donut-single { display: flex; align-items: baseline; gap: 10px; padding: 14px 8px; border-radius: 8px; flex-wrap: wrap; }
.donut-single.clickable:hover { background: #F4F6FA; }
.donut-single-name { font-weight: 500; color: #1F2A3D; overflow-wrap: anywhere; }
.donut-single-sum { margin-left: auto; font-variant-numeric: tabular-nums; color: #4A5568; white-space: nowrap; }

/* Главная: предупреждение о полноте прибыли, читаемые списки */
.profit-warning {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    padding: 8px 12px; margin-bottom: 10px; border-radius: 8px;
    background: #FFF6EC; color: #8A4B08; font-size: 13px;
}
.profit-warning a { margin-left: auto; color: #2F6FED; text-decoration: none; font-weight: 500; }
.clamp-2 {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; overflow-wrap: anywhere; line-height: 1.3;
}
.mini-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.notice-text { overflow-wrap: anywhere; }
.period-bar .period-label { font-size: 15px; font-weight: 600; color: #1F2A3D; min-width: 150px; text-align: center; }

/* ═════════════ Отчёт по операциям (ТЗ v1.4, раздел IV) ═════════════ */
.ops-drill {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    padding: 8px 12px; margin-bottom: 10px; border-radius: 10px; background: #EEF4FF; font-size: 13px;
}
.ops-drill-title { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: #1E40AF; }
.ops-drill-all { margin-left: auto; color: #2F6FED; }
.chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px;
    border-radius: 999px; background: #fff; border: 1px solid #C7D7F5; color: #1F2A3D; font-size: 12.5px;
}
.chip.warn { border-color: #F5C9A3; background: #FFF7EE; }
.chip button { border: 0; background: transparent; cursor: pointer; color: #6B778A; width: 22px; height: 22px; border-radius: 50%; }
.chip button:hover { background: #EEF1F5; }

.ops-totals { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 13.5px; margin: 0 2px 10px; }
.ops-totals .muted { font-size: 12px; }
.ops-bulk {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 10px;
    background: #fff; border: 1px solid #C7D7F5; border-radius: 12px;
}

.ops-card { background: #fff; border: 1px solid #E3E8F0; border-radius: 14px; overflow: hidden; }
.ops-card.loading { opacity: .65; transition: opacity .2s; }
.ops-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
.ops { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13.5px; min-width: 1100px; }
.ops th, .ops td { padding: 8px 10px; border-bottom: 1px solid #EEF1F5; text-align: left; vertical-align: middle; background: #fff; }
.ops thead th { font-size: 12.5px; font-weight: 600; color: #3A465A; white-space: nowrap; }
.ops thead tr:first-child th { padding-top: 10px; padding-bottom: 4px; border-bottom: 0; }
.ops-filters th { padding-top: 4px; padding-bottom: 10px; font-weight: 400; }
.ops tbody tr { cursor: pointer; }
.ops tbody tr:hover td { background: #F7F9FD; }
.ops tbody tr.on td { background: #EEF4FF; }
.ops tbody tr.empty td { cursor: default; text-align: center; color: #6B778A; padding: 28px 12px; }

/* Закреплены ровно три первые колонки; граница — после «Тип» */
.ops .fix { position: sticky; z-index: 2; }
.ops .fix1 { left: 0; width: 70px; min-width: 70px; max-width: 70px; }
.ops .fix2 { left: 70px; width: 96px; min-width: 96px; max-width: 96px; }
.ops .fix3 { left: 166px; width: 54px; min-width: 54px; max-width: 54px; box-shadow: inset -1px 0 0 #E3E8F0, 6px 0 8px -6px rgba(15, 23, 42, .18); }
.ops td.c-doc { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ops td.c-date { white-space: nowrap; line-height: 1.25; }
.ops td.c-date .muted { font-size: 12px; }
.ops .c-kind { text-align: center; }
.ops .c-sum { width: 140px; white-space: nowrap; text-align: right; }
.ops td.c-sum { font-weight: 600; }
.ops .c-name { width: 24%; max-width: 280px; }
.ops .c-cp { width: 16%; max-width: 200px; }
.ops .c-com { width: 15%; max-width: 200px; }
.ops .c-st { width: 118px; white-space: nowrap; }
.ops .c-act { width: 70px; white-space: nowrap; text-align: right; }
.ops .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.ops td.c-name, .ops td.c-cp, .ops td.c-com { max-width: 0; }
.ops .sub { font-size: 12px; line-height: 1.3; }
.warn-text { color: #C2410C; }
.amt-neutral { color: #2F6FED; }

.th-sort {
    display: inline-flex; align-items: center; gap: 2px; border: 0; background: transparent; padding: 0;
    font: inherit; font-weight: 600; color: inherit; cursor: pointer; white-space: nowrap;
}
.th-sort .mud-icon-root { font-size: 16px; color: #A0AABB; }
.th-sort.on .mud-icon-root { color: #2F6FED; }
.c-sum .th-sort { flex-direction: row-reverse; }

.f-in {
    width: 100%; height: 32px; box-sizing: border-box; padding: 0 8px; border: 1px solid #DDE3EC; border-radius: 8px;
    font: inherit; font-size: 13px; background: #fff; color: #1F2A3D; min-width: 0;
}
.f-in:focus { outline: none; border-color: #2F6FED; box-shadow: 0 0 0 2px rgba(47, 111, 237, .15); }
.f-btn { cursor: pointer; text-align: left; }
.f-btn.on { border-color: #2F6FED; color: #2F6FED; font-weight: 600; }
.f-range { display: flex; gap: 4px; }
.f-kind { position: relative; }
input[type="date"].f-in { padding: 0 4px; font-size: 12px; }

.ops-pop { z-index: 1400 !important; }
.ops-pop-inner { padding: 8px; min-width: 240px; }
.kind-opt { display: flex; align-items: center; gap: 10px; padding: 6px 6px; border-radius: 8px; cursor: pointer; font-size: 14px; min-height: 36px; }
.kind-opt:hover { background: #F5F7FB; }
.kind-opt input { width: 18px; height: 18px; }
.ops-pop-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 6px; }

.opk { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; flex: none; }
.opk .mud-icon-root { font-size: 19px; }
.opk-in { background: #E3F5EC; color: #15803D; }
.opk-out { background: #FDE8E8; color: #DC2626; }
.opk-tr { background: #E5EEFF; color: #2F6FED; }
.opk-ig { background: #F1E8FD; color: #7C3AED; }
.opk-other { background: #EEF1F5; color: #64748B; }

.st { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.st-i { font-weight: 700; }
.st-ok { background: #E3F5EC; color: #15803D; }
.st-wait { background: #FFF4E5; color: #C2410C; }
.st-bad { background: #FDE8E8; color: #B91C1C; }
.st-neutral { background: #EEF1F5; color: #4A5568; }

.row-check { width: 17px; height: 17px; vertical-align: middle; cursor: pointer; }
.c-act .mud-menu { vertical-align: middle; }

.ops-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding: 10px 14px; border-top: 1px solid #EEF1F5; font-size: 13.5px; }
.pager-size { display: inline-flex; align-items: center; gap: 8px; }
.pager-size select { height: 34px; border: 1px solid #DDE3EC; border-radius: 8px; padding: 0 8px; font: inherit; background: #fff; }
.pager-pages { display: flex; align-items: center; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.pg {
    min-width: 36px; height: 36px; padding: 0 8px; border: 1px solid #DDE3EC; border-radius: 8px; background: #fff;
    font: inherit; cursor: pointer; color: #1F2A3D;
}
.pg:hover:not(:disabled) { background: #F5F7FB; }
.pg.on { background: #2F6FED; border-color: #2F6FED; color: #fff; font-weight: 600; }
.pg:disabled { opacity: .35; cursor: default; }
.pg-gap { padding: 0 4px; color: #6B778A; }

.ops-extra { margin-top: 12px; background: #fff; border: 1px solid #E3E8F0; border-radius: 14px; }
.ops-extra-head {
    display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 14px; border: 0; background: transparent;
    font: inherit; font-weight: 600; font-size: 15px; cursor: pointer; color: #1F2A3D; text-align: left;
}
.ops-extra-head .badge { background: #2F6FED; color: #fff; border-radius: 999px; font-size: 12px; padding: 1px 8px; }
.ops-extra-head .ml-auto { margin-left: auto; }
.ops-extra-body {
    display: grid; grid-template-columns: minmax(180px, 260px) minmax(180px, 260px) auto auto; gap: 10px 16px;
    align-items: center; padding: 0 14px 14px; border-top: 1px solid #EEF1F5; padding-top: 12px;
}
.ops-extra-body > .muted { grid-column: 1 / -1; }
.ops-extra-actions { display: flex; gap: 8px; justify-content: flex-end; }

.op-card-title { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; flex-wrap: wrap; }
.op-card-title .muted { font-size: 14px; font-weight: 400; }
.op-card-grid { display: grid; grid-template-columns: 140px 1fr; gap: 6px 14px; margin: 0 0 12px; font-size: 14px; }
.op-card-grid dt { color: #6B778A; }
.op-card-grid dd { margin: 0; overflow-wrap: anywhere; }
.op-card-h { margin: 14px 0 6px; font-size: 14px; font-weight: 600; }
.op-src { padding: 8px 10px; border: 1px solid #EEF1F5; border-radius: 10px; margin-bottom: 6px; font-size: 13.5px; }
.op-card-edit { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; align-items: center; }

@media (max-width: 720px) {
    .ops { min-width: 1060px; font-size: 13px; }
    .ops .fix1 { width: 58px; min-width: 58px; max-width: 58px; }
    .ops .fix2 { left: 58px; width: 84px; min-width: 84px; max-width: 84px; }
    .ops .fix3 { left: 142px; width: 46px; min-width: 46px; max-width: 46px; }
    .ops th, .ops td { padding: 7px 6px; }
    .ops-extra-body { grid-template-columns: 1fr; }
    .ops-extra-actions { justify-content: stretch; }
    .ops-extra-actions .mud-button-root { flex: 1; }
    .pager-pages { margin-left: 0; width: 100%; justify-content: center; }
    .op-card-grid { grid-template-columns: 1fr; gap: 0; }
    .op-card-grid dd { margin-bottom: 8px; }
    .op-card-edit { grid-template-columns: 1fr; }
}

/* ═════════════ Главная (ТЗ v1.4, раздел II) ═════════════ */
.home { display: flex; flex-direction: column; gap: 14px; }
.home.loading { opacity: .7; transition: opacity .2s; }
.hkpi-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.hkpi {
    position: relative; display: flex; gap: 12px; align-items: flex-start; min-width: 0;
    padding: 16px 16px 14px; background: #fff; border: 1px solid #E3E8F0; border-radius: 14px;
    color: inherit; text-decoration: none; overflow: hidden; min-height: 112px;
}
.hkpi:hover { border-color: #C7D7F5; box-shadow: 0 2px 10px rgba(15, 23, 42, .06); }
.hkpi:focus-visible { outline: 2px solid #2F6FED; outline-offset: 2px; }
.hkpi-icon { flex: none; width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }
.tone-red { background: #FDE8E8; color: #DC2626; }
.hkpi-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; z-index: 1; }
.hkpi-title { font-size: 13.5px; color: #3A465A; font-weight: 500; }
.hkpi-value { font-size: 23px; font-weight: 700; color: #0F1E3D; white-space: nowrap; letter-spacing: -.01em; }
.hkpi-spark { position: absolute; right: 12px; bottom: 12px; width: 42%; height: 40px; }

.delta { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.delta.good { color: #15803D; }
.delta.bad { color: #DC2626; }
.delta.neutral { color: #4A5568; }
.delta.muted { color: #A0AABB; font-weight: 400; }

.home-params { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hp-select {
    height: 40px; padding: 0 12px; border: 1px solid #DDE3EC; border-radius: 10px; background: #fff;
    font: inherit; font-size: 14px; color: #1F2A3D; min-width: 190px;
}
.hp-select.wide { min-width: 300px; }
.hp-select:disabled { color: #A0AABB; background: #F5F7FB; }
.hp-note { margin-left: auto; font-size: 12.5px; color: #6B778A; }

.home-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.home-three { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .8fr); gap: 14px; }
.home .card { min-width: 0; }

.htabs { display: flex; gap: 4px; padding: 4px; background: #F1F4F9; border-radius: 12px; margin-bottom: 12px; }
.htabs button {
    flex: 1; border: 0; background: transparent; border-radius: 9px; padding: 9px 8px; font: inherit; font-size: 13.5px;
    color: #3A465A; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.htabs button.on { background: #2F6FED; color: #fff; font-weight: 600; }
.htabs button:focus-visible { outline: 2px solid #2F6FED; outline-offset: 1px; }

.hflow-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.hflow-sum { font-size: 30px; font-weight: 700; color: #0F1E3D; letter-spacing: -.01em; }
.hflow-sum.neg { color: #DC2626; }
.hflow-delta { display: inline-flex; flex-direction: column; gap: 0; font-size: 12.5px; }
.hflow-legend { display: flex; gap: 18px; font-size: 12.5px; color: #4A5568; margin-top: 2px; }
.hflow-legend i { display: inline-block; width: 22px; margin-right: 6px; vertical-align: middle; border-top-width: 2.5px; }
.lg-solid { border-top-style: solid; }
.lg-dash { border-top-style: dashed; }
.chart-zero { stroke: #94A3B8; stroke-width: 1; }
.fc-sel-line { stroke: #2F6FED; stroke-width: 1; stroke-dasharray: 3 3; }
.hflow-day { margin-top: 10px; padding: 10px 12px; background: #F7F9FD; border-radius: 10px; font-size: 13.5px; }
.hflow-day-date { font-weight: 600; margin-bottom: 6px; }
.hd-grid { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; }
.hd-grid b { text-align: right; font-weight: 600; white-space: nowrap; }
.hd-actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }
.hd-actions a { color: #2F6FED; font-weight: 500; }

.home-empty { padding: 26px 8px; text-align: center; color: #6B778A; font-size: 13.5px; }
.home-note { font-size: 12.5px; color: #6B778A; margin-top: 8px; line-height: 1.45; }
.home-note a { color: #C2410C; }

.hstruct-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.hstruct-body > .home-note { grid-column: 1 / -1; }
.htable { width: 100%; border-collapse: collapse; font-size: 13px; }
.htable th { font-size: 12px; color: #6B778A; font-weight: 500; text-align: left; padding: 4px 6px; border-bottom: 1px solid #EEF1F5; }
.htable td { padding: 7px 6px; border-bottom: 1px solid #F3F5F9; }
.htable .num { text-align: right; white-space: nowrap; }
.htable tfoot td { font-weight: 600; border-bottom: 0; }
.htable tr.clickable { cursor: pointer; }
.htable tr.clickable:hover td { background: #F7F9FD; }

.hcat {
    display: grid; grid-template-columns: minmax(80px, 1.2fr) minmax(50px, 1fr) auto 40px 64px; gap: 8px; align-items: center;
    padding: 8px 2px; border-bottom: 1px solid #F3F5F9; color: inherit; text-decoration: none; font-size: 13px;
}
.hcat:hover { background: #F7F9FD; }
.hcat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hcat-bar { height: 10px; background: #EEF1F5; border-radius: 5px; overflow: hidden; }
.hcat-bar i { display: block; height: 100%; border-radius: 5px; opacity: .85; }
.hcat-sum { text-align: right; white-space: nowrap; font-weight: 500; }
.hcat-share { text-align: right; color: #6B778A; }
.hcat-delta { text-align: right; }

.hrecent {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center;
    padding: 7px 2px; border-bottom: 1px solid #F3F5F9; color: inherit; text-decoration: none; font-size: 13px;
}
.hrecent:hover { background: #F7F9FD; }
.hrecent .opk { width: 26px; height: 26px; }
.hrecent-main { display: flex; flex-direction: column; min-width: 0; }
.hrecent-main .ell { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hrecent-side { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }

.hattn { background: #FFFBF3; border-color: #F5DEB3; }
.hattn-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; border-radius: 11px; background: #E5484D; color: #fff; font-size: 12px; margin-left: 6px; vertical-align: middle; }
.hattn-row {
    display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #F3E7D3;
    color: inherit; text-decoration: none;
}
.hattn-row:last-child { border-bottom: 0; }
.hattn-row:hover { background: rgba(255, 255, 255, .7); }
.hattn-icon { flex: none; width: 30px; height: 30px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; }
.hattn-icon.error { background: #E5484D; }
.hattn-icon.warn { background: #F5A524; }
.hattn-icon.ok { background: #22A06B; }
.hattn-text { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 14px; }

@media (max-width: 1280px) {
    .home-three { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .home-three > .hattn { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
    .home-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .hkpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .home-three { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .hkpi { flex-direction: column; gap: 6px; padding: 12px; min-height: 0; }
    .hkpi-icon { width: 36px; height: 36px; border-radius: 10px; }
    .hkpi-value { font-size: 17px; }
    .hkpi-spark { position: static; width: 100%; height: 28px; }
    .home-params { gap: 8px; }
    .hp-select, .hp-select.wide { min-width: 0; flex: 1 1 140px; font-size: 13px; }
    .hp-note { margin-left: 0; flex-basis: 100%; }
    .hflow-sum { font-size: 24px; }
    .hstruct-body { grid-template-columns: 1fr; justify-items: center; }
    .hstruct-body .htable { justify-self: stretch; }
    .htabs button { font-size: 12.5px; padding: 8px 4px; }
    .hcat { grid-template-columns: minmax(70px, 1fr) minmax(40px, .8fr) auto 52px; }
    .hcat-share { display: none; }
}
.chart-click.seg-off { opacity: .35; }
.chart-click.seg-on { filter: drop-shadow(0 0 2px rgba(15, 23, 42, .35)); }
.htable tr.sel td { background: #EEF4FF; }
.bal-org td { background: #F7F9FD; }
.htable td.indent { padding-left: 22px; }
.ctx-note { font-size: 13px; color: #6B778A; }

/* ═════════════ v20: мобильная доработка по браузерной проверке ═════════════ */
/* UI-01: период и компания — каждый в своей строке, название компании сокращается многоточием */
.ctx-org .mud-input-slot, .ctx-org input { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 480px) {
    .ctx { flex-wrap: wrap; }
    .ctx-period { flex: 1 1 100%; }
    .ctx-chip { flex: 1; justify-content: center; }
    .ctx-org { flex: 1 1 100%; width: 100%; }
}
/* UI-02: выбор периода на телефоне — панель по ширине экрана, один месяц, прокрутка внутри, кнопки видны */
.ctx-pop-inner { max-height: calc(100vh - 90px); overflow-y: auto; }
.ctx-pop-actions { position: sticky; bottom: -14px; background: #fff; padding: 8px 0; }
@media (max-width: 600px) {
    .ctx-pop { position: fixed !important; left: 8px !important; right: 8px !important; top: 56px !important;
               width: auto !important; max-width: calc(100vw - 16px) !important; }
    .ctx-pop-inner { max-width: none; padding: 10px; }
    .ctx-range, .ctx-range .mud-picker-container, .ctx-range .mud-picker-calendar-container { width: 100% !important; min-width: 0 !important; }
    .ctx-range .mud-picker-calendar-transition, .ctx-range .mud-picker-calendar { width: 100% !important; }
    .ctx-presets button { flex: 1; }
}
/* UI-04: доля статьи на телефоне — второй строкой под суммой */
@media (max-width: 600px) {
    .hcat { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "name sum delta" "bar bar share"; row-gap: 4px; }
    .hcat-name { grid-area: name; }
    .hcat-bar { grid-area: bar; }
    .hcat-sum { grid-area: sum; }
    .hcat-share { grid-area: share; display: block; font-size: 12px; }
    .hcat-delta { grid-area: delta; }
}
/* UI-05: подписи графика и легенда крупнее и контрастнее */
.hflow-legend { font-size: 13.5px; color: #3A465A; }
.home-note { font-size: 13px; color: #4F5B6E; }
/* UI-06: структура не выходит за карточку — при узкой карточке кольцо над таблицей, длинные статьи переносятся */
.hstruct { container-type: inline-size; }
.hstruct .htable td:first-child { white-space: normal; overflow-wrap: anywhere; }
.hstruct .htable { table-layout: auto; }
@container (max-width: 640px) {
    .hstruct-body { grid-template-columns: minmax(0, 1fr); justify-items: center; }
    .hstruct-body .htable { justify-self: stretch; }
}

/* UI-07: вкладки на узком экране — короткие названия целиком, без обрезания; при нехватке места — перенос */
.htabs .t-short { display: none; }
@media (max-width: 600px) {
    .htabs .t-full { display: none; }
    .htabs .t-short { display: inline; }
    .htabs button { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.2; min-height: 38px; }
}

/* ═════════════ Трекер задач (ТЗ v1.4, раздел V) ═════════════ */
.trk { display: flex; flex-direction: column; gap: 12px; }
.trk-head { display: flex; align-items: center; gap: 8px; }
.trk-month { margin: 0; font-size: 22px; font-weight: 700; color: #0F1E3D; min-width: 170px; text-align: center; }
.trk-nav, .trk-today {
    height: 36px; min-width: 36px; padding: 0 10px; border: 1px solid #DDE3EC; border-radius: 10px; background: #fff;
    font: inherit; cursor: pointer; color: #1F2A3D;
}
.trk-spacer { flex: 1; }
.trk-add {
    width: 44px; height: 44px; border-radius: 50%; border: 0; background: #2F6FED; color: #fff; font-size: 26px; line-height: 1;
    cursor: pointer; box-shadow: 0 4px 12px rgba(47, 111, 237, .35);
}
.trk-add:focus-visible, .trk-nav:focus-visible, .trk-day:focus-visible { outline: 2px solid #2F6FED; outline-offset: 2px; }
.trk-count { font-size: 11px; opacity: .75; margin-left: 2px; }
.trk-main { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.trk-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.trk-dow span { text-align: center; font-size: 12.5px; color: #6B778A; padding: 4px 0; }
.trk-day {
    display: flex; flex-direction: column; align-items: center; gap: 3px; min-height: 72px; padding: 6px 2px;
    border: 0; border-radius: 10px; background: transparent; cursor: pointer; font: inherit; min-width: 0;
}
.trk-day:hover { background: #F5F7FB; }
.trk-day.out { opacity: .4; }
.trk-day.sel { background: #EEF4FF; }
.trk-num { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-weight: 600; }
.trk-day.today .trk-num { background: #2F6FED; color: #fff; }
.trk-dots { display: flex; gap: 3px; min-height: 6px; }
.trk-dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; }
.trk-dot.set { background: #EAB308; }
.trk-dot.overdue { background: #E5484D; }
.trk-dot.done { background: #22A06B; }
.trk-label { font-size: 11px; color: #4A5568; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 2px; }

.trk-item {
    display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; padding: 10px 10px; margin-bottom: 6px;
    border: 0; border-left: 4px solid #CBD5E1; border-radius: 10px; background: #F8FAFD; cursor: pointer; font: inherit;
    color: inherit; text-decoration: none;
}
.trk-item:hover { background: #F1F5FB; }
.trk-item.sel { background: #EEF4FF; }
.trk-item.st-set { border-left-color: #EAB308; }
.trk-item.st-overdue { border-left-color: #E5484D; }
.trk-item.st-done { border-left-color: #22A06B; }
.trk-time { flex: none; width: 52px; font-weight: 600; color: #3A465A; }
.trk-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.trk-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; font-size: 12.5px; }
.trk-status { padding: 2px 8px; border-radius: 8px; font-size: 12.5px; font-weight: 500; }
.trk-status.set { background: #FEF3C7; color: #92400E; }
.trk-status.overdue { background: #FDE8E8; color: #B91C1C; }
.trk-status.done { background: #E3F5EC; color: #15803D; }
.trk-prio.p2 { color: #DC2626; }
.trk-prio.p1 { color: #2F6FED; }
.trk-prio.p0 { color: #64748B; }
.trk-tag { font-size: 11.5px; padding: 1px 6px; border-radius: 6px; background: #EEF1F5; color: #4A5568; }

.trk-filters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.trk-filter { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: #fff; border: 1px solid #E3E8F0; border-radius: 12px; font-size: 12.5px; color: #6B778A; }
.trk-filter select { border: 0; font: inherit; font-size: 14px; color: #1F2A3D; background: transparent; padding: 2px 0; min-width: 0; }

.trk-form { display: flex; flex-direction: column; gap: 10px; }
.trk-locked { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; background: #F5F7FB; border-radius: 10px; }
.trk-when { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.trk-when label, .trk-move label { display: flex; flex-direction: column; gap: 2px; }
.trk-when .f-in, .trk-move .f-in { height: 38px; min-width: 140px; }
.trk-prio-seg { display: flex; width: 100%; }
.trk-prio-seg button { flex: 1; }
.trk-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 4px 10px; max-height: 180px; overflow-y: auto; padding: 4px 0; }
.trk-people label { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.trk-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.trk-desc { white-space: pre-wrap; padding: 8px 10px; background: #F8FAFD; border-radius: 10px; margin-bottom: 8px; }
.trk-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.trk-move { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 10px; background: #F5F7FB; border-radius: 10px; }
.trk-line { font-size: 13.5px; padding: 3px 0; }
.trk-msg { padding: 6px 10px; border-radius: 10px; background: #F8FAFD; margin-bottom: 6px; }
.trk-send { display: flex; gap: 8px; align-items: flex-end; }
.trk-send .mud-input-control { flex: 1; }

@media (max-width: 900px) {
    .trk-main { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
    .trk-month { font-size: 18px; min-width: 0; }
    .trk-today { display: none; }
    .trk-day { min-height: 52px; padding: 4px 0; }
    .trk-num { width: 26px; height: 26px; font-size: 13px; }
    .trk-label { display: none; }
    .trk-filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .trk-filter { padding: 6px 8px; }
    .trk-filter select { font-size: 12.5px; }
}