/* ===== Reset & base ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; font-size: 15px; line-height: 1.6; background: #f5f6fa; color: #1a1a2e; }
a { color: #4f6ef7; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.2; margin-bottom: 0.5rem; }
h1 { font-size: 1.8rem; }
h2 { font-size: 1.3rem; }
input, textarea, select { font: inherit; border: 1px solid #ccc; border-radius: 6px; padding: 6px 10px; width: 100%; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #4f6ef7; box-shadow: 0 0 0 2px #4f6ef730; }
label { display: block; margin-bottom: 12px; font-size: 0.9rem; color: #555; }
label input, label select { margin-top: 4px; }

/* ===== Utilities ===== */
.hidden { display: none !important; }
.muted { color: #888; font-size: 0.85rem; }
.container { max-width: 960px; margin: 0 auto; padding: 24px 16px; }

/* ===== Buttons ===== */
.btn { display: inline-block; padding: 7px 16px; border-radius: 6px; border: none; cursor: pointer; font-size: 0.9rem; font-weight: 500; transition: background 0.15s; }
.btn-primary { background: #4f6ef7; color: #fff; }
.btn-primary:hover { background: #3a5ae0; }
.btn-secondary { background: #e8ecff; color: #4f6ef7; }
.btn-secondary:hover { background: #d0d8ff; }
.btn-danger { background: #fee2e2; color: #dc2626; }
.btn-danger:hover { background: #fca5a5; }
.btn-sm { padding: 4px 10px; font-size: 0.8rem; }
button:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Alerts ===== */
.alert { padding: 10px 14px; border-radius: 6px; margin-bottom: 16px; font-size: 0.9rem; }
.alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fca5a5; }
.alert-success { background: #dcfce7; color: #16a34a; border: 1px solid #86efac; }

/* ===== Navbar ===== */
.navbar { display: flex; align-items: center; gap: 16px; padding: 0 20px; height: 52px; background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 100; zoom: 0.9; }
.brand { font-weight: 700; font-size: 1.1rem; color: #1a1a2e; }
.nav-links { display: flex; gap: 16px; flex: 1; }
.nav-links a { font-size: 0.9rem; color: #555; }
.nav-links a:hover { color: #4f6ef7; }
.nav-user { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.role-badge { font-size: 0.75rem; color: #888; }

/* ===== Auth page ===== */
.auth-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; }
.auth-card { background: #fff; padding: 32px 36px; border-radius: 12px; box-shadow: 0 4px 24px #0001; width: 100%; max-width: 380px; }
.auth-card h1 { text-align: center; margin-bottom: 24px; }
.auth-card h2 { margin-bottom: 16px; }
.auth-card button { width: 100%; margin-top: 8px; padding: 10px; }
.auth-card p { text-align: center; margin-top: 14px; font-size: 0.9rem; }

/* ===== Card grid ===== */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-top: 12px; }
.card { background: #fff; border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 6px #0001; }
.card h3 { margin-bottom: 6px; }
.card p { font-size: 0.9rem; color: #555; margin-bottom: 10px; }
.card-actions { display: flex; gap: 8px; }

/* ===== Progress bar ===== */
.progress-bar-wrap { margin-top: 8px; }
.progress-bar-wrap span { font-size: 0.8rem; color: #555; }
.progress-bar { height: 6px; background: #4f6ef7; border-radius: 4px; margin-bottom: 2px; max-width: 100%; }

/* ===== Module / lesson list ===== */
.module-block { background: #fff; border-radius: 8px; padding: 14px 18px; margin-bottom: 12px; box-shadow: 0 1px 4px #0001; }
.module-block summary { cursor: pointer; font-size: 1rem; padding: 4px 0; user-select: none; }
.module-block summary::-webkit-details-marker { color: #4f6ef7; }
.lesson-list { list-style: none; margin-top: 10px; }
.lesson-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.9rem; }
.lesson-list li:last-child { border-bottom: none; }
.lesson-list li.done { color: #16a34a; }
.content-type-badge { font-size: 0.7rem; background: #e8ecff; color: #4f6ef7; border-radius: 4px; padding: 1px 6px; }

/* ===== Lesson page ===== */
.lesson-layout { display: flex; height: calc(100vh - 52px); }
.lesson-main { flex: 1; overflow-y: auto; padding: 24px 32px; max-width: 800px; }
.lesson-content { margin: 16px 0; line-height: 1.7; }
.lesson-content h1, .lesson-content h2, .lesson-content h3 { margin: 1.2em 0 0.5em; }
.lesson-content pre { background: #f4f4f8; border-radius: 6px; padding: 14px; overflow-x: auto; font-size: 0.85rem; }
.lesson-content code { background: #f4f4f8; padding: 1px 5px; border-radius: 3px; font-size: 0.88em; }
.lesson-content table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.lesson-content th, .lesson-content td { border: 1px solid #ddd; padding: 8px 12px; text-align: left; }
.lesson-content th { background: #f4f4f8; }
.lesson-footer { display: flex; align-items: center; gap: 20px; margin-top: 24px; padding-top: 16px; border-top: 1px solid #e5e7eb; }
.complete-check { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; cursor: pointer; margin: 0; }
.complete-check input { width: auto; }

/* ===== Assignment blocks ===== */
.assignment-block { background: #f9fafb; border: 1px solid #e5e7eb; border-radius: 8px; padding: 16px 20px; margin-bottom: 14px; }
.assignment-block h3 { margin-bottom: 8px; }
.question { margin-bottom: 14px; }
.choice-label { display: flex; align-items: center; gap: 8px; margin: 4px 0; cursor: pointer; font-size: 0.95rem; }
.choice-label input { width: auto; }
.quiz-result { margin-top: 10px; padding: 10px 14px; background: #dcfce7; border-radius: 6px; font-size: 0.9rem; }

/* ===== Chat sidebar (lesson page) ===== */
.chat-sidebar { width: 340px; border-left: 1px solid #e5e7eb; background: #fff; display: flex; flex-direction: column; }
.chat-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid #e5e7eb; }
.chat-messages { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { max-width: 85%; padding: 10px 14px; border-radius: 10px; font-size: 1.05rem; white-space: pre-wrap; line-height: 1.6; }
.chat-msg-user { background: #4f6ef7; color: #fff; align-self: flex-end; border-bottom-right-radius: 2px; }
.chat-msg-assistant { background: #f4f4f8; color: #1a1a2e; align-self: flex-start; border-bottom-left-radius: 2px; }
.chat-input-row { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid #e5e7eb; }
.chat-input-row textarea { flex: 1; resize: none; border-radius: 8px; }
.chat-input-row button { align-self: flex-end; padding: 8px 14px; }

/* ===== Chat page ===== */
.chat-page-layout { display: flex; height: calc(100vh - 52px); }
.chat-history-panel { width: 240px; border-right: 1px solid #e5e7eb; background: #fff; display: flex; flex-direction: column; }
.panel-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid #e5e7eb; }
.chat-history-item { padding: 10px 14px; cursor: pointer; font-size: 0.88rem; border-bottom: 1px solid #f0f0f0; }
.chat-history-item:hover { background: #f5f6fa; }
.chat-history-item.active { background: #e8ecff; color: #4f6ef7; }
.chat-date { display: block; font-size: 0.75rem; color: #aaa; }
.chat-main { flex: 1; display: flex; flex-direction: column; }
.chat-messages-full { flex: 1; overflow-y: auto; padding: 16px 24px; display: flex; flex-direction: column; gap: 10px; }

/* ===== Teacher panel ===== */
.panel-section { background: #fff; border-radius: 10px; padding: 20px 24px; margin-bottom: 20px; box-shadow: 0 1px 4px #0001; }
.panel-section h2 { margin-bottom: 14px; }
.form-row { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.form-row input, .form-row select { margin: 0; }
.course-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; }
.course-row strong { flex: 1; }
.badge { font-size: 0.75rem; padding: 2px 8px; border-radius: 10px; }
.badge-success { background: #dcfce7; color: #16a34a; }
.badge-muted { background: #f3f4f6; color: #6b7280; }

/* ===== Admin table ===== */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.data-table th, .data-table td { text-align: left; padding: 8px 12px; border-bottom: 1px solid #e5e7eb; }
.data-table th { background: #f9fafb; font-weight: 600; }
.data-table select { width: auto; padding: 3px 6px; font-size: 0.85rem; }

/* ===== Nav active link ===== */
.nav-links a.active { color: #4f6ef7; font-weight: 600; }
.btn-ghost { background: transparent; color: #555; border: 1px solid #e5e7eb; }
.btn-ghost:hover { background: #f5f6fa; }

/* ===== Page header ===== */
.page-header { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.page-header h1 { margin: 0; flex: 1; min-width: 180px; }
.page-header .muted { flex-basis: 100%; margin-top: -10px; }

/* ===== Loading / skeleton ===== */
.loading-block { color: #aaa; padding: 24px; text-align: center; font-size: 0.95rem; }
.skeleton-list { height: 64px; background: linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); border-radius: 6px; animation: shimmer 1.2s infinite; }
@keyframes shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }

/* ===== AI typing / loading indicator ===== */
.ai-thinking { display:inline-flex; align-items:center; gap:4px; padding:6px 12px;
  background:#f0f4ff; border-radius:16px; color:#4f6ef7; font-size:.85rem; }
.ai-thinking .dot { width:7px; height:7px; border-radius:50%; background:#4f6ef7; animation:ai-bounce 1.2s infinite; }
.ai-thinking .dot:nth-child(2) { animation-delay:.2s; }
.ai-thinking .dot:nth-child(3) { animation-delay:.4s; }
@keyframes ai-bounce { 0%,80%,100% { transform:scale(.6); opacity:.5; } 40% { transform:scale(1); opacity:1; } }

/* ===== Badges (new) ===== */
.badge-danger  { background: #fee2e2; color: #dc2626; }
.badge-info    { background: #dbeafe; color: #2563eb; }
.badge-warning { background: #fef9c3; color: #a16207; }
.badge-lec     { background: #e8ecff; color: #4f46e5; }
.badge-prac    { background: #dcfce7; color: #16a34a; }
.badge-lab     { background: #fef3c7; color: #d97706; }
.badge-sem     { background: #fce7f3; color: #db2777; }
.badge-con     { background: #f3f4f6; color: #6b7280; }

/* ===== Subject cards ===== */
.subjects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.subject-card { display: block; background: #fff; border-radius: 10px; padding: 18px 20px; box-shadow: 0 1px 6px #0001; transition: box-shadow 0.15s, transform 0.12s; }
.subject-card:hover { box-shadow: 0 4px 16px #0002; transform: translateY(-2px); text-decoration: none; }
.subject-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.subject-code { font-size: 0.8rem; background: #f3f4f6; color: #6b7280; border-radius: 4px; padding: 2px 7px; font-family: monospace; }
.subject-card h3 { margin-bottom: 8px; font-size: 1rem; color: #1a1a2e; }
.subject-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.82rem; color: #666; margin-top: 4px; }

/* ===== Timetable ===== */
.week-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.week-label { font-weight: 600; font-size: 0.95rem; min-width: 160px; text-align: center; }
.timetable-scroll { overflow-x: auto; }
.timetable { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 0.82rem; }
.timetable th, .timetable td { border: 1px solid #e5e7eb; padding: 6px 8px; vertical-align: top; min-width: 100px; }
.timetable th { background: #f9fafb; font-weight: 600; text-align: center; }
.tt-time { width: 72px; text-align: center; background: #f9fafb; white-space: nowrap; }
.tt-today { background: #eff6ff; }
.tt-cell { border-radius: 6px; padding: 6px 8px; margin-bottom: 4px; font-size: 0.8rem; }
.tt-subject { font-weight: 600; margin-bottom: 2px; }
.tt-meta { color: #555; margin-bottom: 2px; }
.tt-room { font-size: 0.78rem; color: #666; }
.tt-topic { font-size: 0.78rem; color: #888; font-style: italic; margin-top: 2px; }
.tt-actions { display: flex; gap: 6px; align-items: center; margin-top: 4px; flex-wrap: wrap; }
.tt-link { font-size: 0.78rem; color: #4f6ef7; }
.tt-att-btn { font-size: 0.75rem; color: #4f6ef7; background: #e8ecff; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.tt-att-btn:hover { background: #d0d8ff; text-decoration: none; }
.tt-cancelled .tt-subject { text-decoration: line-through; color: #aaa; }
.tt-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; align-items: center; font-size: 0.82rem; }

/* ===== Dashboard grid ===== */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .dashboard-grid { grid-template-columns: 1fr; } }
.dash-col { display: flex; flex-direction: column; gap: 16px; }

/* ===== Session card ===== */
.session-card { background: #f9fafb; border-radius: 8px; padding: 10px 14px; margin-bottom: 8px; display: flex; align-items: flex-start; gap: 10px; border-left: 3px solid #4f6ef7; }
.session-card.cancelled { opacity: 0.55; border-left-color: #ccc; }
.session-time { font-size: 0.8rem; color: #888; min-width: 70px; white-space: nowrap; padding-top: 2px; }
.session-info { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 0.88rem; }
.session-topic { font-size: 0.8rem; color: #888; font-style: italic; }

/* ===== Mini table ===== */
.mini-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.mini-table th, .mini-table td { padding: 5px 8px; border-bottom: 1px solid #f0f0f0; text-align: left; }
.mini-table th { color: #888; font-weight: 500; }

/* ===== Task / exam rows ===== */
.task-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.88rem; gap: 8px; }
.task-row:last-child { border-bottom: none; }
.task-due { font-size: 0.8rem; color: #888; white-space: nowrap; }
.due-soon { color: #dc2626; font-weight: 600; }
.exam-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.88rem; flex-wrap: wrap; }
.exam-row:last-child { border-bottom: none; }
.link-more { display: block; text-align: right; font-size: 0.82rem; margin-top: 10px; color: #4f6ef7; }

/* ===== SG row ===== */
.sg-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid #f0f0f0; font-size: 0.88rem; }
.sg-row:last-child { border-bottom: none; }
.sg-row strong { flex: 1; }

/* ===== Tabs ===== */
.tab-bar { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 2px solid #e5e7eb; }
.tab-btn { background: none; border: none; padding: 10px 18px; font-size: 0.9rem; color: #666; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color 0.15s; }
.tab-btn:hover { color: #4f6ef7; }
.tab-btn.active { color: #4f6ef7; border-bottom-color: #4f6ef7; font-weight: 600; }

/* ===== Attendance journal ===== */
.journal-wrap { overflow-x: auto; }
.journal-table { border-collapse: collapse; font-size: 0.78rem; white-space: nowrap; }
.journal-table th, .journal-table td { border: 1px solid #e5e7eb; padding: 4px 7px; text-align: center; }
.journal-table .j-name { text-align: left; min-width: 140px; position: sticky; left: 0; background: #fff; z-index: 1; }
.journal-table th { background: #f9fafb; font-weight: 500; }
.att-p { background: #dcfce7; color: #16a34a; font-weight: 700; }
.att-a { background: #fee2e2; color: #dc2626; font-weight: 700; }
.att-l { background: #fef9c3; color: #a16207; font-weight: 700; }
.att-e { background: #dbeafe; color: #2563eb; font-weight: 700; }

/* ===== Grade journal ===== */
.grade-journal-wrap { overflow-x: auto; }
.grade-journal { border-collapse: collapse; font-size: 0.82rem; white-space: nowrap; }
.grade-journal th, .grade-journal td { border: 1px solid #e5e7eb; padding: 5px 10px; text-align: center; }
.grade-journal .j-name { text-align: left; min-width: 150px; position: sticky; left: 0; background: #fff; z-index: 1; }
.grade-journal th { background: #f9fafb; font-weight: 500; }
.grade-cell { cursor: pointer; min-width: 36px; }
.grade-cell:hover { background: #eff6ff; }
.grade-cell input { width: 36px; padding: 2px 4px; font-size: 0.8rem; text-align: center; border: 1px solid #4f6ef7; }

/* ===== Submissions ===== */
.submission-card { background: #fff; border-radius: 8px; padding: 14px 18px; margin-bottom: 10px; box-shadow: 0 1px 4px #0001; }
.submission-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 8px; }
.submission-content { background: #f9fafb; border-radius: 6px; padding: 10px 14px; font-size: 0.88rem; white-space: pre-wrap; margin-bottom: 8px; border-left: 3px solid #e5e7eb; max-height: 200px; overflow-y: auto; }
.grade-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grade-form input[type=number] { width: 70px; }

/* ===== Material card ===== */
.material-card { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.material-card:last-child { border-bottom: none; }
.material-icon { font-size: 1.4rem; }
.material-info { flex: 1; }
.material-info strong { display: block; font-size: 0.9rem; }
.material-info .muted { font-size: 0.8rem; }

/* ===== Form card ===== */
.form-card { background: #fff; border-radius: 10px; padding: 20px 24px; box-shadow: 0 1px 4px #0001; margin-bottom: 16px; }
.form-card h2 { margin-bottom: 14px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 0.85rem; color: #555; margin-bottom: 4px; }
.field input, .field select, .field textarea { width: 100%; }

/* ===== Stat cards ===== */
.stats-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.stat-card { background: #fff; border-radius: 8px; padding: 14px 18px; flex: 1; min-width: 120px; box-shadow: 0 1px 4px #0001; }
.stat-card .stat-val { font-size: 1.8rem; font-weight: 700; color: #4f6ef7; }
.stat-card .stat-lbl { font-size: 0.8rem; color: #888; }