/* ================================================================
   🎨 CORA-X DESIGN SYSTEM v3.0
   Медицинская дизайн-система для радиотерапии

   КОНЦЕПЦИЯ: "Спокойная клиника"
   - Светлый, воздушный интерфейс (не утомляет глаза)
   - Мягкие тени вместо жёстких границ
   - Приглушённые цвета статусов (не кричащие)
   - Чёткая иерархия через вес и пространство
   - Акцентный teal для действий
   ================================================================ */

/* ============================================
   CSS ПЕРЕМЕННЫЕ - ЕДИНАЯ ТОЧКА УПРАВЛЕНИЯ
   ✅ ИСПРАВЛЕНО: Основные переменные в css/core/variables.css
   Здесь только локальные переменные для styles.css
   ============================================ */
:root {
    /* ⚠️ --color-primary определён в css/core/variables.css
       НЕ ДУБЛИРОВАТЬ здесь! */

    /* Фоны - специфичные для Topometry */
    --bg-page: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 50%, #e2e8f0 100%);
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-muted: #f8fafc;
    --bg-hover: #f1f5f9;

    /* Текст */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-inverse: #ffffff;

    /* Границы */
    --border-light: #e2e8f0;
    --border-default: #cbd5e1;
    --border-focus: var(--color-primary);

    /* Тени — базовые определены в variables.css, здесь только специфичные */
    --shadow-glow: 0 0 0 3px rgba(59, 130, 246, 0.15);

    /* Статусы - ПАСТЕЛЬНЫЕ */
    --status-free-bg: #f0fdf4;
    --status-free-border: #86efac;
    --status-free-text: #166534;

    --status-booked-bg: #f0f9ff;
    --status-booked-border: #7dd3fc;
    --status-booked-text: #0369a1;

    --status-arrived-bg: #fffbeb;
    --status-arrived-border: #fcd34d;
    --status-arrived-text: #92400e;

    --status-completed-bg: #ecfdf5;
    --status-completed-border: #6ee7b7;
    --status-completed-text: #047857;

    --status-cancelled-bg: #fef2f2;
    --status-cancelled-border: #fca5a5;
    --status-cancelled-text: #b91c1c;
    /* ⚠️ --radius-xl и --radius-full определены в css/core/variables.css */

    /* Переходы — базовые определены в variables.css (--transition-fast/base/slow)
       Здесь алиас для обратной совместимости */
    --transition-normal: var(--transition-base, 200ms ease);
}

/* Фон страницы топометрии */
body.topometry-page {
    background: var(--bg-page);
    min-height: 100vh;
    color: var(--text-primary);
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

.animate-slide-in {
    animation: slideIn 0.3s ease-out;
}

.animate-fade-out {
    animation: fadeOut 0.3s ease-out;
}

/* ============================================
   ТАБЛИЦА СЛОТОВ - КАРТОЧНЫЙ СТИЛЬ
   Мягкие тени, скругления, воздушность
   ============================================ */
.slots-table {
    border-collapse: separate;
    border-spacing: 0 4px;
    width: 100%;
}

.slots-table th {
    background: var(--bg-muted);
    font-weight: 600;
    color: var(--text-secondary);
    border: none;
    padding: 12px 8px;
    text-align: center;
    vertical-align: middle;
    font-size: 0.75rem;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slots-table th:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.slots-table th:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

.slots-table td {
    border: none;
    padding: 8px;
    vertical-align: top;
    font-size: 0.8rem;
    line-height: 1.4;
    background-color: var(--bg-card);
}

/* Первая и последняя ячейка строки */
.slot-row td:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.slot-row td:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
}

/* Многострочные ячейки */
.multi-line-cell {
    padding: 8px 10px !important;
}

.multi-line-cell div {
    padding: 4px 0;
    min-height: 20px;
    border-bottom: 1px dotted var(--border-light);
}

.multi-line-cell div:last-child {
    border-bottom: none;
}

/* Строки слотов */
.slot-row {
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.slot-row:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.slot-row td {
    height: auto;
    min-height: 64px;
}

/* ============================================
   СТАТУСЫ СЛОТОВ - CSS ПЕРЕМЕННЫЕ
   Мягкие, не раздражающие цвета + тень
   ============================================ */

.slot-row.slot-free td {
    background-color: var(--status-free-bg) !important;
    box-shadow: inset 3px 0 0 var(--status-free-border);
}

.slot-row.slot-booked td {
    background-color: var(--status-booked-bg) !important;
    box-shadow: inset 3px 0 0 var(--status-booked-border);
}

.slot-row.slot-arrived td {
    background-color: var(--status-arrived-bg) !important;
    box-shadow: inset 3px 0 0 var(--status-arrived-border);
    /* Мягкий жёлтый акцент */
}

.slot-row.slot-completed td {
    background-color: var(--status-completed-bg) !important;
    box-shadow: inset 3px 0 0 var(--status-completed-border);
}

.slot-row.slot-cancelled td {
    background-color: var(--status-cancelled-bg) !important;
    box-shadow: inset 3px 0 0 var(--status-cancelled-border);
}

.slot-row.slot-no-show td {
    background-color: #f5f3ff !important;
    box-shadow: inset 3px 0 0 #c4b5fd;
}

.slot-row.slot-rescheduled td {
    background-color: #faf5ff !important;
    box-shadow: inset 3px 0 0 #d8b4fe;
}

.slot-row.slot-next td {
    background-color: #fff7ed !important;
    box-shadow: inset 3px 0 0 #fdba74;
}

/* Hover эффекты - плавное подсвечивание */
.slot-row.slot-free:hover td {
    background-color: #dcfce7 !important;
}

.slot-row.slot-booked:hover td {
    background-color: #e0f2fe !important;
}

.slot-row.slot-arrived:hover td {
    background-color: #fef9c3 !important;
}

.slot-row.slot-completed:hover td {
    background-color: #d1fae5 !important;
}

.slot-row.slot-cancelled:hover td {
    background-color: #fee2e2 !important;
}

.slot-row.slot-no-show:hover td {
    background-color: #ede9fe !important;
}

.slot-row.slot-rescheduled:hover td {
    background-color: #f3e8ff !important;
}

.slot-row.slot-next:hover td {
    background-color: #ffedd5 !important;
}

/* ============ УЛУЧШЕНИЕ ЧЁТКОСТИ ТЕКСТА В ТОПОМЕТРИИ ============ */

/* Базовая чёткость для всех слотов */
.slots-table,
.slot-row,
.mobile-slot-card {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Улучшение текста при hover на строках */
.slot-row:hover td {
    color: #0f172a !important;
}

.slot-row:hover .text-gray-600,
.slot-row:hover .text-gray-500 {
    color: #374151 !important;
}

/* Карточки позиций - чёткость при hover */
.position-card:hover {
    -webkit-font-smoothing: antialiased !important;
}

.position-card:hover .text-gray-700,
.position-card:hover .text-gray-500 {
    color: #1f2937 !important;
}

/* ============================================
   КОМПОНЕНТЫ UI - CSS ПЕРЕМЕННЫЕ
   ============================================ */

/* Стили для раскрывающегося списка статусов */
.status-select {
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    padding: 4px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.status-select:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.status-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

/* Поиск */
.search-section {
    position: relative;
}

.search-container {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
}

.search-input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-size: 14px;
    background: var(--bg-card);
    color: var(--text-primary);
    transition: all var(--transition-fast);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-glow);
}

.search-input::placeholder {
    color: var(--text-muted);
}

/* Кнопка поиска - акцентная */
.search-btn {
    background: var(--color-primary);
    color: var(--text-inverse);
    border: none;
    border-radius: var(--radius-md);
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: var(--shadow-sm);
}

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

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

/* Кнопка очистки */
.clear-search-btn {
    background: var(--bg-muted);
    color: var(--text-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 11px 16px;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.clear-search-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    max-height: 400px;
    overflow-y: auto;
}

.search-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-weight: 600;
    color: #374151;
}

.close-results-btn {
    background: none;
    border: none;
    color: #6b7280;
    cursor: pointer;
    font-size: 16px;
    padding: 2px;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.close-results-btn:hover {
    background: #e5e7eb;
}

.search-results-list {
    max-height: 300px;
    overflow-y: auto;
}

.search-result-item {
    padding: 12px 15px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.search-result-item:hover {
    background: #f9fafb;
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-date {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.search-result-patient {
    font-weight: 600;
    color: #111827;
    margin-bottom: 2px;
}

.search-result-details {
    font-size: 13px;
    color: #6b7280;
}

.search-result-time {
    display: inline-block;
    background: #2563eb;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-right: 8px;
}

.search-result-slot {
    display: inline-block;
    background: #e5e7eb;
    color: #374151;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
}

/* Стили для времени прибытия и таймера */
.arrival-time {
    font-weight: 600;
    color: #059669;
    font-size: 0.8rem;
}

.timer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-height: 50px;
}

.timer-text {
    font-size: 0.7rem;
    line-height: 1.2;
    color: #059669;
    font-weight: 500;
}

.timer-display {
    font-weight: 600;
    color: #dc2626;
    font-size: 0.8rem;
    font-family: 'Courier New', monospace;
}

.timer-btn {
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.6rem;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 50px;
}

.timer-btn:hover {
    background: #2563eb;
    transform: scale(1.05);
}

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

.timer-btn[data-active="true"] {
    background: #ef4444;
}

.timer-btn[data-active="true"]:hover {
    background: #dc2626;
}

/* Стили для фото пациента */
.patient-photo {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    transition: border-color 0.2s ease;
}

.patient-photo:hover {
    border-color: #3b82f6;
}

.photo-actions {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.photo-btn {
    background: #2563eb;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 4px 8px;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 50px;
}

.photo-btn:hover {
    background: #2563eb;
}

.photo-btn.upload {
    background: #059669;
}

.photo-btn.upload:hover {
    background: #047857;
}

.photo-btn.camera {
    background: #7c3aed;
}

.photo-btn.camera:hover {
    background: #6d28d9;
}

.no-photo {
    width: 60px;
    height: 60px;
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    /* ✅ Улучшен контраст: было #9ca3af */
    font-size: 24px;
    background: #f9fafb;
}

/* Кастомные компоненты */
/* card-header определен ниже (строка ~807) с полными стилями */

.btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: var(--gradient-btn-primary, linear-gradient(180deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%));
    color: white;
    border-radius: 8px;
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s ease;
    border: 1px solid rgba(37, 99, 235, 0.3);
    border-top-color: rgba(96, 165, 250, 0.4);
    border-bottom-color: rgba(30, 64, 175, 0.4);
    cursor: pointer;
    box-shadow:
        0 2px 4px rgba(37, 99, 235, 0.25),
        0 4px 8px rgba(37, 99, 235, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.btn-primary:hover {
    background: linear-gradient(180deg, #93bbfd 0%, #3b82f6 40%, #1d4ed8 100%);
    transform: translateY(-2px);
    box-shadow:
        0 4px 8px rgba(37, 99, 235, 0.3),
        0 8px 16px rgba(37, 99, 235, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-3d-pressed, inset 0 1px 3px rgba(0, 0, 0, 0.12));
    background: linear-gradient(180deg, #3b82f6 0%, #2563eb 50%, #1e40af 100%);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1.5px solid #d1d5db;
    border-top-color: #e5e7eb;
    border-bottom-color: #9ca3af;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    color: #374151;
    background: var(--gradient-raised, linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%));
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-3d-sm, 0 1px 3px rgba(0, 0, 0, 0.07));
}

.btn-secondary:hover {
    background: var(--gradient-raised-hover, linear-gradient(180deg, #ffffff 0%, #e5e7eb 100%));
    transform: translateY(-1px);
    box-shadow: var(--shadow-3d-md, 0 2px 4px rgba(0, 0, 0, 0.08));
}

.btn-secondary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-3d-pressed, inset 0 1px 3px rgba(0, 0, 0, 0.12));
    background: var(--gradient-sunken, linear-gradient(180deg, #f1f5f9 0%, #f8fafc 100%));
}

.btn-secondary:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #3b82f6;
}

.btn-success {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(5, 150, 105, 0.3);
    border-top-color: rgba(52, 211, 153, 0.4);
    border-bottom-color: rgba(4, 120, 87, 0.4);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    color: #ffffff;
    background: var(--gradient-btn-success, linear-gradient(180deg, #34d399 0%, #10b981 50%, #059669 100%));
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.btn-success:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-success:active {
    transform: translateY(0);
    box-shadow: var(--shadow-3d-pressed, inset 0 1px 3px rgba(0, 0, 0, 0.12));
}

.btn-success:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #22c55e;
}

.btn-danger {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-top-color: rgba(248, 113, 113, 0.4);
    border-bottom-color: rgba(185, 28, 28, 0.4);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    color: #ffffff;
    background: var(--gradient-btn-danger, linear-gradient(180deg, #f87171 0%, #ef4444 50%, #dc2626 100%));
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(239, 68, 68, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.btn-danger:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.btn-danger:active {
    transform: translateY(0);
    box-shadow: var(--shadow-3d-pressed, inset 0 1px 3px rgba(0, 0, 0, 0.12));
}

.btn-danger:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #ef4444;
}

.btn-warning {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid rgba(202, 138, 4, 0.3);
    border-top-color: rgba(251, 191, 36, 0.4);
    border-bottom-color: rgba(161, 98, 7, 0.4);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 8px;
    color: #78350f;
    /* ✅ Тёмный янтарь вместо белого — WCAG AA contrast fix */
    background: var(--gradient-btn-warning, linear-gradient(180deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%));
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.btn-warning:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(245, 158, 11, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-warning:active {
    transform: translateY(0);
    box-shadow: var(--shadow-3d-pressed, inset 0 1px 3px rgba(0, 0, 0, 0.12));
}

.btn-warning:focus {
    outline: none;
    box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #eab308;
}

/* Статусы — 3D pill badges */
.status-active {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid #86efac;
    box-shadow: 0 1px 2px rgba(22, 101, 52, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.status-inactive {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background: linear-gradient(180deg, #fef9c3 0%, #fef08a 100%);
    color: #854d0e;
    border: 1px solid #fde047;
    box-shadow: 0 1px 2px rgba(133, 77, 14, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.status-completed {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background: linear-gradient(180deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #1f2937;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.status-cancelled {
    display: inline-flex;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 9999px;
    background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid #fca5a5;
    box-shadow: 0 1px 2px rgba(153, 27, 27, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Таблицы — 3D embossed headers */
.table {
    min-width: 100%;
    border-collapse: collapse;
}

.table-header {
    background: var(--gradient-header, linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%));
}

.table-header th {
    padding: 0.75rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 2px solid #cbd5e1;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
}

.table-body td {
    padding: 1rem 1.5rem;
    white-space: nowrap;
    font-size: 0.875rem;
    color: #111827;
}

.table-row {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.table-row:hover {
    background-color: #f9fafb;
    box-shadow: var(--shadow-3d-sm, 0 1px 3px rgba(0, 0, 0, 0.07));
}

/* Формы */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 0.625rem;
    font-size: 15px;
    /* ✅ ИСПРАВЛЕНО: Уменьшено с 18px до 15px (медицинский стандарт) */
    letter-spacing: 0.01em;
}

/* Базовые стили для полей ввода — 3D inset */
.form-input {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #d1d5db;
    border-top-color: #c0c7d0;
    border-bottom-color: #e5e7eb;
    border-radius: 8px;
    background-color: #ffffff;
    transition: all 0.2s ease;
    font-size: 16px;
    box-shadow: var(--shadow-3d-sunken, inset 0 2px 4px rgba(0, 0, 0, 0.05));
}

.form-input:hover {
    border-color: #9ca3af;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(156, 163, 175, 0.2);
}

.form-input:focus {
    background-color: #fefefe;
    border-color: #3b82f6;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Обязательные поля - ЖЕЛТОВАТЫЙ ФОН */
.form-input[required]:not([readonly]) {
    background-color: #fffbeb;
    border-color: #fbbf24;
}

.form-input[required]:not([readonly]):hover {
    background-color: #fef3c7;
    border-color: #f59e0b;
}

.form-input[required]:not([readonly]):focus {
    background-color: #fffbeb;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

/* Заполненные обязательные поля - ЗЕЛЕНОВАТЫЙ ФОН */
.form-input[required]:not([readonly]):valid:not(:placeholder-shown) {
    background-color: #f0fdf4;
    border-color: #22c55e;
}

/* Readonly поля - СЕРЫЙ ФОН */
.form-input[readonly] {
    background-color: #f3f4f6;
    border-color: #d1d5db;
    cursor: not-allowed;
    color: #4b5563;
}

.form-select {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    /* ✅ ИСПРАВЛЕНО: Уменьшено с 12px до 8px */
    background-color: #ffffff;
    transition: all 0.2s ease;
    font-size: 16px;
    /* ✅ ИСПРАВЛЕНО: Уменьшено с 18px до 16px */
    box-sizing: border-box;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.form-select:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-select:hover {
    border-color: #9ca3af;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Обязательные select */
.form-select[required] {
    background-color: #fffbeb;
    border-color: #fbbf24;
}

.form-select[required]:hover {
    background-color: #fef3c7;
    border-color: #f59e0b;
}

.form-select[required]:focus {
    background-color: #fffbeb;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

/* Выбранное значение в select */
.form-select[required]:not([value=""]):valid {
    background-color: #f0fdf4;
    border-color: #22c55e;
}

.form-textarea {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    /* ✅ ИСПРАВЛЕНО: Уменьшено с 12px до 8px */
    background-color: #ffffff;
    transition: all 0.2s ease;
    font-size: 15px;
    /* ✅ ИСПРАВЛЕНО: Уменьшено с 18px до 15px */
    resize: vertical;
    min-height: 100px;
    line-height: 1.6;
}

.form-textarea:focus {
    outline: none;
    border-color: #3b82f6;
    background-color: #fefefe;
    /* ✅ ОБЪЕДИНЕНО: Убран дубль */
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-textarea:hover {
    border-color: #9ca3af;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Обязательные textarea */
.form-textarea[required] {
    background-color: #fffbeb;
    border-color: #fbbf24;
}

.form-textarea[required]:hover {
    background-color: #fef3c7;
    border-color: #f59e0b;
}

.form-textarea[required]:focus {
    background-color: #fffbeb;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.15);
}

/* Заполненные textarea */
.form-textarea[required]:valid:not(:placeholder-shown) {
    background-color: #f0fdf4;
    border-color: #22c55e;
}

/* Radio buttons и checkboxes - УЛУЧШЕННЫЕ */
.radio {
    height: 1.25rem;
    width: 1.25rem;
    color: #2563eb;
    border: 1px solid #d1d5db;
    cursor: pointer;
    transition: all 0.2s ease;
}

.radio:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3b82f6;
}

.radio:hover {
    border-color: #3b82f6;
}

.checkbox {
    height: 1.25rem;
    width: 1.25rem;
    color: #2563eb;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.checkbox:focus {
    outline: none;
    box-shadow: 0 0 0 2px #3b82f6;
}

.checkbox:hover {
    border-color: #3b82f6;
}

/* Стили для label с required полем */
.form-label:has(+ input[required]),
.form-label:has(+ select[required]),
.form-label:has(+ textarea[required]) {
    font-weight: 600;
}

/* ✅ ИСПРАВЛЕНО: Стандартизированный .card для медицинского интерфейса */
/* НО! Не перезаписывает Tailwind градиенты */
.card:not([class*="bg-gradient"]) {
    background: var(--gradient-raised, linear-gradient(180deg, #ffffff 0%, #f9fafb 100%));
    border: 1.5px solid #d1d5db;
    border-radius: 10px;
    box-shadow: var(--shadow-3d-md, 0 2px 4px rgba(0, 0, 0, 0.08));
    padding: 1.5rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    box-shadow: var(--shadow-3d-lg, 0 4px 8px rgba(0, 0, 0, 0.1));
    transform: translateY(-2px);
}

.card-header {
    background: var(--gradient-header, linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%));
    border: 1.5px solid #d1d5db;
    border-bottom: 2px solid #cbd5e1;
    border-radius: 10px;
    padding: 1rem;
    margin: -0.5rem -0.5rem 1.5rem -0.5rem;
    box-shadow: var(--shadow-3d-sm, 0 1px 3px rgba(0, 0, 0, 0.07));
}

/* ❌ УДАЛЕНО: Базовые определения модальных окон */
/* Более детальные определения находятся ниже (строки 1033+) */

.modal-title {
    font-size: 1.125rem;
    line-height: 1.5rem;
    font-weight: 500;
    color: #111827;
}

.modal-body {
    margin-top: 0.5rem;
    padding: 0.75rem 1.75rem;
}

.modal-footer {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border-top: 1px solid #e5e7eb;
}

/* Навигация — 3D active state */
.nav-link {
    color: #6b7280;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.nav-link:hover {
    color: #374151;
    background: rgba(243, 244, 246, 0.7);
    box-shadow: var(--shadow-3d-sm, 0 1px 3px rgba(0, 0, 0, 0.07));
}

.nav-link.active {
    color: #111827;
    background: var(--gradient-raised, linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%));
    box-shadow: var(--shadow-3d-md, 0 2px 4px rgba(0, 0, 0, 0.08));
    border: 1px solid #e5e7eb;
}

/* Уведомления — 3D card */
.notification {
    position: fixed;
    top: 1rem;
    right: 1rem;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: var(--shadow-3d-lg, 0 4px 8px rgba(0, 0, 0, 0.1));
    z-index: var(--z-tooltip, 1070);
    max-width: 24rem;
    animation: notifSlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes notifSlideIn {
    from {
        opacity: 0;
        transform: translateX(40px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

.notification-success {
    background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    border: 1.5px solid #4ade80;
    color: #15803d;
    box-shadow: var(--shadow-3d-md, 0 2px 4px rgba(0, 0, 0, 0.08)), 0 4px 12px rgba(74, 222, 128, 0.15);
}

.notification-error {
    background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
    border: 1.5px solid #f87171;
    color: #b91c1c;
    box-shadow: var(--shadow-3d-md, 0 2px 4px rgba(0, 0, 0, 0.08)), 0 4px 12px rgba(248, 113, 113, 0.15);
}

.notification-warning {
    background: linear-gradient(180deg, #fef9c3 0%, #fef08a 100%);
    border: 1.5px solid #facc15;
    color: #a16207;
    box-shadow: var(--shadow-3d-md, 0 2px 4px rgba(0, 0, 0, 0.08)), 0 4px 12px rgba(250, 204, 21, 0.15);
}

.notification-info {
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
    border: 1.5px solid #60a5fa;
    color: #1d4ed8;
    box-shadow: var(--shadow-3d-md, 0 2px 4px rgba(0, 0, 0, 0.08)), 0 4px 12px rgba(96, 165, 250, 0.15);
}

/* Календарь */
.calendar {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background-color: #e5e7eb;
}

.calendar-day {
    background-color: #ffffff;
    padding: 0.5rem;
    min-height: 6rem;
}

.calendar-day-header {
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    padding: 0.5rem;
}

.calendar-day-today {
    background-color: #eff6ff;
}

.calendar-day-other-month {
    background-color: #f9fafb;
    color: #6b7280;
    /* ✅ Улучшен контраст: было #9ca3af */
}

/* Слоты топометрии */
.slot {
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    padding: 0.5rem;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.slot-free {
    background-color: #f0fdf4;
    border-color: #bbf7d0;
    color: #166534;
}

.slot-free:hover {
    background-color: #dcfce7;
}

.slot-booked {
    background-color: #eff6ff;
    border-color: #bfdbfe;
    color: #1e40af;
}

.slot-booked:hover {
    background-color: #dbeafe;
}

.slot-in-progress {
    background-color: #fefce8;
    border-color: #fef08a;
    color: #854d0e;
}

.slot-in-progress:hover {
    background-color: #fef9c3;
}

.slot-completed {
    background-color: #f9fafb;
    border-color: #e5e7eb;
    color: #1f2937;
}

.slot-cancelled {
    background-color: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}

/* ❌ УДАЛЕНО: Дублирующие .search-container и .search-input */
/* Основные определения находятся в строках 171-191 */

.search-icon {
    position: absolute;
    left: 0.75rem;
    top: 0.625rem;
    color: #6b7280;
    /* ✅ Улучшен контраст: было #9ca3af */
}

/* Табы */
.tabs {
    border-bottom: 1px solid #e5e7eb;
}

.tab {
    margin-right: 2rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 2px solid transparent;
    font-weight: 500;
    font-size: 0.875rem;
}

.tab-active {
    border-bottom-color: #3b82f6;
    color: #2563eb;
}

.tab-inactive {
    border-bottom-color: transparent;
    color: #6b7280;
}

.tab-inactive:hover {
    color: #374151;
    border-bottom-color: #d1d5db;
}

/* Прогресс бары — 3D channel */
.progress {
    width: 100%;
    background: var(--gradient-sunken, linear-gradient(180deg, #e5e7eb 0%, #f3f4f6 100%));
    border-radius: 9999px;
    height: 0.5rem;
    box-shadow: var(--shadow-3d-sunken, inset 0 2px 4px rgba(0, 0, 0, 0.08));
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.progress-bar {
    background: var(--gradient-btn-primary, linear-gradient(180deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%));
    height: 0.5rem;
    border-radius: 9999px;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Бейджи — 3D pill */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.badge-primary {
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border: 1px solid rgba(96, 165, 250, 0.3);
}

.badge-success {
    background: linear-gradient(180deg, #dcfce7 0%, #bbf7d0 100%);
    color: #166534;
    border: 1px solid rgba(74, 222, 128, 0.3);
}

.badge-warning {
    background: linear-gradient(180deg, #fef9c3 0%, #fef08a 100%);
    color: #854d0e;
    border: 1px solid rgba(250, 204, 21, 0.3);
}

.badge-danger {
    background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
    color: #991b1b;
    border: 1px solid rgba(252, 165, 165, 0.3);
}

/* Списки — 3D hover */
.list-item {
    padding: 1rem;
    border-bottom: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.list-item:hover {
    background: var(--gradient-raised, linear-gradient(180deg, #ffffff 0%, #f9fafb 100%));
    box-shadow: var(--shadow-3d-sm, 0 1px 3px rgba(0, 0, 0, 0.07));
    transform: translateX(2px);
}

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

/* Загрузка */
.loading {
    display: inline-block;
    animation: spin 1s linear infinite;
    border-radius: 9999px;
    height: 1rem;
    width: 1rem;
    border-bottom: 2px solid #2563eb;
}

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

/* Утилиты */
.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ✅ Переименованы во избежание конфликта с Tailwind utility классами */
.cora-shadow-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.cora-shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Адаптивность */
@media (max-width: 640px) {
    .modal-content {
        width: 100%;
        margin-left: 1rem;
        margin-right: 1rem;
    }

    .calendar-grid {
        font-size: 0.75rem;
    }

    .calendar-day {
        min-height: 4rem;
        padding: 0.25rem;
    }
}

/* Печать */
@media print {
    .no-print {
        display: none !important;
    }

    .print-break {
        page-break-before: always;
    }
}

/* ========================================
   СТИЛИ ДЛЯ СТРАНИЦЫ СТАЦИОНАРОВ
======================================== */

/* Кнопки фильтров — 3D chip */
.filter-btn {
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.2s ease;
    background: var(--gradient-raised, linear-gradient(180deg, #f9fafb 0%, #f3f4f6 100%));
    color: #4b5563;
    border: 1.5px solid #d1d5db;
    box-shadow: var(--shadow-3d-sm, 0 1px 3px rgba(0, 0, 0, 0.07));
}

.filter-btn:hover {
    background: var(--gradient-raised-hover, linear-gradient(180deg, #ffffff 0%, #e5e7eb 100%));
    transform: translateY(-1px);
    box-shadow: var(--shadow-3d-md, 0 2px 4px rgba(0, 0, 0, 0.08));
}

.filter-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-3d-pressed, inset 0 1px 3px rgba(0, 0, 0, 0.12));
}

.filter-btn.active {
    background: var(--gradient-btn-primary, linear-gradient(180deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%));
    color: white;
    border-color: rgba(37, 99, 235, 0.5);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

/* Табы — 3D active */
.tab-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
    color: #6b7280;
    font-weight: 500;
    cursor: pointer;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
}

.tab-btn:hover {
    color: #1f2937;
    background: rgba(243, 244, 246, 0.6);
    box-shadow: var(--shadow-3d-sm, 0 1px 3px rgba(0, 0, 0, 0.07));
    border-radius: 8px 8px 0 0;
}

.tab-btn.active {
    border-bottom-color: #3b82f6;
    color: #3b82f6;
    font-weight: 600;
    background: var(--gradient-raised, linear-gradient(180deg, #ffffff 0%, #f9fafb 100%));
    box-shadow: var(--shadow-3d-sm, 0 1px 3px rgba(0, 0, 0, 0.07));
    border-radius: 8px 8px 0 0;
}

.count-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: linear-gradient(180deg, #e5e7eb 0%, #d1d5db 100%);
    color: #4b5563;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.tab-btn.active .count-badge {
    background: linear-gradient(180deg, #dbeafe 0%, #bfdbfe 100%);
    color: #1e40af;
    border-color: rgba(96, 165, 250, 0.3);
}

/* Модальные окна */
.modal {
    display: none;
    position: fixed;
    z-index: var(--z-fullscreen, 9999);
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.modal.active {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.modal-content {
    background: var(--gradient-raised, linear-gradient(180deg, #ffffff 0%, #f9fafb 100%));
    border-radius: 1rem;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    border: 1.5px solid #d1d5db;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.05),
        0 16px 32px rgba(0, 0, 0, 0.12),
        0 32px 64px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: modalSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.modal-content.modal-xl {
    max-width: 1400px;
}

.modal-body-scroll {
    max-height: 60vh;
    overflow-y: auto;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-30px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 1.5rem;
    border-bottom: 2px solid #e5e7eb;
    background: var(--gradient-header, linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%));
    border-radius: 1rem 1rem 0 0;
}

.modal-close {
    padding: 0.5rem;
    border-radius: 0.5rem;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6b7280;
    font-size: 1.5rem;
}

.modal-close:hover {
    background-color: #f3f4f6;
    color: #1f2937;
}

/* ❌ УДАЛЕНО: Дублирующий .btn-primary */
/* Основное определение находится выше (строка ~453) */

/* ❌ УДАЛЕН ДУБЛЬ .card - основное определение см. строка ~702 */
/* Hover эффект уже включен в основное определение */

/* Адаптивность для планшетов */
@media (max-width: 1024px) {
    .modal-content {
        max-width: 95%;
    }
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .modal-content {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 0.75rem;
    }

    .modal-header {
        flex-direction: column;
        gap: 1rem;
    }

    .tab-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }

    .filter-btn {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* ============================================
   🎯 UTILITY КЛАССЫ ДЛЯ ДИЗАЙН-СИСТЕМЫ v3.0
   ============================================ */

/* Карточки — 3D */
.ds-card {
    background: var(--gradient-raised);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-3d-md);
    border: 1.5px solid var(--border-default);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.ds-card:hover {
    box-shadow: var(--shadow-3d-lg);
    transform: translateY(-2px);
}

.ds-card-flat {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-light);
    box-shadow: var(--shadow-3d-sm);
}

/* Кнопки — 3D */
.ds-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

.ds-btn-primary {
    background: var(--gradient-btn-primary);
    color: var(--text-inverse);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(37, 99, 235, 0.3);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
}

.ds-btn-primary:hover {
    background: linear-gradient(180deg, #93bbfd 0%, #3b82f6 40%, #1d4ed8 100%);
    box-shadow: 0 4px 8px rgba(37, 99, 235, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.ds-btn-primary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-3d-pressed);
}

.ds-btn-secondary {
    background: var(--gradient-raised);
    color: var(--text-secondary);
    border: 1.5px solid var(--border-default);
    box-shadow: var(--shadow-3d-sm);
}

.ds-btn-secondary:hover {
    background: var(--gradient-raised-hover);
    color: var(--text-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-3d-md);
}

.ds-btn-secondary:active {
    transform: translateY(0);
    box-shadow: var(--shadow-3d-pressed);
}

.ds-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
}

.ds-btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
    box-shadow: var(--shadow-3d-sm);
}

/* Модальное окно overlay */
.ds-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 41, 59, 0.4);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    z-index: var(--z-fullscreen, 9999);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 5vh;
}

.ds-modal-content {
    background: var(--gradient-raised);
    border-radius: var(--radius-xl);
    border: 1.5px solid var(--border-default);
    box-shadow: var(--shadow-3d-xl);
    max-width: 90vw;
    max-height: 90vh;
    overflow: hidden;
    animation: dsModalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes dsModalIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Бейджи статусов — 3D pill */
.ds-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 500;
    border: 1px solid transparent;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ds-badge-success {
    background: linear-gradient(180deg, var(--status-free-bg) 0%, #d1fae5 100%);
    color: var(--status-free-text);
    border-color: var(--status-free-border);
}

.ds-badge-info {
    background: linear-gradient(180deg, var(--status-booked-bg) 0%, #dbeafe 100%);
    color: var(--status-booked-text);
    border-color: var(--status-booked-border);
}

.ds-badge-warning {
    background: linear-gradient(180deg, var(--status-arrived-bg) 0%, #fef9c3 100%);
    color: var(--status-arrived-text);
    border-color: var(--status-arrived-border);
}

.ds-badge-error {
    background: linear-gradient(180deg, var(--status-cancelled-bg) 0%, #fecaca 100%);
    color: var(--status-cancelled-text);
    border-color: var(--status-cancelled-border);
}

/* Текстовые стили */
.ds-text-primary {
    color: var(--text-primary);
}

.ds-text-secondary {
    color: var(--text-secondary);
}

.ds-text-muted {
    color: var(--text-muted);
}

.ds-text-accent {
    color: var(--color-primary);
}

/* Фоновые стили */
.ds-bg-page {
    background: var(--bg-page);
}

.ds-bg-card {
    background: var(--bg-card);
}

.ds-bg-muted {
    background: var(--bg-muted);
}

.ds-bg-accent {
    background: var(--color-primary-bg);
}

/* Границы */
.ds-border {
    border: 1px solid var(--border-light);
}

.ds-border-strong {
    border: 1px solid var(--border-default);
}

.ds-border-accent {
    border: 1px solid var(--color-primary);
}

/* Тени */
.ds-shadow-sm {
    box-shadow: var(--shadow-sm);
}

.ds-shadow-md {
    box-shadow: var(--shadow-md);
}

.ds-shadow-lg {
    box-shadow: var(--shadow-lg);
}

.ds-shadow-glow {
    box-shadow: var(--shadow-glow);
}

/* Скругления */
.ds-rounded-sm {
    border-radius: var(--radius-sm);
}

.ds-rounded-md {
    border-radius: var(--radius-md);
}

.ds-rounded-lg {
    border-radius: var(--radius-lg);
}

.ds-rounded-xl {
    border-radius: var(--radius-xl);
}

.ds-rounded-full {
    border-radius: var(--radius-full);
}

/* ============================================
   3D UTILITY CLASSES
   ============================================ */
.ds-shadow-3d-sm {
    box-shadow: var(--shadow-3d-sm);
}

.ds-shadow-3d-md {
    box-shadow: var(--shadow-3d-md);
}

.ds-shadow-3d-lg {
    box-shadow: var(--shadow-3d-lg);
}

.ds-shadow-3d-xl {
    box-shadow: var(--shadow-3d-xl);
}

.ds-shadow-sunken {
    box-shadow: var(--shadow-3d-sunken);
}

.ds-bg-raised {
    background: var(--gradient-raised);
}

.ds-bg-sunken {
    background: var(--gradient-sunken);
}

.ds-bg-header {
    background: var(--gradient-header);
}

/* ============================================
   REDUCED MOTION — см. mobile-optimized.css
   (единственный источник, с исключением для логотипа)
   ============================================ */

/* Mobile: lighter 3D on touch devices for GPU perf */
@media (hover: none) and (pointer: coarse) {

    .card:hover,
    .ds-card:hover,
    .list-item:hover,
    .table-row:hover {
        transform: none;
    }

    .btn-primary:hover,
    .btn-secondary:hover,
    .btn-success:hover,
    .btn-danger:hover,
    .btn-warning:hover,
    .filter-btn:hover,
    .ds-btn-primary:hover,
    .ds-btn-secondary:hover {
        transform: none;
    }

    .btn-primary:active,
    .btn-secondary:active,
    .btn-success:active,
    .btn-danger:active,
    .btn-warning:active,
    .ds-btn-primary:active,
    .ds-btn-secondary:active {
        transform: scale(0.97);
    }
}