/* File: EnrollmentSystem.UI/wwwroot/css/site.css */

:root {
    --primary: #0194fe; /* school blue   */
    --secondary: #fdfc01; /* school yellow */
    --ink: #260b6a; /* text & buttons */
    --primary-soft: #e6f4ff;
    --secondary-soft: #fffde3;
    --bg: #f3f4f6;
    --card: #ffffff;
    --border: #e5e7eb;
    --muted: #6b7280;
    --sidebar-w: 264px;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: 'Segoe UI', system-ui, -apple-system, Roboto, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--ink);
    font-weight: 700;
}

a {
    color: var(--primary);
    text-decoration: none;
}

    a:hover {
        text-decoration: underline;
    }

/* ---------- App shell ---------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.sidebar {
    width: var(--sidebar-w);
    background: var(--card);
    border-right: 1px solid var(--border);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    padding: 18px 14px;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 16px;
    border-bottom: 1px solid var(--border);
}

    .sidebar-brand img {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    .sidebar-brand .title {
        font-size: 15px;
        font-weight: 800;
        color: var(--ink);
        line-height: 1.1;
    }

    .sidebar-brand .subtitle {
        font-size: 11px;
        color: var(--muted);
    }

.user-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--primary-soft);
    border-radius: 12px;
    padding: 10px 12px;
    margin: 16px 4px;
}

.avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
}

.user-card .name {
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
}

.user-card .role {
    font-size: 11px;
    color: var(--muted);
}

.nav-group-label {
    font-size: 10px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
    margin: 16px 10px 6px;
}

.nav-link-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--ink);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 2px;
}

    .nav-link-item:hover {
        background: var(--primary-soft);
        text-decoration: none;
    }

    .nav-link-item.active {
        background: var(--primary);
        color: #fff;
    }

    .nav-link-item .icon {
        width: 18px;
        text-align: center;
    }

.sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.sign-out {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #dc2626;
    font-weight: 700;
    padding: 10px 12px;
}

    .sign-out:hover {
        text-decoration: none;
        background: #fef2f2;
        border-radius: 10px;
    }

/* ---------- Main content ---------- */
.main-content {
    margin-left: var(--sidebar-w);
    flex: 1;
    padding: 28px 32px;
    width: calc(100% - var(--sidebar-w));
}

.page-title {
    font-size: 30px;
    margin: 0 0 4px;
}

.page-subtitle {
    color: var(--muted);
    margin-bottom: 24px;
}

/* ---------- Stat cards ---------- */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 26px;
}

.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

.stat-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

    .stat-icon.blue {
        background: var(--primary-soft);
        color: var(--primary);
    }

    .stat-icon.yellow {
        background: var(--secondary-soft);
        color: #b59f00;
    }

    .stat-icon.ink {
        background: #eee9fb;
        color: var(--ink);
    }

.stat-value {
    font-size: 26px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1;
}

.stat-label {
    font-size: 13px;
    color: var(--muted);
    margin-top: 4px;
}

/* ---------- Content cards ---------- */
.content-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 22px;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
}

    .content-card h3 {
        font-size: 18px;
        margin: 0 0 16px;
    }

/* ---------- Buttons (text always --ink per brand) ---------- */
.btn {
    border-radius: 10px;
    font-weight: 700;
    padding: 10px 18px;
    border: none;
    cursor: pointer;
}

.btn-brand {
    background: var(--primary);
    color: var(--ink);
}

    .btn-brand:hover {
        background: #0182e0;
        color: var(--ink);
    }

.btn-accent {
    background: var(--secondary);
    color: var(--ink);
}

    .btn-accent:hover {
        background: #ecec00;
        color: var(--ink);
    }

.btn-ink {
    background: var(--ink);
    color: #fff;
}

    .btn-ink:hover {
        background: #1c084f;
        color: #fff;
    }

.btn-outline-brand {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--primary);
}

    .btn-outline-brand:hover {
        background: var(--primary-soft);
    }

/* ---------- Forms ---------- */
.form-label {
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}

.form-control, .form-select {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    width: 100%;
    color: var(--ink);
    background: #fff;
    font-size: 14px;
}

    .form-control:focus, .form-select:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px var(--primary-soft);
    }

/* ---------- Tables ---------- */
/* ---------- Tables ---------- */
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--card);
}

    .table thead th {
        text-align: left;
        font-size: 11.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--ink);
        background: var(--primary-soft);
        padding: 14px 16px;
        border-bottom: 1px solid var(--border);
        white-space: nowrap;
    }

    .table td {
        padding: 13px 16px;
        border-bottom: 1px solid #eef0f3;
        color: var(--ink);
        font-size: 14px;
        vertical-align: middle;
    }

    .table tbody td:first-child {
        font-weight: 600;
    }

    .table tbody tr:nth-child(even) td {
        background: #fafbfc;
    }

    .table tbody tr:last-child td {
        border-bottom: none;
    }

    .table tbody tr:hover td {
        background: var(--primary-soft);
    }
    /* Rows that navigate on click show a pointer cursor */
    .table tbody tr[data-href] {
        cursor: pointer;
    }

/* ---------- Badges ---------- */
.badge-status {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge-pending {
    background: var(--secondary-soft);
    color: #8a7a00;
}

.badge-approved, .badge-enrolled, .badge-verified {
    background: #e6f7ec;
    color: #157347;
}

.badge-rejected {
    background: #fdecec;
    color: #c0392b;
}

/* ---------- Auth pages ---------- */
.auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.auth-card {
    width: 100%;
    max-width: 430px;
    background: var(--card);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(38,11,106,.10);
    padding: 34px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 18px;
}

    .auth-logo img {
        width: 84px;
        height: 84px;
        object-fit: contain;
    }

.auth-title {
    text-align: center;
    font-size: 22px;
    color: var(--primary);
    font-weight: 800;
}

.auth-sub {
    text-align: center;
    color: var(--muted);
    font-size: 13px;
    margin-bottom: 22px;
}

.alert {
    border-radius: 10px;
    padding: 12px 14px;
    margin-bottom: 16px;
    font-size: 14px;
}

.alert-danger {
    background: #fdecec;
    color: #c0392b;
}

.alert-success {
    background: #e6f7ec;
    color: #157347;
}

.text-validation {
    color: #c0392b;
    font-size: 12px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
        transition: transform .2s;
        z-index: 50;
    }

        .sidebar.open {
            transform: translateX(0);
        }

    .main-content {
        margin-left: 0;
        width: 100%;
        padding: 18px;
    }
}
/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */

/* ---------- Lucide icons ---------- */
[data-lucide] {
    display: inline-block;
    vertical-align: middle;
}

.nav-link-item svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.sign-out svg {
    width: 18px;
    height: 18px;
}

.stat-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
}

.content-card h3 svg {
    width: 20px;
    height: 20px;
    vertical-align: -3px;
    margin-right: 6px;
}

.sidebar-brand svg {
    width: 20px;
    height: 20px;
}
/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */

/* ---------- Public homepage ---------- */
.public-header {
    background: #fff;
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 40;
}

.public-nav {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
}

.public-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .public-brand img {
        width: 46px;
        height: 46px;
        object-fit: contain;
    }

    .public-brand .n1 {
        font-weight: 800;
        color: var(--ink);
        font-size: 16px;
        line-height: 1.1;
    }

    .public-brand .n2 {
        font-size: 12px;
        color: var(--muted);
    }

.public-links {
    display: flex;
    align-items: center;
    gap: 18px;
}

    .public-links a {
        color: var(--ink);
        font-weight: 600;
        font-size: 14px;
    }

.hero {
    background: linear-gradient(135deg, var(--primary) 0%, #016fd0 100%);
    color: #fff;
}

.hero-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 70px 20px;
    text-align: center;
}

.hero h1 {
    color: #fff;
    font-size: 40px;
    margin: 0 0 10px;
}

.hero p {
    color: #eaf5ff;
    font-size: 18px;
    max-width: 680px;
    margin: 0 auto 26px;
}

.hero .btn-accent {
    font-size: 16px;
    padding: 14px 30px;
}

.public-section {
    max-width: 1140px;
    margin: 0 auto;
    padding: 46px 20px;
}

    .public-section h2 {
        text-align: center;
        font-size: 26px;
        margin-bottom: 6px;
    }

    .public-section .lead {
        text-align: center;
        color: var(--muted);
        margin-bottom: 30px;
    }

.req-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}

.req-card {
    flex: 1 1 200px;
    max-width: 240px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

    .req-card .ic {
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: var(--primary-soft);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

.schedule-row {
    display: flex;
    justify-content: space-between;
    padding: 14px 4px;
    border-bottom: 1px solid var(--border);
}

.public-footer {
    background: var(--ink);
    color: #cdc7e6;
    text-align: center;
    padding: 26px 20px;
    font-size: 13px;
}

/* ---------- Onboarding wizard steps ---------- */
.steps {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 24px;
}

.step {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 600;
}

    .step .dot {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--border);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .step.active .dot {
        background: var(--primary);
    }

    .step.active {
        color: var(--ink);
    }

    .step.done .dot {
        background: #157347;
    }

/* ---------- Topbar + notification bell ---------- */
.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -8px 0 18px;
}

.topbar-title {
    font-weight: 700;
    color: var(--muted);
    font-size: 14px;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bell-btn {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
}

    .bell-btn svg {
        width: 20px;
        height: 20px;
    }

.bell-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #dc2626;
    color: #fff;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.notif-menu {
    width: 340px;
    max-height: 420px;
    overflow-y: auto;
    padding: 0;
}

.notif-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
}

.notif-item {
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
}

    .notif-item.unread {
        background: var(--primary-soft);
    }

    .notif-item .t {
        font-weight: 700;
        font-size: 14px;
        color: var(--ink);
    }

    .notif-item .m {
        font-size: 13px;
        color: var(--muted);
    }

    .notif-item .d {
        font-size: 11px;
        color: var(--muted);
        margin-top: 4px;
    }

/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */

/* ---------- Status tracker ---------- */
.tracker {
    display: flex;
    margin: 22px 0 6px;
}

.tracker-step {
    flex: 1;
    text-align: center;
    position: relative;
}

    .tracker-step::before {
        content: "";
        position: absolute;
        top: 15px;
        left: -50%;
        width: 100%;
        height: 3px;
        background: var(--border);
        z-index: 0;
    }

    .tracker-step:first-child::before {
        display: none;
    }

    .tracker-step.done::before, .tracker-step.active::before {
        background: var(--primary);
    }

    .tracker-step .circle {
        position: relative;
        z-index: 1;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: var(--border);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 6px;
        font-weight: 700;
        font-size: 13px;
    }

    .tracker-step.done .circle {
        background: #157347;
    }

    .tracker-step.active .circle {
        background: var(--primary);
    }

    .tracker-step .lbl {
        font-size: 12px;
        color: var(--muted);
    }

    .tracker-step.active .lbl, .tracker-step.done .lbl {
        color: var(--ink);
        font-weight: 600;
    }

/* ---------- Requirement / review rows ---------- */
.req-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

    .req-row:last-child {
        border-bottom: none;
    }

.req-upload {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Bootstrap grid helpers already ship with bootstrap.min.css (row / col-md-*) */

/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */
.btn-success {
    background: #16a34a;
    color: #fff;
}

    .btn-success:hover {
        background: #15803d;
        color: #fff;
    }

.btn-danger {
    background: #dc2626;
    color: #fff;
}

    .btn-danger:hover {
        background: #b91c1c;
        color: #fff;
    }

/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */

/* Weekly calendar */
.cal-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.cal-day {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
    min-height: 130px;
}

    .cal-day h4 {
        margin: 0 0 10px;
        font-size: 14px;
        color: var(--primary);
    }

.cal-event {
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
    border-radius: 8px;
    padding: 8px 10px;
    margin-bottom: 8px;
}

    .cal-event .t {
        font-weight: 700;
        color: var(--ink);
        font-size: 13px;
    }

    .cal-event .m {
        color: var(--muted);
        font-size: 12px;
    }

/* Empty states */
.empty-state {
    text-align: center;
    padding: 30px 10px;
    color: var(--muted);
}

    .empty-state svg {
        width: 40px;
        height: 40px;
        margin-bottom: 8px;
        color: var(--border);
    }

    .empty-state p {
        margin: 0;
    }

/* Nicer nav hover/active */
.nav-link-item {
    transition: background .12s ease, color .12s ease;
}

    .nav-link-item.active svg {
        color: #fff;
    }

.stat-card {
    transition: transform .12s ease, box-shadow .12s ease;
}

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(16,24,40,.08);
    }

a.content-card:hover {
    border-color: var(--primary);
}

@media (max-width: 900px) {
    .cal-grid {
        grid-template-columns: 1fr 1fr;
    }
}
/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */

/* ---------- Monthly calendar ---------- */
.month-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.month-nav {
    display: flex;
    gap: 6px;
    align-items: center;
}

    .month-nav a {
        border: 1px solid var(--border);
        background: #fff;
        border-radius: 8px;
        padding: 6px 9px;
        color: var(--ink);
        font-weight: 600;
        display: inline-flex;
        align-items: center;
    }

        .month-nav a svg {
            width: 16px;
            height: 16px;
        }

    .month-nav .today {
        color: var(--primary);
    }

.month-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--ink);
}

.month-grid {
    display: grid;
    grid-template-columns: repeat(7,1fr);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
}

.month-dow {
    background: var(--ink);
    color: #fff;
    padding: 9px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
}

.month-cell {
    min-height: 104px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    padding: 6px;
    position: relative;
}

    .month-cell .num {
        font-size: 12px;
        color: var(--ink);
        position: absolute;
        top: 6px;
        right: 8px;
    }

    .month-cell.dim {
        background: #f8fafc;
    }

        .month-cell.dim .num {
            color: #c7ccd6;
        }

    .month-cell.today .num {
        background: var(--secondary);
        color: var(--ink);
        border-radius: 50%;
        width: 22px;
        height: 22px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        top: 5px;
        right: 6px;
    }

.m-event {
    margin-top: 20px;
    margin-bottom: 3px;
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    color: var(--ink);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

    .m-event + .m-event {
        margin-top: 3px;
    }

.m-more {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
}

/* ---------- Page banner (My Classes) ---------- */
.page-banner {
    background: var(--primary);
    color: #fff;
    border-radius: 16px;
    padding: 22px 24px;
    margin-bottom: 18px;
}

    .page-banner .chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        background: rgba(255,255,255,.15);
        color: var(--secondary);
        font-weight: 700;
        font-size: 12px;
        padding: 4px 12px;
        border-radius: 999px;
        margin-bottom: 10px;
    }

        .page-banner .chip svg {
            width: 14px;
            height: 14px;
        }

    .page-banner h1 {
        color: #fff;
        margin: 0;
        font-size: 26px;
    }

    .page-banner p {
        color: #e7eefc;
        margin: 6px 0 0;
        font-size: 14px;
        max-width: 720px;
    }

/* ---------- Class cards ---------- */
.class-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    gap: 16px;
}

.class-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px;
}

    .class-card .title {
        color: var(--primary);
        font-weight: 800;
        font-size: 16px;
    }

    .class-card .sec {
        color: var(--ink);
        font-weight: 600;
        font-size: 13px;
        margin-top: 2px;
    }

    .class-card .fac {
        color: var(--ink);
        font-size: 13px;
        margin-top: 6px;
    }

    .class-card .meta {
        border-top: 1px solid var(--border);
        margin-top: 12px;
        padding-top: 10px;
    }

    .class-card .row2 {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 13px;
        color: var(--muted);
        margin-bottom: 5px;
    }

        .class-card .row2 svg {
            width: 14px;
            height: 14px;
        }
/* Clickable subject card (renders as a link but looks like a card) */
a.class-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    a.class-card-link:hover {
        border-color: var(--primary);
        box-shadow: 0 6px 18px rgba(1,148,254,.15);
        transform: translateY(-2px);
    }

.class-card-cta {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--primary);
    font-weight: 700;
    font-size: 13px;
}

    .class-card-cta i {
        width: 16px;
        height: 16px;
    }

.class-actions {
    display: flex;
    gap: 6px;
    margin-top: 12px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ---------- Weekly timetable ---------- */
/* ---------- Weekly timetable ---------- */
.tt-card {
    --tt-slot: 18px; /* height of one 15-minute row */
}

.tt-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

    .tt-header h3 {
        margin: 0;
    }

.tt-range {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--muted);
}

    .tt-range svg {
        width: 15px;
        height: 15px;
    }

/* The wrapper scrolls on small screens, so the card itself keeps its rounded corners. */
.tt-scroll {
    overflow-x: auto;
}

.timetable {
    display: grid;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    min-width: 640px;
}

.tt-corner, .tt-dayhead {
    background: #f4f6fb;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
}

.tt-corner {
    grid-row: 1;
    grid-column: 1;
}

.tt-day-short {
    display: none;
}

.tt-time {
    font-size: 11px;
    color: var(--muted);
    text-align: right;
    padding: 4px 8px 0 0;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.tt-cell {
    position: relative;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

    .tt-cell::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        border-top: 1px dashed #eef1f5;
    }

/* The outer border already closes the grid, so the last column and last row drop theirs. */
.timetable .tt-last {
    border-right: 0;
}

.timetable .tt-bottom {
    border-bottom: 0;
}

.tt-event {
    margin: 1px 4px;
    border-radius: 6px;
    background: var(--primary-soft);
    border-left: 3px solid var(--primary);
    padding: 2px 8px;
    font-size: 11px;
    line-height: 16px;
    overflow: hidden;
    z-index: 1;
    min-width: 0;
}

    .tt-event .c {
        font-weight: 800;
        color: var(--ink);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tt-event .t,
    .tt-event .s {
        color: var(--muted);
        font-size: 10.5px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

/* Clickable timetable block */
a.tt-event-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: box-shadow .12s ease, background-color .12s ease;
}

    a.tt-event-link:hover {
        background: #d6ecff;
        box-shadow: 0 3px 10px rgba(1,148,254,.20);
    }

/* Grouped class list under the timetable */
.tt-list .tt-line + .tt-line {
    margin-top: 4px;
}

.tt-list td {
    vertical-align: top;
}

@media (max-width: 768px) {
    .tt-day-full {
        display: none;
    }

    .tt-day-short {
        display: inline;
    }
}

/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */
.btn-outline-success {
    background: transparent;
    color: #157347;
    border: 2px solid #16a34a;
}

    .btn-outline-success:hover {
        background: #e6f7ec;
        color: #157347;
    }

.btn-outline-danger {
    background: transparent;
    color: #c0392b;
    border: 2px solid #dc2626;
}

    .btn-outline-danger:hover {
        background: #fdecec;
        color: #c0392b;
    }

.btn:disabled {
    opacity: .85;
    cursor: default;
}

/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */

/* Hero with campus photo + brand overlay */
.hero {
    background: linear-gradient(135deg, rgba(1,148,254,.92) 0%, rgba(38,11,106,.88) 100%), url('/images/school.jpg') center/cover no-repeat;
}

/* Yellow tagline band */
.tagline-band {
    background: var(--secondary);
    color: var(--ink);
    text-align: center;
    padding: 16px 20px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: 18px;
}

/* About section */
.about-section {
    max-width: 1140px;
    margin: 0 auto;
    padding: 52px 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    align-items: center;
}

.about-photo img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 12px 34px rgba(38,11,106,.18);
    display: block;
}

.about-text h2 {
    text-align: left;
    font-size: 26px;
    margin-bottom: 6px;
}

.about-text .sub {
    color: var(--muted);
    font-style: italic;
    margin-bottom: 14px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

    .info-list li {
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 9px 0;
        border-bottom: 1px solid var(--border);
        font-size: 14px;
        color: var(--ink);
    }

        .info-list li svg {
            width: 18px;
            height: 18px;
            color: var(--primary);
            flex: 0 0 auto;
            margin-top: 2px;
        }

/* Rich footer */
.public-footer-rich {
    background: var(--ink);
    color: #cdc7e6;
}

.footer-cols {
    max-width: 1140px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 30px;
    padding: 40px 20px 24px;
}

    .footer-cols h4 {
        color: #fff;
        font-size: 15px;
        margin: 0 0 12px;
    }

    .footer-cols p {
        color: #cdc7e6;
        font-size: 13px;
        margin: 0 0 8px;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

        .footer-cols p svg {
            width: 15px;
            height: 15px;
            color: var(--secondary);
            flex: 0 0 auto;
            margin-top: 2px;
        }

    .footer-cols a {
        color: #cdc7e6;
        text-decoration: none;
    }

        .footer-cols a:hover {
            color: #fff;
        }

.footer-brand {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 10px;
}

    .footer-brand img {
        width: 52px;
        height: 52px;
        object-fit: contain;
    }

    .footer-brand .fn {
        color: #fff;
        font-weight: 800;
        font-size: 15px;
    }

.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.12);
    text-align: center;
    padding: 16px;
    font-size: 12px;
    color: #a99fd0;
}

@media (max-width:820px) {
    .about-section, .footer-cols {
        grid-template-columns: 1fr;
    }
}

/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */

/* ---- Split hero (replaces gradient) ---- */
/* ===== Public homepage — hero with campus photo ===== */

    /* Lighter veil so the campus photo actually reads through */
    .hero2.hero2-photo::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255,255,255,.74) 0%, rgba(255,255,255,.66) 45%, rgba(243,244,246,.88) 100%);
    }

    .hero2.hero2-photo .hero2-inner {
        position: relative;
        z-index: 1;
        width: 100%;
        text-align: center;
    }

    /* Extra punch so text stays crisp over the photo */
    .hero2.hero2-photo h1 {
        text-shadow: 0 2px 14px rgba(255,255,255,.9);
    }

    .hero2.hero2-photo .hero2-badge {
        background: rgba(255,255,255,.92);
        box-shadow: 0 2px 10px rgba(16,24,40,.10);
    }

/* ===== Public homepage — two panels side by side ===== */
.public-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    max-width: 1180px;
    margin: 0 auto;
}

    .public-duo .panel-card {
        max-width: none;
        width: 100%;
        margin: 0;
    }

    /* Keep the announcements column from running away in height */
    .public-duo #announcements .panel-body {
        max-height: 400px;
        overflow-y: auto;
    }

@media (max-width: 900px) {
    .public-duo {
        grid-template-columns: 1fr;
    }

    .hero2.hero2-photo {
        min-height: 420px;
    }
}

.btn-outline-ink {
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--ink);
}

    .btn-outline-ink:hover {
        background: var(--ink);
        color: #fff;
    }

/* ---- Requirements: numbered cards (no icon squares) ---- */
.req-list {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    gap: 16px;
    max-width: 1040px;
    margin: 0 auto;
}

.req-item {
    position: relative;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 18px 18px;
    overflow: hidden;
    text-align: left;
}

    .req-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: var(--primary);
    }

.req-num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--ink);
    color: var(--secondary);
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
}

.req-item strong {
    display: block;
    color: var(--ink);
    font-size: 15px;
}

.req-sub {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
}

/* ---- Paneled cards (schedule / announcements) ---- */
.panel-card {
    max-width: 740px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(16,24,40,.07);
}

.panel-head {
    background: var(--primary);
    color: #fff;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .03em;
    padding: 14px 22px;
    text-transform: uppercase;
}

    .panel-head.ink {
        background: var(--ink);
    }

.panel-body {
    padding: 6px 22px 14px;
}

.sched-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 2px;
    border-bottom: 1px solid var(--border);
    font-size: 14px;
}

    .sched-row:last-child {
        border-bottom: none;
    }

    .sched-row .lbl {
        font-weight: 700;
        color: var(--ink);
    }

    .sched-row .val {
        color: var(--muted);
    }

.announce-item {
    padding: 14px 2px;
    border-bottom: 1px solid var(--border);
}

    .announce-item:last-child {
        border-bottom: none;
    }

    .announce-item .t {
        font-weight: 700;
        color: var(--ink);
    }

    .announce-item .d {
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
        margin-left: 12px;
    }

    .announce-item .c {
        color: var(--muted);
        font-size: 14px;
        margin-top: 4px;
    }

.announce-empty {
    text-align: center;
    color: var(--muted);
    padding: 26px;
}

@media (max-width:820px) {
    .hero2-inner {
        grid-template-columns: 1fr;
    }

    .hero2-text h1 {
        font-size: 32px;
    }
}

/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */

/* Softer hero badge (blue, not yellow) + tagline line */
.hero2-badge {
    background: var(--primary-soft);
    color: var(--primary);
}

.hero2-tag {
    color: var(--ink);
    font-style: italic;
    font-weight: 600;
    margin: -4px 0 10px;
}

/* Feature strip (replaces repeated campus photo/About) */
.features {
    max-width: 1140px;
    margin: 0 auto;
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
}

.feature {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 24px;
}

    .feature .fi {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        background: var(--primary-soft);
        color: var(--primary);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 12px;
    }

        .feature .fi svg {
            width: 22px;
            height: 22px;
        }

    .feature h3 {
        font-size: 16px;
        margin: 0 0 6px;
        color: var(--ink);
    }

    .feature p {
        color: var(--muted);
        font-size: 14px;
        margin: 0;
    }

@media (max-width:820px) {
    .features {
        grid-template-columns: 1fr;
    }
}

/* ===== Centered text hero + bigger panels (keep LAST) ===== */

/* Center the hero now that the photo is gone */
.hero2-centered {
    display: block;
    text-align: center;
    max-width: 820px;
    padding: 72px 20px;
}

    .hero2-centered .hero2-text p,
    .hero2-centered p,
    .hero2-centered .hero2-tag {
        margin-left: auto;
        margin-right: auto;
    }

    .hero2-centered .hero2-cta {
        justify-content: center;
    }

/* Bigger Schedule / Announcements panels */
.panel-lg {
    max-width: 920px;
}

    .panel-lg .panel-head {
        font-size: 18px;
        padding: 18px 28px;
        letter-spacing: .04em;
    }

    .panel-lg .panel-body {
        padding: 10px 28px 22px;
    }

    .panel-lg .sched-row {
        padding: 20px 4px;
        font-size: 16px;
    }

    .panel-lg .announce-item {
        padding: 20px 4px;
    }

        .panel-lg .announce-item .t {
            font-size: 17px;
        }

        .panel-lg .announce-item .c {
            font-size: 15px;
            margin-top: 6px;
        }

    .panel-lg .announce-empty {
        padding: 40px;
        font-size: 15px;
    }
/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */

/* Even, full-width section card buttons */
.section-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 16px;
}

    .section-actions .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 9px 12px;
        font-size: 13px;
    }

        .section-actions .btn svg {
            width: 16px;
            height: 16px;
        }

/* Buttons that are links should never underline */
a.btn, a.btn:hover {
    text-decoration: none;
}
/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at end) */
.chart-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 22px;
}

    .chart-grid .content-card {
        display: flex;
        flex-direction: column;
    }

    .chart-grid canvas {
        max-height: 260px;
        min-height: 220px;
    }

@media (max-width: 900px) {
    .chart-grid {
        grid-template-columns: 1fr;
    }
}
/* ===== Printable documents (report card / class list) ===== */
.print-header {
    display: none;
}

@media print {
    .sidebar, .topbar, .sidebar-footer, .no-print {
        display: none !important;
    }

    .app-shell {
        display: block !important;
    }

    .main-content {
        margin: 0 !important;
        padding: 0 !important;
    }

    body {
        background: #fff !important;
    }

    .content-card {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 12px 0 !important;
        break-inside: avoid;
    }

    .page-title {
        display: none !important;
    }

    .print-header {
        display: flex !important;
        align-items: center;
        gap: 14px;
        border-bottom: 3px solid #0194fe;
        padding-bottom: 10px;
        margin-bottom: 16px;
        color: #260b6a;
    }

        .print-header img {
            height: 60px;
        }

        .print-header h2 {
            margin: 0;
            font-size: 18px;
        }

        .print-header p {
            margin: 2px 0;
            font-size: 11px;
            color: #555;
        }

    .table th, .table td {
        border: 1px solid #94a3b8 !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    .table th {
        background: #0194fe !important;
        color: #fff !important;
    }

    .print-signatures {
        display: flex !important;
        justify-content: space-between;
        margin-top: 56px;
    }

        .print-signatures div {
            width: 40%;
            text-align: center;
        }

        .print-signatures .line {
            border-top: 1px solid #260b6a;
            padding-top: 6px;
            font-size: 11px;
        }

    @page {
        margin: 16mm;
    }
}
/* Clickable announcement list item */
/* Clickable announcement list item */
a.announce-link {
    display: block;
    position: relative;
    text-decoration: none;
    color: inherit;
    border-radius: 10px;
    padding-right: 36px !important;
    transition: background .12s ease;
}

    a.announce-link:hover {
        background: var(--primary-soft);
    }

    /* Chevron affordance */
    a.announce-link::after {
        content: "›";
        position: absolute;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: var(--border);
        font-size: 22px;
        font-weight: 700;
        line-height: 1;
    }

    a.announce-link:hover::after {
        color: var(--primary);
    }

    a.announce-link:hover strong {
        color: var(--primary);
    }
/* ===== Student / entity detail grid ===== */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 28px;
}

    .detail-grid > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

.detail-label {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    font-weight: 700;
}

.detail-value {
    font-size: 15px;
    color: var(--ink);
}

@media (max-width: 720px) {
    .detail-grid {
        grid-template-columns: 1fr;
    }
}
/* ===== Audit-log viewer ===== */
.audit-filter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 14px;
    align-items: end;
}

    .audit-filter .audit-filter-keyword {
        grid-column: span 2;
    }

    .audit-filter .audit-filter-actions {
        grid-column: span 2;
        display: flex;
        gap: 8px;
        align-items: end;
    }

.audit-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
}

.audit-pager-info {
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}

@media (max-width: 900px) {
    .audit-filter {
        grid-template-columns: repeat(2, 1fr);
    }

        .audit-filter .audit-filter-keyword,
        .audit-filter .audit-filter-actions {
            grid-column: span 2;
        }
}
/* ===== Toast notifications ===== */
#toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 3000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.toast {
    min-width: 260px;
    max-width: 380px;
    padding: 14px 16px;
    border-radius: 10px;
    color: #fff;
    box-shadow: 0 6px 20px rgba(16,24,40,.20);
    font-weight: 600;
    font-size: 14px;
    animation: toastIn .25s ease;
}

    .toast.success {
        background: #16a34a;
    }

    .toast.error {
        background: #dc2626;
    }

    .toast.info {
        background: var(--primary);
    }

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ===== Confirm modal ===== */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16,24,40,.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 3100;
    padding: 16px;
}

    .modal-overlay.open {
        display: flex;
    }

.modal-box {
    background: #fff;
    border-radius: 14px;
    padding: 26px;
    max-width: 420px;
    width: 100%;
    box-shadow: 0 16px 48px rgba(16,24,40,.28);
    animation: toastIn .18s ease;
}

    .modal-box h3 {
        margin: 0 0 8px;
        color: var(--ink);
    }

    .modal-box p {
        color: var(--muted);
        margin: 0 0 22px;
        font-size: 15px;
    }

.modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
/* ===== Public homepage — hero with campus photo ===== */
/* ===== Public homepage — hero with campus photo ===== */
/* ===== Public homepage — hero with campus photo ===== */
.hero2.hero2-photo {
    position: relative;
    background-image: url('/images/school.jpg');
    background-size: cover;
    background-position: center 55%;
    background-repeat: no-repeat;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    overflow: hidden;
}

    /* Indigo brand scrim — keeps the campus readable behind white text */
    .hero2.hero2-photo::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(38,11,106,.84) 0%, rgba(38,11,106,.74) 50%, rgba(38,11,106,.90) 100%);
    }

    /* No frosted panel — text sits straight on the image */
    .hero2.hero2-photo .hero2-inner {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 820px;
        margin: 0 auto;
        text-align: center;
        background: none;
        border: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        padding: 0;
    }

    .hero2.hero2-photo h1 {
        color: #fff;
        text-shadow: 0 2px 24px rgba(0,0,0,.35);
    }

        .hero2.hero2-photo h1 span { color: var(--secondary); }

    .hero2.hero2-photo p { color: rgba(255,255,255,.90); }

    .hero2.hero2-photo .hero2-tag {
        color: rgba(255,255,255,.95);
        font-weight: 600;
    }

    .hero2.hero2-photo .hero2-badge {
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.38);
        color: #fff;
        box-shadow: none;
    }

    /* Sign In button needs to read on dark */
    .hero2.hero2-photo .btn-outline-ink {
        border: 2px solid rgba(255,255,255,.85);
        color: #fff;
        background: transparent;
    }

        .hero2.hero2-photo .btn-outline-ink:hover {
            background: rgba(255,255,255,.16);
            color: #fff;
        }

@media (max-width: 900px) {
    .hero2.hero2-photo { min-height: 440px; padding: 44px 16px; }
}

/* ===== Public homepage — schedule & announcement panels ===== */
.panel-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(16,24,40,.06);
    overflow: hidden;
}

.panel-head,
.panel-head.ink {
    background: #fff;
    color: var(--ink);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 22px 26px 16px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

    /* Accent bar replaces the heavy solid header */
    .panel-head::before {
        content: "";
        width: 4px;
        height: 18px;
        border-radius: 999px;
        background: var(--primary);
        flex: none;
    }

    .panel-head.ink::before {
        background: var(--secondary);
    }

.panel-body {
    padding: 10px 22px 20px;
}

/* Schedule rows */
.sched-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 15px 12px;
    border-bottom: 1px solid #f1f2f5;
    border-radius: 10px;
    transition: background .12s ease;
}

    .sched-row:last-child {
        border-bottom: none;
    }

    .sched-row:hover {
        background: var(--primary-soft);
    }

    .sched-row .lbl {
        font-weight: 700;
        color: var(--ink);
        font-size: 15px;
    }

    .sched-row .val {
        background: var(--primary-soft);
        color: #0b6bb3;
        font-weight: 700;
        font-size: 13px;
        padding: 6px 12px;
        border-radius: 999px;
        white-space: nowrap;
    }

/* Announcement items */
.announce-item {
    padding: 16px 12px;
    border-bottom: 1px solid #f1f2f5;
    border-radius: 10px;
    transition: background .12s ease;
}

    .announce-item:last-child {
        border-bottom: none;
    }

    .announce-item:hover {
        background: var(--primary-soft);
    }

    .announce-item .t {
        font-weight: 800;
        color: var(--ink);
        font-size: 15px;
    }

    .announce-item .d {
        background: #f3f4f6;
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
        padding: 5px 10px;
        border-radius: 999px;
        white-space: nowrap;
    }

    .announce-item .c {
        color: var(--muted);
        font-size: 14px;
        margin-top: 6px;
        line-height: 1.55;
    }

.announce-empty {
    padding: 24px 12px;
    color: var(--muted);
    text-align: center;
}

@media (max-width: 640px) {
    .sched-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
}
/* ===== Public homepage — hero (text only) ===== */
/* ===== Public homepage — hero ===== */
.hero2 {
    background: var(--ink);
    border-bottom: none;
}

.hero2-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 56px 20px;
}

.hero2-centered {
    display: block;
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
    padding: 64px 20px 56px;
}

    .hero2-centered h1 {
        color: #fff;
        font-size: 40px;
        line-height: 1.15;
        margin: 14px 0 8px;
    }

        .hero2-centered h1 span {
            color: var(--secondary);
        }

    .hero2-centered p {
        color: rgba(255,255,255,.92);
        font-size: 16px;
        max-width: 620px;
        margin: 0 auto 8px;
    }

    .hero2-centered .hero2-tag {
        color: #fff;
        font-style: italic;
        font-weight: 600;
    }

    .hero2-centered .hero2-cta {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-top: 22px;
    }

/* Badge + Sign In button need to read on blue */
.hero2 .hero2-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.40);
    color: #fff;
}

.hero2 .btn-outline-ink {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.85);
}

    .hero2 .btn-outline-ink:hover {
        background: rgba(255,255,255,.16);
        color: #fff;
    }

@media (max-width: 820px) {
    .hero2-centered {
        padding: 44px 16px 40px;
    }

        .hero2-centered h1 {
            font-size: 30px;
        }
}
/* ===== Portal quick tiles ===== */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

a.quick-tile {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 1px 2px rgba(16,24,40,.04);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    a.quick-tile:hover {
        transform: translateY(-3px);
        border-color: var(--primary);
        box-shadow: 0 8px 22px rgba(1,148,254,.16);
        text-decoration: none;
    }

.quick-tile .qi {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
}

    .quick-tile .qi svg {
        width: 22px;
        height: 22px;
    }


.quick-tile .qt {
    font-weight: 800;
    font-size: 15px;
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

    .quick-tile .qt .arw {
        color: var(--border);
        font-size: 20px;
        line-height: 1;
        font-weight: 700;
    }

.quick-tile .qs {
    color: var(--muted);
    font-size: 13px;
    margin-top: 4px;
    line-height: 1.5;
}

a.quick-tile:hover .qt,
a.quick-tile:hover .qt .arw {
    color: var(--primary);
}

/* ===== Reminder / info note ===== */
.reminder {
    display: flex;
    gap: 12px;
    background: #f8fafc;
    border-left: 4px solid var(--secondary);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

    .reminder svg {
        width: 18px;
        height: 18px;
        color: var(--primary);
        flex: none;
        margin-top: 2px;
    }

    .reminder .rt {
        font-weight: 800;
        color: var(--ink);
        font-size: 14px;
    }

    .reminder .rm {
        color: var(--muted);
        font-size: 13px;
        margin-top: 2px;
        line-height: 1.5;
    }

/* ===== Unified stat icons (one treatment across all dashboards) ===== */
.stat-icon,
.stat-icon.blue,
.stat-icon.yellow,
.stat-icon.ink {
    background: var(--primary-soft);
    color: var(--primary);
}
/* ===== Enrollment gate (Student/Pending) ===== */
.gate-card {
    max-width: 780px;
}

.gate-hero {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.gate-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    flex: none;
}

    .gate-hero-icon i {
        width: 26px;
        height: 26px;
    }

.gate-hero-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
}

.gate-hero-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.gate-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gate-step {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 0 0 26px 0;
}

    .gate-step:last-child {
        padding-bottom: 0;
    }

    .gate-step::before {
        content: "";
        position: absolute;
        left: 15px;
        top: 34px;
        bottom: 4px;
        width: 2px;
        background: var(--border);
    }

    .gate-step:last-child::before {
        display: none;
    }

    .gate-step.done::before {
        background: var(--primary);
    }

.gate-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    background: var(--bg);
    color: var(--muted);
    border: 2px solid var(--border);
    z-index: 1;
}

    .gate-dot i {
        width: 16px;
        height: 16px;
    }

.gate-step.done .gate-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.gate-step.current .gate-dot {
    background: #fff;
    border-color: var(--primary);
    color: var(--primary);
}

.gate-body {
    padding-top: 4px;
}

.gate-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.gate-text {
    font-size: 13px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.5;
}

.gate-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    font-size: 13px;
}

    .gate-note i {
        width: 16px;
        height: 16px;
        flex: none;
        margin-top: 1px;
    }

.gate-fees {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    max-width: 340px;
}

.gate-fee {
    display: flex;
    justify-content: space-between;
    padding: 9px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

    .gate-fee:last-child {
        border-bottom: none;
    }

.gate-fee-label {
    color: var(--muted);
}

.gate-fee-value {
    font-weight: 700;
    color: var(--ink);
}

.gate-fee-due {
    background: var(--primary-soft);
}

    .gate-fee-due .gate-fee-value {
        color: var(--primary);
    }

.gate-action {
    margin-top: 14px;
}

.gate-done {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 22px;
    padding: 16px;
    border-radius: 12px;
    background: var(--primary-soft);
    border: 1px solid var(--border);
}

    .gate-done i {
        width: 24px;
        height: 24px;
        color: var(--primary);
        flex: none;
    }

    .gate-done .btn {
        margin-left: auto;
    }

.gate-foot {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

/* ===== Enrollment gate (Student/Pending) ===== */
.gate-card {
    max-width: 780px;
}

.gate-hero {
    display: flex;
    gap: 16px;
    align-items: center;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.gate-hero-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    flex: none;
}

    .gate-hero-icon i {
        width: 26px;
        height: 26px;
    }

.gate-hero-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
}

.gate-hero-sub {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--muted);
}

.gate-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gate-step {
    position: relative;
    display: flex;
    gap: 14px;
    padding: 0 0 26px 0;
}

    .gate-step:last-child {
        padding-bottom: 0;
    }

    .gate-step::before {
        content: "";
        position: absolute;
        left: 15px;
        top: 34px;
        bottom: 4px;
        width: 2px;
        background: var(--border);
    }

    .gate-step:last-child::before {
        display: none;
    }

    .gate-step.done::before {
        background: var(--primary);
    }

.gate-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    background: var(--bg);
    color: var(--muted);
    border: 2px solid var(--border);
    z-index: 1;
}

    .gate-dot i {
        width: 16px;
        height: 16px;
    }

.gate-step.done .gate-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.gate-step.current .gate-dot {
    background: #fff;
    border-color: var(--primary);
    color: var(--primary);
}

.gate-body {
    padding-top: 4px;
}

.gate-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
}

.gate-text {
    font-size: 13px;
    color: var(--muted);
    margin-top: 3px;
    line-height: 1.5;
}

.gate-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    font-size: 13px;
}

    .gate-note i {
        width: 16px;
        height: 16px;
        flex: none;
        margin-top: 1px;
    }

.gate-fees {
    margin-top: 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    max-width: 340px;
}

.gate-fee {
    display: flex;
    justify-content: space-between;
    padding: 9px 12px;
    font-size: 13px;
    border-bottom: 1px solid var(--border);
}

    .gate-fee:last-child {
        border-bottom: none;
    }

.gate-fee-label {
    color: var(--muted);
}

.gate-fee-value {
    font-weight: 700;
    color: var(--ink);
}

.gate-fee-due {
    background: var(--primary-soft);
}

    .gate-fee-due .gate-fee-value {
        color: var(--primary);
    }

.gate-action {
    margin-top: 14px;
}

.gate-done {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-top: 22px;
    padding: 16px;
    border-radius: 12px;
    background: var(--primary-soft);
    border: 1px solid var(--border);
}

    .gate-done i {
        width: 24px;
        height: 24px;
        color: var(--primary);
        flex: none;
    }

    .gate-done .btn {
        margin-left: auto;
    }

.gate-foot {
    margin: 22px 0 0;
    font-size: 13px;
    color: var(--muted);
    text-align: center;
}

/* ===== Sidebar brand - centered ===== */
.sidebar-brand {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

    .sidebar-brand img {
        width: 52px;
        height: 52px;
    }

    .sidebar-brand .title {
        font-size: 17px;
    }

/* ===== User card - now a link to Settings ===== */
/* ===== User card - links to Settings, colour-coded by role ===== */
/* Each role sets its accent (left border, avatar), label colour and hover tint. */
a.user-card {
    --role: var(--primary);
    --role-text: var(--primary);
    --role-soft: var(--primary-soft);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px 10px 12px;
    margin: 16px 4px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: background .15s, border-color .15s;
}

    a.user-card.role-student {
        --role: #0194fe;
        --role-text: #0194fe;
        --role-soft: #e6f4ff;
    }

    a.user-card.role-teacher {
        --role: #16a34a;
        --role-text: #15803d;
        --role-soft: #ecfdf3;
    }

    a.user-card.role-admin {
        --role: #260b6a;
        --role-text: #260b6a;
        --role-soft: #f1edfb;
    }

    a.user-card.role-applicant {
        --role: #f59e0b;
        --role-text: #92400e;
        --role-soft: #fffbeb;
    }

    a.user-card:hover {
        background: var(--role-soft);
    }

    a.user-card.active {
        background: var(--role-soft);
        border-color: var(--role);
    }

.user-card .avatar {
    flex: none;
    width: 36px;
    height: 36px;
    font-size: 13px;
    letter-spacing: .02em;
    background: var(--role, var(--primary));
}

/* Amber is too light behind white initials, so the applicant avatar uses a deeper shade. */
a.user-card.role-applicant .avatar {
    background: #d97706;
}

.user-card .user-meta {
    min-width: 0;
    flex: 1;
}

.user-card .name {
    font-weight: 700;
    font-size: 13.5px;
    line-height: 1.25;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Small role label above the name, e.g. STUDENT */
.user-card .role-tag {
    font-size: 10px;
    font-weight: 800;
    line-height: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--role-text, var(--primary));
}

.user-card .uid {
    font-size: 11.5px;
    line-height: 16px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Lucide swaps the <i> for an <svg> but keeps its class, so size it by class. */
.user-card .user-chevron {
    flex: none;
    width: 16px;
    height: 16px;
    color: var(--muted);
    transition: transform .15s, color .15s;
}

a.user-card:hover .user-chevron {
    color: var(--role-text, var(--primary));
    transform: translateX(2px);
}

/* ===== Enrollment gate v2 ===== */
.gate-wrap {
    max-width: 860px;
    margin: 0 auto;
}

.gate-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 26px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(135deg, var(--ink) 0%, #3a1a92 100%);
    color: #fff;
}

.gate-avatar {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 800;
    background: rgba(255, 255, 255, .16);
    border: 2px solid rgba(255, 255, 255, .35);
}

.gate-ident {
    flex: 1;
    min-width: 0;
}

    .gate-ident h1 {
        margin: 0;
        font-size: 21px;
        font-weight: 800;
        color: #fff;
    }

    .gate-ident p {
        margin: 3px 0 0;
        font-size: 13px;
        color: rgba(255, 255, 255, .78);
    }

.gate-stepcount {
    text-align: right;
    flex: none;
}

.gate-stepcount-num {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--secondary);
    line-height: 1;
}

    .gate-stepcount-num small {
        font-size: 14px;
        opacity: .65;
    }

.gate-stepcount-lbl {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.gate-bar {
    height: 5px;
    background: #d9dee8;
    overflow: hidden;
}

    .gate-bar span {
        display: block;
        height: 100%;
        background: linear-gradient(90deg, var(--primary), #4fb8ff);
        transition: width .4s ease;
    }

.gate-panel {
    background: var(--card);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 16px 16px;
    padding: 8px 26px 22px;
    box-shadow: 0 2px 10px rgba(16, 24, 40, .05);
}

.gate-step {
    position: relative;
    display: flex;
    gap: 16px;
    padding: 20px 0;
}

    .gate-step + .gate-step {
        border-top: 1px solid var(--border);
    }

    .gate-step::before {
        content: "";
        position: absolute;
        left: 17px;
        top: 54px;
        bottom: -2px;
        width: 2px;
        background: var(--border);
    }

    .gate-step.last::before {
        display: none;
    }

    .gate-step.done::before {
        background: var(--primary);
    }

.gate-dot {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex: none;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 800;
    background: #eef1f6;
    color: var(--muted);
    border: 2px solid var(--border);
}

    .gate-dot i {
        width: 17px;
        height: 17px;
    }

.gate-step.done .gate-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

.gate-step.current .gate-dot {
    background: #fff;
    border-color: var(--primary);
    color: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.gate-body {
    flex: 1;
    min-width: 0;
    padding-top: 4px;
}

.gate-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.gate-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--ink);
}

.gate-text {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--muted);
    line-height: 1.55;
}

.gate-chip {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
}

    .gate-chip.ok {
        background: #dcfce7;
        color: #166534;
    }

    .gate-chip.wait {
        background: var(--primary-soft);
        color: var(--primary);
    }

    .gate-chip.todo {
        background: #fef3c7;
        color: #92400e;
    }

.gate-note {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #fef3f2;
    border: 1px solid #fecdca;
    color: #b42318;
    font-size: 13px;
}

    .gate-note i {
        width: 16px;
        height: 16px;
        flex: none;
        margin-top: 1px;
    }

.gate-money {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.gate-money-item {
    flex: 1;
    min-width: 130px;
    border: 1px solid var(--border);
    border-radius: 11px;
    padding: 10px 13px;
    background: #fbfcfe;
}

    .gate-money-item.due {
        background: var(--primary-soft);
        border-color: #bfe2ff;
    }

.gate-money-lbl {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 3px;
}

.gate-money-val {
    font-size: 17px;
    font-weight: 800;
    color: var(--ink);
}

.gate-money-item.due .gate-money-val {
    color: var(--primary);
}

.gate-cta {
    margin-top: 16px;
}

.gate-done {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 16px;
    padding: 18px 22px;
    border-radius: 16px;
    background: #ecfdf3;
    border: 1px solid #a6f4c5;
}

    .gate-done i {
        width: 26px;
        height: 26px;
        color: #16a34a;
        flex: none;
    }

    .gate-done .btn {
        margin-left: auto;
    }

.gate-help {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 16px;
    padding: 14px 20px;
    border-radius: 14px;
    background: var(--bg);
    border: 1px solid var(--border);
    font-size: 13px;
    color: var(--muted);
}

    .gate-help > div {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .gate-help i {
        width: 16px;
        height: 16px;
    }

    .gate-help a {
        font-weight: 700;
        color: var(--primary);
    }

@media (max-width: 600px) {
    .gate-banner {
        flex-wrap: wrap;
    }

    .gate-stepcount {
        text-align: left;
    }

    .gate-panel {
        padding: 8px 16px 18px;
    }
}

.searchable-box {
    margin-bottom: 6px;
    font-size: 13px;
}

/* ===== Filter rows ===== */
.filter-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-field {
    display: flex;
    flex-direction: column;
}

    .filter-field .form-label {
        margin-bottom: 4px;
    }

.searchable-wrap {
    display: flex;
    flex-direction: column;
}

.searchable-box {
    margin-bottom: 5px;
    font-size: 13px;
}

    .searchable-box.no-match {
        border-color: #fda29b;
        background: #fef3f2;
    }

.list-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.content-card.editing {
    border: 2px solid var(--primary);
    box-shadow: 0 0 0 4px var(--primary-soft);
}

.table tbody tr.row-active {
    background: var(--primary-soft) !important;
    box-shadow: inset 3px 0 0 var(--primary);
}

/* ===== Clickable cards ===== */
.class-card.clickable {
    position: relative;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

    .class-card.clickable:hover,
    .class-card.clickable:focus-visible {
        transform: translateY(-2px);
        border-color: var(--primary);
        box-shadow: 0 8px 22px rgba(1, 148, 254, .16);
        outline: none;
    }

.class-card .card-arrow {
    position: absolute;
    top: 16px;
    right: 16px;
    color: var(--border);
    transition: color .12s ease, transform .12s ease;
}

    .class-card .card-arrow i {
        width: 18px;
        height: 18px;
    }

.class-card.clickable:hover .card-arrow {
    color: var(--primary);
    transform: translateX(2px);
}

.page-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

/* ===== Bottom action bar ===== */
.content-card.page-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 14px 18px;
    border-top: 1px solid var(--border);
}

.page-actions-right {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}

.page-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

    .page-actions .btn i {
        width: 16px;
        height: 16px;
    }

@media (max-width: 620px) {
    .content-card.page-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .page-actions-right {
        margin-left: 0;
    }

    .page-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   BUTTON SYSTEM — single source of truth for all roles
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 9px 16px;
    min-height: 38px;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .08s ease;
}

    .btn i,
    .btn svg {
        width: 16px;
        height: 16px;
        flex: none;
    }

    .btn:hover {
        text-decoration: none;
    }

    .btn:active {
        transform: translateY(1px);
    }

    .btn:focus-visible {
        outline: none;
        box-shadow: 0 0 0 3px rgba(1, 148, 254, .35);
    }

    .btn:disabled,
    .btn.disabled {
        opacity: .55;
        cursor: not-allowed;
        transform: none;
    }

/* ---- Sizes ---- */
.btn-sm {
    padding: 5px 11px;
    min-height: 30px;
    font-size: 12px;
    border-radius: 8px;
    gap: 5px;
}

    .btn-sm i, .btn-sm svg {
        width: 14px;
        height: 14px;
    }

.btn-lg {
    padding: 12px 22px;
    min-height: 46px;
    font-size: 15px;
    border-radius: 12px;
}

.btn-block {
    width: 100%;
}

/* ---- Solid variants ---- */
.btn-brand {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

    .btn-brand:hover {
        background: #0179d1;
        border-color: #0179d1;
        color: #fff;
    }

.btn-ink {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
}

    .btn-ink:hover {
        background: #1b0850;
        border-color: #1b0850;
        color: #fff;
    }

.btn-accent {
    background: var(--secondary);
    border-color: var(--secondary);
    color: var(--ink);
}

    .btn-accent:hover {
        background: #e6e500;
        border-color: #e6e500;
        color: var(--ink);
    }

.btn-success {
    background: #16a34a;
    border-color: #16a34a;
    color: #fff;
}

    .btn-success:hover {
        background: #12833c;
        border-color: #12833c;
        color: #fff;
    }

.btn-danger {
    background: #dc2626;
    border-color: #dc2626;
    color: #fff;
}

    .btn-danger:hover {
        background: #b91c1c;
        border-color: #b91c1c;
        color: #fff;
    }

/* ---- Outline variants ---- */
.btn-outline-brand {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

    .btn-outline-brand:hover {
        background: var(--primary-soft);
        color: var(--primary);
    }

.btn-outline-success {
    background: transparent;
    border-color: #16a34a;
    color: #16a34a;
}

    .btn-outline-success:hover {
        background: #dcfce7;
        color: #12833c;
    }

.btn-outline-danger {
    background: transparent;
    border-color: #dc2626;
    color: #dc2626;
}

    .btn-outline-danger:hover {
        background: #fef2f2;
        color: #b91c1c;
    }

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--muted);
}

    .btn-ghost:hover {
        background: var(--bg);
        color: var(--ink);
    }

/* ---- Back button: one look everywhere ---- */
.btn-back {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

    .btn-back::before {
        content: "←";
        font-size: 16px;
        font-weight: 800;
        line-height: 1;
        margin-right: 1px;
        transition: transform .15s ease;
    }

    .btn-back:hover {
        background: var(--primary-soft);
        color: var(--primary);
    }

        .btn-back:hover::before {
            transform: translateX(-2px);
        }

/* ---- Button groups ---- */
.btn-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 620px) {
    .btn-row .btn {
        flex: 1 1 100%;
    }
}

/* ===== Inline progress bar ===== */
.progress-line {
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

    .progress-line span {
        display: block;
        height: 100%;
        background: var(--primary);
        border-radius: 999px;
        transition: width .3s ease;
    }
/* ===== Segmented control (quarter pickers, small toggles) ===== */
.segmented {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card);
}

    .segmented a {
        padding: 7px 16px;
        font-size: 13px;
        font-weight: 700;
        color: var(--muted);
        text-decoration: none;
        border-right: 1px solid var(--border);
        transition: background .15s ease, color .15s ease;
    }

        .segmented a:last-child {
            border-right: none;
        }

        .segmented a:hover {
            background: var(--primary-soft);
            color: var(--primary);
        }

        .segmented a.on {
            background: var(--primary);
            color: #fff;
        }

/* ===== Subject launcher tiles ===== */
.subject-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
    gap: 10px;
}

a.subject-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 13px 15px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    text-decoration: none;
    color: var(--ink);
    transition: border-color .15s ease, box-shadow .15s ease, transform .1s ease;
}

    a.subject-tile:hover {
        border-color: var(--primary);
        box-shadow: 0 5px 16px rgba(1, 148, 254, .14);
        transform: translateY(-1px);
        color: var(--ink);
    }

.subject-tile .st-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
}

    .subject-tile .st-icon i {
        width: 17px;
        height: 17px;
    }

.subject-tile .st-body {
    min-width: 0;
    flex: 1;
}

.subject-tile .st-name {
    font-weight: 700;
    font-size: 14px;
}

.subject-tile .st-sub {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.subject-tile .st-arrow {
    color: var(--border);
}

.subject-tile:hover .st-arrow {
    color: var(--primary);
}

.subject-tile .st-arrow i {
    width: 16px;
    height: 16px;
}

/* ===== Light action bar (replaces the boxed one) ===== */
.action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 18px;
}

    .action-bar .right {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        margin-left: auto;
    }

@media (max-width: 620px) {
    .action-bar {
        flex-direction: column;
        align-items: stretch;
    }

        .action-bar .right {
            margin-left: 0;
        }

        .action-bar .btn {
            width: 100%;
        }
}

/* Table row actions stay quiet — the row itself is the primary target */
.table td .btn-sm.btn-brand {
    background: transparent;
    border-color: var(--primary);
    color: var(--primary);
}

.table tbody tr:hover td .btn-sm.btn-brand {
    background: var(--primary);
    color: #fff;
}

/* ===== Class header card ===== */
.class-header {
    border-left: 4px solid var(--secondary);
}

.ch-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ch-code {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 8px;
    background: var(--ink);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .03em;
}

.ch-title {
    font-size: 19px;
    font-weight: 800;
    color: var(--ink);
    text-transform: uppercase;
    letter-spacing: .01em;
}

.ch-desc {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--muted);
    margin-top: 10px;
}

    .ch-desc i {
        width: 15px;
        height: 15px;
    }

.ch-meta {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.ch-item .lbl {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
}

    .ch-item .lbl i {
        width: 13px;
        height: 13px;
    }

.ch-item .val {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    margin-top: 4px;
}

/* ===== Class header card — refined ===== */
.content-card.class-header {
    position: relative;
    overflow: hidden;
    border-left: none;
    padding: 20px 22px 20px 28px;
}

    /* Accent bar, clipped by the card's own radius */
    .content-card.class-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: linear-gradient(180deg, var(--secondary) 0%, var(--primary) 100%);
    }

.ch-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ch-code {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ink) 0%, #3a1a92 100%);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(38, 11, 106, .22);
}

.ch-title {
    font-size: 23px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.01em;
    line-height: 1.1;
}

.ch-desc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 9px;
}

    .ch-desc i {
        width: 16px;
        height: 16px;
        color: var(--primary);
    }

/* Meta strip: inset panel with divided cells */
.ch-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
    gap: 0;
    margin-top: 18px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: linear-gradient(180deg, #fbfcfe 0%, var(--bg) 100%);
    overflow: hidden;
}

.ch-item {
    padding: 12px 16px;
    border-right: 1px solid var(--border);
}

    .ch-item:last-child {
        border-right: none;
    }

    .ch-item .lbl {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
    }

        .ch-item .lbl i {
            width: 13px;
            height: 13px;
            color: var(--primary);
        }

    .ch-item .val {
        font-size: 16px;
        font-weight: 800;
        color: var(--ink);
        margin-top: 5px;
        line-height: 1.2;
    }

@media (max-width: 700px) {
    .ch-title {
        font-size: 19px;
    }

    .ch-item {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

        .ch-item:last-child {
            border-bottom: none;
        }
}

/* =========================================================
   CLASS HEADER + INFORMATION PANELS  (solid colors, no gradients)
   ========================================================= */

.content-card.class-header {
    position: relative;
    overflow: hidden;
    border-left: none;
    padding: 20px 22px 20px 28px;
}

    .content-card.class-header::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 5px;
        background: var(--primary);
    }

.ch-top {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ch-code {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.ch-title {
    font-size: 22px;
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.01em;
    line-height: 1.15;
}

.ch-desc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 9px;
}

    .ch-desc i {
        width: 16px;
        height: 16px;
        color: var(--primary);
    }

/* ---- Shared panel: .ch-meta and .info-grid look identical ---- */
.ch-meta,
.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 0;
    margin-top: 16px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
}

.info-grid {
    margin-top: 0;
}

.ch-item,
.info-item {
    padding: 12px 16px;
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

    .ch-item:last-child,
    .info-item:last-child {
        border-right: none;
    }

    .ch-item .lbl,
    .info-item .lbl {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .1em;
        text-transform: uppercase;
        color: var(--muted);
    }

        .ch-item .lbl i,
        .info-item .lbl i {
            width: 13px;
            height: 13px;
            color: var(--primary);
            flex: none;
        }

    .ch-item .val,
    .info-item .val {
        font-size: 15px;
        font-weight: 700;
        color: var(--ink);
        margin-top: 5px;
        line-height: 1.35;
        word-break: break-word;
    }

        .info-item .val.muted {
            color: var(--muted);
            font-weight: 600;
        }

/* ---- Legacy .detail-grid markup (alternating label / value siblings) ---- */
.detail-grid {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
    overflow: hidden;
}

.detail-label {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    border-right: 1px solid var(--border);
    white-space: nowrap;
}

.detail-value {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--ink);
    border-bottom: 1px solid var(--border);
    word-break: break-word;
}

@media (max-width: 700px) {
    .ch-title {
        font-size: 19px;
    }

    .ch-item, .info-item {
        border-right: none;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .detail-label {
        border-right: none;
        border-bottom: none;
        padding-bottom: 0;
    }

    .detail-value {
        padding-top: 4px;
    }
}
/* ===== Status notice banner ===== */
.notice {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 16px 18px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: 12px;
    background: var(--card);
}

    .notice > i {
        width: 22px;
        height: 22px;
        flex: none;
        margin-top: 1px;
        color: var(--primary);
    }

    .notice .nt {
        font-size: 16px;
        font-weight: 800;
        color: var(--ink);
    }

    .notice .nm {
        font-size: 13.5px;
        color: var(--muted);
        margin-top: 4px;
        line-height: 1.5;
    }

    .notice.ok {
        border-left-color: #16a34a;
    }

        .notice.ok > i {
            color: #16a34a;
        }

        .notice.ok .nt {
            color: #15803d;
        }

    .notice.warn {
        border-left-color: #f59e0b;
    }

        .notice.warn > i {
            color: #d97706;
        }

        .notice.warn .nt {
            color: #92400e;
        }

    .notice.bad {
        border-left-color: #dc2626;
    }

        .notice.bad > i {
            color: #dc2626;
        }

        .notice.bad .nt {
            color: #b42318;
        }

/* ===================================================================
   Form grids, stat tiles and editable rows
   =================================================================== */

/* Multi-column form layout. Collapses to one column on phones. */
.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0 18px;
}

    .form-grid .mb-3 {
        margin-bottom: 14px;
    }

/* Summary figures shown above a list. */
.stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin: 16px 0 18px;
}

.stat-tile {
    background: var(--primary-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
}

    .stat-tile .sl {
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
        font-weight: 600;
        color: var(--muted);
    }

    .stat-tile .sv {
        font-size: 22px;
        font-weight: 700;
        color: var(--ink);
        margin-top: 4px;
    }

/* A record you can edit in place, inside a content card. */
.edit-row {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg);
    padding: 16px;
    margin-bottom: 12px;
}

.edit-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.edit-row-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--ink);
}

.edit-row-amount {
    font-weight: 700;
    color: var(--primary);
    white-space: nowrap;
}

.edit-row-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Checkbox styled as a pill so it sits on a button row without looking lost. */
.check-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
}

    .check-pill input {
        margin: 0;
        cursor: pointer;
    }

.muted-note {
    font-size: 13px;
    color: var(--muted);
    margin: 10px 0 0;
}

.sub-card {
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: 16px;
    margin-top: 6px;
}
/* Required-field marker. */
.form-label.req::after {
    content: " *";
    color: #dc2626;
    font-weight: 700;
}

/* ===================================================================
   Responsive: phones, tablets, laptops
   Desktop layout is unchanged above 1024px.
   =================================================================== */

/* Never let a wide child force the whole page to scroll sideways. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Grid and flex children default to min-width:auto, so one wide canvas or
   table stretches the whole column. These let them shrink instead. */
.main-content,
.content-card,
.chart-grid > *,
.class-grid > *,
.stat-grid > *,
.quick-grid > * {
    min-width: 0;
}

/* Chart.js sizes its canvas in JS; keep it inside the card regardless. */
canvas {
    max-width: 100% !important;
}

/* Hamburger — hidden on desktop, shown when the sidebar goes off-canvas. */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--ink);
    cursor: pointer;
    flex: 0 0 auto;
}

    .nav-toggle:hover {
        background: var(--primary-soft);
        border-color: var(--primary);
    }

.nav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(38, 11, 106, .45);
    z-index: 998;
}

    .nav-backdrop.open {
        display: block;
    }

/* ---------- Tablet and below: sidebar becomes a drawer ---------- */
@media (max-width: 1024px) {

    .nav-toggle {
        display: inline-flex;
    }

    .app-shell {
        display: block;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 268px;
        max-width: 84vw;
        z-index: 999;
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform .22s ease;
        box-shadow: 0 0 24px rgba(0, 0, 0, .18);
    }

        .sidebar.open {
            transform: translateX(0);
        }

    .main-content {
        width: 100%;
        margin-left: 0;
        padding: 16px;
    }

    /* Sticky bar needs its own background or content shows through it. */
    .topbar {
        position: sticky;
        top: 0;
        z-index: 900;
        background: var(--bg);
        margin: 0 0 14px;
        padding: 10px 0;
    }

    /* The CARD scrolls, not the table - .table has overflow:hidden for its
       rounded corners, which would otherwise clip the columns. */
    .content-card {
        overflow-x: auto;
    }

        .content-card table.table {
            min-width: 680px;
        }

    .timetable {
        min-width: 820px;
    }
}

/* ---------- Phones ---------- */
@media (max-width: 768px) {

    .main-content {
        padding: 14px 16px 28px;
    }

    .page-title {
        font-size: 22px;
    }

    .page-subtitle {
        font-size: 13.5px;
        margin-bottom: 16px;
    }

    .page-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .content-card {
        padding: 16px;
        border-radius: 10px;
    }

        .content-card h3 {
            font-size: 16px;
        }

    /* Dashboard stat cards: two per row reads better than one tall column. */
    .stat-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .stat-card {
        padding: 14px;
        gap: 10px;
    }

    .stat-icon {
        width: 38px;
        height: 38px;
    }

    .stat-value {
        font-size: 20px;
    }

    .stat-label {
        font-size: 12px;
    }

    .chart-grid {
        grid-template-columns: 1fr;
    }

        .chart-grid canvas {
            max-height: 230px;
            min-height: 200px;
        }

    /* Stack every multi-column layout. */
    .form-grid,
    .info-grid,
    .stat-row,
    .ch-meta,
    .detail-grid,
    .cal-grid,
    .req-list,
    .subject-tiles,
    .class-grid {
        grid-template-columns: 1fr;
    }

    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }

    .filter-field {
        width: 100%;
    }

    .btn-row {
        flex-wrap: wrap;
    }

        .btn-row .btn {
            flex: 1 1 auto;
            justify-content: center;
        }

    .action-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .list-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .edit-row-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .edit-row-foot {
        flex-direction: column;
        align-items: stretch;
    }

        .edit-row-foot .btn {
            width: 100%;
            justify-content: center;
        }

    .check-pill {
        justify-content: center;
    }

    .ch-title {
        font-size: 19px;
    }

    .ch-item {
        border-right: none;
    }

    /* Forms are easier to tap at full width, and 16px stops iOS zooming on focus. */
    .form-control, .form-select {
        font-size: 16px;
    }

    .auth-card {
        margin: 16px;
        padding: 22px 18px;
    }

    .topbar-title {
        font-size: 13px;
    }

    /* Overlays must not hang off a narrow screen. */
    .notif-menu {
        width: min(92vw, 340px);
    }

    #toast-container {
        left: 12px;
        right: 12px;
        top: 12px;
    }

    .toast {
        min-width: 0;
        max-width: none;
    }

    .month-cell {
        min-height: 76px;
    }

    .m-event {
        font-size: 10px;
    }
}

/* ---------- Small phones ---------- */
@media (max-width: 400px) {
    .main-content {
        padding: 12px 12px 24px;
    }

    .content-card {
        padding: 14px;
    }

    .stat-grid {
        grid-template-columns: 1fr;
    }

    .stat-tile .sv {
        font-size: 19px;
    }
}

/* The drawer is irrelevant on paper. */
@media print {
    .nav-toggle, .nav-backdrop, .sidebar {
        display: none !important;
    }

    .main-content {
        padding: 0;
    }

    .content-card {
        overflow: visible !important;
    }
}


/* ===== Announcement rows with optional image ===== */
/* ===================================================================
   Announcement article (detail page)
   =================================================================== */

.ann-article {
    max-width: 880px;
}

.ann-article-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 2px 14px rgba(16, 24, 40, .06);
    overflow: hidden;
}

.ann-article-head {
    padding: 24px 28px 20px;
    background: var(--primary-soft);
    border-bottom: 1px solid var(--border);
    border-left: 5px solid var(--primary);
}

    .ann-article-head h1 {
        margin: 0;
        font-size: 22px;
        line-height: 1.3;
        color: var(--ink);
    }

.ann-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--muted);
}

    .ann-meta > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .ann-meta i {
        width: 14px;
        height: 14px;
        color: var(--primary);
    }

.ann-article-body {
    padding: 24px 28px 28px;
}

.ann-content {
    white-space: pre-wrap;
    font-size: 15.5px;
    line-height: 1.75;
    color: var(--ink);
}

.ann-figure {
    margin: 24px 0 0;
    padding-top: 22px;
    border-top: 1px solid var(--border);
    text-align: center;
}

    .ann-figure img {
        display: block;
        max-width: 100%;
        max-height: 680px;
        width: auto;
        height: auto;
        margin: 0 auto;
        border: 1px solid var(--border);
        border-radius: 12px;
        cursor: zoom-in;
    }

    .ann-figure figcaption {
        font-size: 12px;
        color: var(--muted);
        margin-top: 9px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
    }

        .ann-figure figcaption i {
            width: 13px;
            height: 13px;
        }

/* Keep the list thumbnails from earlier working. */
.ann-image {
    display: block;
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
    margin: 14px 0 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: zoom-in;
}

@media (max-width: 768px) {
    .ann-article-head {
        padding: 18px 16px 16px;
    }

        .ann-article-head h1 {
            font-size: 18px;
        }

    .ann-article-body {
        padding: 18px 16px 22px;
    }

    .ann-figure img {
        max-height: 420px;
    }
}

/* ===== Announcement list rows (safety net) ===== */
.ann-row {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

    .ann-row:last-child {
        border-bottom: none;
    }

.ann-thumb {
    flex: none;
    display: block;
    width: 92px;
    height: 92px;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--bg);
}

    .ann-thumb img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.ann-body {
    flex: 1;
    min-width: 0;
}

.ann-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ann-text {
    display: block;
    color: var(--muted);
    font-size: 14px;
    margin-top: 4px;
    line-height: 1.5;
}

.ann-date {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--muted);
    font-size: 12px;
    margin-top: 6px;
    white-space: nowrap;
}

    .ann-date i {
        width: 13px;
        height: 13px;
    }

/* Nothing inside an announcement row or card may overflow it. */
.ann-row img,
.ann-body img {
    max-width: 100%;
    max-height: 420px;
    width: auto;
    height: auto;
}

@media (max-width: 768px) {
    .ann-row {
        flex-direction: column;
    }

    .ann-thumb {
        width: 100%;
        height: 160px;
    }
}

/* ===================================================================
   Help Center
   =================================================================== */

.help-search {
    position: relative;
    max-width: 520px;
    margin-bottom: 18px;
}

    .help-search i {
        position: absolute;
        left: 13px;
        top: 50%;
        transform: translateY(-50%);
        width: 17px;
        height: 17px;
        color: var(--muted);
        pointer-events: none;
    }

    .help-search input {
        padding-left: 38px;
    }

/* Numbered walkthrough */
.help-steps {
    list-style: none;
    counter-reset: helpstep;
    margin: 0;
    padding: 0;
}

    .help-steps li {
        position: relative;
        counter-increment: helpstep;
        padding: 0 0 20px 48px;
    }

        .help-steps li::before {
            content: counter(helpstep);
            position: absolute;
            left: 0;
            top: 0;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--primary);
            color: #fff;
            font-weight: 800;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Connecting line, like the enrollment tracker */
        .help-steps li::after {
            content: "";
            position: absolute;
            left: 14px;
            top: 34px;
            bottom: 4px;
            width: 2px;
            background: var(--border);
        }

        .help-steps li:last-child {
            padding-bottom: 0;
        }

            .help-steps li:last-child::after {
                display: none;
            }

.hs-title {
    font-weight: 700;
    color: var(--ink);
    font-size: 15px;
}

.hs-text {
    color: var(--muted);
    font-size: 14px;
    margin-top: 4px;
    line-height: 1.6;
}

/* Accordion — native <details>, no JavaScript needed to open */
.faq {
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    background: var(--card);
}

    .faq[open] {
        border-color: var(--primary);
        box-shadow: 0 2px 10px rgba(1, 148, 254, .08);
    }

    .faq summary {
        cursor: pointer;
        padding: 13px 16px;
        font-weight: 700;
        font-size: 14.5px;
        color: var(--ink);
        list-style: none;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .faq summary::-webkit-details-marker {
            display: none;
        }

        .faq summary::after {
            content: "+";
            margin-left: auto;
            font-size: 19px;
            font-weight: 700;
            line-height: 1;
            color: var(--primary);
        }

    .faq[open] summary::after {
        content: "–";
    }

    .faq summary:hover {
        background: var(--primary-soft);
        border-radius: 9px;
    }

.faq-body {
    padding: 0 16px 15px;
    font-size: 14px;
    color: var(--muted);
    line-height: 1.7;
}

    .faq-body strong {
        color: var(--ink);
    }

.help-contact .info-item .val {
    font-weight: 600;
    font-size: 14px;
}

@media (max-width: 768px) {
    .help-steps li {
        padding-left: 42px;
    }
}

/* ===================================================================
   Context help — floating button and slide-in drawer
   =================================================================== */

.help-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 18px 11px 13px;
    border: none;
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(1, 148, 254, .35);
    transition: background .15s ease, transform .1s ease, box-shadow .15s ease;
}

    .help-fab:hover {
        background: #0179d1;
        box-shadow: 0 8px 26px rgba(1, 148, 254, .45);
    }

    .help-fab:active {
        transform: translateY(1px);
    }

.help-fab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    font-size: 14px;
    font-weight: 800;
    line-height: 1;
}

.help-overlay {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: rgba(38, 11, 106, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}

    .help-overlay.open {
        opacity: 1;
        pointer-events: auto;
    }

.help-drawer {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1210;
    width: 380px;
    max-width: 92vw;
    height: 100vh;
    background: var(--card);
    border-left: 1px solid var(--border);
    box-shadow: -8px 0 28px rgba(16, 24, 40, .16);
    display: flex;
    flex-direction: column;
    transform: translateX(105%);
    transition: transform .24s ease;
}

    .help-drawer.open {
        transform: translateX(0);
    }

.help-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    background: var(--primary);
    color: #fff;
}

.hdh-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 800;
}

.hdh-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .24);
    font-size: 14px;
    font-weight: 800;
    flex: none;
}

.hdh-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    opacity: .85;
}

    .hdh-close:hover {
        opacity: 1;
    }

.help-drawer-body {
    padding: 18px;
    overflow-y: auto;
    flex: 1;
}

.hdb-intro {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin: 0 0 18px;
}

.hdb-heading {
    font-size: 15px;
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px;
}

.hdb-list {
    margin: 0;
    padding-left: 20px;
}

    .hdb-list li {
        font-size: 14px;
        color: var(--ink);
        line-height: 1.65;
        margin-bottom: 10px;
    }

.hdb-foot {
    margin-top: 22px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

@media (max-width: 768px) {
    .help-fab {
        right: 16px;
        bottom: 16px;
        padding: 10px 15px 10px 11px;
    }

    .help-fab-text {
        display: none;
    }
}

@media print {
    .help-fab, .help-drawer, .help-overlay {
        display: none !important;
    }
}

/* ===== Help Center hero + step-by-step tutorial ===== */
.help-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    border-left: 4px solid var(--primary);
}

.help-hero-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ink);
}

.help-hero-text {
    font-size: 13.5px;
    color: var(--muted);
    margin-top: 4px;
    max-width: 60ch;
}

.tut-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .tut-toc a {
        display: inline-block;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none;
        color: var(--primary);
        background: var(--primary-soft);
        border: 1px solid #b9e0ff;
        padding: 7px 12px;
        border-radius: 999px;
    }

        .tut-toc a:hover {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }

.tut-stage {
    scroll-margin-top: 20px;
}

.tut-kicker {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 6px;
}

.tut-stage-title {
    font-size: 19px;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 8px;
}

.tut-stage-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0 0 12px;
}

.tut-list {
    margin: 0;
    padding-left: 22px;
}

    .tut-list li {
        font-size: 14px;
        line-height: 1.65;
        color: var(--muted);
        margin-bottom: 9px;
    }

        .tut-list li:last-child {
            margin-bottom: 0;
        }

        .tut-list li strong {
            color: var(--ink);
        }

.tut-tip {
    margin-top: 14px;
    padding: 12px 15px;
    border-radius: 10px;
    background: var(--primary-soft);
    border-left: 4px solid var(--primary);
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--ink);
}

    .tut-tip strong {
        font-weight: 700;
    }

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

@media (max-width: 640px) {
    .help-hero .btn {
        width: 100%;
        text-align: center;
    }

    .tut-stage-title {
        font-size: 17px;
    }
}
/* ===== Empty states ===== */
.empty-state {
    display: block;
    text-align: center;
    padding: 34px 24px;
}

    .empty-state .empty-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        width: auto;
        height: auto;
        margin: 0 auto 10px;
        background: none;
        border-radius: 0;
        color: var(--muted);
    }

        .empty-state .empty-icon svg {
            width: 26px;
            height: 26px;
            stroke-width: 1.5;
        }

    .empty-state .empty-title {
        font-size: 14.5px;
        font-weight: 700;
        color: var(--ink);
    }

    .empty-state .empty-text {
        font-size: 13px;
        line-height: 1.6;
        color: var(--muted);
        margin: 6px auto 0;
        max-width: 52ch;
        text-align: center;
        float: none;
    }

    .empty-state .empty-cta {
        display: inline-block;
        margin-top: 14px;
    }

/* Inside a table, the empty state spans the full width of the body. */
td.empty-cell {
    padding: 0;
    border: none;
}

/* ===== Clickable table rows =====
   Any <tr data-href> opens a page. The first cell reads like a link and a chevron
   cell (.row-go) at the end slides on hover, so the row clearly looks clickable. */
.table tbody tr[data-href] td:first-child strong {
    color: var(--primary);
}

.table tbody tr[data-href]:hover td:first-child strong {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.table tbody tr[data-href]:focus-visible td {
    background: var(--primary-soft);
    outline: none;
}

.table td.row-go,
.table th.row-go {
    width: 40px;
    text-align: right;
    color: #9aa3b2;
}

    .table td.row-go svg {
        width: 18px;
        height: 18px;
        vertical-align: middle;
        transition: transform .15s ease, color .15s ease;
    }

.table tbody tr[data-href]:hover td.row-go svg {
    color: var(--primary);
    transform: translateX(3px);
}


/* ===== Admission review: numbered steps, decision last ===== */
.step-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.step-no {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
}

    .step-no.done {
        background: #ecfdf3;
        color: #16a34a;
    }

        .step-no.done svg {
            width: 15px;
            height: 15px;
        }

/* What the registrar checked in steps 2 and 3, shown right above the decision. */
.review-checks {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.review-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--border);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    background: #fff;
}

    .review-check svg {
        width: 16px;
        height: 16px;
    }

    .review-check.ok {
        border-color: #bbf7d0;
        background: #ecfdf3;
        color: #15803d;
    }

    .review-check.warn {
        border-color: #fde68a;
        background: #fffbeb;
        color: #92400e;
    }

.review-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

@media (max-width: 768px) {
    .review-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at the very end) */

/* ===== List search + pager (Admissions) ===== */
.list-search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.list-search-box {
    position: relative;
    flex: 1 1 320px;
    max-width: 440px;
}

    .list-search-box .lucide {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: var(--muted);
        pointer-events: none;
    }

    .list-search-box .form-control {
        padding-left: 36px;
    }

.list-search-count {
    margin-left: auto;
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}

.list-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    flex-wrap: wrap;
}

    .list-pager .btn {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 6px 12px;
        font-size: 13px;
    }

        .list-pager .btn .lucide {
            width: 16px;
            height: 16px;
        }

        .list-pager .btn.disabled {
            opacity: .45;
            pointer-events: none;
        }

.list-pager-pages {
    display: flex;
    align-items: center;
    gap: 4px;
}

.list-pager-num {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    background: #fff;
}

    .list-pager-num:hover {
        border-color: var(--primary);
        color: var(--primary);
    }

    .list-pager-num.active {
        background: var(--primary);
        border-color: var(--primary);
        color: #fff;
    }

.list-pager-gap {
    padding: 0 4px;
    color: var(--muted);
}

.list-pager-info {
    display: none;
    font-size: 13px;
    color: var(--muted);
    font-weight: 600;
}

@media (max-width: 600px) {
    .list-search-box {
        max-width: none;
        flex-basis: 100%;
    }

    .list-search-count {
        margin-left: 0;
        width: 100%;
    }

    .list-pager-pages {
        display: none;
    }

    .list-pager-info {
        display: inline;
    }
}

/* File: EnrollmentSystem.UI/wwwroot/css/site.css  (append at the very end) */

/* ===== Class cards (Classes page) ===== */
.cls-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .12s ease, box-shadow .12s ease;
}

    .cls-card:hover,
    .cls-card:focus-visible {
        border-color: var(--primary);
        box-shadow: 0 6px 18px rgba(1, 148, 254, .12);
        outline: none;
    }

.cls-body {
    flex: 1;
    padding: 16px 18px 14px;
}

.cls-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.cls-grade {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.cls-year {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
}

.cls-name {
    margin-top: 10px;
    font-size: 20px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.2;
}

.cls-adviser {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ink);
}

    .cls-adviser .cls-label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        color: var(--muted);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .cls-adviser.none {
        color: var(--muted);
        font-weight: 500;
    }

.cls-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--ink);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.cls-adviser.none .cls-avatar {
    background: #f3f4f6;
    color: var(--muted);
}

.cls-avatar .lucide {
    width: 16px;
    height: 16px;
}

.cls-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--muted);
}

    .cls-stats span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .cls-stats .lucide {
        width: 15px;
        height: 15px;
    }

.cls-actions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid var(--border);
}

    .cls-actions a {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 11px 6px;
        font-size: 13px;
        font-weight: 700;
        color: var(--ink);
        text-decoration: none;
        transition: background .12s ease, color .12s ease;
    }

        .cls-actions a + a {
            border-left: 1px solid var(--border);
        }

        .cls-actions a:hover {
            background: var(--primary-soft);
            color: var(--primary);
        }

    .cls-actions .lucide {
        width: 15px;
        height: 15px;
    }