<!-- ===== Dashboard Page ===== -->
<div class="dashboard-container">
    <!-- Метрики (Информационные карточки) -->
    <div class="dashboard-metrics-grid">
        <div class="card dashboard-metric-card dashboard-metric-card--groups">
            <div class="metric-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
                    <circle cx="9" cy="7" r="4" />
                    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                </svg>
            </div>
            <div>
                <div style="font-size: 0.85rem; color: var(--text-secondary); font-weight: 500;">Активные группы</div>
                <h3 id="metric-groups" style="margin: 0.25rem 0 0; font-size: 1.5rem; font-weight: 700;">—</h3>
            </div>
        </div>

        <div class="card dashboard-metric-card dashboard-metric-card--students">
            <div class="metric-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
                    <circle cx="9" cy="7" r="4" />
                    <path d="M22 21v-2a4 4 0 0 0-3-3.87" />
                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                </svg>
            </div>
            <div>
                <div style="font-size: 0.85rem; color: var(--text-secondary); font-weight: 500;">Всего студентов</div>
                <h3 id="metric-students" style="margin: 0.25rem 0 0; font-size: 1.5rem; font-weight: 700;">—</h3>
            </div>
        </div>

        <div class="card dashboard-metric-card dashboard-metric-card--teachers">
            <div class="metric-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" />
                    <circle cx="12" cy="7" r="4" />
                </svg>
            </div>
            <div>
                <div style="font-size: 0.85rem; color: var(--text-secondary); font-weight: 500;">Преподаватели</div>
                <h3 id="metric-teachers" style="margin: 0.25rem 0 0; font-size: 1.5rem; font-weight: 700;">—</h3>
            </div>
        </div>

        <div class="card dashboard-metric-card dashboard-metric-card--classrooms">
            <div class="metric-icon">
                <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <rect width="18" height="18" x="3" y="3" rx="2" />
                    <path d="M9 3v18M15 3v18M3 9h18M3 15h18" />
                </svg>
            </div>
            <div>
                <div style="font-size: 0.85rem; color: var(--text-secondary); font-weight: 500;">Загрузка аудиторий сегодня</div>
                <h3 id="metric-classrooms" style="margin: 0.25rem 0 0; font-size: 1.5rem; font-weight: 700;">—</h3>
            </div>
        </div>
    </div>

    <!-- Мониторинг в реальном времени и Быстрый переход -->
    <div class="dashboard-middle">
        <!-- Идет сейчас -->
        <div class="card dashboard-monitor-card">
            <div class="dashboard-card-header">
                <h2 style="margin: 0;">Мониторинг пар (Идет сейчас)</h2>
                <div id="current-time-slot" class="dashboard-time-slot">—</div>
            </div>
            <div class="table-wrap dashboard-monitor-table">
                <table style="width: 100%; border-collapse: collapse;">
                    <thead>
                        <tr>
                            <th style="text-align: left; padding: 0.75rem;">Аудитория</th>
                            <th style="text-align: left; padding: 0.75rem;">Дисциплина</th>
                            <th style="text-align: left; padding: 0.75rem;">Преподаватель</th>
                            <th style="text-align: left; padding: 0.75rem;">Группа</th>
                        </tr>
                    </thead>
                    <tbody id="current-lessons-tbody">
                        <tr>
                            <td colspan="4" class="loading-row" style="padding: 2rem; text-align: center; color: var(--text-secondary);">Определение текущего времени...</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>

        <!-- Свободные аудитории и Быстрые действия -->
        <div class="dashboard-side-stack">
            <!-- Свободные аудитории -->
            <div class="card dashboard-compact-card">
                <h3 class="dashboard-card-title">Свободные аудитории (ближайшие)</h3>
                <div id="free-classrooms-list" class="dashboard-badge-list">
                    <div style="color: var(--text-secondary); font-size: 0.9rem;">Загрузка...</div>
                </div>
            </div>

            <!-- Быстрые действия -->
            <div class="card dashboard-compact-card">
                <h3 class="dashboard-card-title">Быстрый переход</h3>
                <div class="dashboard-actions">
                    <a href="#schedule" class="btn btn-md btn-primary dashboard-action-link">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
                            <line x1="16" y1="2" x2="16" y2="6"></line>
                            <line x1="8" y1="2" x2="8" y2="6"></line>
                            <line x1="3" y1="10" x2="21" y2="10"></line>
                        </svg>
                        Конструктор расписания
                    </a>
                    <a href="#schedule-view" class="btn btn-md btn-secondary dashboard-action-link">
                        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7z" />
                            <circle cx="12" cy="12" r="3" />
                        </svg>
                        Точечные изменения / Просмотр
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Центр предупреждений и конфликтов (Red Zone) -->
    <div class="card red-zone-card" style="border-top: 4px solid var(--error, #ef4444);">
        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem;">
            <div>
                <h2 style="margin: 0; display: flex; align-items: center; gap: 0.5rem;">
                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#ef4444" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
                        <polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2" />
                        <line x1="12" y1="8" x2="12" y2="12" />
                        <line x1="12" y1="16" x2="12.01" y2="16" />
                    </svg>
                    Центр предупреждений (Red Zone)
                </h2>
                <div style="color: var(--text-secondary); font-size: 0.85rem; margin-top: 0.25rem;">Анализ накладок и коллизий расписания на текущую неделю</div>
            </div>
            <button class="btn btn-sm btn-secondary" id="btn-recheck-conflicts" type="button">Перепроверить</button>
        </div>
        
        <div id="conflicts-container" role="status" aria-live="polite" aria-atomic="true" style="display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem;">
            <div class="loading-row" style="text-align: center; padding: 2rem; color: var(--text-secondary);">Анализ расписания и выявление конфликтов...</div>
        </div>
    </div>
</div>
