html, body {
    height: 100%;
    margin: 0;
}

.page {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: 230px;
    background-color: #2c3e50;
    flex-shrink: 0;
}

.sidebar .nav-brand {
    color: #ecf0f1;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid #34495e;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    letter-spacing: 0.02em;
}

.sidebar .nav-link {
    color: #bdc3c7;
    padding: 0.6rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: background-color 0.15s;
}

.sidebar .nav-link:hover {
    background-color: #34495e;
    color: #ecf0f1;
}

.sidebar .nav-link.active {
    background-color: #3498db;
    color: #fff;
}

main {
    flex: 1;
    overflow-y: auto;
    background-color: #f8f9fa;
}

.content {
    padding: 1.5rem 2rem;
}

.top-bar {
    background-color: #fff;
    border-bottom: 1px solid #dee2e6;
    padding: 0.75rem 2rem;
}

/* Gradebook table styles (shared by GradebookView and StudentView) */
.gradebook-table-wrapper, .sv-table-wrapper { overflow-x: auto; max-width: 100%; }
.gradebook-table { white-space: nowrap; font-size: 0.85rem; }
.sv-table { white-space: nowrap; font-size: 0.75rem; }
.sv-table th, .sv-table td { padding: 2px 4px !important; }
.sv-assess-col { min-width: 45px; }
.sticky-col { position: sticky; left: 0; background-color: #fff; z-index: 1; border-right: 2px solid #dee2e6 !important; }
.sticky-col-right { position: sticky; right: 0; background-color: #fff; z-index: 1; border-left: 2px solid #dee2e6 !important; }
.student-col { min-width: 180px; }
.student-col-right { min-width: 130px; font-size: 0.8rem; }
.assessment-col { min-width: 70px; }
.cat-avg-col { background-color: #e8f4fd !important; min-width: 55px; }
.overall-avg-col { background-color: #e8f5e9 !important; min-width: 65px; }
.semester-avg-col { background-color: #f3e8fd !important; min-width: 65px; }
.summary-row td { background-color: #fff9c4 !important; font-weight: bold; }
.summary-row .sticky-col, .summary-row .sticky-col-right { background-color: #fff9c4 !important; }
.summary-row .cat-avg-col { background-color: #fce4b3 !important; }
.summary-row .overall-avg-col { background-color: #c8e6c9 !important; }
.summary-row .semester-avg-col { background-color: #e0cff2 !important; }
thead th.cat-avg-col { background-color: #e8f4fd !important; }
thead th.overall-avg-col { background-color: #e8f5e9 !important; }
thead th.semester-avg-col { background-color: #f3e8fd !important; }
.watch-list-row td { background-color: #fff3cd !important; }
.watch-list-row .cat-avg-col { background-color: #ffe8a1 !important; }
.watch-list-row .overall-avg-col { background-color: #ffe08a !important; }
.watch-list-row .semester-avg-col { background-color: #f0d8a0 !important; }
.watch-list-sticky, .watch-list-sticky-right { background-color: #fff3cd !important; }
.lowest-ci-cell { border-bottom: 2px solid #dc3545 !important; }
.retake-cell { background-color: #fff8e1 !important; }
.retake-score { font-weight: bold; color: #856404; font-size: 0.85em; }
.original-score-muted { text-decoration: line-through; opacity: 0.5; font-size: 0.75em; }
/* Inline grade edit inputs */
.gradebook-edit-input {
    width: 58px;
    padding: 0.1rem 0.2rem;
    font-size: 0.8rem;
    text-align: center;
    margin: 0 auto;
    display: block;
}
.gradebook-edit-input::-webkit-outer-spin-button,
.gradebook-edit-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gradebook-edit-input[type=number] { -moz-appearance: textfield; appearance: textfield; }

/* Mobile offcanvas nav */
.offcanvas .nav-link {
    color: #ecf0f1 !important;
    padding: 0.9rem 1.2rem !important;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    transition: background-color 0.15s;
    min-height: 52px;
}
.offcanvas .nav-link:hover {
    background-color: #34495e;
    color: #fff !important;
}
.offcanvas .nav-link.active {
    background-color: #3498db;
    color: #fff !important;
}

/* Dark mode overrides */
[data-bs-theme="dark"] main {
    background-color: #1a1d21;
}

[data-bs-theme="dark"] .sidebar {
    background-color: #1a1d21;
    border-right: 1px solid #333;
}

[data-bs-theme="dark"] .sidebar .nav-brand {
    border-bottom: 1px solid #333;
}

[data-bs-theme="dark"] .sidebar .nav-link:hover {
    background-color: #2a2d31;
}

[data-bs-theme="dark"] .top-bar {
    background-color: #212529;
    border-bottom: 1px solid #333;
}

[data-bs-theme="dark"] .sticky-col,
[data-bs-theme="dark"] .sticky-col-right {
    background-color: #212529 !important;
}

[data-bs-theme="dark"] .watch-list-row td {
    background-color: #3d3520 !important;
}

[data-bs-theme="dark"] .watch-list-sticky,
[data-bs-theme="dark"] .watch-list-sticky-right {
    background-color: #3d3520 !important;
}

[data-bs-theme="dark"] .cat-avg-col {
    background-color: #1a2a3a !important;
}

[data-bs-theme="dark"] .overall-avg-col {
    background-color: #1a2e1a !important;
}

[data-bs-theme="dark"] .semester-avg-col {
    background-color: #2a1a3a !important;
}

[data-bs-theme="dark"] .summary-row td {
    background-color: #3a3520 !important;
}

[data-bs-theme="dark"] .summary-row .cat-avg-col {
    background-color: #3a2a10 !important;
}

[data-bs-theme="dark"] .summary-row .overall-avg-col {
    background-color: #1a3a1a !important;
}

[data-bs-theme="dark"] .summary-row .semester-avg-col {
    background-color: #2a1a3a !important;
}

[data-bs-theme="dark"] .histogram-panel {
    background: #2a2d31;
    border-color: #444;
}

[data-bs-theme="dark"] .offcanvas {
    background-color: #1a1d21;
    border-right: 1px solid #333;
}

[data-bs-theme="dark"] .offcanvas .nav-link {
    color: #bdc3c7;
}

[data-bs-theme="dark"] .offcanvas .nav-link:hover {
    background-color: #2a2d31;
    color: #ecf0f1;
}

/* Font-size utility classes (for mobile override) */
.score-pct { font-size: 0.7rem; }
.assess-max { font-size: 0.7rem; }
.cat-weight { font-size: 0.65rem; }
.sv-score-pct { font-size: 0.6rem; }
.sv-assess-max { font-size: 0.6rem; }
.sv-cat-weight { font-size: 0.55rem; }

/* ===== Mobile Responsive ===== */
@media (max-width: 767.98px) {
    .content {
        padding: 1rem;
    }

    .top-bar {
        padding: 0.5rem 1rem;
    }

    h1 { font-size: 1.5rem; }
    h3 { font-size: 1.15rem; }
    h4 { font-size: 1rem; }

    /* Table readability */
    .gradebook-table { font-size: 0.8rem; }
    .sv-table { font-size: 0.8rem; }
    .sv-table th, .sv-table td { padding: 4px 6px !important; }
    .student-col { min-width: 120px; }
    .analysis-table { font-size: 0.8rem; }

    /* Hide right-side duplicate name column on mobile — not needed when scrolling */
    .sticky-col-right { display: none; }

    /* Bump font-size utility classes for readability on mobile */
    .score-pct, .assess-max, .sv-score-pct, .sv-assess-max {
        font-size: 0.75rem;
    }
    .cat-weight, .sv-cat-weight {
        font-size: 0.65rem;
    }

    /* Histogram panel: full width below table */
    .histogram-panel {
        min-width: unset;
        max-width: unset;
        width: 100%;
        position: static;
    }

    /* Analysis flex containers: stack on mobile */
    .analysis-flex-container {
        flex-direction: column !important;
    }

    /* Touch targets */
    .btn-sm {
        min-height: 36px;
        min-width: 36px;
    }

    .analysis-table .btn-hist-toggle {
        padding: 0.25rem 0.5rem !important;
        min-width: 36px;
        min-height: 36px;
    }
}

/* ===== Login Page ===== */
.login-wrapper {
    min-height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
}

.login-card {
    width: 100%;
    max-width: 400px;
    border: none;
    border-radius: 14px;
    overflow: hidden;
}

.login-card-header {
    background: linear-gradient(155deg, #1a3558 0%, #2563a8 100%);
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-subtitle {
    color: rgba(255,255,255,0.65);
    font-size: 0.875rem;
    margin-top: 0.15rem;
}

.login-btn {
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.6rem;
}

[data-bs-theme="dark"] .login-card .card-body {
    background-color: #212529;
}

/* ===== Print Styles (Student Progress Report) ===== */
@media print {
    @page { size: landscape; margin: 1.5cm; }

    /* Hide all chrome */
    .sidebar, .top-bar, .offcanvas { display: none !important; }
    .no-print { display: none !important; }

    /* Show print-only elements (overrides Bootstrap d-none) */
    .print-only { display: block !important; }

    /* Reset page layout */
    .page { display: block !important; }
    main { overflow: visible !important; }
    .content { padding: 0 !important; }

    /* Allow table to expand to full print width */
    .sv-table-wrapper { overflow: visible !important; max-width: none !important; }
    .sv-table { font-size: 0.7rem !important; }
    .sv-table th, .sv-table td { padding: 3px 6px !important; }

    /* Sticky columns don't make sense on paper */
    .sticky-col, .sticky-col-right { position: static !important; }

    /* Keep background colors for readability (may need "Background graphics" enabled in browser) */
    .cat-avg-col    { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .overall-avg-col { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .semester-avg-col { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .retake-cell    { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .lowest-ci-cell { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Cards: clean borders, no shadows, avoid breaking across pages */
    .card { border: 1px solid #ccc !important; box-shadow: none !important; margin-top: 1rem !important; page-break-inside: avoid; }
    .card-header { background-color: #f0f0f0 !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}