/* ============================================================
   CRM Admin — компактный интерфейс с фиксированными столбцами
   Для списка клиентов
   ============================================================ */

html, body { font-size: 13px !important; }

/* Основная таблица клиентов */
body.app-clients.model-client.change-list #result_list {
    table-layout: fixed !important;
    width: 100% !important;
    min-width: 1720px !important;
}

/* Общие ячейки */
body.app-clients.model-client.change-list #result_list th,
body.app-clients.model-client.change-list #result_list td {
    font-size: 12px !important;
    padding: 5px 6px !important;
    line-height: 1.2 !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Чекбокс */
body.app-clients.model-client.change-list #result_list th.action-checkbox-column,
body.app-clients.model-client.change-list #result_list td.action-checkbox { width: 28px !important; }

/* Название организации / ФИО */
body.app-clients.model-client.change-list #result_list th.column-name,
body.app-clients.model-client.change-list #result_list td.field-name { width: 220px !important; }

/* Организация договора */
body.app-clients.model-client.change-list #result_list th.column-service_company,
body.app-clients.model-client.change-list #result_list td.field-service_company { width: 130px !important; }

/* Объект / адрес обслуживания */
body.app-clients.model-client.change-list #result_list th.column-service_object,
body.app-clients.model-client.change-list #result_list td.field-service_object { width: 165px !important; }

body.app-clients.model-client.change-list #result_list th.column-connection_summary,
body.app-clients.model-client.change-list #result_list td.field-connection_summary { width: 180px !important; font-size: 11px !important; white-space: normal !important; overflow-wrap: anywhere !important; }

/* ИНН (уменьшенный шрифт) */
body.app-clients.model-client.change-list #result_list th.column-inn,
body.app-clients.model-client.change-list #result_list td.field-inn { width: 95px !important; font-size: 11px !important; }

/* Договор № (уменьшенный) */
body.app-clients.model-client.change-list #result_list th.column-contract_number,
body.app-clients.model-client.change-list #result_list td.field-contract_number { width: 85px !important; font-size: 11px !important; }

/* Дата подключения (уменьшенная, центрирована) */
body.app-clients.model-client.change-list #result_list th.column-connected_at,
body.app-clients.model-client.change-list #result_list td.field-connected_at { width: 110px !important; font-size: 11px !important; text-align: center !important; }

/* Телефон */
body.app-clients.model-client.change-list #result_list th.column-phone,
body.app-clients.model-client.change-list #result_list td.field-phone { width: 115px !important; font-size: 12px !important; }

/* Email */
body.app-clients.model-client.change-list #result_list th.column-email,
body.app-clients.model-client.change-list #result_list td.field-email { width: 150px !important; }

/* Фактический адрес */
body.app-clients.model-client.change-list #result_list th.column-actual_address,
body.app-clients.model-client.change-list #result_list td.field-actual_address { width: 180px !important; white-space: normal !important; word-break: break-word !important; }

/* Статус клиента */
body.app-clients.model-client.change-list #result_list th.column-status,
body.app-clients.model-client.change-list #result_list td.field-status { width: 80px !important; text-align: center !important; font-size: 12px !important; }

/* Тариф (уменьшенный, центрирован) */
body.app-clients.model-client.change-list #result_list th.column-tariff,
body.app-clients.model-client.change-list #result_list td.field-tariff { width: 50px !important; font-size: 11px !important; text-align: center !important; }

/* Сумма оплаты (уменьшенный, справа) */
body.app-clients.model-client.change-list #result_list th.column-payment_amount,
body.app-clients.model-client.change-list #result_list td.field-payment_amount { width: 85px !important; font-size: 11px !important; text-align: right !important; white-space: nowrap !important; }

/* Перенос текста для длинных полей */
body.app-clients.model-client.change-list #result_list td.field-name,
body.app-clients.model-client.change-list #result_list td.field-service_object,
body.app-clients.model-client.change-list #result_list td.field-connection_summary,
body.app-clients.model-client.change-list #result_list td.field-actual_address { white-space: normal !important; overflow-wrap: anywhere !important; word-break: normal !important; }

/* Горизонтальная прокрутка при узких экранах */
body.app-clients.model-client.change-list .results { overflow-x: auto !important; }

/* Ссылки в названии клиента */
body.app-clients.model-client.change-list #result_list td.field-name a { font-weight: 700 !important; line-height: 1.25 !important; }

body.app-clients.model-client.change-list #result_list td.field-name a,
body.app-clients.model-client.change-list #result_list th.field-name a,
body.app-clients.model-client.change-list #result_list tbody tr td:nth-child(2) a {
    color: #111827 !important;
}

body.app-clients.model-client.change-list #result_list td.field-name a:hover,
body.app-clients.model-client.change-list #result_list tbody tr td:nth-child(2) a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* ============================================================
   Global CRM theme override
   ============================================================ */

:root {
    --crm-bg: #f3f5f8;
    --crm-surface: #ffffff;
    --crm-surface-soft: #f8fafc;
    --crm-border: #d9e0e8;
    --crm-border-soft: #e8edf3;
    --crm-text: #172033;
    --crm-muted: #667085;
    --crm-accent: #246bfe;
    --crm-accent-hover: #1d57d0;
    --crm-sidebar: #111827;
    --crm-sidebar-active: #24324a;
}

html,
body {
    background: var(--crm-bg) !important;
    color: var(--crm-text) !important;
    font-size: 13px !important;
}

a { color: var(--crm-accent); }
a:hover { color: var(--crm-accent-hover); }

.wrapper,
.content-wrapper {
    background: var(--crm-bg) !important;
}

.content-wrapper,
.app-main {
    background:
        linear-gradient(180deg, #edf5ff 0, #e8eef7 260px, #e3ebf5 100%) !important;
}

.content,
.content .container-fluid {
    background: transparent !important;
}

.content-header {
    padding: 10px 16px 6px !important;
}

.content-header h1 {
    color: var(--crm-text) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
}

.content {
    padding: 0 16px 18px !important;
}

.main-header.navbar {
    background: var(--crm-surface) !important;
    border-bottom: 1px solid var(--crm-border) !important;
    min-height: 46px !important;
}

.main-header .nav-link,
.main-header .navbar-nav .nav-link {
    color: var(--crm-text) !important;
}

.main-sidebar,
.main-sidebar::before {
    background: var(--crm-sidebar) !important;
}

.brand-link {
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    min-height: 46px !important;
    padding: 10px 14px !important;
}

.brand-link .brand-text {
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.sidebar {
    padding: 8px !important;
}

.nav-sidebar .nav-item > .nav-link {
    border-radius: 6px !important;
    color: #cbd5e1 !important;
    margin-bottom: 2px !important;
    padding: 7px 9px !important;
}

.nav-sidebar .nav-item > .nav-link:hover,
.nav-sidebar .nav-item > .nav-link.active {
    background: var(--crm-sidebar-active) !important;
    color: #ffffff !important;
}

.nav-sidebar .nav-icon {
    color: #94a3b8 !important;
    font-size: 13px !important;
}

.card,
.module,
.inline-group {
    background: var(--crm-surface) !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
}

.card-header,
.module h2,
.inline-group h2 {
    background: var(--crm-surface-soft) !important;
    border-bottom: 1px solid var(--crm-border-soft) !important;
    color: var(--crm-text) !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    padding: 9px 12px !important;
}

.card-body {
    padding: 12px !important;
}

.btn,
input[type="submit"],
input[type="button"],
button {
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 10px !important;
}

.btn-primary,
input[type="submit"].default,
.submit-row input.default {
    background: var(--crm-accent) !important;
    border-color: var(--crm-accent) !important;
}

.btn-primary:hover,
input[type="submit"].default:hover,
.submit-row input.default:hover {
    background: var(--crm-accent-hover) !important;
    border-color: var(--crm-accent-hover) !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
select,
textarea {
    border: 1px solid var(--crm-border) !important;
    border-radius: 6px !important;
    color: var(--crm-text) !important;
    font-size: 13px !important;
    min-height: 32px !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--crm-accent) !important;
    box-shadow: 0 0 0 2px rgba(36, 107, 254, 0.12) !important;
}

label {
    color: var(--crm-text) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}

.help,
.help-block,
.text-muted {
    color: var(--crm-muted) !important;
}

.breadcrumb {
    background: transparent !important;
    font-size: 12px !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
}

.object-tools .btn,
.object-tools a {
    border-radius: 6px !important;
    font-size: 13px !important;
}

.submit-row {
    background: var(--crm-surface) !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: 8px !important;
    bottom: 0 !important;
    box-shadow: 0 -2px 8px rgba(15, 23, 42, 0.08) !important;
    padding: 8px 12px !important;
}

.results,
.change-list .results {
    background: var(--crm-surface) !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: 8px !important;
    overflow: auto !important;
}

#result_list {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin-bottom: 0 !important;
}

#result_list thead th {
    background: var(--crm-surface-soft) !important;
    border-bottom: 1px solid var(--crm-border) !important;
    color: var(--crm-muted) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em !important;
    padding: 7px 8px !important;
    text-transform: uppercase !important;
}

#result_list tbody td,
#result_list tbody th {
    border-bottom: 1px solid var(--crm-border-soft) !important;
    color: var(--crm-text) !important;
    padding: 7px 8px !important;
}

#result_list tbody tr:hover td,
#result_list tbody tr:hover th {
    background: #f5f8ff !important;
}

#changelist-search,
.actions,
.paginator,
.filtered #changelist-filter {
    background: var(--crm-surface) !important;
    border: 1px solid var(--crm-border) !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 4px rgba(15, 23, 42, 0.04) !important;
    padding: 8px 10px !important;
}

#changelist-filter h2,
#changelist-filter h3 {
    color: var(--crm-text) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}

#changelist-filter li {
    font-size: 12px !important;
}

/* Client list column tuning */
body.app-clients.model-client.change-list #result_list {
    min-width: 1420px !important;
}

body.app-clients.model-client.change-list #result_list th.column-name,
body.app-clients.model-client.change-list #result_list td.field-name {
    width: 310px !important;
}

body.app-clients.model-client.change-list #result_list th.column-service_company,
body.app-clients.model-client.change-list #result_list td.field-service_company {
    width: 118px !important;
}

body.app-clients.model-client.change-list #result_list th.column-service_object,
body.app-clients.model-client.change-list #result_list td.field-service_object {
    width: 155px !important;
}

body.app-clients.model-client.change-list #result_list th.column-inn_short,
body.app-clients.model-client.change-list #result_list td.field-inn_short {
    width: 82px !important;
    font-size: 11px !important;
}

body.app-clients.model-client.change-list #result_list th.column-contract_number_short,
body.app-clients.model-client.change-list #result_list td.field-contract_number_short {
    width: 76px !important;
    font-size: 11px !important;
}

body.app-clients.model-client.change-list #result_list th.column-connected_at_short,
body.app-clients.model-client.change-list #result_list td.field-connected_at_short {
    width: 70px !important;
    font-size: 11px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body.app-clients.model-client.change-list #result_list th.column-phone,
body.app-clients.model-client.change-list #result_list td.field-phone {
    width: 108px !important;
}

body.app-clients.model-client.change-list #result_list th.column-email,
body.app-clients.model-client.change-list #result_list td.field-email {
    width: 135px !important;
}

body.app-clients.model-client.change-list #result_list th.column-actual_address,
body.app-clients.model-client.change-list #result_list td.field-actual_address {
    width: 165px !important;
}

body.app-clients.model-client.change-list #result_list th.column-status,
body.app-clients.model-client.change-list #result_list td.field-status {
    width: 78px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

body.app-clients.model-client.change-list #result_list td.field-status > * {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.app-clients.model-client.change-list #result_list th.column-tariff_short,
body.app-clients.model-client.change-list #result_list td.field-tariff_short {
    width: 48px !important;
    font-size: 11px !important;
    text-align: center !important;
}

body.app-clients.model-client.change-list #result_list th.column-payment_amount_short,
body.app-clients.model-client.change-list #result_list td.field-payment_amount_short {
    width: 70px !important;
    font-size: 11px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Django/Jazzmin headers use generic "sorting" classes, so tune by column index too. */
body.app-clients.model-client.change-list #result_list th:nth-child(1),
body.app-clients.model-client.change-list #result_list td:nth-child(1) {
    width: 28px !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(2),
body.app-clients.model-client.change-list #result_list td:nth-child(2) {
    width: 195px !important;
}

/* Modern SaaS CRM skin */
:root {
    --crm-bg: #e8eef7;
    --crm-surface: #ffffff;
    --crm-surface-soft: #f4f8fd;
    --crm-border: #d8e2ec;
    --crm-border-soft: #e9eff6;
    --crm-text: #152238;
    --crm-muted: #66758a;
    --crm-accent: #2563eb;
    --crm-accent-hover: #1d4ed8;
    --crm-accent-soft: #e8f0ff;
    --crm-sidebar: #15233a;
    --crm-sidebar-active: #274b8f;
}

.content-wrapper {
    background:
        linear-gradient(180deg, #edf5ff 0, var(--crm-bg) 260px) !important;
}

.main-header.navbar {
    box-shadow: 0 1px 10px rgba(15, 23, 42, 0.06) !important;
}

.brand-link {
    background: linear-gradient(135deg, #0f172a 0%, #172554 100%) !important;
}

.brand-link .brand-text {
    letter-spacing: 0 !important;
}

.nav-sidebar .nav-item > .nav-link {
    transition: background 120ms ease, color 120ms ease, transform 120ms ease;
}

.nav-sidebar .nav-item > .nav-link:hover {
    transform: translateX(1px);
}

.nav-sidebar .nav-item > .nav-link.active {
    background: linear-gradient(135deg, var(--crm-sidebar-active), #2563eb) !important;
    box-shadow: inset 3px 0 0 #93c5fd !important;
}

.card,
.module,
.inline-group,
.results,
.change-list .results,
#changelist-search,
.actions,
.paginator,
.filtered #changelist-filter {
    border-color: rgba(148, 163, 184, 0.35) !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.055) !important;
}

.card-header,
.module h2,
.inline-group h2,
#result_list thead th {
    background: linear-gradient(180deg, #fbfdff 0%, var(--crm-surface-soft) 100%) !important;
}

#result_list thead th {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important;
}

#result_list tbody tr:nth-child(even) td,
#result_list tbody tr:nth-child(even) th {
    background: #fbfdff !important;
}

#result_list tbody tr:hover td,
#result_list tbody tr:hover th {
    background: var(--crm-accent-soft) !important;
}

#result_list td a,
#result_list th a {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
}

.btn-primary,
input[type="submit"].default,
.submit-row input.default,
.object-tools a.addlink,
.object-tools .btn-success {
    background: linear-gradient(135deg, #2563eb 0%, #0ea5e9 100%) !important;
    border-color: transparent !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.18) !important;
}

.btn-primary:hover,
input[type="submit"].default:hover,
.submit-row input.default:hover,
.object-tools a.addlink:hover,
.object-tools .btn-success:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0284c7 100%) !important;
}

.btn-secondary,
.btn-default {
    background: #f8fafc !important;
    border-color: var(--crm-border) !important;
    color: var(--crm-text) !important;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    border: 1px solid var(--crm-border) !important;
    border-radius: 6px !important;
    min-height: 32px !important;
}

.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="password"],
input[type="url"],
select,
textarea {
    background: #ffffff !important;
}

.form-control:hover,
input:hover,
select:hover,
textarea:hover {
    border-color: #b7c5d6 !important;
}

.badge,
.select2-selection__choice {
    border-radius: 999px !important;
}

.small-box,
.info-box {
    border-radius: 10px !important;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.07) !important;
}

/* Brand logo */
.brand-link .crm-brand-logo.brand-image {
    background: #ffffff !important;
    border-radius: 6px !important;
    box-shadow: none !important;
    float: none !important;
    height: 28px !important;
    max-height: 28px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    padding: 2px 4px !important;
    width: 78px !important;
}

.brand-link .brand-text {
    margin-left: 6px !important;
}

.login-logo img,
.login-page .crm-brand-logo {
    background: #ffffff !important;
    border-radius: 10px !important;
    max-height: 150px !important;
    object-fit: contain !important;
    padding: 10px !important;
    width: min(520px, 90vw) !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(3),
body.app-clients.model-client.change-list #result_list td:nth-child(3) {
    width: 105px !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(4),
body.app-clients.model-client.change-list #result_list td:nth-child(4) {
    width: 135px !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(5),
body.app-clients.model-client.change-list #result_list td:nth-child(5) {
    width: 80px !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(6),
body.app-clients.model-client.change-list #result_list td:nth-child(6) {
    width: 75px !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(7),
body.app-clients.model-client.change-list #result_list td:nth-child(7) {
    width: 66px !important;
    text-align: center !important;
    white-space: nowrap !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(8),
body.app-clients.model-client.change-list #result_list td:nth-child(8) {
    width: 105px !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(9),
body.app-clients.model-client.change-list #result_list td:nth-child(9) {
    width: 125px !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(10),
body.app-clients.model-client.change-list #result_list td:nth-child(10) {
    width: 150px !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(11),
body.app-clients.model-client.change-list #result_list td:nth-child(11) {
    width: 78px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(12),
body.app-clients.model-client.change-list #result_list td:nth-child(12) {
    width: 42px !important;
    text-align: center !important;
}

body.app-clients.model-client.change-list #result_list th:nth-child(13),
body.app-clients.model-client.change-list #result_list td:nth-child(13) {
    width: 62px !important;
    text-align: right !important;
    white-space: nowrap !important;
}

/* Company color markers */
.company-badge {
    border: 1px solid transparent;
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    max-width: 170px;
    padding: 4px 8px;
    white-space: nowrap;
}

.company-badge-ip_sapozhnichenko {
    background: #e8f7ef;
    border-color: #9bd8b8;
    color: #166534;
}

.company-badge-korptel {
    background: #e8f0ff;
    border-color: #aac3f5;
    color: #1d4ed8;
}

.company-badge-empty {
    background: #f3f4f6;
    border-color: #d1d5db;
    color: #4b5563;
}

.company-badge-review {
    background: #fff7ed;
    border-color: #fdba74;
    color: #9a3412;
}

.company-banner {
    border: 1px solid transparent;
    border-left-width: 6px;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 560px;
    padding: 10px 12px;
}

.company-banner-ip_sapozhnichenko {
    background: #f0fbf5;
    border-color: #86cfa9;
    color: #14532d;
}

.company-banner-korptel {
    background: #eef5ff;
    border-color: #93b4ed;
    color: #1e3a8a;
}

.company-banner-empty {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #374151;
}

.company-banner-title {
    font-size: 15px;
    font-weight: 800;
}

.company-banner-note {
    font-size: 12px;
    opacity: 0.78;
}

.company-contract-warning {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 8px;
    color: #9a3412;
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 7px 10px;
}

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

.port-control-actions .button {
    border-radius: 8px !important;
    font-weight: 700 !important;
    padding: 7px 10px !important;
}

.port-control-disable {
    background: #b42318 !important;
    border-color: #b42318 !important;
    color: #ffffff !important;
}

.port-control-enable {
    background: #166534 !important;
    border-color: #166534 !important;
    color: #ffffff !important;
}

.port-control-note {
    color: #5b6777;
    font-size: 12px;
}

/* Finance payments summary */
.payment-period-form {
    align-items: end;
    background: #ffffff;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    display: flex;
    gap: 10px;
    margin: 0 0 12px;
    padding: 12px;
}

.payment-period-form label {
    color: #5b6777;
    display: block;
    font-size: 12px;
    margin: 0 0 4px;
}

.payment-period-form select {
    min-width: 130px;
}

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

.payment-summary-card {
    background: #ffffff;
    border: 1px solid #d8e0ea;
    border-left: 4px solid #2f80ed;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    padding: 12px 14px;
}

.payment-summary-card-received {
    border-left-color: #219653;
}

.payment-summary-label {
    color: #5b6777;
    font-size: 12px;
    line-height: 1.25;
    min-height: 30px;
}

.payment-summary-value {
    color: #1f2937;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    margin-top: 8px;
    white-space: nowrap;
}

.unpaid-panel {
    background: #ffffff;
    border: 1px solid #d8e0ea;
    border-radius: 8px;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
    margin: 0 0 16px;
    overflow: hidden;
}

.unpaid-panel-header {
    align-items: center;
    border-bottom: 1px solid #e5ebf2;
    display: flex;
    justify-content: space-between;
    padding: 12px 14px;
}

.unpaid-panel-header h3 {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
}

.unpaid-panel-header p {
    color: #5b6777;
    font-size: 12px;
    margin: 4px 0 0;
}

.unpaid-table-wrap {
    overflow-x: auto;
}

.unpaid-table {
    margin: 0 !important;
}

.unpaid-table th,
.unpaid-table td {
    vertical-align: middle !important;
}

.unpaid-debt {
    color: #b42318;
    font-weight: 700;
    white-space: nowrap;
}

.unpaid-empty {
    color: #219653;
    font-weight: 600;
    padding: 14px;
}

.payment-reminder-form {
    margin: 0;
}

.payment-reminder-form .btn,
.payment-reminder-all-button {
    background: #f59e0b !important;
    border-color: #d97706 !important;
    color: #1f2937 !important;
    font-weight: 800 !important;
}

.payment-reminder-form .btn:hover,
.payment-reminder-all-button:hover {
    background: #d97706 !important;
    border-color: #b45309 !important;
    color: #111827 !important;
}

.payment-reminder-all-form {
    margin: 0;
}

.payment-reminder-all-button {
    white-space: nowrap;
}

.payment-reminder-muted {
    color: #667085;
    font-size: 12px;
    white-space: nowrap;
}

.sber-sync-card {
    max-width: 760px;
}

.sber-period-buttons {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0 16px;
}

.sber-sync-form p {
    margin-bottom: 12px;
}

/* Automation settings: make email templates comfortable to edit */
body.app-control_panel.model-featuresettings.change-form .content,
body.app-control_panel.model-featuresettings.change-form .container-fluid {
    max-width: none !important;
}

body.app-control_panel.model-featuresettings.change-form .col-12,
body.app-control_panel.model-featuresettings.change-form .col-md-12,
body.app-control_panel.model-featuresettings.change-form .col-lg-9,
body.app-control_panel.model-featuresettings.change-form .col-lg-12 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

body.app-control_panel.model-featuresettings.change-form .card,
body.app-control_panel.model-featuresettings.change-form .module {
    max-width: 1280px !important;
}

body.app-control_panel.model-featuresettings.change-form .form-row,
body.app-control_panel.model-featuresettings.change-form .form-group {
    max-width: 1160px !important;
}

body.app-control_panel.model-featuresettings.change-form input.automation-template-subject,
body.app-control_panel.model-featuresettings.change-form textarea.automation-template-body {
    box-sizing: border-box !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
    width: min(100%, 1100px) !important;
}

body.app-control_panel.model-featuresettings.change-form textarea.automation-template-body {
    min-height: 420px !important;
    resize: vertical !important;
}

/* Polished sidebar navigation */
#jazzy-sidebar,
#jazzy-sidebar::before,
.app-sidebar,
.app-sidebar::before,
.main-sidebar,
.main-sidebar::before {
    background:
        linear-gradient(180deg, #17253d 0%, #1d2f4d 48%, #203957 100%) !important;
}

#jazzy-sidebar .sidebar-brand,
.app-sidebar .sidebar-brand,
.brand-link {
    background: linear-gradient(135deg, #14233b 0%, #1f4b86 100%) !important;
    border-bottom: 1px solid rgba(148, 163, 184, 0.22) !important;
}

#jazzy-sidebar .sidebar-wrapper,
.app-sidebar .sidebar-wrapper,
.sidebar {
    padding: 10px 8px !important;
}

#jazzy-navigation,
.sidebar-menu,
.nav-sidebar {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
}

#jazzy-navigation > .nav-item,
.sidebar-menu > .nav-item,
.nav-sidebar > .nav-item {
    margin-bottom: 2px !important;
}

#jazzy-navigation > .nav-item > .nav-link,
.sidebar-menu > .nav-item > .nav-link,
.nav-sidebar > .nav-item > .nav-link {
    align-items: center !important;
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(148, 163, 184, 0.12) !important;
    border-radius: 8px !important;
    color: #dbeafe !important;
    font-weight: 750 !important;
    min-height: 34px !important;
    padding: 8px 10px !important;
}

#jazzy-navigation > .nav-item > .nav-link:hover,
.sidebar-menu > .nav-item > .nav-link:hover,
.nav-sidebar > .nav-item > .nav-link:hover {
    background: rgba(37, 99, 235, 0.26) !important;
    border-color: rgba(147, 197, 253, 0.32) !important;
    color: #ffffff !important;
    transform: none !important;
}

#jazzy-navigation > .nav-item.menu-open > .nav-link,
.sidebar-menu > .nav-item.menu-open > .nav-link,
.nav-sidebar > .nav-item.menu-open > .nav-link {
    background: linear-gradient(135deg, rgba(55, 105, 190, 0.88), rgba(34, 137, 160, 0.72)) !important;
    border-color: rgba(147, 197, 253, 0.42) !important;
    box-shadow: inset 3px 0 0 #93c5fd, 0 8px 18px rgba(2, 6, 23, 0.22) !important;
    color: #ffffff !important;
}

#jazzy-navigation > .nav-item > .nav-link.active,
.sidebar-menu > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
    background: linear-gradient(135deg, #2563eb 0%, #0891b2 100%) !important;
    border-color: rgba(191, 219, 254, 0.55) !important;
    box-shadow: inset 3px 0 0 #bfdbfe, 0 8px 18px rgba(37, 99, 235, 0.24) !important;
}

#jazzy-navigation > .nav-item > .nav-link .nav-icon,
.sidebar-menu > .nav-item > .nav-link .nav-icon,
.nav-sidebar > .nav-item > .nav-link .nav-icon {
    color: #93c5fd !important;
    margin-right: 7px !important;
    opacity: 1 !important;
    text-align: center !important;
    width: 18px !important;
}

#jazzy-navigation > .nav-item.menu-open > .nav-link .nav-icon,
#jazzy-navigation > .nav-item > .nav-link.active .nav-icon,
.sidebar-menu > .nav-item.menu-open > .nav-link .nav-icon,
.sidebar-menu > .nav-item > .nav-link.active .nav-icon,
.nav-sidebar > .nav-item.menu-open > .nav-link .nav-icon,
.nav-sidebar > .nav-item > .nav-link.active .nav-icon {
    color: #ffffff !important;
}

#jazzy-navigation .nav-treeview,
.sidebar-menu .nav-treeview,
.nav-sidebar .nav-treeview {
    background: rgba(8, 20, 38, 0.18) !important;
    border: 1px solid rgba(148, 163, 184, 0.10) !important;
    border-radius: 8px !important;
    margin: 4px 0 7px 8px !important;
    padding: 5px 4px 5px 8px !important;
}

#jazzy-navigation .nav-treeview .nav-item > .nav-link,
.sidebar-menu .nav-treeview .nav-item > .nav-link,
.nav-sidebar .nav-treeview .nav-item > .nav-link {
    background: transparent !important;
    border-left: 2px solid rgba(148, 163, 184, 0.18) !important;
    border-radius: 6px !important;
    color: #b9c7dc !important;
    font-weight: 600 !important;
    margin: 1px 0 !important;
    min-height: 30px !important;
    padding: 6px 8px 6px 11px !important;
}

#jazzy-navigation .nav-treeview .nav-item > .nav-link:hover,
.sidebar-menu .nav-treeview .nav-item > .nav-link:hover,
.nav-sidebar .nav-treeview .nav-item > .nav-link:hover {
    background: rgba(59, 130, 246, 0.18) !important;
    border-left-color: #60a5fa !important;
    color: #ffffff !important;
}

#jazzy-navigation .nav-treeview .nav-item > .nav-link.active,
.sidebar-menu .nav-treeview .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview .nav-item > .nav-link.active {
    background: #eaf2ff !important;
    border-left-color: #38bdf8 !important;
    color: #0f172a !important;
    font-weight: 800 !important;
}

#jazzy-navigation .nav-treeview .nav-icon,
.sidebar-menu .nav-treeview .nav-icon,
.nav-sidebar .nav-treeview .nav-icon {
    color: #7dd3fc !important;
    font-size: 11px !important;
    opacity: 0.95 !important;
}

#jazzy-navigation .nav-treeview .nav-link.active .nav-icon,
.sidebar-menu .nav-treeview .nav-link.active .nav-icon,
.nav-sidebar .nav-treeview .nav-link.active .nav-icon {
    color: #1d4ed8 !important;
}

#jazzy-navigation .nav-arrow,
.sidebar-menu .nav-arrow,
.nav-sidebar .right,
.nav-sidebar .fas.fa-angle-left.right,
.nav-sidebar .fas.fa-angle-down.right {
    color: #93c5fd !important;
    opacity: 0.95 !important;
}

#jazzy-navigation > .nav-header,
.sidebar-menu > .nav-header,
.nav-sidebar > .nav-header {
    color: #93a4bd !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 0.08em !important;
    margin: 10px 0 3px !important;
    padding: 8px 10px 4px !important;
    text-transform: uppercase !important;
}

#jazzy-sidebar .user-panel,
.app-sidebar .user-panel,
.sidebar .user-panel {
    border-bottom-color: rgba(148, 163, 184, 0.18) !important;
}

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

@media (max-width: 680px) {
    .payment-summary-grid {
        grid-template-columns: 1fr;
    }

    .payment-period-form {
        align-items: stretch;
        flex-direction: column;
    }
}

/* Calm CRM palette override */
:root {
    --crm-bg: #eef1f5;
    --crm-surface: #ffffff;
    --crm-surface-soft: #f7f8fa;
    --crm-border: #d9dee6;
    --crm-border-soft: #edf0f4;
    --crm-text: #1f2933;
    --crm-muted: #657183;
    --crm-accent: #3f6fa8;
    --crm-accent-hover: #315985;
    --crm-accent-soft: #eef4fb;
    --crm-sidebar: #273342;
    --crm-sidebar-active: #3b4a5e;
}

html,
body,
.wrapper,
.content-wrapper,
.app-main {
    background: #eef1f5 !important;
    color: var(--crm-text) !important;
}

.content-wrapper,
.app-main {
    background:
        linear-gradient(180deg, #f3f5f8 0, #eef1f5 260px, #e9edf2 100%) !important;
}

.main-header.navbar {
    background: #ffffff !important;
    border-bottom-color: #d8dee8 !important;
    box-shadow: 0 1px 8px rgba(31, 41, 51, 0.045) !important;
}

#jazzy-sidebar,
#jazzy-sidebar::before,
.app-sidebar,
.app-sidebar::before,
.main-sidebar,
.main-sidebar::before {
    background: linear-gradient(180deg, #2d3a4a 0%, #293545 55%, #253140 100%) !important;
}

#jazzy-sidebar .sidebar-brand,
.app-sidebar .sidebar-brand,
.brand-link {
    background: #263343 !important;
    border-bottom-color: rgba(226, 232, 240, 0.16) !important;
}

#jazzy-navigation > .nav-item > .nav-link,
.sidebar-menu > .nav-item > .nav-link,
.nav-sidebar > .nav-item > .nav-link {
    background: rgba(255, 255, 255, 0.045) !important;
    border-color: rgba(226, 232, 240, 0.09) !important;
    color: #d6dde7 !important;
}

#jazzy-navigation > .nav-item > .nav-link .nav-icon,
.sidebar-menu > .nav-item > .nav-link .nav-icon,
.nav-sidebar > .nav-item > .nav-link .nav-icon {
    color: #aeb9c8 !important;
}

#jazzy-navigation > .nav-item > .nav-link:hover,
.sidebar-menu > .nav-item > .nav-link:hover,
.nav-sidebar > .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, 0.09) !important;
    border-color: rgba(226, 232, 240, 0.18) !important;
    color: #ffffff !important;
}

#jazzy-navigation > .nav-item.menu-open > .nav-link,
.sidebar-menu > .nav-item.menu-open > .nav-link,
.nav-sidebar > .nav-item.menu-open > .nav-link,
#jazzy-navigation > .nav-item > .nav-link.active,
.sidebar-menu > .nav-item > .nav-link.active,
.nav-sidebar > .nav-item > .nav-link.active {
    background: #3d4c60 !important;
    border-color: rgba(226, 232, 240, 0.22) !important;
    box-shadow: inset 3px 0 0 #9fb2c8 !important;
    color: #ffffff !important;
}

#jazzy-navigation > .nav-item.menu-open > .nav-link .nav-icon,
#jazzy-navigation > .nav-item > .nav-link.active .nav-icon,
.sidebar-menu > .nav-item.menu-open > .nav-link .nav-icon,
.sidebar-menu > .nav-item > .nav-link.active .nav-icon,
.nav-sidebar > .nav-item.menu-open > .nav-link .nav-icon,
.nav-sidebar > .nav-item > .nav-link.active .nav-icon {
    color: #ffffff !important;
}

#jazzy-navigation .nav-treeview,
.sidebar-menu .nav-treeview,
.nav-sidebar .nav-treeview {
    background: rgba(15, 23, 42, 0.12) !important;
    border-color: rgba(226, 232, 240, 0.08) !important;
}

#jazzy-navigation .nav-treeview .nav-item > .nav-link,
.sidebar-menu .nav-treeview .nav-item > .nav-link,
.nav-sidebar .nav-treeview .nav-item > .nav-link {
    border-left-color: rgba(174, 185, 200, 0.24) !important;
    color: #c4ccd8 !important;
}

#jazzy-navigation .nav-treeview .nav-item > .nav-link:hover,
.sidebar-menu .nav-treeview .nav-item > .nav-link:hover,
.nav-sidebar .nav-treeview .nav-item > .nav-link:hover {
    background: rgba(255, 255, 255, 0.075) !important;
    border-left-color: #b9c6d6 !important;
    color: #ffffff !important;
}

#jazzy-navigation .nav-treeview .nav-item > .nav-link.active,
.sidebar-menu .nav-treeview .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview .nav-item > .nav-link.active {
    background: #f3f6f9 !important;
    border-left-color: #7d92aa !important;
    color: #1f2933 !important;
}

.card,
.module,
.inline-group,
.results,
.change-list .results,
#changelist-search,
.actions,
.paginator,
.filtered #changelist-filter {
    border-color: rgba(148, 163, 184, 0.30) !important;
    box-shadow: 0 6px 18px rgba(31, 41, 51, 0.045) !important;
}

.card-header,
.module h2,
.inline-group h2,
#result_list thead th {
    background: #f7f8fa !important;
}

#result_list tbody tr:hover td,
#result_list tbody tr:hover th {
    background: #eef4fb !important;
}

.btn-primary,
input[type="submit"].default,
.submit-row input.default,
.object-tools a.addlink,
.object-tools .btn-success {
    background: #3f6fa8 !important;
    border-color: #3f6fa8 !important;
    box-shadow: none !important;
}

.btn-primary:hover,
input[type="submit"].default:hover,
.submit-row input.default:hover,
.object-tools a.addlink:hover,
.object-tools .btn-success:hover {
    background: #315985 !important;
    border-color: #315985 !important;
}

.dadata-mass-check-form {
    display: inline-flex;
    margin: 0;
}

.dadata-mass-check-button {
    border-radius: 7px !important;
    font-weight: 700 !important;
    padding: 8px 14px !important;
    white-space: normal !important;
    text-align: center !important;
}

.dadata-fill-panel {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.dadata-fill-panel .button {
    border-radius: 7px !important;
    font-weight: 700 !important;
}

.dadata-fill-status {
    color: #64748b;
    font-size: 13px;
}

.dadata-fill-status.is-ok {
    color: #2f7d4f;
}

.dadata-fill-status.is-error {
    color: #b42318;
}

.dadata-fill-status.is-loading {
    color: #3f6fa8;
}

.dadata-fill-row-hidden {
    display: none !important;
}

.field-fill_from_dadata_button {
    display: none !important;
}

.dadata-inn-row > div,
.dadata-inn-row .flex-container,
.dadata-inn-row .form-row {
    align-items: center !important;
}

.dadata-fill-panel-inline {
    display: inline-flex !important;
    margin-left: 10px;
    vertical-align: middle;
}

.dadata-fill-panel-inline .button {
    min-height: 36px;
    padding: 7px 12px !important;
}

.dadata-fill-panel-inline .dadata-fill-status {
    max-width: 520px;
    line-height: 1.25;
}

.field-service_company .radiolist,
.field-service_company ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.field-service_company .radiolist li,
.field-service_company ul li {
    margin: 0 !important;
    padding: 0 !important;
}

.field-service_company .radiolist label,
.field-service_company ul label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #1f2933;
    font-weight: 700;
    cursor: pointer;
}

.field-service_company .radiolist label:has(input:checked),
.field-service_company ul label:has(input:checked) {
    border-color: #3f6fa8;
    background: #e8f0fa;
    box-shadow: inset 0 0 0 1px #3f6fa8;
}

.field-service_company input[type="radio"] {
    margin: 0;
}

.onec-documents-panel {
    max-width: 1180px;
    overflow-x: auto;
}

.onec-client-summary {
    max-width: 980px;
    padding: 14px 16px;
    border: 1px solid #d7e0ea;
    border-radius: 8px;
    background: #f8fafc;
    color: #1f2933;
    line-height: 1.6;
}

.onec-client-summary strong {
    color: #111827;
    font-size: 16px;
}

.onec-client-summary .button {
    margin-top: 8px;
}

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

.onec-reconciliation-actions .help {
    flex-basis: 100%;
    margin-bottom: 2px;
    color: #64748b;
}

.onec-reconciliation-actions .button {
    border-radius: 7px !important;
    font-weight: 700 !important;
}

.onec-documents-empty {
    max-width: 760px;
    padding: 12px 14px;
    border: 1px solid #d7e0ea;
    border-radius: 8px;
    background: #f8fafc;
    color: #475569;
}

.onec-documents-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    border: 1px solid #d7e0ea;
    border-radius: 8px;
    overflow: hidden;
}

.onec-documents-table th,
.onec-documents-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #e5ebf1;
    vertical-align: middle;
    white-space: nowrap;
}

.onec-documents-table th {
    background: #eef3f8;
    color: #24364a;
    font-weight: 700;
}

.onec-documents-table tr:last-child td {
    border-bottom: 0;
}

.onec-send-button {
    border-radius: 7px !important;
    font-weight: 700 !important;
    background: #2f7d4f !important;
    border-color: #2f7d4f !important;
    color: #ffffff !important;
}

.onec-send-button:hover {
    background: #276a43 !important;
    border-color: #276a43 !important;
}

body.app-network.model-lteclient.change-list td.field-client {
    min-width: 260px;
    max-width: 320px;
}

body.app-network.model-lteclient.change-list td.field-client .related-widget-wrapper {
    display: block !important;
    width: 260px !important;
    max-width: 260px !important;
}

body.app-network.model-lteclient.change-list td.field-client .select2-container,
body.app-network.model-lteclient.change-list td.field-client select {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
}

body.app-network.model-lteclient.change-list td.field-client .related-widget-wrapper-link {
    display: none !important;
}

.switch-visual {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: 14px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #111827;
}

body.app-network.model-equipment.change-form .switch-visual {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    box-sizing: border-box;
}

body.app-network.model-equipment.change-form .form-row.field-switch_visual {
    display: block !important;
}

body.app-network.model-equipment.change-form .form-row.field-unbound_clients_hint {
    display: block !important;
}

body.app-network.model-equipment.change-form .form-group.field-switch_visual > .row {
    display: block !important;
}

body.app-network.model-equipment.change-form .form-group.field-unbound_clients_hint > .row {
    display: block !important;
}

body.app-network.model-equipment.change-form .form-group.field-switch_visual .col-sm-3,
body.app-network.model-equipment.change-form .form-group.field-switch_visual .col-sm-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

body.app-network.model-equipment.change-form .form-group.field-switch_visual .col-form-label {
    display: block !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
    text-align: left !important;
}

body.app-network.model-equipment.change-form #equipment_form > .row > .col-12.col-lg-9,
body.app-network.model-equipment.change-form #equipment_form > .row > .col-12.col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

body.app-network.model-equipment.change-form #equipment_form .col-12.col-lg-3 {
    margin-top: 12px;
}

body.app-network.model-equipment.change-form #equipment_form .col-12.col-lg-3 .form-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

body.app-network.model-equipment.change-form #equipment_form .col-12.col-lg-3 .form-group .btn {
    flex: 1 1 220px;
}

body.app-network.model-equipment.change-form .submit-row {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 8px 0 0 !important;
    padding: 8px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.app-network.model-equipment.change-form #jazzy-actions {
    position: fixed !important;
    top: 72px !important;
    right: 24px !important;
    z-index: 1040 !important;
    width: auto !important;
    height: auto !important;
    padding: 8px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important;
}

body.app-network.model-equipment.change-form #jazzy-actions > .d-flex {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
}

body.app-network.model-equipment.change-form #jazzy-actions input[name="_addanother"],
body.app-network.model-equipment.change-form #jazzy-actions input[name="_continue"],
body.app-network.model-equipment.change-form #jazzy-actions input[value="Сохранить и добавить другой объект"],
body.app-network.model-equipment.change-form #jazzy-actions input[value="Сохранить и продолжить редактирование"] {
    display: none !important;
}

body.app-network.model-equipment.change-form #jazzy-actions input[name="_save"] {
    width: auto !important;
    min-width: 110px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
}

body.app-network.model-equipment.change-form #jazzy-actions .btn-danger,
body.app-network.model-equipment.change-form #jazzy-actions .deletelink,
body.app-network.model-equipment.change-form #jazzy-actions a[href*="/delete/"] {
    width: 38px !important;
    min-width: 38px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
}

body.app-network.model-equipment.change-form #jazzy-actions .btn-danger::after,
body.app-network.model-equipment.change-form #jazzy-actions .deletelink::after,
body.app-network.model-equipment.change-form #jazzy-actions a[href*="/delete/"]::after {
    content: "×";
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    line-height: 34px;
}

body.app-network.model-equipment.change-form .submit-row input[name="_addanother"],
body.app-network.model-equipment.change-form .submit-row input[name="_continue"],
body.app-network.model-equipment.change-form .submit-row input[value="Сохранить и добавить другой объект"],
body.app-network.model-equipment.change-form .submit-row input[value="Сохранить и продолжить редактирование"] {
    display: none !important;
}

body.app-network.model-equipment.change-form .submit-row input[name="_save"] {
    width: auto !important;
    min-width: 112px !important;
    height: 34px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
}

body.app-network.model-equipment.change-form .submit-row .deletelink,
body.app-network.model-equipment.change-form .submit-row a.deletelink {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #e11d48 !important;
    color: transparent !important;
    font-size: 0 !important;
    text-decoration: none !important;
}

body.app-network.model-equipment.change-form .submit-row .deletelink::after,
body.app-network.model-equipment.change-form .submit-row a.deletelink::after {
    content: "×";
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}

body.app-network.model-equipment.change-form .form-row.field-switch_visual > div,
body.app-network.model-equipment.change-form .form-row.field-switch_visual .readonly,
body.app-network.model-equipment.change-form .form-group.field-switch_visual .readonly {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
}

body.app-network.model-equipment.change-form .form-row.field-unbound_clients_hint > div,
body.app-network.model-equipment.change-form .form-row.field-unbound_clients_hint .readonly,
body.app-network.model-equipment.change-form .form-group.field-unbound_clients_hint .readonly {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
}

body.app-network.model-equipment.change-form .form-group.field-switch_visual {
    overflow: visible !important;
}

body.app-network.model-equipment.change-form .form-group.field-switch_visual .readonly {
    overflow: visible !important;
}

body.app-network.model-equipment.change-form .form-group.field-unbound_clients_hint,
body.app-network.model-equipment.change-form .form-group.field-unbound_clients_hint .readonly {
    overflow: visible !important;
}

body.app-network.model-equipment.change-form .form-row.field-switch_visual label {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin-bottom: 8px;
}

body.app-network.model-equipment.change-form .form-row.field-unbound_clients_hint label {
    display: block !important;
    float: none !important;
    width: auto !important;
    margin-bottom: 8px;
}

.switch-hero {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 12px;
    padding: 11px 14px;
    border-radius: 8px;
    background: #0f172a;
    color: #ffffff;
}

.switch-title {
    font-size: 18px;
    font-weight: 800;
}

.switch-subtitle {
    margin-top: 3px;
    color: #cbd5e1;
    font-size: 13px;
}

.switch-model {
    flex: 0 0 auto;
    padding: 6px 10px;
    border-radius: 999px;
    background: #1d4ed8;
    font-weight: 800;
    white-space: nowrap;
}

.switch-front-panel {
    display: flex;
    align-items: stretch;
    gap: 7px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.switch-access-ports {
    display: flex;
    gap: 7px;
    flex: 1 1 auto;
    min-width: 1260px;
}

.switch-rj45-group {
    flex: 1 1 0;
    min-width: 400px;
    padding: 6px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
}

.switch-extra-ports {
    display: flex;
    flex: 0 0 220px;
}

.switch-rj45-group-extra {
    flex: 1 1 auto;
    min-width: 220px;
}

.switch-rj45-group-extra .switch-group-grid-extra {
    grid-template-columns: repeat(2, minmax(82px, 1fr));
}

.switch-network-uplinks {
    display: grid;
    grid-template-rows: auto repeat(2, minmax(0, 1fr));
    gap: 6px;
    flex: 0 0 160px;
    padding: 6px;
    border: 2px solid #bbf7d0;
    border-radius: 8px;
    background: #f0fdf4;
}

.switch-group-title {
    margin-bottom: 4px;
    color: #334155;
    font-size: 11px;
    font-weight: 900;
    text-align: center;
}

.switch-group-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(82px, 1fr));
    gap: 5px;
}

.switch-port-pair {
    display: grid;
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 5px;
}

.switch-uplinks {
    display: grid;
    grid-template-rows: auto repeat(2, minmax(0, 1fr));
    gap: 7px;
    flex: 0 0 142px;
    padding-left: 10px;
    border-left: 3px solid #fb923c;
}

.switch-uplinks-title {
    align-self: center;
    justify-self: center;
    padding: 3px 8px;
    border-radius: 999px;
    background: #ffedd5;
    color: #c2410c;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0;
}

.switch-sfp-block {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    justify-items: center;
    flex: 0 0 230px;
    padding: 8px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: #f8fafc;
}

.switch-sfp-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    width: 100%;
}

.switch-sfp-row span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    border-radius: 7px;
    background: #111827;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
}

.switch-console {
    margin-top: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    background: #fee2e2;
    color: #dc2626;
    font-size: 10px;
    font-weight: 900;
}

.switch-port-card {
    min-height: 82px;
    padding: 5px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.07);
    overflow: hidden;
}

.switch-port-access {
    border-top: 4px solid #2563eb;
}

.switch-port-bound {
    background: #eff6ff;
}

.switch-port-active {
    background: #ecfdf5;
    border-top: 4px solid #22c55e;
}

.switch-port-active .switch-port-number {
    background: #15803d;
}

.switch-port-active .switch-port-vlan {
    color: #15803d;
}

.switch-port-active .switch-port-mode {
    color: #15803d;
}

.switch-port-free {
    background: #fffbeb;
    border-color: #fde68a;
    border-top: 4px solid #f59e0b;
    opacity: 0.96;
}

.switch-port-free .switch-port-number {
    background: #f59e0b;
}

.switch-port-free .switch-port-vlan {
    color: #92400e;
}

.switch-port-free .switch-port-mode {
    color: #92400e;
}

.switch-port-disabled {
    background: #f1f5f9;
    border-color: #cbd5e1;
    border-top: 4px solid #94a3b8;
    opacity: 0.86;
}

.switch-port-disabled .switch-port-number {
    background: #b91c1c;
}

.switch-port-disabled .switch-port-vlan,
.switch-port-disabled .switch-port-mode {
    color: #b91c1c;
}

.switch-port-uplink {
    background: #ecfdf5;
    border-top: 4px solid #10b981;
}

.switch-port-uplink .switch-port-number {
    background: #047857;
}

.switch-port-uplink .switch-port-vlan {
    color: #047857;
}

.switch-port-uplink .switch-port-mode {
    color: #047857;
}

.switch-uplink-card .switch-port-number {
    width: auto;
    min-width: 58px;
    padding: 0 5px;
    font-size: 10px;
}

.switch-port-trunk {
    background: #fff7ed;
    border-top: 4px solid #f97316;
}

.switch-port-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

.switch-port-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 20px;
    border-radius: 4px;
    background: #111827;
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
}

.switch-port-mode {
    color: #64748b;
    font-size: 10px;
    font-weight: 800;
}

.switch-port-vlan {
    margin-bottom: 4px;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.switch-port-client {
    min-height: 24px;
    margin-bottom: 5px;
    font-size: 10px;
    line-height: 1.18;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.switch-muted {
    color: #64748b;
}

.switch-port-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-bottom: 0;
}

.switch-port-meta span {
    display: flex;
    width: 100%;
    max-width: 100%;
    padding: 2px 4px;
    border-radius: 999px;
    background: #e2e8f0;
    color: #334155;
    font-size: 9px;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
}

.switch-vlan-details {
    margin-top: 14px;
}

.switch-vlan-details summary {
    cursor: pointer;
    color: #1d4ed8;
    font-weight: 800;
}

.switch-vlan-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    background: #ffffff;
}

.switch-vlan-table th,
.switch-vlan-table td {
    padding: 6px 8px;
    border: 1px solid #dbe4ef;
    font-size: 12px;
    vertical-align: top;
}

.switch-vlan-table th {
    background: #e2e8f0;
    color: #1f2937;
}

.equipment-unbound-clients {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    background: #eff6ff;
}

body.app-network.model-equipment.change-form .equipment-unbound-clients {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    transform: none;
    overflow-x: auto;
    box-sizing: border-box;
}

.equipment-unbound-clients-empty {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #166534;
}

.equipment-unbound-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
    color: #1e3a8a;
}

.equipment-unbound-header span {
    color: #475569;
    font-size: 12px;
}

.equipment-unbound-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

.equipment-unbound-table th,
.equipment-unbound-table td {
    padding: 7px 8px;
    border-bottom: 1px solid #dbeafe;
    font-size: 12px;
    vertical-align: middle;
}

.equipment-unbound-table th {
    color: #334155;
    background: #dbeafe;
    font-weight: 800;
}

.equipment-unbound-action {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff !important;
    font-size: 11px;
    font-weight: 800;
    text-decoration: none !important;
    white-space: nowrap;
}

.switch-visual-real {
    padding: 10px;
    border-color: #b8c4d2;
    background: linear-gradient(180deg, #eef3f8 0%, #dfe7ef 100%);
}

.switch-visual-real .switch-hero {
    margin-bottom: 8px;
    border-radius: 7px 7px 3px 3px;
    background: linear-gradient(180deg, #111827 0%, #020617 100%);
}

.switch-visual-real .switch-front-panel {
    position: relative;
    align-items: center;
    gap: 10px;
    min-height: 176px;
    padding: 14px 12px;
    border: 2px solid #c8d0da;
    border-radius: 4px 4px 14px 14px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(241, 245, 249, 0.95) 45%, rgba(226, 232, 240, 0.98) 100%),
        repeating-linear-gradient(90deg, rgba(148, 163, 184, 0.16) 0 1px, transparent 1px 24px);
    box-shadow:
        inset 0 8px 18px rgba(255, 255, 255, 0.7),
        inset 0 -10px 18px rgba(15, 23, 42, 0.08),
        0 8px 20px rgba(15, 23, 42, 0.08);
}

.switch-visual-real .switch-led-panel {
    display: none;
    grid-template-columns: 26px repeat(4, 10px);
    grid-auto-rows: 12px;
    align-content: center;
    gap: 8px 7px;
    flex: 0 0 86px;
    padding: 8px 6px;
    border-right: 1px solid #cbd5e1;
}

.switch-led-panel span {
    width: 9px;
    height: 9px;
    align-self: center;
    justify-self: center;
    border-radius: 999px;
    background: radial-gradient(circle at 35% 35%, #bbf7d0 0%, #22c55e 46%, #15803d 100%);
    box-shadow: 0 0 5px rgba(34, 197, 94, 0.55);
}

.switch-led-panel span:nth-of-type(3n) {
    background: radial-gradient(circle at 35% 35%, #e2e8f0 0%, #94a3b8 55%, #64748b 100%);
    box-shadow: none;
}

.switch-led-label {
    color: #64748b;
    font-size: 9px;
    font-weight: 900;
    line-height: 12px;
    text-align: right;
}

.switch-visual-real .switch-access-ports {
    width: 100%;
    min-width: 0;
    gap: 8px;
}

.switch-visual-real .switch-rj45-group {
    flex: 1 1 0;
    min-width: 0;
    padding: 16px 8px 8px;
    border: 1px solid #aeb9c7;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.58);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.switch-visual-real .switch-group-title {
    margin: -13px 0 5px;
    color: #334155;
    font-size: 10px;
}

.switch-visual-real .switch-group-grid {
    grid-template-columns: repeat(4, minmax(54px, 1fr));
    gap: 6px;
}

.switch-visual-real .switch-port-pair {
    gap: 6px;
}

.switch-visual-real .switch-port-card {
    position: relative;
    min-height: 74px;
    padding: 18px 5px 5px;
    border: 1px solid #94a3b8;
    border-top: 3px solid #2563eb;
    border-radius: 5px;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.96) 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.75),
        0 1px 3px rgba(15, 23, 42, 0.12);
}

.switch-visual-real .switch-port-card::before {
    display: none;
}

.switch-visual-real .switch-port-card::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 6px;
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 5px rgba(37, 99, 235, 0.55);
}

.switch-visual-real .switch-port-active::after,
.switch-visual-real .switch-port-bound::after {
    background: #22c55e;
    box-shadow: 0 0 6px rgba(34, 197, 94, 0.72);
}

.switch-visual-real .switch-port-active,
.switch-visual-real .switch-port-bound {
    border-color: #22c55e;
    border-top-color: #22c55e;
    background: linear-gradient(180deg, #dcfce7 0%, #ecfdf5 100%);
}

.switch-visual-real .switch-port-free {
    border-color: #f59e0b;
    border-top-color: #f59e0b;
    background: linear-gradient(180deg, #fef3c7 0%, #fffbeb 100%);
    opacity: 1;
}

.switch-visual-real .switch-port-active .switch-port-vlan,
.switch-visual-real .switch-port-bound .switch-port-vlan,
.switch-visual-real .switch-port-active .switch-port-client a,
.switch-visual-real .switch-port-bound .switch-port-client a {
    color: #047857 !important;
}

.switch-visual-real .switch-port-free .switch-port-vlan,
.switch-visual-real .switch-port-free .switch-port-client a {
    color: #92400e !important;
}

.switch-visual-real .switch-port-free::after,
.switch-visual-real .switch-port-disabled::after {
    background: #94a3b8;
    box-shadow: none;
}

.switch-visual-real .switch-port-free::after {
    background: #f59e0b;
    box-shadow: 0 0 6px rgba(245, 158, 11, 0.55);
}

.switch-visual-real .switch-port-trunk::after,
.switch-visual-real .switch-port-uplink::after {
    background: #f97316;
    box-shadow: 0 0 6px rgba(249, 115, 22, 0.58);
}

.switch-visual-real .switch-port-head {
    position: absolute;
    top: 4px;
    left: 17px;
    margin: 0;
}

.switch-visual-real .switch-port-number {
    width: auto;
    min-width: 18px;
    height: 14px;
    padding: 0 4px;
    border-radius: 3px;
    background: transparent;
    color: #0f172a;
    font-size: 9px;
}

.switch-visual-real .switch-port-vlan {
    margin-bottom: 3px;
    font-size: 10px;
    line-height: 1.1;
}

.switch-visual-real .switch-port-client {
    min-height: 22px;
    margin-bottom: 4px;
    font-size: 9px;
    line-height: 1.15;
}

.switch-visual-real .switch-port-meta span {
    padding: 2px 4px;
    font-size: 8px;
}

.switch-visual-real .switch-extra-ports {
    flex: 0 0 184px;
}

.switch-visual-real .switch-rj45-group-extra {
    min-width: 178px;
}

.switch-visual-real .switch-rj45-group-extra .switch-group-grid-extra {
    grid-template-columns: repeat(2, minmax(64px, 1fr));
}

.switch-visual-real .switch-network-uplinks {
    flex: 0 0 142px;
    padding: 16px 8px 8px;
    border-color: #fdba74;
    background: rgba(255, 247, 237, 0.78);
}

.switch-visual-real .switch-console-panel {
    display: none;
    grid-template-rows: 1fr auto;
    align-items: center;
    justify-items: center;
    flex: 0 0 78px;
    height: 142px;
    padding: 10px 8px;
    border-left: 1px solid #cbd5e1;
}

.switch-console-jack {
    width: 38px;
    height: 28px;
    border: 3px solid #111827;
    border-radius: 4px;
    background:
        linear-gradient(180deg, #020617 0 62%, #1f2937 62% 100%);
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, 0.16);
}

.switch-visual-real .switch-console {
    margin-top: 6px;
    background: #fee2e2;
}

@media (max-width: 1200px) {
    .switch-front-panel {
        grid-template-columns: repeat(auto-fill, minmax(145px, 1fr));
    }
}

/* Equipment object page: topology and port schemes are full-width work surfaces. */
body.app-network.model-equipmentobject.change-form #equipmentobject_form > .row > .col-12.col-lg-9,
body.app-network.model-equipmentobject.change-form #equipmentobject_form > .row > .col-12.col-lg-3 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

body.app-network.model-equipmentobject.change-form #equipmentobject_form .col-12.col-lg-3 {
    margin-top: 8px !important;
}

body.app-network.model-equipmentobject.change-form .form-group.field-object_topology_panel > .row,
body.app-network.model-equipmentobject.change-form .form-group.field-equipment_schemas_panel > .row {
    display: block !important;
}

body.app-network.model-equipmentobject.change-form .form-group.field-object_topology_panel .col-sm-3,
body.app-network.model-equipmentobject.change-form .form-group.field-equipment_schemas_panel .col-sm-3,
body.app-network.model-equipmentobject.change-form .form-row.field-object_topology_panel label,
body.app-network.model-equipmentobject.change-form .form-row.field-equipment_schemas_panel label {
    display: none !important;
}

body.app-network.model-equipmentobject.change-form .form-group.field-object_topology_panel .col-sm-9,
body.app-network.model-equipmentobject.change-form .form-group.field-equipment_schemas_panel .col-sm-9,
body.app-network.model-equipmentobject.change-form .form-row.field-object_topology_panel > div,
body.app-network.model-equipmentobject.change-form .form-row.field-equipment_schemas_panel > div,
body.app-network.model-equipmentobject.change-form .form-row.field-object_topology_panel .readonly,
body.app-network.model-equipmentobject.change-form .form-row.field-equipment_schemas_panel .readonly,
body.app-network.model-equipmentobject.change-form .form-group.field-object_topology_panel .readonly,
body.app-network.model-equipmentobject.change-form .form-group.field-equipment_schemas_panel .readonly {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    flex: 0 0 100% !important;
}

body.app-network.model-equipmentobject.change-form .form-group.field-object_topology_panel,
body.app-network.model-equipmentobject.change-form .form-group.field-equipment_schemas_panel,
body.app-network.model-equipmentobject.change-form .form-group.field-object_topology_panel .readonly,
body.app-network.model-equipmentobject.change-form .form-group.field-equipment_schemas_panel .readonly {
    overflow: visible !important;
}

body.app-network.model-equipmentobject.change-form #jazzy-actions {
    position: fixed !important;
    top: 72px !important;
    right: 24px !important;
    z-index: 1040 !important;
    width: auto !important;
    height: auto !important;
    padding: 8px !important;
    border: 1px solid #dbe4ef !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14) !important;
}

body.app-network.model-equipmentobject.change-form #jazzy-actions > .d-flex {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 8px !important;
    width: auto !important;
    height: auto !important;
}

body.app-network.model-equipmentobject.change-form #jazzy-actions input[name="_addanother"],
body.app-network.model-equipmentobject.change-form #jazzy-actions input[name="_continue"],
body.app-network.model-equipmentobject.change-form .submit-row input[name="_addanother"],
body.app-network.model-equipmentobject.change-form .submit-row input[name="_continue"] {
    display: none !important;
}

body.app-network.model-equipmentobject.change-form #jazzy-actions input[name="_save"],
body.app-network.model-equipmentobject.change-form .submit-row input[name="_save"] {
    width: auto !important;
    min-width: 112px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
}

body.app-network.model-equipmentobject.change-form #jazzy-actions .btn-danger,
body.app-network.model-equipmentobject.change-form #jazzy-actions .deletelink,
body.app-network.model-equipmentobject.change-form #jazzy-actions a[href*="/delete/"],
body.app-network.model-equipmentobject.change-form .submit-row .deletelink,
body.app-network.model-equipmentobject.change-form .submit-row a.deletelink {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #e11d48 !important;
    overflow: hidden !important;
    color: transparent !important;
    font-size: 0 !important;
    text-decoration: none !important;
}

body.app-network.model-equipmentobject.change-form #jazzy-actions .btn-danger::after,
body.app-network.model-equipmentobject.change-form #jazzy-actions .deletelink::after,
body.app-network.model-equipmentobject.change-form #jazzy-actions a[href*="/delete/"]::after,
body.app-network.model-equipmentobject.change-form .submit-row .deletelink::after,
body.app-network.model-equipmentobject.change-form .submit-row a.deletelink::after {
    content: "×";
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
}