/* Shared typography and interaction details for the four AcadSync screens. */
.landing-page,
.auth-page,
.student-page,
.admin-page {
    font-family: "Plus Jakarta Sans", "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
}

.landing-page :not(.bx),
.auth-page :not(.bx),
.student-page :not(.bx),
.admin-page :not(.bx) {
    font-family: inherit;
    letter-spacing: 0;
}

.landing-page :is(a, button, input, select, textarea):focus-visible,
.auth-page :is(a, button, input, select, textarea):focus-visible,
.student-page :is(a, button, input, select, textarea):focus-visible,
.admin-page :is(a, button, input, select, textarea):focus-visible {
    outline: 2px solid #b48535;
    outline-offset: 2px;
}

/* Public introduction */
.landing-page {
    --green-950: #102820;
    --green-900: #15372a;
    --green-700: #0d3526;
    --green-600: #0d3526;
    --green-50: #f5f8f6;
    --ink: #192a25;
    --muted: #596d65;
    --line: #dce5e0;
}

.landing-page .site-header {
    background: rgba(15, 43, 31, .92);
    box-shadow: none;
}

.landing-page .hero {
    min-height: min(72vh, 650px);
}

.landing-page .hero-overlay {
    background: linear-gradient(90deg, rgba(11, 38, 27, .90), rgba(11, 38, 27, .55) 58%, rgba(11, 38, 27, .12));
}

.landing-page .hero h1 {
    font-weight: 700;
}

.landing-page .hero-label,
.landing-page .section-heading > span,
.landing-page .purpose-copy > span,
.landing-page .final-action > div > span {
    font-weight: 700;
    text-transform: none;
}

.landing-page .hero-summary {
    max-width: 560px;
    line-height: 1.55;
}

.landing-page .primary-action {
    border-radius: 6px;
    border: 1px solid #fff;
    background: #fff;
    color: #0d3526;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .12);
}

.landing-page .primary-action:hover,
.landing-page .primary-action:focus-visible {
    background: #e9f0ec;
    border-color: #e9f0ec;
    color: #0d3526;
    box-shadow: 0 12px 26px rgba(0, 0, 0, .2);
}

.landing-page .primary-action:active {
    transform: translateY(0);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
}

.landing-page .overview,
.landing-page .purpose,
.landing-page .final-action {
    padding-top: clamp(48px, 6vw, 76px);
    padding-bottom: clamp(48px, 6vw, 76px);
}

.landing-page .section-heading {
    margin-bottom: 30px;
}

.landing-page .section-heading h2,
.landing-page .purpose h2,
.landing-page .final-action h2 {
    font-weight: 700;
}

.landing-page .process-grid article {
    min-height: 225px;
    padding-top: 28px;
    padding-bottom: 28px;
}

.landing-page .purpose-list i {
    background: transparent;
    color: var(--green-700);
    border: 1px solid var(--line);
}

/* Sign in and registration */
.auth-page {
    --brand-900: #09291d;
    --brand-800: #0d3526;
    --brand-700: #0d3526;
    --brand-600: #0d3526;
    --brand-500: #0d3526;
    --ink-900: #192a25;
    --ink-700: #4b5d57;
    --ink-500: #687b75;
    --line: #dce5e0;
    --surface-soft: #fff;
    --shadow-lg: 0 18px 48px rgba(7, 33, 21, .18);
    background-image: linear-gradient(rgba(10, 39, 27, .42), rgba(10, 39, 27, .26)), url("../Acadsync.jpg");
}

.auth-page .wrapper::before,
.auth-page .form-box::before {
    display: none;
}

.auth-page .nav {
    height: 66px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: none;
    backdrop-filter: none;
}

.auth-page .landing-main {
    justify-content: center;
    grid-template-columns: minmax(0, 480px);
}

.auth-page .form-box {
    max-width: 480px;
    border: 1px solid #e4eae6;
    background: #fff;
    box-shadow: var(--shadow-lg);
    backdrop-filter: none;
}

.auth-page .login-container,
.auth-page .register-container {
    padding-left: 32px;
    padding-right: 32px;
}

.auth-page .auth-intro {
    margin: 0 0 25px;
    text-align: center;
}

.auth-page .auth-intro h1 {
    color: var(--ink-900);
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 800;
}

.auth-page .auth-intro p {
    margin-top: 7px;
    color: var(--ink-700);
    font-size: .9rem;
}

.auth-page .login-container header,
.auth-page .register-container header {
    color: var(--ink-900);
    font-size: 1.5rem;
    font-weight: 700;
    text-align: left;
    margin-bottom: 24px;
}

.auth-page .top span,
.auth-page .login-switch-text,
.auth-page .two-col,
.auth-page .login-helper-note,
.auth-page .password-rule-hint {
    color: var(--ink-700);
}

.auth-page .top span a,
.auth-page .two a,
.auth-page .login-switch-text a,
.auth-page .login-help-row > a {
    color: var(--brand-700);
    font-weight: 700;
}

.auth-page .top span {
    justify-content: flex-start;
    padding: 0 0 10px;
}

.auth-page .input-field {
    background: #f8faf9;
    border: 1px solid #d6e2db;
    color: var(--ink-900);
}

.auth-page .input-field:focus {
    background: #fff;
}

.auth-page .submit {
    background: var(--brand-700);
    box-shadow: none;
    font-weight: 700;
}

.auth-page .submit:hover {
    background: var(--brand-800);
    box-shadow: none;
    transform: none;
}

.auth-page #adminLoginLink,
.auth-page .login-mode-button {
    background: #fff;
    color: var(--brand-700);
    border-color: #b7d0c1;
    box-shadow: none;
    font-weight: 700;
}

.auth-page #adminLoginLink:hover,
.auth-page .login-mode-button:hover {
    background: #f0f6f2;
    color: var(--brand-800);
}

.auth-page .privacy-consent {
    background: #f8faf9;
    border-color: var(--line);
    box-shadow: none;
}

.auth-page .privacy-consent.accepted {
    background: #ecf7ef;
    border-color: #a6cfb5;
}

.auth-page .password-rule-hint i {
    color: var(--brand-700);
}

/* Student workspace */
.student-page:not(.dark-mode) {
    --primary: #0d3526;
    --primary-dark: #15372a;
    --primary-light: #eef1ef;
    --gray-50: #f5f7f6;
    --gray-100: #eef2ef;
    --gray-200: #dce5e0;
    --gray-500: #687b75;
    --gray-700: #4b5d57;
    --gray-900: #192a25;
    --shadow-sm: 0 2px 10px rgba(18, 54, 37, .04);
    --shadow-md: 0 8px 22px rgba(18, 54, 37, .08);
    background: #f5f7f6;
}

.student-page::before,
.student-page .welcome-banner::after {
    display: none;
}

.student-page .container {
    width: min(1280px, calc(100% - 48px));
}

.student-page .main-header {
    background: #fff;
    border-color: var(--gray-200);
    box-shadow: none;
    backdrop-filter: none;
}

.student-page .header-flex {
    padding-right: 0;
    min-height: 56px;
}

.student-page .user-details {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 16px;
}

.student-page .portal-brand {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 126px;
    padding-right: 22px;
    border-right: 1px solid var(--gray-200);
    color: var(--primary-dark);
    line-height: 1.15;
}

.student-page .portal-brand span {
    font-size: 1.25rem;
    font-weight: 800;
}

.student-page .portal-brand small {
    margin-top: 4px;
    color: var(--gray-500);
    font-size: .72rem;
    font-weight: 600;
}

.student-page.dark-mode .portal-brand span {
    color: #e9f3ec;
}

.student-page.dark-mode .main-nav {
    background: #17231c;
    border-bottom-color: #26372d;
}

.student-page.dark-mode .nav-item.active {
    color: #dff6e9;
    background: transparent;
    border-bottom-color: #f4f7f4;
    box-shadow: none;
}

.student-page .avatar {
    width: 42px;
    height: 42px;
    border: 0;
    box-shadow: none;
    font-size: 1rem;
}

.student-page .user-name {
    grid-column: 1;
    grid-row: 1;
    font-size: 1rem;
    font-weight: 700;
}

.student-page .user-meta {
    grid-column: 1;
    grid-row: 2;
    font-size: .78rem;
}

.student-page .action-buttons {
    position: static;
    grid-column: 2;
    grid-row: 1 / span 2;
    transform: none;
}

.student-page .btn,
.student-page .btn-explore,
.student-page .btn-step-next,
.student-page .btn-ai-generate {
    box-shadow: none;
    font-weight: 700;
}

.student-page .btn:hover,
.student-page .btn-explore:hover,
.student-page .btn-step-next:hover,
.student-page .btn-ai-generate:hover {
    transform: none;
    box-shadow: none;
}

.student-page:not(.dark-mode) .btn-blue,
.student-page:not(.dark-mode) .announcement-button {
    color: var(--primary-dark);
    background: #fff;
    border: 1px solid var(--gray-200);
}

.student-page:not(.dark-mode) .btn-red {
    color: #a43c32;
    border-color: var(--gray-200);
}

.student-page .main-nav {
    padding: 0;
    border-bottom: 1px solid var(--gray-200);
    background: #fff;
}

.student-page .nav-container {
    display: flex;
    gap: 22px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.student-page .nav-item {
    flex: 0 0 auto;
    min-height: 52px;
    padding: 10px 2px;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-size: .88rem;
    font-weight: 600;
}

.student-page:not(.dark-mode) .nav-item.active {
    color: var(--primary-dark);
    background: transparent;
    border-bottom-color: var(--primary);
    box-shadow: none;
}

.student-page:not(.dark-mode) .nav-item:hover {
    color: var(--primary-dark);
    background: transparent;
}

.student-page .portal-body-wrapper {
    padding-top: 26px;
}

.student-page .content-layout {
    gap: 26px;
}

.student-page .sidebar {
    width: 220px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.student-page .filter-header {
    padding: 10px 12px;
    color: var(--gray-500);
    background: transparent;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
}

.student-page .filter-list {
    padding: 0;
}

.student-page .filter-opt {
    margin-bottom: 2px;
    border-radius: 5px;
    font-size: .88rem;
}

.student-page .search-bar-container {
    display: grid;
    gap: 14px;
    margin-bottom: 22px;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.student-page .catalog-heading h2 {
    color: var(--gray-900);
    font-size: 1.55rem;
    line-height: 1.2;
    font-weight: 700;
}

.student-page .catalog-search-field {
    position: relative;
}

.student-page .catalog-search-field > i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--gray-500);
    font-size: 1.15rem;
    pointer-events: none;
}

.student-page #course-search-input {
    min-height: 50px;
    padding-left: 46px;
    box-shadow: none;
}

.student-page .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.student-page:not(.dark-mode) .filter-opt.active {
    background: #eef1ef;
    border-color: #0d3526;
}

.student-page .welcome-banner {
    margin-bottom: 20px;
    border-radius: 6px;
    box-shadow: none;
}

.student-page:not(.dark-mode) .welcome-banner {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-left: 4px solid var(--primary);
}

.student-page:not(.dark-mode) .banner-accent {
    padding: 18px 22px 0;
    color: var(--gray-900);
    background: transparent;
    font-size: 1.15rem;
    font-weight: 700;
}

.student-page .banner-body {
    padding: 6px 22px 20px;
}

.student-page .semester-year {
    font-size: 1rem;
    font-weight: 700;
}

.student-page .semester-term,
.student-page .quote {
    font-size: .88rem;
    line-height: 1.55;
}

.student-page .quote {
    margin-top: 8px;
}

.student-page .cards-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.student-page .card {
    border-radius: 6px;
    box-shadow: none;
    animation: none;
}

.student-page:not(.dark-mode) .card {
    border-top: 3px solid var(--primary);
}

.student-page .card:hover {
    transform: none;
    border-color: #b7d0c1;
    box-shadow: 0 5px 16px rgba(18, 54, 37, .07);
}

.student-page:not(.dark-mode) .card-header {
    padding: 17px 20px 0;
    background: #fff;
    color: var(--primary);
    font-size: .78rem;
    font-weight: 800;
}

.student-page .card-body {
    padding: 13px 20px 16px;
}

.student-page .card-body h3 {
    font-size: 1.08rem;
    font-weight: 700;
}

.student-page .card-footer {
    padding: 0 20px 20px;
}

.student-page:not(.dark-mode) .btn-explore {
    background: var(--primary);
    color: #fff;
    border: 1px solid var(--primary);
}

.student-page:not(.dark-mode) .btn-explore:hover {
    background: var(--primary-dark);
}

.student-page:not(.dark-mode) .course-card-meta span {
    background: #f1f5f2;
    color: #3f5d4d;
    font-weight: 700;
}

.student-page .assessment-overview-card,
.student-page .leaderboard-stat-card,
.student-page .recommendation-summary-box,
.student-page .course-detail-grid div,
.student-page .quiz-card,
.student-page .form-step-panel {
    box-shadow: none;
}

.student-page:not(.dark-mode) .assessment-overview-card,
.student-page:not(.dark-mode) .leaderboard-stat-card {
    background: #fff;
}

.student-page .assessment-overview-card:hover,
.student-page .leaderboard-stat-card:hover {
    transform: none;
    box-shadow: none;
}

.student-page:not(.dark-mode) :is(.btn-step-next, .btn-ai-generate, .btn-modal-confirm, .btn-dark-submit) {
    background: var(--primary);
    box-shadow: none;
}

.student-page:not(.dark-mode) :is(.btn-step-next, .btn-ai-generate, .btn-modal-confirm, .btn-dark-submit):hover {
    background: var(--primary-dark);
}

/* Administrative workspace */
.admin-page:not(.admin-dark) {
    --brand-950: #061f16;
    --brand-900: #09291d;
    --brand-800: #0d3526;
    --brand-700: #0d3526;
    --brand-600: #0d3526;
    --brand-100: #eef1ef;
    --brand-50: #f5f7f6;
    --ink-900: #192a25;
    --ink-700: #4b5d57;
    --ink-500: #687b75;
    --line: #dce5e0;
    --surface-soft: #f7f9f8;
    --shadow: 0 2px 10px rgba(18, 54, 37, .04);
    background: #f5f7f6;
}

.admin-page.admin-dark {
    background: #0b1712;
}

.admin-page .admin-shell {
    grid-template-columns: 248px minmax(0, 1fr);
}

.admin-page .sidebar {
    padding: 26px 16px;
    background: var(--brand-900);
    box-shadow: none;
}

.admin-page .brand {
    margin: 0 8px 38px;
}

.admin-page .brand-mark {
    width: 38px;
    height: 38px;
    font-size: 1.3rem;
}

.admin-page .brand h1 {
    font-size: 1.1rem;
}

.admin-page .nav-list {
    gap: 3px;
}

.admin-page .nav-item,
.admin-page .sidebar-link {
    min-height: 42px;
    padding: 0 12px;
    font-size: .86rem;
    font-weight: 600;
}

.admin-page .sidebar-note {
    display: none;
}

.admin-page .main {
    padding: 30px clamp(20px, 3vw, 42px) 40px;
}

.admin-page .topbar {
    margin-bottom: 22px;
}

.admin-page .topbar h2 {
    font-size: clamp(1.55rem, 2.4vw, 2rem);
    line-height: 1.15;
    font-weight: 700;
}

.admin-page .topbar p {
    font-size: .88rem;
}

.admin-page .eyebrow {
    font-size: .72rem;
    font-weight: 700;
    text-transform: none;
}

.admin-page .admin-identity {
    font-weight: 700;
}

.admin-page .btn {
    min-height: 40px;
    box-shadow: none;
    font-size: .86rem;
    font-weight: 700;
}

.admin-page .btn:hover {
    transform: none;
    box-shadow: none;
}

.admin-page .stat-card,
.admin-page .panel {
    box-shadow: none;
    border-radius: 6px;
}

.admin-page .stat-card {
    min-height: 104px;
}

.admin-page .stat-card strong {
    font-size: 1.7rem;
}

.admin-page .stat-card span,
.admin-page .panel-title {
    font-weight: 700;
}

.admin-page .panel-head {
    padding: 16px 20px;
}

.admin-page .panel-title {
    font-size: 1rem;
}

.admin-page .mini-form {
    background: var(--surface-soft);
}

.admin-page .empty,
.admin-page .loading,
.admin-page .error {
    font-weight: 600;
}

@media (max-width: 1100px) {
    .admin-page .admin-shell {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-page .sidebar {
        height: auto;
        padding: 14px 20px;
    }

    .admin-page .brand {
        margin: 0 0 12px;
    }

    .admin-page .nav-list {
        display: flex;
        gap: 5px;
        overflow-x: auto;
        scrollbar-width: thin;
    }

    .admin-page .nav-item,
    .admin-page .sidebar-link {
        width: auto;
        flex: 0 0 auto;
        white-space: nowrap;
    }
}

@media (max-width: 1050px) {
    .student-page .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .student-page .header-flex {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        text-align: left;
    }

    .student-page .action-buttons {
        width: auto;
        margin-top: 0;
        justify-content: flex-end;
    }

    .student-page .sidebar {
        width: 100%;
    }

    .student-page .filter-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    .student-page .filter-opt {
        margin: 0;
    }
}

@media (max-width: 700px) {
    .landing-page .hero {
        min-height: min(72vh, 620px);
    }

    .auth-page .wrapper {
        padding-top: 86px;
        align-items: flex-start;
    }

    .auth-page .landing-main {
        justify-content: center;
    }

    .auth-page .login-container,
    .auth-page .register-container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .student-page .container {
        width: calc(100% - 28px);
    }

    .student-page .portal-brand {
        min-width: 0;
        margin-right: auto;
        padding-right: 0;
        border: 0;
    }

    .student-page .avatar-wrapper {
        display: none;
    }

    .student-page .user-details {
        display: contents;
    }

    .student-page .user-name,
    .student-page .user-meta {
        display: none;
    }

    .student-page .action-buttons {
        gap: 6px;
        margin-left: auto;
    }

    .student-page .action-buttons .btn {
        min-width: 40px;
        width: 40px;
        padding: 0;
        font-size: 0;
    }

    .student-page .action-buttons .btn i {
        font-size: 1.2rem;
    }

    .student-page .announcement-center,
    .student-page .announcement-button {
        width: 40px;
    }

    .student-page .nav-container {
        gap: 20px;
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
    }

    .student-page .nav-item {
        flex-direction: row;
        gap: 7px;
        min-height: 48px;
        font-size: .82rem;
    }

    .student-page .portal-body-wrapper {
        padding-top: 18px;
    }

    .student-page .cards-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .admin-page .main {
        padding: 20px 14px 28px;
    }
}

@media (max-width: 420px) {
    .auth-page .two-forms {
        grid-template-columns: 1fr;
    }

    .student-page .portal-brand span {
        font-size: 1.1rem;
    }

    .student-page .action-buttons .btn,
    .student-page .announcement-center,
    .student-page .announcement-button {
        min-width: 36px;
        width: 36px;
    }
}