/* Scrollbar */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:#111827; }
::-webkit-scrollbar-thumb { background:#2a3a5c; border-radius:3px; }

html, body { height:100%; margin:0; background:#0a0f1e; }
#app { min-height:100vh; display:flex; flex-direction:column; }
#app-main { flex:1; }
footer { margin-top:auto; }

/* Viewer overlay */
.viewer-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:1500; align-items:center; justify-content:center; }
.viewer-overlay.active { display:flex; }
.viewer-container { background:#111827; width:100%; height:100vh; display:flex; flex-direction:column; overflow:hidden; }

/* Modal */
.modal { display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); backdrop-filter:blur(4px); z-index:1000; align-items:center; justify-content:center; padding:16px; }
.modal.active { display:flex; }
.modal-content { background:#111827; border-radius:12px; width:100%; max-width:560px; max-height:90vh; overflow-y:auto; box-shadow:0 4px 24px rgba(0,0,0,.3); border:1px solid #2a3a5c; }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #2a3a5c; }
.modal-header h2 { font-size:1rem; font-weight:600; display:flex; align-items:center; gap:8px; color:#e8edf5; }
.modal-close { background:none; border:none; color:#94a3b8; cursor:pointer; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:1rem; transition:all .2s; }
.modal-close:hover { background:#1a2236; color:#e8edf5; }
.modal-body { padding:20px; }

/* Auth Modal */
.auth-step { text-align:center; }
.auth-avatar { width:64px; height:64px; border-radius:50%; border:3px solid #22c55e; margin:0 auto 12px; display:block; object-fit:cover; }
.auth-title { font-size:1.1rem; font-weight:600; margin-bottom:8px; color:#e8edf5; }
.auth-subtitle { font-size:0.85rem; color:#94a3b8; margin-bottom:4px; }
.auth-hint { font-size:0.75rem; color:#94a3b8; margin-top:8px; text-align:center; }
.auth-divider { height:1px; background:#2a3a5c; margin:16px 0; }
.auth-input { width:100%; padding:10px 14px; border-radius:8px; border:1px solid #2a3a5c; background:#0a0f1e; color:#e8edf5; font-size:0.9rem; outline:none; text-align:center; transition:border-color .2s; }
.auth-input:focus { border-color:#22c55e; }
.auth-github-icon { font-size:2.5rem; color:#e8edf5; }
.auth-github-section { padding:20px 0 16px; text-align:center; }
.auth-github-section h3 { font-size:1.1rem; margin:12px 0 6px; color:#e8edf5; }
.auth-github-section p { font-size:0.85rem; color:#94a3b8; }

/* Auth Buttons */
.auth-btn-primary { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 20px; border-radius:12px; background:linear-gradient(135deg,#22c55e,#16a34a); color:#fff; border:none; box-shadow:0 0 16px rgba(34,197,94,0.3); cursor:pointer; font-size:0.85rem; font-weight:600; transition:all .2s; }
.auth-btn-primary:hover { box-shadow:0 0 24px rgba(34,197,94,0.4); transform:translateY(-1px); }
.auth-btn-secondary { width:100%; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:8px 16px; border-radius:12px; background:#1a2236; color:#e8edf5; border:1px solid #2a3a5c; cursor:pointer; font-size:0.8rem; font-weight:600; transition:all .2s; margin-top:8px; }
.auth-btn-secondary:hover { background:#2a3a5c; }
.auth-success-avatar { width:64px; height:64px; border-radius:50%; border:3px solid #22c55e; margin:0 auto 12px; display:block; }
.auth-success-title { font-size:1.1rem; font-weight:600; margin-bottom:6px; color:#e8edf5; }
.auth-success-text { font-size:0.85rem; color:#94a3b8; margin-bottom:4px; }
.auth-connected-title { font-size:1rem; font-weight:600; margin-bottom:8px; color:#e8edf5; display:flex; align-items:center; justify-content:center; gap:8px; }

/* Toast */
.toast { position:fixed; bottom:20px; right:20px; padding:12px 20px; border-radius:12px; color:#fff; font-weight:600; font-size:0.85rem; z-index:2000; transform:translateY(100px); opacity:0; transition:all .3s; }
.toast.show { transform:translateY(0); opacity:1; }
.toast.success { background:#22c55e; }
.toast.error { background:#ef4444; }
.toast.info { background:#22c55e; }

/* SPA view animation */
.view-enter { animation: fadeIn 0.2s ease-out; }
@keyframes fadeIn { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }

/* Viewer fallback */
.viewer-fallback { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; text-align:center; color:#94a3b8; padding:40px; }

/* PDF toolbar */
.pdf-btn { background:none; border:1px solid transparent; color:inherit; cursor:pointer; width:30px; height:30px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; transition:all .15s; }
.pdf-btn:hover { background:rgba(128,128,128,0.15); border-color:rgba(128,128,128,0.3); }
.pdf-btn:active { transform:scale(0.92); }

/* Image viewer */
.image-viewer-container { display:flex; flex-direction:column; height:100%; }
.image-toolbar { display:flex; align-items:center; gap:6px; padding:8px 12px; background:#1a2236; border-bottom:1px solid #2a3a5c; flex-wrap:wrap; }
.image-scroll-area { flex:1; overflow:hidden; display:flex; justify-content:center; align-items:center; padding:12px; background:#0a0f1e; touch-action:none; }
.image-scroll-area img { max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; transition:transform .15s ease-out; user-select:none; -webkit-user-drag:none; }

/* Doc viewer */
.doc-viewer-container { display:flex; flex-direction:column; height:100%; }
.doc-toolbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 12px; background:#1a2236; border-bottom:1px solid #2a3a5c; font-size:.8rem; }

/* ========== TIMETABLE ========== */
.timetable-wrapper { overflow-x:auto; border-radius:8px; border:1px solid #2a3a5c; }
.timetable { width:100%; border-collapse:collapse; font-size:.78rem; table-layout:fixed; }
.timetable th, .timetable td { border:1px solid #2a3a5c; padding:8px 10px; text-align:center; vertical-align:middle; min-width:120px; }
.timetable th { background:#1a2236; color:#94a3b8; font-weight:700; font-size:.75rem; text-transform:uppercase; padding:10px 8px; position:sticky; top:0; z-index:1; letter-spacing:.02em; }
.timetable .time-col { min-width:90px; font-weight:700; color:#22c55e; font-size:.72rem; white-space:nowrap; background:#111827; letter-spacing:.01em; }
.timetable .empty-slot { background:#0a0f1e; min-height:48px; }
.timetable .has-class { background:rgba(34,197,94,.05); padding:4px; vertical-align:top; }

/* Class entries inside timetable cells */
.class-entry { background:#1a2236; border:1px solid #2a3a5c; border-left:3px solid #22c55e; border-radius:6px; padding:8px 10px; margin-bottom:4px; text-align:left; position:relative; transition:all .2s; min-height:44px; }
.class-entry:last-child { margin-bottom:0; }
.class-entry:hover { border-color:#22c55e; box-shadow:0 0 8px rgba(34,197,94,.15); }
.class-subject { display:block; font-weight:700; font-size:.82rem; color:#e8edf5; margin-bottom:3px; line-height:1.3; }
.class-meta { display:block; font-size:.68rem; color:#94a3b8; line-height:1.3; }
.class-type { display:inline-block; padding:2px 8px; border-radius:4px; font-size:.65rem; font-weight:700; margin-top:4px; letter-spacing:.02em; }
.class-type.lecture { background:rgba(59,130,246,.15); color:#60a5fa; }
.class-type.lab { background:rgba(245,158,11,.15); color:#fbbf24; }
.class-del { position:absolute; top:4px; right:4px; background:none; border:none; color:#ef4444; cursor:pointer; font-size:.85rem; padding:2px 6px; border-radius:4px; opacity:0; transition:opacity .2s; line-height:1; }
.class-entry:hover .class-del { opacity:1; }
.class-del:hover { background:#ef4444; color:#fff; }

/* Exam schedule */
.exam-list { display:flex; flex-direction:column; gap:10px; }
.exam-card { background:#1a2236; border:1px solid #2a3a5c; border-radius:8px; padding:16px 18px; transition:all .2s; }
.exam-card:hover { border-color:#22c55e; box-shadow:0 0 10px rgba(34,197,94,.1); }
.exam-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.exam-header strong { font-size:.9rem; color:#e8edf5; }
.exam-del { background:none; border:none; color:#ef4444; cursor:pointer; font-size:1.1rem; padding:2px 8px; border-radius:4px; opacity:.6; transition:opacity .2s; }
.exam-del:hover { opacity:1; background:#ef4444; color:#fff; }
.exam-dates { font-size:.78rem; color:#94a3b8; margin-bottom:4px; }
.exam-dates::before { content:'\f073'; font-family:'Font Awesome 6 Free'; font-weight:400; margin-right:6px; color:#22c55e; }
.exam-subjects { font-size:.78rem; color:#e8edf5; line-height:1.4; }

/* Routine print */
.routine-print-area { background:#fff; color:#111; }
.routine-print-header { display:none; }
.routine-print-header .print-header-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:20px; }
.routine-print-header .print-info h2 { font-size:1.2rem; color:#111; margin:0 0 4px; }
.routine-print-header .print-info h3 { font-size:.95rem; color:#333; margin:0 0 6px; font-weight:600; }
.routine-print-header .print-info p { font-size:.85rem; color:#555; margin:0; }
#routineContainer .timetable th { background:#f0f0f0; color:#333; }
#routineContainer .timetable .time-col { background:#f0f0f0; color:#333; }
#routineContainer .timetable td { color:#333; }
#routineContainer .class-subject { color:#111; }
#routineContainer .class-meta { color:#555; }
#routineContainer .class-entry { background:#f8f8f8; border-color:#ddd; border-left-color:#22c55e; }
.timetable-wrapper { border-color:#ddd; }

/* Upload tab toggle */
.upload-tab-btn.active { background:#22c55e; color:#fff; }
.upload-tab-btn:not(.active) { background:transparent; color:#94a3b8; }

/* Nav active route */
.nav-active { color:#22c55e !important; }

/* Mobile nav open */
.nav-open { display:flex !important; }

/* Responsive timetable */
@media (max-width:768px) {
  .timetable { font-size:.7rem; table-layout:auto; }
  .timetable th, .timetable td { padding:6px 6px; min-width:100px; }
  .timetable .time-col { min-width:70px; }
  .class-entry { padding:6px 8px; }
  .class-subject { font-size:.75rem; }
  .class-meta { font-size:.62rem; }
  .class-type { font-size:.6rem; padding:1px 6px; }
}

/* Profile Dropdown */
.profile-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 240px;
  background: #111827;
  border: 1px solid #2a3a5c;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  z-index: 200;
  overflow: hidden;
  animation: ddFadeIn .15s ease-out;
}
.profile-dropdown.hidden { display: none; }
@keyframes ddFadeIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
.profile-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #2a3a5c;
}
.profile-dropdown-divider {
  height: 1px;
  background: #2a3a5c;
}
.profile-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  color: #e8edf5;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s;
  text-align: left;
}
.profile-dropdown-item:hover {
  background: #1a2236;
}
.profile-dropdown-item i {
  width: 16px;
  text-align: center;
  font-size: 0.85rem;
  color: #94a3b8;
}
.profile-dropdown-item:hover i {
  color: #22c55e;
}
.profile-dropdown-logout {
  color: #ef4444 !important;
}
.profile-dropdown-logout i {
  color: #ef4444 !important;
}
.profile-dropdown-logout:hover {
  background: rgba(239,68,68,.1) !important;
}