:root {
    --background: #f3f5f7;
    --surface: #ffffff;
    --surface-muted: #f8fafb;
    --sidebar: #17232d;
    --sidebar-hover: #243541;
    --primary: #2f748c;
    --primary-dark: #245c70;
    --text: #18212a;
    --text-muted: #697785;
    --border: #dfe5e9;
    --warning: #c45b3f;
    --warning-background: #fff4ef;
    --success: #31805c;
    --shadow: 0 8px 24px rgba(23, 35, 45, 0.06);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--background);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

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

.app-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 28px 18px;
    background: var(--sidebar);
    color: #ffffff;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 30px;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: var(--primary);
    font-size: 23px;
    font-weight: 800;
}

.brand-name {
    font-size: 18px;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.brand-subtitle {
    margin-top: 2px;
    color: #9dafba;
    font-size: 12px;
}

.navigation {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.navigation-link {
    padding: 12px 14px;
    border-radius: 9px;
    color: #c2ced6;
    font-size: 14px;
    font-weight: 550;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.navigation-link:hover,
.navigation-link.active {
    background: var(--sidebar-hover);
    color: #ffffff;
}

.navigation-link.active {
    box-shadow: inset 3px 0 0 var(--primary);
}

.sidebar-footer {
    margin-top: auto;
    padding: 14px 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #8798a4;
    font-size: 12px;
}

.main-content {
    min-width: 0;
    padding: 0 34px 40px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 108px;
    border-bottom: 1px solid var(--border);
}

.page-caption {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 13px;
}

.page-title {
    margin: 0;
    font-size: 27px;
    font-weight: 720;
}

.user-block {
    display: flex;
    align-items: center;
    gap: 11px;
}

.user-avatar {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
}

.user-name {
    font-size: 13px;
    font-weight: 650;
}

.user-role {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
}

.dashboard-filter {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    margin: 24px 0 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dashboard-filter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.quick-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.quick-period-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}

.quick-period-link:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.quick-period-link.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.dashboard-period {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 13px;
    text-align: right;
}

.dashboard-filter-form {
    display: grid;
    grid-template-columns:
        150px
        150px
        minmax(160px, 1fr)
        minmax(180px, 1fr)
        auto
        auto;
    align-items: end;
    gap: 12px;
}

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

.dashboard-filter-field label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.dashboard-filter-field input,
.dashboard-filter-field select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.dashboard-filter-field input:focus,
.dashboard-filter-field select:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px
        rgba(47, 116, 140, 0.12);
}

.dashboard-filter-button {
    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dashboard-filter-button:hover {
    background: var(--primary-dark);
}

.dashboard-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.dashboard-filter-reset:hover {
    color: var(--warning);
}

.metric-change {
    margin-right: 4px;
    font-weight: 750;
}

.metric-change.positive {
    color: var(--success);
}

.metric-change.negative {
    color: var(--warning);
}

.dashboard-period {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 13px;
    text-align: right;
}
.metric-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(150px, 1fr));
    gap: 16px;
}

.metric-card {
    min-height: 142px;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.metric-card-warning {
    border-color: #f1cabc;
    background: var(--warning-background);
}

.metric-label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.metric-value {
    margin-top: 12px;
    font-size: 38px;
    font-weight: 730;
    line-height: 1;
}

.metric-note {
    margin-top: 13px;
    color: var(--text-muted);
    font-size: 12px;
}

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

.panel {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 22px;
    border-bottom: 1px solid var(--border);
}

.panel-header h2 {
    margin: 0;
    font-size: 17px;
}

.panel-header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.panel-link {
    color: var(--primary);
    font-size: 13px;
    font-weight: 650;
}

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

.data-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.data-table th,
.data-table td {
    padding: 14px 17px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 13px;
}

.data-table th {
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.data-table tbody tr:hover {
    background: #fafcfd;
}

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

.status-badge {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef2f4;
    color: #53616d;
    font-size: 11px;
    font-weight: 650;
}

.status-analyzed {
    background: #e8f5ee;
    color: var(--success);
}

.status-error {
    background: #fdece7;
    color: var(--warning);
}

.status-transcribed {
    background: #edf4f7;
    color: var(--primary-dark);
}

.attention-list {
    display: flex;
    flex-direction: column;
}

.attention-item {
    display: flex;
    gap: 13px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--border);
}

.attention-item:hover {
    background: var(--surface-muted);
}

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

.attention-icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--warning-background);
    color: var(--warning);
    font-weight: 800;
}

.attention-title {
    font-size: 13px;
    font-weight: 700;
}

.attention-text {
    margin-top: 4px;
    color: #4d5b66;
    font-size: 12px;
    line-height: 1.45;
}

.attention-meta {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 11px;
}

.empty-state,
.empty-panel {
    padding: 30px;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 1180px) {
    .metric-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .content-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-filter-button,
    .dashboard-filter-reset {
        width: 100%;
    }
}

@media (max-width: 760px) {
    /* Мобильный сайдбар на <=768px обрабатывается единым правилом ниже
       (@media max-width: 768px). Здесь убираем устаревшие переопределения
       .app-layout / .sidebar / .navigation, которые конфликтовали с новым
       off-canvas меню и могли приводить к «desktop»-виду после перехода. */

    .brand {
        padding-bottom: 14px;
    }

    .main-content {
        padding: 0 15px 28px;
    }

    .topbar {
        min-height: 88px;
    }

    .user-block {
        display: none;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .metric-card {
        min-height: 125px;
        padding: 17px;
    }

    .metric-value {
        font-size: 32px;
    }
    .dashboard-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-filter-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-filter-field input {
        width: 100%;
        min-width: 0;
    }

    .dashboard-filter-button,
    .dashboard-filter-link {
        justify-content: center;
        width: 100%;
    }

    .dashboard-period {
        text-align: left;
    }
    .dashboard-filter-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-period {
        text-align: left;
    }

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

    .quick-period-link {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 450px) {
    .metric-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-filter-form {
        grid-template-columns: 1fr;
    }
    .dashboard-filter-form {
        grid-template-columns: 1fr;
    }
}

.calls-filter {
    margin: 24px 0 18px;
    padding: 18px;
}

.calls-filter-form {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(150px, 1fr));
    align-items: end;
    gap: 12px;
}

.calls-search-field {
    grid-column: span 2;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 18px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
}

.pagination a {
    color: var(--primary);
    font-weight: 650;
}

.pagination a:hover {
    color: var(--primary-dark);
}

@media (max-width: 1180px) {
    .calls-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .calls-filter-form {
        grid-template-columns: 1fr;
    }

    .calls-search-field {
        grid-column: auto;
    }
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: var(--surface-muted);
}

.call-detail-header {
    margin: 24px 0 18px;
    padding: 22px;
}

.call-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.call-detail-caption {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 12px;
}

.call-detail-heading h2 {
    margin: 0;
    font-size: 22px;
}

.call-detail-meta {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(120px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.call-meta-item {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
}

.call-meta-item span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
}

.call-meta-item strong {
    font-size: 13px;
}

.call-detail-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.call-detail-content {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

.call-analysis-block {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
}

.call-analysis-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
}

.call-analysis-value {
    font-size: 13px;
    line-height: 1.5;
}

.call-facts-list {
    display: flex;
    flex-direction: column;
}

.call-fact-row {
    display: grid;
    grid-template-columns:
        minmax(160px, 0.8fr)
        minmax(0, 1.2fr);
    gap: 18px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
}

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

.call-fact-key {
    color: var(--text-muted);
    font-size: 12px;
}

.call-fact-value {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.transcript-text {
    padding: 22px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
    white-space: normal;
}

@media (max-width: 1180px) {
    .call-detail-meta {
        grid-template-columns:
            repeat(3, minmax(120px, 1fr));
    }
}

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

@media (max-width: 600px) {
    .call-detail-heading {
        flex-direction: column;
    }

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

    .call-detail-content {
        grid-template-columns: 1fr;
    }

    .call-fact-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

.metric-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.metric-card-link:hover {
    border-color: var(--primary);
    box-shadow:
        0 10px 28px
        rgba(23, 35, 45, 0.1);
    transform: translateY(-1px);
}

.table-link {
    color: inherit;
    text-decoration: none;
}

.table-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.attention-item {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.attention-content {
    min-width: 0;
    flex: 1 1 auto;
}

.call-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.call-summary-block {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.call-summary-label {
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.call-summary-value {
    font-size: 14px;
    line-height: 1.55;
}

.call-status-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px;
}

.call-status-item {
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
}

.call-status-item span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
}

.call-status-item strong {
    font-size: 13px;
}

.call-status-positive {
    border-color: #cce6d8;
    background: #f1faf5;
}

.call-status-warning {
    border-color: #f1cabc;
    background: var(--warning-background);
}

.call-status-negative {
    border-color: #efbbb0;
    background: #fff0ec;
}

.fact-state-positive {
    color: var(--success);
    font-weight: 650;
}

.fact-state-warning,
.fact-state-negative {
    color: var(--warning);
    font-weight: 650;
}

.call-evidence-panel {
    margin-bottom: 18px;
}

.call-evidence-list {
    display: flex;
    flex-direction: column;
}

.call-evidence-item {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.call-evidence-item:last-child {
    border-bottom: 0;
}

.call-evidence-item blockquote {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.call-evidence-item p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .call-status-grid {
        grid-template-columns: 1fr;
    }
}

.call-workspace {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);
    grid-template-rows:
        minmax(0, 1fr)
        220px;
    gap: 14px;
    height: calc(100vh - 390px);
    min-height: 470px;
}

.call-workspace-summary,
.call-workspace-facts,
.call-workspace-text {
    min-height: 0;
}

.call-workspace-summary {
    overflow: auto;
}

.call-workspace-facts {
    display: flex;
    flex-direction: column;
}

.call-workspace-text {
    grid-column: 1 / -1;
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.compact-panel-header {
    padding: 14px 16px;
}

.compact-panel-header h2 {
    font-size: 15px;
}

.compact-call-summary .call-summary-block {
    padding: 12px 16px;
}

.compact-call-summary .call-summary-value {
    font-size: 13px;
    line-height: 1.4;
}

.compact-status-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px;
}

.compact-status-grid .call-status-item {
    padding: 10px 11px;
}

.call-facts-scroll {
    min-height: 0;
    overflow-y: auto;
}

.call-facts-scroll .call-fact-row {
    padding: 9px 14px;
}

.call-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--border);
}

.call-tab {
    padding: 8px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.call-tab:hover {
    color: var(--primary);
}

.call-tab.active {
    border-bottom-color: var(--primary);
    color: var(--primary-dark);
}

.call-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    margin-left: 5px;
    border-radius: 999px;
    background: var(--surface-muted);
    font-size: 10px;
}

.call-tab-panel {
    display: none;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

.call-tab-panel.active {
    display: block;
}

.compact-transcript-text {
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.55;
}

.call-workspace-text .call-evidence-item {
    padding: 12px 16px;
}

.call-detail-header {
    margin: 16px 0 14px;
    padding: 16px;
}

.call-detail-meta {
    gap: 9px;
    margin-top: 14px;
}

.call-meta-item {
    padding: 10px 11px;
}

.call-detail-heading h2 {
    font-size: 19px;
}

@media (max-height: 800px) and (min-width: 901px) {
    .topbar {
        min-height: 78px;
    }

    .call-workspace {
        height: calc(100vh - 330px);
        min-height: 410px;
        grid-template-rows:
            minmax(0, 1fr)
            180px;
    }

    .call-detail-header {
        margin-top: 10px;
    }
}

@media (max-width: 900px) {
    .call-workspace {
        display: flex;
        height: auto;
        min-height: 0;
        flex-direction: column;
    }

    .call-workspace-summary,
    .call-workspace-facts,
    .call-workspace-text {
        overflow: visible;
    }

    .call-facts-scroll,
    .call-tab-panel {
        overflow: visible;
    }
}

@media (max-width: 700px) {
    .compact-status-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

.call-compact-header {
    margin: 12px 0;
    padding: 11px 14px;
}

.call-compact-main {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 38px;
    padding-right: 135px;
}

.call-compact-main > div:first-child {
    flex: 0 0 auto;
}

.call-compact-number {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
}

.call-compact-date {
    display: block;
    margin-top: 2px;
    font-size: 16px;
}

.call-compact-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.call-compact-meta > span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
    font-size: 11px;
    font-weight: 600;
}

.call-processing-status.status-analyzed {
    border-color: #cce6d8;
    background: #e8f5ee;
    color: var(--success);
}

.call-processing-status.status-error {
    border-color: #efbbb0;
    background: #fdece7;
    color: var(--warning);
}

.call-processing-status.status-transcribed {
    border-color: #cddfe6;
    background: #edf4f7;
    color: var(--primary-dark);
}

.call-back-link {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    white-space: nowrap;
}


/* ВЕСЬ ЭКРАН ЗВОНКА */

.call-screen-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 0.8fr);
    grid-template-rows:
        minmax(250px, 1.25fr)
        minmax(190px, 0.75fr);
    gap: 12px;
    height: calc(100vh - 315px);
    min-height: 510px;
}

.call-screen-summary,
.call-screen-facts,
.call-screen-evidence,
.call-screen-transcript {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.call-screen-panel-header {
    flex: 0 0 auto;
    padding: 11px 14px;
}

.call-screen-panel-header h2 {
    font-size: 14px;
}

.call-screen-panel-header p {
    margin-top: 3px;
    font-size: 10px;
}

.call-screen-summary-content {
    min-height: 0;
    overflow-y: auto;
}

.call-screen-summary-content .call-summary-block {
    padding: 10px 14px;
}

.call-screen-summary-content .call-summary-label {
    margin-bottom: 4px;
    font-size: 9px;
}

.call-screen-summary-content .call-summary-value {
    font-size: 12px;
    line-height: 1.4;
}

.call-screen-statuses {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 9px 12px;
    border-top: 1px solid var(--border);
}

.call-screen-statuses .call-status-item {
    padding: 8px 9px;
}

.call-screen-statuses .call-status-item span {
    margin-bottom: 4px;
    font-size: 9px;
}

.call-screen-statuses .call-status-item strong {
    font-size: 11px;
}

.call-screen-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
}

.call-screen-facts .call-fact-row {
    grid-template-columns:
        minmax(135px, 0.9fr)
        minmax(0, 1.1fr);
    gap: 12px;
    padding: 7px 12px;
}

.call-screen-facts .call-fact-key,
.call-screen-facts .call-fact-value {
    font-size: 11px;
}

.call-screen-evidence .call-evidence-item {
    padding: 9px 13px;
}

.call-screen-evidence .call-evidence-item blockquote {
    font-size: 11px;
    line-height: 1.4;
}

.call-screen-evidence .call-evidence-item p {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.35;
}

.call-screen-transcript .transcript-text {
    padding: 11px 14px;
    font-size: 11px;
    line-height: 1.5;
}


/* НИЗКАЯ ВЫСОТА ЭКРАНА */

@media (max-height: 850px) and (min-width: 901px) {
    .topbar {
        min-height: 68px;
    }

    .call-compact-header {
        margin: 8px 0;
        padding: 8px 12px;
    }

    .call-screen-layout {
        height: calc(100vh - 260px);
        min-height: 430px;
        grid-template-rows:
            minmax(225px, 1.2fr)
            minmax(165px, 0.8fr);
    }
}


/* ПЛАНШЕТ И МОБИЛЬНЫЙ */

@media (max-width: 900px) {
    .call-compact-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        padding-right: 0;
    }

    .call-back-link {
        position: static;
        transform: none;
    }

    .call-screen-layout {
        display: flex;
        height: auto;
        min-height: 0;
        flex-direction: column;
    }

    .call-screen-scroll,
    .call-screen-summary-content {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 650px) {
    .call-screen-statuses {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}
.call-audio-row {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        auto;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.call-audio-row audio {
    display: block;
    width: 100%;
    height: 32px;
}

.call-audio-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.audio-skip-button {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
    color: var(--text);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.audio-skip-button:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.audio-rate-control {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 10px;
}

.audio-rate-control select {
    height: 30px;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 11px;
}

@media (max-width: 800px) {
    .call-audio-row {
        grid-template-columns: 1fr;
    }

    .call-audio-tools {
        flex-wrap: wrap;
    }
}

.call-review-open {
    min-height: 27px;
    padding: 0 10px;
    border: 1px solid var(--primary);
    border-radius: 7px;
    background: #edf4f7;
    color: var(--primary-dark);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.call-review-open:hover {
    background: var(--primary);
    color: #ffffff;
}

.modal-open {
    overflow: hidden;
}

.review-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.review-modal.active {
    display: flex;
}

.review-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 35, 45, 0.55);
    backdrop-filter: blur(2px);
}

.review-modal-dialog {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow:
        0 24px 70px
        rgba(23, 35, 45, 0.22);
}

.review-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.review-modal-header h2 {
    margin: 0;
    font-size: 17px;
}

.review-modal-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}

.review-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

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

.review-field label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.review-field-control {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

textarea.review-field-control {
    resize: vertical;
}

.review-field-control:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px
        rgba(47, 116, 140, 0.12);
}

.review-field-help {
    color: var(--text-muted);
    font-size: 10px;
}

.review-field-error {
    color: var(--warning);
    font-size: 11px;
}

.review-saved-meta {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 11px;
}

.review-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 4px;
}

.review-primary-button,
.review-secondary-button {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.review-primary-button {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.review-primary-button:hover {
    background: var(--primary-dark);
}

.review-secondary-button {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
}

.review-badge {
    display: inline-flex;
    align-items: center;
    max-width: 190px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: normal;
}

.review-correct {
    background: #e8f5ee;
    color: var(--success);
}

.review-partially_correct {
    background: #fff7e6;
    color: #9a681c;
}

.review-incorrect {
    background: #fdece7;
    color: var(--warning);
}

.review-needs_review {
    background: #edf4f7;
    color: var(--primary-dark);
}

.review-empty {
    background: #eef2f4;
    color: var(--text-muted);
}

.review-button-correct {
    border-color: #b9ddc9;
    background: #e8f5ee;
    color: var(--success);
}

.review-button-partially_correct {
    border-color: #ead29c;
    background: #fff7e6;
    color: #8d6019;
}

.review-button-incorrect {
    border-color: #efbbb0;
    background: #fdece7;
    color: var(--warning);
}

.review-button-needs_review {
    border-color: #cddfe6;
    background: #edf4f7;
    color: var(--primary-dark);
}

.service-orders-filter-form {
    display: grid;
    grid-template-columns:
        140px
        140px
        minmax(180px, 1fr)
        minmax(220px, 1fr)
        170px
        minmax(260px, 1.4fr)
        auto
        auto;
    align-items: end;
    gap: 12px;
}

.service-orders-table {
    min-width: 1280px;
}

.service-order-date {
    white-space: nowrap;
}

.service-order-complaint {
    min-width: 220px;
    max-width: 360px;
}

.service-order-amount {
    white-space: nowrap;
    font-weight: 700;
}

.table-secondary {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

@media (max-width: 1500px) {
    .service-orders-filter-form {
        grid-template-columns:
            repeat(4, minmax(160px, 1fr));
    }
}

@media (max-width: 900px) {
    .service-orders-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .service-orders-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .service-orders-filter-form {
        grid-template-columns: 1fr;
    }

    .service-orders-search {
        grid-column: auto;
    }
}

.service-order-detail-toolbar {
    margin-bottom: 14px;
}

.service-order-back-link {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.service-order-back-link:hover {
    text-decoration: underline;
}

.service-order-link {
    color: var(--text);
    font-weight: 800;
    text-decoration: none;
}

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

.service-order-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.service-order-summary-card {
    margin: 0;
}

.service-order-data-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.service-order-data-list > div {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.8fr)
        minmax(0, 1.2fr);
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.service-order-data-list > div:last-child {
    border-bottom: 0;
}

.service-order-data-list dt {
    color: var(--text-muted);
    font-size: 12px;
}

.service-order-data-list dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.service-order-data-list a {
    color: var(--accent);
    text-decoration: none;
}

.service-order-vin {
    font-family: monospace;
    letter-spacing: 0.02em;
}

.service-order-text-panel {
    margin-bottom: 16px;
}

.service-order-text-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
}

.service-order-text-grid h3 {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.service-order-text-grid p {
    margin: 0;
    line-height: 1.55;
}

.service-order-lines-table {
    min-width: 960px;
}

.service-recommendation-list {
    display: grid;
    gap: 10px;
}

.service-recommendation-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.service-recommendation-main {
    min-width: 0;
}

.service-order-empty-block {
    padding: 24px;
}

.service-customer-vehicles {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.service-customer-vehicle {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.service-customer-vehicle span {
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 1200px) {
    .service-order-summary-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 700px) {
    .service-order-text-grid {
        grid-template-columns: 1fr;
    }

    .service-order-data-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .service-customer-vehicles {
        grid-template-columns: 1fr;
    }
}

.service-order-row {
    transition: background .15s;
}

.service-order-row:hover {
    background: rgba(44,115,255,.05);
}

.service-team-filter {
    display: flex;
    align-items: end;
    gap: 12px;
}

.service-team-assign-panel {
    max-width: 620px;
}

.service-team-assign-form {
    display: grid;
    gap: 18px;
}

.service-team-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-team-checkbox label {
    margin: 0;
}

.service-login-panel {
    max-width: 460px;
    margin: 40px auto;
}

.service-login-form {
    display: grid;
    gap: 18px;
}

.service-login-form input {
    width: 100%;
}

.service-login-error {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #f0b7b7;
    border-radius: 8px;
    background: #fff1f1;
    color: #9d2424;
    font-size: 13px;
}
.header-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logout-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
}

.header-logout-button:hover {
    color: var(--accent);
}

.service-call-filter {
    display: grid;
    grid-template-columns:
        180px
        220px
        180px
        minmax(280px, 1fr)
        auto
        auto;
    align-items: end;
    gap: 12px;
}



.service-call-table th:nth-child(1),
.service-call-table td:nth-child(1) {
    width: 105px;
}

.service-call-table th:nth-child(2),
.service-call-table td:nth-child(2) {
    width: 110px;
}

.service-call-table th:nth-child(3),
.service-call-table td:nth-child(3) {
    width: 120px;
}

.service-call-table th:nth-child(4),
.service-call-table td:nth-child(4) {
    width: 210px;
}

.service-call-table th:nth-child(5),
.service-call-table td:nth-child(5) {
    width: 150px;
}

.service-call-table th:nth-child(6),
.service-call-table td:nth-child(6) {
    width: 105px;
}

.service-call-table th:nth-child(7),
.service-call-table td:nth-child(7) {
    width: auto;
}





@media (max-width: 1200px) {
    .service-call-filter {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .service-call-search {
        grid-column: 1 / -1;
    }

    .service-call-table {
        min-width: 1180px;
        table-layout: auto;
    }
}



.service-call-result-status {
    display: grid;
    gap: 8px;
}

.service-call-result-status > label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.service-call-status-buttons {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.service-call-status-button {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

.service-call-status-button:hover {
    border-color: var(--accent);
}

.service-call-status-button.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.service-call-status-success.active {
    border-color: #26865d;
    background: #26865d;
}

.service-call-native-status {
    display: none;
}

.service-call-callback-field[hidden] {
    display: none;
}

.service-call-save-button {
    width: 100%;
    min-height: 44px;
}

.service-call-result-form textarea {
    resize: vertical;
    min-height: 110px;
}

@media (max-width: 600px) {
    .service-call-status-buttons {
        grid-template-columns: 1fr;
    }
}

.service-call-task-list {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.service-call-task-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.service-call-task-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 22px rgba(27, 58, 72, 0.09);
    transform: translateY(-1px);
}

.service-call-task-card-overdue {
    border-left: 4px solid #ba4d4d;
}

.service-call-task-top {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.service-call-task-date {
    display: grid;
    gap: 2px;
    min-width: 110px;
}

.service-call-task-date span,
.service-call-task-date small,
.service-call-task-assignee span {
    color: var(--text-muted);
    font-size: 11px;
}

.service-call-task-date strong {
    font-size: 14px;
}

.service-call-task-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf2f4;
    color: #52646c;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.service-call-task-status-booked {
    background: #e5f5ed;
    color: #24724f;
}

.service-call-task-status-declined,
.service-call-task-status-not_relevant {
    background: #f4eaea;
    color: #8b4242;
}

.service-call-task-status-callback {
    background: #fff3d9;
    color: #85651e;
}

.service-call-task-status-no_answer {
    background: #f0eef8;
    color: #635586;
}

.service-call-task-assignee {
    display: grid;
    gap: 2px;
    margin-left: auto;
    text-align: right;
}

.service-call-task-main {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.4fr)
        minmax(190px, 1fr)
        minmax(130px, 0.65fr);
    gap: 24px;
    padding: 16px;
}

.service-call-task-client,
.service-call-task-vehicle,
.service-call-task-order {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
}

.service-call-task-label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.service-call-task-client-name {
    overflow-wrap: anywhere;
    font-size: 14px;
}

.service-call-task-phone {
    width: fit-content;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.service-call-task-vehicle small {
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font-size: 10px;
}

.service-call-task-content {
    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(260px, 0.8fr);
    gap: 24px;
    padding: 0 16px 16px;
}

.service-call-task-recommendations,
.service-call-task-comment {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 13px 14px;
    border-radius: 9px;
    background: var(--surface-soft);
}

.service-call-task-recommendation {
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.service-call-task-comment p {
    margin: 0;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.service-call-task-empty {
    color: var(--text-muted);
    font-size: 12px;
}

.service-call-task-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.service-call-task-empty-list {
    padding: 35px;
}

@media (max-width: 1000px) {
    .service-call-task-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .service-call-task-order {
        grid-column: 1 / -1;
    }

    .service-call-task-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .service-call-task-top {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .service-call-task-assignee {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .service-call-task-main {
        grid-template-columns: 1fr;
    }

    .service-call-task-order {
        grid-column: auto;
    }
}

.page-messages {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.page-message {
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
}

.page-message-success {
    border-color: #b9ddca;
    background: #edf8f2;
    color: #256a49;
}

.page-message-error {
    border-color: #efbcbc;
    background: #fff1f1;
    color: #9b3333;
}

.parts-app-layout {
    grid-template-columns: minmax(0, 1fr);
}

.parts-app-layout .main-content {
    width: 100%;
    min-width: 0;
}

.parts-results-layout {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.parts-filters {
    position: sticky;
    top: 20px;
}

.parts-filter-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 16px;
    background: #fff;
}

.parts-filter-card h3 {
    margin-top: 0;
}

.parts-filter-option {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.parts-filter-submit {
    width: 100%;
    margin-top: 8px;
}

.parts-results-main {
    min-width: 0;
}

@media (max-width: 900px) {
    .parts-results-layout {
        grid-template-columns: 1fr;
    }

    .parts-filters {
        position: static;
    }
}


:root {
    --background: #f3f5f7;
    --surface: #ffffff;
    --surface-muted: #f8fafb;
    --sidebar: #17232d;
    --sidebar-hover: #243541;
    --primary: #2f748c;
    --primary-dark: #245c70;
    --text: #18212a;
    --text-muted: #697785;
    --border: #dfe5e9;
    --warning: #c45b3f;
    --warning-background: #fff4ef;
    --success: #31805c;
    --shadow: 0 8px 24px rgba(23, 35, 45, 0.06);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    background: var(--background);
    color: var(--text);
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

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

.app-layout {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 28px 18px;
    background: var(--sidebar);
    color: #ffffff;
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 10px 30px;
}

.brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 12px;
    background: var(--primary);
    font-size: 23px;
    font-weight: 800;
}

.brand-name {
    font-size: 18px;
    font-weight: 750;
    letter-spacing: 0.08em;
}

.brand-subtitle {
    margin-top: 2px;
    color: #9dafba;
    font-size: 12px;
}

.navigation {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.navigation-link {
    padding: 12px 14px;
    border-radius: 9px;
    color: #c2ced6;
    font-size: 14px;
    font-weight: 550;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.navigation-link:hover,
.navigation-link.active {
    background: var(--sidebar-hover);
    color: #ffffff;
}

.navigation-link.active {
    box-shadow: inset 3px 0 0 var(--primary);
}

.sidebar-footer {
    margin-top: auto;
    padding: 14px 10px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: #8798a4;
    font-size: 12px;
}

.main-content {
    min-width: 0;
    padding: 0 34px 40px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 108px;
    border-bottom: 1px solid var(--border);
}

.page-caption {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 13px;
}

.page-title {
    margin: 0;
    font-size: 27px;
    font-weight: 720;
}

.user-block {
    display: flex;
    align-items: center;
    gap: 11px;
}

.user-avatar {
    display: grid;
    width: 39px;
    height: 39px;
    place-items: center;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-weight: 700;
}

.user-name {
    font-size: 13px;
    font-weight: 650;
}

.user-role {
    margin-top: 2px;
    color: var(--text-muted);
    font-size: 12px;
}

.dashboard-filter {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
    margin: 24px 0 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.dashboard-filter-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.quick-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.quick-period-link {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
    transition:
        border-color 0.15s ease,
        background 0.15s ease,
        color 0.15s ease;
}

.quick-period-link:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.quick-period-link.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.dashboard-period {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 13px;
    text-align: right;
}

.dashboard-filter-form {
    display: grid;
    grid-template-columns:
        150px
        150px
        minmax(160px, 1fr)
        minmax(180px, 1fr)
        auto
        auto;
    align-items: end;
    gap: 12px;
}

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

.dashboard-filter-field label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
}

.dashboard-filter-field input,
.dashboard-filter-field select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.dashboard-filter-field input:focus,
.dashboard-filter-field select:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px
        rgba(47, 116, 140, 0.12);
}

.dashboard-filter-button {
    height: 38px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: var(--primary);
    color: #ffffff;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
    transition: background 0.15s ease;
}

.dashboard-filter-button:hover {
    background: var(--primary-dark);
}

.dashboard-filter-reset {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    padding: 0 10px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.dashboard-filter-reset:hover {
    color: var(--warning);
}

.metric-change {
    margin-right: 4px;
    font-weight: 750;
}

.metric-change.positive {
    color: var(--success);
}

.metric-change.negative {
    color: var(--warning);
}

.dashboard-period {
    flex: 0 0 auto;
    color: var(--text-muted);
    font-size: 13px;
    text-align: right;
}
.metric-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(150px, 1fr));
    gap: 16px;
}

.metric-card {
    min-height: 142px;
    padding: 21px;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.metric-card-warning {
    border-color: #f1cabc;
    background: var(--warning-background);
}

.metric-label {
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 600;
}

.metric-value {
    margin-top: 12px;
    font-size: 38px;
    font-weight: 730;
    line-height: 1;
}

.metric-note {
    margin-top: 13px;
    color: var(--text-muted);
    font-size: 12px;
}

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

.panel {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 13px;
    background: var(--surface);
    box-shadow: var(--shadow);
}

.panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 21px 22px;
    border-bottom: 1px solid var(--border);
}

.panel-header h2 {
    margin: 0;
    font-size: 17px;
}

.panel-header p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.panel-link {
    color: var(--primary);
    font-size: 13px;
    font-weight: 650;
}

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

.data-table {
    width: 100%;
    border-collapse: collapse;
    white-space: nowrap;
}

.data-table th,
.data-table td {
    padding: 14px 17px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    font-size: 13px;
}

.data-table th {
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.data-table tbody tr:hover {
    background: #fafcfd;
}

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

.status-badge {
    display: inline-flex;
    padding: 5px 8px;
    border-radius: 999px;
    background: #eef2f4;
    color: #53616d;
    font-size: 11px;
    font-weight: 650;
}

.status-analyzed {
    background: #e8f5ee;
    color: var(--success);
}

.status-error {
    background: #fdece7;
    color: var(--warning);
}

.status-transcribed {
    background: #edf4f7;
    color: var(--primary-dark);
}

.attention-list {
    display: flex;
    flex-direction: column;
}

.attention-item {
    display: flex;
    gap: 13px;
    padding: 17px 20px;
    border-bottom: 1px solid var(--border);
}

.attention-item:hover {
    background: var(--surface-muted);
}

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

.attention-icon {
    display: grid;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--warning-background);
    color: var(--warning);
    font-weight: 800;
}

.attention-title {
    font-size: 13px;
    font-weight: 700;
}

.attention-text {
    margin-top: 4px;
    color: #4d5b66;
    font-size: 12px;
    line-height: 1.45;
}

.attention-meta {
    margin-top: 7px;
    color: var(--text-muted);
    font-size: 11px;
}

.empty-state,
.empty-panel {
    padding: 30px;
    color: var(--text-muted);
    text-align: center;
}

@media (max-width: 1180px) {
    .metric-grid {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }

    .content-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-filter-button,
    .dashboard-filter-reset {
        width: 100%;
    }
}

@media (max-width: 760px) {
    /* Мобильный сайдбар на <=768px обрабатывается единым правилом ниже
       (@media max-width: 768px). Здесь убираем устаревшие переопределения
       .app-layout / .sidebar / .navigation, которые конфликтовали с новым
       off-canvas меню и могли приводить к «desktop»-виду после перехода. */

    .brand {
        padding-bottom: 14px;
    }

    .main-content {
        padding: 0 15px 28px;
    }

    .topbar {
        min-height: 88px;
    }

    .user-block {
        display: none;
    }

    .metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .metric-card {
        min-height: 125px;
        padding: 17px;
    }

    .metric-value {
        font-size: 32px;
    }
    .dashboard-filter {
        align-items: stretch;
        flex-direction: column;
    }

    .dashboard-filter-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dashboard-filter-field input {
        width: 100%;
        min-width: 0;
    }

    .dashboard-filter-button,
    .dashboard-filter-link {
        justify-content: center;
        width: 100%;
    }

    .dashboard-period {
        text-align: left;
    }
    .dashboard-filter-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-period {
        text-align: left;
    }

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

    .quick-period-link {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (max-width: 450px) {
    .metric-grid {
        grid-template-columns: 1fr;
    }
    .dashboard-filter-form {
        grid-template-columns: 1fr;
    }
    .dashboard-filter-form {
        grid-template-columns: 1fr;
    }
}

.calls-filter {
    margin: 24px 0 18px;
    padding: 18px;
}

.calls-filter-form {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(150px, 1fr));
    align-items: end;
    gap: 12px;
}

.calls-search-field {
    grid-column: span 2;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 18px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 13px;
}

.pagination a {
    color: var(--primary);
    font-weight: 650;
}

.pagination a:hover {
    color: var(--primary-dark);
}

@media (max-width: 1180px) {
    .calls-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .calls-filter-form {
        grid-template-columns: 1fr;
    }

    .calls-search-field {
        grid-column: auto;
    }
}

.clickable-row {
    cursor: pointer;
}

.clickable-row:hover {
    background: var(--surface-muted);
}

.call-detail-header {
    margin: 24px 0 18px;
    padding: 22px;
}

.call-detail-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.call-detail-caption {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 12px;
}

.call-detail-heading h2 {
    margin: 0;
    font-size: 22px;
}

.call-detail-meta {
    display: grid;
    grid-template-columns:
        repeat(6, minmax(120px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

.call-meta-item {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
}

.call-meta-item span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
}

.call-meta-item strong {
    font-size: 13px;
}

.call-detail-grid {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.call-detail-content {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 16px;
    padding: 20px;
}

.call-analysis-block {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
}

.call-analysis-label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 650;
}

.call-analysis-value {
    font-size: 13px;
    line-height: 1.5;
}

.call-facts-list {
    display: flex;
    flex-direction: column;
}

.call-fact-row {
    display: grid;
    grid-template-columns:
        minmax(160px, 0.8fr)
        minmax(0, 1.2fr);
    gap: 18px;
    padding: 13px 20px;
    border-bottom: 1px solid var(--border);
}

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

.call-fact-key {
    color: var(--text-muted);
    font-size: 12px;
}

.call-fact-value {
    font-size: 13px;
    overflow-wrap: anywhere;
}

.transcript-text {
    padding: 22px;
    color: var(--text);
    font-size: 14px;
    line-height: 1.7;
    white-space: normal;
}

@media (max-width: 1180px) {
    .call-detail-meta {
        grid-template-columns:
            repeat(3, minmax(120px, 1fr));
    }
}

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

@media (max-width: 600px) {
    .call-detail-heading {
        flex-direction: column;
    }

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

    .call-detail-content {
        grid-template-columns: 1fr;
    }

    .call-fact-row {
        grid-template-columns: 1fr;
        gap: 6px;
    }
}

.metric-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition:
        border-color 0.15s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.metric-card-link:hover {
    border-color: var(--primary);
    box-shadow:
        0 10px 28px
        rgba(23, 35, 45, 0.1);
    transform: translateY(-1px);
}

.table-link {
    color: inherit;
    text-decoration: none;
}

.table-link:hover {
    color: var(--primary);
    text-decoration: underline;
}

.attention-item {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.attention-content {
    min-width: 0;
    flex: 1 1 auto;
}

.call-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.call-summary-block {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.call-summary-label {
    margin-bottom: 7px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.call-summary-value {
    font-size: 14px;
    line-height: 1.55;
}

.call-status-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px 20px;
}

.call-status-item {
    padding: 13px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted);
}

.call-status-item span {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 11px;
}

.call-status-item strong {
    font-size: 13px;
}

.call-status-positive {
    border-color: #cce6d8;
    background: #f1faf5;
}

.call-status-warning {
    border-color: #f1cabc;
    background: var(--warning-background);
}

.call-status-negative {
    border-color: #efbbb0;
    background: #fff0ec;
}

.fact-state-positive {
    color: var(--success);
    font-weight: 650;
}

.fact-state-warning,
.fact-state-negative {
    color: var(--warning);
    font-weight: 650;
}

.call-evidence-panel {
    margin-bottom: 18px;
}

.call-evidence-list {
    display: flex;
    flex-direction: column;
}

.call-evidence-item {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.call-evidence-item:last-child {
    border-bottom: 0;
}

.call-evidence-item blockquote {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
}

.call-evidence-item p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
}

@media (max-width: 600px) {
    .call-status-grid {
        grid-template-columns: 1fr;
    }
}

.call-workspace {
    display: grid;
    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(0, 0.9fr);
    grid-template-rows:
        minmax(0, 1fr)
        220px;
    gap: 14px;
    height: calc(100vh - 390px);
    min-height: 470px;
}

.call-workspace-summary,
.call-workspace-facts,
.call-workspace-text {
    min-height: 0;
}

.call-workspace-summary {
    overflow: auto;
}

.call-workspace-facts {
    display: flex;
    flex-direction: column;
}

.call-workspace-text {
    grid-column: 1 / -1;
    display: flex;
    min-height: 0;
    flex-direction: column;
}

.compact-panel-header {
    padding: 14px 16px;
}

.compact-panel-header h2 {
    font-size: 15px;
}

.compact-call-summary .call-summary-block {
    padding: 12px 16px;
}

.compact-call-summary .call-summary-value {
    font-size: 13px;
    line-height: 1.4;
}

.compact-status-grid {
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 8px;
    padding: 12px 16px;
}

.compact-status-grid .call-status-item {
    padding: 10px 11px;
}

.call-facts-scroll {
    min-height: 0;
    overflow-y: auto;
}

.call-facts-scroll .call-fact-row {
    padding: 9px 14px;
}

.call-tabs {
    display: flex;
    gap: 4px;
    padding: 8px 10px 0;
    border-bottom: 1px solid var(--border);
}

.call-tab {
    padding: 8px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    cursor: pointer;
}

.call-tab:hover {
    color: var(--primary);
}

.call-tab.active {
    border-bottom-color: var(--primary);
    color: var(--primary-dark);
}

.call-tab span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 19px;
    height: 19px;
    margin-left: 5px;
    border-radius: 999px;
    background: var(--surface-muted);
    font-size: 10px;
}

.call-tab-panel {
    display: none;
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
}

.call-tab-panel.active {
    display: block;
}

.compact-transcript-text {
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.55;
}

.call-workspace-text .call-evidence-item {
    padding: 12px 16px;
}

.call-detail-header {
    margin: 16px 0 14px;
    padding: 16px;
}

.call-detail-meta {
    gap: 9px;
    margin-top: 14px;
}

.call-meta-item {
    padding: 10px 11px;
}

.call-detail-heading h2 {
    font-size: 19px;
}

@media (max-height: 800px) and (min-width: 901px) {
    .topbar {
        min-height: 78px;
    }

    .call-workspace {
        height: calc(100vh - 330px);
        min-height: 410px;
        grid-template-rows:
            minmax(0, 1fr)
            180px;
    }

    .call-detail-header {
        margin-top: 10px;
    }
}

@media (max-width: 900px) {
    .call-workspace {
        display: flex;
        height: auto;
        min-height: 0;
        flex-direction: column;
    }

    .call-workspace-summary,
    .call-workspace-facts,
    .call-workspace-text {
        overflow: visible;
    }

    .call-facts-scroll,
    .call-tab-panel {
        overflow: visible;
    }
}

@media (max-width: 700px) {
    .compact-status-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

.call-compact-header {
    margin: 12px 0;
    padding: 11px 14px;
}

.call-compact-main {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 38px;
    padding-right: 135px;
}

.call-compact-main > div:first-child {
    flex: 0 0 auto;
}

.call-compact-number {
    display: block;
    color: var(--text-muted);
    font-size: 10px;
}

.call-compact-date {
    display: block;
    margin-top: 2px;
    font-size: 16px;
}

.call-compact-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

.call-compact-meta > span {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
    font-size: 11px;
    font-weight: 600;
}

.call-processing-status.status-analyzed {
    border-color: #cce6d8;
    background: #e8f5ee;
    color: var(--success);
}

.call-processing-status.status-error {
    border-color: #efbbb0;
    background: #fdece7;
    color: var(--warning);
}

.call-processing-status.status-transcribed {
    border-color: #cddfe6;
    background: #edf4f7;
    color: var(--primary-dark);
}

.call-back-link {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    white-space: nowrap;
}


/* ВЕСЬ ЭКРАН ЗВОНКА */

.call-screen-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(0, 0.8fr);
    grid-template-rows:
        minmax(250px, 1.25fr)
        minmax(190px, 0.75fr);
    gap: 12px;
    height: calc(100vh - 315px);
    min-height: 510px;
}

.call-screen-summary,
.call-screen-facts,
.call-screen-evidence,
.call-screen-transcript {
    display: flex;
    min-width: 0;
    min-height: 0;
    flex-direction: column;
}

.call-screen-panel-header {
    flex: 0 0 auto;
    padding: 11px 14px;
}

.call-screen-panel-header h2 {
    font-size: 14px;
}

.call-screen-panel-header p {
    margin-top: 3px;
    font-size: 10px;
}

.call-screen-summary-content {
    min-height: 0;
    overflow-y: auto;
}

.call-screen-summary-content .call-summary-block {
    padding: 10px 14px;
}

.call-screen-summary-content .call-summary-label {
    margin-bottom: 4px;
    font-size: 9px;
}

.call-screen-summary-content .call-summary-value {
    font-size: 12px;
    line-height: 1.4;
}

.call-screen-statuses {
    display: grid;
    flex: 0 0 auto;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 6px;
    padding: 9px 12px;
    border-top: 1px solid var(--border);
}

.call-screen-statuses .call-status-item {
    padding: 8px 9px;
}

.call-screen-statuses .call-status-item span {
    margin-bottom: 4px;
    font-size: 9px;
}

.call-screen-statuses .call-status-item strong {
    font-size: 11px;
}

.call-screen-scroll {
    min-height: 0;
    flex: 1 1 auto;
    overflow-y: auto;
    scrollbar-width: thin;
}

.call-screen-facts .call-fact-row {
    grid-template-columns:
        minmax(135px, 0.9fr)
        minmax(0, 1.1fr);
    gap: 12px;
    padding: 7px 12px;
}

.call-screen-facts .call-fact-key,
.call-screen-facts .call-fact-value {
    font-size: 11px;
}

.call-screen-evidence .call-evidence-item {
    padding: 9px 13px;
}

.call-screen-evidence .call-evidence-item blockquote {
    font-size: 11px;
    line-height: 1.4;
}

.call-screen-evidence .call-evidence-item p {
    margin-top: 4px;
    font-size: 10px;
    line-height: 1.35;
}

.call-screen-transcript .transcript-text {
    padding: 11px 14px;
    font-size: 11px;
    line-height: 1.5;
}


/* НИЗКАЯ ВЫСОТА ЭКРАНА */

@media (max-height: 850px) and (min-width: 901px) {
    .topbar {
        min-height: 68px;
    }

    .call-compact-header {
        margin: 8px 0;
        padding: 8px 12px;
    }

    .call-screen-layout {
        height: calc(100vh - 260px);
        min-height: 430px;
        grid-template-rows:
            minmax(225px, 1.2fr)
            minmax(165px, 0.8fr);
    }
}


/* ПЛАНШЕТ И МОБИЛЬНЫЙ */

@media (max-width: 900px) {
    .call-compact-main {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        padding-right: 0;
    }

    .call-back-link {
        position: static;
        transform: none;
    }

    .call-screen-layout {
        display: flex;
        height: auto;
        min-height: 0;
        flex-direction: column;
    }

    .call-screen-scroll,
    .call-screen-summary-content {
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 650px) {
    .call-screen-statuses {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}
.call-audio-row {
    display: grid;
    grid-template-columns:
        minmax(260px, 1fr)
        auto;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}

.call-audio-row audio {
    display: block;
    width: 100%;
    height: 32px;
}

.call-audio-tools {
    display: flex;
    align-items: center;
    gap: 6px;
}

.audio-skip-button {
    height: 30px;
    padding: 0 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-muted);
    color: var(--text);
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.audio-skip-button:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.audio-rate-control {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 10px;
}

.audio-rate-control select {
    height: 30px;
    padding: 0 7px;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 11px;
}

@media (max-width: 800px) {
    .call-audio-row {
        grid-template-columns: 1fr;
    }

    .call-audio-tools {
        flex-wrap: wrap;
    }
}

.call-review-open {
    min-height: 27px;
    padding: 0 10px;
    border: 1px solid var(--primary);
    border-radius: 7px;
    background: #edf4f7;
    color: var(--primary-dark);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
}

.call-review-open:hover {
    background: var(--primary);
    color: #ffffff;
}

.modal-open {
    overflow: hidden;
}

.review-modal {
    position: fixed;
    z-index: 1000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.review-modal.active {
    display: flex;
}

.review-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(23, 35, 45, 0.55);
    backdrop-filter: blur(2px);
}

.review-modal-dialog {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    box-shadow:
        0 24px 70px
        rgba(23, 35, 45, 0.22);
}

.review-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.review-modal-header h2 {
    margin: 0;
    font-size: 17px;
}

.review-modal-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 11px;
}

.review-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-muted);
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.review-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

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

.review-field label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 650;
}

.review-field-control {
    width: 100%;
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--border);
    border-radius: 8px;
    outline: none;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
}

textarea.review-field-control {
    resize: vertical;
}

.review-field-control:focus {
    border-color: var(--primary);
    box-shadow:
        0 0 0 3px
        rgba(47, 116, 140, 0.12);
}

.review-field-help {
    color: var(--text-muted);
    font-size: 10px;
}

.review-field-error {
    color: var(--warning);
    font-size: 11px;
}

.review-saved-meta {
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 11px;
}

.review-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 9px;
    padding-top: 4px;
}

.review-primary-button,
.review-secondary-button {
    min-height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.review-primary-button {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: #ffffff;
}

.review-primary-button:hover {
    background: var(--primary-dark);
}

.review-secondary-button {
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text-muted);
}

.review-badge {
    display: inline-flex;
    align-items: center;
    max-width: 190px;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    white-space: normal;
}

.review-correct {
    background: #e8f5ee;
    color: var(--success);
}

.review-partially_correct {
    background: #fff7e6;
    color: #9a681c;
}

.review-incorrect {
    background: #fdece7;
    color: var(--warning);
}

.review-needs_review {
    background: #edf4f7;
    color: var(--primary-dark);
}

.review-empty {
    background: #eef2f4;
    color: var(--text-muted);
}

.review-button-correct {
    border-color: #b9ddc9;
    background: #e8f5ee;
    color: var(--success);
}

.review-button-partially_correct {
    border-color: #ead29c;
    background: #fff7e6;
    color: #8d6019;
}

.review-button-incorrect {
    border-color: #efbbb0;
    background: #fdece7;
    color: var(--warning);
}

.review-button-needs_review {
    border-color: #cddfe6;
    background: #edf4f7;
    color: var(--primary-dark);
}

.service-orders-filter-form {
    display: grid;
    grid-template-columns:
        140px
        140px
        minmax(180px, 1fr)
        minmax(220px, 1fr)
        170px
        minmax(260px, 1.4fr)
        auto
        auto;
    align-items: end;
    gap: 12px;
}

.service-orders-table {
    min-width: 1280px;
}

.service-order-date {
    white-space: nowrap;
}

.service-order-complaint {
    min-width: 220px;
    max-width: 360px;
}

.service-order-amount {
    white-space: nowrap;
    font-weight: 700;
}

.table-secondary {
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 11px;
    line-height: 1.35;
}

@media (max-width: 1500px) {
    .service-orders-filter-form {
        grid-template-columns:
            repeat(4, minmax(160px, 1fr));
    }
}

@media (max-width: 900px) {
    .service-orders-filter-form {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .service-orders-search {
        grid-column: 1 / -1;
    }
}

@media (max-width: 600px) {
    .service-orders-filter-form {
        grid-template-columns: 1fr;
    }

    .service-orders-search {
        grid-column: auto;
    }
}

.service-order-detail-toolbar {
    margin-bottom: 14px;
}

.service-order-back-link {
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.service-order-back-link:hover {
    text-decoration: underline;
}

.service-order-link {
    color: var(--text);
    font-weight: 800;
    text-decoration: none;
}

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

.service-order-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

.service-order-summary-card {
    margin: 0;
}

.service-order-data-list {
    display: grid;
    gap: 0;
    margin: 0;
}

.service-order-data-list > div {
    display: grid;
    grid-template-columns:
        minmax(120px, 0.8fr)
        minmax(0, 1.2fr);
    gap: 14px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.service-order-data-list > div:last-child {
    border-bottom: 0;
}

.service-order-data-list dt {
    color: var(--text-muted);
    font-size: 12px;
}

.service-order-data-list dd {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.service-order-data-list a {
    color: var(--accent);
    text-decoration: none;
}

.service-order-vin {
    font-family: monospace;
    letter-spacing: 0.02em;
}

.service-order-text-panel {
    margin-bottom: 16px;
}

.service-order-text-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 18px 28px;
}

.service-order-text-grid h3 {
    margin: 0 0 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.service-order-text-grid p {
    margin: 0;
    line-height: 1.55;
}

.service-order-lines-table {
    min-width: 960px;
}

.service-recommendation-list {
    display: grid;
    gap: 10px;
}

.service-recommendation-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.service-recommendation-main {
    min-width: 0;
}

.service-order-empty-block {
    padding: 24px;
}

.service-customer-vehicles {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.service-customer-vehicle {
    display: grid;
    gap: 4px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.service-customer-vehicle span {
    color: var(--text-muted);
    font-size: 12px;
}

@media (max-width: 1200px) {
    .service-order-summary-grid {
        grid-template-columns: 1fr;
    }

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

@media (max-width: 700px) {
    .service-order-text-grid {
        grid-template-columns: 1fr;
    }

    .service-order-data-list > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .service-customer-vehicles {
        grid-template-columns: 1fr;
    }
}

.service-order-row {
    transition: background .15s;
}

.service-order-row:hover {
    background: rgba(44,115,255,.05);
}

.service-team-filter {
    display: flex;
    align-items: end;
    gap: 12px;
}

.service-team-assign-panel {
    max-width: 620px;
}

.service-team-assign-form {
    display: grid;
    gap: 18px;
}

.service-team-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.service-team-checkbox label {
    margin: 0;
}

.service-login-panel {
    max-width: 460px;
    margin: 40px auto;
}

.service-login-form {
    display: grid;
    gap: 18px;
}

.service-login-form input {
    width: 100%;
}

.service-login-error {
    margin-bottom: 18px;
    padding: 12px 14px;
    border: 1px solid #f0b7b7;
    border-radius: 8px;
    background: #fff1f1;
    color: #9d2424;
    font-size: 13px;
}
.header-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logout-button {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
}

.header-logout-button:hover {
    color: var(--accent);
}

.service-call-filter {
    display: grid;
    grid-template-columns:
        180px
        220px
        180px
        minmax(280px, 1fr)
        auto
        auto;
    align-items: end;
    gap: 12px;
}



.service-call-table th:nth-child(1),
.service-call-table td:nth-child(1) {
    width: 105px;
}

.service-call-table th:nth-child(2),
.service-call-table td:nth-child(2) {
    width: 110px;
}

.service-call-table th:nth-child(3),
.service-call-table td:nth-child(3) {
    width: 120px;
}

.service-call-table th:nth-child(4),
.service-call-table td:nth-child(4) {
    width: 210px;
}

.service-call-table th:nth-child(5),
.service-call-table td:nth-child(5) {
    width: 150px;
}

.service-call-table th:nth-child(6),
.service-call-table td:nth-child(6) {
    width: 105px;
}

.service-call-table th:nth-child(7),
.service-call-table td:nth-child(7) {
    width: auto;
}





@media (max-width: 1200px) {
    .service-call-filter {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .service-call-search {
        grid-column: 1 / -1;
    }

    .service-call-table {
        min-width: 1180px;
        table-layout: auto;
    }
}



.service-call-result-status {
    display: grid;
    gap: 8px;
}

.service-call-result-status > label {
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 700;
}

.service-call-status-buttons {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.service-call-status-button {
    min-height: 42px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    transition:
        border-color 0.15s ease,
        background-color 0.15s ease,
        color 0.15s ease;
}

.service-call-status-button:hover {
    border-color: var(--accent);
}

.service-call-status-button.active {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.service-call-status-success.active {
    border-color: #26865d;
    background: #26865d;
}

.service-call-native-status {
    display: none;
}

.service-call-callback-field[hidden] {
    display: none;
}

.service-call-save-button {
    width: 100%;
    min-height: 44px;
}

.service-call-result-form textarea {
    resize: vertical;
    min-height: 110px;
}

@media (max-width: 600px) {
    .service-call-status-buttons {
        grid-template-columns: 1fr;
    }
}

.service-call-task-list {
    display: grid;
    gap: 12px;
    padding: 16px;
}

.service-call-task-card {
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface);
    cursor: pointer;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.15s ease;
}

.service-call-task-card:hover {
    border-color: var(--accent);
    box-shadow: 0 8px 22px rgba(27, 58, 72, 0.09);
    transform: translateY(-1px);
}

.service-call-task-card-overdue {
    border-left: 4px solid #ba4d4d;
}

.service-call-task-top {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--surface-soft);
}

.service-call-task-date {
    display: grid;
    gap: 2px;
    min-width: 110px;
}

.service-call-task-date span,
.service-call-task-date small,
.service-call-task-assignee span {
    color: var(--text-muted);
    font-size: 11px;
}

.service-call-task-date strong {
    font-size: 14px;
}

.service-call-task-status {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 5px 9px;
    border-radius: 999px;
    background: #edf2f4;
    color: #52646c;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.service-call-task-status-booked {
    background: #e5f5ed;
    color: #24724f;
}

.service-call-task-status-declined,
.service-call-task-status-not_relevant {
    background: #f4eaea;
    color: #8b4242;
}

.service-call-task-status-callback {
    background: #fff3d9;
    color: #85651e;
}

.service-call-task-status-no_answer {
    background: #f0eef8;
    color: #635586;
}

.service-call-task-assignee {
    display: grid;
    gap: 2px;
    margin-left: auto;
    text-align: right;
}

.service-call-task-main {
    display: grid;
    grid-template-columns:
        minmax(260px, 1.4fr)
        minmax(190px, 1fr)
        minmax(130px, 0.65fr);
    gap: 24px;
    padding: 16px;
}

.service-call-task-client,
.service-call-task-vehicle,
.service-call-task-order {
    display: grid;
    align-content: start;
    gap: 4px;
    min-width: 0;
}

.service-call-task-label {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.service-call-task-client-name {
    overflow-wrap: anywhere;
    font-size: 14px;
}

.service-call-task-phone {
    width: fit-content;
    color: var(--accent);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.service-call-task-vehicle small {
    overflow-wrap: anywhere;
    color: var(--text-muted);
    font-size: 10px;
}

.service-call-task-content {
    display: grid;
    grid-template-columns:
        minmax(0, 1.4fr)
        minmax(260px, 0.8fr);
    gap: 24px;
    padding: 0 16px 16px;
}

.service-call-task-recommendations,
.service-call-task-comment {
    display: grid;
    align-content: start;
    gap: 7px;
    min-width: 0;
    padding: 13px 14px;
    border-radius: 9px;
    background: var(--surface-soft);
}

.service-call-task-recommendation {
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.service-call-task-comment p {
    margin: 0;
    overflow-wrap: anywhere;
    line-height: 1.45;
}

.service-call-task-empty {
    color: var(--text-muted);
    font-size: 12px;
}

.service-call-task-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    color: var(--accent);
    font-size: 12px;
    font-weight: 700;
}

.service-call-task-empty-list {
    padding: 35px;
}

@media (max-width: 1000px) {
    .service-call-task-main {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .service-call-task-order {
        grid-column: 1 / -1;
    }

    .service-call-task-content {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 650px) {
    .service-call-task-top {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .service-call-task-assignee {
        width: 100%;
        margin-left: 0;
        text-align: left;
    }

    .service-call-task-main {
        grid-template-columns: 1fr;
    }

    .service-call-task-order {
        grid-column: auto;
    }
}

.page-messages {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
}

.page-message {
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13px;
}

.page-message-success {
    border-color: #b9ddca;
    background: #edf8f2;
    color: #256a49;
}

.page-message-error {
    border-color: #efbcbc;
    background: #fff1f1;
    color: #9b3333;
}
/* NPS */
.nps-task-list {
    display: grid;
}

.nps-task-card {
    display: grid;
    grid-template-columns: 110px minmax(180px, 1.2fr) minmax(170px, 1fr) minmax(160px, .9fr) auto;
    gap: 18px;
    align-items: center;
    padding: 15px 18px;
    border-top: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
}

.nps-task-card:first-child { border-top: 0; }
.nps-task-card:hover { background: var(--surface-soft); }
.nps-task-card-overdue { box-shadow: inset 3px 0 0 #c84b4b; }
.nps-task-date, .nps-task-client, .nps-task-vehicle, .nps-task-order, .nps-task-result { display: grid; gap: 4px; min-width: 0; }
.nps-task-date span, .nps-task-order span, .nps-task-date small, .nps-task-order small, .nps-task-vehicle span { color: var(--text-muted); font-size: 11px; }
.nps-task-client span { font-size: 13px; }
.nps-task-result { justify-items: end; }

.nps-score {
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--surface-soft);
    font-size: 20px;
}

.nps-score-field { display: grid; gap: 10px; }
.nps-score-buttons { display: grid; grid-template-columns: repeat(11, minmax(36px, 1fr)); gap: 6px; }
.nps-score-buttons button {
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    font-weight: 700;
}
.nps-score-buttons button:hover, .nps-score-buttons button.active { border-color: var(--accent); background: var(--surface-soft); color: var(--accent); }
.nps-native-score { display: none; }

.nps-summary-grid {
    display: grid;
    grid-template-columns: 1.2fr repeat(3, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
.nps-main-card, .nps-segment-card { padding: 22px; display: grid; gap: 8px; }
.nps-main-card span, .nps-segment-card span, .nps-main-card small { color: var(--text-muted); }
.nps-main-card strong { font-size: 46px; line-height: 1; }
.nps-segment-card strong { font-size: 32px; line-height: 1; }

.nps-distribution {
    height: 260px;
    display: grid;
    grid-template-columns: repeat(11, 1fr);
    gap: 10px;
    align-items: end;
    padding: 20px 18px 14px;
}
.nps-distribution-item { height: 220px; display: grid; grid-template-rows: 1fr auto auto; gap: 5px; text-align: center; }
.nps-bar-wrap { display: flex; align-items: end; justify-content: center; min-height: 0; }
.nps-bar { width: min(34px, 70%); min-height: 2px; border-radius: 6px 6px 2px 2px; background: var(--accent); }
.nps-distribution-item strong { font-size: 12px; }
.nps-distribution-item span { color: var(--text-muted); font-size: 12px; }

.nps-trend {
    position: relative;
    height: 300px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(52px, 1fr);
    gap: 2px;
    overflow-x: auto;
    padding: 24px 18px 32px;
}
.nps-trend-zero { position: absolute; left: 18px; right: 18px; top: 50%; border-top: 1px dashed var(--border); }
.nps-trend-point-wrap { position: relative; min-width: 52px; }
.nps-trend-point-wrap small { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); color: var(--text-muted); font-size: 10px; }
.nps-trend-point { position: absolute; left: 50%; transform: translate(-50%, 50%); width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.nps-trend-point span { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); font-size: 10px; font-weight: 700; white-space: nowrap; }

@media (max-width: 900px) {
    .nps-task-card { grid-template-columns: 90px 1fr auto; }
    .nps-task-vehicle, .nps-task-order { grid-column: 2; }
    .nps-task-result { grid-column: 3; grid-row: 1 / span 3; }
    .nps-summary-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 650px) {
    .nps-task-card { grid-template-columns: 1fr auto; gap: 12px; }
    .nps-task-date, .nps-task-client, .nps-task-vehicle, .nps-task-order { grid-column: 1; }
    .nps-task-result { grid-column: 2; grid-row: 1 / span 4; }
    .nps-score-buttons { grid-template-columns: repeat(6, 1fr); }
    .nps-summary-grid { grid-template-columns: 1fr 1fr; }
    .nps-main-card { grid-column: 1 / -1; }
    .nps-distribution { gap: 4px; padding-left: 8px; padding-right: 8px; }
}

/* ===== NPS Report dashboard ===== */
/* Toolbar / segmented filters */
.nps-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 26px;
    align-items: flex-start;
    padding: 14px 16px;
    margin-bottom: 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.nps-toolbar-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1 1 100%;
}
.nps-toolbar-label {
    color: var(--text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    min-width: 56px;
}
.nps-date-input {
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    color: var(--text);
    font-size: 13px;
}
.nps-date-sep { color: var(--text-muted); }
.nps-apply-btn { margin-left: 4px; }

.nps-segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: 100%;
}
.nps-pill { position: relative; }
.nps-pill input { position: absolute; opacity: 0; pointer-events: none; }
.nps-pill span {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.nps-pill span:hover { border-color: var(--primary); }
.nps-pill input:focus-visible + span {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}
.nps-pill input:checked + span {
    background: var(--primary);
    border-color: var(--primary-dark);
    color: #fff;
}

/* KPI */
.nps-kpi-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    margin-bottom: 14px;
}
.nps-kpi { padding: 20px; display: grid; gap: 6px; align-content: start; }
.nps-kpi span, .nps-kpi small { color: var(--text-muted); }
.nps-kpi strong { font-size: 30px; line-height: 1; }
.nps-kpi-main { background: var(--surface-muted); }
.nps-kpi-main strong { font-size: 46px; }

/* Charts */
.nps-charts-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
.nps-chart-panel { padding: 20px; }
.nps-chart-box { position: relative; height: 320px; margin-top: 12px; }

/* Tables */
.nps-table { width: 100%; border-collapse: collapse; }
.nps-table th, .nps-table td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
    white-space: nowrap;
}
.nps-table th { color: var(--text-muted); font-weight: 600; }
.nps-table tbody tr:hover { background: var(--surface-muted); }

.nps-n-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-muted);
    border: 1px solid var(--border);
    font-weight: 700;
    font-size: 12px;
}
.nps-nps-cell strong { font-size: 16px; }

@media (max-width: 1100px) {
    .nps-kpi-grid { grid-template-columns: repeat(3, 1fr); }
    .nps-charts-row { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
    .nps-kpi-grid { grid-template-columns: 1fr 1fr; }
    .nps-kpi-main { grid-column: 1 / -1; }
    .nps-toolbar-label { min-width: 0; }
    .nps-date-input { flex: 1 1 40%; }
}

/* ===== NPS working queue ===== */
.nps-tabs {
    display: inline-flex;
    gap: 6px;
    padding: 4px;
    background: var(--surface-muted);
    border-radius: 10px;
}
.nps-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.nps-tab:hover { color: inherit; }
.nps-tab-active {
    background: var(--surface);
    color: inherit;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.nps-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 12px;
}
.nps-callback-flag { color: #b5791a !important; font-weight: 600; }
.nps-attempt-meta { color: var(--text-muted); font-size: 11px; }
.nps-related-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #eef2fb;
    border: 1px solid #d4ddf2;
    color: #3a5bbf;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.nps-joint-note {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: #eefbf0;
    border: 1px solid #cdeed5;
    color: #1d7a35;
    font-size: 13px;
}
.nps-joint-note a { color: inherit; font-weight: 700; }

.nps-related-block {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}
.nps-related-title {
    font-weight: 700;
    margin-bottom: 8px;
    font-size: 13px;
}
.nps-related-item {
    display: grid;
    grid-template-columns: minmax(120px, auto) repeat(5, minmax(90px, auto)) auto auto;
    gap: 12px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid var(--border);
    color: inherit;
    text-decoration: none;
    font-size: 13px;
}
.nps-related-item:first-of-type { border-top: 0; }
.nps-related-item:hover { background: var(--surface-soft); }
.nps-related-order { font-weight: 700; }

.nps-related-confirm {
    margin-top: 16px;
    padding: 12px;
    border: 1px solid #cdd9f5;
    background: #f5f8ff;
    border-radius: 8px;
}
.nps-related-check {
    display: grid;
    grid-template-columns: auto minmax(110px, auto) repeat(4, minmax(80px, auto)) auto;
    gap: 12px;
    align-items: center;
    padding: 8px 4px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    cursor: pointer;
}
.nps-related-check:first-of-type { border-top: 0; }
.nps-related-check input[type="checkbox"] { width: 16px; height: 16px; }
.nps-related-check span { color: var(--text-muted); }
.nps-related-check .nps-related-order { color: inherit; font-weight: 700; }

.nps-attempts-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.nps-attempts-title { font-weight: 700; margin-bottom: 8px; font-size: 13px; }
.nps-attempts-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.nps-attempts-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
}
.nps-attempt-comment { flex-basis: 100%; color: var(--text-muted); margin-top: 2px; }

@media (max-width: 900px) {
    .nps-related-item { grid-template-columns: 1fr 1fr; gap: 6px; }
}

/* =========================================================
   NPS queue / operator UI refresh
   ========================================================= */

.nps-workspace {
    overflow: hidden;
}

.nps-workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 20px 0;
}

.nps-tabs {
    display: flex;
    gap: 6px;
}

.nps-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 8px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
}

.nps-tab:hover {
    background: var(--surface-soft);
    color: inherit;
}

.nps-tab-active {
    background: var(--surface-soft);
    color: var(--accent);
}

.nps-tab-count {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    border-radius: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    font-size: 12px;
}

.nps-tab-active .nps-tab-count {
    border-color: var(--accent);
}

.nps-analytics-link {
    color: var(--accent);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.nps-list-filters {
    display: flex;
    align-items: end;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border);
}

.nps-location-filter {
    width: 180px;
}

.nps-search-filter {
    flex: 1;
    max-width: 520px;
}

.nps-list-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px 8px;
}

.nps-list-heading > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}

.nps-list-heading h2 {
    margin: 0;
    font-size: 17px;
}

.nps-list-heading span {
    color: var(--text-muted);
    font-size: 13px;
}


/* Queue row */

.nps-task-list {
    display: grid;
}

.nps-task-card {
    display: grid;
    grid-template-columns: 74px minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;

    min-height: 94px;
    padding: 15px 20px;

    border-top: 1px solid var(--border);

    color: inherit;
    text-decoration: none;

    transition:
        background .12s ease,
        box-shadow .12s ease;
}

.nps-task-card:first-child {
    border-top: 0;
}

.nps-task-card:hover {
    background: var(--surface-soft);
}

.nps-task-card-overdue {
    box-shadow: inset 3px 0 0 #c84b4b;
}

.nps-task-date {
    display: grid;
    gap: 1px;
    align-content: center;
    text-align: center;
}

.nps-task-date strong {
    font-size: 18px;
    line-height: 1.1;
}

.nps-task-date > span {
    color: var(--text-muted);
    font-size: 11px;
}

.nps-callback-flag {
    margin-top: 5px;
    color: #a34d35;
    font-size: 10px;
    white-space: nowrap;
}

.nps-task-main {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.nps-task-client {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px 14px;
    min-width: 0;
}

.nps-task-client strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 15px;
}

.nps-task-client span {
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
}

.nps-task-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    color: var(--text-muted);
    font-size: 12px;
}

.nps-task-meta span:first-child {
    color: inherit;
    font-weight: 600;
}

.nps-task-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
}

.nps-task-action-label {
    color: var(--text-muted);
    font-size: 12px;
    white-space: nowrap;
}

.nps-task-action-callback {
    color: #a34d35;
    font-weight: 600;
}

.nps-task-arrow {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 17px;
}

.nps-task-card:hover .nps-task-arrow {
    color: var(--accent);
}

.nps-empty-state {
    display: grid;
    place-items: center;
    gap: 5px;
    min-height: 190px;
    padding: 30px;
    text-align: center;
}

.nps-empty-state strong {
    font-size: 16px;
}

.nps-empty-state span {
    color: var(--text-muted);
    font-size: 13px;
}


/* =========================================================
   NPS detail
   ========================================================= */

.nps-detail-back {
    margin-bottom: 12px;
}

.nps-detail-back a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13px;
}

.nps-detail-back a:hover {
    color: var(--accent);
}

.nps-detail-card {
    padding: 22px;
}

.nps-client-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 30px;
}

.nps-client-header h2 {
    margin: 0 0 7px;
    font-size: 22px;
}

.nps-client-phone {
    display: inline-block;
    color: var(--accent);
    text-decoration: none;
    font-size: 25px;
    line-height: 1.2;
    font-weight: 700;
}

.nps-client-vehicle {
    display: grid;
    gap: 5px;
    text-align: right;
}

.nps-client-vehicle strong {
    font-size: 16px;
}

.nps-client-vehicle span {
    color: var(--text-muted);
    font-size: 13px;
}

.nps-visit-summary {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 0;
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.nps-visit-summary > div {
    display: grid;
    gap: 5px;
    padding: 0 16px;
    border-left: 1px solid var(--border);
    min-width: 0;
}

.nps-visit-summary > div:first-child {
    padding-left: 0;
    border-left: 0;
}

.nps-visit-summary span {
    color: var(--text-muted);
    font-size: 11px;
}

.nps-visit-summary strong {
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.nps-result-card {
    margin-top: 14px;
    padding: 22px;
}

.nps-result-heading {
    margin-bottom: 22px;
}

.nps-result-heading h2 {
    margin: 0;
    font-size: 18px;
}

.nps-result-heading p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 13px;
}

.service-call-result-form {
    display: grid;
    gap: 22px;
}

.nps-field-label {
    margin-bottom: 9px;
    font-size: 13px;
    font-weight: 700;
}

.service-call-status-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.service-call-status-button {
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: inherit;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

.service-call-status-button:hover {
    background: var(--surface-soft);
}

.service-call-status-button.active {
    border-color: var(--accent);
    background: var(--surface-soft);
    color: var(--accent);
}

.service-call-status-success.active {
    border-color: #76b894;
    background: #edf8f2;
    color: #256a49;
}

.nps-score-field {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.nps-score-heading {
    display: flex;
    justify-content: space-between;
    gap: 30px;
}

.nps-score-heading p {
    margin: 3px 0 0;
    color: var(--text-muted);
    font-size: 12px;
}

.nps-score-heading > span {
    align-self: end;
    color: var(--text-muted);
    font-size: 11px;
    white-space: nowrap;
}

.nps-score-buttons {
    display: grid;
    grid-template-columns: repeat(11, minmax(42px, 1fr));
    gap: 7px;
}

.nps-score-buttons button {
    min-height: 46px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
}

.nps-score-buttons button:hover,
.nps-score-buttons button.active {
    border-color: var(--accent);
    background: var(--surface);
    color: var(--accent);
}

.nps-native-score,
.service-call-native-status {
    display: none;
}

.nps-comment-field textarea {
    width: 100%;
    min-height: 90px;
    resize: vertical;
}

.nps-related-confirm {
    display: grid;
    gap: 10px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-soft);
}

.nps-related-title {
    display: grid;
    gap: 4px;
}

.nps-related-title strong {
    font-size: 14px;
}

.nps-related-title span {
    color: var(--text-muted);
    font-size: 12px;
}

.nps-related-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    cursor: pointer;
}

.nps-related-check input {
    margin-top: 3px;
}

.nps-related-info {
    display: grid;
    gap: 3px;
}

.nps-related-info span {
    color: var(--text-muted);
    font-size: 12px;
}

.nps-form-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}

.service-call-save-button {
    min-width: 190px;
    min-height: 44px;
}

.nps-attempts-block {
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.nps-attempts-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
}

.nps-attempts-title span {
    color: var(--text-muted);
    font-weight: 500;
}

.nps-attempts-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nps-attempts-list li {
    padding: 11px 0;
    border-top: 1px solid var(--border);
}

.nps-attempts-list li:first-child {
    border-top: 0;
}

.nps-attempt-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    font-size: 12px;
}

.nps-attempt-row > span:not(.service-call-task-status) {
    color: var(--text-muted);
}

.nps-attempt-comment {
    margin-top: 6px;
    color: var(--text-muted);
    font-size: 12px;
}


/* Responsive */

@media (max-width: 1000px) {
    .nps-visit-summary {
        grid-template-columns: repeat(3, 1fr);
        row-gap: 18px;
    }

    .nps-visit-summary > div:nth-child(4) {
        border-left: 0;
        padding-left: 0;
    }
}

@media (max-width: 700px) {
    .nps-workspace-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .nps-list-filters {
        align-items: stretch;
        flex-direction: column;
    }

    .nps-location-filter,
    .nps-search-filter {
        width: 100%;
        max-width: none;
    }

    .nps-task-card {
        grid-template-columns: 55px minmax(0, 1fr) auto;
        gap: 10px;
        padding: 14px;
    }

    .nps-task-client {
        display: grid;
        gap: 3px;
    }

    .nps-task-meta {
        display: grid;
        gap: 3px;
    }

    .nps-task-action-label {
        display: none;
    }

    .nps-client-header {
        display: grid;
    }

    .nps-client-vehicle {
        text-align: left;
    }

    .nps-client-phone {
        font-size: 21px;
    }

    .nps-visit-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .nps-visit-summary > div {
        padding: 0 10px;
    }

    .nps-visit-summary > div:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }

    .nps-score-heading {
        display: grid;
        gap: 4px;
    }

    .nps-score-heading > span {
        white-space: normal;
    }

    .nps-score-buttons {
        grid-template-columns: repeat(6, 1fr);
    }

    .service-call-status-buttons {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .service-call-status-button {
        width: 100%;
    }
}
/* NPS detail — compact operator form */

.nps-result-card {
    max-width: 1050px;
}

.nps-result-card .service-call-result-form {
    max-width: 920px;
}

.service-call-status-buttons {
    width: fit-content;
}

.nps-score-field {
    width: fit-content;
    min-width: 620px;
    max-width: 100%;
}

.nps-score-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.nps-score-buttons button {
    width: 48px;
    min-width: 48px;
    height: 44px;
    padding: 0;
}

.service-call-callback-field {
    width: 320px;
    max-width: 100%;
}

.service-call-callback-field input {
    width: 100%;
}

.nps-comment-field {
    max-width: 920px;
}

.nps-form-actions {
    justify-content: flex-start;
}

.service-call-save-button {
    width: auto !important;
    min-width: 210px;
    padding-left: 24px;
    padding-right: 24px;
}

.nps-attempts-block {
    max-width: 920px;
}

/* ==========================================================================
   VEMAS: базовый responsive-каркас (общий, переиспользуется всеми приложениями).
   Desktop (>768px) остаётся как был; mobile (<=768px) включает off-canvas меню
   и компактную компоновку контента. Правила добавлены в конец файла, чтобы
   гарантированно перекрывать более ранние правила того же breakpoint.
   ========================================================================== */

/* Кнопки и подложка мобильного меню по умолчанию скрыты на desktop. */
.mobile-menu-toggle,
.sidebar-close,
.sidebar-backdrop {
    display: none;
}

/* Блок пользователя в нижней части sidebar и бренд страницы входа показываем
   только на mobile (off-canvas). На desktop они остаются скрытыми, чтобы
   внешний вид десктопной версии не менялся. */
.sidebar-user,
.service-login-brand {
    display: none;
}

/* --- Общие переиспользуемые responsive-классы ---------------------------- */

/* Контейнер страницы: убирает лишние отступы по краям на узких экранах. */
.vemas-container {
    min-width: 0;
}

/* Ряд действий/кнопок: на mobile разворачивается вертикально на всю ширину. */
.vemas-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

/* Обёртка фильтров: на mobile поля занимают всю доступную ширину. */
.vemas-filters {
    min-width: 0;
}

/* Обёртка таблицы с горизонтальной прокруткой только при необходимости. */
.vemas-table-scroll {
    overflow-x: auto;
    min-width: 0;
}

@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
    }

    /* Кнопка «☰» появляется в шапке на mobile. */
    .mobile-menu-toggle {
        display: inline-flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 12px;
        padding: 0;
        border: 1px solid var(--border);
        border-radius: 9px;
        background: var(--surface);
        color: var(--text);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }

    /* Сайдбар прячется за левый край и выезжает как панель/overlay. */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1200;
        width: 280px;
        max-width: 85vw;
        height: 100vh;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.22s ease;
    }

    body.sidebar-open .sidebar {
        transform: translateX(0);
    }

    /* Сайдбар теперь position:fixed (выезжает поверх контента) и вышел из
       grid-потока. Базовая раскладка .app-layout всё ещё резервирует под него
       колонку 240px (grid-template-columns: 240px minmax(0,1fr)), из-за чего
       .main-content сжимается на ширину скрытой панели и кажется, что сайдбар
       по-прежнему «остаётся слева». Сворачиваем сетку в одну колонку, чтобы
       контент занимал 100% доступной ширины. */
    .app-layout {
        /* Явно grid в одну колонку: контент всегда занимает 100% доступной
           ширины, сайдбар (fixed, off-canvas) не резервирует под себя колонку.
           display задаём явно, чтобы старые @media-правила не вернули
           display:block и не «вытащили» сайдбар в поток с узким контентом. */
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }

    /* Кнопка закрытия меню внутри сайдбара. */
    .sidebar-close {
        position: absolute;
        top: 14px;
        right: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #c2ced6;
        font-size: 26px;
        line-height: 1;
        cursor: pointer;
    }

    .sidebar-close:hover {
        color: #ffffff;
        background: var(--sidebar-hover);
    }

    .brand {
        padding-right: 44px;
    }

    /* Затемняющая подложка позади открытого меню. */
    body.sidebar-open .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1150;
        display: block;
        background: rgba(15, 23, 30, 0.5);
    }

    /* Запрещаем прокрутку страницы под открытым меню. */
    body.sidebar-open {
        overflow: hidden;
    }

    /* Меню внутри выезжающей панели остаётся вертикальным (перекрываем более
       ранний горизонтальный скролл на <=760px). */
    .navigation {
        flex-direction: column;
        align-items: stretch;
        overflow-x: visible;
    }

    .navigation-link {
        flex: none;
    }

    /* Общие responsive-классы на мобильной ширине. */
    .vemas-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .vemas-actions > * {
        width: 100%;
    }

    .vemas-filters {
        grid-template-columns: 1fr !important;
    }

    .vemas-container {
        padding-left: 0;
        padding-right: 0;
    }

    /* Надпись «Локальная версия» на mobile не показываем. */
    .sidebar-local-label {
        display: none;
    }

    /* Текущий пользователь/роль и текстовый выход внизу off-canvas меню. */
    .sidebar-user {
        display: block;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .sidebar-user-name {
        font-size: 14px;
        font-weight: 650;
        color: #ffffff;
    }

    .sidebar-user-role {
        margin-top: 2px;
        font-size: 12px;
        color: #9dafba;
    }

    /* «Выйти» — текстовая ссылка в стиле интерфейса, без стандартного
       HTML-вида кнопки (рамка/заливка убраны). */
    .sidebar-logout-form {
        margin-top: 12px;
    }

    .sidebar-logout-button {
        padding: 0;
        border: 0;
        background: none;
        color: #9dafba;
        font-size: 13px;
        line-height: inherit;
        cursor: pointer;
    }

    .sidebar-logout-button:hover {
        color: #ffffff;
        text-decoration: underline;
    }

    /* Страница входа на mobile: бренд VEMAS и форма на удобную ширину. */
    .service-login-panel {
        margin: 16px auto;
    }

    .service-login-brand {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 20px 16px 4px;
    }

    .service-login-brand-mark {
        display: grid;
        width: 40px;
        height: 40px;
        place-items: center;
        border-radius: 12px;
        background: var(--primary);
        color: #ffffff;
        font-size: 22px;
        font-weight: 800;
    }

    .service-login-brand-name {
        font-size: 22px;
        font-weight: 800;
        letter-spacing: 0.08em;
        line-height: 1.1;
    }

    .service-login-brand-subtitle {
        margin-top: 2px;
        color: #9dafba;
        font-size: 12px;
    }

    .service-login-form .dashboard-filter-button {
        width: 100%;
        min-height: 46px;
        justify-content: center;
    }
}

/* Блок «Доступы к модулям» в форме сотрудника (Этап 1 «Сотрудники и доступы»). */
.service-access-block-label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.service-access-block-label + .dashboard-filter-field {
    margin-top: 10px;
}

.form-hint {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--surface-muted);
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}