/* ==================== Навигация (dropdown) ==================== */
.nav-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 240px;
    background: #1f2937;
    border: 1px solid #374151;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    z-index: 50;
    animation: navDropIn 0.18s ease;
    overflow: hidden;
}
@keyframes navDropIn {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    color: #9ca3af;
    font-size: 13px;
    transition: all 0.15s;
    text-decoration: none;
}
.nav-link:hover { background: rgba(255,255,255,0.07); color: #fff; }
.nav-link.active { background: #6366f1; color: #fff; }
.nav-icon { font-size: 15px; width: 22px; text-align: center; }

/* ==================== Счётчик-карточка ==================== */
.counter-card {
    background: #1f2937;
    border-radius: 12px;
    padding: 20px;
}
.counter-card .value { font-size: 2rem; font-weight: 700; }
.counter-card .label { font-size: 0.8rem; color: #9ca3af; margin-top: 4px; }

/* ==================== Таблицы ==================== */
tbody tr { border-bottom: 1px solid #374151; transition: background 0.1s; }
tbody tr:hover { background: rgba(255,255,255,0.03); }
tbody td { padding: 12px 16px; }

/* ==================== Статус бейджи ==================== */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.badge-new      { background: #1e3a5f; color: #60a5fa; }
.badge-call     { background: #3b2f1e; color: #fbbf24; }
.badge-trial    { background: #1e3a2f; color: #34d399; }
.badge-payment  { background: #3b2f3e; color: #c084fc; }
.badge-active   { background: #1e3b1e; color: #4ade80; }
.badge-declined { background: #3b1e1e; color: #f87171; }

/* ==================== Должности ==================== */
.position-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
}
.pos-intern    { background: #374151; color: #9ca3af; }
.pos-junior    { background: #1e3a5f; color: #60a5fa; }
.pos-teacher   { background: #1e3a2f; color: #34d399; }
.pos-senior    { background: #3b2f1e; color: #fbbf24; }

/* Позиции менеджеров */
.pos-messages  { background: #1e3a5f; color: #60a5fa; }
.pos-calls     { background: #3b2f1e; color: #fbbf24; }
.pos-universal { background: #1e3a2f; color: #34d399; }

/* ==================== Вкладки Клиенты (Активные / Архив) ==================== */
.clients-view-tab {
    background: #374151;
    color: #9ca3af;
    border: none;
    cursor: pointer;
}
.clients-view-tab:hover { background: #4b5563; color: #fff; }
.clients-view-tab.active { background: #6366f1; color: #fff; }

/* Стили для заявок в overdue */
.badge-app_unclaimed { background: #3b2f1e; color: #fbbf24; }
.badge-app_claimed   { background: #1e3a5f; color: #60a5fa; }

/* ==================== Аналитика вкладки ==================== */
.analytics-tab {
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
    background: #374151;
    color: #9ca3af;
    border: none;
    cursor: pointer;
    transition: all 0.15s;
}
.analytics-tab:hover { background: #4b5563; color: #fff; }
.analytics-tab.active { background: #6366f1; color: #fff; }
.lessons-tab { color: #9ca3af; }
.lessons-tab:hover { background: #4b5563; color: #fff; }
.lessons-tab.active { background: #6366f1; color: #fff; }

/* ==================== Воронка ==================== */
.funnel-step {
    text-align: center;
    flex: 1;
}
.funnel-bar {
    height: 8px;
    border-radius: 4px;
    margin-top: 8px;
    transition: width 0.5s;
}
.funnel-arrow {
    color: #4b5563;
    font-size: 1.2rem;
    padding-top: 20px;
}

/* ==================== Формы в модалке ==================== */
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 0.8rem; color: #9ca3af; margin-bottom: 4px; }
.form-input {
    width: 100%;
    padding: 10px 12px;
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
}
.form-input:focus { outline: none; border-color: #6366f1; }
.form-select {
    width: 100%;
    padding: 10px 12px;
    background: #374151;
    border: 1px solid #4b5563;
    border-radius: 8px;
    color: #fff;
    font-size: 0.875rem;
    appearance: auto;
}

.btn-primary {
    width: 100%;
    padding: 12px;
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-primary:hover { background: #4f46e5; }

.btn-danger {
    padding: 6px 14px;
    background: #dc2626;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-danger:hover { background: #b91c1c; }

.btn-secondary {
    padding: 6px 14px;
    background: #4b5563;
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 0.75rem;
    cursor: pointer;
    transition: background 0.15s;
}
.btn-secondary:hover { background: #374151; }

/* ==================== Overdue highlight ==================== */
.overdue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #1c1917;
    border-left: 3px solid #f59e0b;
    border-radius: 4px;
    font-size: 0.85rem;
}
.overdue-item .days { color: #f59e0b; font-weight: 600; font-size: 0.8rem; }

/* ==================== Activity feed ==================== */
.activity-item {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.8rem;
    border-bottom: 1px solid #1f2937;
}
.activity-time { color: #6b7280; min-width: 40px; }

/* ==================== Кликабельные строки ==================== */
.clickable-row { cursor: pointer; }

/* ==================== Скроллбар ==================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 3px; }

/* ==================== Календарь занятий ==================== */

/* Кнопка-гамбургер для сайдбара */
.cal-sidebar-toggle {
    background: none;
    border: none;
    color: #9ca3af;
    font-size: 1.4rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 50%;
    transition: background 0.15s;
    line-height: 1;
}
.cal-sidebar-toggle:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* Боковая панель с мини-календарём */
.cal-sidebar {
    width: 220px;
    min-width: 220px;
    padding: 8px 12px 8px 0;
    transition: width 0.25s ease, min-width 0.25s ease, opacity 0.25s ease, padding 0.25s ease;
    overflow: hidden;
}
.cal-sidebar.collapsed {
    width: 0;
    min-width: 0;
    padding: 0;
    opacity: 0;
    pointer-events: none;
}

/* Мини-календарь */
.mini-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.mini-cal-header .month-label { font-size: 0.85rem; font-weight: 600; color: #d1d5db; }
.mini-cal-header button {
    background: none; border: none; color: #9ca3af; font-size: 1rem;
    cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: color 0.1s;
}
.mini-cal-header button:hover { color: #fff; }
.mini-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    text-align: center;
    font-size: 0.72rem;
}
.mini-cal-grid .mc-weekday { color: #6b7280; font-weight: 600; padding: 4px 0; font-size: 0.65rem; }
.mini-cal-grid .mc-day {
    padding: 3px 0;
    border-radius: 50%;
    cursor: pointer;
    color: #d1d5db;
    transition: background 0.1s;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
}
.mini-cal-grid .mc-day:hover { background: rgba(255,255,255,0.1); }
.mini-cal-grid .mc-day.mc-other { color: #4b5563; }
.mini-cal-grid .mc-day.mc-today { background: #6366f1; color: #fff; font-weight: 700; border-radius: 50%; }
.mini-cal-grid .mc-day.mc-selected-week { background: rgba(99, 102, 241, 0.2); border-radius: 2px; }
.mini-cal-grid .mc-day.mc-today.mc-selected-week { background: #6366f1; border-radius: 50%; }

/* Обёртка сетки */
.cal-grid-wrapper {
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    position: relative;
}

.cal-grid {
    display: grid;
    grid-template-columns: 50px repeat(7, 1fr);
    grid-template-rows: auto 1fr;
    border: 1px solid #374151;
    border-radius: 12px;
    overflow: hidden;
    background: #111827;
    min-width: 600px;
}

/* Анимация перелистывания */
.cal-grid.cal-slide-left  { animation: calSlideLeft 0.25s ease; }
.cal-grid.cal-slide-right { animation: calSlideRight 0.25s ease; }
@keyframes calSlideLeft {
    0% { opacity: 0; transform: translateX(40px); }
    100% { opacity: 1; transform: translateX(0); }
}
@keyframes calSlideRight {
    0% { opacity: 0; transform: translateX(-40px); }
    100% { opacity: 1; transform: translateX(0); }
}

/* Заголовки (ряд 1) */
.cal-hdr {
    grid-row: 1;
    background: #1f2937;
    padding: 8px 4px 10px;
    text-align: center;
    color: #9ca3af;
    border-bottom: 1px solid #374151;
}
.cal-hdr-time {
    border-right: 1px solid #374151;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cal-hdr .cal-day-name {
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cal-hdr .cal-day-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: #e5e7eb;
    line-height: 1.2;
    margin-top: 2px;
}
.cal-hdr.cal-today .cal-day-name { color: #a5b4fc; }
.cal-hdr.cal-today .cal-day-num {
    background: #6366f1;
    color: #fff;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

/* Колонка времени (ряд 2, столбец 1) */
.cal-time-col {
    grid-row: 2;
    grid-column: 1;
    border-right: 1px solid #374151;
}
.cal-time-slot {
    height: 60px;
    padding: 2px 6px 0 0;
    font-size: 0.68rem;
    color: #6b7280;
    text-align: right;
    border-bottom: 1px solid #1f2937;
}

/* Колонки дней (ряд 2, столбцы 2-8) */
.cal-day-col {
    grid-row: 2;
    position: relative;
    border-right: 1px solid #1f2937;
}
.cal-day-col:last-child { border-right: none; }
.cal-day-col.cal-today-col { background: rgba(99, 102, 241, 0.04); }

.cal-hour-cell {
    height: 60px;
    border-bottom: 1px solid #1f2937;
}
.cal-hour-cell.drag-over { background: rgba(99, 102, 241, 0.15) !important; outline: 2px dashed #6366f1; outline-offset: -2px; }

/* Блоки занятий (абсолютное позиционирование) */
.cal-ev {
    position: absolute;
    z-index: 2;
    border-radius: 6px;
    padding: 3px 6px;
    font-size: 0.68rem;
    line-height: 1.3;
    cursor: pointer;
    overflow: hidden;
    border-left: 3px solid;
    box-sizing: border-box;
    margin-left: 2px;
    transition: opacity 0.15s, box-shadow 0.15s;
}
.cal-ev:hover { opacity: 0.85; z-index: 3; box-shadow: 0 2px 8px rgba(0,0,0,0.4); }
.cal-ev[draggable="true"] { cursor: grab; }
.cal-ev[draggable="true"]:active { cursor: grabbing; }

.cal-ev-time { font-weight: 600; font-size: 0.62rem; white-space: nowrap; pointer-events: none; }
.cal-ev-name { opacity: 0.85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; pointer-events: none; }

.cal-ev-scheduled  { background: #1e3a5f; color: #93c5fd; border-color: #3b82f6; }
.cal-ev-conducted  { background: #1e3a2f; color: #86efac; border-color: #22c55e; }
.cal-ev-missed     { background: #3b2f1e; color: #fcd34d; border-color: #f59e0b; }
.cal-ev-cancelled  { background: #2d1f1f; color: #fca5a5; border-color: #ef4444; }

/* Drag & drop: скрыть pointer-events у событий при перетаскивании */
.cal-dragging .cal-ev,
.cal-dragging .cal-hour-cell { pointer-events: none !important; }

/* Маркер текущего времени */
.cal-now-marker {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #ef4444;
    z-index: 5;
    pointer-events: none;
}
.cal-now-dot {
    position: absolute;
    left: -5px;
    top: -4px;
    width: 10px;
    height: 10px;
    background: #ef4444;
    border-radius: 50%;
}

/* Попап быстрого создания занятия (как в Google Calendar) */
.quick-lesson-popup {
    position: fixed;
    z-index: 40;
    background: #1f2937;
    border: 1px solid #4b5563;
    border-radius: 12px;
    padding: 16px;
    width: 280px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.6);
    animation: popupFadeIn 0.15s ease;
}
@keyframes popupFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

/* ==================== Мобильная адаптация ==================== */

@media (max-width: 768px) {
    /* Основной контент: меньше отступы */
    main {
        padding: 12px !important;
        padding-top: 64px !important;
    }

    /* Заголовки страниц */
    .page h1.text-2xl {
        font-size: 1.25rem;
    }

    /* Шапки страниц — вертикально */
    .page > .flex.justify-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 12px;
    }

    /* Фильтры — перенос по строкам */
    .page > .flex.justify-between > .flex {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Кнопки фильтров меньше */
    .page select, .page input[type="text"], .page input[type="date"] {
        font-size: 0.8rem;
        padding: 6px 10px;
    }

    /* Карточки преподавателей и менеджеров — в одну колонку */
    #teachers-grid, #managers-grid {
        grid-template-columns: 1fr !important;
    }

    /* Дашборд: счётчики 2 колонки */
    #dashboard-counters {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Воронка дашборда: горизонтальный скролл */
    #dashboard-funnel {
        overflow-x: auto;
        min-width: 0;
    }

    /* Аналитика: вкладки скролл */
    .flex.gap-2.mb-6 {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
    }
    .analytics-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Календарь — горизонтальный скролл */
    .cal-grid {
        overflow-x: auto;
        min-width: 600px;
    }
    #lessons-tab-calendar-content {
        overflow-x: auto;
    }
    .cal-sidebar { display: none; }

    /* Модалка — полноэкранная на мобильном */
    #modal-content {
        max-width: 100% !important;
        margin: 8px;
        border-radius: 12px;
    }

    /* Расчёт выплат: фильтры оборачиваются и не вылезают */
    .flex.flex-wrap.justify-between.items-center.gap-4.mb-4 {
        flex-direction: column;
        align-items: flex-start;
    }
    .flex.flex-wrap.justify-between.items-center.gap-4.mb-4 > .flex {
        flex-wrap: wrap;
        gap: 8px;
    }
    .flex.flex-wrap.justify-between.items-center.gap-4.mb-4 input[type="date"] {
        width: 130px;
        font-size: 0.8rem;
    }
}