/* ── PSC Connect Design Tokens ──────────────────────────────────────── */
:root {
    --primary:            #2b2b53;
    --primary-mid: #2e2e59;
    --secondary:          #006a6a;
    --secondary-light:    #e0f2f2;
    --surface:            #ffffff;
    --surface-low:        #eef0f8;
    --surface-card:       #ffffff;
    --surface-container:  #e5eeff;
    --on-surface:         #121c28;
    --on-surface-variant: #5a5f6e;
    --outline:            #dde1ec;
    --primary-container:  #2b2b53;
    --on-primary-fixed:   #ede8ff;
    --error:              #ba1a1a;
    --error-container:    #ffdad6;
    --on-error-container: #93000a;
    --success:            #1a6e3a;
    --success-container:  #d6f5e3;
    --header-top-height:  3.25rem;   /* mobile-first; overridden at lg */
    --header-nav-height:  3.75rem;
    --link-hover-bg:      #e0f2f2;
}

/* desktop overrides */
@media (min-width: 992px) {
    :root { --header-top-height: 5.5rem; }
}

body.connect {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: var(--surface);
    color: var(--on-surface);
    -webkit-font-smoothing: antialiased;
    /* Make Bootstrap's .border* utilities use the brand outline by default,
       so pages never re-declare border colour. */
    --bs-border-color: var(--outline);
}

/* ── Typography ─────────────────────────────────────────────────────── */
.section-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.35rem;
    color: var(--primary);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--on-surface-variant);
}

/* ── Shared UI primitives (reusable across every psc-connect page) ─────
   Page-specific stylesheets should only style things unique to that page;
   anything reusable lives here. ── */

/* Muted body note + inline meta label + navy-ink emphasis text */
.connect-note { color: var(--on-surface-variant); font-size: 0.8rem; line-height: 1.6; }
.connect-meta { color: var(--on-surface-variant); font-size: 0.78rem; letter-spacing: 0.09em; }
.text-ink { color: var(--primary); }

/* Pill / chip toggle — filters, year switchers, tabs.
   Box-model comes from Bootstrap utilities in the markup; this owns the
   brand colours, active state, hover and transition only. */
.connect-chip {
    color: var(--on-surface-variant);
    font-size: 0.78rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.connect-phone-number {
    color: var(--secondary) !important;
}
/* Override --bs-border-color (not border-color) so it flows into Bootstrap's
   .border utility, which sets the colour with !important. */
.connect-chip.active { background: var(--secondary); color: #fff; --bs-border-color: var(--secondary); }
.connect-chip:hover:not(.active) { --bs-border-color: var(--secondary); color: var(--secondary); }

/* Inline icon+text action links */
.connect-quick-links a { color: var(--secondary); font-size: 0.8rem; text-decoration: none; }
.connect-quick-links a:hover { text-decoration: underline; }

/* Bordered list row — drops the trailing separator on the last item */
.connect-row:last-child { border-bottom: 0 !important; }

/* Circular status badge — success / error / neutral.
   Size is fixed here (Bootstrap has no util for it); shape/flex/weight
   come from utilities (rounded-circle d-flex … fw-bold) in the markup. */
.connect-status-badge { width: 2.25rem; height: 2.25rem; }
.connect-status-badge.is-positive { background: var(--success-container); color: var(--success); }
.connect-status-badge.is-negative { background: var(--error-container); color: var(--on-error-container); }
.connect-status-badge.is-neutral  { background: var(--surface-low); color: var(--on-surface-variant); }

/* In-app buttons — teal primary + navy outline (see DESIGN.md § Buttons) */
/* Buttons — squared and understated ("College Ledger" feel). The base owns
   the shape/size; primary and outline share it so they read as a set. */
.connect-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 44px;
    padding: 0 1.3rem;
    border-radius: 0.3rem;
    border: none;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.1s;
}
.connect-btn:active { transform: scale(0.98); }

/* Primary — solid navy (the institutional anchor); teal stays reserved for
   links and inline actions per the One Accent Rule. */
.connect-btn-primary { background: var(--secondary); color: #fff; }
.connect-btn-primary:hover { background: var(--secondary); color: #fff; }

.connect-btn-primary-outline { background: #FFFFFF; color: var(--secondary); border: 1px solid var(--secondary); }
.connect-btn-primary-outline:hover { background: var(--secondary); color: #fff; }

.connect-btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.connect-btn-outline:hover { background: var(--primary); color: #fff; }

/* Alias — kept so any markup still using .connect-btn-navy matches the primary. */
.connect-btn-navy { background: var(--primary); color: #fff; }
.connect-btn-navy:hover { background: var(--primary-mid); color: #fff; }

/* Destructive — for irreversible actions (delete / close account). */
.connect-btn-danger { background: var(--error); color: #fff; }
.connect-btn-danger:hover { background: #8f1414; color: #fff; }

/* Teal links inside body notes + teal form-control focus (keeps teal the
   only interactive colour — overrides Bootstrap's default blue focus ring) */
.connect-note a {
    color: var(--secondary);
}
body.connect .form-select:focus,
body.connect .form-control:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 0.2rem rgba(0, 106, 106, 0.15);
}
body.connect .form-check-input:checked {
    background-color: var(--secondary);
    border-color: var(--secondary);
}
body.connect .form-check-input:focus {
    border-color: var(--secondary);
    box-shadow: 0 0 0 0.2rem rgba(0, 106, 106, 0.15);
}

/* ── Topbar ─────────────────────────────────────────────────────────── */
.topbar {
    background-color: var(--primary);
    height: var(--header-top-height);
    position: sticky;
    top: 0;
    z-index: 1040;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.topbar .container-xl { height: 100%; }

.topbar-brand-divider {
    width: 1px;
    height: 2.5rem;
    background: rgba(255,255,255,0.15);
}
.topbar-logo { height: 2rem; width: auto; flex-shrink: 0; }
@media (min-width: 992px) {
    .topbar-logo { height: 3.4rem; }
}

.topbar-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.01em;
    line-height: 1.15;
}
@media (min-width: 992px) {
    .topbar-name { font-size: 1.15rem; }
}
.topbar-college {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    font-weight: 400;
    display: block;
    margin-top: 0.3rem;
}

.topbar-icon-btn {
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
    position: relative;
}
.topbar-icon-btn:hover { background: rgba(255,255,255,0.1); color: #fff; }
.topbar-icon-btn i { font-size: 1rem; }

.notif-badge {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: #ff6b6b;
    border: 1px solid var(--primary);
}

.topbar-divider {
    width: 1px;
    height: 1.1rem;
    background: rgba(255,255,255,0.15);
    margin: 0 0.5rem;
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    text-decoration: none;
    padding: 0.3rem 0.5rem;
    border-radius: 100px;
    transition: background 0.2s;
}
.topbar-user:hover { background: rgba(255,255,255,0.08); }
.topbar-user-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    max-width: 6rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.topbar-user i { font-size: 0.8rem; color: rgba(255,255,255,0.35); }

/* Account dropdown (topbar) — on-brand hover (Bootstrap has no hover-bg utility) */
.topbar .dropdown-item { transition: background-color 0.12s ease, color 0.12s ease; }
.topbar .dropdown-item:hover,
.topbar .dropdown-item:focus { background-color: var(--surface-low); color: var(--primary); }
.topbar .dropdown-item:hover i,
.topbar .dropdown-item:focus i { color: var(--secondary); }

.topbar-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--secondary) 0%, #004f4f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

/* ── Navbar ─────────────────────────────────────────────────────────── */
.site-navbar {
    background-color: var(--surface-card);
    border-bottom: 1px solid var(--outline);
    position: sticky;
    top: var(--header-top-height);
    z-index: 1039;
    box-shadow: 0 1px 12px rgba(10,1,51,0.05);
}
.site-navbar .navbar { padding: 0; min-height: var(--header-nav-height); align-items: stretch; }
.site-navbar .navbar-collapse { align-items: stretch; }
.site-navbar .navbar-nav { align-self: stretch; align-items: stretch; }
.site-navbar .nav-item { display: flex; align-items: stretch; }

.connect-nav-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--on-surface-variant);
    padding: 0 0.15rem;
    margin: 0 0.6rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: var(--header-nav-height);
    position: relative;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
.connect-nav-link i { font-size: 0.9rem; }
.connect-nav-link::after {
    content: '';
    position: absolute;
    bottom: -1px; left: 0; right: 0;
    height: 2px;
    background-color: var(--secondary);
    transform: scaleX(0);
    transition: transform 0.25s ease;
    border-radius: 2px 2px 0 0;
}
.connect-nav-link:hover,
.connect-nav-link.active { color: var(--primary); }
.connect-nav-link:hover::after,
.connect-nav-link.active::after { transform: scaleX(1); }
.connect-nav-link.active { font-weight: 700; }

.nav-toggler {
    border: none;
    background: none;
    box-shadow: none !important;
    padding: 0.5rem;
    color: var(--primary);
}

/* ── Student switcher ───────────────────────────────────────────────── */
.student-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--surface-low);
    border: 1px solid var(--outline);
    border-radius: 100px;
    padding: 0.3rem 0.75rem 0.3rem 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.student-chip:hover,
.student-chip.show {
    border-color: var(--secondary);
    background: var(--secondary-light);
    color: var(--secondary);
}
.student-chip i { font-size: 0.8rem; color: var(--on-surface-variant); }

.student-chip-dot,
.student-dropdown-dot {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-mid) 0%, var(--primary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}
.student-dropdown-dot { width: 2rem; height: 2rem; }
.student-dropdown-dot.alt {
    background: linear-gradient(135deg, var(--secondary) 0%, #004f4f 100%);
}

.student-dropdown { min-width: 16rem; border-color: var(--outline); border-radius: 0.75rem; }
.student-dropdown-check { margin-left: auto; color: var(--secondary); }

/* ── Alert banner ───────────────────────────────────────────────────── */
.alert-banner {
    background: linear-gradient(90deg, var(--primary-container) 0%, #0d0240 100%);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* ── Hero ───────────────────────────────────────────────────────────── */
.display {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.6rem, 2.5vw, 2.4rem);
    line-height: 1.15;
    color: var(--primary);
    font-weight: 700;
}

/* ── Decorative section accent ──────────────────────────────────────── */
.section-accent {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--secondary) 0%, var(--outline) 45%);
    margin: -0.5rem 0 1.25rem;
}

/* ── Page header — compact record header (every page except the dashboard) ─ */
.page-header { background: var(--surface-card); }
.page-header-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    /*padding-top: 1rem;*/
    margin-bottom: 0.5rem;
}
.page-header-crumbs a { color: var(--on-surface-variant); text-decoration: none; }
.page-header-crumbs a:hover { color: var(--secondary); }
.page-header-crumbs i { font-size: 0.6rem; opacity: 0.5; }
.page-header-crumbs .current { color: var(--primary); font-weight: 600; }
.page-header-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    padding-bottom: 1rem;
}
.page-header-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    font-weight: 700;
    color: var(--primary);
    line-height: 1.1;
    margin: 0;
}
.page-header-sub { font-size: 0.9rem; color: var(--on-surface-variant); margin-top: 0.3rem; }
.page-header-stats { display: flex; }
.page-header-stat {
    display: flex;
    flex-direction: column;
    text-align: right;
    padding-left: 1.25rem;
    margin-left: 1.25rem;
    border-left: 1px solid var(--outline);
}
.page-header-stat:first-child { padding-left: 0; margin-left: 0; border-left: none; }
.page-header-stat-value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary);
    line-height: 1.15;
}
.page-header-stat-value.is-success { color: var(--success); }
.page-header-stat-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--on-surface-variant);
    opacity: 0.7;
}
.page-header-accent {
    height: 3px;
    background: linear-gradient(90deg, var(--secondary) 0%, var(--outline) 40%);
}

/* ── Quick access grid ──────────────────────────────────────────────── */
.quick-access {
    background: var(--surface-card);
    border-bottom: 1px solid var(--outline);
}
.qa-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
    border-radius: 0.75rem;
    text-decoration: none;
    color: var(--on-surface-variant);
    transition: background 0.2s, color 0.2s, transform 0.15s;
    text-align: center;
    position: relative;
}
.qa-tile:hover {
    background: var(--surface-low);
    color: var(--primary);
    transform: translateY(-2px);
}
.qa-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qa-icon i { font-size: 1.2rem; }
.qa-label { font-size: 0.72rem; font-weight: 600; line-height: 1.2; }

.qa-icon-teal   { background: var(--secondary-light); color: var(--secondary); }
.qa-icon-blue   { background: #e8eeff; color: #3451b2; }
.qa-icon-purple { background: #f0e8ff; color: #6b35b2; }
.qa-icon-amber  { background: #fff6e0; color: #b26a00; }
.qa-icon-green  { background: #e5f7ed; color: #1a6e3a; }
.qa-icon-rose   { background: #ffeaee; color: #a3163c; }
.qa-icon-indigo { background: #eaedff; color: #2c39b2; }
.qa-icon-slate  { background: var(--surface-low); color: var(--primary); }

.qa-badge {
    position: absolute;
    top: 0.6rem; right: 0.6rem;
    min-width: 1.1rem;
    height: 1.1rem;
    border-radius: 100px;
    background: #ff4757;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.25rem;
}

/* ── Priority icon tile (used by the progress "celebration" page) ─────── */
.priority-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.priority-icon i { font-size: 1rem; }
.pi-amber { background: #fff6e0; color: #b26a00; }

/* ── Badges ─────────────────────────────────────────────────────────── */
.connect-badge {
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 0.28em 0.65em;
    border-radius: 100px;
    white-space: nowrap;
    display: inline-block;
}
.connect-badge-urgent  { background: var(--error-container);  color: var(--on-error-container); }
.connect-badge-info    { background: #e8eeff;                      color: #0e31d0; }
.connect-badge-pending { background: var(--surface-container); color: var(--primary); }
.connect-badge-success { background: var(--success-container); color: var(--success); }
.connect-badge-new     { background: #fff0d4;                      color: #8a5200; }

/* ── Feed / Activity ────────────────────────────────────────────────── */
.feed-item {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.75rem;
    border-bottom: 1px solid var(--outline);
    transition: background 0.2s;
}
.feed-item:last-child { border-bottom: none; }
.feed-item:hover { background: var(--surface-low); }

.feed-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 0.1rem;
}
.feed-icon i { font-size: 0.9rem; }
.fi-teal  { background: var(--secondary-light); color: var(--secondary); }
.fi-blue  { background: #e8eeff; color: #3451b2; }
.fi-slate { background: var(--surface-low); color: var(--on-surface-variant); }

.feed-title { font-size: 0.82rem; font-weight: 600; color: var(--primary); margin-bottom: 0.15rem; line-height: 1.3; }
.feed-desc  { font-size: 0.75rem; color: var(--on-surface-variant); line-height: 1.5; margin-bottom: 0; }
.feed-time  { font-size: 0.68rem; color: var(--on-surface-variant); margin-top: 0.35rem; display: block; }
.feed-time-label {
    display: block;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--on-surface-variant);
    opacity: 0.7;
    margin-bottom: 0.5rem;
}
.feed-action {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.4rem;
}
.feed-action i { font-size: 0.68rem; }

/* ── View all link ──────────────────────────────────────────────────── */
.view-all {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--secondary);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    transition: gap 0.2s;
}
.view-all:hover { gap: 0.45rem; color: var(--secondary); }
.view-all i { font-size: 0.85rem; }

/* ── CTA banner ─────────────────────────────────────────────────────── */
.cta-banner {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-mid) 100%);
    border-radius: 1rem;
    padding: 1.5rem 1.75rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    right: -2rem; top: -2rem;
    width: 8rem; height: 8rem;
    border-radius: 50%;
    background: rgba(0,106,106,0.2);
}
.cta-banner-icon {
    position: absolute;
    right: 1.25rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 3.5rem;
    color: rgba(255,255,255,0.08);
    z-index: 0;
}
.cta-banner-btn {
    position: relative;
    z-index: 1;
    background: var(--secondary);
    border: none;
    border-radius: 0.3rem;
    padding: 0.55rem 1.1rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
    flex-shrink: 0;
}
.cta-banner-btn:hover { background: var(--secondary); color: #fff; }

.cta-banner-content { position: relative; z-index: 1; }
.cta-banner-label { color: rgba(255,255,255,0.82); }
.cta-banner-title { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 0.25rem; }
.cta-banner-desc { font-size: 0.8rem; color: rgba(255,255,255,0.6); margin-bottom: 0; }

/* ── Portal contents directory ──────────────────────────────────────── */
.portal-contents {
    background: var(--surface-card);
    border-top: 1px solid var(--outline);
}

.portal-contents-heading {
    display: block;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid var(--outline);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
}
/* Columns are a Bootstrap .row/.col; this only resets the list styling. */
.portal-contents-col { list-style: none; margin: 0; padding: 0; }
.portal-contents-item {
    padding-top: 0.85rem;
    padding-bottom: 0.3rem;
}
.portal-contents-item a {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: color 0.15s;
}
.portal-contents-item a:hover { color: var(--secondary); }
.portal-contents-dot { color: var(--outline); }

.portal-contents-sublist { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.portal-contents-sublist li { margin-bottom: 0.4rem; }
.portal-contents-sublist li:last-child { margin-bottom: 0; }
.portal-contents-sublist a {
    font-size: 0.8rem;
    color: var(--on-surface-variant);
    text-decoration: none;
    transition: color 0.15s;
}
.portal-contents-sublist a:hover { color: var(--secondary); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.footer {
    background-color: var(--primary);
    border-top: 3px solid var(--secondary);
}
.footer a:hover { color: var(--secondary) !important; }
.footer-divider { border-color: rgba(255,255,255,0.08); }

/* ── Student dropdown items ─────────────────────────────────────────── */
.student-dropdown-header {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--on-surface-variant);
    padding: 0.4rem 0.75rem 0.6rem;
    opacity: 0.6;
}
.student-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.5rem;
    text-decoration: none;
    color: var(--on-surface);
    font-size: 0.82rem;
    font-weight: 500;
    transition: background 0.15s;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}
.student-dropdown-item:hover {
    background: var(--surface-low);
    color: var(--primary);
}
.student-dropdown-item.active {
    background: var(--surface-container);
    color: var(--primary);
    font-weight: 700;
}

/* ── Alert banner close btn ─────────────────────────────────────────── */
.alert-close {
    background: none;
    border: none;
    color: rgba(255,255,255,0.45);
    padding: 0;
    line-height: 1;
    cursor: pointer;
    transition: color 0.2s;
}
.alert-close:hover { color: #fff; }

/* ── Cards ──────────────────────────────────────────────────────────── */
.connect-card {
    background: var(--surface-card);
    border-radius: 1rem;
    border: 1px solid var(--outline);
    overflow: hidden;
}
.connect-card-header {
    padding: 1.5rem 1.75rem 1.25rem;
    border-bottom: 1px solid var(--outline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.connect-card-body { padding: 1.75rem; }

/* Recessed inline info panel — explanatory notes, summaries, callouts.
   Sits on a card/page as a quieter, bordered block. */
.connect-inset {
    background: var(--surface-low);
    border: 1px solid var(--outline);
    border-radius: 0.75rem;
}

/* ── Data tables (shared across every page) ─────────────────────────────
   The one table style for the whole portal. Wrap in `.overflow-x-auto`
   (inside a `.connect-card`) so it scrolls sideways on narrow screens.
   Cell helpers: `.num` (right-aligned figures), `.cell-center`,
   `.is-low` (error emphasis), `.is-muted` (dimmed/placeholder),
   `.col-sticky` (first column pinned while scrolling). ── */
.connect-table { border-collapse: separate; border-spacing: 0; min-width: 560px; }
.connect-table th,
.connect-table td { padding: 0.55rem 0.75rem; white-space: nowrap; }
.connect-table thead th {
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    color: var(--on-surface-variant);
    font-weight: 700;
    border-bottom: 1px solid var(--outline);
    vertical-align: middle;
}
.connect-table tbody td { font-size: 0.82rem; border-bottom: 1px solid var(--outline); color: var(--on-surface); vertical-align: middle; }
.connect-table tbody tr:last-child td { border-bottom: none; }
.connect-table tbody tr:hover td { background: var(--surface-low); }
.connect-table tfoot th,
.connect-table tfoot td {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
    border-top: 2px solid var(--outline);
    border-bottom: none;
}
/* Cell alignment / emphasis helpers */
.connect-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.connect-table .cell-center { text-align: center; }
.connect-table .is-low { color: var(--on-error-container); font-weight: 700; }
.connect-table .is-muted { color: var(--on-surface-variant); }
/* Sticky first column stays readable while the table scrolls sideways */
.connect-table .col-sticky {
    position: sticky;
    left: 0;
    background: var(--surface-card);
    color: var(--primary);
    font-weight: 600;
}
.connect-table tbody tr:hover .col-sticky { background: var(--surface-low); }
.connect-table tfoot .col-sticky { background: var(--surface-card); }
/* Grade / inline action links inside a table cell use the teal accent */
.connect-table a { color: var(--secondary); text-decoration: none; font-weight: 600; }
.connect-table a:hover { text-decoration: underline; }

/* Brand-token status text colours (icons, inline emphasis) */
.text-positive { color: var(--success); }
.text-negative { color: var(--error); }

/* ── Section layout utilities ───────────────────────────────────────── */
.section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* ── Announcement items ─────────────────────────────────────────────── */
.announce-item {
    padding: 1.1rem 1.75rem;
    border-bottom: 1px solid var(--outline);
}
.announce-item:last-child {
    border-bottom: none;
}

/* ── Mobile bottom tab nav ──────────────────────────────────────────── */
.mobile-bottom-nav {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 1050;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--outline);
    box-shadow: 0 -2px 20px rgba(10,1,51,0.07);
    display: flex;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mobile-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.6rem 0.25rem 0.5rem;
    text-decoration: none;
    color: var(--on-surface-variant);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    gap: 0.22rem;
    transition: color 0.18s;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
.mobile-bottom-nav .dropup { flex: 1; display: flex; }
.mobile-bottom-nav .dropup .mobile-tab { border: none; background: none; }
.mobile-tab i { font-size: 1.2rem; line-height: 1; }
.mobile-tab span { line-height: 1; }
.mobile-tab.active { color: var(--secondary); }
.mobile-tab.active::before {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2.5px;
    background: var(--secondary);
    border-radius: 0 0 3px 3px;
}

/* body padding for bottom nav — only needed on mobile */
@media (max-width: 991.98px) {
    body.connect { padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
    .cta-banner { flex-direction: column; align-items: flex-start; gap: 0.85rem; }
    .cta-banner-btn { width: 100%; text-align: center; }
}

/* ── Scrollbar ──────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--outline); border-radius: 10px; }

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .qa-tile:hover,
    .att-cell:hover {
        transform: none;
    }
}