/* Стили компонентов */

/* Группировка оборудования */
.equipment-group {
    margin-bottom: 16px;
}

.equipment-group-header {
    font-weight: 600;
    color: var(--primary-color);
    padding: 6px 10px;
    background: #f0f8f0;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
    font-size: 0.85rem;
}

.equipment-group-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px;
    padding-left: 6px;
}

/* Стили для групп оборудования (керамика, шины) */
.equipment-group-item {
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: all var(--transition-fast);
}

.equipment-group-item.selected {
    border-color: var(--primary-color);
}

.equipment-group-select {
    padding: 6px;
    background: #f8f8f8;
    border-bottom: 1px solid var(--border-color);
}

.equipment-group-select select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: white;
    font-size: 0.8rem;
}

/* Карточка автомобиля в результатах */
.car-card {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    padding: 16px;
    border-radius: var(--radius-sm);
    text-align: center;
    margin-bottom: 16px;
}

.car-card .car-title {
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.car-card .car-specs {
    font-size: 0.95rem;
    opacity: 0.9;
}

.car-card .deal-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    padding: 6px 16px;
    border-radius: 16px;
    margin-top: 10px;
    font-weight: 500;
    font-size: 0.9rem;
}

/* Ценовые блоки */
.price-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.price-block {
    background: white;
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
    border: 1px solid var(--border-color);
}

.price-block .label {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 6px;
}

.price-block .value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 28px;
}

.price-block.highlight {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.price-block.highlight .label {
    color: rgba(255, 255, 255, 0.9);
}

.price-block.highlight .value {
    color: white;
    font-size: 1.8rem;
}

/* Блок ИТОГО на всю ширину */
.total-block {
    width: 100%;
}

/* Подблоки для РРЦ и Закуп */
.price-sub-blocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Редактируемый блок закупочной цены */
.price-block[data-editable="purchase-price"] {
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px dashed var(--border-color);
}

.price-block[data-editable="purchase-price"]:hover {
    border-color: var(--primary-color);
    background: #f8fff8;
    box-shadow: 0 2px 8px rgba(0, 128, 0, 0.15);
}

/* Редактируемый блок РРЦ */
.price-block[data-editable="rrc-price"] {
    cursor: pointer;
    transition: all var(--transition-fast);
    border: 1px dashed var(--border-color);
}

.price-block[data-editable="rrc-price"]:hover {
    border-color: var(--primary-color);
    background: #f8fff8;
    box-shadow: 0 2px 8px rgba(0, 128, 0, 0.15);
}

/* Стили для input в редактируемом блоке РРЦ */
.rrc-price-input {
    width: 100%;
    min-width: 80px;
    max-width: 150px;
    padding: 4px 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-sm);
    background: white;
    text-align: center;
    outline: none;
    font-family: inherit;
}

/* Стили для input в редактируемом блоке */
.purchase-price-input {
    width: 100%;
    min-width: 80px;
    max-width: 150px;
    padding: 4px 8px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-sm);
    background: white;
    text-align: center;
    outline: none;
    font-family: inherit;
}

/* Убираем стрелочки в Chrome, Safari, Edge, Opera */
.purchase-price-input::-webkit-outer-spin-button,
.purchase-price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Убираем стрелочки в Firefox */
.purchase-price-input[type=number] {
    -moz-appearance: textfield;
}

/* Стили для input редактирования оборудования */
.equipment-edit-input {
    width: 100%;
    min-width: 60px;
    max-width: 120px;
    padding: 2px 6px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
    border-radius: var(--radius-sm);
    background: white;
    text-align: center;
    outline: none;
    font-family: inherit;
}

/* Убираем стрелочки в Chrome, Safari, Edge, Opera */
.equipment-edit-input::-webkit-outer-spin-button,
.equipment-edit-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Убираем стрелочки в Firefox */
.equipment-edit-input[type=number] {
    -moz-appearance: textfield;
}

/* Редактируемые поля в карточке расчёта */
.calculation-row .value[data-editable] {
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 1px dashed transparent;
    padding: 0 2px;
    border-radius: 2px;
}

.calculation-row .value[data-editable]:hover {
    border-bottom-color: var(--primary-color);
    background: #f8fff8;
}

/* Кнопка сброса значения */
.reset-value {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    background: #e8f5e9;
    color: #4caf50;
    border-radius: 50%;
    font-size: 12px;
    cursor: pointer;
    transition: all var(--transition-fast);
    z-index: 10;
}

.reset-value:hover {
    background: #4caf50;
    color: white;
}

.reset-value.visible {
    display: block;
}

/* Позиционирование для блоков price-block */
.price-block {
    position: relative;
}

/* Позиционирование для calculation-card */
.calculation-card {
    position: relative;
}

.calculation-row {
    position: relative;
}

/* Секция скидок */
.discounts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.discount-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #fff8f0;
    border-radius: var(--radius-sm);
    border-left: 4px solid var(--accent-color);
}

.discount-item .name {
    font-weight: 500;
    font-size: 0.95rem;
}

.discount-item .values {
    text-align: right;
    font-size: 0.9rem;
}

.discount-item .values .discount {
    color: var(--error-color);
    font-weight: 600;
}

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

.calculation-row .value .discount {
    color: var(--error-color);
    font-weight: 600;
}

.calculation-row .value .compensation {
    color: var(--compensation-color);
    font-weight: 600;
}

.calculation-row.highlight .value .discount {
    color: var(--error-color);
}

.calculation-row.highlight .value .compensation {
    color: var(--compensation-color);
}

/* ПВ (первоначальный взнос) */
.pv-display {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    text-align: center;
    border: 0px none transparent;
    position: relative;
}

.pv-display .pv-percent {
    position: absolute;
    top: 4px;
    right: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #1976d2;
    background: rgba(255, 255, 255, 0.7);
    padding: 1px 4px;
    border-radius: 3px;
}

.pv-display .label {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 2px;
}

.pv-display .value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1976d2;
}

/* Строка ПВ и Остаток */
.pv-blocks-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

.pv-blocks-row .pv-display,
.pv-blocks-row .remainder-display {
    flex: 1;
    margin: 0;
}

/* Остаток */
.remainder-display {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    text-align: center;
    border: none;
}

.remainder-display .label {
    font-size: 0.75rem;
    color: var(--text-light);
    margin-bottom: 2px;
}

.remainder-display .value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #f57c00;
}

/* Маржа */
.margin-display {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c8 100%);
    border-radius: var(--radius-sm);
    padding: 12px 12px 0 12px;
    text-align: center;
    border: 0px none transparent;
    margin-top: 8px;
}

.margin-display .label {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 6px;
}

.margin-display .value {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--primary-color);
}

.margin-display .value-bnds {
    font-size: 0.72rem;
    color: var(--text-color);
    margin-top: 4px;
}

/* Спиннер загрузки */
.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    color: var(--text-light);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border-color);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
}

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

/* Уведомления */
.notification {
    position: fixed;
    top: 16px;
    right: 16px;
    padding: 12px 20px;
    border-radius: var(--radius-sm);
    color: white;
    font-weight: 500;
    font-size: 0.9rem;
    box-shadow: var(--shadow-lg);
    z-index: 1003;
    transform: translateX(400px);
    transition: transform var(--transition-normal);
    pointer-events: none;
    opacity: 0.8;
}

.notification.show {
    transform: translateX(0);
}

.notification.success {
    background-color: var(--success-color);
}

.notification.error {
    background-color: var(--error-color);
}

.notification.warning {
    background-color: var(--warning-color);
    color: var(--text-color);
}

/* Уведомления внутри редактора данных */
#data-editor-modal-overlay .notification {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    right: auto;
    z-index: 10001;
    min-width: 300px;
    text-align: center;
}

#data-editor-modal-overlay .notification.show {
    transform: translateX(-50%) translateY(0);
}

/* Уведомления внутри экрана списка расчётов */
#calculations-screen .notification {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    right: auto;
    z-index: 10001;
    min-width: 300px;
    text-align: center;
}

#calculations-screen .notification.show {
    transform: translateX(-50%) translateY(0);
}

/* Уведомления внутри экрана утилит */
#utilities-screen .notification {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    right: auto;
    z-index: 10001;
    min-width: 300px;
    text-align: center;
}

#utilities-screen .notification.show {
    transform: translateX(-50%) translateY(0);
}

/* Селектор оборудования */
.equipment-selector {
    margin-bottom: 16px;
}

.equipment-selector-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.equipment-selector-header h3 {
    font-size: 1rem;
    color: var(--text-color);
}

/* Финансовые продукты */
.financial-products {
    background: #f0f8ff;
    border-radius: var(--radius-sm);
    padding: 16px;
    margin: 16px 0;
}

.financial-products h3 {
    font-size: 0.95rem;
    color: #1a5f9a;
    margin-bottom: 12px;
}

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

.financial-item {
    background: white;
    border-radius: var(--radius-sm);
    padding: 12px;
    text-align: center;
}

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

.financial-item .value {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a5f9a;
}

/* Финансовые продукты в новом стиле (form-group) */
.financial-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.financial-input-number {
    text-align: right;
}

.financial-input-number::-webkit-inner-spin-button,
.financial-input-number::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.financial-input-number[type="number"] {
    -moz-appearance: textfield;
}

.financial-total-sum {
    text-align: right;
    font-weight: 600;
    color: #1a5f9a;
    background-color: #f0f7ff;
    padding: 10px 12px;
    border-radius: 4px;
    min-height: 42px;
}


/* Детали сделки */
.deal-details {
    background: white;
    border-radius: var(--radius-sm);
    padding: 16px;
    border: 1px solid var(--border-color);
}

.deal-details h3 {
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 12px;
}

.deal-info-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.85rem;
}

.deal-info-row:last-child {
    border-bottom: none;
}

/* Прогресс бар загрузки данных */
.data-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--loader-bg, rgba(255, 255, 255, 0.95));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.data-loader.hidden {
    display: none;
}

.data-loader .message {
    margin-top: 16px;
    color: var(--text-light);
    font-size: 1rem;
}

/* Статистика выбранного оборудования */
.equipment-stats {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 12px;
    background: #f0f8f0;
    border-radius: var(--radius-sm);
    margin-bottom: 16px;
}

.equipment-stat {
    text-align: center;
}

.equipment-stat .value {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
}

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

/* Вкладки */
.tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border-color);
}

.tab {
    padding: 10px 20px;
    background: none;
    border: none;
    font-size: 0.9rem;
    color: var(--text-light);
    cursor: pointer;
    transition: all var(--transition-fast);
    position: relative;
}

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

.tab.active {
    color: var(--primary-color);
    font-weight: 600;
}

.tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--primary-color);
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Адаптивность компонентов */
@media (max-width: 768px) {
    .price-blocks {
        grid-template-columns: repeat(2, 1fr);
    }

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

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

    /* Модальное окно бегунка - мобильная адаптация */
    .runner-modal-container {
        width: 95%;
        height: 90vh;
        max-height: 90vh;
        border-radius: var(--radius-sm);
    }

    .runner-modal-header {
        padding: 10px 12px;
    }

    .runner-modal-header h2 {
        font-size: 0.95rem;
    }

    .runner-modal-body {
        padding: 12px;
    }

    .runner-modal-prices {
        flex-direction: column;
        gap: 8px;
    }

    .runner-modal-info-header {
        flex-direction: column;
        gap: 12px;
    }

    .runner-modal-client-block,
    .runner-modal-manager-block {
        flex: unset;
    }

    .runner-modal-signature {
        padding-top: 20px;
    }

    .runner-modal-signature-line {
        width: 120px;
    }

    .runner-modal-footer {
        padding: 10px 12px;
    }

    .runner-modal-footer .btn {
        min-width: 120px;
        padding: 8px 16px;
    }
}

/* Кнопки в заголовке */
.header-actions {
    display: flex;
    gap: 8px;
}

.header-btn {
    padding: 8px 16px;
    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: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.header-btn:active {
    background: rgba(255, 255, 255, 0.35);
    transform: translateY(1px);
}

/* Модальное окно заявки */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

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

.modal-container {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-width: 818px;
    width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.application-modal {
    max-width: 818px;
    width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--primary-color);
    color: white;
}

.modal-header h2 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.modal-close:hover {
    opacity: 1;
}

.modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(100vh - 160px);
}

.modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

/* Секция менеджера */
.application-manager-section {
    background: #f5f5f5;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

/* Секция заголовка заявки (причина установки) */
.application-header-section {
    background: #fff;
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
    text-align: center;
}

.reason-label {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-color);
    margin-bottom: 10px;
    text-align: left;
}

.reason-input {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 1.1rem;
    font-weight: 500;
    text-align: center;
}

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

.manager-info-row {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.9rem;
}

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

.manager-label {
    font-weight: 600;
    min-width: 50px;
}

.manager-value {
    color: var(--text-color);
}

/* Секция автомобиля */
.application-car-section {
    background: #fff;
    padding: 10px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.car-info-row {
    display: flex;
    gap: 10px;
    margin-bottom: 6px;
    font-size: 0.9rem;
    align-items: center;
}

.car-info-row:last-child {
    margin-bottom: 0;
}

.car-label {
    font-weight: 600;
    min-width: 85px;
    flex-shrink: 0;
}

.car-value {
    color: var(--text-color);
    flex: 1;
}

.car-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    text-transform: uppercase;
    font-family: inherit;
    letter-spacing: 1px;
}

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

.car-select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background-color: white;
    cursor: pointer;
}

.car-select:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Список оборудования */
.application-equipment-section {
    margin-top: 8px;
}

.equipment-list {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    max-height: 250px;
    overflow-y: auto;
}

.equipment-list-item {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.9rem;
}

.equipment-list-item:last-child {
    border-bottom: none;
}

.equipment-list-item:hover {
    background: #fafafa;
}

.equipment-empty {
    padding: 20px;
    text-align: center;
    color: var(--text-light);
    font-size: 0.9rem;
}

/* Кнопка печати */
#btn-print-application {
    min-width: 120px;
    padding: 10px 24px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Модальное окно бегунка */
.runner-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.runner-modal-overlay.active {
    display: flex;
}

.runner-modal-container {
    background: white;
    border-radius: var(--radius-sm);
    width: calc(100vw - 40px);
    max-width: 818px;
    max-height: calc(100vh - 100px);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Мобильная адаптация для всех модальных окон */
@media (max-width: 768px) {
    .runner-modal-container,
    .modal-container,
    .application-modal,
    .tools-modal-container,
    .manager-modal-container {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 80px);
        border-radius: var(--radius-sm);
    }

    .runner-modal-body,
    .modal-body,
    .tools-modal-body,
    .manager-modal-body {
        max-height: calc(100dvh - 140px);
        padding: 12px;
    }

    .runner-modal-header,
    .modal-header,
    .tools-modal-header,
    .manager-modal-header {
        padding: 10px 12px;
        flex-shrink: 0;
    }

    .runner-modal-header h2,
    .modal-header h2,
    .tools-modal-header h2,
    .manager-modal-header h2 {
        font-size: 0.9rem;
    }

    .runner-modal-footer,
    .modal-footer {
        padding: 10px 12px;
        flex-shrink: 0;
    }

    .runner-modal-footer .btn,
    .modal-footer .btn {
        min-width: 100px;
        padding: 8px 16px;
        font-size: 0.85rem;
    }
}

/* Очень маленькие экраны */
@media (max-width: 480px) {
    .runner-modal-container,
    .modal-container,
    .application-modal,
    .tools-modal-container,
    .manager-modal-container {
        width: calc(100vw - 10px);
        max-width: calc(100vw - 10px);
        max-height: calc(100dvh - 40px);
    }

    .runner-modal-body,
    .modal-body,
    .tools-modal-body,
    .manager-modal-body {
        max-height: calc(100dvh - 100px);
        padding: 10px;
    }

    .runner-modal-header,
    .modal-header,
    .tools-modal-header,
    .manager-modal-header {
        padding: 8px 10px;
    }

    .runner-modal-header h2,
    .modal-header h2,
    .tools-modal-header h2,
    .manager-modal-header h2 {
        font-size: 0.85rem;
    }

    .runner-modal-footer,
    .modal-footer {
        padding: 8px 10px;
    }

    .runner-modal-footer .btn,
    .modal-footer .btn {
        min-width: 80px;
        padding: 6px 12px;
        font-size: 0.8rem;
    }
}

.runner-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 2px solid var(--primary-color);
    background: var(--primary-color);
    color: white;
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.runner-modal-header h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.runner-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.runner-modal-close:hover {
    opacity: 1;
}

.runner-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(100vh - 160px);
}

.runner-modal-datetime {
    text-align: right;
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
}

.runner-modal-vin {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.runner-vin-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.runner-vin-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: 'Courier New', monospace;
}

.runner-modal-car {
    text-align: center;
    margin-bottom: 12px;
    padding: 10px;
    background: #f5f5f5;
    border-radius: var(--radius-sm);
}

.runner-car-model {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.runner-car-trim {
    font-size: 0.9rem;
    color: #666;
}

.runner-modal-prices {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #ddd;
}

.runner-modal-price-item {
    flex: 1;
    text-align: center;
    padding: 8px;
    background: #f9f9f9;
    border-radius: var(--radius-sm);
}

.runner-modal-price-label {
    display: block;
    font-size: 0.7rem;
    color: #666;
    margin-bottom: 4px;
    text-transform: uppercase;
}

.runner-modal-final-price,
.runner-modal-rrc-price,
.runner-modal-purchase-price {
    font-size: 0.95rem;
    font-weight: 700;
    font-family: 'Courier New', monospace;
}

.runner-modal-discounts {
    margin-bottom: 12px;
}

.runner-modal-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.runner-modal-table td {
    padding: 6px 8px;
    border: 1px solid #ddd;
}

.runner-modal-table td:last-child {
    text-align: right;
    font-weight: 600;
    font-family: 'Courier New', monospace;
}

.runner-modal-table tr:nth-child(even) {
    background: #fafafa;
}

.runner-modal-total-row td {
    font-weight: 700;
    background: #f0f0f0;
}

.runner-modal-equipment {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #f9f9f9;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.runner-modal-equipment-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.runner-modal-equipment-price {
    font-weight: 700;
    font-size: 1rem;
    font-family: 'Courier New', monospace;
}

.runner-modal-margin {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: #f0f8f0;
    border-left: 3px solid #4caf50;
    border-radius: var(--radius-sm);
    margin-bottom: 12px;
}

.runner-modal-margin-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.runner-modal-margin-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: #2e7d32;
    font-family: 'Courier New', monospace;
}

.runner-modal-info-header {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e0e0e0;
}

.runner-modal-client-block,
.runner-modal-manager-block {
    flex: 1;
}

.runner-modal-label {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.runner-modal-client {
    display: flex;
    flex-direction: column;
}

.runner-modal-client-name {
    font-weight: 600;
    font-size: 1rem;
}

.runner-modal-client-phone {
    font-size: 0.9rem;
    color: #666;
}

.runner-modal-manager {
    display: flex;
    align-items: center;
}

.runner-modal-manager-name {
    font-weight: 600;
    font-size: 1rem;
}

.runner-modal-signature {
    position: relative;
    padding-top: 25px;
}

.runner-modal-signature-line {
    width: 150px;
    height: 1px;
    background: #333;
}

.runner-modal-signature-text {
    position: absolute;
    top: 5px;
    left: 0;
    font-size: 0.75rem;
    color: #666;
}

.runner-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

.runner-modal-footer .btn {
    min-width: 150px;
    padding: 10px 24px;
}

/* Модальное окно утилит */
.tools-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.tools-modal-overlay.active {
    display: flex;
}

.tools-modal-container {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 300px;
    max-width: 818px;
    width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.tools-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--primary-color);
    color: white;
}

.tools-modal-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.tools-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.tools-modal-close:hover {
    opacity: 1;
}

.tools-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: calc(100vh - 160px);
}

.tools-modal-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

/* Модальное окно админки */
.admin-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.admin-modal-overlay.active {
    display: flex;
}

.admin-modal-container {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    max-width: 400px;
    width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.admin-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--primary-color);
    color: white;
}

.admin-modal-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.admin-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.admin-modal-close:hover {
    opacity: 1;
}

.admin-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-modal-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.admin-modal-btn:hover {
    background: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

/* Кнопка сброса кеша */
.admin-modal-btn-danger {
    border-color: var(--error-color);
    color: var(--error-color);
}

.admin-modal-btn-danger:hover {
    background: #ffebee;
    border-color: var(--error-color);
    color: var(--error-color);
}

/* Модальное окно менеджера */
.manager-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.manager-modal-overlay.active {
    display: flex;
}

.manager-modal-container {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 280px;
    max-width: 818px;
    width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.manager-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--primary-color);
    color: white;
}

.manager-modal-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.manager-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity 0.2s;
}

.manager-modal-close:hover {
    opacity: 1;
}

.manager-modal-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(100vh - 160px);
}

.manager-modal-action-btn {
    display: block;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    color: var(--text-color);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

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

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

.manager-modal-divider {
    height: 1px;
    background: var(--border-color);
    margin: 8px 0;
}

.manager-modal-guest {
    text-align: center;
    padding: 8px 0;
}

.manager-modal-user {
    text-align: center;
}

.manager-modal-user-info {
    margin-bottom: 12px;
    padding: 12px;
    background: #f5f5f5;
    border-radius: var(--radius-sm);
}

.manager-modal-user-phone {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-color);
}

.manager-modal-user .btn {
    margin-top: 8px;
}

/* Styles for begunok template in modal */
.runner-modal-body .document {
    width: 100%;
    max-width: 190mm;
    margin: 0 auto;
    padding: 5mm;
    font-family: 'Times New Roman', Times, serif;
    font-size: 11pt;
    line-height: 1.4;
    color: #000;
}

.runner-modal-body .header {
    text-align: center;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid #000;
}

.runner-modal-body .header-title {
    font-size: 14pt;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.runner-modal-body .header-info {
    font-size: 10pt;
    color: #333;
}

.runner-modal-body .info-block {
    margin-bottom: 8px;
}

.runner-modal-body .info-row {
    display: flex;
    margin-bottom: 4px;
}

.runner-modal-body .info-label {
    width: 45mm;
    min-width: 45mm;
    max-width: 45mm;
    font-weight: normal;
    white-space: nowrap;
    font-size: 9pt;
}

.runner-modal-body .info-value {
    flex: 1;
    border-bottom: 1px solid #000;
    padding: 0 4px;
    min-height: 16px;
    font-size: 10pt;
}

.runner-modal-body .main-table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 10pt;
}

.runner-modal-body .main-table td {
    border: 1px solid #000;
    padding: 3px 5px;
}

.runner-modal-body .main-table th {
    border: 1px solid #000;
    padding: 3px 5px;
    background-color: #e0e0e0;
    font-weight: bold;
    text-align: center;
}

.runner-modal-body .main-table .label-cell {
    background-color: #f5f5f5;
    font-weight: bold;
    text-align: left;
    width: 70%;
}

.runner-modal-body .main-table .value-cell {
    text-align: right;
    font-weight: bold;
    width: 30%;
    font-family: 'Courier New', monospace;
}

.runner-modal-body .discounts-table {
    width: 100%;
    border-collapse: collapse;
    margin: 6px 0;
    font-size: 10pt;
}

.runner-modal-body .discounts-table td {
    border: 1px solid #000;
    padding: 3px 5px;
}

.runner-modal-body .discounts-table th {
    border: 1px solid #000;
    padding: 3px 5px;
    background-color: #d9d9d9;
    font-weight: bold;
    text-align: center;
}

.runner-modal-body .discounts-table .text-cell {
    text-align: left;
}

.runner-modal-body .discounts-table .number-cell {
    text-align: right;
    font-family: 'Courier New', monospace;
}

.runner-modal-body .discounts-table .negative {
    color: #c00;
}

.runner-modal-body .discounts-table .positive {
    color: #080;
}

.runner-modal-body .total-row td {
    background-color: #e8e8e8 !important;
    font-weight: bold;
}

.runner-modal-body .total-row .text-cell {
    text-align: right;
}

.runner-modal-body .summary-section {
    margin-top: 6px;
    padding: 5px;
    background-color: #f8f8f8;
    border: 1px solid #000;
}

.runner-modal-body .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    font-size: 11pt;
}

.runner-modal-body .summary-row:first-child {
    font-size: 14pt;
}

.runner-modal-body .summary-row:last-child {
    margin-bottom: 0;
    padding-top: 2px;
    border-top: 1px solid #000;
}

.runner-modal-body .summary-label {
    font-weight: bold;
}

.runner-modal-body .summary-value {
    font-weight: bold;
    font-family: 'Courier New', monospace;
    color: #000;
}

.runner-modal-body .runner-modal-margin-value {
    color: #000 !important;
}

.runner-modal-body .footer {
    margin-top: 8px;
    padding-top: 4px;
}

.runner-modal-body .signature-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.runner-modal-body .signature-block {
    width: 60mm;
}

.runner-modal-body .signature-line {
    width: 100%;
    height: 1px;
    background: #000;
    margin-top: 20px;
    margin-bottom: 3px;
}

.runner-modal-body .signature-label {
    font-size: 9pt;
    color: #333;
}

.runner-modal-body .hidden {
    display: none !important;
}

.runner-modal-body .small-text {
    font-size: 9pt;
    font-weight: bold;
}

.runner-modal-body .text-right {
    text-align: right;
}

.runner-modal-body .text-center {
    text-align: center;
}

.runner-modal-body .font-bold {
    font-weight: bold;
}

.runner-modal-body .info-value {
    flex: 1;
    padding: 0 4px;
    min-height: 16px;
    font-size: 10pt;
    display: block;
    width: 100%;
    background: transparent;
}

/* Remove border from reserve amount field */
.runner-modal-body .runner-modal-reserve-amount {
    border-bottom: none !important;
}

/* Splitter line above discounts table */
.runner-modal-body .runner-modal-divider {
    width: 100%;
    height: 1px;
    background-color: #000;
    margin: 10px 0;
}

/* Fat splitter line after discounts table */
.runner-modal-body .runner-modal-divider-thick {
    width: 100%;
    height: 2px;
    background-color: #000;
    margin: 10px 0;
}

/* Plain text display for all info values */
.runner-modal-body .info-value,
.runner-modal-body .runner-car-model,
.runner-modal-body .runner-vin-text,
.runner-modal-body .runner-car-color,
.runner-modal-body .runner-modal-client-name,
.runner-modal-body .runner-modal-manager-name {
    font-family: 'Times New Roman', Times, serif;
    font-size: 10pt;
    color: #000;
    font-weight: normal;
}

/* Uppercase text in discounts table */
.runner-modal-body .discounts-table,
.runner-modal-body .discounts-table td,
.runner-modal-body .discounts-table th,
.runner-modal-body .runner-modal-discount-name-1,
.runner-modal-body .runner-modal-discount-name-2,
.runner-modal-body .runner-modal-discount-name-3,
.runner-modal-body .runner-modal-discount-name-4 {
    text-transform: uppercase;
}

/* Секция текста визитки */
.business-card-text-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.business-card-text-section .business-card-label {
    display: block;
    font-weight: 600;
    color: var(--text-color);
    font-size: 0.9rem;
}

.business-card-text-input {
    width: 100%;
    min-height: 60px;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-size: 0.95rem;
    font-family: inherit;
    resize: none;
    overflow: hidden;
    line-height: 1.5;
    transition: border-color var(--transition-fast);
    box-sizing: border-box;
}

.business-card-text-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 128, 0, 0.1);
}

.business-card-text-input::placeholder {
    color: var(--text-light);
    font-style: italic;
}

/* Модальное окно списка пользователей */
.users-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.users-modal-overlay.active {
    display: flex;
}

.users-modal-container {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    min-width: 400px;
    max-width: 600px;
    width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.users-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--primary-color);
    color: white;
}

.users-modal-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.users-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.users-modal-close:hover {
    opacity: 1;
}

.users-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(100vh - 160px);
}

.users-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: center;
}

/* Список пользователей */
.users-list {
    min-height: 200px;
}

.users-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.users-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-light);
}

.user-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    background: #f8f8f8;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.user-item:hover {
    background: #f0f8f0;
    border-color: var(--primary-color);
}

.user-item-info {
    flex: 1;
}

.user-item-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 4px;
}

.user-item-details {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.user-display-name,
.user-dealership {
    font-size: 0.85rem;
    color: var(--text-light);
}

.user-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.user-role {
    font-size: 0.8rem;
    color: var(--primary-color);
    font-weight: 500;
}

.user-status {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
}

.user-status.active {
    background: #e8f5e9;
    color: #2e7d32;
}

.user-status.inactive {
    background: #ffebee;
    color: #c62828;
}

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

/* Дата последнего расчёта */
.user-last-calculation {
    font-size: 0.75rem;
    color: var(--primary-color);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-last-calculation svg {
    width: 12px;
    height: 12px;
}

.user-last-calculation.never {
    color: var(--text-light);
    font-style: italic;
}

.user-item-meta {
    gap: 4px;
}

/* Модальное окно расчётов пользователя */
.user-calculations-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    justify-content: center;
    align-items: center;
}

.user-calculations-modal-overlay.active {
    display: flex;
}

.user-calculations-modal-container {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    width: 700px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.user-calculations-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: var(--primary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    color: white;
}

.user-calculations-modal-header h2 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.user-calculations-modal-close {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}

.user-calculations-modal-close:hover {
    opacity: 1;
}

.user-calculations-modal-body {
    padding: 16px;
    overflow-y: auto;
    flex: 1;
    max-height: calc(100vh - 160px);
}

.user-calculations-modal-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Список расчётов пользователя */
.user-calculations-list-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.user-calculation-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.user-calculation-item:hover {
    background-color: var(--bg-hover);
}

.user-calculation-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.user-calculation-item-name {
    font-weight: 500;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-calculation-item-date {
    font-size: 0.75rem;
    color: var(--text-light);
}

.user-calculation-item-car {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-calculations-empty {
    text-align: center;
    padding: 32px;
    color: var(--text-light);
}

/* Адаптивность для модального окна пользователей */
@media (max-width: 768px) {
    .users-modal-container {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 80px);
    }

    .users-modal-header,
    .users-modal-footer {
        padding: 10px 12px;
    }

    .users-modal-header h2 {
        font-size: 0.9rem;
    }

    .users-modal-body {
        padding: 12px;
        max-height: calc(100dvh - 140px);
    }

    .user-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .user-item-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        margin-top: 4px;
    }

    /* Адаптивность для модального окна расчётов */
    .user-calculations-modal-container {
        width: calc(100vw - 20px);
        max-width: calc(100vw - 20px);
        max-height: calc(100dvh - 80px);
    }

    .user-calculations-modal-header,
    .user-calculations-modal-footer {
        padding: 10px 12px;
    }

    .user-calculations-modal-header h2 {
        font-size: 0.9rem;
    }

    .user-calculations-modal-body {
        padding: 12px;
        max-height: calc(100dvh - 140px);
    }

    .user-calculation-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* --- Модальное окно просмотра расчёта УДАЛЕНО (дублируется в styles.css) --- */

/* Спойлер напоминалки */
.reminder-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);
}

.reminder-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) {
    .reminder-spoiler-header:hover {
        background: var(--secondary-color);
    }
}

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

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

.reminder-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;
}

.reminder-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);
}

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

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

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

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

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

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

.reminder-datetime-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.reminder-add-btn {
    width: 100%;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .reminder-datetime-row {
        grid-template-columns: 1fr;
    }
}

/* Список напоминаний */
.reminder-list {
    margin-bottom: 16px;
}

.reminder-list:empty {
    display: none;
}

.reminder-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #f9fafb;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    margin-bottom: 8px;
    font-size: 0.85rem;
    transition: background-color var(--transition-fast);
}

.reminder-item:hover {
    background: #f3f4f6;
}

.reminder-item.past {
    opacity: 0.6;
    background: #f5f5f5;
}

.reminder-item.past .reminder-item-date,
.reminder-item.past .reminder-item-time,
.reminder-item.past .reminder-item-comment {
    text-decoration: line-through;
    color: var(--text-light);
}

.reminder-item-content {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.reminder-item-date,
.reminder-item-time {
    color: var(--text-dark);
    font-weight: 500;
}

.reminder-item-comment {
    color: var(--text-color);
    flex: 1;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 2.8em;
}

@media (max-width: 768px) {
    .reminder-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .reminder-item-content {
        width: 100%;
    }
}

/* Comment field styling */
.reminder-comment {
    width: 100%;
    margin-bottom: 12px;
}

/* Quick time buttons container */
.reminder-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* Quick time button styles */
.btn-quick-time,
.btn-custom-time {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--border-color);
    background: white;
    color: var(--text-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.btn-quick-time:hover,
.btn-custom-time:hover {
    background: var(--secondary-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-quick-time:active,
.btn-custom-time:active {
    transform: translateY(0);
    box-shadow: none;
}

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

.btn-custom-time:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    color: white;
}

/* Modal overlay */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

.modal.open {
    display: flex;
}

/* Modal content */
.modal-content {
    background: white;
    border-radius: var(--radius-md);
    padding: 24px;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    animation: slideUp 0.3s ease;
}

.modal-content h3 {
    margin: 0 0 20px 0;
    font-size: 1.25rem;
    color: var(--text-dark);
    font-weight: 600;
}

.modal-content .form-input {
    width: 100%;
    margin-bottom: 16px;
}

/* Modal actions */
.modal-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.modal-actions .btn {
    flex: 1;
    padding: 10px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

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

.modal-actions .btn-primary:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

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

.modal-actions .btn-secondary:hover {
    background: var(--secondary-color);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Modal animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    .reminder-quick-buttons {
        flex-direction: column;
    }
    
    .btn-quick-time,
    .btn-custom-time {
        flex: 1 1 100%;
        min-width: 100%;
    }
    
    .modal-content {
        width: 95%;
        padding: 20px;
    }
    
    .modal-content h3 {
        font-size: 1.1rem;
    }
    
    .modal-actions {
        flex-direction: column;
    }
    
    .modal-actions .btn {
        width: 100%;
    }
}