/* ========================================================
   WISSEN — Global Styles & Portal Theming
   ======================================================== */

/* Blazor's enhanced navigation moves focus to the page heading after each
   client-side navigation (tabindex="-1" + .focus(), for screen readers) —
   without this, the browser's default focus rectangle briefly outlines
   whatever it lands on until the user clicks elsewhere or reloads. */
[tabindex="-1"]:focus {
    outline: none;
}

/* Tenant theme (overridden per-tenant at runtime) */
:root {
    --tenant-primary: #0d6efd;
    --tenant-secondary: #6c757d;
    --tenant-accent: #198754;

    /* Portal sidebar colors */
    --portal-sidebar-bg: #0f1b2d;
    --portal-sidebar-accent: #1e3a5f;
    --portal-accent-color: #0d6efd;
    --portal-accent-light: rgba(13, 110, 253, 0.15);
}

/* Library & Research portal */
.portal-library {
    --portal-sidebar-bg: #1c1005;
    --portal-sidebar-accent: #2e1c09;
    --portal-accent-color: #d97706;
    --portal-accent-light: rgba(217, 119, 6, 0.15);
}

/* Student portal — tenant primary color overrides the default accent when set */
.portal-student {
    --portal-sidebar-bg: #0d1b2a;
    --portal-sidebar-accent: #1a3a5c;
    --portal-accent-color: var(--tenant-primary, #1e90ff);
    --portal-accent-light: color-mix(in srgb, var(--tenant-primary, #1e90ff) 15%, transparent);
}

/* Lecturer portal */
.portal-lecturer {
    --portal-sidebar-bg: #0a2418;
    --portal-sidebar-accent: #163d27;
    --portal-accent-color: var(--tenant-primary, #16a34a);
    --portal-accent-light: color-mix(in srgb, var(--tenant-primary, #16a34a) 15%, transparent);
}

/* Administration portal */
.portal-admin {
    --portal-sidebar-bg: #1a0b2e;
    --portal-sidebar-accent: #2d1556;
    --portal-accent-color: var(--tenant-primary, #7c3aed);
    --portal-accent-light: color-mix(in srgb, var(--tenant-primary, #7c3aed) 15%, transparent);
}

/* Parent portal */
.portal-parent {
    --portal-sidebar-bg: #082a2a;
    --portal-sidebar-accent: #0e4040;
    --portal-accent-color: var(--tenant-primary, #0d9488);
    --portal-accent-light: color-mix(in srgb, var(--tenant-primary, #0d9488) 15%, transparent);
}

/* Diaspora portal */
.portal-diaspora {
    --portal-sidebar-bg: #0d1b2a;
    --portal-sidebar-accent: #1e3059;
    --portal-accent-color: #6366f1;
    --portal-accent-light: rgba(99, 102, 241, 0.15);
}

.portal-admissions {
    --portal-sidebar-bg: #0f172a;
    --portal-sidebar-accent: #1e2d50;
    --portal-accent-color: #4f46e5;
    --portal-accent-light: rgba(79, 70, 229, 0.15);
}

/* ====== Base ====== */
html, body {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background-color: #f1f5f9;
    margin: 0;
    padding: 0;
}

/* ====== Sidebar collapse ====== */
/* Desktop push-aside collapse — mobile gets its own off-canvas treatment below */
@media (min-width: 769px) {
    .sidebar-collapsed {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden !important;
        border: none !important;
    }
}

.sidebar-close-btn {
    background: none;
    border: none;
    color: rgba(255,255,255,0.35);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    flex-shrink: 0;
    transition: color 0.15s;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-close-btn:hover {
    color: rgba(255,255,255,0.75);
}

.sidebar-open-btn {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem 0.375rem;
    line-height: 1;
    border-radius: 0.375rem;
    transition: background 0.15s, color 0.15s;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-open-btn:hover {
    background: #f1f5f9;
    color: #1e293b;
}

/* ====== Portal Layout ====== */
.portal-wrapper {
    display: flex;
    height: 100vh;
    overflow: hidden;
    font-family: var(--tenant-font, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
}

/* Sidebar */
.portal-sidebar {
    width: 220px;
    min-width: 220px;
    background-color: var(--portal-sidebar-bg);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 100;
}

.portal-sidebar-header {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.portal-logo-icon {
    width: 34px;
    height: 34px;
    background: var(--portal-accent-color);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.portal-logo-text {
    color: white;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.2;
}

.portal-logo-sub {
    color: rgba(255,255,255,0.5);
    font-size: 0.7rem;
}

.portal-nav {
    flex: 1;
    padding: 0.75rem 0.75rem;
}

.portal-nav-section {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    padding: 0.75rem 0.5rem 0.25rem;
    font-weight: 600;
}

.portal-nav-link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    font-size: 0.875rem;
    margin-bottom: 1px;
    transition: background 0.15s, color 0.15s;
}

.portal-nav-link:hover {
    background: rgba(255,255,255,0.07);
    color: white;
    text-decoration: none;
}

.portal-nav-link.active {
    background: var(--portal-accent-light);
    color: white;
    font-weight: 500;
}

.portal-nav-link.active i {
    color: var(--portal-accent-color);
}

.portal-nav-link i {
    font-size: 1rem;
    width: 18px;
    text-align: center;
    color: #ffffff;
    flex-shrink: 0;
}

.portal-user-footer {
    padding: 0.875rem 1rem;
    border-top: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.portal-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--portal-accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.portal-user-info .name {
    font-size: 0.8rem;
    color: white;
    font-weight: 500;
    line-height: 1.2;
}

.portal-user-info .role {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.45);
}

.portal-logout-btn {
    margin-left: auto;
    color: #ffffff;
    background: none;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    padding: 0.25rem;
}

/* Main content area */
.portal-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}

/* Topbar */
.portal-topbar {
    height: 56px;
    background: white;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    align-items: center;
    padding: 0 1.5rem;
    gap: 1rem;
    flex-shrink: 0;
    z-index: 50;
}

.portal-search {
    flex: 1;
    max-width: 320px;
}

.portal-search input {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 0.5rem;
    padding: 0.4rem 0.875rem 0.4rem 2.25rem;
    font-size: 0.875rem;
    width: 100%;
    outline: none;
}

.portal-search-wrapper {
    position: relative;
}

.portal-search-wrapper i {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: 0.875rem;
}

.portal-topbar-right {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}

.portal-notif-btn {
    position: relative;
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem;
}

.portal-notif-badge {
    position: absolute;
    top: -3px;
    right: -4px;
    background: #ef4444;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    font-size: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

.portal-topbar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.portal-topbar-user .name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
}

/* Page content */
.portal-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    background: #f1f5f9;
}

/* ====== Mobile portal shell (icon-only rail with hover/tap tooltips) ======
   Mobile screens are too narrow for the full labeled sidebar and too
   precious to spend on an off-canvas overlay the user has to explicitly
   open/close. Instead the sidebar stays permanently visible as a slim icon
   rail; each nav link's existing label <span> doubles as its tooltip,
   revealed on hover (desktop pointer / mouse) or tap-hold via :focus for
   touch, positioned as a floating popover so it never gets clipped by the
   rail's own narrow width. No JS or open/closed state needed — this is
   pure CSS, so nothing here can go stale relative to Blazor's render state. */
.portal-sidebar-backdrop {
    display: none;
}

@media (max-width: 768px) {
    /* Hold the status-bar inset once, on the shell, rather than padding each child.
       Padding the topbar itself turned it into a tall white band; insetting the whole
       shell instead lets the app bar keep a normal compact height. Android WebView
       reports the inset as 0 even when drawing under the status bar, hence the max(). */
    .portal-wrapper {
        padding-top: max(1.75rem, env(safe-area-inset-top, 0px));
        box-sizing: border-box;
    }

    .portal-sidebar,
    .portal-sidebar.sidebar-collapsed {
        position: static;
        width: 64px;
        min-width: 64px;
        transform: none;
        box-shadow: none;
        border: none !important;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    /* The icon rail is taller than the viewport on phones, so the nav itself
       scrolls; without this the lower items are simply unreachable. */
    .portal-sidebar .portal-nav {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .portal-sidebar .portal-nav::-webkit-scrollbar {
        width: 0;
    }

    .sidebar-close-btn,
    .sidebar-open-btn {
        display: none;
    }

    .portal-sidebar-header {
        justify-content: center;
        align-items: center;
        gap: 0;
        padding: 0.875rem 0.25rem;
        flex-shrink: 0;
    }

    /* The portal-name block is flex-grow-1: its text is hidden on mobile but the box
       still expands, shunting the institution logo off the rail's centre line. Remove
       it from the layout entirely so the logo actually centres. */
    .portal-sidebar-header .flex-grow-1 {
        display: none;
    }

    .portal-sidebar-header > * {
        margin: 0;
        flex-shrink: 0;
    }

    .portal-logo-text,
    .portal-logo-sub {
        display: none;
    }

    .portal-nav-section {
        display: none;
    }

    .portal-nav-link {
        justify-content: center;
        gap: 0;
        padding: 0.625rem;
        position: relative;
    }

    .portal-nav-link i {
        font-size: 1.15rem;
    }

    /* On the collapsed rail the active pill was --portal-accent-light (near-black on a
       navy sidebar) holding an accent-coloured glyph, so the current page read as no
       different from the rest. Lift the surface instead and keep the glyph white, with
       the accent as a leading indicator bar — the usual nav-rail convention. */
    .portal-nav-link.active {
        background: rgba(255, 255, 255, 0.14);
        box-shadow: inset 3px 0 0 var(--portal-accent-color);
    }

    .portal-nav-link.active i {
        color: #ffffff;
    }

    .portal-nav-link span {
        display: none;
    }

    .portal-nav-link:hover span,
    .portal-nav-link:focus span {
        display: block;
        position: absolute;
        left: calc(100% + 0.5rem);
        top: 50%;
        transform: translateY(-50%);
        background: #1e293b;
        color: white;
        padding: 0.375rem 0.7rem;
        border-radius: 0.375rem;
        font-size: 0.75rem;
        font-weight: 500;
        white-space: nowrap;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        z-index: 200;
        pointer-events: none;
    }

    .portal-user-info {
        display: none;
    }

    .portal-logout-btn {
        margin-left: 0;
    }

    /* Avatar and logout can't sit side-by-side in a 64px rail — they overflow and the
       avatar gets clipped at the edge. Stack them so both land on the rail's centre
       line, matching the icon column above. */
    .portal-user-footer {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 0.75rem 0.25rem;
        flex-shrink: 0;
    }

    .portal-user-footer > * {
        margin: 0;
        flex-shrink: 0;
    }

    .portal-main {
        width: 100%;
    }

    .portal-content,
    main.portal-content {
        overflow-x: auto;
        /* Tighter top gap than sides: on a phone the app bar already separates the
           content, so a symmetric 1rem reads as dead space under the header. */
        padding: 0.75rem 1rem 1.5rem;
    }

    .portal-topbar {
        padding: 0 0.75rem;
        min-height: 52px;
        height: 52px;
        gap: 0.25rem;
    }

    /* A full search field can't earn its space in a phone-width app bar — it crowds
       out the actions and duplicates the sidebar's search entry. Standard mobile
       pattern is to reach search from navigation instead. */
    .portal-search,
    .portal-search-wrapper {
        display: none;
    }

    /* Actions take the freed space and sit flush right, as expected of an app bar. */
    .portal-topbar-right {
        margin-left: auto;
        gap: 0.375rem;
    }
}

/* ====== Dashboard Cards ====== */
.stat-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.stat-card .stat-icon {
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: #64748b;
}

.stat-card .stat-sub {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* Section cards */
.section-card {
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    overflow: hidden;
}

.section-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

.section-card-body {
    padding: 1rem 1.25rem;
}

/* Upcoming items */
.upcoming-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f8fafc;
    gap: 0.75rem;
}

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

.upcoming-dot {
    width: 4px;
    height: 38px;
    border-radius: 2px;
    flex-shrink: 0;
}

.upcoming-item-info {
    flex: 1;
    min-width: 0;
}

.upcoming-item-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: #1e293b;
}

.upcoming-item-meta {
    font-size: 0.75rem;
    color: #94a3b8;
}

.upcoming-item-tag {
    font-size: 0.7rem;
    color: #94a3b8;
    text-align: right;
    flex-shrink: 0;
}

/* Quick actions */
.quick-action-item {
    display: flex;
    align-items: center;
    padding: 0.625rem 0.875rem;
    border-radius: 0.5rem;
    margin-bottom: 0.375rem;
    cursor: pointer;
    text-decoration: none;
    gap: 0.75rem;
    transition: background 0.1s;
}

.quick-action-item:hover {
    text-decoration: none;
}

.quick-action-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.quick-action-label {
    font-size: 0.85rem;
    font-weight: 500;
    flex: 1;
}

.quick-action-arrow {
    color: #cbd5e1;
    font-size: 0.75rem;
}

/* Recorded lecture cards */
.lecture-card {
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid #e2e8f0;
}

.lecture-thumb {
    position: relative;
    height: 120px;
    background: #1e293b;
    overflow: hidden;
}

.lecture-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
}

.lecture-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: rgba(255,255,255,0.3);
}

.lecture-duration {
    position: absolute;
    bottom: 0.375rem;
    right: 0.5rem;
    background: rgba(0,0,0,0.75);
    color: white;
    font-size: 0.7rem;
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.lecture-info {
    padding: 0.625rem 0.75rem;
    background: white;
}

.lecture-course {
    font-size: 0.7rem;
    color: var(--portal-accent-color);
    font-weight: 600;
    margin-bottom: 0.2rem;
}

.lecture-title {
    font-size: 0.8rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.3;
}

.lecture-date {
    font-size: 0.7rem;
    color: #94a3b8;
    margin-top: 0.2rem;
}

/* Inline bar chart (no JS) */
.bar-chart {
    display: flex;
    align-items: flex-end;
    gap: 0.375rem;
    height: 120px;
    padding: 0 0.5rem;
}

.bar-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    flex: 1;
}

.bar-fill {
    width: 100%;
    border-radius: 4px 4px 0 0;
    background: var(--portal-accent-color);
    opacity: 0.85;
    transition: opacity 0.2s;
}

.bar-fill:hover {
    opacity: 1;
}

.bar-label {
    font-size: 0.65rem;
    color: #94a3b8;
}

/* Inline line chart (CSS only, for trend indicators) */
.mini-trend {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    height: 28px;
}

.mini-trend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--portal-accent-color);
    flex-shrink: 0;
}

/* Scholar card */
.scholar-card {
    background: white;
    border-radius: 0.5rem;
    border: 1px solid #e2e8f0;
    padding: 1rem;
}

.scholar-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    color: #475569;
}

/* Portal tabs */
.portal-tabs {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 1.5rem;
    background: white;
    padding: 0 1.5rem;
    margin-top: -1.5rem;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
}

.portal-tab {
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #64748b;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.portal-tab.active {
    color: var(--portal-accent-color);
    border-bottom-color: var(--portal-accent-color);
}

.portal-tab:hover:not(.active) {
    color: #1e293b;
}

/* Notification items */
.notif-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 0;
    border-bottom: 1px solid #f8fafc;
}

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

.notif-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.notif-text {
    font-size: 0.8rem;
    color: #1e293b;
    line-height: 1.3;
}

.notif-time {
    font-size: 0.7rem;
    color: #94a3b8;
}

/* Action card (Diaspora) */
.action-card {
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #e2e8f0;
    padding: 1.5rem;
    cursor: pointer;
    transition: box-shadow 0.2s;
}

.action-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.action-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: white;
    margin-bottom: 1rem;
}

.action-card-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
    margin-bottom: 0.25rem;
}

.action-card-desc {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 0.75rem;
}

.action-card-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--portal-accent-color);
    text-decoration: none;
}

/* GPA trend visual (CSS bar) */
.gpa-trend-bar {
    display: flex;
    align-items: flex-end;
    gap: 1px;
    height: 80px;
    padding: 0 0.25rem;
}

/* Powerd-by footer */
.portal-powered {
    text-align: center;
    font-size: 0.7rem;
    color: #cbd5e1;
    padding: 1rem 0 0.5rem;
}

/* Fee banner */
.fee-banner {
    display: flex;
    align-items: center;
    background: #fffbeb;
    border: 1px solid #fbbf24;
    border-radius: 0.5rem;
    padding: 0.875rem 1.25rem;
    gap: 1rem;
}

.fee-banner-text {
    flex: 1;
}

.fee-banner-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: #92400e;
}

.fee-banner-sub {
    font-size: 0.78rem;
    color: #b45309;
}

/* ============================================================
   AUTH SCREEN  (Login / Forgot Password / Register)
   ============================================================ */
.auth-screen {
    min-height: 100vh;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
}

/* subtle radial glow behind card */
.auth-screen::before {
    content: '';
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37,99,235,0.06) 0%, transparent 70%);
    pointer-events: none;
}

.auth-back-link {
    position: fixed;
    top: 1.25rem;
    left: 1.5rem;
}

.auth-back-anchor {
    color: rgba(0,0,0,0.5);
    font-size: 0.85rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.15s;
}

.auth-back-anchor:hover {
    color: rgba(0,0,0,0.75);
    text-decoration: none;
}

.auth-card {
    background: #fff;
    border-radius: 1.25rem;
    padding: 2.5rem 2rem 1.75rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.45);
    position: relative;
    z-index: 1;
}

/* Wider, compact variant — fields lay out side-by-side instead of stacking,
   so the whole form (incl. submit button) fits without scrolling. */
.auth-card-wide {
    max-width: 620px;
}

/* Logo box */
.auth-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.auth-logo-box {
    width: 68px;
    height: 68px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Real Wissen wordmark — used in place of .auth-logo-box across every
   Wissen-branded auth page so the brand mark is identical everywhere. */
.auth-logo-img {
    height: 84px;
    width: auto;
}

/* Headings */
.auth-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
    text-align: center;
}

.auth-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* Role selector */
.auth-role-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.auth-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.auth-role-btn {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1.5px solid #e2e8f0;
    background: transparent;
    font-size: 0.82rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: center;
    white-space: nowrap;
}

.auth-role-btn:hover {
    border-color: #2563eb;
    color: #2563eb;
}

.auth-role-btn.active {
    border-color: #2563eb;
    background: rgba(37,99,235,0.07);
    color: #2563eb;
    font-weight: 600;
}

/* Fields */
.auth-field {
    margin-bottom: 1rem;
}

.auth-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.375rem;
}

.auth-input {
    width: 100%;
    padding: 0.65rem 0.875rem;
    border-radius: 0.5rem;
    border: 1.5px solid #e2e8f0;
    background: #f8fafc;
    font-size: 0.875rem;
    color: #0f172a;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.auth-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
    background: #fff;
}

.auth-input-wrap {
    position: relative;
}

.auth-input-pw {
    padding-right: 2.75rem;
}

.auth-pw-toggle {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-pw-toggle:hover {
    color: #475569;
}

/* Row: remember me + forgot */
.auth-row-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;
    font-size: 0.82rem;
}

.auth-remember {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #475569;
    cursor: pointer;
    font-weight: 500;
    margin: 0;
}

.auth-remember input[type=checkbox] {
    accent-color: #2563eb;
    width: 14px;
    height: 14px;
}

.auth-forgot {
    color: #16a34a;
    font-weight: 600;
    text-decoration: none;
}

.auth-forgot:hover {
    text-decoration: underline;
}

/* Error */
.auth-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    border-radius: 0.5rem;
    padding: 0.625rem 0.875rem;
    font-size: 0.82rem;
    margin-bottom: 1rem;
}

/* Submit button */
.auth-submit-btn {
    width: 100%;
    padding: 0.75rem;
    border-radius: 0.5rem;
    border: none;
    background: #16a34a;
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    transition: background 0.15s, opacity 0.15s;
    margin-bottom: 1rem;
}

.auth-submit-btn:hover:not(:disabled) {
    background: #15803d;
}

.auth-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* Demo note */
.auth-demo-note {
    text-align: center;
    font-size: 0.75rem;
    color: #94a3b8;
    margin: 0;
}

/* ── Admin table ── */
.admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.admin-table thead tr {
    background: #f8fafc;
}

.admin-table th {
    padding: 0.6rem 1rem;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    border-bottom: 1px solid #e2e8f0;
}

.admin-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

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

.admin-table tbody tr:hover {
    background: #fafafa;
}

/* ── Coming Soon placeholder ── */
.coming-soon-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5rem 2rem;
    text-align: center;
}

.coming-soon-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #94a3b8;
    margin-bottom: 1.25rem;
}

.coming-soon-title {
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 0.5rem;
}

.coming-soon-sub {
    font-size: 0.875rem;
    color: #64748b;
    max-width: 360px;
    margin-bottom: 1rem;
}

.coming-soon-eta {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 0.35rem 0.875rem;
    border-radius: 20px;
}

/* ── plain layout (home page wrapper) ── */
.plain-layout {
    min-height: 100vh;
    background: #f1f5f9;
}

.plain-content {
    /* no padding — pages manage their own spacing */
}

/* Form validation */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; font-size: 0.875rem; }

/* Error boundary */
.blazor-error-boundary { background: #b32121; padding: 1rem; color: white; }
.blazor-error-boundary::after { content: "An error has occurred."; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.5rem;
    background-color: #fff3cd;
    border-top: 1px solid #ffc107;
    text-align: center;
}

/* Blazor Server reconnect UI — framework toggles components-reconnect-{show,hide,failed,rejected}
   on #components-reconnect-modal automatically via blazor.web.js. */
#components-reconnect-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1050;
    padding: 0.6rem 1rem;
    text-align: center;
    font-size: 0.9rem;
}
#components-reconnect-modal.components-reconnect-show {
    display: block;
    background-color: #fff3cd;
    border-bottom: 1px solid #ffc107;
    color: #664d03;
}
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: block;
    background-color: #f8d7da;
    border-bottom: 1px solid #dc3545;
    color: #842029;
}
#components-reconnect-modal .reconnect-text-show,
#components-reconnect-modal .reconnect-text-failed,
#components-reconnect-modal .reconnect-reload-link {
    display: none;
}
#components-reconnect-modal.components-reconnect-show .reconnect-text-show {
    display: inline;
}
#components-reconnect-modal.components-reconnect-failed .reconnect-text-failed,
#components-reconnect-modal.components-reconnect-rejected .reconnect-text-failed,
#components-reconnect-modal.components-reconnect-failed .reconnect-reload-link,
#components-reconnect-modal.components-reconnect-rejected .reconnect-reload-link {
    display: inline;
}
#components-reconnect-modal .reconnect-reload-link {
    margin-left: 0.5rem;
    font-weight: 600;
}

/* ============================================================
   TIMELINE ITEMS  (Student Dashboard — Upcoming This Week)
   ============================================================ */
.timeline-item {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.timeline-item:last-child { border-bottom: none; }
.timeline-item:hover { background: #f8fafc; }

.timeline-bar {
    width: 4px;
    height: 36px;
    border-radius: 2px;
    flex-shrink: 0;
}

.timeline-info {
    flex: 1;
    min-width: 0;
}

.timeline-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-meta {
    font-size: 0.75rem;
    color: #64748b;
    margin-top: 2px;
}

.timeline-badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 20px;
    white-space: nowrap;
}

/* ============================================================
   VIDEO CARDS  (Student Dashboard — Recent Recorded Lectures)
   ============================================================ */
.video-card {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    background: #fff;
    transition: box-shadow 0.2s, transform 0.2s;
}
.video-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
}

.video-thumb {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: linear-gradient(135deg, #1e3a5f, #2563eb);
    cursor: pointer;
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background: rgba(255,255,255,0.25);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}
.video-thumb:hover .video-play-btn { background: rgba(255,255,255,0.4); }

.video-duration {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
}

.video-info {
    padding: 0.75rem;
}

.video-course {
    font-size: 0.72rem;
    font-weight: 700;
    color: #1e90ff;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 2px;
}

.video-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 4px;
}

.video-date {
    font-size: 0.72rem;
    color: #94a3b8;
}

/* ============================================================
   SCHOLAR CARDS  (Diaspora Dashboard — Featured Scholars)
   ============================================================ */
.scholar-card {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}
.scholar-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.scholar-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1rem 1rem 0.5rem;
}

.scholar-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    color: #334155;
    flex-shrink: 0;
}

.scholar-country-badge {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #475569;
}

.scholar-card-body {
    padding: 0.25rem 1rem 0.75rem;
    flex: 1;
}

.scholar-name {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e293b;
    margin-bottom: 2px;
}

.scholar-institution {
    font-size: 0.78rem;
    color: #64748b;
    margin-bottom: 4px;
}

.scholar-expertise {
    font-size: 0.75rem;
    color: #7c3aed;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.scholar-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.scholar-rating {
    font-size: 0.78rem;
    font-weight: 700;
    color: #1e293b;
}

.scholar-meta {
    font-size: 0.72rem;
    color: #94a3b8;
}

.scholar-card-footer {
    padding: 0.75rem 1rem;
    border-top: 1px solid #f1f5f9;
}

.scholar-connect-btn {
    width: 100%;
    background: transparent;
    border: 1px solid #7c3aed;
    color: #7c3aed;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0.375rem 0;
    transition: all 0.15s;
}
.scholar-connect-btn:hover {
    background: #7c3aed;
    color: #fff;
}

/* ============================================================
   DIASPORA ACTION CARDS  (Diaspora Dashboard bottom row)
   ============================================================ */
.diaspora-action-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1.25rem;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.diaspora-action-card:hover {
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transform: translateY(-2px);
    border-color: var(--action-color, #7c3aed);
    color: inherit;
    text-decoration: none;
}

.diaspora-action-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.diaspora-action-title {
    font-weight: 700;
    font-size: 0.9rem;
    color: #1e293b;
    margin-bottom: 2px;
}

.diaspora-action-sub {
    font-size: 0.78rem;
    color: #64748b;
}

.diaspora-action-cta {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--action-color, #7c3aed);
    display: flex;
    align-items: center;
    gap: 4px;
}

/* ── Offcanvas drawer (Blazor-controlled, no JS) ── */
.offcanvas {
    position: fixed;
    bottom: 0;
    z-index: 1055;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    background-color: #fff;
    background-clip: padding-box;
    outline: 0;
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    transition: transform 0.3s ease-in-out;
}
.offcanvas-end {
    top: 0;
    right: 0;
    border-left: 1px solid #e2e8f0;
    transform: translateX(100%);
}
.offcanvas-end.show {
    transform: none;
}
.offcanvas-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #e2e8f0;
}
.offcanvas-body {
    flex-grow: 1;
    padding: 1rem 1.25rem;
    overflow-y: auto;
}

/* ── Modal backdrop (used in inline Blazor modals) ── */
.modal-backdrop-custom {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1050;
}

/* ── First-login spotlight tour ── */
.tour-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1200;
    pointer-events: none;
}

.tour-spotlight {
    position: fixed;
    z-index: 1201;
    border-radius: 8px;
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.6);
    outline: 2px solid var(--portal-accent-color, var(--tenant-primary, #0d6efd));
    outline-offset: 3px;
    pointer-events: none;
    transition: top .18s ease, left .18s ease, width .18s ease, height .18s ease;
}

.tour-tooltip {
    position: fixed;
    z-index: 1202;
    width: 300px;
    max-width: calc(100vw - 24px);
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    padding: 16px 18px;
    font-size: .85rem;
    color: #1e293b;
}

.tour-tooltip-title {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: 6px;
    color: var(--portal-accent-color, var(--tenant-primary, #0d6efd));
}

.tour-tooltip-body {
    color: #475569;
    line-height: 1.45;
    margin-bottom: 10px;
}

.tour-tooltip-progress {
    font-size: .72rem;
    color: #94a3b8;
    margin-bottom: 12px;
}

.tour-tooltip-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tour-tooltip-spacer {
    flex: 1 1 auto;
}

.tour-btn {
    border: none;
    border-radius: 7px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
}

.tour-btn-skip {
    background: none;
    color: #94a3b8;
    padding-left: 0;
}
.tour-btn-skip:hover { color: #64748b; }

.tour-btn-back {
    background: #f1f5f9;
    color: #475569;
}
.tour-btn-back:hover { background: #e2e8f0; }

.tour-btn-next {
    background: var(--portal-accent-color, var(--tenant-primary, #0d6efd));
    color: #fff;
}
.tour-btn-next:hover { filter: brightness(0.92); }

.portal-tour-replay-btn {
    background: none;
    border: none;
    font-size: 1.1rem;
    color: #64748b;
    cursor: pointer;
    padding: 0.25rem;
}
.portal-tour-replay-btn:hover {
    color: var(--portal-accent-color, var(--tenant-primary, #0d6efd));
}

/* ── Applicant portal theme overrides ── */
.portal-applicant {
    --portal-sidebar-bg: #0c1e35;
    --portal-sidebar-accent: #0284c7;
}

.portal-applicant .portal-logo-icon {
    background: linear-gradient(135deg, #0ea5e9, #0284c7);
    border-radius: 8px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.1rem;
}