/* =========================================
   BIẾN MÀU SẮC & CÀI ĐẶT CHUNG (TAEKWONDO)
========================================= */
:root {
    --tkd-blue: #0b3d91; 
    --tkd-red: #d32f2f;  
    --bg-main: #f4f6f9;
    --sidebar-width: 18rem; 
    --sidebar-collapsed-width: 5rem;
    --header-height: 4.5rem;
}

/* Thu nhỏ 80% toàn bộ giao diện Bootstrap */
html { font-size: 80%; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    font-family: 'Montserrat', sans-serif; 
    background-color: var(--bg-main); 
    color: #2c3e50; 
    overflow-x: hidden; 
}

a { text-decoration: none; transition: 0.3s ease; }
.tkd-text-blue { color: var(--tkd-blue) !important; }
.tkd-text-red { color: var(--tkd-red) !important; }
.tkd-tracking { letter-spacing: 1px; }
.tkd-radius { border-radius: 8px; }

/* =========================================
   MÀN HÌNH CHỜ & ĐĂNG NHẬP
========================================= */
.fullscreen-loader { 
    position: fixed; inset: 0; background: #ffffff; 
    z-index: 9999; display: flex; flex-direction: column; 
    justify-content: center; align-items: center; transition: opacity 0.3s ease; 
}

.login-page { 
    position: fixed; inset: 0; display: flex; justify-content: center; align-items: center; 
    background: linear-gradient(135deg, var(--tkd-blue) 0%, #051630 100%); 
    z-index: 1040; 
}

.auth-card { 
    width: 100%; max-width: 30rem; margin: 1.5rem; border-radius: 12px; 
    background: #ffffff; padding: 3rem 2rem; text-align: center; 
    border-bottom: 6px solid var(--tkd-red); 
}

/* =========================================
   BỐ CỤC CHÍNH (HEADER, SIDEBAR, MAIN)
========================================= */
.vtf-header { 
    height: var(--header-height); background: #ffffff; position: fixed; 
    top: 0; left: 0; right: 0; z-index: 1030; border-bottom: 1px solid #e2e8f0; 
}
.vtf-container { 
    display: flex; padding-top: var(--header-height); min-height: 100vh; width: 100%; 
}

.vtf-sidebar { 
    width: var(--sidebar-width); 
    background: #ffffff; border-right: 1px solid #e2e8f0; 
    flex-shrink: 0; z-index: 1020; position: fixed; 
    top: var(--header-height); bottom: 0; left: 0; 
    overflow-y: auto; transition: width 0.3s ease, transform 0.3s ease;
    box-shadow: 2px 0 10px rgba(0,0,0,0.03); 
}

.vtf-main { 
    flex-grow: 1; padding: 2.5rem; margin-left: var(--sidebar-width);
    transition: margin-left 0.3s ease;
}

body.sidebar-collapsed .vtf-sidebar { width: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .vtf-main { margin-left: var(--sidebar-collapsed-width); }
body.sidebar-collapsed .tkd-hide-collapsed { display: none !important; }
body.sidebar-collapsed .menu-item { justify-content: center; padding: 1rem 0; }
body.sidebar-collapsed .menu-item i { margin: 0; font-size: 1.4rem; text-align: center; width: 100%; }

.avatar-placeholder { 
    width: 4.5rem; height: 4.5rem; background: #f1f5f9; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    border: 2px solid var(--tkd-blue); transition: 0.3s; 
}
body.sidebar-collapsed .avatar-placeholder { width: 3rem; height: 3rem; }
body.sidebar-collapsed .avatar-placeholder i { font-size: 1.2rem; }

.sidebar-title { font-size: 0.75rem; color: #94a3b8; font-weight: 800; letter-spacing: 1px; padding: 0.8rem 1.5rem; margin-top: 1rem; }
.menu-item { display: flex; align-items: center; padding: 1rem 1.5rem; color: #475569; font-weight: 600; border-left: 4px solid transparent; transition: 0.2s; margin-bottom: 0.3rem; border-radius: 0 6px 6px 0; }
.menu-item i { width: 2rem; font-size: 1.2rem; color: #94a3b8; transition: 0.2s; }
.menu-item:hover { background: #f8fafc; color: var(--tkd-blue); }
.menu-item.active { background: rgba(11, 61, 145, 0.08); color: var(--tkd-blue); border-left: 4px solid var(--tkd-blue); }
.menu-item.active i { color: var(--tkd-blue); }
.cham-thi-item.active { background: rgba(211, 47, 47, 0.08); color: var(--tkd-red); border-left-color: var(--tkd-red); }
.cham-thi-item.active i { color: var(--tkd-red); }

.sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 1015; display: none; opacity: 0; transition: opacity 0.3s ease; }
@media (max-width: 992px) {
    html { font-size: 90%; } 
    .vtf-sidebar { transform: translateX(-100%); width: 20rem; }
    .vtf-main { margin-left: 0; padding: 1.5rem 1rem; width: 100%; }
    body.sidebar-open .vtf-sidebar { transform: translateX(0); }
    body.sidebar-open .sidebar-overlay { display: block; opacity: 1; }
    body.sidebar-collapsed .vtf-sidebar { width: 20rem; }
    body.sidebar-collapsed .tkd-hide-collapsed { display: block !important; }
    body.sidebar-collapsed .menu-item { justify-content: flex-start; padding: 1rem 1.5rem; }
    body.sidebar-collapsed .menu-item i { width: 2rem; }
}

/* =========================================
   GIAO DIỆN CHẤM THI (MODAL & TABLE)
========================================= */
.modal-fullscreen-custom {
    position: fixed; inset: 0; background: #f8fafc; z-index: 1060;
    display: flex; flex-direction: column;
}
.header-modal { min-height: 50px; height: auto; background: var(--tkd-blue); flex-shrink: 0; }
.body-modal { 
    flex-grow: 1; overflow: hidden; display: flex; flex-direction: column; background: #f1f5f9;
}

/* Thẻ Giám khảo */
.judge-cards-container { display: flex; gap: 10px; overflow-x: auto; padding: 10px 0; margin-bottom: 15px; flex-shrink: 0; }
.judge-card {
    min-width: 150px; background: #fff; border: 2px solid #e2e8f0; border-radius: 8px;
    padding: 10px; cursor: pointer; transition: all 0.2s; text-align: center;
}
.judge-card.active { border-color: var(--tkd-blue); background-color: rgba(11, 61, 145, 0.05); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.judge-card .name { font-weight: 700; font-size: 0.85rem; display: block; color: #1e293b; }
.judge-card .stats { font-size: 0.75rem; color: #64748b; }

/* Bảng Chấm thi & Sticky */
.grading-table-wrapper {
    flex-grow: 1; overflow: auto; border-radius: 8px; border: 1px solid #dee2e6; min-height: 0; background: #fff;
}
.grading-table-wrapper thead th {
    position: sticky; top: 0; z-index: 20; background-color: #212529 !important; color: white; box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
.grading-table-wrapper tbody td:first-child,
.grading-table-wrapper thead th:first-child {
    position: sticky; left: 0; z-index: 21; background-color: #f8fafc; border-right: 2px solid #dee2e6;
}
.grading-table-wrapper thead th:first-child { z-index: 22; background-color: #212529 !important; }

/* =========================================
   TỐI ƯU HIỂN THỊ Ô NHẬP ĐIỂM (CỰC RÕ RÀNG)
========================================= */
.input-grading-wrapper { position: relative; display: inline-block; width: 100%; max-width: 75px; }

/* Ô MẶC ĐỊNH (BẮT BUỘC CHẤM) - Xanh lam nhạt dịu mắt */
.grade-input {
    width: 100%; height: 45px; font-size: 1.2rem; 
    border: 2px solid #93c5fd; border-radius: 6px; padding: 4px; text-align: center; 
    font-weight: 800; color: var(--tkd-blue); transition: all 0.2s;
    background-color: #eff6ff;
}
.grade-input:focus { 
    border-color: var(--tkd-red); outline: none; 
    box-shadow: 0 0 8px rgba(211,47,47,0.3); background-color: #ffffff; 
}

/* Ô KHÔNG BẮT BUỘC CHẤM - Viền đứt, Nền xám mờ */
.grade-input.input-optional { background-color: #f8fafc; border: 2px dashed #cbd5e1; color: #94a3b8; }
.grade-input.input-optional:focus { background-color: #ffffff; border: 2px solid var(--tkd-blue); color: var(--tkd-blue); }

/* TRẠNG THÁI LOADING / ĐÃ LƯU */
.grade-input.loading { color: transparent !important; pointer-events: none; background-color: #f1f5f9; }
.spinner-inline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--tkd-red); font-size: 1.2rem; z-index: 10; }
.grade-input[readonly] { background-color: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

.highlight-update { background-color: #fef08a !important; transition: background 1s; }

/* Trạng thái thi đấu (Chưa thi / Đang thi / Xong) */
.status-badge { font-size: 0.7rem; padding: 3px 6px; margin-top: 5px; display: inline-block; border-radius: 4px; letter-spacing: 0.5px; }

/* Modal Lỗi Nghiêm Trọng (Ép F5) */
.modal-critical-error { z-index: 99999 !important; }

@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }
.animate-pulse { animation: pulse 2s infinite; }

/* =========================================
   VIEW MODES - CHẤM THI CẤP DASHBOARD
========================================= */
.view-toolbar {
    background: #fff; border-radius: 8px; padding: 12px 15px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); margin-bottom: 20px;
    display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px;
}

.view-btn-group .btn { font-weight: 600; font-size: 0.85rem; }
.month-nav-group { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--tkd-blue); }

/* Lịch Tháng (Calendar Grid) & Sticky Header */
.calendar-wrapper {
    max-height: calc(100vh - 200px); 
    overflow: auto; 
    border-radius: 8px; 
    border: 1px solid #cbd5e1;
    background: #cbd5e1;
}

.calendar-grid {
    display: grid; 
    grid-template-columns: repeat(7, 1fr); 
    gap: 1px; 
    min-width: 800px; 
}

.calendar-header-day {
    text-align: center; font-weight: 700; background: #1e293b; color: #fff; padding: 10px; font-size: 0.85rem;
    position: sticky; top: 0; z-index: 20; box-shadow: 0 2px 4px rgba(0,0,0,0.3); 
}

.calendar-day { background: #fff; min-height: 120px; padding: 8px; display: flex; flex-direction: column; gap: 5px; }
.calendar-day.other-month { background: #f8fafc; opacity: 0.6; }
.calendar-day.today { background: #fffbeb; border: 2px solid #fbbf24; }
.calendar-date { font-weight: 800; font-size: 1rem; margin-bottom: 5px; text-align: right; color: #64748b; }
.calendar-day.today .calendar-date { color: #d97706; }

.calendar-event {
    font-size: 0.75rem; padding: 6px; border-radius: 4px; cursor: pointer; transition: 0.2s;
    background: #eff6ff; border-left: 3px solid var(--tkd-blue); color: var(--tkd-blue);
    display: flex; flex-direction: column;
}
.calendar-event.supervisor { background: #fff7ed; border-left-color: #f59e0b; color: #b45309; }
.calendar-event:hover { transform: translateY(-2px); box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.calendar-event .time { font-weight: bold; margin-bottom: 2px; }
.calendar-event .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Table View Filters */
.table-filter-input {
    width: 100%; padding: 4px 8px; font-size: 0.8rem; font-weight: normal;
    border: 1px solid #cbd5e1; border-radius: 4px; margin-top: 5px; outline: none;
}
.table-filter-input:focus { border-color: var(--tkd-red); }

/* Đưa Modal Ý kiến Giám sát lên trên Bảng chấm thi */
#modalSupervisorNote { z-index: 1070 !important; }
.modal-backdrop { z-index: 1065 !important; }

/* =========================================
   TIMELINE: HÀNH TRÌNH THĂNG TIẾN
========================================= */
.vtf-timeline { position: relative; padding-left: 35px; margin-top: 10px; margin-bottom: 2rem;}
.vtf-timeline::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 14px;
    width: 3px; background: #cbd5e1; border-radius: 4px;
}
.timeline-item { position: relative; margin-bottom: 20px; transition: transform 0.2s; }
.timeline-item:hover { transform: translateX(5px); }

/* Chấm tròn đánh dấu */
.timeline-marker {
    position: absolute; left: -39px; top: 12px; width: 25px; height: 25px;
    border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; z-index: 1;
}
.timeline-marker.cap { border: 4px solid var(--tkd-blue); }
.timeline-marker.dang { border: 4px solid var(--tkd-red); box-shadow: 0 0 10px rgba(211,47,47,0.3); }

/* Hộp nội dung */
.timeline-content {
    background: #fff; padding: 15px 20px; border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03); 
    border: 1px solid #e2e8f0; position: relative;
}
.timeline-content.dang-box { border-left: 4px solid var(--tkd-red); }
.timeline-content.cap-box { border-left: 4px solid var(--tkd-blue); }

.timeline-result-badge { font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; font-weight: 700; }