/* Основные стили приложения - современный компактный дизайн */

/* Переменные */
:root {
    --primary-color: #1a5f2a;
    --header-height: 60px;
    --primary-dark: #0d3d15;
    --primary-light: #2d8a42;
    --secondary-color: #f0f2f5;
    --accent-color: #ff6b00;
    --text-color: #1a1a2e;
    --text-light: #6b7280;
    --border-color: #e5e7eb;
    --background-color: #f5f7fa;
    --card-background: #ffffff;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --error-color: #ef4444;
    --compensation-color: #2563eb;
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --loader-bg: rgba(255, 255, 255, 0.95);
}

/* Сброс стилей */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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

/* Accessibility - visually hidden (for screen readers) */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.5;
    color: var(--text-color);
    background-color: var(--background-color);
    min-height: 100vh;
    /* Prevent automatic text size adjustment on orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Prevent zoom on input focus for mobile devices */
input, select, textarea {
    font-size: 16px;
    -webkit-appearance: none;
    appearance: none;
}

/* Touch-friendly improvements for mobile */
@media (max-width: 768px) {
    input, select, textarea {
        /* Ensure minimum 16px font size to prevent iOS zoom */
        font-size: 16px !important;
        min-height: 44px;
    }

    /* Prevent double-tap zoom on interactive elements */
    button, a, .equipment-item, [role="button"] {
    }
}

/* Контейнер приложения */
.app-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    min-height: 100vh;
    padding-top: 80px;
}

/* Компактный заголовок */
.app-header {
    padding: 0 20px;
    height: var(--header-height);
    box-sizing: border-box;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    margin: 0;
    border-radius: 0;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
}

/* Центрированная секция заголовка */
.header-centered-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}

.header-left-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.header-right-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.header-title-block {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

/* Кнопка перехода к сохранённым расчётам в header */
.header-calculations-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    flex-shrink: 0;
}

.header-calculations-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.header-calculations-btn:active {
    transform: scale(0.95);
}

.header-calculations-btn svg {
    width: 13px;
    height: 13px;
}

/* Кнопка-стрелка перехода к утилитам в header */
.header-utilities-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    flex-shrink: 0;
}

.header-utilities-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.header-utilities-btn:active {
    transform: scale(0.95);
}

.header-utilities-btn svg {
    width: 13px;
    height: 13px;
}

#app-title {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    white-space: nowrap;
}

/* Контейнер версий расчета */
.versions-container {
    display: none;
    align-items: center;
    gap: 6px;
}

.versions-buttons {
    display: flex;
    align-items: center;
    gap: 4px;
}

.version-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-sm);
    color: white;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.version-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.version-btn.active {
    background: rgba(255, 255, 255, 0.35);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
}

.version-btn.dirty::after {
    content: '';
    position: absolute;
    top: 4px;
    right: 4px;
    width: 6px;
    height: 6px;
    background: var(--warning-color);
    border-radius: 50%;
    border: 1px solid white;
}

.version-add-btn {
    min-width: 32px;
    height: 32px;
    padding: 0;
    background: rgba(255, 255, 255, 0.2);
    border: 1px dashed rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.version-add-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    border-style: solid;
}

.version-add-btn svg {
    width: 14px;
    height: 14px;
}

.version-btn.is-active-version {
    position: relative;
}

.version-btn.is-active-version::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 2px;
    background: var(--success-color, #22c55e);
    border-radius: 1px;
}

.header-actions-block {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.header-action-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    white-space: nowrap;
    line-height: 1;
    height: 34px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.header-action-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Кнопка отмены */
.header-undo-btn {
    padding: 8px 12px;
    min-width: 34px;
}

.header-undo-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

.header-undo-btn:not(:disabled):hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

.header-undo-btn:not(:disabled):active {
    transform: scale(0.95);
}

/* Цветовые темы header для разных версий расчета */
/* Версия 1 (по умолчанию) - зеленая */
.app-header {
    padding: 0 20px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
}

/* Версия 2 - оранжевая */
.app-header.version-2 {
    background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
}

/* Версия 3 - фиолетовая */
.app-header.version-3 {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

/* Версия 4 - красная */
.app-header.version-4 {
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
}

/* Версия 5 - голубая */
.app-header.version-5 {
    background: linear-gradient(135deg, #0ea5e9 0%, #0369a1 100%);
}

.app-header h1 {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin: 0;
    white-space: nowrap;
}

/* Кнопка сохранения в заголовке - КРАСНАЯ (сохраняет текущую версию как главную) */
.header-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 34px;
    min-width: auto;
    background: rgba(239, 68, 68, 0.7);
    border: 1px solid rgba(239, 68, 68, 0.9);
    border-radius: var(--radius-sm);
    color: white;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 8px 16px;
    vertical-align: middle;
    white-space: nowrap;
    font-size: 0.85rem;
    line-height: 1;
    box-sizing: border-box;
}

.header-save-btn:hover {
    background: rgba(239, 68, 68, 0.9);
    border-color: rgba(239, 68, 68, 1);
}

.header-save-btn:active {
    background: rgba(220, 38, 38, 1);
    transform: scale(0.95);
}

.header-save-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.header-save-btn .save-btn-text {
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

/* Анимация появления кнопки */
@keyframes fadeInButton {
    from {
        opacity: 0;
        transform: translateX(-10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.header-save-btn.visible {
    display: inline-flex;
    animation: fadeInButton 0.2s ease forwards;
}

.brand-info {
    font-size: 0.85rem;
    opacity: 0.9;
    font-weight: 500;
}

.header-right-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Менеджер dropdown */
.manager-dropdown {
    position: relative;
    z-index: 10;
}

/* Инструменты dropdown */
.tools-dropdown {
    position: relative;
    z-index: 10;
}

/* Стили для кнопок меню (общие) */
.manager-btn,
.tools-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
    z-index: 10;
}

.manager-btn:hover,
.tools-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.4);
}

/* Admin styling - убрана золотая тема, используется стандартный стиль как у всех пользователей */
/* Цветовые темы применяются через классы version-2, version-3, version-4, version-5 */

.manager-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px;
    width: 101px;
    min-width: 120px;
    display: none;
    z-index: 1000;
}

.manager-menu.open {
    display: block;
}

/* Меню инструментов */
.tools-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    width: 108px;
    min-width: 108px;
    display: none;
    z-index: 1000;
}

.tools-menu.open {
    display: block;
}

.tools-menu-btn {
    display: block;
    width: 100%;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tools-menu-btn:last-child {
    margin-bottom: 0;
}

.tools-menu-btn:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

/* Секция гостя */
.manager-guest {
    text-align: center;
    padding: 8px 0;
}

/* Секция авторизованного пользователя */
.manager-user {
    text-align: center;
}

.manager-user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 8px;
}

.manager-user-phone {
    font-size: 0.75rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Кнопка выхода в меню менеджера */
#btn-logout {
    width: 100%;
    padding: 6px 8px;
    font-size: 0.8rem;
}

.manager-field {
    margin-bottom: 12px;
}

.manager-field:last-child {
    margin-bottom: 0;
}

.manager-field label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 4px;
}

.manager-field .form-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 16px;
    min-height: 44px;
}

.manager-field .form-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.menu-divider {
    height: 1px;
    background: var(--border-color);
    margin: 4px 8px;
}

/* Кнопки сохранения и загрузки в меню менеджера */
.manager-menu .manager-action-btn {
    display: block;
    width: calc(100% - 16px);
    margin: 0 8px;
    padding: 8px 10px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-color);
    text-align: left;
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: inherit;
}

.manager-menu .manager-action-btn:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.manager-menu .manager-action-btn.btn-save:hover {
    color: var(--success-color);
}

.manager-menu .manager-action-btn.btn-load:hover {
    color: var(--compensation-color);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Основной контент */
.app-main {
    flex: 1;
}

/* Двухколоночный макет */
.app-columns {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 20px;
    align-items: start;
}

.data-column {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.results-column {
    position: sticky;
    top: 80px;
}

/* Компактные секции */
.selection-section,
.transaction-section,
.client-info-section {
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition-normal);
}

.selection-section:hover,
.transaction-section:hover,
.client-info-section:hover {
    box-shadow: var(--shadow-md);
}

.selection-section h2,
.transaction-section h2,
.client-info-section h2,
.equipment-spoiler-title h2 {
    font-size: 0.95rem;
    color: var(--primary-color);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Сетки форм - компактные */
.car-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
}

.transaction-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    align-items: start;
}

/* Компактные группы форм */
.form-group {
    display: flex;
    flex-direction: column;
    min-height: 52px;
    margin-bottom: 2px;
}

.form-group label {
    font-weight: 500;
    margin-bottom: 4px;
    color: var(--text-color);
    font-size: 0.75rem;
}

.form-select,
.form-input {
    padding: 8px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 14px;
    background-color: white;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    appearance: none;
    width: 100%;
    min-height: 40px;
    /* Prevent iOS Safari from adjusting font size on orientation change */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath fill='%23666' d='M7 9L2 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.form-select:focus,
.form-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.1);
}

.form-select:disabled,
.form-input:disabled {
    background-color: #f8f9fa;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Контейнер для двух полей скидки (адаптивный) */
.discount-inputs-container {
    display: flex;
    gap: 8px;
    width: 100%;
}

.discount-inputs-container #additional-discount {
    flex: 1.7;
    min-width: 0;
}

.discount-inputs-container #additional-discount::placeholder {
    color: var(--text-light);
    opacity: 1;
}

.discount-inputs-container #additional-discount::-webkit-input-placeholder {
    color: var(--text-light);
    opacity: 1;
}

.discount-inputs-container #additional-discount::-moz-placeholder {
    color: var(--text-light);
    opacity: 1;
}

.discount-inputs-container #additional-discount:-ms-input-placeholder {
    color: var(--text-light);
    opacity: 1;
}

.increase-discount-wrapper {
    display: flex;
    flex: 1;
    min-width: 0;
    gap: 4px;
}

.increase-discount-wrapper #increase-discount {
    flex: 1;
    min-width: 0;
}

.btn-increase-discount {
    flex: 0 0 50px;
    width: 50px;
    min-width: 50px;
    height: 44px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    background-color: var(--primary-color);
    color: white;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 8px;
    margin: 0;
}

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

.btn-increase-discount:active {
    background-color: var(--primary-dark);
    transform: scale(0.98);
}

.btn-increase-discount:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.2);
}

/* Скрытие стрелочек у number input */
#down-payment-input[type="number"],
#trade-in-assessment-input[type="number"],
#additional-discount[type="number"] {
    -moz-appearance: textfield;
}

#down-payment-input[type="number"]::-webkit-outer-spin-button,
#down-payment-input[type="number"]::-webkit-inner-spin-button,
#trade-in-assessment-input[type="number"]::-webkit-outer-spin-button,
#trade-in-assessment-input[type="number"]::-webkit-inner-spin-button,
#additional-discount[type="number"]::-webkit-outer-spin-button,
#additional-discount[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.equipment-spoiler {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--card-background);
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.equipment-spoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--card-background);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
    min-height: 44px;
    height: auto;
    box-shadow: var(--shadow-sm);
    /* Отключаем системный голубой фон при касании на мобильных */
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
}

/* :hover только для устройств с hover (десктоп) */
@media (hover: hover) {
    .equipment-spoiler-header:hover {
        background: var(--secondary-color);
    }
}

.equipment-spoiler-header:active {
    background: #d1d5db;
}

.equipment-spoiler.open .equipment-spoiler-header {
    background: var(--secondary-color);
}

.equipment-spoiler-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    min-width: 0;
}

.equipment-spoiler-title svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.equipment-spoiler-title h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--primary-color);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: 10px;
    flex-shrink: 0;
}

.equipment-spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--transition-normal), background-color var(--transition-fast);
}

.equipment-spoiler-toggle svg {
    width: 14px;
    height: 14px;
    fill: var(--text-light);
    transition: transform var(--transition-normal);
}

.equipment-spoiler.open .equipment-spoiler-toggle {
    transform: rotate(180deg);
}

.equipment-spoiler.open .equipment-spoiler-toggle svg {
    transform: rotate(180deg);
}

.equipment-spoiler-content {
    display: none;
    width: 100%;
    padding: 12px;
    overflow: hidden;
    background: var(--card-background);
}

.equipment-spoiler.open .equipment-spoiler-content {
    display: block;
    animation: spoilerFadeIn 0.2s ease;
}

@keyframes spoilerFadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Спойлер для комментариев */
.comments-spoiler {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--card-background);
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.comments-spoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--card-background);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
    min-height: 44px;
    height: auto;
    box-shadow: var(--shadow-sm);
}

/* :hover только для устройств с hover (десктоп) */
@media (hover: hover) {
    .comments-spoiler-header:hover {
        background: var(--secondary-color);
    }
}

.comments-spoiler-header:active {
    background: #d1d5db;
}

.comments-spoiler.open .comments-spoiler-header {
    background: var(--secondary-color);
}

.comments-spoiler-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    min-width: 0;
}

.comments-spoiler-title svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.comments-spoiler-title h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
}

.comments-spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--transition-normal), background-color var(--transition-fast);
}

.comments-spoiler-toggle svg {
    width: 14px;
    height: 14px;
    fill: var(--text-light);
    transition: transform var(--transition-normal);
}

.comments-spoiler.open .comments-spoiler-toggle {
    transform: rotate(180deg);
}

.comments-spoiler.open .comments-spoiler-toggle svg {
    transform: rotate(180deg);
}

.comments-spoiler-content {
    display: none;
    width: 100%;
    padding: 12px;
    overflow: hidden;
    background: var(--card-background);
}

.comments-spoiler.open .comments-spoiler-content {
    display: block;
    animation: spoilerFadeIn 0.2s ease;
}

/* Контейнер для комментариев */
.comments-container {
    max-height: 300px;
    overflow-y: auto;
    margin-bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Бабл комментария */
.comment-bubble {
    background: var(--secondary-color);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    padding-top: 20px;
    font-size: 0.85rem;
    color: var(--text-color);
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    max-width: 100%;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    animation: commentFadeIn 0.2s ease;
}

/* Дата комментария */
.comment-date {
    position: absolute;
    top: -4px;
    left: 10px;
    font-size: 0.7rem;
    color: var(--text-light);
    background: var(--card-background);
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    z-index: 1;
}

/* Текст комментария */
.comment-text {
    display: block;
}

@keyframes commentFadeIn {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Поле ввода комментария */
.comment-input-wrapper {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.comment-input-wrapper .form-input {
    flex: 1;
    font-size: 0.85rem;
    padding: 10px 12px;
}

.comment-input-wrapper .form-input::placeholder {
    color: var(--text-light);
    font-style: italic;
}

/* Анимация тряски поля комментария при превышении лимита */
@keyframes commentShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
    20%, 40%, 60%, 80% { transform: translateX(4px); }
}

.comment-shake {
    animation: commentShake 0.5s ease;
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.3) !important;
}

/* Анимация тряски поля телефона при ошибке валидации */
@keyframes phoneShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}

.phone-shake {
    animation: phoneShake 0.5s ease;
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.3) !important;
}

/* Кнопка добавления комментария */
.comment-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-md);
    background: var(--primary-color);
    color: white;
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
    flex-shrink: 0;
}

.comment-add-btn svg {
    width: 20px;
    height: 20px;
}

@media (hover: hover) {
    .comment-add-btn:hover {
        background: var(--primary-color-hover, #1a73e8);
    }
}

.comment-add-btn:active {
    transform: scale(0.95);
    background: var(--primary-color-active, #1557b0);
}

/* Скроллбар для контейнера комментариев */
.comments-container::-webkit-scrollbar {
    width: 6px;
}

.comments-container::-webkit-scrollbar-track {
    background: var(--background-color);
    border-radius: 3px;
}

.comments-container::-webkit-scrollbar-thumb {
    background: var(--text-light);
    border-radius: 3px;
}

.comments-container::-webkit-scrollbar-thumb:hover {
    background: var(--text-color);
}

/* Адаптив для комментариев на мобильных */
@media (max-width: 768px) {
    .comments-spoiler-content {
        padding: 10px;
    }

    .comments-container {
        max-height: 250px;
    }

    .comment-bubble {
        font-size: 0.8rem;
        padding: 16px 10px 8px 10px;
    }

    .comment-date {
        top: -4px;
    }
}

@media (max-width: 480px) {
    .comments-spoiler > .comments-spoiler-header {
        padding: 8px 10px;
    }

    .comments-spoiler-title h2 {
        font-size: 0.85rem;
    }

    .comments-container {
        max-height: 200px;
    }
}

/* Спойлер для информации о клиенте */
.client-info-spoiler {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.client-info-spoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--card-background);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
    min-height: 44px;
    height: auto;
    box-shadow: var(--shadow-sm);
}

/* :hover только для устройств с hover (десктоп) */
@media (hover: hover) {
    .client-info-spoiler-header:hover {
        background: var(--secondary-color);
    }
}

.client-info-spoiler-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.85rem;
    flex: 1;
    overflow: hidden;
}

.client-info-spoiler-title h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-info-spoiler-title h2 svg {
    flex-shrink: 0;
    color: var(--primary-color);
}

.client-info-spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--transition-normal), background-color var(--transition-fast);
}

.client-info-spoiler-toggle svg {
    width: 14px;
    height: 14px;
    fill: var(--text-light);
    transition: transform var(--transition-normal);
}

.client-info-spoiler.open .client-info-spoiler-toggle {
    transform: rotate(180deg);
}

.client-info-spoiler.open .client-info-spoiler-toggle svg {
    transform: rotate(180deg);
}

.client-info-spoiler-content {
    display: none;
    padding: 12px;
    overflow: hidden;
    background: white;
}

.client-info-spoiler.open .client-info-spoiler-content {
    display: block;
    animation: spoilerFadeIn 0.2s ease;
}

/* Спойлер для анкеты клиента */
.client-questionnaire-spoiler {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.client-questionnaire-spoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--card-background);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
    min-height: 44px;
    height: auto;
    box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
    .client-questionnaire-spoiler-header:hover {
        background: var(--secondary-color);
    }
}

.client-questionnaire-spoiler-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    overflow: hidden;
}

.client-questionnaire-spoiler-title svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.client-questionnaire-spoiler-title h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.client-questionnaire-spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--transition-normal), background-color var(--transition-fast);
}

.client-questionnaire-spoiler-toggle svg {
    width: 14px;
    height: 14px;
    fill: var(--text-light);
    transition: transform var(--transition-normal);
}

.client-questionnaire-spoiler.open .client-questionnaire-spoiler-toggle {
    transform: rotate(180deg);
}

.client-questionnaire-spoiler.open .client-questionnaire-spoiler-toggle svg {
    transform: rotate(180deg);
}

.client-questionnaire-spoiler-content {
    display: none;
    padding: 12px;
    overflow: hidden;
    background: white;
}

.client-questionnaire-spoiler.open .client-questionnaire-spoiler-content {
    display: block;
    animation: spoilerFadeIn 0.2s ease;
}

.client-questionnaire-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.form-group-full {
    grid-column: 1 / -1;
}

.checkbox-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 8px;
}

/* Для мобильных устройств - 2 столбца */
@media (max-width: 768px) {
    .checkbox-group {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Для очень маленьких экранов - 1 столбец */
@media (max-width: 480px) {
    .checkbox-group {
        grid-template-columns: 1fr;
    }
}

.checkbox-label {
    display: inline-flex;
    align-items: flex-start;  /* Выравнивание по верхнему краю */
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 0.9rem;
    color: var(--text-color);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
    min-height: 32px;
    position: relative;
}

.checkbox-label:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

.form-checkbox {
    /* Скрываем стандартный чекбокс */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    
    /* Размеры и позиционирование */
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 2px 0 0 0;  /* Небольшой отступ сверху для выравнивания с текстом */
    flex-shrink: 0;
    
    /* Стили пустого квадратика */
    border: 2px solid var(--border-color);
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    
    /* Плавный переход */
    transition: all var(--transition-fast);
    
    /* Позиционирование для галочки */
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Hover эффект */
.form-checkbox:hover {
    border-color: var(--primary-color);
    background-color: var(--secondary-color);
}

/* Состояние фокуса */
.form-checkbox:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.1);
}

/* Отмеченное состояние */
.form-checkbox:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Галочка внутри отмеченного чекбокса */
.form-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Disabled состояние */
.form-checkbox:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.checkbox-label span {
    line-height: 1.2;
}

/* Спойлер для выбора автомобиля */
.car-selection-spoiler {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.car-selection-spoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--card-background);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
    min-height: 44px;
    height: auto;
    box-shadow: var(--shadow-sm);
}

/* :hover только для устройств с hover (десктоп) */
@media (hover: hover) {
    .car-selection-spoiler-header:hover {
        background: var(--secondary-color);
    }
}

.car-selection-spoiler-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    overflow: hidden;
}

.car-selection-spoiler-title svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.car-selection-spoiler-title h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.car-selection-spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--transition-normal), background-color var(--transition-fast);
}

.car-selection-spoiler-toggle svg {
    width: 14px;
    height: 14px;
    fill: var(--text-light);
    transition: transform var(--transition-normal);
}

.car-selection-spoiler.open .car-selection-spoiler-toggle {
    transform: rotate(180deg);
}

.car-selection-spoiler.open .car-selection-spoiler-toggle svg {
    transform: rotate(180deg);
}

.car-selection-spoiler-content {
    display: block;
    padding: 12px;
    overflow: hidden;
    background: white;
}

.car-selection-spoiler:not(.open) .car-selection-spoiler-content {
    display: none;
}

/* Спойлер для параметров сделки */
.transaction-spoiler {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.transaction-spoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--card-background);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
    min-height: 44px;
    height: auto;
    box-shadow: var(--shadow-sm);
}

/* :hover только для устройств с hover (десктоп) */
@media (hover: hover) {
    .transaction-spoiler-header:hover {
        background: var(--secondary-color);
    }
}

.transaction-spoiler-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    overflow: hidden;
}

.transaction-spoiler-title svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.transaction-spoiler-title h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.transaction-spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--transition-normal), background-color var(--transition-fast);
}

.transaction-spoiler-toggle svg {
    width: 14px;
    height: 14px;
    fill: var(--text-light);
    transition: transform var(--transition-normal);
}

.transaction-spoiler.open .transaction-spoiler-toggle {
    transform: rotate(180deg);
}

.transaction-spoiler.open .transaction-spoiler-toggle svg {
    transform: rotate(180deg);
}

.transaction-spoiler-content {
    display: block;
    padding: 12px;
    overflow: hidden;
    background: white;
}

.transaction-spoiler:not(.open) .transaction-spoiler-content {
    display: none;
}

/* Спойлер для финансируется отдельно */
.separate-financing-spoiler {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.separate-financing-spoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--card-background);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
    min-height: 44px;
    height: auto;
    box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
    .separate-financing-spoiler-header:hover {
        background: var(--secondary-color);
    }
}

.separate-financing-spoiler-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    overflow: hidden;
}

.separate-financing-spoiler-title svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.separate-financing-spoiler-title h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.separate-financing-spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--transition-normal), background-color var(--transition-fast);
}

.separate-financing-spoiler-toggle svg {
    width: 14px;
    height: 14px;
    fill: var(--text-light);
    transition: transform var(--transition-normal);
}

.separate-financing-spoiler.open .separate-financing-spoiler-toggle {
    transform: rotate(180deg);
}

.separate-financing-spoiler.open .separate-financing-spoiler-toggle svg {
    transform: rotate(180deg);
}

.separate-financing-spoiler.open .separate-financing-spoiler-header {
    background: var(--secondary-color);
}

.separate-financing-spoiler-content {
    display: none;
    padding: 12px;
    overflow: hidden;
    background: white;
}

.separate-financing-spoiler.open .separate-financing-spoiler-content {
    display: block;
    animation: spoilerFadeIn 0.2s ease;
}

/* Спойлер для финансовых продуктов */
.financial-products-spoiler {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.financial-products-spoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--card-background);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
    min-height: 44px;
    height: auto;
    box-shadow: var(--shadow-sm);
}

/* :hover только для устройств с hover (десктоп) */
@media (hover: hover) {
    .financial-products-spoiler-header:hover {
        background: var(--secondary-color);
    }
}

.financial-products-spoiler-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    overflow: hidden;
}

.financial-products-spoiler-title svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.financial-products-spoiler-title h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.financial-products-spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--transition-normal), background-color var(--transition-fast);
}

.financial-products-spoiler-toggle svg {
    width: 14px;
    height: 14px;
    fill: var(--text-light);
    transition: transform var(--transition-normal);
}

.financial-products-spoiler.open .financial-products-spoiler-toggle {
    transform: rotate(180deg);
}

.financial-products-spoiler.open .financial-products-spoiler-toggle svg {
    transform: rotate(180deg);
}

/* Серый фон для заголовков спойлеров в раскрытом состоянии */
.client-info-spoiler.open .client-info-spoiler-header,
.client-questionnaire-spoiler.open .client-questionnaire-spoiler-header,
.car-selection-spoiler.open .car-selection-spoiler-header,
.transaction-spoiler.open .transaction-spoiler-header,
.financial-products-spoiler.open .financial-products-spoiler-header {
    background: var(--secondary-color);
}

.financial-products-spoiler-content {
    display: block;
    padding: 12px;
    overflow: hidden;
    background: white;
}

.financial-products-spoiler:not(.open) .financial-products-spoiler-content {
    display: none;
}

/* Спойлер для трейд-ин клиента */
.tradein-client-spoiler {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 8px;
}

.tradein-client-spoiler-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--card-background);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--transition-fast);
    min-height: 44px;
    height: auto;
}

.tradein-client-spoiler-header:hover {
    background: var(--secondary-color);
}

.tradein-client-spoiler-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--text-color);
    flex: 1;
    overflow: hidden;
}

.tradein-client-spoiler-title svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.tradein-client-spoiler-title h2 {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 0.85rem;
    color: var(--text-color);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tradein-client-spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    flex-shrink: 0;
    transition: transform var(--transition-normal), background-color var(--transition-fast);
}

.tradein-client-spoiler-toggle svg {
    width: 14px;
    height: 14px;
    fill: var(--text-light);
    transition: transform var(--transition-normal);
}

.tradein-client-spoiler.open .tradein-client-spoiler-toggle {
    transform: rotate(180deg);
}

.tradein-client-spoiler.open .tradein-client-spoiler-toggle svg {
    transform: rotate(180deg);
}

.tradein-client-spoiler-content {
    display: block;
    padding: 12px;
    overflow: hidden;
}

.tradein-client-spoiler:not(.open) .tradein-client-spoiler-content {
    display: none;
}

/* Секция оборудования внутри спойлера */
.equipment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
    margin-bottom: 12px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.equipment-item {
    display: flex;
    align-items: center;
    padding: 10px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    background: white;
    min-height: 44px;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    /* Отключаем системный голубой фон при касании на мобильных */
    -webkit-tap-highlight-color: transparent;
    -moz-tap-highlight-color: transparent;
    tap-highlight-color: transparent;
    /* Отключаем выделение текста при быстром касании */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    /* Для мобильных Safari - предотвращаем применение :active к родителю */
}

.equipment-item:active {
    background-color: #f5f5f5;
}

/* iOS fix: сбрасываем :active на белый фон для невыбранных кнопок после перетягивания */
.equipment-item:not(.selected):active {
    background-color: white !important;
}

.equipment-item.selected:active {
    background-color: #e8f5e8 !important;
}

/* :hover только для устройств с hover (десктоп) */
@media (hover: hover) {
    .equipment-item:hover {
        border-color: var(--primary-light);
        background-color: #f8fff8;
    }
}

.equipment-item.selected {
    border-color: var(--primary-color);
    background-color: #e8f5e8;
}

.equipment-item input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--primary-color);
    flex-shrink: 0;
    align-self: center;
}

.equipment-info {
    flex: 1;
    min-width: 0;
    align-self: center;
}

.equipment-name {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.equipment-price {
    font-size: 0.75rem;
    color: var(--text-light);
}

.equipment-margin {
    font-size: 0.7rem;
    color: var(--success-color);
    font-weight: 500;
    flex-shrink: 0;
    margin-left: 6px;
    align-self: center;
}

.equipment-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    padding-top: 10px;
    border-top: 1px solid var(--border-color);
    margin-top: 10px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    flex-wrap: wrap;
}

.equipment-actions .btn {
    flex: 1;
    min-width: 100px;
    max-width: 160px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Компактные кнопки */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
    gap: 4px;
}

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

.btn-primary {
    background-color: var(--primary-color);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: 1px solid var(--border-color);
}

.btn-secondary:hover:not(:disabled) {
    background-color: #e5e7eb;
}

/* Кнопки печати */
.print-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

/* Зеленая кнопка Сохранить */
.btn-save {
    background-color: var(--success-color);
    color: white;
}

.btn-save:hover:not(:disabled) {
    background-color: #059669;
}

/* Синяя кнопка Загрузить */
.btn-load {
    background-color: var(--compensation-color);
    color: white;
}

.btn-load:hover:not(:disabled) {
    background-color: #1d4ed8;
}

/* Кнопка опасности */
.btn-danger {
    background-color: #dc2626;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 500;
    transition: background-color var(--transition-fast);
}

.btn-danger:hover {
    background-color: #b91c1c;
}

/* Универсальное модальное окно */
#app-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3000;
}

#app-modal-overlay.active {
    display: flex;
}

#app-modal-overlay .modal-container {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

#app-modal-overlay .modal-body {
    padding: 20px;
}

#app-modal-overlay .modal-body p {
    font-size: 0.95rem;
    color: var(--text-color);
    margin: 0;
    line-height: 1.5;
}

#app-modal-overlay .modal-footer {
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
}

/* Отключенное состояние кнопок */
.btn-disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.btn-disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Финансовые продукты в левой колонке */
.financial-products-section {
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition-normal);
}

.financial-products-section:hover {
    box-shadow: var(--shadow-md);
}

.financial-products-section h2 {
    font-size: 0.95rem;
    color: var(--primary-color);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.financial-products-section .calculation-card {
    margin: 0;
}

/* Спойлер для секции результатов */
.results-spoiler {
    position: relative;
}

/* Заголовок секции результатов */
.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--primary-color);
}

.results-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    color: var(--primary-color);
    font-weight: 600;
}

.results-title svg {
    flex-shrink: 0;
}

.results-spoiler-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: transform var(--transition-normal), background-color var(--transition-fast);
    margin-left: 6px;
    cursor: pointer;
    background: var(--secondary-color);
}

.results-spoiler-toggle:hover {
    background-color: #e5e7eb;
}

.results-spoiler-toggle svg {
    width: 16px;
    height: 16px;
    fill: var(--text-light);
    transition: transform var(--transition-normal);
}

.results-spoiler.collapsed .results-spoiler-toggle {
    transform: rotate(180deg);
}

.results-spoiler.collapsed .results-spoiler-toggle svg {
    transform: rotate(180deg);
}

/* Скрытый режим (collapsed) */
.results-spoiler.collapsed .results-discounts-row,
.results-spoiler.collapsed .results-content {
    display: none;
}

.results-spoiler.collapsed .results-discounts-row {
    padding: 6px 10px;
    display: block;
}

.results-spoiler.collapsed .results-main-prices {
    margin-bottom: 6px;
}

/* Секция результатов */
.results-section {
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 12px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

/* Блок скидок в заголовке */
.results-discounts-row {
    background: var(--secondary-color);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    margin-bottom: 10px;
}

.results-discounts-row .form-group {
    margin-bottom: 0;
    min-height: auto;
}

.results-discounts-row .discount-inputs-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.results-discounts-row .increase-discount-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
}

.results-discounts-row .btn-increase-discount {
    height: 32px;
    min-height: 32px;
    font-size: 0.85rem;
}

.results-discounts-row #additional-discount {
    min-height: 32px;
    padding: 4px 8px;
}

.results-discounts-row #increase-discount {
    min-height: 32px;
    padding: 4px 8px;
    font-size: 0.85rem;
}

/* Контейнер результатов */
.results-content {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Главный блок цен */
.results-main-prices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Карточка с итоговой ценой */
.price-total-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: var(--radius-md);
    padding: 0 20px;
    color: white;
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.price-total-card .total-label {
    font-size: 0.85rem;
    opacity: 0.9;
    margin-bottom: 6px;
    font-weight: 500;
}

.price-total-card .total-value {
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

/* Блок основных цен */
.main-prices-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

/* Блок карточек оборудования */
.equipment-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.price-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    position: relative;
    transition: all var(--transition-fast);
}

.price-card.highlight {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: var(--primary-light);
}

.price-card .card-label {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.price-card .card-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.price-card .reset-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--error-color);
    color: white;
    border: none;
    font-size: 0.65rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.price-card .reset-btn.visible {
    opacity: 1;
}

/*equipment-row:first-child {
    padding-top: 0;
}

.equipment-row .eq-label {
    font-size: 0.8rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 4px;
}

.equipment-row .eq-value {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Секция скидок */
.discounts-section {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

.discounts-section .section-header {
    font-size: 0.85rem;
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 10px;
}

.discounts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.discount-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6px 8px;
    background: var(--secondary-color);
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast);
}

.discount-item:hover {
    background: #e5e7eb;
}

.discount-item .discount-label {
    font-size: 0.8rem;
    color: var(--text-color);
    flex: 1;
}

.discount-item .discount-values {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    font-weight: 500;
}

.discount-item .discount-value {
    color: var(--error-color);
}

.discount-item .compensation-value {
    color: var(--compensation-color);
}

.discount-item .neutral-value {
    color: var(--text-light);
}

/* Итоговая строка скидок */
.discounts-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 8px;
    margin-top: 6px;
    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
    border-radius: var(--radius-sm);
    border: 1px solid #fecaca;
}

.discounts-total .total-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-color);
}

.discounts-total .total-values {
    display: flex;
    gap: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.discounts-total .total-discount {
    color: var(--error-color);
}

.discounts-total .total-compensation {
    color: var(--compensation-color);
}

/* Финансовые показатели */
.financial-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.financial-card {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    text-align: left;
}

.financial-card .card-label {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 4px;
}

.financial-card .card-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
}

.financial-card.highlight {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: var(--primary-light);
    position: relative;
}

.financial-card.highlight .card-value {
    color: var(--primary-color);
}

.pv-percent-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    background: var(--primary-color);
    color: white;
    padding: 3px 6px;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 600;
}

.financial-card .card-subvalue {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 4px;
}

/* Маржа */
.margin-section {
    background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%);
    border: 1px solid #fcd34d;
    border-radius: var(--radius-md);
    padding: 12px 14px;
}

.margin-section .section-header {
    font-size: 0.85rem;
    color: #92400e;
    font-weight: 600;
    margin-bottom: 6px;
    text-align: center;
    width: 100%;
}

.margin-values {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.margin-section .margin-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #b45309;
    width: 100%;
    text-align: center;
}

.margin-section .margin-subvalue {
    font-size: 0.8rem;
    color: #92400e;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .results-section {
        padding: 16px;
    }

    .main-prices-grid,
    .equipment-cards-grid {
        grid-template-columns: 1fr;
    }

    .price-total-card .total-value {
        font-size: 1.8rem;
    }

    .financial-section {
        grid-template-columns: 1fr;
    }

    .discount-item .discount-values {
        flex-direction: column;
        gap: 4px;
        align-items: flex-end;
    }
}

/* Анимации */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.results-section .fade-in {
    animation: fadeInUp 0.3s ease forwards;
}

.results-section .price-total-card {
    animation: fadeInUp 0.3s ease 0.1s forwards;
    opacity: 0;
}

.results-section .main-prices-grid {
    animation: fadeInUp 0.3s ease 0.2s forwards;
    opacity: 0;
}

.results-section .equipment-cards-grid {
    animation: fadeInUp 0.3s ease 0.3s forwards;
    opacity: 0;
}

.results-section .discounts-section {
    animation: fadeInUp 0.3s ease 0.4s forwards;
    opacity: 0;
}

.results-section .financial-section {
    animation: fadeInUp 0.3s ease 0.5s forwards;
    opacity: 0;
}

.results-section .margin-section {
    animation: fadeInUp 0.3s ease 0.6s forwards;
    opacity: 0;
}

/* Режим кастомных значений - оранжевое предупреждение только для заголовка */
.results-section.has-custom-values .results-header {
    background: linear-gradient(135deg, #fb923c 0%, #ea580c 100%);
    color: white;
    border-radius: 8px;
    padding: 8px 12px;
}

.results-section.has-custom-values .results-title {
    color: #ffffff;
    font-weight: 600;
}

/* Редактируемые элементы */
[data-editable] {
    cursor: pointer;
}

/* equipment-section */
.spoiler-hidden {
    transition: opacity var(--transition-normal), height var(--transition-normal);
}

.results-spoiler.collapsed .spoiler-hidden {
    display: none;
}

/* Футер */
.app-footer {
    text-align: center;
    padding: 20px 0;
    color: var(--text-light);
    font-size: 0.8rem;
    margin-top: auto;
}

.app-footer p {
    margin-bottom: 10px;
}

.footer-arrows-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.footer-arrow {
    font-size: 2rem;
    color: var(--text-light);
    animation: arrow-bounce 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes arrow-bounce {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(-10px);
    }
}

.footer-arrow-right {
    font-size: 2rem;
    color: var(--text-light);
    animation: arrow-bounce-right 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes arrow-bounce-right {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

/* Адаптивность */
@media (max-width: 1024px) {
    .app-columns {
        grid-template-columns: 1fr 360px;
        gap: 0px;
    }
}

@media (max-width: 900px) {
    .app-columns {
        grid-template-columns: 1fr;
        gap: 0px;
    }

    /* В одноколонном режиме data-column идёт первым, затем equipment-spoiler, затем results */
    .data-column {
        order: 0;
    }

    .results-column {
        order: 10;
    }

    /* Порядок спойлеров в мобильном режиме */
    .car-selection-spoiler {
        order: 1;
    }

    .transaction-spoiler {
        order: 2;
    }

    .financial-products-spoiler {
        order: 3;
    }

    .separate-financing-spoiler {
        order: 4;
    }

    .equipment-spoiler {
        order: 5;
    }

    .comments-spoiler {
        order: 6;
    }

    .reminder-spoiler {
        order: 7;
    }

    /* Исправление переноса длинных комментариев в одноколонном режиме */
    .comments-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        max-height: 250px;
    }

    .comment-bubble {
        max-width: 100%;
        width: 100%;
        word-wrap: break-word;
        overflow-wrap: anywhere;
        hyphens: auto;
        box-sizing: border-box;
    }

    .results-section {
        position: static;
        top: auto !important;
    }

    .results-spoiler {
        position: static;
        top: auto !important;
    }
}

/* Мобильные стили с защитой от сдвига header при появлении клавиатуры */
@media (max-width: 768px) {
    /* Основной контейнер */
    .app-container {
        padding-top: var(--header-height);
        padding-bottom: 0;
        min-height: 100svh;
    }

    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: 0;
        padding: 0 12px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        text-align: left;
        border-radius: 0;
        overflow: visible;
        height: var(--header-height);
        box-sizing: border-box;
        /* Предотвращаем любые трансформации при фокусе */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: position;
        /* iOS Safari fix */
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
    }

    .header-centered-section {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }

    .header-title-block {
        flex: 1 1 0;
        min-width: 0;
        align-items: center;
    }

    /* Скрываем кнопку перехода к сохранённым расчётам на мобильных */
    .header-calculations-btn {
        display: none;
    }

    .header-actions-block {
        flex: 0 0 auto;
        display: flex;
        gap: 6px;
    }

    .header-action-btn {
        padding: 6px 10px;
        font-size: 0.75rem;
        white-space: nowrap;
    }

    .header-title-section {
        flex: 1 1 0;
        min-width: 0;
        overflow: visible;
        max-width: calc(100% - 180px);
    }

    .header-right-actions {
        flex: 0 0 auto;
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        gap: 6px;
        min-width: 0;
        max-width: 170px;
        position: relative;
        z-index: 10;
    }

    .header-right-actions .manager-dropdown,
    .header-right-actions .tools-dropdown {
        flex: 0 0 auto;
        min-width: 0;
        max-width: 80px;
        position: relative;
        z-index: 10;
    }

    .header-right-actions .header-action-btn {
        width: 100%;
        max-width: 80px;
        height: 36px;
        padding: 6px 8px;
        font-size: 0.75rem;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        flex-shrink: 1;
        box-sizing: border-box;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }

    .app-header h1 {
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        margin: 0;
        line-height: 1.2;
        text-align: left;
    }

    .tools-dropdown {
        position: relative;
    }

    .tools-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 8px;
    }

    .manager-menu {
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        margin-top: 8px;
    }

    .selection-section,
    .transaction-section,
    .client-info-section {
        padding: 16px 12px;
    }

    .car-selection-grid,
    .transaction-grid,
    .client-info-grid {
        grid-template-columns: 1fr;
    }

    /* Мобильные стили для полей скидки - уменьшаем дополнительную скидку на 40% */
    .discount-inputs-container #additional-discount {
        flex: 1.2;
        min-width: 0;
    }

    .increase-discount-wrapper {
        flex: 1;
        min-width: 0;
    }

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

    .equipment-spoiler-content {
        padding: 10px;
    }

    /* Дополнительная защита от вылезания контента на мобильных */
    .equipment-spoiler-content .equipment-item {
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    .equipment-spoiler-content .equipment-name {
        white-space: normal;
        word-break: break-word;
    }

    .print-actions {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }

    .result-summary .total-price {
        font-size: 1.6rem;
    }

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

    /* Отступ для первого спойлера (Информация о клиенте) на главной странице (мобильные) */
    body:not(.show-calculations-screen):not(.show-utilities-screen) .client-info-spoiler {
        margin-top: 16px;
    }
    
    body:not(.show-calculations-screen):not(.show-utilities-screen) .results-spoiler {
        margin-top: 0;
    }
}

/* Очень узкие экраны (мобильные телефоны в портретном режиме) */
@media (max-width: 480px) {
    .equipment-spoiler {
        width: 100%;
        max-width: 100%;
    }

    .equipment-spoiler > .equipment-spoiler-header {
        padding: 8px 10px;
    }

    .equipment-spoiler-title h2 {
        font-size: 0.85rem;
    }

    .equipment-item {
        padding: 8px;
        min-height: 40px;
    }

    .equipment-item input[type="checkbox"] {
        width: 14px;
        height: 14px;
        margin-right: 6px;
    }

    .equipment-name {
        font-size: 0.75rem;
    }

    .equipment-price {
        font-size: 0.7rem;
    }

    .equipment-margin {
        font-size: 0.65rem;
        margin-left: 4px;
    }
}

/* Скрытые элементы */
.hidden {
    display: none !important;
}

/* Скрытие спойлера финансируется отдельно */
.separate-financing-hidden {
    display: none !important;
}

/* Анимации */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fade-in {
    animation: fadeIn 0.3s ease forwards;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01);
    }
}

.calculating {
    animation: pulse 0.8s ease infinite;
}

/* Редактируемые поля финансовых продуктов */
.financial-input {
    width: 100px;
    padding: 10px 12px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    background-color: #fafafa;
    text-align: right;
    transition: all var(--transition-fast);
    min-height: 44px;
}

/* Скрытие стрелок в числовых полях ввода */
.financial-input[type="number"] {
    -moz-appearance: textfield;
}

.financial-input[type="number"]::-webkit-inner-spin-button,
.financial-input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.financial-input:hover {
    border-color: var(--primary-light);
    background-color: white;
}

.financial-input:focus {
    outline: none;
    border-color: var(--primary-color);
    background-color: white;
    box-shadow: 0 0 0 2px rgba(26, 95, 42, 0.1);
}

.financial-input.editable {
    cursor: text;
}

.financial-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 0;
    min-height: 28px;
    align-items: center;
}

.financial-row .label {
    color: var(--text-light);
    font-size: 0.8rem;
    text-align: right;
    padding-right: 8px;
    grid-column: 1;
    justify-self: end;
    white-space: nowrap;
}

.financial-row .value-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    grid-column: 2;
    justify-self: start;
}

.financial-row .currency {
    font-size: 0.75rem;
    color: var(--text-light);
    flex-shrink: 0;
    margin-left: 2px;
}

#financial-products-grid {
    width: 100%;
}

/* СТАРЫЕ СТИЛИ ДЛЯ fin-table (больше не используются) */
.fin-table {
    display: none;
}

.fin-row {
    display: none;
}

.fin-label-right {
    display: none;
}

.fin-input-wrap {
    display: none;
}

.fin-input {
    display: none;
}

.fin-currency {
    display: none;
}

.fin-total {
    display: none;
}

.fin-value {
    display: none;
}

.financial-row .value {
    font-weight: 500;
    color: var(--text-color);
    font-size: 0.85rem;
}

.financial-row .currency {
    font-size: 0.75rem;
    color: var(--text-light);
}

.financial-row.highlight {
    background-color: #e8f5e8;
    margin: 0 -10px;
    padding: 6px 10px;
    font-weight: 600;
}

.financial-row.highlight .value {
    color: var(--primary-color);
    font-size: 0.9rem;
}

/* Секция информации о клиенте */
.client-info-section {
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition-normal);
}

.client-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

/* Кнопки связи с клиентом */
.client-actions-buttons {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
}

.btn-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    color: white;
    flex: 1;
}

.btn-action svg {
    flex-shrink: 0;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.btn-action:active {
    transform: translateY(0);
}

/* Telegram */
.btn-telegram {
    background-color: #0088cc;
}

.btn-telegram:hover {
    background-color: #0077b3;
}

/* MAX */
.btn-max {
    background-color: #6c5ce7;
}

.btn-max:hover {
    background-color: #5b4cdb;
}

/* Логотип в кнопке */
.btn-icon-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

/* WhatsApp */
.btn-whatsapp {
    background-color: #25D366;
}

.btn-whatsapp:hover {
    background-color: #20bd5a;
}

/* SMS */
.btn-sms {
    background-color: var(--primary-color);
}

.btn-sms:hover {
    background-color: #1a73e8;
}

/* Позвонить */
.btn-call {
    background-color: var(--success-color);
}

.btn-call:hover {
    background-color: #059669;
}

/* Вторая строка кнопок (только для мобильных/PWA) */
.client-actions-secondary {
    display: none;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border-color);
}

.client-actions-secondary .btn-action {
    flex: 1;
}

/* Показываем вторичные кнопки только в мобильном режиме или PWA */
body.is-mobile-or-pwa .client-actions-secondary {
    display: flex;
}

/* Мобильная кнопка "Позвонить" под спойлером "Итого" */
.mobile-call-button-wrapper {
    display: none; /* По умолчанию скрыта */
    margin-top: 16px;
    padding: 0 12px;
}

/* Показываем кнопку только в мобильном режиме или PWA */
body.is-mobile-or-pwa .mobile-call-button-wrapper {
    display: block;
}

.btn-call-mobile {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 1rem;
    font-weight: 600;
}

/* Скрываем кнопку в десктопной версии */
@media (min-width: 769px) {
    .mobile-call-button-wrapper {
        display: none !important;
    }
}

/* Верхний регистр для VIN */
#vin-input {
    text-transform: uppercase;
}

/* Секция трейд-ин клиента */
.trade-in-client-section {
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 16px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
    transition: box-shadow var(--transition-normal);
}

.trade-in-client-section:hover {
    box-shadow: var(--shadow-md);
}

.trade-in-client-section h2 {
    font-size: 0.95rem;
    color: var(--primary-color);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 6px;
}

.trade-in-client-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

/* Обновлённые мобильные стили для результатов */
@media (max-width: 768px) {
    .results-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    .results-title {
        font-size: 0.95rem;
    }

    .results-discounts-row {
        padding: 4px 8px;
        margin-bottom: 8px;
    }

    .results-discounts-row #additional-discount {
        min-height: 28px;
        padding: 4px 6px;
        font-size: 0.8rem;
    }

    .results-discounts-row #increase-discount {
        min-height: 28px;
        padding: 4px 6px;
        font-size: 0.8rem;
    }

    .results-discounts-row .btn-increase-discount {
        height: 28px;
        min-height: 28px;
        font-size: 0.8rem;
    }

    .price-total-card {
        padding: 12px;
    }

    .price-total-card .total-value {
        font-size: 1.5rem;
    }

    .main-prices-grid,
    .equipment-cards-grid {
        gap: 8px;
    }

    .price-card {
        padding: 10px;
    }

    .price-card .card-value {
        font-size: 0.9rem;
    }

    .discounts-section {
        padding: 10px;
    }

    .financial-section {
        grid-template-columns: 1fr;
    }

    .financial-card {
        padding: 10px;
    }

    .financial-card .card-value {
        font-size: 0.9rem;
    }

    .pv-percent-badge {
        top: 4px;
        right: 4px;
        padding: 2px 5px;
        font-size: 0.65rem;
    }

    .margin-section {
        padding: 10px;
    }

    .margin-section .margin-value {
        font-size: 1.3rem;
    }

    /* Исправление проблемы с анимацией на iOS - отключаем fade-in внутри спойлера */
    .results-spoiler .fade-in {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .results-spoiler .price-total-card,
    .results-spoiler .main-prices-grid,
    .results-spoiler .equipment-cards-grid,
    .results-spoiler .discounts-section,
    .results-spoiler .financial-section,
    .results-spoiler .margin-section {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Pull-to-Refresh индикатор для iOS Web App режима */
.ptr-indicator {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99; /* Ниже чем у header (100) */
    pointer-events: none;
    opacity: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.ptr-indicator.visible {
    opacity: 1;
    transform: translateY(0);
}

.ptr-indicator.hiding {
    transform: translateY(-100%);
    opacity: 0;
}

.ptr-indicator-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: transparent;
}

.ptr-indicator-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(26, 95, 42, 0.9);
    border-radius: 50%;
    color: white;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(26, 95, 42, 0.3);
    transition: transform 0.3s ease, background 0.3s ease;
}

.ptr-indicator-icon svg {
    width: 20px;
    height: 20px;
}

.ptr-indicator-icon.ready {
    /* Вращение при готовности к обновлению */
    background: rgba(26, 95, 42, 1);
    box-shadow: 0 4px 20px rgba(26, 95, 42, 0.5);
    animation: ptr-spin 1s linear infinite;
}

.ptr-indicator-icon.refreshing {
    background: rgba(26, 95, 42, 0.9);
}

.ptr-indicator-text {
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--primary-color);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

@keyframes ptr-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .ptr-indicator-content {
        padding: 12px;
    }

    .ptr-indicator-icon {
        width: 32px;
        height: 32px;
    }

    .ptr-indicator-icon svg {
        width: 18px;
        height: 18px;
    }

    .ptr-indicator-text {
        font-size: 0.8rem;
    }
}

/* Модальное окно детализации расчёта */
.calculation-detail-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 20px;
}

.calculation-detail-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.calculation-detail-modal-container {
    background: var(--card-background);
    border-radius: var(--radius-lg);
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.calculation-detail-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--header-background);
}

.calculation-detail-modal-header h2 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
}

.calculation-detail-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s;
}

.calculation-detail-modal-close:hover {
    background: var(--hover-background);
    color: var(--text-primary);
}

.calculation-detail-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.calculation-detail-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 20px;
    border-top: 1px solid var(--border-color);
    background: var(--header-background);
}

/* Секции детализации */
.calculation-detail-section {
    background: var(--card-background);
    border-radius: var(--radius-md);
    padding: 16px;
    border: 1px solid var(--border-color);
}

.calculation-detail-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-color);
}

.calculation-detail-date {
    font-size: 0.875rem;
    color: var(--text-light);
    text-align: center;
    padding: 8px;
    background: var(--header-background);
    border-radius: var(--radius-sm);
}

/* Сетка деталей - как в основном приложении */
.calculation-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.calculation-detail-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.calculation-detail-row-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

.calculation-detail-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.calculation-detail-value {
    font-size: 0.95rem;
    color: var(--text-primary);
    word-break: break-word;
}

.calculation-detail-value.price {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.calculation-detail-client {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.calculation-detail-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
    font-size: 1rem;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .calculation-detail-modal-overlay {
        padding: 10px;
        align-items: flex-end;
    }

    .calculation-detail-modal-container {
        max-height: 85vh;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    }

    .calculation-detail-modal-body {
        padding: 16px;
    }

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

    .calculation-detail-modal-footer {
        flex-direction: column-reverse;
        gap: 8px;
    }

    .calculation-detail-modal-footer .btn {
        width: 100%;
    }
}

/* Стили для редактирования пользовательской РРЦ */
.cust-rrc-controls {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 5;
}

.cust-rrc-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--text-light);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cust-rrc-edit-btn:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.cust-rrc-edit-btn svg {
    width: 14px;
    height: 14px;
}

.cust-rrc-input-container {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.cust-rrc-input {
    flex: 1;
    padding: 6px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    min-width: 100px;
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.cust-rrc-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(26, 95, 42, 0.1);
}

.cust-rrc-confirm-btn {
    background: var(--success-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.cust-rrc-confirm-btn:hover {
    background: #059669;
}

.cust-rrc-confirm-btn svg {
    width: 16px;
    height: 16px;
}

.cust-rrc-cancel-btn {
    background: var(--text-light);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.cust-rrc-cancel-btn:hover {
    background: var(--text-color);
}

.cust-rrc-cancel-btn svg {
    width: 16px;
    height: 16px;
}

.cust-rrc-clear-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--error-color);
    color: white;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.cust-rrc-clear-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Анимация тряски для некорректного ввода */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

.cust-rrc-input.shake {
    animation: shake 0.5s ease;
    border-color: var(--error-color) !important;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 480px) {
    .cust-rrc-input {
        font-size: 0.85rem;
        padding: 6px 8px;
    }

    .cust-rrc-confirm-btn,
    .cust-rrc-cancel-btn {
        padding: 6px 8px;
    }

    .cust-rrc-confirm-btn svg,
    .cust-rrc-cancel-btn svg {
        width: 14px;
        height: 14px;
    }
}

/* Стили для редактирования пользовательской закупочной цены (custPP) */
.cust-pp-controls {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 5;
}

.cust-pp-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--text-light);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cust-pp-edit-btn:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.cust-pp-edit-btn svg {
    width: 14px;
    height: 14px;
}

.cust-pp-input-container {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.cust-pp-input {
    flex: 1;
    padding: 6px 10px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    min-width: 100px;
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.cust-pp-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(26, 95, 42, 0.1);
}

.cust-pp-confirm-btn {
    background: var(--success-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.cust-pp-confirm-btn:hover {
    background: #059669;
}

.cust-pp-confirm-btn svg {
    width: 16px;
    height: 16px;
}

.cust-pp-cancel-btn {
    background: var(--text-light);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.cust-pp-cancel-btn:hover {
    background: var(--text-color);
}

.cust-pp-cancel-btn svg {
    width: 16px;
    height: 16px;
}

.cust-pp-clear-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--error-color);
    color: white;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.cust-pp-clear-btn:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Анимация тряски для некорректного ввода */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); }
    20%, 40%, 60%, 80% { transform: translateX(3px); }
}

.cust-pp-input.shake {
    animation: shake 0.5s ease;
    border-color: var(--error-color) !important;
}

/* Стили для редактирования пользовательской стоимости оборудования (custEqPrice) */
.cust-eq-price-controls {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 5;
}

.cust-eq-price-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--text-light);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cust-eq-price-edit-btn:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.cust-eq-price-edit-btn svg {
    width: 14px;
    height: 14px;
}

.cust-eq-price-input-container {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 1;
    justify-content: flex-end;
}

.cust-eq-price-input {
.cust-eq-price-input {
    flex: 1 1 0%;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    min-width: 80px;
    background: white;
    transition: border-color var(--transition-fast);
}
}

.cust-eq-price-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.cust-eq-price-confirm-btn {
    background: var(--success-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.cust-eq-price-confirm-btn:hover {
    background: #059669;
}

.cust-eq-price-confirm-btn svg {
    width: 14px;
    height: 14px;
}

.cust-eq-price-clear-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--error-color);
    color: white;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
}

.cust-eq-price-clear-btn:hover {
    background: #dc2626;
}

.cust-eq-price-input.shake {
    animation: shake 0.5s ease;
    border-color: var(--error-color) !important;
}

/* Стили для редактирования пользовательской маржи оборудования (custEqMarg) */
.cust-eq-marg-controls {
    position: absolute;
    bottom: 4px;
    right: 4px;
    z-index: 5;
}

.cust-eq-marg-edit-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    color: var(--text-light);
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.cust-eq-marg-edit-btn:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
}

.cust-eq-marg-edit-btn svg {
    width: 14px;
    height: 14px;
}

.cust-eq-marg-input-container {
    display: flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
}

.cust-eq-marg-input {
    flex: 1 1 0%;
    padding: 4px 8px;
    border: 1px solid var(--border-color);
    border-radius: 4px;
    font-size: 0.9rem;
    min-width: 80px;
    background: white;
    transition: border-color var(--transition-fast);
}

.cust-eq-marg-input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.cust-eq-marg-confirm-btn {
    background: var(--success-color);
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--transition-fast);
}

.cust-eq-marg-confirm-btn:hover {
    background: #059669;
}

.cust-eq-marg-confirm-btn svg {
    width: 14px;
    height: 14px;
}

.cust-eq-marg-clear-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--error-color);
    color: white;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 10;
}

.cust-eq-marg-clear-btn:hover {
    background: #dc2626;
}

.cust-eq-marg-input.shake {
    animation: shake 0.5s ease;
    border-color: var(--error-color) !important;
}


/* ============================================
   Модальное окно "4 квадрата"
   ============================================ */

.four-squares-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    overflow-y: auto;
}

.four-squares-modal-overlay.active {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 20px;
}

.four-squares-modal-container {
    background: white;
    border-radius: 8px;
    width: 100%;
    max-width: 900px;
    margin: 20px auto;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.four-squares-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.four-squares-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
    color: var(--text-primary);
}

.four-squares-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.four-squares-modal-close:hover {
    color: #333;
}

.four-squares-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.four-squares-document {
    background: white;
    padding: 20px;
    min-height: 400px;
}

/* Стили для чекбоксов в документе 4 квадратов */
.four-squares-document .checkbox-item {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
    margin-bottom: 3px;
    font-size: 0.9rem;
    cursor: default;
}

.four-squares-document .print-checkbox {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    cursor: pointer;
    accent-color: var(--primary-color, #007bff);
}

.four-squares-document .checkbox-column {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.four-squares-modal-footer {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

/* Адаптивность */
@media (max-width: 768px) {
    .four-squares-modal-container {
        max-width: 100%;
        margin: 0;
        border-radius: 0;
        max-height: 100vh;
    }
    
    .four-squares-modal-body {
        padding: 15px;
    }
}

/* Стили для печати */
@media print {
    .four-squares-modal-overlay,
    .four-squares-modal-header,
    .four-squares-modal-footer {
        display: none !important;
    }
    
    .four-squares-modal-body {
        padding: 0;
    }
}

/* Адаптивные стили для анкеты клиента */
@media (max-width: 768px) {
    .client-questionnaire-grid {
        gap: 10px;
    }

    .checkbox-group {
        gap: 8px;
    }

    .checkbox-label {
        font-size: 0.85rem;
        padding: 6px 10px;
        min-height: 40px;
    }

    .form-checkbox {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }
    
    /* Галочка для больших чекбоксов на мобильных */
    .form-checkbox:checked::after {
        left: 6px;
        top: 2px;
        width: 7px;
        height: 11px;
    }
}

@media (max-width: 480px) {
    .checkbox-group {
        flex-direction: column;
        gap: 6px;
    }

    .checkbox-label {
        width: 100%;
        justify-content: flex-start;
    }
}

/* ============================================
   Стрелки навигации между экранами
   ============================================ */

/* Общие стили для стрелок */
.screen-nav-arrow {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
    -webkit-tap-highlight-color: transparent;
    opacity: 0.7;
}

.screen-nav-arrow:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.screen-nav-arrow:active {
    transform: translateY(-50%) scale(0.95);
}

.screen-nav-arrow svg {
    width: 24px;
    height: 24px;
}

/* Стрелка слева (переход к списку расчётов) - больше не используется */
.screen-nav-arrow-left {
    display: none;
}

/* Стрелка справа (возврат к расчёту) - больше не используется */
.screen-nav-arrow-right {
    display: none;
}

/* Мобильная адаптация стрелок - скрываем на мобильных, используем свайпы */
@media (max-width: 768px) {
    .screen-nav-arrow,
    .header-calculations-btn,
    .header-utilities-btn {
        display: none !important;
    }
}

/* ============================================
   ЭКРАН УТИЛИТ (ПОЛНОЭКРАННЫЙ)
   ============================================ */

.utilities-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-color);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.175s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.175s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0.175s; /* visibility меняется после анимации */
    transform: translateX(100%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

body.show-utilities-screen .utilities-screen {
    transition: transform 0.175s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.175s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0s; /* visibility меняется сразу */
    transform: translateX(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.utilities-screen-header {
    height: 60px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.utilities-screen-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    flex: 1;
    text-align: center;
}

.utilities-back-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
}

.utilities-back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.utilities-back-btn:active {
    transform: scale(0.95);
}

.utilities-screen-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.utilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.utility-btn {
    background: var(--card-background);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: all var(--transition-normal);
    box-shadow: var(--shadow-sm);
    min-height: 140px;
}

.utility-btn:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-color);
}

.utility-btn:active {
    transform: translateY(-2px);
}

.utility-btn svg {
    width: 48px;
    height: 48px;
    color: var(--primary-color);
    stroke-width: 1.5;
}

.utility-btn span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-color);
    text-align: center;
}

/* Мобильная адаптация экрана утилит */
@media (max-width: 768px) {
    .utilities-screen-header {
        height: 60px;
        box-sizing: border-box;
        padding: 0 20px;
    }
    
    .utilities-screen-header h2 {
        font-size: 1rem;
    }
    
    .utilities-screen-content {
        padding: 16px;
    }
    
    .utilities-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .utility-btn {
        padding: 20px;
        min-height: 120px;
    }
    
    .utility-btn svg {
        width: 40px;
        height: 40px;
    }
    
    .utility-btn span {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .utilities-screen-content {
        padding: 12px;
    }
    
    .utility-btn {
        padding: 16px;
        min-height: 100px;
    }
}

/* ============================================
   Экран списка сохранённых расчётов
   ============================================ */

.calculations-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-color);
    z-index: 1002;
    display: none;
    flex-direction: column;
    overflow: hidden;
}

.calculations-screen.active {
    display: flex;
}

.calculations-screen-header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    height: 60px;
    padding: 0 20px;
    box-sizing: border-box;
    text-align: center;
    flex-shrink: 0;
}

.calculations-screen-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.calculations-screen-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

/* Навигация по месяцам в экране списка */
.calculations-screen-content .sl-year-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

.calculations-screen-content .sl-nav-btn {
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--radius-sm);
    width: 36px;
    height: 36px;
    font-size: 1rem;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.calculations-screen-content .sl-nav-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.05);
}

.calculations-screen-content .sl-current-year {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-color);
    min-width: 100px;
    text-align: center;
}

/* Поиск */
.calculations-screen-content .sl-search-container {
    position: relative;
    margin-bottom: 16px;
}

.calculations-screen-content .sl-search-input {
    width: 100%;
    padding: 12px 40px 12px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 16px;
    min-height: 44px;
    transition: border-color var(--transition-fast);
}

.calculations-screen-content .sl-search-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 95, 42, 0.1);
}

.calculations-screen-content .sl-search-clear {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 1.2rem;
    color: var(--text-light);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.calculations-screen-content .sl-search-clear:hover {
    color: var(--text-color);
}

/* Список файлов */
.calculations-screen-content .sl-files-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Пустое сообщение */
.calculations-screen-content .sl-empty-message {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-light);
    font-size: 0.95rem;
}

/* ============================================
   Анимация свайпа между экранами
   ============================================ */

.app-container.swiping,
.calculations-screen.swiping {
    transition: transform 0.175s ease;
}

.app-container.swipe-left {
    transform: translateX(-80px);
}

.calculations-screen.swipe-left {
    transform: translateX(-80px);
}

.app-container.swipe-right {
    transform: translateX(80px);
}

.calculations-screen.swipe-right {
    transform: translateX(80px);
}

/* Скрытие главного контейнера при показе экрана списка */
/* pointer-events управляется через transition выше */

/* Скрытие экрана с расчетами управляется через visibility и transform выше */


/* Мобильная адаптация */
@media (max-width: 768px) {
    .calculations-screen-header {
        height: 60px;
        box-sizing: border-box;
        padding: 0 20px;
    }
    
    .calculations-screen-header h2 {
        font-size: 1rem;
    }
    
    .calculations-screen-content {
        padding: 12px;
    }
}

/* ============================================
   Навигация между экранами (расчёт <-> список расчётов)
   ============================================ */

/* Кнопки навигации */
.nav-arrow-btn {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    background: var(--primary-color);
    border: none;
    border-radius: 50%;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    z-index: 100;
    transition: all var(--transition-fast);
    opacity: 0.8;
}

.nav-arrow-btn:hover {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
    box-shadow: var(--shadow-lg);
}

.nav-arrow-btn:active {
    transform: translateY(-50%) scale(0.95);
}

.nav-arrow-left {
    left: 12px;
}

.nav-arrow-right {
    right: 12px;
}

/* Экран списка расчётов */
.calculations-screen {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--background-color);
    z-index: 1002;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    visibility: hidden;
    opacity: 0;
}

body.show-calculations-screen .calculations-screen {
    visibility: visible;
    opacity: 1;
}

/* Заголовок экрана списка расчётов */
.calculations-screen-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--primary-color);
    color: white;
    height: 60px;
    box-shadow: var(--shadow-md);
    flex-shrink: 0;
}

.calculations-screen-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
}

/* Кнопка возврата в header */
.calculations-back-btn {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 5px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    flex-shrink: 0;
}

.calculations-back-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.calculations-back-btn:active {
    transform: scale(0.95);
}

.calculations-back-btn svg {
    width: 13px;
    height: 13px;
}

/* Контент экрана списка расчётов */
.calculations-screen-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
}

.calculations-loading {
    text-align: center;
    padding: 40px;
    color: var(--text-light);
    font-size: 0.95rem;
}

/* Основной контент при показе экрана списка расчётов */
/* Header и main уезжают вместе с app-container, не нужно их скрывать */


/* Анимация переключения экранов */

/* Экран с расчетами - по умолчанию слева за экраном */
.calculations-screen {
    transition: transform 0.175s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.175s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0.175s; /* visibility меняется после анимации */
    transform: translateX(-100%);
    pointer-events: none;
}

/* Когда показываем экран с расчетами - он выезжает на место */
body.show-calculations-screen .calculations-screen {
    transition: transform 0.175s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.175s cubic-bezier(0.4, 0, 0.2, 1),
                visibility 0s 0s; /* visibility меняется сразу */
    transform: translateX(0);
    pointer-events: auto;
}

/* Мобильные устройства - анимируем только app-main, header остается */
@media (max-width: 768px) {
    .app-main {
        transition: transform 0.175s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateX(0);
    }
    
    body.show-calculations-screen .app-main {
        transform: translateX(100%);
    }
    
    body.show-utilities-screen .app-main {
        transform: translateX(-100%);
    }
    
    .app-header {
    padding: 0 20px;
        transition: none !important;
        transform: none !important;
    }
}

/* Десктоп - header остается стационарным, анимируем только app-main */
@media (min-width: 769px) {
    .app-header {
    padding: 0 20px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        z-index: 1000;
    }
    
    .app-main {
        transition: transform 0.175s cubic-bezier(0.4, 0, 0.2, 1);
        transform: translateX(0);
    }
    
    body.show-calculations-screen .app-main {
        transform: translateX(100%);
    }
    
    body.show-utilities-screen .app-main {
        transform: translateX(-100%);
    }
}

/* Адаптив для мобильных */
@media (max-width: 768px) {
    .nav-arrow-btn {
        width: 20px;
        height: 20px;
    }
    
    .nav-arrow-left {
        left: 8px;
    }
    
    .nav-arrow-right {
        right: 8px;
    }
    
    .calculations-screen-header {
        height: 60px;
        box-sizing: border-box;
        padding: 0 20px;
    }
    
    .calculations-screen-header h2 {
        font-size: 1rem;
    }
    
    .calculations-screen-content {
        padding: 12px;
    }
}