/* =============================================
   TAP SERVICES — PORTAL SHARED CSS
   Student Portal | Admin Dashboard | Quiz
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=Barlow:wght@400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');

/* Hide WordPress theme header, footer, & Elementor headers/footers on portal pages */
body.tapsvs-portal-page header,
body.tapsvs-portal-page footer,
body.tapsvs-portal-page #masthead,
body.tapsvs-portal-page #colophon,
body.tapsvs-portal-page .elementor-header,
body.tapsvs-portal-page .elementor-footer,
body.tapsvs-portal-page .elementor-location-header,
body.tapsvs-portal-page .elementor-location-footer,
body.tapsvs-portal-page [data-elementor-type="header"],
body.tapsvs-portal-page [data-elementor-type="footer"],
body.tapsvs-portal-page .site-header,
body.tapsvs-portal-page .site-footer,
body.tapsvs-portal-page .ast-header-break-point,
body.tapsvs-portal-page .top-banner,
body.tapsvs-portal-page #wpadminbar,
body.tapsvs-portal-page div[class*="elementor-5258"],
body.tapsvs-portal-page div[class*="elementor-5272"] {
    display: none !important;
}

/* Force 100% full width layout on all WordPress theme wrapper containers */
html, body.tapsvs-portal-page {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    background: #F4F4EE !important;
}

body.tapsvs-portal-page #page,
body.tapsvs-portal-page #content,
body.tapsvs-portal-page #primary,
body.tapsvs-portal-page #main,
body.tapsvs-portal-page .site-content,
body.tapsvs-portal-page .ast-container,
body.tapsvs-portal-page .ast-row,
body.tapsvs-portal-page .site-main,
body.tapsvs-portal-page .entry-content,
body.tapsvs-portal-page .ast-article-single,
body.tapsvs-portal-page .elementor,
body.tapsvs-portal-page .elementor-inner,
body.tapsvs-portal-page .elementor-section-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

.portal-shell {
    display: flex !important;
    width: 100% !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Scoped to >768px so it can't fight the mobile off-canvas-sidebar
   overrides further down this file (those set margin-left/width back to
   0/100% at <=768px) — this rule and those used to collide since both used
   !important on the same properties, at the same specificity, and CSS only
   lets source order break that tie; this used to sit unscoped, so any
   future reordering of the file could silently re-break the mobile layout
   again. Scoping removes the ambiguity outright rather than relying on
   staying later-in-file forever. */
@media (min-width: 769px) {
    .portal-main {
        margin-left: var(--sidebar-w, 260px) !important;
        width: calc(100% - var(--sidebar-w, 260px)) !important;
        max-width: calc(100% - var(--sidebar-w, 260px)) !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ---------- RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Brand */
    --amber:         #F5820A;
    --amber-light:   #FEA83C;
    --amber-border:  rgba(245,130,10,0.25);
    --amber-bg:      rgba(245,130,10,0.08);

    /* Portal Layout */
    --sidebar-w:     260px;
    --topbar-h:      0px;

    /* Backgrounds */
    --bg-topbar:     #0A0A0A;
    --bg-sidebar:    #111111;
    --bg-content:    #F0EFEB;
    --bg-card:       #FFFFFF;
    --bg-card-dark:  #1A1A1A;

    /* Borders */
    --border-light:  #E2E2DA;
    --border-dark:   #2A2A2A;
    --border-card:   rgba(0,0,0,0.07);

    /* Text */
    --text-dark:     #111111;
    --text-heading:  #0F172A;
    --text-body:     #444444;
    --text-muted:    #888888;
    --text-dim:      #AAAAAA;
    --text-white:    #FFFFFF;
    --text-amber:    #F5820A;

    /* Status & Accents */
    --green:         #22C55E;
    --green-bg:      rgba(34,197,94,0.1);
    --blue:          #3B82F6;
    --blue-bg:       rgba(59,130,246,0.1);
    --red:           #EF4444;
    --red-bg:        rgba(239,68,68,0.1);
    --purple:        #A78BFA;
    --purple-bg:     rgba(167,139,250,0.12);
    --purple-border: rgba(167,139,250,0.25);

    /* Fonts */
    --font-display:  'Barlow Condensed', sans-serif;
    --font-heading:  'Barlow', sans-serif;
    --font-body:     'Inter', sans-serif;

    /* Radius */
    --r-sm:    6px;
    --r-md:    10px;
    --r-lg:    14px;
    --r-xl:    20px;

    /* Shadows */
    --shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg:   0 12px 32px rgba(0,0,0,0.12);

    /* Transitions */
    --ease:        cubic-bezier(0.4,0,0.2,1);
    --dur:         0.2s;
}

/* =============================================
   DARK MODE
   The sidebar/topbar are already dark in "light" mode (--bg-topbar /
   --bg-sidebar above), so switching themes is really about the main
   content area — page background, cards, tables, and text. Toggled by
   adding data-theme="dark" to <html> (tapsvs-theme.js in portal.js);
   persisted in localStorage and applied before paint via an inline
   script in <head> (tapsvs_output_theme_init_script() in
   tap-student-portal.php) so there's no flash of the wrong theme.
   ============================================= */
html[data-theme="dark"] {
    --bg-content:    #14161B;
    --bg-card:       #1B1E25;
    --bg-card-dark:  #101216;

    --border-light:  #2B2F38;
    --border-dark:   #3A3F4A;
    --border-card:   rgba(255,255,255,0.08);

    --text-dark:     #EDF0F5;
    --text-heading:  #F5F7FA;
    --text-body:     #C6CBD3;
    --text-muted:    #9AA1AC;
    --text-dim:      #767D88;

    --shadow-sm:   0 1px 3px rgba(0,0,0,0.35);
    --shadow-md:   0 4px 12px rgba(0,0,0,0.4);
    --shadow-lg:   0 12px 32px rgba(0,0,0,0.5);
}

/* The hardcoded !important page background below (kept as-is for light
   mode — see its own comment) needs a dark-mode override of equal
   specificity to actually win. */
html[data-theme="dark"],
html[data-theme="dark"] body.tapsvs-portal-page {
    background: var(--bg-content) !important;
}

/* Common hardcoded (non-variable) hover/surface tints used throughout the
   templates — safe, class-scoped overrides rather than a blanket
   selector, so intentionally-colored badges/pills/icons inside these
   containers are never touched. */
html[data-theme="dark"] .cpl-item:hover,
html[data-theme="dark"] .portal-table tbody tr:hover td {
    background: rgba(255,255,255,0.03) !important;
}

/* Theme toggle button — floating so it works on every portal page without
   needing a matching insertion point in each template's own header
   markup (injected by tapsvs-theme.js). */
.tapsvs-theme-toggle {
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 10000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-dark);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tapsvs-theme-toggle:hover { transform: translateY(-1px); }
.tapsvs-theme-toggle svg { width: 18px; height: 18px; }
.tapsvs-theme-toggle .tapsvs-theme-toggle-sun { display: none; }
html[data-theme="dark"] .tapsvs-theme-toggle .tapsvs-theme-toggle-moon { display: none; }
html[data-theme="dark"] .tapsvs-theme-toggle .tapsvs-theme-toggle-sun { display: block; }
@media (max-width: 480px) {
    .tapsvs-theme-toggle { top: 10px; left: 10px; width: 34px; height: 34px; }
    .tapsvs-theme-toggle svg { width: 16px; height: 16px; }
}

html, body {
    max-width: 100%;
    overflow-x: hidden;
}
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); color: var(--text-dark); background: var(--bg-content); margin: 0; padding: 0; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }

/* =============================================
   PORTAL LAYOUT SHELL
   ============================================= */
.portal-shell {
    display: flex;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: hidden;
}

/* =============================================
   TOP NAVIGATION BAR (Dark)
   ============================================= */
.portal-topbar {
    display: none !important;
}

.sidebar-brand {
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0D0D0D;
    flex-shrink: 0;
}
.sidebar-brand .portal-logo {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
}

.topbar-left {
    width: var(--sidebar-w);
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: 1px solid var(--border-dark);
    height: 100%;
    padding: 0 20px;
    flex-shrink: 0;
}

.portal-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-logo svg { flex-shrink: 0; }

.portal-logo-text {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: var(--text-white);
    text-transform: uppercase;
}
.portal-logo-text span { color: var(--amber); }

.topbar-center {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto;
}

.topbar-nav-link {
    font-family: var(--font-heading);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
    padding: 8px 14px;
    border-radius: var(--r-sm);
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.topbar-nav-link:hover { color: var(--text-white); background: rgba(255,255,255,0.05); }
.topbar-nav-link.active { color: var(--amber); }

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-phone {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    display: flex;
    align-items: center;
    gap: 6px;
}

.topbar-btn {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 8px 18px;
    background: var(--amber);
    color: #000;
    border-radius: var(--r-sm);
    transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.topbar-btn:hover { background: var(--amber-light); transform: translateY(-1px); }

.btn-purple {
    background: #8B5CF6 !important;
    color: #ffffff !important;
    border: none !important;
}
.btn-purple:hover {
    background: #7C3AED !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.btn-emerald {
    background: #10B981 !important;
    color: #ffffff !important;
    border: none !important;
}
.btn-emerald:hover {
    background: #059669 !important;
    color: #ffffff !important;
    transform: translateY(-1px);
}

.topbar-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border-radius: var(--r-md);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-dark);
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
.topbar-user:hover { background: rgba(255,255,255,0.08); }

.topbar-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-white);
}

/* =============================================
   LEFT SIDEBAR
   ============================================= */
.portal-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-w);
    height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-dark);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    z-index: 100;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.1) transparent;
}

/* User Profile Block */
.sidebar-profile {
    padding: 24px 20px 20px;
    border-bottom: 1px solid var(--border-dark);
}

.sidebar-avatar {
    width: 52px;
    height: 52px;
    background: var(--amber);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 900;
    color: #000;
    margin-bottom: 12px;
    overflow: hidden;
}

.sidebar-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.sidebar-name {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: var(--text-white);
    line-height: 1.2;
    margin-bottom: 4px;
}

.sidebar-role {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    margin-bottom: 12px;
}

.sidebar-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.sidebar-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    border: 1px solid;
}
.sidebar-badge.active { color: var(--green); border-color: rgba(34,197,94,0.3); background: rgba(34,197,94,0.08); }
.sidebar-badge.certs  { color: var(--amber); border-color: var(--amber-border); background: var(--amber-bg); }
.sidebar-badge.admin  { color: #A78BFA; border-color: rgba(167,139,250,0.3); background: rgba(167,139,250,0.08); }

/* Sidebar Navigation */
.sidebar-nav { flex: 1; padding: 16px 0; }

.sidebar-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 20px 6px;
}

.sidebar-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 20px;
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    cursor: pointer;
    transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
    position: relative;
    text-decoration: none;
}
.sidebar-nav-item:hover {
    color: var(--text-white);
    background: rgba(255,255,255,0.04);
}
.sidebar-nav-item.active {
    color: var(--amber);
    background: rgba(245,130,10,0.08);
}
.sidebar-nav-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 3px;
    background: var(--amber);
    border-radius: 0 3px 3px 0;
}

/* Small polish on the sidebar nav icons: a playful pop/tilt on hover, and a
   quick tap-down on click, plus a brief staggered fade-slide-in the moment
   the sidebar first renders (page load / "reload"). Scoped to svg directly
   inside .sidebar-nav-item so it only touches the icons, not the row
   background/label already handled above. */
.sidebar-nav-item svg {
    flex-shrink: 0;
    transition: transform 0.25s ease;
}
.sidebar-nav-item:hover svg {
    transform: scale(1.18) rotate(-6deg);
}
.sidebar-nav-item:active svg {
    transform: scale(0.9) rotate(0deg);
}

@keyframes sidebarNavItemIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}
.sidebar-nav > a.sidebar-nav-item {
    animation: sidebarNavItemIn 0.4s ease both;
}
.sidebar-nav > a.sidebar-nav-item:nth-of-type(1)  { animation-delay: 0.02s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(2)  { animation-delay: 0.05s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(3)  { animation-delay: 0.08s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(4)  { animation-delay: 0.11s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(5)  { animation-delay: 0.14s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(6)  { animation-delay: 0.17s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(7)  { animation-delay: 0.20s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(8)  { animation-delay: 0.23s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(9)  { animation-delay: 0.26s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(10) { animation-delay: 0.29s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(11) { animation-delay: 0.32s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(12) { animation-delay: 0.35s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(13) { animation-delay: 0.38s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(14) { animation-delay: 0.41s; }
.sidebar-nav > a.sidebar-nav-item:nth-of-type(15) { animation-delay: 0.44s; }

.nav-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: var(--amber);
    color: #000;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
}

.sidebar-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--border-dark);
}

.sidebar-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    font-weight: 500;
    color: rgba(255,255,255,0.3);
    padding: 8px 0;
    transition: color var(--dur) var(--ease);
    cursor: pointer;
}
.sidebar-logout:hover { color: var(--red); }

/* =============================================
   MAIN CONTENT AREA
   ============================================= */
.portal-main {
    margin-left: var(--sidebar-w);
    margin-top: var(--topbar-h);
    min-height: calc(100vh - var(--topbar-h));
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    max-width: 100%;
}

/* Page Header Band */
.portal-page-header {
    background: var(--bg-card);
    border-bottom: 2px solid var(--border-light);
    padding: 24px 32px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.pph-left {}
.pph-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 6px;
}

.pph-title {
    font-family: var(--font-display);
    font-size: 38px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--text-dark);
    line-height: 1;
    letter-spacing: -0.5px;
}

.pph-sub {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
}

.pph-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
    padding-top: 6px;
}

/* Content body */
.portal-content {
    padding: 28px 32px;
    flex: 1;
    min-width: 0;
}

/* =============================================
   STAT CARDS
   ============================================= */
.stat-cards-row,
.admin-stat-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-shadow: var(--shadow-sm);
    position: relative;
    overflow: hidden;
}

a.stat-card {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

a.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.stat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.stat-card-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.stat-card-trend {
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.stat-card-trend.up   { color: var(--green); }
.stat-card-trend.info { color: var(--text-muted); }
.stat-card-trend.next { color: var(--amber); }

.stat-card-value {
    font-family: var(--font-heading);
    font-size: 38px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1;
}

.stat-card-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.stat-card-bar {
    height: 3px;
    background: var(--border-light);
    border-radius: 2px;
    margin-top: 4px;
    overflow: hidden;
}
.stat-card-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--amber);
}

.admin-stat-cards-row .stat-card {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 20px 22px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-stat-cards-row .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.admin-stat-cards-row .stat-card-value {
    font-family: var(--font-heading) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1;
    margin: 8px 0 2px;
}

.admin-stat-cards-row .stat-card-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748B !important;
}

.admin-stat-cards-row .stat-card-bar {
    height: 3px !important;
    background: #E2E8F0 !important;
    border-radius: 2px !important;
    margin-top: 6px;
    overflow: hidden;
}

/* =============================================
   PORTAL CARDS
   ============================================= */
.portal-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    min-width: 0;
    max-width: 100%;
}

.portal-card-header {
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portal-card-title {
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-dark);
}

.portal-card-link {
    font-size: 12px;
    font-weight: 600;
    color: var(--amber);
    display: flex;
    align-items: center;
    gap: 4px;
    transition: gap var(--dur) var(--ease);
}
.portal-card-link:hover { gap: 8px; }

.portal-card-body { padding: 20px 22px; }

/* =============================================
   MY COURSES — PROGRESS LIST
   ============================================= */
.course-progress-list { display: flex; flex-direction: column; gap: 0; }

.cpl-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--dur) var(--ease);
}
.cpl-item:last-child { border-bottom: none; }
.cpl-item:hover { background: #FAFAF8; }

.cpl-thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--r-sm);
    flex-shrink: 0;
    overflow: hidden;
    background: var(--bg-sidebar);
}
.cpl-thumb-inner {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.cpl-info { flex: 1; min-width: 0; }
.cpl-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}
.cpl-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 10px;
}
.cpl-bar-wrap { display: flex; align-items: center; gap: 10px; }
.cpl-bar {
    flex: 1;
    height: 5px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
}
.cpl-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--amber);
    transition: width 0.6s var(--ease);
}
.cpl-bar-fill.complete { background: var(--green); }
.cpl-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-body);
    min-width: 32px;
}

.cpl-status {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 10px;
    display: flex;
    align-items: center;
    gap: 4px;
}
.cpl-status.inprog { color: var(--amber); }
.cpl-status.done   { color: var(--green); }
.cpl-status.upcoming { color: var(--blue); }

.cpl-action {
    flex-shrink: 0;
}

.btn-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur) var(--ease);
    cursor: pointer;
    text-decoration: none;
}
.btn-circle.amber { border-color: var(--amber-border); color: var(--amber); }
.btn-circle.amber:hover { background: var(--amber); color: #000; border-color: var(--amber); }
.btn-circle.green { border-color: rgba(34,197,94,0.3); color: var(--green); }
.btn-circle.green:hover { background: var(--green); color: #fff; border-color: var(--green); }

/* =============================================
   OVERALL PROGRESS — DONUT
   ============================================= */
.overall-progress-ring {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 20px;
}

.donut-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 12px;
}
.donut-wrap svg { transform: rotate(-90deg); }
.donut-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.donut-pct {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 800;
    color: var(--text-dark);
    line-height: 1;
}
.donut-label {
    font-size: 10px;
    color: var(--text-muted);
    font-weight: 600;
}

.progress-metrics { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.progress-metric-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-light);
}
.progress-metric-row:last-child { border-bottom: none; padding-bottom: 0; }
.pm-label { color: var(--text-body); font-weight: 500; }
.pm-val   { font-weight: 700; color: var(--text-dark); }
.pm-val span { color: var(--amber); }

/* =============================================
   UPCOMING SESSIONS
   ============================================= */
.session-list { display: flex; flex-direction: column; gap: 12px; }

.session-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.session-date-chip {
    width: 46px;
    text-align: center;
    background: var(--text-dark);
    color: var(--text-white);
    border-radius: var(--r-sm);
    padding: 6px;
    flex-shrink: 0;
}
.sdc-month { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--amber); }
.sdc-day   { font-size: 20px; font-weight: 800; font-family: var(--font-heading); line-height: 1.1; }

.session-info { flex: 1; }
.session-name { font-size: 13px; font-weight: 700; color: var(--text-dark); margin-bottom: 3px; }
.session-time { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.session-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}
.session-tag.online { color: var(--blue); background: var(--blue-bg); }
.session-tag.onsite { color: var(--amber); background: var(--amber-bg); }
.session-tag.lab    { color: var(--green); background: var(--green-bg); }

/* =============================================
   CERTIFICATIONS GRID
   ============================================= */
.cert-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cert-mini-card {
    background: var(--bg-card-dark);
    border-radius: var(--r-md);
    padding: 16px;
    position: relative;
    overflow: hidden;
}
.cert-mini-card.locked {
    opacity: 0.5;
    filter: grayscale(0.3);
}
.cert-mini-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--amber-bg);
    border: 2px solid var(--amber-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
.cert-mini-icon svg { color: var(--amber); }
.cert-mini-name { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-white); margin-bottom: 4px; }
.cert-mini-issued { font-size: 10px; color: rgba(255,255,255,0.35); margin-bottom: 10px; }
.cert-mini-dl { font-size: 10px; font-weight: 700; color: var(--amber); display: flex; align-items: center; gap: 4px; }
.cert-mini-dl:hover { color: var(--amber-light); }
.cert-locked-label { font-size: 10px; color: rgba(255,255,255,0.3); }

/* =============================================
   ANNOUNCEMENTS
   ============================================= */
.announcement-list { display: flex; flex-direction: column; gap: 0; }
.announcement-item {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-light);
}
.announcement-item:last-child { border-bottom: none; }
.ann-tag {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 3px;
    margin-bottom: 6px;
}
.ann-tag.update   { background: var(--amber-bg); color: var(--amber); }
.ann-tag.reminder { background: var(--blue-bg); color: var(--blue); }
.ann-tag.new      { background: var(--green-bg); color: var(--green); }
.ann-text { font-size: 12px; color: var(--text-body); line-height: 1.5; margin-bottom: 4px; }
.ann-time { font-size: 11px; color: var(--text-dim); }

/* =============================================
   COURSE MATERIALS — FILE LIST
   ============================================= */
.file-list { display: flex; flex-direction: column; }
.file-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 22px;
    border-bottom: 1px solid var(--border-light);
    transition: background var(--dur) var(--ease);
}
.file-item:last-child { border-bottom: none; }
.file-item:hover { background: #FAFAF8; }

.file-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.file-icon.pdf   { background: rgba(239,68,68,0.1); color: var(--red); }
.file-icon.xlsx  { background: rgba(34,197,94,0.1); color: var(--green); }
.file-icon.video { background: var(--blue-bg); color: var(--blue); }
.file-icon.zip   { background: var(--amber-bg); color: var(--amber); }
.file-icon.lesson { background: rgba(167,139,250,0.1); color: #A78BFA; }

.file-name { font-size: 13px; font-weight: 600; color: var(--text-dark); flex: 1; }
.file-meta { font-size: 11px; color: var(--text-dim); margin-right: 12px; white-space: nowrap; }
a.file-meta:hover { text-decoration: underline; color: var(--amber); }

.file-dl-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    transition: all var(--dur) var(--ease);
    cursor: pointer;
    flex-shrink: 0;
}
.file-dl-btn:hover { background: var(--amber); border-color: var(--amber); color: #000; }

/* At narrow widths, icon + name + meta(nowrap) + button all fighting for
   one line left .file-name almost no room, wrapping a long lesson title
   across as many as 6-7 cramped lines with the icon/button badly
   misaligned against it. Icon/name/button share the first line (name
   clamped to 2 lines instead of unbounded wrap); the course-name subtitle
   drops to its own line below, indented under the title. */
@media (max-width: 480px) {
    .file-item { flex-wrap: wrap; row-gap: 6px; }
    .file-name {
        flex: 1 1 auto;
        min-width: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .file-meta {
        flex: 0 0 100%;
        white-space: normal;
        margin-right: 0;
        margin-left: 46px;
    }
}

/* =============================================
   PORTAL GRID LAYOUTS
   ============================================= */
.portal-two-col {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    min-width: 0;
    max-width: 100%;
    align-items: start;
}

.portal-three-col {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.col-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
    max-width: 100%;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 9px 18px;
    border-radius: var(--r-sm);
    cursor: pointer;
    border: none;
    transition: all var(--dur) var(--ease);
    text-decoration: none;
}
.btn-amber { background: var(--amber); color: #000; }
.btn-amber:hover { background: var(--amber-light); transform: translateY(-1px); }
.btn-outline { background: transparent; color: var(--text-dark); border: 1.5px solid var(--border-light); }
.btn-outline:hover { border-color: var(--text-dark); }
.btn-outline-amber { background: transparent; color: var(--amber); border: 1.5px solid var(--amber-border); }
.btn-outline-amber:hover { background: var(--amber); color: #000; }
.btn-sm { padding: 6px 14px; font-size: 11px; }
.btn-lg { padding: 12px 24px; font-size: 13px; }
/* .btn-xs is used throughout admin-dashboard.php for compact in-table row
   actions (Remove course, delete-quiz-attempt, view-students triggers) but
   had no CSS of its own — every "extra small" button was silently
   rendering at the full default .btn size (9px/18px padding, 12px text),
   overflowing/misaligning inside narrow table cells built to fit something
   much smaller. */
.btn-xs { padding: 4px 10px; font-size: 10px; letter-spacing: 0.5px; }

/* =============================================
   ADMIN — STUDENT TABLE
   ============================================= */
.portal-table {
    width: 100%;
    border-collapse: collapse;
}

/* .table-responsive wraps several tables across admin-dashboard.php (Paid
   Courses, Quiz Results, Courses, Certifications, the instructor's real
   quiz-results table, etc.) but had NO CSS defined anywhere — meaning it
   never actually enabled horizontal scrolling. Combined with .portal-table
   getting a mobile min-width (further down this file) so it stops
   squishing its own cell content, a wrapper with no overflow handling
   would just let the table spill past the card/page instead of scrolling
   inside it, which reads as content (badges, buttons) rendering
   oversized/misaligned relative to the visible viewport. */
.table-responsive {
    overflow-x: auto;
}

.portal-table thead th {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 16px;
    text-align: left;
    background: #F8F8F4;
    border-bottom: 1px solid var(--border-light);
}

.portal-table tbody td {
    padding: 14px 16px;
    font-size: 13px;
    color: var(--text-body);
    border-bottom: 1px solid var(--border-light);
    vertical-align: middle;
}
.portal-table tbody tr:last-child td { border-bottom: none; }
.portal-table tbody tr:hover td { background: #FAFAF8; }

.student-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}
.student-avatar-sm {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--amber);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 900;
    color: #000;
    flex-shrink: 0;
}
.student-name-cell { font-weight: 700; color: var(--text-dark); font-size: 13px; }
.student-email-cell { font-size: 11px; color: var(--text-muted); }

.mini-bar {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mini-bar-track {
    width: 80px;
    height: 4px;
    background: var(--border-light);
    border-radius: 2px;
    overflow: hidden;
}
.mini-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: var(--amber);
}
.mini-bar-fill.hi { background: var(--green); }
.mini-bar-pct { font-size: 11px; font-weight: 700; color: var(--text-body); }

/* .mini-progress-wrap / its .mini-bar / .mini-pct: the small inline
   progress-bar-plus-percentage used in the Progress Reports table and the
   Student Profile modal's Courses tab. This is a DIFFERENT markup from
   .mini-bar-track/.mini-bar-pct above (that pairing is never actually used
   in any template) and never had its own CSS — so .mini-bar here fell back
   to the bare .mini-bar rule above (a flex wrapper, wrong role for what's
   actually just a bar track) with no width to size its percentage fill
   against, and .mini-progress-wrap had no layout at all. It only ever
   rendered correctly where a page happened to patch it with one-off inline
   styles (the All Students directory table) — everywhere else the bar and
   its percentage stacked on separate lines with an invisible/collapsed
   bar. Scoped under .mini-progress-wrap so it can't affect the older,
   unrelated .mini-bar-track-based markup if that's ever reintroduced. */
.mini-progress-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mini-progress-wrap .mini-bar {
    display: block;
    width: 70px;
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.mini-progress-wrap .mini-pct {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-body);
    white-space: nowrap;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 100px;
}
.status-pill.active   { color: var(--green); background: var(--green-bg); }
.status-pill.pending  { color: var(--amber); background: var(--amber-bg); }
.status-pill.inactive { color: var(--text-dim); background: rgba(0,0,0,0.04); }
.status-pill.passed   { color: var(--green); background: var(--green-bg); }
.status-pill.failed   { color: var(--red); background: var(--red-bg); }
.status-pill.completed { color: var(--blue); background: var(--blue-bg); }

/* =============================================
   QUIZ PAGE
   ============================================= */
.quiz-shell {
    max-width: 760px;
    margin: 0 auto;
}

.quiz-header {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 24px;
    margin-bottom: 20px;
}

.quiz-course-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 6px;
}
.quiz-title {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 900;
    text-transform: uppercase;
    color: var(--text-dark);
    margin-bottom: 8px;
}
.quiz-meta-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.quiz-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

.quiz-progress-bar {
    margin-top: 16px;
}
.quiz-pb-label {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-muted);
    margin-bottom: 6px;
}
.quiz-pb-track {
    height: 6px;
    background: var(--border-light);
    border-radius: 3px;
    overflow: hidden;
}
.quiz-pb-fill {
    height: 100%;
    gap: 8px;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--text-dark);
    padding: 8px 16px;
    background: var(--amber-bg);
    border: 1px solid var(--amber-border);
    border-radius: var(--r-md);
    flex-shrink: 0;
}
.quiz-timer.warning { color: var(--red); background: var(--red-bg); border-color: rgba(239,68,68,0.25); }

/* Question Card */
.question-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 28px;
    margin-bottom: 16px;
    box-shadow: var(--shadow-sm);
}

.question-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 10px;
}
.question-text {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.5;
    margin-bottom: 22px;
}

.quiz-options { display: flex; flex-direction: column; gap: 10px; }

.quiz-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    border: 1.5px solid var(--border-light);
    border-radius: var(--r-md);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    position: relative;
    background: #FAFAF8;
}
.quiz-option:hover { border-color: var(--amber-border); background: var(--amber-bg); }
.quiz-option.selected { border-color: var(--amber); background: rgba(245,130,10,0.06); }
.quiz-option.correct  { border-color: var(--green); background: var(--green-bg); }
.quiz-option.wrong    { border-color: var(--red); background: var(--red-bg); }

.quiz-option-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    flex-shrink: 0;
    margin-top: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--dur) var(--ease);
}
.quiz-option.selected .quiz-option-radio {
    border-color: var(--amber);
    background: var(--amber);
}
.quiz-option.selected .quiz-option-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}
.quiz-option.correct .quiz-option-radio { border-color: var(--green); background: var(--green); }
.quiz-option.wrong   .quiz-option-radio { border-color: var(--red); background: var(--red); }

.quiz-option-letter {
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 900;
    color: var(--text-muted);
    width: 20px;
    flex-shrink: 0;
    margin-top: 1px;
}
.quiz-option.selected .quiz-option-letter { color: var(--amber); }

.quiz-option-text {
    font-size: 14px;
    color: var(--text-body);
    line-height: 1.5;
    flex: 1;
}
.quiz-option.selected .quiz-option-text { color: var(--text-dark); font-weight: 500; }

.quiz-explanation {
    margin-top: 14px;
    padding: 14px;
    background: var(--green-bg);
    border: 1px solid rgba(34,197,94,0.2);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--text-body);
    line-height: 1.5;
    display: none;
}
.quiz-explanation.show { display: block; }
.quiz-explanation strong { color: var(--green); }

/* Quiz Navigation */
.quiz-nav {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-sm);
}

.quiz-nav-dots {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    flex: 1;
    justify-content: center;
    padding: 0 16px;
}
.qnd {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    border: 1.5px solid var(--border-light);
    color: var(--text-muted);
}
.qnd:hover { border-color: var(--amber); color: var(--amber); }
.qnd.answered { background: var(--amber); border-color: var(--amber); color: #000; }
.qnd.current  { background: var(--text-dark); border-color: var(--text-dark); color: #fff; }
.qnd.correct  { background: var(--green); border-color: var(--green); color: #fff; }
.qnd.wrong    { background: var(--red); border-color: var(--red); color: #fff; }

/* Quiz Result */
.quiz-result-card {
    background: var(--bg-card);
    border: 1px solid var(--border-card);
    border-radius: var(--r-xl);
    padding: 40px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}
.qr-score-ring {
    position: relative;
    width: 150px;
    height: 150px;
    margin: 0 auto 24px;
}
.qr-score-ring svg { transform: rotate(-90deg); }
.qr-score-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.qr-pct { font-family: var(--font-heading); font-size: 36px; font-weight: 800; color: var(--text-dark); }
.qr-label { font-size: 11px; color: var(--text-muted); }
.qr-status { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 8px; }
.qr-status.pass { color: var(--green); }
.qr-status.fail { color: var(--red); }
.qr-title { font-family: var(--font-display); font-size: 30px; font-weight: 900; text-transform: uppercase; color: var(--text-dark); margin-bottom: 8px; }
.qr-sub { font-size: 14px; color: var(--text-muted); margin-bottom: 24px; }
.qr-breakdown {
    display: flex;
    justify-content: center;
    gap: 32px;
    margin-bottom: 28px;
    padding: 20px;
    background: #F8F8F4;
    border-radius: var(--r-md);
}
.qrb-item { text-align: center; }
.qrb-val { font-family: var(--font-heading); font-size: 26px; font-weight: 800; color: var(--text-dark); }
.qrb-lbl { font-size: 11px; color: var(--text-muted); margin-top: 2px; }

/* =============================================
   ADMIN — CHARTS & ANALYTICS
   ============================================= */
.admin-stat-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.chart-placeholder {
    height: 180px;
    background: linear-gradient(180deg, var(--amber-bg) 0%, transparent 100%);
    border-radius: var(--r-md);
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 16px;
    overflow: hidden;
}

.chart-bar {
    flex: 1;
    background: var(--amber);
    border-radius: 4px 4px 0 0;
    opacity: 0.8;
    transition: opacity var(--dur) var(--ease);
    min-height: 4px;
}
.chart-bar:hover { opacity: 1; }
.chart-bar.low { background: var(--red); }
.chart-bar.mid { background: var(--amber); }
.chart-bar.hi  { background: var(--green); }

/* =============================================
   SEARCH & FILTER BAR
   ============================================= */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.search-input-wrap svg {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
}
.search-input {
    width: 100%;
    padding: 9px 12px 9px 36px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    font-size: 13px;
    color: var(--text-dark);
    outline: none;
    transition: border-color var(--dur) var(--ease);
}
.search-input:focus { border-color: var(--amber); }
.search-input::placeholder { color: var(--text-dim); }

.filter-select {
    padding: 9px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    font-size: 12px;
    font-family: var(--font-body);
    color: var(--text-body);
    outline: none;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease);
}
.filter-select:focus { border-color: var(--amber); }

/* =============================================
   QUIZ ATTEMPTS TABLE (ADMIN)
   ============================================= */
.score-pill {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 100px;
}
.score-pill.pass { color: var(--green); background: var(--green-bg); }
.score-pill.fail { color: var(--red); background: var(--red-bg); }

/* =============================================
   RESPONSIVE & MOBILE POLISH
   ============================================= */

/* Mobile Hamburger Toggle */
.hamburger-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    width: 32px;
    height: 32px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border-radius: var(--r-sm);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-dark);
    margin-right: 12px;
    margin-left: 16px;
    transition: background var(--dur) var(--ease);
}
.hamburger-toggle:hover {
    background: rgba(255,255,255,0.1);
}
.hamburger-toggle span {
    width: 16px;
    height: 2px;
    background: var(--text-white);
    border-radius: 1px;
    transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}

/* Open state for Hamburger cross */
.hamburger-toggle.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}
.hamburger-toggle.active span:nth-child(2) {
    opacity: 0;
}
.hamburger-toggle.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Sidebar Overlay Mask */
.portal-sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}
.portal-sidebar-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
/* ==============================================
   RESPONSIVE BREAKPOINTS
   Order: largest → smallest (mobile-last)
   ============================================= */

@media (max-width: 1200px) {
    .stat-cards-row { grid-template-columns: repeat(2, 1fr); }
    .portal-two-col { grid-template-columns: 1fr; }
    .cert-cards-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
    :root { --sidebar-w: 220px; }
    .portal-content { padding: 20px; }
    .admin-stat-cards-row { grid-template-columns: repeat(2, 1fr); }
}

/* Tablet & mobile: sidebar becomes overlay drawer */
@media (max-width: 768px) {
    /* Topbar — keep everything inside the viewport width */
    .portal-topbar {
        padding: 0 12px 0 0;
        gap: 8px;
    }

    .hamburger-toggle {
        display: flex;
        flex-shrink: 0;
    }

    .topbar-left {
        width: auto;
        border-right: none;
        padding: 0;
        flex-shrink: 0;
    }

    .topbar-center {
        display: none;
    }

    .topbar-phone {
        display: none;
    }

    /* Topbar right: allow shrinking */
    .topbar-right {
        flex-shrink: 0;
        gap: 8px;
    }

    .topbar-btn {
        padding: 6px 12px;
        font-size: 11px;
    }

    /* Hide "Student View →" link in admin topbar on mobile */
    .topbar-right a[href="student-dashboard.html"] {
        display: none;
    }

    /* Sidebar slides in as overlay */
    .portal-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s var(--ease);
        z-index: 300;
    }
    .portal-sidebar.open {
        transform: translateX(0);
    }

    /* Main content fills full width, no left margin */
    .portal-main {
        margin-left: 0;
        width: 100%;
        max-width: 100vw;
    }

    .portal-page-header {
        padding: 20px 16px;
    }

    .portal-content {
        padding: 16px;
    }

    /* Grids */
    .stat-cards-row,
    .admin-stat-cards-row {
        grid-template-columns: 1fr 1fr;
    }

    .portal-two-col {
        grid-template-columns: 1fr;
    }

    .portal-three-col {
        grid-template-columns: 1fr;
    }

    .cert-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Small phones */
@media (max-width: 480px) {
    /* Topbar: hide button, shrink user pill */
    .topbar-btn {
        display: none;
    }

    .topbar-user-name,
    .topbar-user > svg {
        display: none;
    }
    .topbar-user {
        padding: 4px 8px;
    }

    /* Stat cards: single column */
    .stat-cards-row,
    .admin-stat-cards-row {
        grid-template-columns: 1fr;
    }

    .pph-title {
        font-size: 26px;
    }

    .portal-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
        padding: 16px;
    }

    .portal-content {
        padding: 12px;
    }

    .pph-actions {
        align-self: flex-start;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .pph-actions .btn {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }

    .quick-actions {
        grid-template-columns: 1fr;
    }

    /* Quiz */
    .quiz-nav {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    .quiz-nav-dots {
        padding: 4px 0;
        justify-content: center;
    }
    .quiz-nav .btn {
        justify-content: center;
    }
    .quiz-header { padding: 16px; }
    .question-card { padding: 18px; }

    /* Search & Filters */
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .search-input-wrap {
        width: 100%;
        min-width: 0;
    }
    .filter-select {
        width: 100%;
        font-size: 13px;
        padding: 10px 14px;
    }

    /* Progress items */
    .cpl-item { padding: 12px 14px; gap: 12px; }
    .cpl-thumb { width: 44px; height: 44px; font-size: 18px; }

    /* Compact card padding */
    .portal-card-body { padding: 14px 16px; }
    .portal-card-header { padding: 14px 16px; }
}

/* =============================================
   PORTAL MODALS
   ============================================= */
.portal-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(8,8,8,0.6);
    backdrop-filter: blur(4px);
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s var(--ease);
    padding: 20px;
}
.portal-modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}
.portal-modal {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 480px;
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.3s var(--ease), opacity 0.3s var(--ease);
    overflow: hidden;
}
.portal-modal-backdrop.active .portal-modal {
    transform: translateY(0);
    opacity: 1;
}
.portal-modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.portal-modal-title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-dark);
}
.portal-modal-close {
    font-size: 20px;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}
.portal-modal-close:hover {
    color: var(--text-dark);
    background: var(--border-light);
}
.portal-modal-body {
    padding: 24px;
}
.portal-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.portal-form-group label {
    font-family: var(--font-display);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.portal-form-control {
    padding: 10px 14px;
    border: 1.5px solid var(--border-light);
    border-radius: var(--r-sm);
    font-size: 13px;
    color: var(--text-body);
    background: var(--bg-card);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    width: 100%;
}
.portal-form-control:focus {
    outline: none;
    border-color: var(--amber);
    box-shadow: 0 0 0 3px var(--amber-bg);
}
.portal-modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    border-top: 1px solid var(--border-light);
    background: #FAFAF8;
}

/* =============================================
   TOAST NOTIFICATION
   ============================================= */
.portal-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: var(--bg-sidebar);
    border: 1px solid var(--border-dark);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-lg);
    transform: translateY(100px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.4s var(--ease);
    pointer-events: none;
}
.portal-toast.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.portal-toast-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--green-bg);
    color: var(--green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.portal-toast-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-white);
}

/* =============================================
   WORDPRESS ADMIN BAR ADAPTABILITY
   ============================================= */
body.admin-bar .portal-topbar {
    top: 32px !important;
}
body.admin-bar .portal-sidebar {
    top: calc(var(--topbar-h) + 32px) !important;
    height: calc(100vh - var(--topbar-h) - 32px) !important;
}
body.admin-bar .portal-main {
    padding-top: calc(var(--topbar-h) + 32px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .portal-topbar {
        top: 46px !important;
    }
    body.admin-bar .portal-sidebar {
        top: calc(var(--topbar-h) + 46px) !important;
        height: calc(100vh - var(--topbar-h) - 46px) !important;
    }
    body.admin-bar .portal-main {
        padding-top: calc(var(--topbar-h) + 46px) !important;
    }
}

/* =============================================
   MY QUIZZES — COURSE & QUIZ SELECTION FLOW
   ============================================= */
body .quiz-course-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E2DA !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    display: block !important;
}

body .qcc-header {
    padding: 20px 24px !important;
    background: #F8F8F4 !important;
    border-bottom: 1px solid #E2E2DA !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    /* Was flex-wrap: wrap — with min-width:0 below already letting the
       title wrap its own text at any width, a long course name (e.g.
       "Mechanical Plumbing") could still push the whole row wide enough
       to wrap the "N Quizzes Available" + chevron group onto its own
       line, left-aligned — while shorter titles (e.g. "HVAC") never did,
       so cards in the same list looked inconsistent with each other. Not
       wrapping the row keeps every card's header laid out the same way;
       the title still wraps internally onto 2+ lines for a long name. */
    flex-wrap: nowrap !important;
    gap: 12px !important;
}

/* Premium Category Badge / Highlighted Tag Styling */
body .ccs-tag {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
    margin-top: 2px !important;
    line-height: 1.2 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
}

/* Category-specific pill badge color themes (ultra-premium subtle pill backgrounds with high-contrast text & glowing borders) */
body .ccs-tag.tag-electrical,
body .ccs-tag[style*="amber"],
body .ccs-tag[style*="F5820A"] {
    background: rgba(245, 130, 10, 0.15) !important;
    color: #D97706 !important;
    border: 1.5px solid rgba(245, 130, 10, 0.35) !important;
}

body .ccs-tag.tag-nec,
body .ccs-tag[style*="blue"],
body .ccs-tag[style*="3B82F6"] {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #2563EB !important;
    border: 1.5px solid rgba(59, 130, 246, 0.35) !important;
}

body .ccs-tag.tag-hvac,
body .ccs-tag[style*="green"],
body .ccs-tag[style*="10B981"],
body .ccs-tag[style*="22C55E"] {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #16A34A !important;
    border: 1.5px solid rgba(34, 197, 94, 0.35) !important;
}

body .ccs-tag.tag-plumbing,
body .ccs-tag[style*="A78BFA"],
body .ccs-tag[style*="purple"],
body .ccs-tag[style*="8B5CF6"] {
    background: rgba(139, 92, 246, 0.15) !important;
    color: #7C3AED !important;
    border: 1.5px solid rgba(139, 92, 246, 0.35) !important;
}

body .qcc-title {
    font-family: 'Barlow', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    margin: 4px 0 0 0 !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}
body .qcc-sub {
    font-size: 12px !important;
    color: #888888 !important;
    font-weight: 600 !important;
}
/* .qcc-header is already flex-wrap, but neither child had an explicit
   min-width/flex-shrink — .qcc-header-left (tag + title) needs min-width:0
   to actually be allowed to shrink/wrap instead of forcing the row wider
   than the card at narrow widths, and the "N Quizzes Available" + chevron
   side needs flex-shrink:0 so it doesn't get unpredictably squeezed. */
body .qcc-header-left {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}
body .qcc-header > div:last-child {
    flex-shrink: 0 !important;
}

body .quiz-items-list {
    display: flex !important;
    flex-direction: column !important;
    background: #FFFFFF !important;
}

body .quiz-item-row {
    padding: 18px 24px !important;
    border-bottom: 1px solid #E2E2DA !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    background: #FFFFFF !important;
    transition: background 0.2s ease !important;
}
body .quiz-item-row:last-child {
    border-bottom: none !important;
}
body .quiz-item-row:hover {
    background: rgba(245,130,10,0.04) !important;
}

body .qir-info {
    flex: 1 !important;
}
body .qir-title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    margin-bottom: 6px !important;
}
body .qir-meta {
    font-size: 12px !important;
    color: #666666 !important;
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
body .qir-meta span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}
body .qir-meta svg {
    color: #F5820A !important;
}

body .qir-status {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 4px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}
body .qir-status.available {
    background: rgba(245,130,10,0.1) !important;
    color: #F5820A !important;
}
body .qir-status.passed {
    background: rgba(34,197,94,0.1) !important;
    color: #22C55E !important;
}
body .qir-status.locked {
    background: rgba(0,0,0,0.05) !important;
    color: #888888 !important;
}

/* ACTIVE QUIZ EVALUATION STYLES */
.quiz-shell {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--shadow-sm);
}

.quiz-header {
    margin-bottom: 28px;
    border-bottom: 1px solid var(--border-light);
    padding-bottom: 24px;
}

.quiz-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-topbar);
    color: var(--amber);
    border-radius: var(--radius-md);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 900;
}

.quiz-progress-bar {
    margin-top: 20px;
}
.quiz-pb-label {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-body);
    margin-bottom: 6px;
}
.quiz-pb-track {
    height: 8px;
    background: var(--border-light);
    border-radius: 4px;
    overflow: hidden;
}
.quiz-pb-fill {
    height: 100%;
    background: var(--amber);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.question-card {
    background: #F8F8F4;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-bottom: 24px;
}
.question-num {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 8px;
}
.question-text {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.5;
    margin-bottom: 20px;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.quiz-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
}
.quiz-option:hover {
    border-color: var(--amber);
    background: var(--amber-bg);
}
.quiz-option.selected {
    border-color: var(--amber);
    background: var(--amber-bg);
    box-shadow: 0 0 0 1px var(--amber);
}
.quiz-option-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-light);
    flex-shrink: 0;
    transition: all var(--dur) var(--ease);
}
.quiz-option.selected .quiz-option-radio {
    border-color: var(--amber);
    background: var(--amber);
    box-shadow: inset 0 0 0 3px #fff;
}
.quiz-option-letter {
    font-weight: 800;
    font-size: 13px;
    color: var(--amber);
}
.quiz-option-text {
    font-size: 13px;
    color: var(--text-dark);
    font-weight: 500;
}

.quiz-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.quiz-q-pills {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
    justify-content: center !important;
}
.q-pill {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    color: var(--text-dark);
    transition: all var(--dur) var(--ease);
}
.q-pill.active {
    background: var(--amber);
    color: #000;
    border-color: var(--amber);
}
.q-pill.answered {
    background: rgba(34,197,94,0.15);
    color: var(--green);
    border-color: rgba(34,197,94,0.3);
}

/* My Quizzes Accordion Styling */
body .quiz-course-card .qcc-header {
    cursor: pointer !important;
    user-select: none !important;
    transition: background 0.2s ease !important;
}
body .quiz-course-card .qcc-header:hover {
    background: #f1f1eb !important;
}
body .quiz-course-card .qcc-chevron svg {
    color: #888888 !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}
body .quiz-course-card .qcc-header:hover .qcc-chevron svg {
    color: var(--amber) !important;
}
body .quiz-course-card.expanded .qcc-chevron svg {
    transform: rotate(180deg) !important;
}
body .quiz-course-card:not(.expanded) .quiz-items-list {
    display: none !important;
}

/* My Quizzes Lesson Grouping */
body .quiz-lesson-group {
    display: flex !important;
    flex-direction: column !important;
}
body .qlg-header {
    background: #FAF9F5 !important;
    padding: 14px 24px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #111111 !important;
    border-bottom: 1px solid #E2E2DA !important;
    border-top: 1px solid #E2E2DA !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    cursor: pointer !important;
    user-select: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    transition: background 0.2s ease !important;
}
body .qlg-header:hover {
    background: #f1f1eb !important;
}
body .qlg-chevron {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,0.03) !important;
    transition: background 0.2s ease !important;
}
body .qlg-header:hover .qlg-chevron {
    background: rgba(0,0,0,0.08) !important;
}
body .qlg-chevron svg {
    color: #111111 !important;
    stroke-width: 3px !important;
    transition: transform 0.2s ease !important;
}
body .quiz-lesson-group.expanded .qlg-chevron svg {
    transform: rotate(180deg) !important;
}
body .quiz-lesson-group:not(.expanded) .qlg-items {
    display: none !important;
}
body .quiz-lesson-group:first-child .qlg-header {
    border-top: none !important;
}

/* =============================================
   ADMIN DASHBOARD STYLES
   ============================================= */
.admin-topbar-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: var(--r-sm);
    background: var(--purple-bg);
    color: var(--purple);
    border: 1px solid var(--purple-border);
}

/* Stat Cards Row for Admin */
.admin-stat-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 1100px) {
    .admin-stat-cards-row {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 600px) {
    .admin-stat-cards-row {
        grid-template-columns: 1fr;
    }
}

/* Stat Card Custom Trends & Styles */
.stat-card-trend.info {
    background: rgba(245,130,10,0.1);
    color: var(--amber);
}

/* Mini Donut Chart */
.mini-donut {
    position: relative;
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}
.mini-donut svg {
    transform: rotate(-90deg);
}
.mini-donut-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 800;
    color: var(--text-dark);
    text-align: center;
}

/* Monthly Enrollments Bar Chart */
.enroll-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 160px;
    padding: 12px 4px 4px 4px;
}
.ec-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex: 1;
    height: 100%;
}
.ec-bar-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    width: 100%;
}
.ec-bar {
    width: 100%;
    border-radius: var(--r-sm) var(--r-sm) 0 0;
    background: var(--amber);
    opacity: 0.75;
    transition: opacity var(--dur) var(--ease), height var(--dur) var(--ease);
}
.ec-bar:hover {
    opacity: 1;
    box-shadow: 0 0 8px rgba(245,130,10,0.3);
}
.ec-bar.hi { background: var(--amber); opacity: 0.95; }
.ec-bar.mid { background: var(--amber); opacity: 0.7; }
.ec-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    text-align: center;
    letter-spacing: 0.5px;
}

/* Course Enrollment Horizontal Bar Rows */
.enroll-bar-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-light);
}
.enroll-bar-row:last-child {
    border-bottom: none;
}
.ebr-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    width: 150px;
    flex-shrink: 0;
    line-height: 1.3;
    /* Was a single-line ellipsis truncation with no way to see the full
       name (e.g. "2025 NFPA 70E Training" became "2025 NFPA 70…",
       "Electronic Systems Technician" became "Electronic Syst…") — wraps
       to 2 lines instead, so most real course names show in full; a
       title="" attribute on the element (added where this class is used)
       covers the rare name still too long for that. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ebr-bar {
    flex: 1;
    height: 8px;
    background: rgba(0,0,0,0.06);
    border-radius: 4px;
    overflow: hidden;
}
.ebr-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--amber);
    transition: width var(--dur) var(--ease);
}
.ebr-fill.hi { background: var(--green); }
.ebr-fill.low { background: var(--red); }
.ebr-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-dark);
    min-width: 32px;
    text-align: right;
}

/* Quick Action Grid Buttons */
.quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.qa-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #F8F8F4;
    border: 1px solid var(--border-light);
    border-radius: var(--r-md);
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dark);
    cursor: pointer;
    transition: all var(--dur) var(--ease);
    text-decoration: none;
}
.qa-btn:hover {
    background: var(--amber-bg);
    border-color: var(--amber-border);
    color: var(--amber);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}
.qa-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--r-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Recent Activity Items */
.ra-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-light);
}
.ra-item:last-child {
    border-bottom: none;
}
.ra-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}
.ra-text {
    font-size: 12px;
    color: var(--text-body);
    line-height: 1.5;
    flex: 1;
}
.ra-text strong {
    color: var(--text-dark);
    font-weight: 700;
}
.ra-time {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Error Alert Bar */
.error-alert-bar {
    background: var(--red-bg);
    border: 1px solid rgba(239,68,68,0.3);
    color: var(--red);
    padding: 12px 20px;
    border-radius: var(--r-md);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* Responsive tweaks */
@media (max-width: 768px) {
    .quick-actions {
        grid-template-columns: 1fr;
    }
    .ebr-name {
        width: 115px;
    }
}

/* =============================================
   PORTAL MODAL SYSTEM & DARK THEME STYLING
   ============================================= */
.portal-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(6px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

.portal-modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.portal-modal {
    background: #11141D !important;
    color: #F8FAFC !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 12px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.85) !important;
    overflow: hidden;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.portal-modal-header {
    background: #1A1E2B !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 18px 24px !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portal-modal-title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF !important;
    letter-spacing: 0.5px;
}

.portal-modal-close {
    background: #F5820A !important;
    color: #000000 !important;
    border: none !important;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

.portal-modal-close:hover {
    background: #fb923c !important;
    transform: scale(1.08);
}

.portal-modal-body {
    padding: 24px !important;
    overflow-y: auto;
    background: #11141D !important;
    color: #F8FAFC !important;
}

#studentProfileModal .portal-modal-body span {
    color: #F8FAFC;
}

#studentProfileModal table.portal-table {
    width: 100%;
    border-collapse: collapse;
    background: #161A26 !important;
    border-radius: 8px;
    overflow: hidden;
}

#studentProfileModal table.portal-table th {
    background: #1E2333 !important;
    color: #94A3B8 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    text-align: left;
}

#studentProfileModal table.portal-table td {
    padding: 14px 16px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: #F8FAFC !important;
    font-size: 13px !important;
}

#studentProfileModal table.portal-table tr:hover {
    background: rgba(255, 255, 255, 0.03) !important;
}

.portal-modal-footer {
    background: #1A1E2B !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 14px 24px !important;
}

/* =============================================
   ADMIN DASHBOARD PERFECT VISUAL POLISH
   ============================================= */
body.tapsvs-portal-page {
    background: #F4F4EE !important;
}

.portal-content {
    background: #F4F4EE !important;
    padding: 28px 36px !important;
}

/* Rounded White Portal Cards */
.portal-card {
    background: #FFFFFF !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03) !important;
    border: 1px solid #E2E8F0 !important;
    overflow: hidden;
    min-width: 0;
}

.portal-card-header {
    padding: 20px 24px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.portal-card-title {
    font-family: var(--font-heading) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    color: #0F172A !important;
}

/* Stat Cards Row */
.admin-stat-cards-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.admin-stat-cards-row .stat-card {
    background: #FFFFFF !important;
    border-radius: 14px !important;
    padding: 22px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.admin-stat-cards-row .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.admin-stat-cards-row .stat-card-value {
    font-family: var(--font-heading) !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    line-height: 1;
    margin: 8px 0 2px;
}

.admin-stat-cards-row .stat-card-label {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #64748B !important;
}

.admin-stat-cards-row .stat-card-bar {
    height: 3px !important;
    background: #E2E8F0 !important;
    border-radius: 2px !important;
    margin-top: 6px;
    overflow: hidden;
}

/* Search Bar & Filter Toolbar */
.filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.search-input-wrap {
    position: relative;
    flex: 1;
    min-width: 240px;
}

.search-input-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    width: 16px;
    height: 16px;
    pointer-events: none;
}

.search-input {
    width: 100%;
    padding: 10px 16px 10px 40px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #0F172A !important;
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-input:focus {
    border-color: #F5820A !important;
    box-shadow: 0 0 0 3px rgba(245, 130, 10, 0.15) !important;
}

.search-input::placeholder {
    color: #94A3B8 !important;
}

.filter-select {
    padding: 10px 16px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.filter-select:focus {
    border-color: #F5820A !important;
}

/* Tables */
.portal-table thead th {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    color: #64748B !important;
    padding: 14px 18px !important;
    text-align: left;
    background: #F8FAFC !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

.portal-table tbody td {
    padding: 16px 18px !important;
    font-size: 13px !important;
    color: #334155 !important;
    border-bottom: 1px solid #F1F5F9 !important;
    vertical-align: middle;
}

.portal-table tbody tr:hover td {
    background: #F8FAFC !important;
}

.student-name-cell {
    font-weight: 700 !important;
    color: #0F172A !important;
    font-size: 13px !important;
}

.student-email-cell {
    font-size: 11px !important;
    color: #64748B !important;
}

/* =============================================
   UNIVERSAL SEARCH INPUT & ICON ALIGNMENT FIX
   ============================================= */
.search-input-wrap {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 100% !important;
}

.search-input-wrap svg,
.search-input-wrap i {
    position: absolute !important;
    left: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94A3B8 !important;
    width: 16px !important;
    height: 16px !important;
    pointer-events: none !important;
    z-index: 5 !important;
}

.search-input,
input.search-input,
.portal-search-input,
.search-input-wrap input[type="text"] {
    width: 100% !important;
    padding-left: 44px !important;
    padding-right: 16px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    color: #0F172A !important;
    outline: none !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.02) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.search-input:focus,
input.search-input:focus,
.portal-search-input:focus,
.search-input-wrap input[type="text"]:focus {
    border-color: #F5820A !important;
    box-shadow: 0 0 0 3px rgba(245, 130, 10, 0.15) !important;
}

.search-input::placeholder,
input.search-input::placeholder,
.portal-search-input::placeholder,
.search-input-wrap input[type="text"]::placeholder {
    color: #94A3B8 !important;
    opacity: 1 !important;
}

/* =============================================
   COMPREHENSIVE MOBILE RESPONSIVENESS POLISH
   ============================================= */

/* Table Horizontal Smooth Scroll Container */
.table-responsive,
div[style*="overflow-x:auto"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: 12px;
}

@media (max-width: 1024px) {
    .portal-two-col {
        grid-template-columns: 1fr !important;
    }
    .admin-stat-cards-row,
    .stat-cards-row {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    /* Main Layout */
    .portal-main {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Off-Canvas Mobile Drawer Sidebar */
    .portal-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        height: 100vh !important;
        z-index: 9999 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .portal-sidebar.open,
    .portal-sidebar.active {
        transform: translateX(0) !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.5) !important;
    }

    /* Topbar & Hamburger Button */
    .hamburger-toggle {
        display: flex !important;
        z-index: 10000 !important;
    }

    .portal-topbar {
        padding-left: 12px !important;
        padding-right: 16px !important;
    }

    .pph-title {
        font-size: 28px !important;
    }

    .portal-page-header {
        padding: 18px 20px !important;
    }

    .portal-content {
        padding: 16px !important;
    }

    /* Filters & Search Grid */
    .reports-filter-grid,
    .filter-bar {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* Modal dialogs on mobile */
    .portal-modal-backdrop {
        padding: 8px !important;
    }

    .portal-modal {
        width: 100% !important;
        max-height: 92vh !important;
    }

    .portal-modal-header,
    .portal-modal-body,
    .portal-modal-footer {
        padding: 16px !important;
    }

    /* The header row (title + close button) needs to wrap and let the
       close button keep its size, or a long title pushes the close
       button out of the (overflow:hidden) modal box and it gets
       visually clipped at narrow widths. */
    .portal-modal-header {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
    .portal-modal-header > div:first-child {
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }
    .portal-modal-header h3,
    .portal-modal-title {
        overflow-wrap: break-word !important;
        word-break: break-word !important;
    }
    .portal-modal-close {
        flex-shrink: 0 !important;
    }

    /* "Top Performing Students" LMS Performance grid — stack instead of
       forcing two columns, which cuts off the right-hand column and its
       "Detailed Progress" button. */
    .lms-perf-grid {
        grid-template-columns: 1fr !important;
    }

    /* Profile Settings — the Personal Details / Security & Password cards,
       and the field-pair rows inside them (First/Last Name, etc.), had no
       class at all and stayed locked at two columns at every viewport
       width, forcing their content to overflow the card on mobile. */
    .profile-settings-grid,
    .profile-field-pair {
        grid-template-columns: 1fr !important;
    }

    /* Announcements & Calendar — the calendar column was a hardcoded
       360px, which alone exceeds a 320-375px viewport and forced the
       whole row (including the Announcements card) to overflow. */
    .announcements-grid {
        grid-template-columns: 1fr !important;
    }

    /* Student Profile modal — "Quick Assign Particular Course" control
       row (course select + Enroll Now button) had no wrap/stacking, so
       the button overflowed its container at narrow widths. */
    .quick-assign-controls {
        flex-wrap: wrap !important;
        width: 100% !important;
    }
    .quick-assign-controls select,
    .quick-assign-controls button {
        width: 100% !important;
    }

    /* Fixed mobile nav toggle — lives outside .portal-sidebar (see the
       template comment where it's inserted) specifically so it stays
       reachable once the sidebar is off-screen. It inherits
       .hamburger-toggle's white bars, which were designed to sit on the
       dark sidebar's translucent background — out here on the page
       background it needs its own solid dark background to stay visible,
       plus fixed positioning since it's no longer laid out by the
       sidebar's own flex header. */
    .mobile-nav-toggle {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        margin: 0 !important;
        background: #0F172A !important;
        border: 1px solid rgba(255,255,255,0.15) !important;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
        z-index: 10001 !important;
    }
    .mobile-nav-toggle:hover {
        background: #1A2436 !important;
    }

    /* Bring the page header's first line of text (.pph-label) into the
       same vertical band as the fixed toggle button (top:12px, 32px
       tall — occupies roughly y=12-44px) instead of pushing the whole
       header down below it, so they read as one row. Horizontal
       clearance on .pph-left keeps the label/title text from running
       under the button instead. */
    .pph-left {
        padding-right: 48px;
    }

    /* Student Dashboard's "View Notice Board" banner — the content block
       (icon + tag + title + message) and the button had no flex-wrap, so
       they were forced onto one row that's too narrow for both, causing
       the button to overlap/collide with the text. Wrapping drops the
       button to its own row on mobile instead. */
    .notice-board-banner {
        flex-wrap: wrap !important;
    }
    .notice-board-banner button {
        width: 100% !important;
        justify-content: center !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Pagination button rows — wrap instead of overflowing horizontally. */
    .pagination-btns,
    .pagination-controls {
        flex-wrap: wrap !important;
    }

    /* .portal-table has no min-width, so inside its overflow-x:auto
       wrapper it just shrinks to fit instead of ever actually triggering
       that scroll — squeezing cell content (status/score pills, action
       buttons) into too little space instead of letting the table scroll
       horizontally. Forcing a sensible minimum makes the scroll kick in
       like the wrapper already intended. */
    .portal-table {
        min-width: 600px;
    }

    /* Search inputs hardcoded to a fixed pixel width (Courses, Quiz
       Results, Certifications toolbars) overflow a narrow viewport since
       their inline style="width:NNNpx" beats .portal-form-control's own
       responsive width. Their containing toolbar row also needs to wrap
       instead of forcing the title and the input onto one line. */
    #courseSearchInput,
    #quizResultSearchInput,
    #certSearchInput {
        width: 100% !important;
    }
    /* Stacking to a column (not just wrapping the row) keeps things
       left-aligned when they don't fit side by side — e.g. "Top Performing
       Students" + "Leaderboard" badge on top, "All Students Directory →"
       below. With only flex-wrap, the header's inline
       justify-content:space-between still right-aligns a wrapped link on
       its own line, which read as misaligned rather than stacked. */
    .portal-card-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        row-gap: 10px !important;
    }

    /* Student Profile modal's tab nav ("Enrolled Courses & Progress" /
       "Quiz & Test Score History") — no wrap, and both labels are long
       enough to overflow the modal's reduced mobile width side by side. */
    .spm-tabs-nav {
        flex-wrap: wrap !important;
    }
    .spm-tabs-nav button {
        flex: 1 1 auto !important;
        white-space: normal !important;
    }

    /* Assign Course modal's searchable student combobox — each option row
       (name + email on the left, "ID #123" pill on the right) has no wrap
       and no truncation, so on a narrow screen the email text and the ID
       pill collide/overflow instead of reflowing. */
    .student-combo-option {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
    .student-combo-option > div:first-child {
        min-width: 0 !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 100% !important;
    }
}

@media (max-width: 520px) {
    .admin-stat-cards-row,
    .stat-cards-row {
        grid-template-columns: 1fr !important;
    }

    .pph-title {
        font-size: 24px !important;
    }

    .portal-page-header {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    .pph-actions {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
    }

    .pph-actions .btn,
    .pph-actions a {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
    }
}

/* Pagination controls styling */
.pagination-btn {
    padding: 6px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    border: 1px solid #CBD5E1 !important;
    background: #FFFFFF !important;
    color: #0F172A !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    user-select: none !important;
}
.pagination-btn:hover:not(:disabled) {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}
.pagination-btn.active {
    background: #F5820A !important;
    color: #FFFFFF !important;
    border-color: #F5820A !important;
}
.pagination-btn:disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Directory Table Vertical & Horizontal Alignment Rules */
.portal-table th,
.portal-table td {
    vertical-align: middle !important;
}

#allStudentsDirectoryTable td {
    vertical-align: middle !important;
}

#allStudentsDirectoryTable .student-courses-cell {
    vertical-align: middle !important;
}

#allStudentsDirectoryTable .course-pill-badge {
    line-height: 1.3 !important;
    white-space: nowrap !important;
}

/* =============================================
   DARK MODAL TABLE & TEXT OVERRIDES (STUDENT & ADMIN)
   ============================================= */
.portal-modal,
.portal-modal-backdrop .portal-modal {
    background: #11141D !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7) !important;
}

.portal-modal-header {
    background: #1A1E2B !important;
    border-bottom: 1px solid #232836 !important;
}

.portal-modal-footer {
    background: #161A26 !important;
    border-top: 1px solid #232836 !important;
}

.portal-modal .portal-table {
    background: transparent !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

.portal-modal .portal-table thead th {
    background: #1A1E2B !important;
    color: #94A3B8 !important;
    border-bottom: 1px solid #2A2F3D !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    padding: 14px 18px !important;
}

.portal-modal .portal-table tbody tr {
    background: #161A26 !important;
    transition: background 0.2s ease !important;
}

.portal-modal .portal-table tbody tr:nth-child(even) {
    background: #131722 !important;
}

.portal-modal .portal-table tbody tr:hover,
.portal-modal .portal-table tbody tr:hover td {
    background: #1E2330 !important;
}

.portal-modal .portal-table tbody td {
    background: transparent !important;
    color: #CBD5E1 !important;
    border-bottom: 1px solid #232836 !important;
    padding: 14px 18px !important;
    vertical-align: middle !important;
}

.portal-modal .portal-table .student-name-cell,
.portal-modal .portal-table td strong,
.portal-modal .portal-table td div[style*="font-weight:700"] {
    color: #FFFFFF !important;
}

.portal-modal .portal-table .student-email-cell {
    color: #94A3B8 !important;
}

.portal-modal .btn-outline,
.open-profile-from-pcsm {
    background: #232836 !important;
    border: 1px solid #3B4254 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}

.portal-modal .btn-outline:hover,
.open-profile-from-pcsm:hover {
    background: #F5820A !important;
    border-color: #F5820A !important;
    color: #000000 !important;
}

/* =============================================
   CERTIFICATIONS TABLE HIGH CONTRAST STYLES
   ============================================= */
.cert-course-title {
    font-weight: 800 !important;
    color: var(--text-heading, #0F172A) !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
}

body.tapsvs-portal-page table.portal-table td .cert-course-title {
    color: #0F172A !important;
}

body.dark-mode table.portal-table td .cert-course-title,
body.tapsvs-dark-mode table.portal-table td .cert-course-title {
    color: #FFFFFF !important;
}



/* =============================================
   PREMIUM ADMIN DASHBOARD — HERO BANNER
   ============================================= */
.dash-hero-banner {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #162030 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    padding: 28px 36px 24px !important;
    display: flex !important;
    align-items: center !important;
    gap: 32px !important;
    flex-wrap: wrap !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Subtle decorative glow orbs */
.dash-hero-banner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: 120px;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%);
    pointer-events: none;
}
.dash-hero-banner::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: 30px;
    width: 150px;
    height: 150px;
    background: radial-gradient(circle, rgba(245,130,10,0.08) 0%, transparent 70%);
    pointer-events: none;
}

.dash-hero-left {
    flex-shrink: 0;
    min-width: 200px;
}

.dash-hero-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: #A78BFA;
    margin-bottom: 8px;
}

.dash-hero-title {
    font-family: var(--font-display) !important;
    font-size: 30px !important;
    font-weight: 900 !important;
    color: #FFFFFF !important;
    line-height: 1.05 !important;
    letter-spacing: -0.5px !important;
    margin: 0 !important;
    text-transform: capitalize !important;
}

.dash-hero-sub {
    font-size: 12px !important;
    color: rgba(148,163,184,0.8) !important;
    margin: 6px 0 0 0 !important;
}

/* KPI chips row */
.dash-hero-kpis {
    display: flex;
    gap: 12px;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.dash-hero-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 12px 16px;
    min-width: 160px;
    flex: 1;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    cursor: default;
}

.dash-hero-kpi:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.14);
    transform: translateY(-1px);
}

.dhk-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dhk-purple { background: rgba(167,139,250,0.15); color: #A78BFA; }
.dhk-amber  { background: rgba(245,130,10,0.15);  color: #F5820A; }
.dhk-blue   { background: rgba(59,130,246,0.15);  color: #3B82F6; }
.dhk-green  { background: rgba(34,197,94,0.15);   color: #22C55E; }

.dhk-text { flex: 1; min-width: 0; }

.dhk-val {
    font-family: var(--font-heading) !important;
    font-size: 22px !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1 !important;
}

.dhk-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(148,163,184,0.75) !important;
    margin-top: 3px !important;
    white-space: nowrap !important;
}

.dhk-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 20px;
    white-space: nowrap;
    align-self: flex-start;
}

.dhk-badge-up    { background: rgba(34,197,94,0.15);  color: #22C55E; }
.dhk-badge-info  { background: rgba(148,163,184,0.12); color: #94A3B8; }
.dhk-badge-amber { background: rgba(245,130,10,0.15);  color: #F5820A; }

.dash-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.dash-hero-actions .btn {
    white-space: nowrap;
}

/* =============================================
   PREMIUM INSIGHTS STRIP
   ============================================= */
.dash-insights-strip {
    display: flex;
    align-items: center;
    gap: 0;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 20px;
    margin-bottom: 22px;
    flex-wrap: wrap;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.dis-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 16px;
}

.dis-item:first-child { padding-left: 4px; }

.dis-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dis-text {
    font-size: 12.5px;
    color: #475569;
    white-space: nowrap;
}

.dis-text strong {
    color: #0F172A;
    font-weight: 700;
}

.dis-divider {
    width: 1px;
    height: 20px;
    background: #E2E8F0;
    flex-shrink: 0;
}

/* =============================================
   PREMIUM BOTTOM ROW — Quick Nav Cards
   ============================================= */
.dash-bottom-row {
    margin-top: 20px;
    padding-bottom: 8px;
}

.dash-qnav-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.dash-qnav-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 16px 18px;
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    cursor: pointer;
}

.dash-qnav-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.07);
    border-color: #CBD5E1;
    text-decoration: none !important;
}

.dash-qnav-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.dash-qnav-title {
    font-size: 13.5px;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.2;
}

.dash-qnav-sub {
    font-size: 11px;
    color: #94A3B8;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-qnav-arrow {
    color: #CBD5E1;
    flex-shrink: 0;
    transition: color 0.2s ease, transform 0.2s ease;
}

.dash-qnav-card:hover .dash-qnav-arrow {
    color: #94A3B8;
    transform: translateX(3px);
}

@media (max-width: 1200px) {
    .dash-hero-kpis { order: 3; width: 100%; }
}

@media (max-width: 900px) {
    .dash-qnav-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
    .dash-qnav-grid { grid-template-columns: 1fr !important; }
    .dash-hero-kpi  { min-width: 140px; }
    .dis-text       { white-space: normal; }
}