/* GipixCRM - Основные стили */

/* CSS переменные для цветов */
:root {
    --md-primary: #007bff;
    --md-primary-dark: #0056b3;
    --md-secondary: #6c757d;
    --md-secondary-dark: #545b62;
    --md-success: #28a745;
    --md-info: #17a2b8;
    --md-warning: #ffc107;
    --md-error: #dc3545;
    --md-danger: #dc3545;
    --md-light: #f8f9fa;
    --md-dark: #343a40;
    --md-accent: #fd7e14;
    
    --md-gray-50: #f8f9fa;
    --md-gray-100: #e9ecef;
    --md-gray-200: #dee2e6;
    --md-gray-300: #ced4da;
    --md-gray-400: #adb5bd;
    --md-gray-500: #6c757d;
    --md-gray-600: #495057;
    --md-gray-700: #343a40;
    --md-gray-800: #212529;
    
    --md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --md-elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --md-elevation-4: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    
    --md-transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Компактный статус-бар */
.status-bar {
    display: flex;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 12px 16px;
    gap: 24px;
    align-items: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.status-item {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.status-number {
    font-size: 1.25rem;
    font-weight: 600;
    color: #007bff;
    min-width: 32px;
    text-align: center;
}

.status-label {
    font-size: 0.875rem;
    color: #6c757d;
    font-weight: 500;
}

@media (max-width: 768px) {
    .status-bar {
        flex-wrap: wrap;
        gap: 12px;
        padding: 8px 12px;
    }
    
    .status-item {
        flex: 1;
        min-width: calc(50% - 6px);
        justify-content: center;
    }
    
    .status-number {
        font-size: 1.1rem;
    }
    
    .status-label {
        font-size: 0.8rem;
    }

    /* Когда меню открыто – запретим прокрутку body, чтобы фон не двигался */
    body.mobile-menu-open {
        overflow: hidden;
    }

    /* Мобильный топ-бар должен быть компактным */
    .top-bar {
        height: 56px !important; /* уменьшаем высоту */
        --topbar-height: 56px;
    }

    /* Скрываем время и дату полностью */
    .top-bar-info {
        display: none !important;
    }

    /* Календарь управляется через JavaScript */

    .table-responsive,
    .custom-scrollbar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

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

/* Анимации загрузки */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

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

/* Улучшенные карточки */
.card-hover {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.12);
}

/* Статусы записей */
.status-pending {
    color: #ffc107;
    background-color: rgba(255, 193, 7, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
}

.status-completed {
    color: #28a745;
    background-color: rgba(40, 167, 69, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
}

.status-cancelled {
    color: #dc3545;
    background-color: rgba(220, 53, 69, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.8em;
}

/* Улучшенные формы */
.form-floating-custom {
    position: relative;
}

.form-floating-custom label {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    padding: 1rem 0.75rem;
    pointer-events: none;
    border: 1px solid transparent;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out,transform .1s ease-in-out;
}

/* Быстрые действия */
.quick-action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: white;
    border: 1px solid #e9ecef;
    color: #495057;
}

.quick-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    text-decoration: none;
    color: #007bff;
}

.quick-action-btn i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

/* Компактная таблица */
.table-compact th,
.table-compact td {
    padding: 0.5rem;
    font-size: 0.9rem;
}

/* Индикаторы времени */
.time-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 6px;
}

.time-indicator.soon {
    background-color: #ffc107;
}

.time-indicator.now {
    background-color: #dc3545;
    animation: pulse 1s infinite;
}

.time-indicator.later {
    background-color: #28a745;
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Старые уведомления удалены - используется новая система в _notifications.html */

/* Мобильная адаптивность */
@media (max-width: 768px) {
    .content-area {
        padding: 1rem 0.5rem;
    }
    
    .card {
        margin-bottom: 1rem;
    }
    
    .btn-group-sm .btn {
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
    }
    
    .table-responsive {
        border: none;
    }

    /* Улучшенная горизонтальная прокрутка для таблиц */
    .table-responsive.custom-scrollbar {
        border-radius: 8px;
        overflow-x: auto !important;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #cbd5e0 #f7fafc;
    }

    .table-responsive.custom-scrollbar::-webkit-scrollbar {
        height: 8px;
    }

    .table-responsive.custom-scrollbar::-webkit-scrollbar-track {
        background: #f7fafc;
        border-radius: 4px;
    }

    .table-responsive.custom-scrollbar::-webkit-scrollbar-thumb {
        background: #cbd5e0;
        border-radius: 4px;
    }

    .table-responsive.custom-scrollbar::-webkit-scrollbar-thumb:hover {
        background: #a0aec0;
    }

    .table-responsive .table {
        margin-bottom: 0;
        white-space: nowrap;
        min-width: 700px; /* минимальная ширина для прокрутки */
    }

    /* Уменьшаем отступы в ячейках для экономии пространства */
    .table th,
    .table td {
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
        vertical-align: middle;
    }

    /* Модальные окна занимают почти весь экран */
    .modal-dialog {
        margin: 1rem auto;
    }
    .modal-content {
        border-radius: 8px;
    }

    /* Фиксированные колонки в карточках статистики */
    .stats-card {
        padding: 16px 12px;
    }

    /* ==== Горизонтальная прокрутка календаря в топ-баре ==== */
    .week-calendar {
        overflow-x: auto;
        overflow-y: hidden; /* предотвращаем вертикальную прокрутку */
        -webkit-overflow-scrolling: touch; /* плавный скролл на iOS */
        flex-wrap: nowrap; /* убираем перенос элементов */
    }

    .week-calendar::-webkit-scrollbar {
        height: 4px; /* тонкий горизонтальный скроллбар */
    }

    .week-calendar::-webkit-scrollbar-thumb {
        background: var(--md-gray-400);
        border-radius: 2px;
    }

    /* Каждый день фиксированной ширины, чтобы прокручиваться «карточками» */
    .calendar-day {
        flex: 0 0 56px; /* стабильная ширина для свайпа */
        margin-right: 4px; /* тот же gap, что и в .week-calendar */
    }
}

/* Утилитарные классы */
.text-truncate-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.border-start-primary {
    border-left: 4px solid #007bff !important;
}

.border-start-success {
    border-left: 4px solid #28a745 !important;
}

.border-start-warning {
    border-left: 4px solid #ffc107 !important;
}

.border-start-danger {
    border-left: 4px solid #dc3545 !important;
}

/* Компактные ближайшие записи */
.upcoming-appointments-compact {
    max-height: 400px;
    overflow-y: auto;
}

.upcoming-appointments-compact .date-group {
    border-left: 3px solid #007bff;
    padding-left: 0.5rem;
    margin-bottom: 0.75rem;
}

.upcoming-appointments-compact .date-header {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.upcoming-appointments-compact .master-appointments {
    margin-bottom: 0.5rem;
}

.upcoming-appointments-compact .appointment-item {
    transition: all 0.2s ease;
    cursor: pointer;
}

.upcoming-appointments-compact .appointment-item:hover {
    background-color: #e9ecef !important;
    transform: scale(1.02);
}

.upcoming-appointments-compact .appointment-item .text-truncate {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* Улучшенная прокрутка */
.upcoming-appointments-compact::-webkit-scrollbar {
    width: 4px;
}

.upcoming-appointments-compact::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.upcoming-appointments-compact::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

.upcoming-appointments-compact::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Исправления для Bootstrap */
.btn-sm {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
}

.badge {
    display: inline-block;
    padding: 0.25em 0.4em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

/* Цветовое кодирование записей по датам */
.past-date {
    background-color: rgba(128, 128, 128, 0.1) !important; /* Тухлый серый для прошедших */
}

.today-date {
    background-color: rgba(220, 53, 69, 0.1) !important; /* Красный для сегодняшних */
}

.future-date {
    background-color: rgba(40, 167, 69, 0.1) !important; /* Нежно зеленый для будущих */
}

/* Дополнительные эффекты для лучшей видимости */
.past-date td {
    color: #6c757d !important;
}

.today-date td {
    color: #721c24 !important;
    font-weight: 500;
}

.future-date td {
    color: #155724 !important;
}

/* === Кнопка открытия календаря на мобильных === */
.mobile-calendar-btn {
    display: none;
    background: var(--md-primary);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px;
    box-shadow: var(--md-elevation-1);
}

@media (max-width: 768px) {
    .mobile-calendar-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;
    }

    /* Вертикальный режим календаря */
    .week-calendar.calendar-vertical {
        display: flex !important; /* показываем */
        flex-direction: column;
        gap: 6px;
        max-height: 300px; /* если дней будет больше – появится вертикальный скролл */
        overflow-y: auto;
        overflow-x: hidden;
        margin-top: 8px;
    }

    .week-calendar.calendar-vertical .calendar-day {
        flex: 0 0 auto;
        min-width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 10px 12px;
    }

    /* Для горизонтального варианта по-умолчанию (когда скрыт) ничего не меняем */
    /* если одновременно есть класс .calendar-vertical, то правила выше перекрывают */
}

/* === Notifications === */
.notif-icon {
    position: relative;
    color: var(--md-gray-600);
    transition: color var(--md-transition-fast);
}
.notif-icon:hover { color: var(--md-primary); }
.notif-icon .badge {
    font-size: 10px;
    padding: 3px 6px;
}

/* Дропдаун уведомлений в стиле приложения */
.notif-dropdown {
    min-width: 360px;
    max-width: 400px;
    border: none;
    border-radius: 12px;
    box-shadow: var(--md-elevation-4);
    padding: 0;
    overflow: hidden;
    background: white;
}

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

.notif-header h6 {
    font-weight: 500;
    margin: 0;
    font-size: 16px;
    letter-spacing: 0.15px;
}

.notif-header .badge {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.25);
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.notif-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px 0;
}

/* Карточка уведомления в стиле приложения */
.notif-item {
    display: flex;
    align-items: flex-start;
    padding: 16px 20px;
    transition: all var(--md-transition-fast);
    border-left: 4px solid transparent;
    position: relative;
    background: white;
    border-bottom: 1px solid var(--md-gray-100);
}

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

.notif-item:hover {
    background: var(--md-gray-50);
    transform: translateX(2px);
}

.notif-item.danger { border-left-color: var(--md-error); }
.notif-item.warning { border-left-color: var(--md-warning); }
.notif-item.info { border-left-color: var(--md-info); }

/* Аватар в стиле Material Design */
.notif-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 16px;
    flex-shrink: 0;
    position: relative;
    box-shadow: var(--md-elevation-1);
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.avatar-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--md-primary);
    color: white;
    font-size: 20px;
}

.avatar-placeholder.danger {
    background: var(--md-error);
}

.avatar-placeholder.warning {
    background: var(--md-warning);
}

.avatar-placeholder.info {
    background: var(--md-info);
}

/* Контент уведомления */
.notif-content {
    flex: 1;
    min-width: 0;
}

.notif-title {
    font-weight: 500;
    font-size: 14px;
    color: var(--md-gray-800);
    margin-bottom: 4px;
    line-height: 1.4;
    letter-spacing: 0.25px;
}

.notif-message {
    font-size: 13px;
    color: var(--md-gray-600);
    line-height: 1.4;
    margin-bottom: 12px;
}

.notif-action {
    display: inline-block;
    background: var(--md-primary);
    color: white;
    text-decoration: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    transition: all var(--md-transition-fast);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    box-shadow: var(--md-elevation-1);
}

.notif-action:hover {
    color: white;
    background: var(--md-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--md-elevation-2);
    text-decoration: none;
}

/* Кнопка закрытия в стиле Material Design */
.notif-close {
    background: none;
    border: none;
    color: var(--md-gray-400);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--md-transition-fast);
    position: absolute;
    top: 12px;
    right: 12px;
}

.notif-close:hover {
    background: var(--md-gray-100);
    color: var(--md-error);
    transform: rotate(90deg);
}

.notif-close .material-icons {
    font-size: 16px;
}

/* Пустое состояние */
.notif-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--md-gray-500);
}

.notif-empty .material-icons {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.4;
    color: var(--md-gray-400);
}

.notif-empty p {
    margin: 0;
    font-size: 14px;
    color: var(--md-gray-500);
}

/* Анимации в стиле Material Design */
@keyframes notifFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes notifFadeOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(16px);
    }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.notif-fade-in {
    animation: notifFadeIn 300ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
    opacity: 0;
}

.notif-fade-out {
    animation: notifFadeOut 200ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.shake {
    animation: shake 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Мобильная адаптация уведомлений */
@media (max-width: 768px) {
    .notif-icon { 
        margin-right: 4px; 
    }
    
    .profile-btn .username { 
        display: none; 
    }
    
    .notif-dropdown {
        min-width: 320px;
        max-width: 95vw;
        margin-right: 10px;
        border-radius: 8px;
        box-shadow: var(--md-elevation-2);
    }
    
    .notif-header {
        padding: 12px 16px;
    }
    
    .notif-header h6 {
        font-size: 14px;
    }
    
    .notif-item {
        padding: 12px 16px;
    }
    
    .notif-avatar {
        width: 36px;
        height: 36px;
        margin-right: 12px;
    }
    
    .notif-title {
        font-size: 13px;
    }
    
    .notif-message {
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .notif-action {
        padding: 6px 12px;
        font-size: 11px;
        border-radius: 6px;
    }
    
    .notif-close {
        width: 20px;
        height: 20px;
        top: 8px;
        right: 8px;
    }
    
    .notif-close .material-icons {
        font-size: 14px;
    }
    
    .notif-empty {
        padding: 24px 16px;
    }
    
    .notif-empty .material-icons {
        font-size: 36px;
        margin-bottom: 8px;
    }
}

/* Темная тема в стиле Material Design */
@media (prefers-color-scheme: dark) {
    .notif-dropdown {
        background: var(--md-gray-800);
        border: 1px solid var(--md-gray-700);
    }
    
    .notif-header {
        background: var(--md-primary-dark);
        border-bottom-color: var(--md-gray-700);
    }
    
    .notif-item {
        background: var(--md-gray-800);
        color: var(--md-gray-100);
        border-bottom-color: var(--md-gray-700);
    }
    
    .notif-item:hover {
        background: var(--md-gray-700);
    }
    
    .notif-title {
        color: var(--md-gray-100);
    }
    
    .notif-message {
        color: var(--md-gray-300);
    }
    
    .notif-empty {
        color: var(--md-gray-400);
    }
    
    .notif-close {
        color: var(--md-gray-500);
    }
    
    .notif-close:hover {
        background: var(--md-gray-700);
        color: var(--md-error);
    }
}


/* === Index page specific === */
/* Иконка кузовного цеха */
.icon-body { color: var(--md-accent); vertical-align: middle; }
/* Цветные иконки цехов */
.icon-shop.mech    { color: var(--md-primary); }
.icon-shop.body    { color: var(--md-accent); }
.icon-shop.electric{ color: var(--md-warning); }
.icon-shop.tyre    { color: var(--md-secondary-dark); }
.icon-shop.diagnostic { color: var(--md-success); }

/* Mobile card header */
@media (max-width: 576px) {
  .card-header .d-flex { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
}
/* Mobile table scroll */
@media (max-width: 768px) {
  .table-responsive.custom-scrollbar { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .table-responsive.custom-scrollbar .table-enhanced { min-width: 1100px; }
  .table-enhanced th, .table-enhanced td { white-space: nowrap; }
}

/* === Cash page specific === */

/* Улучшенные кнопки действий в таблице кассы */
.cash-action-buttons {
    display: flex;
    gap: 4px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.cash-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid;
    background: white;
    transition: all 0.2s ease;
    font-size: 14px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.cash-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cash-action-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Специфичные стили для каждой кнопки */
.cash-btn-view {
    border-color: var(--md-info);
    color: var(--md-info);
}

.cash-btn-view:hover {
    background-color: var(--md-info);
    color: white;
}

.cash-btn-order {
    border-color: var(--md-primary);
    color: var(--md-primary);
    background: linear-gradient(135deg, rgba(0,123,255,0.1) 0%, rgba(0,123,255,0.05) 100%);
}

.cash-btn-order:hover {
    background: var(--md-primary);
    color: white;
    box-shadow: 0 4px 12px rgba(0,123,255,0.3);
}

.cash-btn-act {
    border-color: var(--md-warning);
    color: #856404;
    background: linear-gradient(135deg, rgba(255,193,7,0.1) 0%, rgba(255,193,7,0.05) 100%);
}

.cash-btn-act:hover {
    background: var(--md-warning);
    color: #212529;
    box-shadow: 0 4px 12px rgba(255,193,7,0.3);
}

.cash-btn-delete {
    border-color: var(--md-error);
    color: var(--md-error);
}

.cash-btn-delete:hover {
    background-color: var(--md-error);
    color: white;
    box-shadow: 0 4px 12px rgba(220,53,69,0.3);
}

/* Подсказки для кнопок */
.cash-action-btn[title] {
    position: relative;
}

.cash-action-btn[title]:hover::before {
    content: attr(title);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease forwards;
}

.cash-action-btn[title]:hover::after {
    content: '';
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid rgba(0,0,0,0.9);
    z-index: 1001;
    opacity: 0;
    animation: tooltipFadeIn 0.2s ease forwards;
}

@keyframes tooltipFadeIn {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .cash-action-buttons {
        gap: 3px;
    }
    
    .cash-action-btn {
        width: 28px;
        height: 28px;
        font-size: 12px;
        border-radius: 6px;
    }
    
    .cash-action-btn:hover {
        transform: none;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    /* Убираем подсказки на мобильных */
    .cash-action-btn[title]:hover::before,
    .cash-action-btn[title]:hover::after {
        display: none;
    }
}

/* Анимация появления кнопок */
.cash-action-btn {
    animation: buttonSlideIn 0.3s ease;
}

@keyframes buttonSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Эффект пульсации для активной кнопки */
.cash-action-btn.loading {
    animation: buttonPulse 1s ease-in-out infinite;
}

@keyframes buttonPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
}

/* Улучшение для таблицы */
.table td {
    vertical-align: middle;
}

/* Особый стиль для ячейки с действиями */
.actions-cell {
    text-align: center;
    padding: 8px 4px;
    min-width: 150px;
}

@media print {
    .sidebar, .top-bar, .btn, .btn-group, .pagination,
    .modal-footer, .alert, #filtersPanel { display:none !important; }
    body { margin:0 !important; padding:10px !important; font-size:11px !important; }
    .main-content { margin-left:0 !important; }
    .content-area { padding:0 !important; }
    .table { font-size:10px !important; margin-bottom:10px !important; }
    .table td,.table th { padding:2px 5px !important; line-height:1.2 !important; }
    .card { border:1px solid #000 !important; box-shadow:none !important; page-break-inside:avoid; }
    h1,h2,h3,h4,h5,h6 { margin:5px 0 !important; page-break-after:avoid; }
    .bg-primary,.bg-success,.bg-danger,.bg-info,.bg-warning { background-color:transparent !important; color:#000 !important; border:1px solid #000 !important; }
    .mb-4{margin-bottom:10px !important;} .mb-3{margin-bottom:8px !important;} .p-3{padding:5px !important;}
    * { color:#000 !important; -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; }
}
@media (max-width: 768px){
  .table-responsive { overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  #cashTable { min-width:1100px; }
  #cashTable th, #cashTable td{ white-space:nowrap; }
}

/* === Add Appointment page specific === */
.calendar-day {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s;
}
.calendar-day:hover { background-color: #f8f9fa; }
.calendar-day.selected { background-color: #007bff; color: #fff; }
.calendar-day.has-appointment { background-color: #ffe6e6; }

.time-slot {
    display: inline-block;
    margin: 5px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s;
}
.time-slot:hover { background-color: #e9ecef; }
.time-slot.selected {
    background-color: #007bff;
    color: #fff;
}
.time-slot.occupied {
    background-color: #dc3545;
    color: #fff;
    cursor: not-allowed;
}

.required-field::after {
    content: " *";
    color: #dc3545;
}

/* === Auth pages (login/register/reset) === */
body.auth-page {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.auth-container {
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    max-width: 400px;
    margin: 20px;
}
.auth-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color:#fff;
    padding:30px;
    text-align:center;
}
.auth-header h2 { margin:0; font-weight:300; }
.auth-header .logo { font-size:3rem; margin-bottom:10px; }
.auth-body { padding:30px; }

.form-floating { margin-bottom:20px; }
.form-floating .form-control {
    border:2px solid #e9ecef;
    border-radius:10px;
    height:calc(3.5rem + 2px);
}
.form-floating .form-control:focus {
    border-color:#667eea;
    box-shadow:0 0 0 0.25rem rgba(102,126,234,.25);
}
.btn-primary.auth-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border:none;
    border-radius:10px;
    padding:12px;
    font-weight:500;
    width:100%;
    margin-bottom:15px;
}
.btn-primary.auth-btn:hover {
    transform:translateY(-2px);
    box-shadow:0 5px 15px rgba(102,126,234,.4);
}
.form-check { margin:20px 0; }
.form-check-input:checked { background-color:#667eea; border-color:#667eea; }
.auth-links { text-align:center; margin-top:20px; }
.auth-links a { color:#667eea; text-decoration:none; font-weight:500; }
.auth-links a:hover { text-decoration:underline; }
.alert { border:none; border-radius:10px; margin-bottom:20px; }
.alert-danger { background:#f8d7da; color:#721c24; }
.alert-success { background:#d1edff; color:#0c5460; }
.divider { text-align:center; margin:20px 0; position:relative; }
.divider::before {
    content:'';
    position:absolute;
    top:50%; left:0; right:0; height:1px; background:#e9ecef;
}
.divider span { background:#fff; padding:0 15px; color:#6c757d; } 

/* === МОБИЛЬНЫЕ КАРТОЧКИ ЗАПИСЕЙ === */
.mobile-appointments-container {
    display: none;
}

@media (max-width: 768px) {
    /* Скрываем таблицу на мобильных */
    .table-responsive {
        display: none !important;
    }
    
    /* Показываем контейнер с карточками */
    .mobile-appointments-container {
        display: block;
    }
}

.appointment-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.appointment-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.appointment-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--md-primary);
}

/* Статусные полоски */
.appointment-card.past-date::before { background: #6c757d; }
.appointment-card.today-date::before { background: #dc3545; }
.appointment-card.future-date::before { background: #28a745; }

.appointment-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}

.appointment-card-date-time {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 80px;
}

.appointment-date {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    line-height: 1.2;
}

.appointment-time {
    background: var(--md-info);
    color: #fff;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
    text-align: center;
    line-height: 1;
}

.appointment-card-id {
    background: var(--md-gray-100);
    color: var(--md-gray-600);
    padding: 4px 8px;
    border-radius: 8px;
    font-size: 0.75rem;
    font-weight: 500;
    align-self: flex-start;
}

.appointment-card-body {
    margin-bottom: 12px;
}

.appointment-client-info {
    margin-bottom: 8px;
}

.appointment-client-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 4px;
    line-height: 1.3;
}

.appointment-client-phone {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #6c757d;
    font-size: 0.9rem;
    text-decoration: none;
}

.appointment-client-phone:hover {
    color: #28a745;
    text-decoration: none;
}

.appointment-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 12px;
}

.appointment-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.appointment-detail-label {
    font-size: 0.75rem;
    color: #6c757d;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.appointment-detail-value {
    font-size: 0.9rem;
    color: #495057;
    font-weight: 500;
    line-height: 1.3;
}

.appointment-master-info {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--md-gray-50);
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.appointment-master-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    flex-shrink: 0;
}

.appointment-master-icon.mech { background: var(--md-primary); }
.appointment-master-icon.body { background: var(--md-accent); }
.appointment-master-icon.electric { background: var(--md-warning); }
.appointment-master-icon.tyre { background: var(--md-secondary-dark); }
.appointment-master-icon.diagnostic { background: var(--md-success); }

.appointment-master-details {
    flex: 1;
    min-width: 0;
}

.appointment-master-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 2px;
    line-height: 1.2;
}

.appointment-master-shop {
    font-size: 0.75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.appointment-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.appointment-price-time {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.appointment-price {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--md-success);
}

.appointment-time-left {
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 12px;
    text-align: center;
    font-weight: 500;
}

.appointment-time-left.soon {
    background: rgba(255, 193, 7, 0.2);
    color: #856404;
}

.appointment-time-left.now {
    background: rgba(220, 53, 69, 0.2);
    color: #721c24;
    animation: pulse 2s infinite;
}

.appointment-time-left.later {
    background: rgba(40, 167, 69, 0.2);
    color: #155724;
}

.appointment-time-left.passed {
    background: rgba(108, 117, 125, 0.2);
    color: #6c757d;
}

.appointment-actions {
    display: flex;
    gap: 6px;
}

.appointment-action-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.2s ease;
    color: #6c757d;
}

.appointment-action-btn:hover {
    color: #fff;
    text-decoration: none;
    transform: scale(1.05);
}

.appointment-action-btn.edit:hover {
    background: var(--md-warning);
    border-color: var(--md-warning);
}

.appointment-action-btn.history:hover {
    background: var(--md-info);
    border-color: var(--md-info);
}

.appointment-action-btn.delete:hover {
    background: var(--md-danger);
    border-color: var(--md-danger);
}

.appointment-action-btn .material-icons {
    font-size: 18px;
}

/* Компактная версия карточки для списка */
.appointment-card.compact {
    padding: 12px;
    margin-bottom: 8px;
}

.appointment-card.compact .appointment-card-header {
    margin-bottom: 8px;
}

.appointment-card.compact .appointment-client-name {
    font-size: 1rem;
}

.appointment-card.compact .appointment-master-info {
    padding: 8px 10px;
    margin-bottom: 8px;
}

.appointment-card.compact .appointment-master-icon {
    width: 28px;
    height: 28px;
    font-size: 14px;
}

/* Анимации */
@keyframes slideInFromRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.appointment-card {
    animation: slideInFromRight 0.3s ease-out;
}

.appointment-card:nth-child(2) { animation-delay: 0.1s; }
.appointment-card:nth-child(3) { animation-delay: 0.2s; }
.appointment-card:nth-child(4) { animation-delay: 0.3s; }
.appointment-card:nth-child(5) { animation-delay: 0.4s; }

/* Улучшения для пустого состояния */
.no-appointments-mobile {
    text-align: center;
    padding: 40px 20px;
    color: #6c757d;
}

.no-appointments-mobile .material-icons {
    font-size: 4rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.no-appointments-mobile h5 {
    margin-bottom: 8px;
    color: #495057;
}

.no-appointments-mobile p {
    margin-bottom: 0;
    font-size: 0.9rem;
}

/* Стили для фильтрации */
.mobile-appointments-container .appointment-card[style*="display: none"] {
    display: none !important;
}

/* Загрузчик для мобильных карточек */
.mobile-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: #6c757d;
}

.mobile-loading .loading-spinner {
    border-color: var(--md-gray-300);
    border-top-color: var(--md-primary);
}

/* === СТИЛИ ДЛЯ МОБИЛЬНЫХ КАРТОЧЕК КАССЫ === */
.cash-record-card {
    background: white;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
}

.cash-record-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.cash-record-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #28a745; /* по умолчанию зеленый */
}

.cash-record-card[data-type="expense"]::before {
    background: #dc3545; /* красный для расходов */
}

.cash-record-header {
    padding: 16px 16px 12px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-bottom: 1px solid #f1f3f4;
}

.cash-record-id-date {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cash-record-id {
    font-size: 0.875rem;
    font-weight: 600;
    color: #6c757d;
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 12px;
    align-self: flex-start;
}

.cash-record-date {
    font-size: 0.95rem;
    font-weight: 600;
    color: #495057;
}

.cash-record-time {
    font-size: 0.8rem;
    color: #6c757d;
}

.cash-record-type-amount {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.cash-record-type {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 16px;
}

.cash-record-type.income {
    background: rgba(40, 167, 69, 0.1);
    color: #28a745;
}

.cash-record-type.expense {
    background: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

.cash-record-type i {
    font-size: 0.875rem;
}

.cash-record-amount {
    font-size: 1.25rem;
    font-weight: 700;
}

.cash-record-amount.income {
    color: #28a745;
}

.cash-record-amount.expense {
    color: #dc3545;
}

.cash-record-body {
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cash-record-service {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.service-name {
    font-weight: 600;
    color: #495057;
    font-size: 0.95rem;
}

.service-description {
    color: #6c757d;
    font-size: 0.875rem;
    line-height: 1.4;
}

.cash-record-client {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(13, 110, 253, 0.05);
    border-radius: 8px;
    border-left: 3px solid #0d6efd;
}

.client-info,
.client-car {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

.client-info i,
.client-car i {
    color: #0d6efd;
    font-size: 0.875rem;
    width: 16px;
}

.client-name {
    font-weight: 600;
    color: #495057;
}

.cash-record-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.cash-detail {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    color: #6c757d;
}

.cash-detail i {
    color: #495057;
    font-size: 0.875rem;
    width: 16px;
}

.cash-record-footer {
    padding: 12px 16px;
    background: #f8f9fa;
    border-top: 1px solid #e9ecef;
}

.cash-record-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.cash-action-btn.mobile {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid #dee2e6;
    background: white;
    color: #6c757d;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.cash-action-btn.mobile:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.15);
}

.cash-action-btn.mobile.view:hover {
    background: #0d6efd;
    color: white;
    border-color: #0d6efd;
}

.cash-action-btn.mobile.order:hover {
    background: #28a745;
    color: white;
    border-color: #28a745;
}

.cash-action-btn.mobile.act:hover {
    background: #ffc107;
    color: #212529;
    border-color: #ffc107;
}

.cash-action-btn.mobile.delete:hover {
    background: #dc3545;
    color: white;
    border-color: #dc3545;
}

.cash-action-btn.mobile i {
    font-size: 0.875rem;
}

.no-records-mobile {
    padding: 3rem 1rem;
    text-align: center;
    color: #6c757d;
}

.no-records-mobile i {
    opacity: 0.5;
    margin-bottom: 1rem;
}

/* Анимации для мобильных карточек кассы */
@keyframes cashCardSlideIn {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.cash-record-card {
    animation: cashCardSlideIn 0.3s ease-out;
}

.cash-record-card:nth-child(1) { animation-delay: 0s; }
.cash-record-card:nth-child(2) { animation-delay: 0.05s; }
.cash-record-card:nth-child(3) { animation-delay: 0.1s; }
.cash-record-card:nth-child(4) { animation-delay: 0.15s; }
.cash-record-card:nth-child(5) { animation-delay: 0.2s; }

/* Скрытие мобильных карточек при фильтрации */
#mobileCashRecords .cash-record-card[style*="display: none"] {
    display: none !important;
}

/* Адаптивные стили для очень маленьких экранов */
@media (max-width: 576px) {
    .cash-record-header {
        padding: 12px 12px 8px;
    }
    
    .cash-record-body {
        padding: 8px 12px;
    }
    
    .cash-record-footer {
        padding: 8px 12px;
    }
    
    .cash-record-amount {
        font-size: 1.1rem;
    }
    
    .cash-record-actions {
        gap: 6px;
    }
    
    .cash-action-btn.mobile {
        width: 32px;
        height: 32px;
    }
}

/* === СТИЛИ ДЛЯ МОБИЛЬНЫХ КАРТОЧЕК ИСТОРИИ КЛИЕНТА === */
.appointment-car-service {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.car-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

.car-info i {
    font-size: 1rem;
    color: #6c757d;
}

.car-model {
    font-weight: 600;
    color: #495057;
}

.service-info {
    padding-left: 32px; /* выравнивание с иконкой */
}

.service-name {
    font-size: 0.875rem;
    color: #6c757d;
    line-height: 1.4;
}

.appointment-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 8px;
}

.detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
}

.detail-item i {
    font-size: 1rem;
}

.price {
    font-weight: 600;
    color: #28a745;
}

.appointment-status {
    display: flex;
    align-items: center;
}

.appointment-status .badge {
    font-size: 0.75rem;
} 


:root {
    /* Material Design Color Palette */
    --md-primary: #1976d2;
    --md-primary-dark: #1565c0;
    --md-primary-light: #42a5f5;
    --md-secondary: #ff4081;
    --md-secondary-dark: #c2185b;
    --md-accent: #ff5722;
    
    /* Material Design Grays */
    --md-gray-50: #fafafa;
    --md-gray-100: #f5f5f5;
    --md-gray-200: #eeeeee;
    --md-gray-300: #e0e0e0;
    --md-gray-400: #bdbdbd;
    --md-gray-500: #9e9e9e;
    --md-gray-600: #757575;
    --md-gray-700: #616161;
    --md-gray-800: #424242;
    --md-gray-900: #212121;
    
    /* Semantic Colors */
    --md-success: #4caf50;
    --md-warning: #ff9800;
    --md-error: #f44336;
    --md-info: #2196f3;
    
    /* Material Elevations */
    --md-elevation-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
    --md-elevation-2: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    --md-elevation-4: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --md-elevation-8: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
    
    /* Layout */
    --sidebar-width: 280px;
    --topbar-height: 80px;
    
    /* Material Motion */
    --md-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --md-transition-standard: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

* {
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    background: var(--md-gray-50);
    margin: 0;
    padding: 0;
    line-height: 1.5;
    color: var(--md-gray-800);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Material Design Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100vh;
    background: white;
    box-shadow: var(--md-elevation-4);
    z-index: 1000;
    overflow-y: auto;
    transition: transform var(--md-transition-standard);
}

.sidebar-brand {
    padding: 24px 20px;
    background: var(--md-primary);
    color: white;
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: none;
}

.sidebar-brand .brand-icon {
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.sidebar-brand h4 {
    margin: 0;
    font-weight: 500;
    font-size: 20px;
    letter-spacing: 0.15px;
}

.menu-section {
    padding: 16px 20px 8px;
    font-size: 12px;
    font-weight: 500;
    color: var(--md-gray-600);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 8px;
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    color: var(--md-gray-700);
    text-decoration: none;
    font-weight: 400;
    font-size: 14px;
    border-left: 3px solid transparent;
    transition: all var(--md-transition-fast);
    position: relative;
    overflow: hidden;
}

.menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--md-primary);
    opacity: 0;
    transition: opacity var(--md-transition-fast);
}

.menu-item:hover {
    background: rgba(25, 118, 210, 0.04);
    color: var(--md-primary);
    text-decoration: none;
}

.menu-item:hover::before {
    opacity: 0.04;
}

.menu-item.active {
    background: rgba(25, 118, 210, 0.12);
    color: var(--md-primary);
    border-left-color: var(--md-primary);
    font-weight: 500;
}

.menu-item i {
    width: 24px;
    margin-right: 16px;
    text-align: center;
    font-size: 20px;
    z-index: 1;
    position: relative;
}

.menu-item span {
    z-index: 1;
    position: relative;
}

/* Main Content */
.main-content {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Material Top Bar */
.top-bar {
    background: white;
    box-shadow: var(--md-elevation-1);
    padding: 0 24px;
    height: var(--topbar-height);
    display: flex;
    align-items: center;
    gap: 24px;
    position: sticky;
    top: 0;
    z-index: 100;
}

.top-bar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
    margin-left: auto;
    min-width: 0; /* Позволяет сжиматься */
}

.week-calendar {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    max-width: 620px;
    align-items: center;
    margin-left: 40px; /* Отступ от левых кнопок */
}

.calendar-day {
    flex: 1;
    min-width: 64px;
    background: white;
    border-radius: 8px;
    padding: 12px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: var(--md-elevation-1);
    border: 1px solid var(--md-gray-200);
}

.calendar-day:hover {
    box-shadow: var(--md-elevation-2);
    transform: translateY(-1px);
    border-color: var(--md-primary);
}

.calendar-day:active {
    transform: scale(0.98);
}

.calendar-day.today {
    background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
    color: white;
    box-shadow: var(--md-elevation-2);
}

.calendar-day.has-appointments {
    background: linear-gradient(135deg, var(--md-success), #45a049);
    color: white;
    box-shadow: var(--md-elevation-2);
}

.calendar-day.has-appointments.today {
    background: linear-gradient(135deg, var(--md-info), #1976d2);
}

.calendar-more-btn {
    background: linear-gradient(135deg, var(--md-gray-100), var(--md-gray-200));
    border: 2px dashed var(--md-gray-400);
    color: var(--md-gray-600);
    font-weight: 500;
}

.calendar-more-btn:hover {
    background: linear-gradient(135deg, var(--md-primary), var(--md-primary-dark));
    border-color: var(--md-primary);
    color: white;
    transform: translateY(-3px) scale(1.05);
}

.calendar-more-btn .material-icons {
    font-size: 20px;
    margin-bottom: 4px;
    transition: transform 0.2s ease;
}

.calendar-more-btn:hover .material-icons {
    transform: scale(1.1);
}

@keyframes slideInUp {
    0% { 
        opacity: 0; 
        transform: translateY(10px); 
    }
    100% { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Стили для загрузки данных календаря */
.calendar-day.loading {
    position: relative;
    overflow: hidden;
}

.calendar-day.loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Убираем избыточные анимации */

/* Улучшенный эффект для дней с записями */
.calendar-day.has-appointments {
    position: relative;
}

        .calendar-day.has-appointments::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: currentColor;
    border-radius: 1px;
    opacity: 0.7;
}

 /* Стили для выделения выбранной даты в таблице */
 .selected-date-highlight {
     background: linear-gradient(90deg, rgba(25, 118, 210, 0.1), rgba(25, 118, 210, 0.05)) !important;
     border-left: 4px solid var(--md-primary) !important;
     animation: highlightFadeIn 0.5s ease-out;
 }

 @keyframes highlightFadeIn {
     0% { 
         background: rgba(25, 118, 210, 0.3);
         transform: scale(1.02);
     }
     100% { 
         background: linear-gradient(90deg, rgba(25, 118, 210, 0.1), rgba(25, 118, 210, 0.05));
         transform: scale(1);
     }
 }

 /* Улучшение стилей фильтра даты */
 #dateFilter {
     transition: all 0.3s ease;
 }

 #dateFilter:focus {
     border-color: var(--md-primary);
     box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.1);
 }

 /* Анимация для счетчика результатов */
 .badge.bg-primary {
     transition: all 0.3s ease;
 }

 .badge.bg-primary.updated {
     animation: badgeUpdate 0.6s ease-out;
 }

 @keyframes badgeUpdate {
     0% { 
         transform: scale(1); 
         background: var(--md-primary);
     }
     50% { 
         transform: scale(1.1); 
         background: var(--md-success);
     }
     100% { 
         transform: scale(1); 
         background: var(--md-primary);
     }
 }

.day-number {
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}

.day-name {
    font-size: 11px;
    opacity: 0.7;
    text-transform: uppercase;
    margin-top: 4px;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: opacity 0.2s ease;
}

.calendar-day:hover .day-name {
    opacity: 1;
}

.appointments-count {
    position: absolute;
    top: -1px;
    right: -1px;
    background: var(--md-error);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 11px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--md-elevation-2);
    animation: fadeInScale 0.3s ease-out;
}

@keyframes fadeInScale {
    0% { transform: scale(0); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.top-bar-info {
    display: flex;
    align-items: center;
    gap: 24px;
    color: var(--md-gray-600);
    font-size: 14px;
    font-weight: 400;
    white-space: nowrap;
}

/* Content Area */
.content-area {
    padding: 24px;
    flex: 1;
}

/* Material Design Cards */
.card {
    background: white;
    border-radius: 12px;
    box-shadow: var(--md-elevation-1);
    border: none;
    margin-bottom: 24px;
    transition: box-shadow var(--md-transition-fast);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--md-elevation-2);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--md-gray-200);
    padding: 20px 24px;
}

.card-body {
    padding: 24px;
}

.card-title {
    font-size: 18px;
    font-weight: 500;
    color: var(--md-gray-800);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Material Design Buttons */
.btn {
    border: none;
    border-radius: 8px;
    font-weight: 500;
    font-size: 14px;
    padding: 12px 24px;
    transition: all var(--md-transition-fast);
    text-transform: none;
    letter-spacing: 0.25px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--md-elevation-1);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    transition: width 0.3s, height 0.3s, top 0.3s, left 0.3s;
    transform: translate(-50%, -50%);
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

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

.btn-primary:hover {
    background: var(--md-primary-dark);
    color: white;
    box-shadow: var(--md-elevation-2);
}

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

.btn-success:hover {
    background: #45a049;
    color: white;
    box-shadow: var(--md-elevation-2);
}

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

.btn-info:hover {
    background: #1976d2;
    color: white;
    box-shadow: var(--md-elevation-2);
}

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

.btn-warning:hover {
    background: #f57c00;
    color: white;
    box-shadow: var(--md-elevation-2);
}

.btn-danger {
    background: var(--md-error);
    color: white;
}

.btn-danger:hover {
    background: #d32f2f;
    color: white;
    box-shadow: var(--md-elevation-2);
}

.btn-outline-primary {
    background: transparent;
    color: var(--md-primary);
    border: 1px solid var(--md-primary);
    box-shadow: none;
}

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

.btn-outline-secondary {
    background: transparent;
    color: var(--md-gray-600);
    border: 1px solid var(--md-gray-300);
    box-shadow: none;
}

.btn-outline-secondary:hover {
    background: var(--md-gray-100);
    color: var(--md-gray-700);
}

/* Stats Cards */
.stats-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: var(--md-elevation-1);
    border-left: 4px solid var(--md-primary);
    transition: all var(--md-transition-fast);
}

.stats-card:hover {
    box-shadow: var(--md-elevation-2);
    transform: translateY(-2px);
}

.stats-card.success {
    border-left-color: var(--md-success);
}

.stats-card.info {
    border-left-color: var(--md-info);
}

.stats-card.warning {
    border-left-color: var(--md-warning);
}

.stats-number {
    font-size: 32px;
    font-weight: 500;
    color: var(--md-gray-800);
    margin-bottom: 8px;
    line-height: 1;
}

.stats-label {
    color: var(--md-gray-600);
    font-size: 14px;
    font-weight: 400;
    margin: 0;
}

/* Material Tables */
.table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--md-elevation-1);
    margin-bottom: 0;
}

.table thead th {
    background: var(--md-gray-50);
    color: var(--md-gray-700);
    border: none;
    font-weight: 500;
    padding: 16px;
    font-size: 14px;
    border-bottom: 1px solid var(--md-gray-200);
}

.table tbody td {
    padding: 16px;
    border-bottom: 1px solid var(--md-gray-100);
    vertical-align: middle;
    font-size: 14px;
}

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

.table tbody tr:hover {
    background: var(--md-gray-50);
}

/* Forms */
.form-control {
    border-radius: 8px;
    border: 1px solid var(--md-gray-300);
    padding: 12px 16px;
    font-size: 14px;
    transition: border-color var(--md-transition-fast);
    background: white;
}

.form-control:focus {
    border-color: var(--md-primary);
    box-shadow: 0 0 0 2px rgba(25, 118, 210, 0.2);
    background: white;
}

.form-label {
    font-weight: 500;
    color: var(--md-gray-700);
    margin-bottom: 8px;
    font-size: 14px;
}

/* Alerts */
.alert {
    border-radius: 8px;
    border: none;
    box-shadow: var(--md-elevation-1);
    font-weight: 400;
    padding: 16px;
}

/* Modal */
.modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: var(--md-elevation-8);
}

.modal-header {
    border-bottom: 1px solid var(--md-gray-200);
    padding: 24px;
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    border-top: 1px solid var(--md-gray-200);
    padding: 16px 24px;
}

/* Navigation Tabs */
.nav-tabs {
    border-bottom: 1px solid var(--md-gray-200);
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 12px 24px;
    font-weight: 500;
    color: var(--md-gray-600);
    transition: all var(--md-transition-fast);
}

.nav-tabs .nav-link.active {
    background: white;
    color: var(--md-primary);
    box-shadow: var(--md-elevation-1);
}

.nav-tabs .nav-link:hover {
    background: var(--md-gray-50);
    color: var(--md-primary);
}

/* Badges */
.badge {
    font-size: 12px;
    border-radius: 16px;
    padding: 4px 12px;
    font-weight: 500;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        width: 260px; /* уменьшаем ширину сайдбара */
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main-content {
        margin-left: 0;
    }

    .top-bar {
        padding: 0 8px;
        flex-wrap: nowrap;
        gap: 8px;
        height: 72px !important;
        --topbar-height: 72px;
    }

    .top-bar-left {
        flex-shrink: 0;
    }

    .top-bar-right {
        flex-shrink: 0;
        gap: 8px;
        margin-left: auto;
    }

    .week-calendar {
        display: none; /* скрываем обычный календарь на мобильных по умолчанию */
        flex: 0 0 auto;
        max-width: none;
        margin-left: 8px; /* Меньше отступ на мобильных */
    }

    .calendar-day {
        min-width: 48px;
        padding: 8px 4px;
        flex: 0 0 48px; /* фиксированная ширина для прокрутки */
    }

    .content-area {
        padding: 12px;
    }

    .mobile-menu-btn {
        display: flex !important;
    }

    .mobile-calendar-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
    }

    /* Скрываем время и дату на мобильных */
    .top-bar-info {
        display: none !important; /* полностью скрываем на мобильных */
    }

    .profile-btn {
        padding: 4px 8px;
    }

    .profile-btn .username {
        display: none !important; /* скрываем имя пользователя */
    }

    .avatar {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    /* Улучшенная видимость уведомлений на мобильных */
    .notif-icon {
        padding: 8px !important;
        margin: 0 4px !important;
    }

    .dropdown-menu.notif-dropdown {
        position: fixed !important;
        right: 8px !important;
        left: auto !important;
        max-width: calc(100vw - 16px) !important;
    }

    /* -------- ВИДЖЕТ КАЛЕНДАРЯ КАК DROPDOWN -------- */
    .top-bar {
        position: relative; /* база для absolute календаря */
    }

    #weekCalendar {
        position: absolute;
        top: calc(var(--topbar-height) + 8px);
        left: 8px;
        right: 8px;
        background: #fff;
        border-radius: 12px;
        box-shadow: var(--md-elevation-8);
        border: 1px solid var(--md-gray-200);
        flex-direction: column;
        gap: 4px;
        padding: 12px 8px;
        z-index: 1000;              /* поверх контента */
        max-height: 600px;
        overflow-y: auto;
        opacity: 0;
        transform: translateY(-15px) scale(0.95);
        transition: all 0.25s ease-out;
        pointer-events: none;
    }

    #weekCalendar.show {
        opacity: 1;
        transform: translateY(0) scale(1);
        pointer-events: auto;
    }

    /* Стиль отдельного дня в вертикальном списке */
    #weekCalendar .calendar-day {
        flex: 0 0 auto;
        min-width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        margin-bottom: 2px;
        border-radius: 8px;
        transition: all var(--md-transition-fast);
    }

    #weekCalendar .calendar-day:hover {
        background: var(--md-gray-50);
        transform: translateX(2px);
    }

    #weekCalendar .calendar-day.today {
        background: var(--md-primary);
        color: white;
    }

    #weekCalendar .calendar-day.has-appointments {
        background: var(--md-success);
        color: white;
        position: relative;
    }

    #weekCalendar .calendar-day .day-info {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    #weekCalendar .calendar-day .day-number {
        font-size: 18px;
        font-weight: 600;
        line-height: 1;
    }

    #weekCalendar .calendar-day .day-name {
        font-size: 12px;
        opacity: 0.8;
        margin-top: 2px;
    }

    #weekCalendar .calendar-day .day-actions {
        display: flex;
        align-items: center;
        opacity: 0.5;
    }

    #weekCalendar .calendar-day .day-actions .material-icons {
        font-size: 20px;
    }

    /* Улучшенная горизонтальная прокрутка таблиц */
    .table-responsive {
        border: none;
        border-radius: 8px;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        margin-bottom: 16px;
    }

    .table-responsive .table {
        min-width: 800px; /* минимальная ширина для горизонтальной прокрутки */
        margin-bottom: 0;
        white-space: nowrap;
    }

    .table-responsive .table th,
    .table-responsive .table td {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: 13px;
        vertical-align: middle;
    }

    /* Модальные окна на весь экран */
    .modal-dialog {
        margin: 8px;
        max-width: calc(100% - 16px);
    }

    /* Карточки с меньшими отступами */
    .card-body {
        padding: 16px;
    }

    .card-header {
        padding: 12px 16px;
    }

    /* Кнопки в ряд на мобильных */
    .btn-group-mobile {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .btn-group-mobile .btn {
        width: 100%;
        margin-bottom: 0;
    }

    /* Скрытие некоторых колонок в таблицах на мобильных */
    .table .d-none-mobile {
        display: none !important;
    }

    /* Улучшенные формы на мобильных */
    .form-control {
        font-size: 16px; /* предотвращает зум в iOS */
    }
}

.mobile-menu-btn {
    display: none;
    background: var(--md-primary);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px;
    box-shadow: var(--md-elevation-1);
    flex-shrink: 0;
}

.mobile-calendar-btn {
    display: none;
    background: var(--md-gray-100);
    color: var(--md-gray-700);
    border: none;
    border-radius: 8px;
    padding: 8px;
    box-shadow: var(--md-elevation-1);
    transition: all var(--md-transition-fast);
    flex-shrink: 0;
}

.mobile-calendar-btn:hover {
    background: var(--md-primary);
    color: white;
}

.mobile-calendar-btn.active {
    background: var(--md-primary);
    color: white;
}

.mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
    backdrop-filter: blur(4px);
}

.mobile-overlay.active {
    display: block;
}

/* Profile Styles */
.profile-btn {
    background: transparent;
    border: none;
    color: var(--md-gray-700);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all var(--md-transition-fast);
}

.profile-btn:hover {
    background: var(--md-gray-100);
    color: var(--md-primary);
    text-decoration: none;
}

.avatar {
    width: 36px;
    height: 36px;
    background: var(--md-primary);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 16px;
    text-transform: uppercase;
}

.username {
    margin-left: 8px;
    font-weight: 500;
}

.profile-menu {
    border: none;
    box-shadow: var(--md-elevation-4);
    border-radius: 8px;
    padding: 8px 0;
    min-width: 200px;
}

.profile-menu .dropdown-item {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    transition: all var(--md-transition-fast);
}

.profile-menu .dropdown-item:hover {
    background: var(--md-gray-50);
    color: var(--md-primary);
}

.profile-menu .dropdown-divider {
    margin: 8px 0;
    border-color: var(--md-gray-200);
}

/* Desktop calendar display */
@media (min-width: 769px) {
    .week-calendar {
        display: flex !important; /* показываем календарь на десктопе */
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex: 0 0 auto;
        min-width: 0;
        max-width: calc(100vw - 400px); /* Больше места для правой части */
    }

    #weekCalendar {
        position: static !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        flex-direction: row !important;
        padding: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    #weekCalendar .calendar-day {
        flex: 0 0 auto !important;
        min-width: 64px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 12px 8px !important;
        margin-bottom: 0 !important;
        border-radius: 8px !important;
    }

    /* Улучшенная правая часть на десктопе */
    .top-bar-right {
        gap: 20px;
        min-width: 300px; /* Минимальная ширина для комфортного отображения */
    }

    .top-bar-info {
        gap: 20px;
    }

    /* Убираем ограничения ширины для уведомлений на десктопе */
    .dropdown-menu.notif-dropdown {
        position: absolute !important;
        right: 0 !important;
        left: auto !important;
        max-width: 400px !important;
    }
}

/* Scrollbar Styling */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: var(--md-gray-100);
}

::-webkit-scrollbar-thumb {
    background: var(--md-gray-400);
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--md-gray-500);
}