/* ============================================================
   pages.css – Page-specific styles
   (Auth, GPA, Todo, Exam sections)
   ============================================================ */

/* ═══ AUTH PAGE ═══ */
.auth-header { text-align: center; margin-bottom: var(--sp-8); }
.auth-logo {
    width: 56px; height: 56px; background: var(--brand-800);
    border-radius: var(--r-2xl); display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: var(--text-xl); font-weight: 900;
    margin: 0 auto var(--sp-5); box-shadow: var(--shadow-brand);
}
.auth-title { font-size: var(--text-2xl); font-weight: 800; color: var(--surface-900); letter-spacing: -0.02em; }
.auth-subtitle { font-size: var(--text-sm); color: var(--surface-400); font-weight: 500; margin-top: var(--sp-2); }
.auth-tabs {
    display: flex; background: var(--surface-100); border-radius: var(--r-xl);
    padding: 4px; margin-bottom: var(--sp-6); gap: 4px;
}
.auth-tab {
    flex: 1; padding: var(--sp-2) var(--sp-4); border-radius: var(--r-lg);
    font-size: var(--text-sm); font-weight: 700; cursor: pointer;
    transition: all var(--t-base); text-align: center; color: var(--surface-400);
}
.auth-tab.active {
    background: var(--surface-0); color: var(--brand-700);
    box-shadow: var(--shadow-sm);
}
.auth-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.auth-divider {
    display: flex; align-items: center; gap: var(--sp-3);
    margin: var(--sp-4) 0; font-size: var(--text-xs); color: var(--surface-400); font-weight: 600;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--surface-200);
}
.auth-footer {
    text-align: center; margin-top: var(--sp-6); padding-top: var(--sp-5);
    border-top: 1px solid var(--surface-100);
    font-size: var(--text-sm); color: var(--surface-400); font-weight: 500;
}
.auth-footer a, .auth-footer button { color: var(--brand-500); font-weight: 700; cursor: pointer; }
.auth-footer button:hover { color: var(--brand-700); }

/* ═══ PAGE HEADER ═══ */
.page-header { margin-bottom: var(--sp-6); }
.page-title {
    font-size: var(--text-2xl); font-weight: 800; color: var(--surface-900);
    letter-spacing: -0.02em; display: flex; align-items: center; gap: var(--sp-3);
}
.page-title-icon {
    width: 44px; height: 44px; background: var(--brand-100);
    border-radius: var(--r-xl); display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.page-desc { font-size: var(--text-sm); color: var(--surface-500); margin-top: var(--sp-2); }

/* ═══ GPA PAGE ═══ */
.gpa-stats-row {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.gpa-stat-card {
    background: var(--surface-0); border: 1px solid var(--surface-200);
    border-radius: var(--r-xl); padding: var(--sp-4); text-align: center;
}
.gpa-stat-value { font-size: var(--text-xl); font-weight: 800; color: var(--surface-900); }
.gpa-stat-label { font-size: var(--text-xs); color: var(--surface-400); font-weight: 600; margin-top: 2px; }

.grade-A { color: #15803d; }
.grade-B { color: var(--brand-600); }
.grade-C { color: var(--color-warning); }
.grade-D { color: #ea580c; }
.grade-F { color: var(--color-danger); }

/* ═══ TODO PAGE ═══ */
.todo-controls {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--sp-4); margin-bottom: var(--sp-4); flex-wrap: wrap;
}
.todo-item {
    display: flex; align-items: center; gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4); border-radius: var(--r-xl);
    background: var(--surface-50); border: 1px solid var(--surface-100);
    margin-bottom: var(--sp-2); transition: all var(--t-base);
}
.todo-item:hover { border-color: var(--surface-200); background: var(--surface-0); }
.todo-item.overdue { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.todo-item.completed { opacity: 0.55; }
.todo-item.completed .todo-title { text-decoration: line-through; }
.todo-check { flex-shrink: 0; }
.todo-title { font-size: var(--text-sm); font-weight: 600; color: var(--surface-800); flex: 1; }
.todo-meta  { font-size: var(--text-xs); color: var(--surface-400); margin-top: 2px; }
.todo-info  { flex: 1; min-width: 0; }
.todo-actions { display: flex; gap: var(--sp-2); flex-shrink: 0; }

/* ═══ EXAM PAGE ═══ */
.schedule-table { width: 100%; }
.schedule-row--studying  td:first-child { border-left: 3px solid var(--brand-500); }
.schedule-row--upcoming  td:first-child { border-left: 3px solid var(--color-warning); }
.schedule-row--completed td:first-child { border-left: 3px solid var(--surface-300); }
.schedule-row--completed td { opacity: 0.6; }

.exam-warning {
    display: flex; align-items: flex-start; gap: var(--sp-3);
    padding: var(--sp-4); border-radius: var(--r-xl);
    background: var(--color-danger-bg); border: 1px solid var(--color-danger-border);
    margin-bottom: var(--sp-4); animation: slideUp 0.3s ease;
}
.exam-warning-icon { font-size: var(--text-lg); flex-shrink: 0; }
.exam-warning-text { font-size: var(--text-sm); font-weight: 600; color: #b91c1c; }

@media (max-width: 640px) {
    .gpa-stats-row   { grid-template-columns: 1fr 1fr; }
    .form-row-2,
    .form-row-3      { grid-template-columns: 1fr; }
    .todo-controls   { flex-direction: column; align-items: flex-start; }
    .gpa-summary     { flex-direction: column; text-align: center; }
    .gpa-letter      { text-align: center; }
}

@media (max-width: 480px) {
    .gpa-stats-row { grid-template-columns: 1fr; }
    .auth-card     { border-radius: var(--r-xl); }
}