/* ECE EduHub - Main Stylesheet */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');
@import url('https://cdn.jsdelivr.net/npm/remixicon@4.1.0/fonts/remixicon.css');

:root {
  --primary: #000000;
  --primary-light: #333333;
  --primary-dark: #000000;
  --accent: #000000;
  --accent-light: #444444;
  --accent-dark: #000000;
  --secondary: #555555;
  --bg: #F5F5F7;
  --card: #FFFFFF;
  --text: #1D1D1F;
  --text-light: #86868B;
  --border: #D2D2D7;
  --success: #34C759;
  --error: #FF3B30;
  --warning: #FF9500;
  --info: #007AFF;
  --radius: 16px;
  --radius-sm: 12px;
  --shadow: 0 2px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 30px rgba(0,0,0,.1);
  --transition: .3s cubic-bezier(.4,0,.2,1);
  --sidebar-w: 260px;
  --header-h: 64px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; min-height: 100vh; }
a { color: var(--accent-dark); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent); }
img { max-width: 100%; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
h1,h2,h3,h4 { line-height: 1.3; color: var(--primary); }

/* ── Utility ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }
.text-center { text-align: center; }
.hidden { display: none !important; }
.w-full { width: 100%; }

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 24px; border-radius: var(--radius-sm); font-weight: 600;
  font-size: .9rem; border: none; cursor: pointer; transition: all var(--transition);
  text-decoration: none; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-light); color: #fff; }
.btn-accent { background: var(--accent); color: #fff; }
.btn-accent:hover { background: var(--accent-light); color: #fff; }
.btn-outline { background: transparent; border: 2px solid var(--primary); color: var(--primary); }
.btn-outline:hover { background: var(--primary); color: #fff; }
.btn-danger { background: var(--error); color: #fff; }
.btn-danger:hover { background: #dc2626; }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #059669; }
.btn-sm { padding: 6px 14px; font-size: .8rem; }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; }

/* ── Cards ── */
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  border: 1px solid var(--border); overflow: hidden; transition: all var(--transition);
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card-body { padding: 20px; }
.card-header { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 600; }

/* ── Forms ── */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: 500; font-size: .9rem; color: var(--text); }
.form-control {
  width: 100%; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm);
  font-size: .95rem; transition: border-color var(--transition); background: #fff; color: var(--text);
}
.form-control:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(245,166,35,.15); }
.form-control.error { border-color: var(--error); }
.error-text { color: var(--error); font-size: .8rem; margin-top: 4px; }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
textarea.form-control { resize: vertical; min-height: 100px; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; }
.checkbox-item { display: flex; align-items: center; gap: 6px; font-size: .9rem; }
.checkbox-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }

/* ── Auth Pages ── */
.auth-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: #000;
  padding: 20px; position: relative; overflow: hidden;
}
.auth-wrapper::before {
  content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%;
  background: rgba(245,166,35,.08); top: -100px; right: -100px;
}
.auth-wrapper::after {
  content: ''; position: absolute; width: 300px; height: 300px; border-radius: 50%;
  background: rgba(245,166,35,.05); bottom: -80px; left: -80px;
}
.auth-card {
  background: #fff; border-radius: 16px; padding: 40px; width: 100%; max-width: 460px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3); position: relative; z-index: 1;
  animation: fadeUp .5s ease;
}
@keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-logo h1 { font-size: 1.5rem; color: var(--primary); margin-top: 8px; }
.auth-logo .subtitle { color: var(--text-light); font-size: .85rem; }
.role-tabs { display: flex; gap: 4px; background: var(--bg); border-radius: var(--radius-sm); padding: 4px; margin-bottom: 24px; }
.role-tab {
  flex: 1; padding: 10px; text-align: center; border-radius: 6px; cursor: pointer;
  font-weight: 600; font-size: .85rem; transition: all var(--transition); border: none; background: none; color: var(--text-light);
}
.role-tab.active { background: var(--primary); color: #fff; box-shadow: 0 2px 8px rgba(10,31,68,.2); }

/* ── Layout: Sidebar + Main ── */
.app-layout { display: flex; min-height: 100vh; }
.sidebar {
  width: var(--sidebar-w); background: #000000; color: #fff; position: fixed;
  top: 0; left: 0; bottom: 0; z-index: 100; display: flex; flex-direction: column;
  transition: transform var(--transition);
}
.sidebar-header { padding: 20px; border-bottom: 1px solid rgba(255,255,255,.1); }
.sidebar-header h2 { font-size: 1.1rem; color: #FFFFFF; }
.sidebar-header .role-badge { font-size: .75rem; background: #FFFFFF; color: #000; padding: 3px 12px; border-radius: 20px; font-weight: 700; display: inline-block; margin-top: 4px; }
.sidebar-nav { flex: 1; padding: 12px 0; overflow-y: auto; }
.sidebar-nav a, .sidebar-nav button {
  display: flex; align-items: center; gap: 12px; padding: 12px 20px; color: rgba(255,255,255,.7);
  font-size: .9rem; transition: all var(--transition); border: none; background: none; width: 100%;
  text-align: left; cursor: pointer; text-decoration: none;
}
.sidebar-nav a:hover, .sidebar-nav button:hover, .sidebar-nav a.active { color: #fff; background: rgba(255,255,255,.08); }
.sidebar-nav a.active { border-right: 3px solid #FFFFFF; color: #FFFFFF; font-weight: 600; }
.sidebar-nav .nav-icon { width: 20px; text-align: center; }
.sidebar-footer { padding: 16px 20px; border-top: 1px solid rgba(255,255,255,.1); }

.main-content { flex: 1; margin-left: var(--sidebar-w); }
.topbar {
  height: var(--header-h); background: #fff; border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; padding: 0 24px;
  position: sticky; top: 0; z-index: 50;
}
.topbar-left { display: flex; align-items: center; gap: 16px; }
.menu-toggle { display: none; background: none; border: none; font-size: 1.5rem; cursor: pointer; color: #000; }
.topbar-title { font-size: 1.1rem; font-weight: 700; color: #1D1D1F; }
.topbar-right { display: flex; align-items: center; gap: 12px; }
.notification-bell { position: relative; cursor: pointer; font-size: 1.2rem; }
.notification-badge {
  position: absolute; top: -6px; right: -6px; background: var(--error); color: #fff;
  font-size: .65rem; width: 18px; height: 18px; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; font-weight: 700;
}
.page-content { padding: 24px; }
.page-header { margin-bottom: 24px; }
.page-header h1 { font-size: 1.5rem; margin-bottom: 4px; }
.page-header p { color: var(--text-light); font-size: .9rem; }

/* ── Stats Cards ── */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 16px; margin-bottom: 24px; }
.stat-card {
  background: #fff; padding: 20px; border-radius: var(--radius); border: 1px solid var(--border);
  display: flex; align-items: center; gap: 16px;
}
.stat-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; }
.stat-icon.blue { background: rgba(59,130,246,.1); color: var(--info); }
.stat-icon.green { background: rgba(16,185,129,.1); color: var(--success); }
.stat-icon.amber { background: rgba(245,166,35,.1); color: var(--accent); }
.stat-icon.red { background: rgba(239,68,68,.1); color: var(--error); }
.stat-info h3 { font-size: 1.5rem; color: var(--text); }
.stat-info p { font-size: .8rem; color: var(--text-light); }

/* ── Data Tables ── */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); font-size: .9rem; }
th { background: var(--bg); font-weight: 600; color: var(--primary); white-space: nowrap; }
tr:hover td { background: rgba(245,166,35,.03); }

/* ── Badges ── */
.badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px;
  font-size: .75rem; font-weight: 600;
}
.badge-success { background: rgba(16,185,129,.1); color: #059669; }
.badge-warning { background: rgba(245,166,35,.1); color: #D97706; }
.badge-danger { background: rgba(239,68,68,.1); color: #DC2626; }
.badge-info { background: rgba(59,130,246,.1); color: #2563EB; }
.badge-primary { background: rgba(10,31,68,.1); color: var(--primary); }

/* ── Modal ── */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: flex;
  align-items: center; justify-content: center; padding: 20px; opacity: 0;
  visibility: hidden; transition: all var(--transition);
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal {
  background: #fff; border-radius: 16px; width: 100%; max-width: 600px; max-height: 90vh;
  overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.2);
  transform: translateY(20px); transition: transform var(--transition);
}
.modal-overlay.active .modal { transform: translateY(0); }
.modal-header { padding: 20px 24px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { font-size: 1.1rem; }
.modal-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-light); }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }

/* ── Toast ── */
.toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 14px 20px; border-radius: var(--radius-sm); color: #fff; font-size: .9rem;
  font-weight: 500; min-width: 280px; box-shadow: var(--shadow-lg);
  animation: slideIn .3s ease; display: flex; align-items: center; gap: 10px;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--error); }
.toast-warning { background: var(--warning); }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* ── Accordion ── */
.accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.accordion-item { border-bottom: 1px solid var(--border); }
.accordion-item:last-child { border-bottom: none; }
.accordion-header {
  padding: 14px 20px; background: #fff; cursor: pointer; display: flex;
  align-items: center; justify-content: space-between; font-weight: 600; transition: background var(--transition);
}
.accordion-header:hover { background: var(--bg); }
.accordion-header .arrow { transition: transform var(--transition); }
.accordion-item.open .accordion-header .arrow { transform: rotate(180deg); }
.accordion-body { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.accordion-item.open .accordion-body { max-height: 2000px; }
.accordion-content { padding: 16px 20px; background: var(--bg); }

/* ── Tabs ── */
.tabs { display: flex; border-bottom: 2px solid var(--border); margin-bottom: 20px; overflow-x: auto; }
.tab-btn {
  padding: 10px 20px; border: none; background: none; font-weight: 600; color: var(--text-light);
  cursor: pointer; position: relative; white-space: nowrap; transition: color var(--transition);
}
.tab-btn.active { color: var(--primary); }
.tab-btn.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--accent); }
.tab-panel { display: none; }
.tab-panel.active { display: block; animation: fadeUp .3s ease; }

/* ── Progress Bar ── */
.progress-bar { width: 100%; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden; }
.progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); border-radius: 4px; transition: width .3s; }

/* ── Subject Cards Grid ── */
.subjects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); gap: 16px; }
.subject-card { position: relative; }
.subject-card .card-body { padding: 24px; }
.subject-card .subject-type { font-size: .7rem; text-transform: uppercase; letter-spacing: 1px; }
.subject-card h3 { font-size: 1rem; margin: 8px 0; }
.subject-card .updated-badge {
  position: absolute; top: 12px; right: 12px; background: var(--accent); color: var(--primary);
  padding: 2px 8px; border-radius: 4px; font-size: .7rem; font-weight: 700;
}

/* ── Comment Section ── */
.comment-list { display: flex; flex-direction: column; gap: 12px; }
.comment-item { padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.comment-item.pinned { border-color: var(--accent); background: rgba(245,166,35,.03); }
.comment-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .8rem; }
.comment-meta .name { font-weight: 600; }
.comment-meta .role { font-size: .7rem; }
.comment-meta .time { color: var(--text-light); margin-left: auto; }
.comment-text { font-size: .9rem; line-height: 1.5; }
.comment-actions { display: flex; gap: 8px; margin-top: 8px; }

/* ── Waiting Screen ── */
.waiting-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-dark), var(--primary));
  color: #fff; text-align: center; padding: 40px;
}
.waiting-screen h2 { color: var(--accent); margin-bottom: 16px; }
.waiting-screen p { max-width: 500px; line-height: 1.8; opacity: .9; }
.pulse { animation: pulse 2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .5; } }

/* ── File Upload ── */
.file-upload-area {
  border: 2px dashed var(--border); border-radius: var(--radius); padding: 32px;
  text-align: center; cursor: pointer; transition: all var(--transition);
}
.file-upload-area:hover { border-color: var(--accent); background: rgba(245,166,35,.03); }
.file-upload-area.dragover { border-color: var(--accent); background: rgba(245,166,35,.08); }
.file-upload-area p { color: var(--text-light); font-size: .9rem; }

/* ── Quiz ── */
.quiz-question { padding: 24px; background: #fff; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 16px; }
.quiz-question h4 { margin-bottom: 16px; }
.quiz-option {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border: 2px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; cursor: pointer; transition: all var(--transition);
}
.quiz-option:hover { border-color: #999; background: rgba(0,0,0,.015); }
.quiz-option .radio-dot {
  width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border);
  flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
}
.quiz-option .radio-dot::after {
  content: ''; width: 10px; height: 10px; border-radius: 50%;
  background: transparent; transition: all var(--transition);
}
.quiz-option.selected { border-color: #007AFF; background: rgba(0,122,255,.04); }
.quiz-option.selected .radio-dot { border-color: #007AFF; }
.quiz-option.selected .radio-dot::after { background: #007AFF; }
.quiz-option.correct { border-color: var(--success); background: rgba(52,199,89,.05); }
.quiz-option.correct .radio-dot { border-color: var(--success); }
.quiz-option.correct .radio-dot::after { background: var(--success); }
.quiz-option.wrong { border-color: var(--error); background: rgba(255,59,48,.05); }
.quiz-option.wrong .radio-dot { border-color: var(--error); }
.quiz-option.wrong .radio-dot::after { background: var(--error); }
.quiz-timer { position: sticky; top: var(--header-h); background: #fff; padding: 12px; border-radius: var(--radius-sm); text-align: center; font-size: 1.2rem; font-weight: 700; z-index: 10; border: 1px solid var(--border); }

/* ── Subtopic Buttons ── */
.subtopic-btn {
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); text-decoration: none; color: var(--text);
  font-size: .9rem; font-weight: 500; cursor: pointer;
  transition: all var(--transition); margin-bottom: 8px; width: 100%;
}
.subtopic-btn:hover { border-color: #000; background: rgba(0,0,0,.02); transform: translateX(4px); }
.subtopic-btn .subtopic-icon { color: var(--text-light); font-size: 1.1rem; }
.subtopic-btn .subtopic-arrow { margin-left: auto; color: var(--text-light); transition: transform .2s; }
.subtopic-btn:hover .subtopic-arrow { transform: translateX(3px); }

/* ── Search Bar ── */
.search-bar { position: relative; margin-bottom: 16px; }
.search-bar input {
  width: 100%; padding: 12px 16px 12px 42px; border: 1px solid var(--border);
  border-radius: var(--radius); font-size: .9rem; background: var(--card);
  transition: border-color var(--transition);
}
.search-bar input:focus { outline: none; border-color: #000; }
.search-bar .search-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--text-light); font-size: 1.1rem; pointer-events: none;
}

/* ── Loader ── */
.loader { display: flex; align-items: center; justify-content: center; padding: 40px; }
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .main-content { margin-left: 0; }
  .menu-toggle { display: block; }
  .page-content { padding: 16px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .subjects-grid { grid-template-columns: 1fr; }
  .auth-card { padding: 28px 20px; }
  .modal { max-width: 100%; margin: 10px; }
  .topbar-title { font-size: .95rem; }
  th, td { padding: 8px 10px; font-size: .8rem; }
  .btn { padding: 8px 16px; font-size: .85rem; }
}

@media (max-width: 480px) {
  .stats-grid { grid-template-columns: 1fr; }
  .role-tabs { flex-direction: column; }
  .tabs { gap: 0; }
  .tab-btn { padding: 8px 12px; font-size: .8rem; }
}

/* ── Mobile overlay ── */
.sidebar-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 99;
  opacity: 0; visibility: hidden; transition: all var(--transition);
}
.sidebar-overlay.active { opacity: 1; visibility: visible; }

/* ── Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(10,31,68,.2); border-radius: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); }

/* ── Print ── */
@media print { .sidebar, .topbar, .menu-toggle { display: none !important; } .main-content { margin-left: 0 !important; } }

/* ── Video Player Grid ── */
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
@media (max-width: 640px) { .video-grid { grid-template-columns: 1fr; } }
.video-player-card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; transition: all var(--transition); }
.video-player-card:hover { box-shadow: var(--shadow-lg); }
.video-player-card.expanded { grid-column: 1 / -1; }
.video-player-compact { position: relative; cursor: pointer; background: #000; border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; }
.video-player-compact video, .video-player-compact iframe { width: 100%; aspect-ratio: 16/9; display: block; border: 0; }
.video-player-compact .expand-hint { position: absolute; top: 8px; right: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: .7rem; padding: 3px 8px; border-radius: 4px; opacity: 0; transition: opacity .3s; pointer-events: none; }
.video-player-compact:hover .expand-hint { opacity: 1; }
.video-player-info { padding: 12px 14px; }
.video-player-info h4 { font-size: .9rem; margin: 0 0 4px; color: var(--text); }
.video-player-info .meta { font-size: .75rem; color: var(--text-light); }
.video-player-actions { padding: 0 14px 12px; }

/* ── Upload Progress (Two-Stage) ── */
.upload-stage {
  display: none; margin-top: 12px; padding: 12px; background: var(--bg);
  border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.upload-stage.active { display: block; }
.upload-stage-label {
  font-size: .82rem; font-weight: 600; color: var(--text);
  display: flex; align-items: center; gap: 6px; margin-bottom: 8px;
}
.upload-stage-label i { font-size: 1rem; }
.upload-stage .progress-bar { display: block; margin-top: 4px; }
.upload-stage .progress-pct {
  font-size: .75rem; color: var(--text-light); text-align: right; margin-top: 4px;
}

/* ── Quiz Option Builder ── */
.quiz-option-builder { transition: all var(--transition); }
.quiz-option-builder:hover { border-color: #999 !important; background: rgba(0,0,0,.015); }

/* ── 3-dot Menu ── */
.dot-menu { position: relative; display: inline-block; }
.dot-menu-btn { background: none; border: none; cursor: pointer; padding: 4px 8px; font-size: 1.2rem; color: var(--text-light); border-radius: 6px; transition: all var(--transition); }
.dot-menu-btn:hover { background: var(--bg); color: var(--text); }
.dot-menu-dropdown { position: absolute; right: 0; top: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); min-width: 140px; z-index: 50; display: none; }
.dot-menu.open .dot-menu-dropdown { display: block; animation: fadeUp .2s ease; }
.dot-menu-dropdown button { display: block; width: 100%; padding: 8px 14px; border: none; background: none; text-align: left; font-size: .85rem; cursor: pointer; transition: background var(--transition); }
.dot-menu-dropdown button:hover { background: var(--bg); }
.dot-menu-dropdown button.danger { color: var(--error); }

/* ── Enhanced Auth (Apple-style) ── */
.auth-wrapper { background: #000; }
.auth-wrapper::before { background: rgba(255,255,255,.03); }
.auth-wrapper::after { background: rgba(255,255,255,.02); }
.auth-card { border: 1px solid var(--border); }
.role-tab.active { background: #000; color: #fff; }

/* ── Quote Hero ── */
.quote-hero { background: #000; color: #fff; border-radius: var(--radius); padding: 32px 28px; margin-bottom: 24px; position: relative; overflow: hidden; }
.quote-hero::before { content: '\201C'; position: absolute; top: -10px; left: 16px; font-size: 6rem; color: rgba(255,255,255,.06); font-family: Georgia, serif; line-height: 1; }
.quote-hero .quote-text { font-size: 1.05rem; line-height: 1.7; font-weight: 300; letter-spacing: .01em; position: relative; z-index: 1; }
.quote-hero .quote-text em { font-style: normal; opacity: .5; font-size: .85rem; display: block; margin-top: 12px; }
@media (max-width: 640px) { .quote-hero { padding: 24px 20px; } .quote-hero .quote-text { font-size: .95rem; } }

/* ── Premium cards ── */
.stat-card { transition: all var(--transition); border: 1px solid var(--border); }
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }

/* ── Comment styles ── */
.comment-item { padding: 12px 0; border-bottom: 1px solid var(--border); }
.comment-item.pinned { background: rgba(0,0,0,.02); margin: 0 -14px; padding: 12px 14px; border-radius: 8px; }
.comment-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.comment-meta .name { font-weight: 600; font-size: .9rem; }
.comment-meta .time { font-size: .75rem; color: var(--text-light); }
.comment-text { font-size: .9rem; line-height: 1.5; }
.comment-actions { margin-top: 6px; }

/* ════════════════════════════════════════
   PROFILE PAGES
   ════════════════════════════════════════ */

/* ── Sidebar nav divider ── */
.sidebar-nav-divider { height: 1px; background: rgba(255,255,255,.08); margin: 8px 16px; }

/* ── Topbar profile link ── */
.topbar-profile-link { display: flex; align-items: center; gap: 6px; text-decoration: none; padding: 4px 8px; border-radius: 8px; transition: background var(--transition); }
.topbar-profile-link:hover { background: var(--bg); }

/* ── Profile Page Layout ── */
.profile-page { max-width: 800px; margin: 0 auto; }
.profile-sections { display: flex; flex-direction: column; gap: 20px; }
.profile-section .card-header { display: flex; align-items: center; gap: 8px; }
.profile-section .card-header i { color: var(--text-light); }

/* ── Profile Hero Card ── */
.profile-hero-card { margin-bottom: 24px; }
.profile-hero-card:hover { transform: none; }
.profile-hero-inner { display: flex; align-items: center; gap: 24px; padding: 28px 32px; }

/* ── Profile Avatar ── */
.profile-avatar { position: relative; width: 100px; height: 100px; border-radius: 50%; overflow: visible; flex-shrink: 0; }
.profile-avatar img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid var(--border); }
.avatar-placeholder { width: 100px; height: 100px; border-radius: 50%; background: var(--bg); border: 3px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--text-light); }
.avatar-upload-btn {
  position: absolute; bottom: 0; right: 0; width: 32px; height: 32px;
  background: var(--primary); color: #fff; border-radius: 50%; display: flex;
  align-items: center; justify-content: center; cursor: pointer; font-size: .9rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: all var(--transition); z-index: 2;
}
.avatar-upload-btn:hover { transform: scale(1.1); background: var(--primary-light); }
.view-only .avatar-upload-btn { display: none; }

/* ── Profile Name ── */
.profile-name-section h1 { font-size: 1.5rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.prefix-text { color: var(--text-light); font-weight: 400; }
.profile-meta { color: var(--text-light); font-size: .9rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.profile-name-display { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }

/* ── Name Editor ── */
.name-editor-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.name-editor-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ── Tags Input ── */
.tags-input-wrapper { border: 2px solid var(--border); border-radius: var(--radius-sm); padding: 8px 12px; background: #fff; transition: border-color var(--transition); cursor: text; }
.tags-input-wrapper:focus-within { border-color: var(--primary); }
.tags-container { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.tags-container:empty { margin-bottom: 0; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px;
  background: #000; color: #fff; border-radius: 20px; font-size: .8rem; font-weight: 500;
  animation: fadeUp .2s ease;
}
.tag-chip.view-tag { background: var(--bg); color: var(--text); border: 1px solid var(--border); }
.tag-remove { background: none; border: none; color: rgba(255,255,255,.7); cursor: pointer; font-size: 1rem; padding: 0 2px; line-height: 1; }
.tag-chip.view-tag .tag-remove { display: none; }
.tags-input { border: none; outline: none; font-size: .9rem; min-width: 160px; padding: 4px 0; background: transparent; color: var(--text); }
.tags-display { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Publications ── */
.publication-card { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; transition: all var(--transition); }
.publication-card:hover { border-color: #999; }
.publication-card:last-child { margin-bottom: 0; }
.pub-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.pub-header h4 { font-size: .95rem; margin-bottom: 6px; }
.pub-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pub-year { font-size: .8rem; color: var(--text-light); font-weight: 500; }
.pub-desc { font-size: .85rem; color: var(--text-light); margin-top: 8px; line-height: 1.5; }
.pub-pdf-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; font-size: .85rem; color: var(--info); font-weight: 500; padding: 4px 12px; background: rgba(0,122,255,.06); border-radius: 6px; transition: all var(--transition); }
.pub-pdf-link:hover { background: rgba(0,122,255,.12); color: var(--info); }

/* ── Subjects Taught Grid ── */
.subjects-taught-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.subject-taught-chip { padding: 12px 16px; background: var(--bg); border-radius: var(--radius-sm); border: 1px solid var(--border); }
.stc-name { font-weight: 600; font-size: .9rem; margin-bottom: 2px; }
.stc-meta { font-size: .75rem; color: var(--text-light); }

/* ── Internships ── */
.internship-card { padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 12px; transition: all var(--transition); }
.internship-card:hover { border-color: #999; }
.internship-card:last-child { margin-bottom: 0; }
.intern-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.intern-header h4 { font-size: .95rem; margin-bottom: 4px; }
.intern-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.intern-duration { font-size: .8rem; color: var(--text-light); display: flex; align-items: center; gap: 4px; }
.intern-desc { font-size: .85rem; color: var(--text-light); margin-top: 8px; line-height: 1.5; }

/* ── Achievements List ── */
.achievements-list { display: flex; flex-direction: column; gap: 12px; }
.achievement-item { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: var(--radius-sm); transition: background var(--transition); }
.achievement-item:hover { background: var(--bg); }
.ach-icon { width: 40px; height: 40px; border-radius: 10px; background: rgba(245,166,35,.1); color: #D97706; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }

/* ── Empty States ── */
.empty-state { text-align: center; padding: 32px 20px; color: var(--text-light); font-size: .9rem; }
.empty-state i { font-size: 2rem; margin-bottom: 8px; display: block; opacity: .4; }

/* ════════════════════════════════════════
   MESSAGING SYSTEM
   ════════════════════════════════════════ */

.messaging-layout { display: flex; height: calc(100vh - var(--header-h)); margin: -24px; background: var(--bg); }

/* ── Sidebar ── */
.msg-sidebar { width: 340px; background: #fff; border-right: 1px solid var(--border); display: flex; flex-direction: column; flex-shrink: 0; }
.msg-sidebar-header { padding: 20px; border-bottom: 1px solid var(--border); }
.msg-sidebar-header h3 { font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.msg-search { padding: 12px 16px; border-bottom: 1px solid var(--border); position: relative; }
.msg-conversations { flex: 1; overflow-y: auto; }

/* ── Conversation Items ── */
.msg-convo-item { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; transition: all var(--transition); border-bottom: 1px solid rgba(0,0,0,.04); }
.msg-convo-item:hover { background: var(--bg); }
.msg-convo-item.active { background: rgba(0,0,0,.04); border-left: 3px solid var(--primary); }
.msg-convo-item.has-unread { background: rgba(0,122,255,.03); }
.msg-convo-avatar { width: 44px; height: 44px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.msg-convo-avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-mini { width: 44px; height: 44px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: .9rem; }
.msg-convo-info { flex: 1; min-width: 0; }
.msg-convo-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.msg-convo-top strong { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.msg-convo-time { font-size: .7rem; color: var(--text-light); white-space: nowrap; }
.msg-convo-bottom { display: flex; justify-content: space-between; align-items: center; }
.msg-convo-preview { font-size: .8rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
.msg-unread-badge { min-width: 20px; height: 20px; border-radius: 10px; background: var(--primary); color: #fff; font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.msg-no-convos { padding: 40px 20px; text-align: center; color: var(--text-light); }

/* ── Search Results ── */
.search-results { position: absolute; left: 16px; right: 16px; top: 100%; background: #fff; border: 1px solid var(--border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-lg); z-index: 10; max-height: 300px; overflow-y: auto; }
.search-result-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; transition: background var(--transition); }
.search-result-item:hover { background: var(--bg); }

/* ── Chat Area ── */
.msg-chat { flex: 1; display: flex; flex-direction: column; background: #fff; min-width: 0; }
.msg-empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--text-light); }
.msg-empty-icon { width: 80px; height: 80px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 16px; }
.msg-empty-state h3 { color: var(--text); margin-bottom: 4px; }
.msg-empty-state p { font-size: .9rem; }

/* ── Chat Header ── */
.msg-chat-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: #fff; }
.msg-chat-user { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.msg-chat-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.msg-chat-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-chat-avatar .avatar-mini { width: 40px; height: 40px; font-size: .8rem; }
.msg-back-btn { display: none; }

/* ── Messages List ── */
.msg-messages { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 4px; background: #f8f9fa; }
.msg-no-messages { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--text-light); font-size: .9rem; padding: 40px; }

/* ── Date Divider ── */
.msg-date-divider { text-align: center; margin: 12px 0; }
.msg-date-divider span { background: rgba(0,0,0,.06); padding: 4px 14px; border-radius: 12px; font-size: .72rem; color: var(--text-light); font-weight: 500; }

/* ── Message Bubbles ── */
.msg-bubble { max-width: 70%; padding: 10px 14px; border-radius: 16px; font-size: .9rem; line-height: 1.5; position: relative; animation: fadeUp .2s ease; word-break: break-word; }
.msg-bubble.sent { align-self: flex-end; background: #000; color: #fff; border-bottom-right-radius: 4px; }
.msg-bubble.received { align-self: flex-start; background: #fff; color: var(--text); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.msg-text { margin-bottom: 4px; white-space: pre-wrap; }
.msg-time { font-size: .65rem; opacity: .6; text-align: right; display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.msg-bubble.sent .msg-time { color: rgba(255,255,255,.6); }

/* ── File Messages ── */
.msg-file { margin-bottom: 4px; }
.msg-file-link { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: rgba(255,255,255,.1); border-radius: 8px; font-size: .82rem; text-decoration: none; transition: background var(--transition); }
.msg-bubble.sent .msg-file-link { color: #fff; }
.msg-bubble.sent .msg-file-link:hover { background: rgba(255,255,255,.2); }
.msg-bubble.received .msg-file-link { color: var(--text); background: var(--bg); }
.msg-bubble.received .msg-file-link:hover { background: rgba(0,0,0,.06); }
.msg-file-link span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Input Area ── */
.msg-input-area { padding: 12px 20px; border-top: 1px solid var(--border); background: #fff; }
.msg-attachment-preview { display: flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--bg); border-radius: 8px; font-size: .82rem; margin-bottom: 8px; }
.msg-attachment-preview span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-input-row { display: flex; align-items: flex-end; gap: 8px; }
.msg-attach-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-light); font-size: 1.2rem; border-radius: 50%; transition: all var(--transition); flex-shrink: 0; }
.msg-attach-btn:hover { background: var(--bg); color: var(--text); }
#msgTextInput { flex: 1; border: 2px solid var(--border); border-radius: 20px; padding: 10px 16px; font-size: .9rem; resize: none; max-height: 120px; transition: border-color var(--transition); }
#msgTextInput:focus { outline: none; border-color: var(--primary); }
.msg-send-btn { width: 40px; height: 40px; border-radius: 50%; background: var(--primary); color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; transition: all var(--transition); flex-shrink: 0; }
.msg-send-btn:hover { transform: scale(1.05); }
.msg-send-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ── Messaging Responsive ── */
@media (max-width: 768px) {
  .messaging-layout { flex-direction: column; }
  .msg-sidebar { width: 100%; height: 100%; position: absolute; z-index: 5; }
  .msg-sidebar.mobile-hidden { display: none; }
  .msg-chat { display: none; }
  .msg-chat.mobile-visible { display: flex; }
  .msg-back-btn { display: flex; }
  .msg-bubble { max-width: 85%; }
  .profile-hero-inner { flex-direction: column; text-align: center; padding: 24px 20px; }
  .profile-name-display { justify-content: center; }
  .profile-name-section h1 { justify-content: center; }
  .profile-meta { justify-content: center; }
  .name-editor-row { flex-direction: column; }
}

@media (max-width: 480px) {
  .subjects-taught-grid { grid-template-columns: 1fr; }
  .msg-convo-top strong { max-width: 120px; }
}

/* ════════════════════════════════════════
   GRIEVANCE CELL
   ════════════════════════════════════════ */
.grievance-form-card { max-width: 720px; }
.grv-recipients-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 8px; }
.grv-recipient-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 2px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); }
.grv-recipient-item:has(input:checked) { border-color: var(--primary); background: rgba(0,0,0,.02); }
.grv-recipient-item input { margin-right: 4px; accent-color: var(--primary); width: 18px; height: 18px; }
.grv-recipient-info { display: flex; align-items: center; gap: 10px; }
.grv-recipient-info strong { font-size: .88rem; display: block; }
.grv-recipient-info small { font-size: .75rem; color: var(--text-light); display: block; }
.grv-recipient-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.grv-recipients-controls { display: flex; gap: 8px; }
.grv-identity-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grv-identity-option { cursor: pointer; }
.grv-identity-option input { display: none; }
.grv-identity-card { padding: 16px; border: 2px solid var(--border); border-radius: var(--radius-sm); display: flex; align-items: center; gap: 12px; transition: all var(--transition); }
.grv-identity-option input:checked + .grv-identity-card { border-color: var(--primary); background: rgba(0,0,0,.02); }
.grv-identity-card i { font-size: 1.4rem; flex-shrink: 0; }
.grv-identity-card strong { font-size: .88rem; display: block; margin-bottom: 2px; }
.grv-identity-card p { font-size: .78rem; color: var(--text-light); margin: 0; }
.grv-confirm-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto; }
.grv-confirm-icon.grv-anon { background: rgba(0,0,0,.06); color: var(--text); }
.grv-confirm-icon.grv-ident { background: rgba(0,122,255,.08); color: var(--info); }

/* Grievance Inbox */
.grv-inbox-item { display: flex; align-items: flex-start; padding: 16px 20px; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 8px; cursor: pointer; transition: all var(--transition); }
.grv-inbox-item:hover { border-color: #999; box-shadow: var(--shadow); }
.grv-inbox-item.unread { background: rgba(0,122,255,.03); border-left: 3px solid var(--info); }
.grv-inbox-left { display: flex; gap: 14px; flex: 1; min-width: 0; }
.grv-inbox-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--bg); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1rem; color: var(--text-light); }
.grv-inbox-avatar.anonymous { background: #000; color: #fff; border-color: #000; }
.grv-inbox-content { flex: 1; min-width: 0; }
.grv-inbox-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.grv-inbox-sender { font-size: .9rem; }
.grv-inbox-time { font-size: .72rem; color: var(--text-light); }
.grv-inbox-subject { font-size: .88rem; font-weight: 600; margin-bottom: 4px; }
.grv-inbox-preview { font-size: .8rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 6px; }
.grv-inbox-badges { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.grv-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--info); }
.grv-detail-sender { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); margin-bottom: 16px; }
.grv-detail-message { font-size: .95rem; line-height: 1.7; color: var(--text); white-space: pre-wrap; }

/* SSE Status */
.msg-sse-status { display: flex; align-items: center; }
.sse-dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc; transition: background .3s; }
.sse-dot.connected { background: var(--success); box-shadow: 0 0 6px rgba(52,199,89,.4); }

@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .grv-identity-options { grid-template-columns: 1fr; }
  .grv-recipients-list { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════
   TIMETABLE
   ════════════════════════════════════════ */
.timetable-table td { vertical-align: top; }
.tt-entries { display: flex; flex-wrap: wrap; gap: 8px; }
.tt-entry {
  display: flex; align-items: center; gap: 10px; padding: 8px 14px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: all var(--transition); font-size: .88rem;
}
.tt-entry:hover { border-color: #999; box-shadow: var(--shadow); }
.tt-entry-time { color: var(--text-light); font-size: .8rem; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.tt-entry-subject { font-weight: 600; flex: 1; }

/* ════════════════════════════════════════
   TO-DO LIST
   ════════════════════════════════════════ */
.todo-item {
  display: flex; align-items: center; gap: 12px; padding: 14px 20px;
  border-bottom: 1px solid var(--border); transition: all var(--transition);
}
.todo-item:last-child { border-bottom: none; }
.todo-item:hover { background: rgba(0,0,0,.015); }
.todo-item.completed .todo-text { text-decoration: line-through; color: var(--text-light); }
.todo-item.important { background: rgba(255,193,7,.04); }
.todo-item.important .todo-star { color: #F59E0B; }
.todo-check { background: none; border: none; cursor: pointer; font-size: 1.3rem; color: var(--text-light); padding: 0; flex-shrink: 0; transition: color var(--transition); }
.todo-check:hover { color: var(--success); }
.todo-item.completed .todo-check { color: var(--success); }
.todo-text { flex: 1; font-size: .9rem; line-height: 1.4; }
.todo-actions { display: flex; gap: 6px; flex-shrink: 0; }
.todo-star { background: none; border: none; cursor: pointer; font-size: 1.1rem; color: var(--text-light); padding: 4px; transition: color var(--transition); }
.todo-star:hover { color: #F59E0B; }
.todo-delete { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--text-light); padding: 4px; transition: color var(--transition); }
.todo-delete:hover { color: var(--error); }

/* ════════════════════════════════════════
   CLOUD STORAGE
   ════════════════════════════════════════ */
.cloud-file-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 20px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px; transition: all var(--transition);
}
.cloud-file-item:hover { border-color: #999; box-shadow: var(--shadow); }
.cloud-file-icon {
  width: 44px; height: 44px; border-radius: 10px; background: var(--bg);
  display: flex; align-items: center; justify-content: center; font-size: 1.3rem;
  color: var(--text-light); flex-shrink: 0;
}
.cloud-file-info { flex: 1; min-width: 0; }
.cloud-file-info strong { font-size: .9rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cloud-file-info span { font-size: .78rem; color: var(--text-light); }
.cloud-file-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ════════════════════════════════════════
   IMAGE LIGHTBOX (Quiz Images)
   ════════════════════════════════════════ */
.quiz-img-thumb {
  max-width: 200px; max-height: 150px; border-radius: 8px; cursor: pointer;
  transition: transform var(--transition); border: 1px solid var(--border);
  object-fit: contain;
}
.quiz-img-thumb:hover { transform: scale(1.03); box-shadow: var(--shadow); }
.lightbox-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 40px;
  opacity: 0; visibility: hidden; transition: all .3s ease;
}
.lightbox-overlay.active { opacity: 1; visibility: visible; }
.lightbox-overlay img {
  max-width: 80vw; max-height: 80vh; border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.5);
  object-fit: contain;
}
.lightbox-close {
  position: absolute; top: 24px; right: 32px; background: rgba(255,255,255,.15);
  border: none; color: #fff; font-size: 2rem; width: 48px; height: 48px;
  border-radius: 50%; cursor: pointer; display: flex; align-items: center;
  justify-content: center; transition: background .3s;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }

@media (max-width: 768px) {
  .tt-entries { flex-direction: column; }
  .cloud-file-item { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cloud-file-actions { width: 100%; justify-content: flex-end; }
  .lightbox-overlay { padding: 20px; }
  .lightbox-overlay img { max-width: 95vw; max-height: 85vh; }
}

/* ════════════════════════════════════════
   TASK WORKFLOW (HOD Allotted Tasks)
   ════════════════════════════════════════ */

/* Orange glow animation for nav link */
@keyframes glowOrange {
  0%, 100% { background: rgba(249,115,22,.08); }
  50% { background: rgba(249,115,22,.2); }
}

/* Allotted Task Cards */
.allotted-task-card:hover { transform: none; }
.allotted-task-card .card-header { background: var(--bg); }

/* Workflow Timeline */
.wf-timeline { position: relative; padding-left: 24px; }
.wf-timeline-step { position: relative; padding-bottom: 16px; padding-left: 20px; }
.wf-timeline-step:last-child { padding-bottom: 0; }
.wf-timeline-step::before {
  content: ''; position: absolute; left: -24px; top: 8px; bottom: -8px;
  width: 2px; background: var(--border);
}
.wf-timeline-step:last-child::before { display: none; }
.wf-timeline-dot {
  position: absolute; left: -30px; top: 4px; width: 14px; height: 14px;
  border-radius: 50%; border: 2px solid var(--border); background: #fff; z-index: 1;
}
.wf-timeline-step.accepted .wf-timeline-dot { background: #16a34a; border-color: #16a34a; }
.wf-timeline-step.declined .wf-timeline-dot { background: #dc2626; border-color: #dc2626; }
.wf-timeline-step.active .wf-timeline-dot {
  background: #f59e0b; border-color: #f59e0b;
  animation: dotPulse 2s infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,.4); }
  50% { box-shadow: 0 0 0 6px rgba(245,158,11,0); }
}

/* Task Request Cards (Educator) */
.task-request-card { border-left: 4px solid var(--primary); }
.task-request-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.08); }

@media (max-width: 768px) {
  .wf-timeline { padding-left: 16px; }
  .wf-timeline-step { padding-left: 14px; }
  .wf-timeline-dot { left: -22px; width: 12px; height: 12px; }
  .wf-timeline-step::before { left: -17px; }
}


/* ════════════════════════════════════════════════════════════
   BLACK & WHITE GLASSMORPHISM THEME LAYER
   Centralized override — applies app-wide (mobile-first, responsive).
   Uses only black / white / grayscale + transparency + blur.
   Placed last so it cleanly layers over base component styles.
   ════════════════════════════════════════════════════════════ */
:root {
  /* Grayscale glass tokens */
  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-border-dark: rgba(0, 0, 0, 0.08);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  --glass-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.08);
  --glass-blur: 16px;
  --glass-blur-sm: 10px;
}

/* Soft grayscale backdrop so the frosted panels read as glass */
body {
  background:
    radial-gradient(circle at 15% 15%, rgba(0,0,0,0.06), transparent 42%),
    radial-gradient(circle at 85% 80%, rgba(0,0,0,0.05), transparent 45%),
    linear-gradient(135deg, #ececf1 0%, #f6f6f8 55%, #e9e9ee 100%);
  background-attachment: fixed;
}

/* ── Cards as frosted glass ── */
.card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.card:hover { box-shadow: 0 12px 40px rgba(0,0,0,0.16); }
.card-header { border-bottom: 1px solid var(--glass-border-dark); }

/* ── Topbar glass ── */
.topbar {
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-bottom: 1px solid var(--glass-border-dark);
}

/* ── Sidebar: smoked glass (dark) ── */
.sidebar {
  background: rgba(10, 10, 12, 0.82);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Modals glass ── */
.modal {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border: 1px solid var(--glass-border);
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
}
.modal-overlay { background: rgba(0, 0, 0, 0.45); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal-header, .modal-footer { border-color: var(--glass-border-dark); }

/* ── Accordion (Content Management) glass polish ── */
.accordion-item {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  box-shadow: var(--glass-shadow-sm);
  margin-bottom: 12px;
  overflow: hidden;
}
.accordion-header {
  padding: 16px 20px;
  cursor: pointer;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.35);
}
.accordion-content { background: rgba(255, 255, 255, 0.25); }

/* ── Forms on glass ── */
.form-control {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
}
.form-control:focus {
  border-color: #000;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
  background: rgba(255, 255, 255, 0.9);
}

/* ── Consistent, accessible buttons (grayscale) ── */
.btn {
  min-height: 44px;               /* accessible tap target */
  padding: 11px 22px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: .1px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.btn:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.btn-sm { min-height: 34px; padding: 7px 14px; }
.btn-icon { min-height: 0; }
.btn-primary, .btn-accent { background: #0a0a0c; color: #fff; box-shadow: var(--glass-shadow-sm); }
.btn-primary:hover, .btn-accent:hover { background: #26262b; color: #fff; transform: translateY(-1px); }
.btn-outline {
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1.5px solid rgba(0, 0, 0, 0.55); color: #0a0a0c;
}
.btn-outline:hover { background: #0a0a0c; color: #fff; }
/* Keep semantic danger/success readable but within a restrained palette */
.btn-danger { background: #1a1a1a; color: #fff; border: 1px solid rgba(255,255,255,.15); }
.btn-danger:hover { background: #000; color: #fff; }
.btn-success { background: #2b2b2b; color: #fff; }
.btn-success:hover { background: #0a0a0c; color: #fff; }

/* ── Tables on glass ── */
.table-wrap {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}
th { background: rgba(0, 0, 0, 0.04); font-weight: 700; }
th, td { border-bottom: 1px solid var(--glass-border-dark); }
tr:hover td { background: rgba(0, 0, 0, 0.03); }

/* ── Badges: grayscale glass ── */
.badge { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.badge-primary { background: rgba(0,0,0,0.08); color: #0a0a0c; }
.badge-success { background: rgba(0,0,0,0.75); color: #fff; }
.badge-warning { background: rgba(0,0,0,0.14); color: #0a0a0c; }
.badge-danger  { background: rgba(0,0,0,0.85); color: #fff; }
.badge-info    { background: rgba(0,0,0,0.10); color: #0a0a0c; }

/* ── Stat cards ── */
.stat-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow-sm);
}

/* ── Quiz options as glass (attempt + results) ── */
.quiz-question {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--glass-shadow-sm);
  padding: 18px; margin-bottom: 14px;
}
.quiz-option {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-top: 8px; border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.55);
  cursor: pointer; transition: all .15s ease;
}
.quiz-option:hover { border-color: rgba(0,0,0,0.45); }
.quiz-option.selected { border-color: #000; background: rgba(0,0,0,0.06); }
.quiz-option.correct { border-color: #000; background: rgba(0,0,0,0.08); }
.quiz-option.wrong { border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.03); text-decoration: line-through; opacity: .75; }

/* ── Reduced motion & performance ── */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* Graceful fallback: if the browser lacks backdrop-filter, use solid
   grayscale surfaces so contrast/readability never breaks. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card, .modal, .topbar, .table-wrap, .accordion-item, .stat-card, .quiz-question { background: #ffffff; }
  .sidebar { background: #0a0a0c; }
  .form-control { background: #fff; }
}

/* ── Mobile-first refinements ── */
@media (max-width: 768px) {
  :root { --glass-blur: 12px; }   /* lighter blur = smoother on mobile GPUs */
  .btn { width: auto; }
  .accordion-header { padding: 14px 16px; }
}


/* ════════════════════════════════════════════════════════════
   CONTENT MANAGER — glass polish + previously-missing styles
   ════════════════════════════════════════════════════════════ */
/* Breadcrumb (cm-breadcrumb / cm-sep had NO styling before) */
.cm-breadcrumb {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  padding: 10px 14px; margin-bottom: 16px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: .85rem;
}
.cm-breadcrumb a { color: #0a0a0c; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.cm-breadcrumb a:hover { text-decoration: underline; }
.cm-breadcrumb .cm-sep { color: var(--text-light); opacity: .6; }
.cm-breadcrumb > span:last-child { color: var(--text-light); }

/* Tabs on glass */
.tabs { border-bottom: 1px solid var(--glass-border-dark); gap: 4px; }
.tab-btn { border-radius: 10px 10px 0 0; }
.tab-btn.active { color: #0a0a0c; }
.tab-btn.active::after { background: #0a0a0c; height: 3px; }
.tab-btn:focus-visible { outline: 2px solid #000; outline-offset: -2px; }

/* File-drop area on glass (was accent-orange tinted) */
.file-upload-area {
  background: rgba(255,255,255,0.4);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 2px dashed rgba(0,0,0,0.25);
}
.file-upload-area:hover { border-color: #0a0a0c; background: rgba(255,255,255,0.6); }
.file-upload-area.dragover { border-color: #0a0a0c; background: rgba(0,0,0,0.05); }

/* Subtopic rows + search bar on glass */
.subtopic-btn {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border);
}
.search-bar input {
  background: rgba(255,255,255,0.6);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid rgba(0,0,0,0.12);
}
.search-bar input:focus { border-color: #0a0a0c; box-shadow: 0 0 0 3px rgba(0,0,0,0.1); }

/* Video cards on glass */
.video-player-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  backdrop-filter: blur(var(--glass-blur-sm));
  border: 1px solid var(--glass-border);
}

/* ═══════════════════════════════════════════════════════════════
   Floating "Generate with AI" Button (Gemini-style)
   Additive — does not affect .btn, "+ Add Question", or "Save Quiz".
   ═══════════════════════════════════════════════════════════════ */
/* Shared visual for BOTH the inline and floating "Generate with AI" buttons.
   Design: a THIN gradient border line that rotates in a loop around the button,
   a soft gradient glow/shadow, a BLACK inner fill, and attractive (non-neon)
   gradient text that shifts colour slowly. */
.ai-gen-btn {
  position: relative;
  border: none;
  cursor: pointer;
  padding: 1.73px;              /* border line thickness (1.15x of prior 1.5px) */
  border-radius: 999px;         /* pill shape — matches the floating button */
  background: #000;             /* fallback under the rotating ring */
  overflow: hidden;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
  transition: transform .25s ease, box-shadow .25s ease;
  /* Soft gradient glow around the button. */
  box-shadow: 0 4px 18px rgba(120, 115, 245, .28),
              0 2px 10px rgba(236, 118, 173, .20);
}

/* Gradient border line — stays in place (no rotation) while its colours cycle
   slowly. background-size 300% + animated background-position shifts the colours
   through the line without moving/rotating it. */
.ai-gen-btn::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    120deg,
    #7b8cff, #c774e8, #ec76ad, #ffb066, #6ad5cb, #7b8cff
  );
  background-size: 300% 300%;
  animation: aiBorderColor 5s ease infinite;
}

/* Black pill interior. */
.ai-gen-btn__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 12px 22px;
  border-radius: 999px;
  background: #000;
  font-weight: 700;
  font-size: .95rem;
}

/* Animated gradient text — tech blue → white → orange, with a bright white
   band that sweeps left→right for a shiny sheen. Legible on black throughout. */
.ai-gen-btn__text {
  background: linear-gradient(90deg, #1E90FF, #FFFFFF, #E8791A, #FFFFFF, #1E90FF);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: aiTextShine 6s linear infinite;
}
@keyframes aiTextShine {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* Hover: gentle lift + slightly stronger glow. */
.ai-gen-btn:hover {
  transform: scale(1.03);
  box-shadow: 0 8px 26px rgba(120, 115, 245, .40),
              0 4px 14px rgba(236, 118, 173, .30);
}
.ai-gen-btn:active { transform: scale(.98); }

/* Floating modifier: same visual, pinned bottom-right as a FAB. */
.ai-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 900;
  border-radius: 999px;
}
.ai-fab .ai-gen-btn__inner { border-radius: 999px; }

@keyframes aiBorderColor {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Respect reduced-motion — freeze the colour cycles (border + text). */
@media (prefers-reduced-motion: reduce) {
  .ai-gen-btn::before,
  .ai-gen-btn__text { animation: none; }
}



/* Responsive: keep the floating button tidy on small screens. */
@media (max-width: 640px) {
  .ai-fab { bottom: 18px; right: 16px; }
  .ai-fab .ai-gen-btn__inner { padding: 11px 16px; font-size: .85rem; }
}

/* ═══════════════════════════════════════════════════════════════
   "Generate with AI" — Modal Loading State
   Gradient orb loader + rotating status phrases. Matches the button's
   warm, muted gradient theme. Additive; shown only during generation.
   ═══════════════════════════════════════════════════════════════ */
.ai-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 44px 28px 40px;
  gap: 18px;
}
/* The [hidden] attribute must win over the display:flex above, otherwise the
   loader shows before the user clicks Generate. Same guard for the modal body
   and footer, whose display rules would otherwise keep the Generate button
   visible during loading. */
.ai-loading-state[hidden] { display: none !important; }
#aiModalBody[hidden],
#aiModalFooter[hidden] { display: none !important; }

/* Simple blue circular spinner. */
.ai-loader-ring {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 5px solid rgba(30, 144, 255, .18);
  border-top-color: #1E90FF;
  animation: aiRingSpin .9s linear infinite;
}

.ai-loader-stop {
  margin-top: 6px;
}

/* Rotating status phrase — fades in/out smoothly between swaps. */
.ai-loader-phrase {
  font-weight: 700;
  font-size: 1rem;
  min-height: 1.4em;
  color: #1E90FF;
  transition: opacity .4s ease;
}
.ai-loader-phrase.is-fading { opacity: 0; }

.ai-loader-note {
  font-size: .8rem;
  color: var(--text-light);
}

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

/* Reduced-motion: keep the loader visible but calm (no spin). */
@media (prefers-reduced-motion: reduce) {
  .ai-loader-ring, .ai-loader-phrase { animation: none; }
}

/* While generating, prevent closing the modal by clicking the backdrop.
   (The ✕ is hidden via JS.) The inner .modal keeps pointer events so the
   loader stays interactive/visible. */
.modal-overlay.ai-locked { pointer-events: none; }
.modal-overlay.ai-locked .modal { pointer-events: auto; }