/* Import CSS Variables and Utilities */
@import url('variables.css');

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&family=Bitter:wght@400;500;600;700&display=swap');

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-primary);
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    background-color: var(--color-bg-page);
    overflow-x: hidden;
}

/* Heading colors: H1-H2 blue, H3-H6 black (per UX standards) */
h1, h2 {
    font-family: var(--font-family-heading);
    color: var(--color-primary);
}

h3, h4, h5, h6 {
    font-family: var(--font-family-heading);
    color: var(--color-text-primary);
}

/* =============================================
   ACCESSIBILITY
   ============================================= */

/* Skip Link - visible only on focus */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--color-primary);
    color: white;
    padding: 8px 16px;
    z-index: 10000;
    text-decoration: none;
    font-weight: 600;
    border-radius: 0 0 var(--radius-default) 0;
}

.skip-link:focus {
    top: 0;
}

/* Screen reader only - visually hidden but accessible */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

/* Teardrop corners - asymmetric rounding (TL and BR rounded, TR and BL square) */
.teardrop-sm { border-radius: var(--teardrop-sm); }
.teardrop { border-radius: var(--teardrop); }
.teardrop-lg { border-radius: var(--teardrop-lg); }

/* =============================================
   PANEL SYSTEM
   =============================================
   Base class for white content panels with teardrop corners.
   Use .panel as base, add modifiers for variants.

   Usage:
   - .panel                    Base panel (white bg, border, teardrop corners)
   - .panel.panel-padded       Adds standard padding (24px)
   - .panel.panel-flush        No padding (for panels containing tables)
   - .panel.panel-selected     Selected/highlighted state (light blue bg)

   Consolidates: dashboard-section, detail-section, form-section,
                 profile-section, settings-section, builder-panel, etc.
*/

.panel {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
}

.panel-padded {
    padding: 24px;
}

.panel-flush {
    padding: 0;
}

.panel-selected {
    background: var(--color-surface-selected, #E5ECF9);
    border-color: transparent;
}

/* Panel header - consistent styling for panel titles */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.panel-title {
    font-family: var(--font-family-heading);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.panel-link {
    font-size: 14px;
    color: var(--color-link);
    text-decoration: none;
}

.panel-link:hover {
    color: var(--color-link-hover);
}

/* Global Focus Styles */
*:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Remove default outline only when we have focus-visible support */
*:focus:not(:focus-visible) {
    outline: none;
}

/* Material Symbols */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: 300;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/* Top Header Bar */
.top-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--color-bg-card);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--space-4);
    z-index: var(--z-dropdown);
}

.header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.icon-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    transition: background-color 0.2s;
    padding: 0;
}

.icon-btn .material-symbols-outlined {
    font-size: 24px;
}

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

.brand-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    text-decoration: none;
}

.brand-logo img {
    display: block;
    max-width: 81px;
    height: auto;
}

.brand-logo-text {
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #2A5488;
    white-space: nowrap;
    margin-top: 4px; /* Align with logo baseline */
}

.header-center {
    flex: 1;
    max-width: 760px;
    margin: 0 24px;
}

.search-bar {
    display: flex;
    align-items: center;
    background: var(--color-bg-hover);
    border-radius: var(--radius-default);
    padding: 8px 12px;
    gap: 8px;
    position: relative;
}

.search-bar .material-symbols-outlined {
    color: var(--color-text-secondary);
    flex-shrink: 0;
    font-size: 20px;
}

.search-bar input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
}

.search-bar input::placeholder {
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* Header Search Dropdown */
#header-search-container {
    position: relative;
}

.search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    min-width: 400px;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 300;
    max-height: 400px;
    overflow-y: auto;
}

.search-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    text-decoration: none;
    transition: background 0.15s;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    cursor: pointer;
}

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

.search-result-item:hover {
    background: var(--color-bg-hover);
}

.search-result-item:active {
    background: var(--color-bg-active);
}

.search-result-item.course-link:hover {
    text-decoration: none;
}

.search-result-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-meta {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.search-no-results {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.search-no-results .material-symbols-outlined {
    font-size: 20px;
    color: #6B778C;
}

/* Search Category Headers (Global Search) */
.search-category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--color-bg-secondary);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.search-category-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
}

.search-category-count {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-tertiary);
}

.search-view-all {
    display: block;
    padding: 10px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    text-align: center;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    transition: background 0.15s;
}

.search-view-all:hover {
    background: var(--color-bg-hover);
    text-decoration: none;
}

/* Search Result Type Chips */
.search-result-type-chip {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: 12px;
    white-space: nowrap;
}

.search-result-type-chip.chip-cle {
    background: #E3F2FD;
    color: #1565C0;
}

.search-result-type-chip.chip-cle-live {
    background: #FCE4EC;
    color: #C2185B;
}

.search-result-type-chip.chip-cpe {
    background: #E8F5E9;
    color: #2E7D32;
}

.search-result-type-chip.chip-cpe-live {
    background: #FFF3E0;
    color: #E65100;
}

.search-result-type-chip.chip-microlearning {
    background: #F3E5F5;
    color: #7B1FA2;
}

.search-result-type-chip.chip-skills {
    background: #E0F7FA;
    color: #00838F;
}

.search-result-type-chip.chip-simulation {
    background: #FFF8E1;
    color: #F57F17;
}

.search-result-type-chip.chip-pathway {
    background: #EDE7F6;
    color: #512DA8;
}

.user-profile {
    width: 36px;
    height: 36px;
}

.user-profile .material-symbols-outlined {
    font-size: 24px;
}

/* App Switcher */
.app-switcher-container {
    position: relative;
}

.app-switcher-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 360px;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 300;
    max-height: 600px;
    overflow-y: auto;
}

.app-switcher-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.app-switcher-section {
    padding: 16px 0;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.app-switcher-section:last-child {
    border-bottom: none;
}

.app-switcher-section-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0 16px 12px;
}

.app-switcher-items {
    display: flex;
    flex-direction: column;
}

.app-switcher-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    text-decoration: none;
    transition: background 0.2s;
    min-height: 48px;
}

.app-switcher-item:hover {
    background: var(--color-bg-hover);
}

.app-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.app-icon-hub .material-symbols-outlined {
    color: white;
    font-size: 20px;
}

.app-item-text {
    flex: 1;
}

.app-item-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.app-item-subtitle {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.app-switcher-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}


.app-switcher-empty .material-symbols-outlined {
    font-size: 48px;
    color: #6B778C;
    margin-bottom: 8px;
}

.app-switcher-empty p {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Header Dropdowns */
.header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.help-menu-container,
.user-menu-container {
    position: relative;
}

.help-dropdown,
.user-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--color-bg-card);
    border-radius: var(--radius-default);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 300;
    padding: 8px 0;
}

.help-dropdown.show,
.user-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.user-dropdown-header {
    padding: 12px 16px;
    /* No border - .dropdown-divider in HTML handles separation */
}

.user-dropdown-name {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.user-dropdown-email {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.dropdown-divider {
    height: 1px;
    background: var(--color-bg-active);
    margin: 8px 0;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

.dropdown-item:hover {
    background: var(--color-bg-hover);
}

.dropdown-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-muted);
}

/* Main Container */
.main-container {
    display: flex;
    margin-top: 56px;
    min-height: calc(100vh - 56px);
}

/* Sidebar */
.sidebar {
    width: 240px;
    background: var(--color-bg-card);
    border-right: 1px solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 56px;
    bottom: 0;
    overflow-y: auto;
    transition: transform 0.3s ease, width 0.3s ease;
    z-index: 50;
}

.sidebar.collapsed {
    transform: translateX(-100%);
}

/* Prevent flash on page load: Apply sidebar state immediately via html class */
html.sidebar-collapsed .sidebar {
    transform: translateX(-100%);
}

html.sidebar-collapsed .scrollable-wrapper {
    margin-left: 0;
}

html.sidebar-collapsed .main-content {
    margin-left: 0;
}

.sidebar-nav {
    flex: 1;
    padding: 12px 8px;
}

.nav-item {
    display: block;
    margin-bottom: 2px;
}

.nav-item > a,
.nav-item.expandable .nav-link {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: 3px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    position: relative;
    font-weight: 400;
}

/* Button reset for nav-link buttons (accessibility) */
button.nav-link {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    font-size: inherit;
}

.nav-item > a:hover,
.nav-item.expandable .nav-link:hover {
    background-color: #EDF1F7;
}

.nav-item.active > a {
    background-color: #F0F0F0;
    color: var(--color-text-primary);
    font-weight: 600;
}

.nav-item.expandable.expanded .nav-link {
    color: var(--color-text-primary);
    font-weight: 600;
    background-color: #EDF1F7;
}

.nav-icon {
    flex-shrink: 0;
    margin-right: 12px;
    font-size: 20px;
}

.nav-text {
    flex: 1;
    font-size: 14px;
}

.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    background-color: #0052CC;
    border-radius: 10px;
    margin-left: 8px;
}

.nav-item.active .nav-badge {
    background-color: #0747A6;
}

.nav-chevron {
    flex-shrink: 0;
    transition: transform 0.2s ease;
    font-size: 20px;
    margin-left: auto;
}

.nav-item.expandable.expanded .nav-chevron,
.nav-group.expanded .nav-chevron {
    transform: rotate(90deg);
}

.sub-menu {
    display: none;
    padding: 8px 0 8px 24px;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 20px;
    border-left: 3px solid #DFE1E6;
}

.nav-item.expandable.expanded .sub-menu {
    display: block;
}

.sub-menu a {
    display: block;
    padding: 8px 12px;
    color: var(--color-text-primary);
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 400;
    margin-bottom: 1px;
    margin-right: 8px;
    transition: background-color 0.15s ease;
}

.sub-menu a:last-child {
    margin-bottom: 0;
}

.sub-menu a:hover {
    background-color: #EDF1F7;
}

.sub-menu a.active {
    font-weight: 600;
    background-color: #F0F0F0;
}

/* Empty state for sub-menus (e.g., "No recent items") */

/* "View all" link at bottom of sub-menu */


/* Nav Group with Submenu */
.nav-group {
    display: block;
    margin-bottom: 2px;
}

.nav-group .nav-submenu {
    display: none;
    padding: 8px 0 8px 24px;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-left: 20px;
    border-left: 3px solid #DFE1E6;
}

.nav-group.expanded .nav-submenu {
    display: block;
}

.nav-subitem {
    margin-bottom: 1px;
}

.nav-subitem > a {
    display: block;
    padding: 8px 12px;
    color: var(--color-text-muted);
    text-decoration: none;
    border-radius: 3px;
    font-size: 14px;
    font-weight: 400;
    transition: background-color 0.15s ease;
}

.nav-subitem > a:hover {
    background-color: #EDF1F7;
    color: var(--color-text-primary);
}

.nav-subitem.active > a {
    font-weight: 600;
    color: var(--color-text-primary);
    background-color: #E4E6EB;
}

/* Sidebar Footer */
.sidebar-footer {
    padding: 16px 8px;
    border-top: 1px solid #DFE1E6;
}

/* Scrollable Wrapper */
.scrollable-wrapper {
    flex: 1;
    margin-left: 240px;
    transition: margin-left 0.3s ease;
    height: calc(100vh - 56px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    background: var(--color-bg-card);
}

.scrollable-wrapper.expanded {
    margin-left: 0;
}

/* Main Content */
.main-content {
    padding: 0 32px;
    background: var(--color-bg-hover);
}

.main-content.expanded {
    margin-left: 0;
}

/* ===========================================
   CONTENT HEADER - Standardized
   4 types: Simple, With Actions, Detail (back link), Profile/Entity
   Spacing: 48px above/below header, 48px back-link→h1, 4px h1→subtitle, 24px subtitle→meta
   =========================================== */

.content-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 48px 0 48px;
    flex-direction: column;
    gap: 0;
}

/* Two-column header (title left, actions right) */
.content-header:has(.content-header-left),
.content-header:has(.content-header-text) {
    flex-direction: row;
    align-items: flex-start;
}

/* Header row for pages with back-link AND right-side controls */
.content-header-row {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
}

/* When content-header has a header-row, keep it column layout */
.content-header:has(.content-header-row) {
    flex-direction: column;
}

/* Left side container - holds title, subtitle, meta */
.content-header-left {
    display: flex;
    flex-direction: column;
}

/* Right side container - holds action buttons */
.content-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.content-header h1 {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-primary);
    /* Tighter letter-spacing is standard for large display text - at 32px+ the default
       spacing looks too loose. This makes headings feel more compact and polished.
       See UX.md "Letter Spacing (Headings)" for full rationale. */
    letter-spacing: -0.5px;
    margin: 0;
}

.content-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 4px 0 0 0;
}

/* Supplemental info row (meta data, badges, progress) */
.content-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.time-period-selector {
    display: flex;
    gap: 0;
    background: #F3F4F6;
    padding: 4px;
    border-radius: 6px;
}

.period-btn {
    padding: 8px 16px;
    border: none;
    background: transparent;
    border-radius: 4px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.period-btn:hover {
    color: var(--color-text-primary);
}

.period-btn.active {
    background: #FFFFFF;
    color: var(--color-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.content-body {
    padding: 0 0 40px 0;
}

.content-body.library-content {
    padding: 0 0 48px 0;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* Library header variant - constrained width for content library pages */
.content-header.library-header {
    padding: 48px 0 48px 0;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* DEPRECATED: No longer used - all pages now use content-header-left/right */
/* .library-header-content - removed, use content-header-left instead */

.library-content-inner {
    padding: 0;
}

/* Global Footer */
.global-footer {
    width: 100%;
    padding: 48px;
    border-top: 1px solid #DFE1E6;
    background: var(--color-bg-card);
    font-size: 14px;
    color: var(--color-text-secondary);
    font-weight: 400;
}

.footer-content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
    width: 100%;
}

.footer-left {
    color: var(--color-text-secondary);
}

.footer-right {
    display: flex;
    gap: 24px;
}

.footer-right a {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 400;
}

.footer-right a:hover {
    color: #0052CC;
    text-decoration: underline;
}

/* Scrollbar Styling */
.sidebar::-webkit-scrollbar,
.content-body::-webkit-scrollbar {
    width: 8px;
}

.sidebar::-webkit-scrollbar-track,
.content-body::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb,
.content-body::-webkit-scrollbar-thumb {
    background: #DFE1E6;
    border-radius: var(--radius-default);
}

.sidebar::-webkit-scrollbar-thumb:hover,
.content-body::-webkit-scrollbar-thumb:hover {
    background: #C1C7D0;
}

/* Page Header Section (for assign pages, etc.) */

.page-header-section h1 {
    font-family: var(--font-family-heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}

.page-header-section .page-subtitle {
    margin-bottom: 16px;
}


.page-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.page-meta .meta-item .material-symbols-outlined {
    font-size: 18px;
    color: #6B778C;
}

/* Library Page Styles */
.search-filters-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    align-items: center;
}

.library-search {
    flex: 1;
    display: flex;
    align-items: center;
    background: var(--color-bg-card);
    border: 1px solid #C1C7D0;
    border-radius: 3px;
    padding: 8px 12px;
    gap: 8px;
}

.library-search .material-symbols-outlined {
    color: var(--color-text-muted);
    font-size: 18px;
}

.library-search input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
}

.library-search input::placeholder {
    color: #5E6C84;
    font-weight: 400;
}

/* Hide browser's default search clear button */
.library-search input[type="search"]::-webkit-search-cancel-button {
    display: none;
    -webkit-appearance: none;
}

.library-search .search-clear-btn {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.library-search .search-clear-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.library-search .search-clear-btn .material-symbols-outlined {
    font-size: 18px;
}

.library-search .search-btn {
    flex-shrink: 0;
    padding: 8px 16px;
    white-space: nowrap;
}

/* Button Styles - Based on Design System */

/* Primary Button */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: #0D1F3C;
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

.btn-primary:hover {
    background: #1A2F4D;
}

.btn-primary:active {
    background: #0A1829;
}

.btn-primary:focus {
    outline: 2px solid #0D1F3C;
    outline-offset: 2px;
}

.btn-primary:disabled {
    background: #8993A4;
    cursor: not-allowed;
    opacity: 0.6;
}


.btn-primary .material-symbols-outlined,
.btn-secondary .material-symbols-outlined {
    font-size: 18px;
}

/* Secondary Button */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--color-bg-card);
    color: #0D1F3C;
    border: 1px solid #0D1F3C;
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
}

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

.btn-secondary:active {
    background: var(--color-bg-active);
    border-color: #0A1829;
}

.btn-secondary:focus {
    outline: 2px solid #0D1F3C;
    outline-offset: 2px;
}

.btn-secondary:disabled {
    background: #FAFBFC;
    color: #626F86;
    border-color: #6B778C;
    cursor: not-allowed;
}

/* Danger button - subtle red variant of secondary */
.btn-danger-subtle {
    color: var(--color-error);
}

.btn-danger-subtle:hover {
    background: rgba(212, 68, 0, 0.08);
    color: var(--color-error);
}

/* Tertiary Button */


/* Alert Banners */


.alert-warning .material-symbols-outlined {
    color: #F57C00;
    font-size: 24px;
}


.alert-info .material-symbols-outlined {
    color: #1976D2;
    font-size: 24px;
}


.alert-content strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.alert-content p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* Role Badges */
.role-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


/* Status Badges */
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.status-active {
    background: #E8F5E9;
    color: #2E7D32;
}

.status-inactive {
    background: #FFEBEE;
    color: #C62828;
}

.status-pending {
    background: #FFF8E1;
    color: #F57F17;
}

.status-secondary {
    background: #E3F2FD;
    color: #1565C0;
}

.practice-area-category {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-bg-hover);
    color: var(--color-text-muted);
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 500;
}

/* Action Button */
.action-btn {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-default);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

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

.action-btn .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-muted);
}

.action-btn:hover .material-symbols-outlined {
    color: #C62828;
}

/* Dashboard Styles */
.dashboard-content {
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 48px;
}

.dashboard-section {
    margin-bottom: 32px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    padding: 32px;
}

.section-title {
    font-family: 'Bitter', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 16px;
}

.section-title-period {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    margin-left: 8px;
}

.section-header-with-selector {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header-with-selector .section-title {
    margin-bottom: 0;
}

/* Dashboard section titles - smaller than page H1, use text color not primary blue */
.dashboard-section .section-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
    min-height: 36px;
    display: flex;
    align-items: center;
}

/* When title is in a header row with controls, remove its margin (parent handles spacing) */
.dashboard-section .section-header-with-selector {
    margin-bottom: 16px;
    min-height: 36px;
}

.dashboard-section .section-header-with-selector .section-title {
    margin-bottom: 0;
    min-height: auto;
}

/* Remove top padding from first items so spacing is controlled by header margin */
.dashboard-section .trending-item:first-child,
.dashboard-section .activity-item:first-child {
    padding-top: 0;
}

/* Metric Cards */

@media (max-width: 1024px) {
}

@media (max-width: 640px) {
}

.metric-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    padding: 24px;
    display: flex;
    flex-direction: column;
}

.metric-label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #5E6C84;
    margin-bottom: 16px;
}


.metric-value {
    font-family: 'Bitter', serif;
    font-size: 56px;
    font-weight: 600;
    color: #0D1F3C;
    line-height: 1;
}


.metric-trend .material-symbols-outlined {
    font-size: 16px;
}


/* Report Cards */

@media (max-width: 968px) {
}


/* Chart Section */


.chart-label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}


.legend-dot.enrollments {
    background: #5E4DB2;
}

.legend-dot.completions {
    background: #A78BFA;
}


/* Compliance Hero */

@media (max-width: 968px) {
}


.compliance-value.status-good {
    color: #2E7D32;
}

.compliance-value.status-warning {
    color: #F57F17;
}

.compliance-value.status-danger {
    color: #C62828;
}


.compliance-stat .stat-label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.compliance-stat .stat-value {
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.compliance-stat .stat-value.danger {
    color: #C62828;
}


.deadline-badge .material-symbols-outlined {
    font-size: 16px;
}


/* Jurisdiction Breakdown */


/* Action Items */

.action-item {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    border: var(--border-width-thin) solid var(--color-border-default);
}

.action-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.action-warning .action-icon {
    background: #FFF4E5;
}

.action-warning .action-icon .material-symbols-outlined {
    color: #F57C00;
    font-size: 28px;
}

.action-danger .action-icon {
    background: #FFEBEE;
}

.action-danger .action-icon .material-symbols-outlined {
    color: #C62828;
    font-size: 28px;
}

.action-info .action-icon {
    background: #E3F2FD;
}

.action-info .action-icon .material-symbols-outlined {
    color: #1976D2;
    font-size: 28px;
}


/* Quick Stats */

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: #F8F9FA;
    border-radius: var(--radius-lg);
    padding: 20px;
    border: var(--border-width-thin) solid var(--color-border-light);
}

.stat-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, #2A5488 0%, #5B8AC4 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.stat-icon .material-symbols-outlined {
    color: #FFFFFF;
    font-size: 28px;
}

.stat-content {
    flex: 1;
}

.stat-card .stat-label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

.stat-card .stat-value {
    font-family: 'Bitter', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.stat-period {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: #626F86;
}

/* Stats Panel (New Dashboard Design) */
.stats-panel {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.stats-card {
    background: #FFFFFF;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.stats-card-label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.stats-card-value-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.stats-card-value {
    font-family: 'Bitter', serif;
    font-size: 40px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1;
}

.stats-card-change {
    display: flex;
    align-items: center;
    gap: 2px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.stats-card-change.positive {
    color: #10B981;
}

.stats-card-change.negative {
    color: #EF4444;
}

.stats-card-change .material-symbols-outlined {
    font-size: 18px;
}


.stats-card-link .material-symbols-outlined {
    font-size: 18px;
}

@media (max-width: 1200px) {
    .stats-panel {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .stats-panel {
        grid-template-columns: 1fr;
    }
}

/* Trending Content Toggle */
.trending-toggle {
    display: flex;
    gap: 0;
    background: #F3F4F6;
    border-radius: 6px;
    padding: 4px;
}

.trending-toggle-btn {
    padding: 8px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.trending-toggle-btn:hover {
    color: var(--color-text-primary);
}

.trending-toggle-btn.active {
    background: #FFFFFF;
    color: var(--color-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Trending Content List */
.trending-content-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.trending-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.trending-rank {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F3F4F6;
    border-radius: 50%;
    font-family: 'Bitter', serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.trending-item-content {
    flex: 1;
    min-width: 0;
}

.trending-course-link {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0052CC;
    text-decoration: none;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.trending-course-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

.trending-item-meta {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

.trending-item-meta .content-separator {
    margin: 0 6px;
}

/* Activity Feed */
.activity-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-feed .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--color-text-secondary);
}

.activity-feed .empty-state .material-symbols-outlined {
    font-size: 48px;
    color: #6B778C;
    margin-bottom: 12px;
}

.activity-feed .empty-state p {
    margin: 0;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

.activity-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.activity-item:first-child {
    padding-top: 0;
}

.activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.activity-avatar {
    width: 40px;
    height: 40px;
    background: var(--color-bg-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.activity-avatar .material-symbols-outlined {
    color: var(--color-text-secondary);
    font-size: 24px;
}

.activity-content {
    flex: 1;
}

.activity-text {
    font-family: 'Nunito', sans-serif;
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.activity-course {
    color: var(--color-primary);
    font-weight: 600;
}

.activity-course-link {
    color: #0052CC;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.activity-course-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

.activity-user-link {
    color: #0052CC;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.activity-user-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

.activity-org-link {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.2s;
}

.activity-org-link:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

.load-more-container {
    text-align: center;
    padding-top: 24px;
    border-top: var(--border-width-thin) solid var(--color-border-light);
    margin-top: 24px;
}

.activity-time {
    font-family: 'Nunito', sans-serif;
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* Top Content in Activity Feed Style */
.top-content-link {
    color: #0052CC;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.top-content-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

.activity-time .content-type {
    color: var(--color-primary);
    font-weight: 600;
}

.activity-time .content-separator {
    color: #DFE1E6;
    margin: 0 4px;
}

.activity-time .content-count {
    color: #626F86;
}

/* Legacy button classes - map to new system */
/* Sort Dropdown */
.sort-dropdown {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.sort-label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.sort-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
    background: var(--color-bg-card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E") no-repeat right 10px center;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    cursor: pointer;
    min-width: 130px;
}

.sort-select:hover {
    border-color: var(--color-border-hover);
}

.sort-select:focus {
    outline: none;
    border-color: #0052CC;
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

.filters-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    background: var(--color-bg-card);
    color: #0D1F3C;
    border: 1px solid #0D1F3C;
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

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

.filters-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Data Table */
.table-container {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: 3px;
    overflow-x: auto;
    margin-bottom: 20px;
}

.table-container .data-table {
    margin-bottom: 0;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table thead {
    background: var(--color-bg-active);
    border-bottom: 1px solid var(--color-border-light);
}

.data-table th {
    padding: 14px 16px;
    text-align: left;
    font-family: 'Nunito', sans-serif;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.data-table tbody tr {
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    transition: background-color 0.1s;
}

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

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

.data-table tbody tr:hover {
    background: var(--color-bg-hover);
}

.data-table td {
    padding: 18px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    vertical-align: middle;
}

/* Responsive table - card layout on mobile */
@media (max-width: 900px) {
    .data-table {
        border: none;
    }

    .data-table thead {
        display: none;
    }

    .data-table tbody tr {
        display: block;
        background: var(--color-bg-secondary);
        border-radius: var(--radius-default);
        margin-bottom: 16px;
        padding: 16px;
        border: 1px solid var(--color-border);
    }

    .data-table tbody tr:hover {
        background: var(--color-bg-secondary);
    }

    .data-table td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        padding: 8px 0;
        border-bottom: 1px solid var(--color-border-light);
    }

    .data-table td:last-child {
        border-bottom: none;
        padding-top: 12px;
    }

    .data-table td:first-child {
        padding-top: 0;
    }

    .data-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-text-secondary);
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-right: 16px;
        flex-shrink: 0;
        min-width: 80px;
    }

    .data-table td:empty::before {
        display: none;
    }

    /* First column (usually title) takes full width */
    .data-table td:first-child {
        display: block;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .data-table td:first-child::before {
        display: none;
    }

    /* Action cell stays full width */
    .data-table .action-cell,
    .data-table td:last-child:has(.table-actions-menu),
    .data-table td:last-child:has(.btn-table-action) {
        display: block;
        text-align: right;
    }

    .data-table td:last-child::before {
        display: none;
    }

    /* Jurisdiction chips wrap properly */
    .data-table .jurisdiction-cell {
        flex-wrap: wrap;
    }

    .data-table .jurisdiction-list {
        flex-direction: column;
        align-items: flex-start;
    }

    /* Bookmark button in mobile */
    .data-table td:has(.save-course-btn) {
        position: absolute;
        top: 12px;
        right: 12px;
        padding: 0;
        border: none;
        z-index: 10;
    }

    .data-table td:has(.save-course-btn)::before {
        display: none;
    }

    .data-table tbody tr {
        position: relative;
        padding-right: 48px;
    }
}

.course-link {
    color: #0052CC;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s;
}

.course-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

/* General text link - use for any inline clickable text */
.text-link {
    color: #0052CC;
    text-decoration: none;
    cursor: pointer;
}

.text-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

.assign-btn {
    padding: 8px 20px;
    background: #0D1F3C;
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-default);
    text-decoration: none;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.assign-btn:hover {
    background: #1A2F4D;
}

.assign-btn:active {
    background: #0A1829;
}

/* Pagination */
.pagination-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
}

.results-count {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: #5E6C84;
    font-weight: 400;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-controls label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: #5E6C84;
    font-weight: 400;
}

.pagination-controls .per-page-select {
    margin-right: 16px;
}

.pagination-controls .page-info {
    margin-right: 16px;
}

.per-page-select {
    padding: 4px 28px 4px 8px;
    border: 1px solid #C1C7D0;
    border-radius: 3px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235E6C84' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.page-info {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    font-weight: 400;
}

.page-nav-buttons {
    display: flex;
    gap: 8px;
}

.page-nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #C1C7D0;
    background: var(--color-bg-card);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.page-nav-btn:hover:not(:disabled) {
    background: var(--color-bg-hover);
    border-color: #626F86;
}

.page-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.page-nav-btn .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-primary);
}

/* Filter Drawer */
.filter-drawer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    pointer-events: none;
}

/* Overlay backdrop for filter drawer */
.filter-drawer::before {
    content: '';
    position: absolute;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.filter-drawer.open {
    pointer-events: auto;
}

.filter-drawer.open::before {
    opacity: 1;
}

.filter-drawer .drawer-content {
    position: absolute;
    top: 56px;
    right: 0;
    height: calc(100vh - 56px);
    width: 400px;
    background: var(--color-bg-card);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    padding: 24px;
    padding-bottom: 0;
    z-index: 2;
    pointer-events: auto;
    box-sizing: border-box;
}

.filter-drawer.open .drawer-content {
    transform: translateX(0);
}

.filter-drawer .drawer-title {
    font-family: 'Bitter', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 24px;
}


.filter-search .material-symbols-outlined {
    color: var(--color-text-muted);
    font-size: 18px;
}

.filter-search input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
}

.filter-search input::placeholder {
    color: #5E6C84;
}

.filter-option {
    margin-bottom: 24px;
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 12px;
    margin: 4px 0;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.filter-checkbox:hover {
    background-color: var(--color-bg-hover);
}

.filter-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #DFE1E6;
    border-radius: var(--radius-default);
    cursor: pointer;
    margin: 0;
    position: relative;
    background: var(--color-bg-card);
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.filter-checkbox input[type="checkbox"]:hover {
    border-color: #0052CC;
}

.filter-checkbox input[type="checkbox"]:checked {
    border-color: #0052CC;
    background-color: #0052CC;
}

.filter-checkbox input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 5px;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.filter-checkbox span {
    flex: 1;
    line-height: 1.4;
}

/* User's saved/profile items highlighted in filter lists */
.filter-checkbox.user-saved {
    background-color: #E8F5E9;
    border-left: 3px solid #4CAF50;
    padding-left: 9px; /* Compensate for border */
}

.filter-checkbox.user-saved:hover {
    background-color: #C8E6C9;
}

/* Featured filter checkbox - "Relevant to me" style */
.filter-checkbox-featured {
    background-color: var(--color-bg-selected-light, #E5ECF9);
    border: 1px solid var(--color-primary);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
}

.filter-checkbox-featured:hover {
    background-color: #D6E4F8;
}

.filter-checkbox-featured span {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.filter-checkbox-featured strong {
    font-weight: 600;
    color: var(--color-text-primary);
}

.filter-hint {
    font-size: 13px;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* Filter options list with show more */
.filter-options-list {
    overflow: hidden;
}

/* Hide items 6+ when list is collapsed */
.filter-options-list.collapsed .filter-checkbox:nth-child(n+6),
.filter-options-list.collapsed .filter-radio:nth-child(n+6) {
    display: none;
}

.filter-show-more {
    background: none;
    border: none;
    color: #0052CC;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 0;
    text-align: left;
}

.filter-show-more:hover {
    color: #0065FF;
    text-decoration: underline;
}

/* Radio button filters */
.filter-options-list .filter-radio {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    padding: 10px 12px;
    margin: 4px 0;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

.filter-options-list .filter-radio:hover {
    background-color: var(--color-bg-hover);
}

.filter-radio input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 2px solid #DFE1E6;
    border-radius: 50%;
    cursor: pointer;
    margin: 0;
    position: relative;
    background: var(--color-bg-card);
    transition: border-color 0.15s ease;
}

.filter-radio input[type="radio"]:hover {
    border-color: #0052CC;
}

.filter-radio input[type="radio"]:checked {
    border-color: #0052CC;
}

.filter-radio input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: #0052CC;
    border-radius: 50%;
}

.filter-radio span {
    flex: 1;
    line-height: 1.4;
}

/* Date range filter */
.filter-date-inputs {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0 16px;
}

.filter-date-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.filter-date-field label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #5E6C84;
}

.filter-date-field input[type="date"],
.filter-date-field input.flatpickr-input {
    padding: 10px 12px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    width: 100%;
    box-sizing: border-box;
}

.filter-date-field input[type="date"]:focus,
.filter-date-field input.flatpickr-input:focus,
.filter-date-field input.flatpickr-input.active {
    outline: none;
    border-color: #0052CC;
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

.filter-date-field input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
}

.filter-date-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

.filter-section {
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    margin-bottom: 16px;
}

.filter-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 0;
    cursor: pointer;
    user-select: none;
    /* Button reset for accessibility - now using <button> instead of <div> */
    background: none;
    border: none;
    font: inherit;
    text-align: left;
}

.filter-section-header:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-default);
}

.filter-section-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.filter-section-header .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-muted);
    transition: transform 0.2s ease;
}

.filter-section.collapsed .filter-section-header .material-symbols-outlined {
    transform: rotate(-90deg);
}

.filter-section-content {
    padding-bottom: 16px;
    display: block;
}

.filter-section.collapsed .filter-section-content {
    display: none;
}

.filter-drawer .filter-actions {
    position: sticky;
    bottom: 0;
    background: var(--color-bg-card);
    padding: 20px 24px 24px;
    margin: 0 -24px 0 -24px;
    border-top: var(--border-width-thin) solid var(--color-border-light);
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
}

.filter-apply-btn {
    width: 100%;
    padding: 12px 20px;
    background: #0D1F3C;
    color: #FFFFFF;
    border: none;
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.filter-apply-btn:hover {
    background: #1A2F4D;
}

.filter-apply-btn:active {
    background: #0A1829;
}

.filter-clear-btn {
    width: 100%;
}

/* Course Drawer */
.course-drawer {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 400px;
    background: var(--color-bg-card);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 200;
    display: flex;
    flex-direction: column;
}

.course-drawer.open {
    transform: translateX(0);
}

.drawer-content {
    padding: 24px;
    padding-bottom: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.drawer-scrollable-content {
    flex: 1;
    overflow-y: auto;
}

.drawer-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--color-bg-card);
    padding: 20px 24px 24px;
    margin: 0 -24px 0 -24px;
    border-top: var(--border-width-thin) solid var(--color-border-light);
}

.drawer-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.drawer-close-btn:hover {
    background: var(--color-bg-hover);
}

.drawer-close-btn .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-text-muted);
}

.drawer-overlay {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 199;
}

.drawer-overlay.visible,
.drawer-overlay.show {
    opacity: 1;
    visibility: visible;
}

.drawer-course-title {
    font-family: 'Bitter', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 24px;
    margin-right: 32px;
    line-height: 1.4;
}

.drawer-section {
    margin-bottom: 24px;
}

.drawer-section-title {
    font-family: 'Bitter', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}


/* Admin Course Drawer - Enhanced Styles */
.drawer-header-row {
    margin-bottom: 12px;
}

.drawer-type-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}


.drawer-short-description {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 16px;
}

.drawer-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-light);
}

.drawer-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.drawer-meta-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-muted);
}

/* Drawer Stats Grid */
.drawer-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.drawer-stat {
    text-align: center;
    padding: 16px 8px;
    background: #F8F9FA;
    border-radius: 8px;
}

.drawer-stat-value {
    display: block;
    font-family: 'Bitter', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.drawer-stat-label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Drawer Presenters */
.drawer-presenters-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.drawer-presenter {
    display: flex;
    align-items: center;
    gap: 12px;
}

.drawer-presenter-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.drawer-presenter-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-presenter-name {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.drawer-presenter-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Drawer Credits */
.drawer-credits-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.drawer-credit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: #F8F9FA;
    border-radius: 6px;
}

.drawer-credit-jurisdiction {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.drawer-credit-amount {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.drawer-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    padding: 8px 12px;
    margin-top: 8px;
    background: transparent;
    border: 1px solid #E0E0E0;
    border-radius: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0052CC;
    cursor: pointer;
    transition: all 0.15s ease;
}

.drawer-expand-btn:hover {
    background: #F0F7FF;
    border-color: #0052CC;
}

.drawer-expand-btn .expand-icon {
    font-size: 18px;
}

.drawer-credits-expanded {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.drawer-empty-text {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Drawer Skills */
.drawer-skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.drawer-skill-tag {
    display: inline-block;
    padding: 6px 12px;
    background: #F0F4F8;
    border-radius: 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
}

/* Credits Flyout */
.credits-flyout {
    position: fixed;
    top: 56px;
    right: 0;
    bottom: 0;
    width: 420px;
    background: var(--color-bg-card);
    box-shadow: -4px 0 12px rgba(0, 0, 0, 0.15);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 200;
    display: flex;
    flex-direction: column;
}

.credits-flyout.open {
    transform: translateX(0);
}

.credits-flyout-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid var(--color-border-light);
    flex-shrink: 0;
}

.credits-flyout-header h2 {
    font-family: 'Bitter', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.credits-flyout-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.credits-flyout-close-btn:hover {
    background: var(--color-bg-hover);
}

.credits-flyout-close-btn .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-text-muted);
}

.credits-flyout-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.credits-flyout-overlay {
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 199;
}

.credits-flyout-overlay.open {
    opacity: 1;
    visibility: visible;
}

/* Credits Jurisdiction Cards */
.credits-jurisdiction-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.credits-section-header {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    margin: 0 0 4px 0;
    padding-top: 8px;
}

.credits-section-header:first-child {
    padding-top: 0;
}

.credits-jurisdiction-card {
    background: #F8F9FA;
    border-radius: 8px;
    padding: 16px;
    border: 1px solid #E0E0E0;
}

.credits-jurisdiction-card.user-jurisdiction {
    background: #E8F5E9;
    border-color: #81C784;
}

.credits-jurisdiction-card .jurisdiction-name {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.credits-jurisdiction-card .user-jur-icon {
    font-size: 18px;
    color: #2E7D32;
}

.credits-jurisdiction-card .jurisdiction-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.credits-jurisdiction-card .jurisdiction-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.credits-jurisdiction-card .col-label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-text-muted);
    letter-spacing: 0.3px;
}

.credits-jurisdiction-card .col-value {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

/* Credit Status Badges */
.credit-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
}

.credit-status-badge .material-symbols-outlined {
    font-size: 14px;
}

.credit-status-badge.status-approved,
.credit-status-badge.status-available {
    background: #E8F5E9;
    color: #2E7D32;
}

.credit-status-badge.status-pending {
    background: #FFF8E1;
    color: #F57C00;
}

.credit-status-badge.status-self_apply {
    background: #E3F2FD;
    color: #1565C0;
}

/* Flyout Loading and Error States */
.flyout-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px;
    color: var(--color-text-muted);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

.flyout-loading .spinning {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.flyout-error {
    padding: 40px;
    text-align: center;
    color: #D32F2F;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

.no-credits-message {
    padding: 40px;
    text-align: center;
    color: var(--color-text-muted);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

/* Credits Flyout Responsive */
@media (max-width: 480px) {
    .credits-flyout {
        width: 100%;
    }

    .credits-jurisdiction-card .jurisdiction-details {
        grid-template-columns: 1fr 1fr;
        gap: 12px 8px;
    }

    .credits-jurisdiction-card .jurisdiction-details .jurisdiction-col:last-child {
        grid-column: span 2;
    }
}

/* Admin Course Detail Page */
.admin-course-detail {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 32px;
    max-width: 1200px;
}

.course-detail-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}


.course-detail-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.course-detail-meta .meta-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-muted);
}

.course-detail-section {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-light);
}

.course-detail-section:last-child {
    border-bottom: none;
}

.course-detail-section .section-title {
    font-family: 'Bitter', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.course-description {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-primary);
}

/* Presenters List */
.presenters-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.presenter-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #F8F9FA;
    border-radius: 8px;
}

.presenter-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 600;
    flex-shrink: 0;
}

.presenter-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.presenter-name {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.presenter-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Credits Table */
.credits-table-container {
    overflow-x: auto;
}

.credits-table {
    width: 100%;
    border-collapse: collapse;
}

.credits-table th,
.credits-table td {
    padding: 12px 16px;
    text-align: left;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

.credits-table th {
    background: #F8F9FA;
    font-weight: 600;
    color: var(--color-text-secondary);
    border-bottom: 1px solid var(--color-border-light);
}

.credits-table td {
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-primary);
}

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

/* Materials List */
.materials-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.material-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #F8F9FA;
    border-radius: 6px;
}

.material-item .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-muted);
}

.material-name {
    flex: 1;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.material-type {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Transcript */
.transcript-preview {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-primary);
}

/* Course Detail Sidebar */
.course-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-card {
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 12px;
    padding: 24px;
}

.sidebar-card-title {
    font-family: 'Bitter', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 16px;
}

.org-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* In sidebar context, allow wrapping for narrow spaces */
.sidebar-card .org-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}

.org-stat {
    text-align: center;
    padding: 16px 8px;
    background: #F8F9FA;
    border-radius: 8px;
    min-width: 0; /* Allow shrinking */
}

.org-stat-label {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.org-stat-value {
    display: block;
    font-family: 'Bitter', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1;
    margin-bottom: 4px;
}

.org-stat-label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}


.sidebar-card-muted {
    background: #F8F9FA;
    border: none;
}

.sidebar-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

.sidebar-note .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

@media (max-width: 1024px) {
    .admin-course-detail {
        grid-template-columns: 1fr;
    }

    .course-detail-sidebar {
        order: -1;
    }
}

/* Course Assign Page */


.assign-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 0.15s ease;
}

.assign-tab:hover {
    background: rgba(255,255,255,0.5);
    color: var(--color-text);
}

.assign-tab.active {
    background: #fff;
    color: var(--color-text);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.assign-tab .material-symbols-outlined {
    font-size: 20px;
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #0052CC;
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 700;
}

.assign-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.assign-search-filters {
    display: flex;
    gap: 12px;
    align-items: center;
}

.assign-search-filters .library-search {
    flex: 1;
}

.assign-results-count {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.assign-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

.assign-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.assign-item:hover {
    border-color: #0052CC;
    background: #F0F7FF;
}

.assign-item.is-assigned {
    background: #DEEBFF;
    border-color: #0052CC;
}

.assign-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0052CC;
    flex-shrink: 0;
}


.assign-item-icon .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-text-secondary);
}


.assign-type-badge.department {
    background: #E3F2FD;
    color: #1565C0;
}

.assign-type-badge.team {
    background: #FFF3E0;
    color: #EF6C00;
}

.assign-type-badge.cohort {
    background: #F3E5F5;
    color: #7B1FA2;
}

.assigned-badge {
    padding: 4px 10px;
    border-radius: 4px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    background: #DEEBFF;
    color: #0052CC;
}


.assign-empty-state .material-symbols-outlined {
    font-size: 48px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.assign-empty-state p {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}


@media (max-width: 1024px) {

}


.skill-tag {
    padding: 6px 12px;
    background: #172B4D;
    color: #FFFFFF;
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.drawer-btn {
    width: 100%;
    padding: 12px 20px;
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.drawer-btn-primary {
    background: #0D1F3C;
    color: #FFFFFF;
    border: none;
}

.drawer-btn-primary:hover {
    background: #1A2F4D;
}

.drawer-btn-primary:active {
    background: #0A1829;
}

.drawer-btn-secondary {
    background: var(--color-bg-card);
    color: #0D1F3C;
    border: 1px solid #0D1F3C;
}

.drawer-btn-secondary:hover {
    background: var(--color-bg-hover);
}

.drawer-btn-secondary:active {
    background: var(--color-bg-active);
    border-color: #0A1829;
}

/* Learning Pathways Styles */
/* DEPRECATED: .pathways-header-content - removed, use content-header-left/right instead */


.pathways-search-filters {
    /* No extra margin - spacing comes from content-header padding */
}

/* Wizard Page Styles */
.back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.2s;
}

/* Content header with back link - stacked vertically */
.content-header:has(.back-link) {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.content-header .back-link {
    margin-bottom: 48px;
}

.content-header:has(.back-link) h1 {
    margin-bottom: 0;
}

/* When content-header only contains a back-link (no h1), reduce bottom padding.
   This is for profile/entity pages where the h1 is in a separate profile header. */
.content-header:has(.back-link):not(:has(h1)) {
    padding-bottom: 0;
}

.content-header:has(.back-link):not(:has(h1)) .back-link {
    margin-bottom: 0;
}

.back-link:hover {
    color: var(--color-text-primary);
}

.back-link .material-symbols-outlined {
    font-size: 20px;
}

/* Header meta info (grey secondary text below subtitle) */
.header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: 8px;
}

/* Title Link - clickable H1 titles */
.title-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.title-link:hover {
    color: var(--color-text-link);
}

.wizard-container {
    max-width: 700px;
}

.wizard-container h1 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 24px;
}

.wizard-container.wizard-wide {
    max-width: 900px;
}

.wizard-container.wizard-full {
    max-width: none;
}

.wizard-title {
    font-family: 'Bitter', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 12px;
}

.wizard-description {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 32px;
}

.wizard-cards {
    margin-top: 48px;
}


.wizard-actions {
    margin-top: 48px;
    padding-top: 24px;
    border-top: 1px solid #DFE1E6;
}

/* Prevent button width changes during loading state transitions */
.wizard-actions .btn-primary,
.form-actions .btn-primary {
    min-width: 140px;
}

/* Assign Page Styles */

.pathway-assign-info {
    flex: 1;
}

.pathway-assign-info .wizard-title {
    margin-bottom: 8px;
}


.assign-search {
    flex: 1;
    min-width: 250px;
}


.assign-filter label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.assign-filter select {
    padding: 8px 12px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-card);
}

.assign-table {
    margin-bottom: 0;
}


.user-link {
    color: #0052CC;
    text-decoration: none;
}

.user-link:hover {
    text-decoration: underline;
}


/* Success Banner */
.success-banner {
    background: #E8F5E9;
    border-bottom: 1px solid #C8E6C9;
    color: #2E7D32;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    transition: opacity 0.3s, max-height 0.3s;
    overflow: hidden;
}

.success-banner.hiding {
    opacity: 0;
    max-height: 0;
}

.success-banner-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 24px;
}

.success-banner .material-symbols-outlined {
    font-size: 20px;
}

.banner-close-btn {
    margin-left: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #2E7D32;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.banner-close-btn:hover {
    opacity: 1;
}

/* Pathway Styles */
.pathway-description {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-top: 8px;
    max-width: 800px;
}

/* Inline progress indicator for pathway detail */
.pathway-progress-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--color-bg-hover);
    border-radius: var(--radius-default);
}

.pathway-progress-indicator .progress-bar-inline {
    width: 80px;
    height: 6px;
    background: var(--color-border-default);
    border-radius: 3px;
    overflow: hidden;
}

.pathway-progress-indicator .progress-bar-inline .progress-fill {
    height: 100%;
    background: var(--color-success);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.pathway-progress-indicator .progress-text {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
}

/* Table row dropdown menu */
.table-actions-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.table-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: max-content;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    display: none;
}

.table-dropdown-menu.show {
    display: block;
}

.dropdown-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.dropdown-menu-item:hover {
    background: var(--color-bg-hover);
}

.dropdown-menu-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

.dropdown-menu-item.text-danger {
    color: var(--color-danger);
}

.dropdown-menu-item.text-danger .material-symbols-outlined {
    color: var(--color-danger);
}

/* User table styles */
.user-name-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0052CC;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}

/* Profile/Detail Page Header Pattern */
.profile-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 32px 0;
    max-width: 1120px;
    margin: 0 auto;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #0052CC;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
}

.profile-avatar.large {
    width: 96px;
    height: 96px;
    font-size: 32px;
}

.profile-avatar .material-symbols-outlined {
    font-size: 40px;
}

.profile-avatar.large .material-symbols-outlined {
    font-size: 48px;
}

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

.profile-name {
    font-family: var(--font-family-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.profile-subtitle {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    color: var(--color-text-secondary);
    margin: 0 0 16px 0;
}

.profile-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.profile-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.profile-meta .meta-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-tertiary);
}

.profile-meta .meta-item a {
    color: #0052CC;
    text-decoration: none;
}

.profile-meta .meta-item a:hover {
    text-decoration: underline;
}

.profile-actions {
    flex-shrink: 0;
}

/* Profile Tabs */
.profile-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--color-border);
    max-width: 1120px;
    margin: 0 auto 24px auto;
}

.profile-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.15s, border-color 0.15s;
}

.profile-tab:hover {
    color: var(--color-primary);
}

.profile-tab.active {
    color: #0052CC;
    border-bottom-color: #0052CC;
}

.profile-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #DFE1E6;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.profile-tab.active .tab-badge {
    background: #DEEBFF;
    color: #0052CC;
}

/* Profile Content */

.user-name-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.user-name-link {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0052CC;
    text-decoration: none;
}

.user-name-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

.user-email {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.user-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    border-radius: 3px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
}

.user-status-badge.status-active {
    background: #E3FCEF;
    color: #006644;
}

.user-status-badge.status-inactive {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.user-status-badge.status-on-leave {
    background: #FFFAE6;
    color: #FF8B00;
}

.user-status-badge.status-terminated {
    background: #FFEBE6;
    color: #DE350B;
}


.user-info-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 20px;
    margin-bottom: 16px;
}

.user-info-card-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 16px 0;
}


.user-info-value a {
    color: #0052CC;
    text-decoration: none;
}

.user-info-value a:hover {
    text-decoration: underline;
}


.user-pathways-header .section-title {
    margin: 0;
}

.btn-small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-hover);
    border: none;
    border-radius: var(--radius-default);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-small:hover {
    background: var(--color-border-default);
    color: var(--color-text-primary);
}

.btn-small.btn-primary {
    background: #0D1F3C;
    color: white;
    border: 1px solid #0D1F3C;
}

.btn-small.btn-primary:hover {
    background: #1A2F4D;
    border: 1px solid #1A2F4D;
    color: white;
}

.btn-small.btn-secondary {
    background: var(--color-bg-card);
    color: #0D1F3C;
    border: 1px solid #0D1F3C;
}

.btn-small.btn-secondary:hover {
    background: var(--color-bg-hover);
    color: #0D1F3C;
}

.btn-small .material-symbols-outlined {
    font-size: 14px;
}

/* Table action button - compact, no-wrap */
.btn-table-action {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    border-radius: var(--radius-default);
    text-decoration: none;
    transition: all 0.15s;
}

.btn-table-action.btn-primary {
    background: #0D1F3C;
    color: white;
}

.btn-table-action.btn-primary:hover {
    background: #1A2F4D;
}

.btn-table-action.btn-secondary {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

.btn-table-action.btn-secondary:hover {
    background: var(--color-border-default);
    color: var(--color-text-primary);
}

/* Icon-only button for save/bookmark */
.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: none;
    border: none;
    border-radius: var(--radius-default);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.15s;
}

.btn-icon-only:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.btn-icon-only.saved {
    color: var(--color-primary);
}

.btn-icon-only.saved .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.btn-icon-only.saved:hover {
    color: var(--color-primary-hover);
}

.btn-icon-only .material-symbols-outlined {
    font-size: 20px;
}

/* Action cell layout */
.action-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}


.completion-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.completion-badge .material-symbols-outlined {
    font-size: 16px;
}

.completion-badge.completed {
    background: #E3FCEF;
    color: #006644;
}

.completion-badge.in-progress {
    background: #DEEBFF;
    color: #0052CC;
}


.empty-pathways .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-pathways p {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    margin: 0 0 16px 0;
}

/* User Assign Page */
.assign-user-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg-hover);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.assign-user-details {
    display: flex;
    flex-direction: column;
}

.assign-user-name {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.assign-user-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.pathways-assign-section {
    margin-bottom: 24px;
}

.pathways-search-box {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
}

.pathways-search-box .material-symbols-outlined {
    color: var(--color-text-secondary);
}

.pathways-search-box input {
    flex: 1;
    border: none;
    outline: none;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

.pathways-assign-list {
    max-height: 500px;
    overflow-y: auto;
    padding: 4px;
}

/* Group icon in assign list */
.pathway-assign-item .group-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover);
    border-radius: var(--radius-lg);
    color: var(--color-text-secondary);
}

.pathway-assign-item .group-icon .material-symbols-outlined {
    font-size: 24px;
}

.pathway-assign-item.is-assigned .group-icon {
    background: #DEEBFF;
    color: #0052CC;
}

.pathway-assign-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 8px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s ease;
}

.pathway-assign-item:last-child {
    margin-bottom: 0;
}

.pathway-assign-item:hover {
    background: #F8F9FA;
    border-color: #6B778C;
}

.pathway-assign-item.is-assigned {
    background: #F0F9FF;
    border-color: #B3D4FF;
}

.pathway-assign-item.is-assigned:hover {
    background: #E6F2FF;
    border-color: #4C9AFF;
}

.pathway-assign-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    cursor: pointer;
    accent-color: #0052CC;
}

.pathway-assign-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pathway-assign-name {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.pathway-assign-meta {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.already-assigned-badge {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #0052CC;
    background: #DEEBFF;
    padding: 2px 8px;
    border-radius: 3px;
}

.no-pathways-message {
    padding: 32px;
    text-align: center;
    color: var(--color-text-secondary);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

.no-pathways-message a {
    color: #0052CC;
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.modal-overlay.show,
.modal-overlay.visible,
.modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
}

.modal-medium {
    width: 500px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #DFE1E6;
}

.modal-header h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.modal-close-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-secondary);
    border-radius: var(--radius-default);
}

.modal-close-btn:hover {
    background: var(--color-bg-hover);
}

.modal-body {
    padding: 24px;
}

/* Allow search dropdowns to overflow modal body */
#add-courses-modal .modal-content {
    overflow: visible;
}

#add-courses-modal .modal-body {
    overflow: visible;
    min-height: 300px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #DFE1E6;
}

/* Modal Alert (inline error/warning messages) */
.modal-alert {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 4px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.4;
}

.modal-alert.show {
    display: flex;
}

.modal-alert .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
}

.modal-alert-error {
    background: #FFEBE6;
    color: #BF2600;
    border: 1px solid #FFBDAD;
}


/* Warning Modal (No Accreditation, etc.) */
#no-accreditation-modal {
    z-index: 10001;
}

.modal-warning {
    width: 480px;
    max-width: 90vw;
    padding: 32px;
    text-align: center;
}

.modal-warning-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    background: #FFF3CD;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-warning-icon .material-symbols-outlined {
    font-size: 32px;
    color: #856404;
}

.modal-warning h2 {
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 16px;
}

.modal-warning-body {
    margin-bottom: 24px;
}

.modal-warning-body p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 12px;
}

.modal-warning-body p:last-child {
    margin-bottom: 0;
}

.modal-warning-note {
    background: var(--color-bg-subtle);
    padding: 12px 16px;
    border-radius: var(--radius-default);
    font-size: 14px !important;
}

.modal-warning-note a {
    color: var(--color-link);
    text-decoration: none;
}

.modal-warning-note a:hover {
    color: var(--color-link-hover);
    text-decoration: underline;
}

.modal-warning-actions {
    display: flex;
    justify-content: center;
}

/* Split layout for two buttons (e.g., "Go Back" / "Continue") */
.modal-warning-actions-split {
    justify-content: center;
    gap: 12px;
}

/* Date display in warning modal */
.modal-warning-date {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: -4px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.pathway-courses-section {
    margin-top: 32px;
}

.pathway-courses-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
}

.pathway-course-item {
    display: flex;
    gap: 16px;
    padding: 20px 24px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
}

.pathway-course-number {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover);
    border-radius: 50%;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.pathway-course-info {
    flex: 1;
}

.pathway-course-title {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0052CC;
    text-decoration: none;
    display: block;
    margin-bottom: 6px;
}

.pathway-course-title:hover {
    color: #0065FF;
    text-decoration: underline;
}

.pathway-course-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.pathway-course-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pathway-link {
    color: #0052CC;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s;
}

.pathway-link:hover {
    color: #0747A6;
    text-decoration: underline;
}


.pathway-status-badge .material-symbols-outlined {
    font-size: 14px;
}

.pathway-status-badge.status-active {
    background: #E8F5E9;
    color: #2E7D32;
}

.pathway-status-badge.status-draft {
    background: #FFF8E1;
    color: #F57F17;
}

.pathway-status-badge.status-archived {
    background: #ECEFF1;
    color: #546E7A;
}

/* Pre-made Pathways Section */

.premade-pathways-section .section-title {
    margin-bottom: 8px;
}

.section-subtitle {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}


@media (max-width: 1024px) {
}

@media (max-width: 640px) {
}


.premade-pathway-link .material-symbols-outlined {
    font-size: 18px;
}


.premade-pathway-actions .btn-primary {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}


/* Learner Pathways Grid */

@media (max-width: 1024px) {
}

@media (max-width: 640px) {
}

.pathway-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s;
}

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


.pathway-card-icon {
    font-size: 32px;
    color: var(--color-primary);
}

.pathway-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}


.pathway-card-title {
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.pathway-card-description {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 20px;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.pathway-card-link .material-symbols-outlined {
    font-size: 18px;
}

.modal {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}

.modal-overlay.visible .modal,
.modal-overlay.show .modal {
    transform: translateY(0);
}

.pathway-modal {
    padding: 48px;
}

.modal-step {
    position: relative;
}

.modal-step.hidden {
    display: none;
}

.modal-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.modal-close-btn:hover {
    background: var(--color-bg-hover);
}

.modal-close-btn .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-text-muted);
}

.modal-title {
    font-family: 'Bitter', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 32px;
    margin-right: 40px;
}

.modal-title.centered {
    text-align: center;
    margin-right: 0;
}

/* Pathway Method Cards */
.pathway-method-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 48px;
}

@media (max-width: 640px) {
    .pathway-method-cards {
        grid-template-columns: 1fr;
    }
}

.pathway-method-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 32px;
    display: flex;
    flex-direction: column;
}

.method-icon {
    margin-bottom: 16px;
}

.method-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.method-title {
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.method-description {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-bottom: 24px;
    flex: 1;
}

.method-btn {
    width: 100%;
}

/* Pathway Form Styles */
.pathway-form {
    max-width: 500px;
}

.form-group {
    margin-bottom: 24px;
}

.form-group label {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="password"],
.form-group input[type="number"],
.form-group input[type="date"],
.form-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group input[type="text"]:hover,
.form-group input[type="email"]:hover,
.form-group input[type="password"]:hover,
.form-group input[type="number"]:hover,
.form-group input[type="date"]:hover,
.form-group textarea:hover {
    border-color: #B3BAC5;
}

.form-group input[type="text"]:focus,
.form-group input[type="email"]:focus,
.form-group input[type="password"]:focus,
.form-group input[type="number"]:focus,
.form-group input[type="date"]:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #0052CC;
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

/* Password input with visibility toggle */
.password-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-wrapper input[type="password"],
.password-input-wrapper input[type="text"] {
    padding-right: 44px;
}

.password-toggle-btn {
    position: absolute;
    right: 8px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.password-toggle-btn:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.password-toggle-btn .material-symbols-outlined {
    font-size: 20px;
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Form Help Text
   Helper text that appears under form inputs to provide guidance.
   RULE: Always place after the input, use dark grey, SM font size. */
.form-help {
    display: block;
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-normal);
}

/* Select Dropdowns */
.form-group select {
    width: 100%;
    padding: 10px 36px 10px 12px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236B778C' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-group select:hover {
    border-color: #B3BAC5;
}

.form-group select:focus {
    outline: none;
    border-color: #0052CC;
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

/* Date Input Styling */
.form-group input[type="date"] {
    padding-right: 12px;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

.form-group input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Input with icon */

.input-with-icon input {
    padding-left: 40px;
}

.input-with-icon .material-symbols-outlined {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--color-text-secondary);
    pointer-events: none;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 32px;
}

/* Skills Input */
/* Skills Selector */
.skills-selector-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skills-selected-wrapper {
    margin-top: 12px;
}

.skills-selected-label {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.skills-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #E8F0FE;
    border: 1px solid #2A5488;
    border-radius: 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-primary);
}

.skill-chip .remove-skill {
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.skill-chip .remove-skill:hover {
    opacity: 1;
}

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

.skills-search-input {
    width: 100%;
    padding: 10px 12px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

.skills-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.skills-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100;
    display: none;
}

.skills-dropdown.show {
    display: block;
}

.skills-dropdown-item {
    padding: 10px 12px;
    cursor: pointer;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    transition: background 0.15s;
}

.skills-dropdown-item:hover {
    background: var(--color-bg-hover);
}

.skills-dropdown-item.selected {
    background: #E8F0FE;
    color: var(--color-primary);
}

.skills-dropdown-empty {
    padding: 12px;
    text-align: center;
    color: var(--color-text-secondary);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1;
}

/* Generated Pathway Results */
.generated-pathway-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
}

.generated-pathway-info {
    flex: 1;
}

.generated-pathway-info h1 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

.generated-pathway-description {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.generated-pathway-meta {
    display: flex;
    align-items: center;
    gap: 16px;
}

.generated-pathway-meta .pathway-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.generated-pathway-meta .pathway-meta-item .material-symbols-outlined {
    font-size: 18px;
}

.generated-courses-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 32px;
}

.generated-course-item {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 20px 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.generated-course-number {
    width: 28px;
    height: 28px;
    background: var(--color-bg-hover);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

.generated-course-actions {
    flex-shrink: 0;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    border-radius: var(--radius-default);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.btn-icon:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.btn-icon .material-symbols-outlined {
    font-size: 20px;
}

.generated-course-info {
    flex: 1;
}

.generated-course-title {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0052CC;
    margin-bottom: 6px;
    cursor: pointer;
}

.generated-course-title:hover {
    color: #0065FF;
    text-decoration: underline;
}

.generated-course-desc {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
    margin-bottom: 12px;
}

.generated-course-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.course-meta-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #E8F5E9;
    color: #2E7D32;
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.course-meta-tag.skills {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.course-meta-duration {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.course-meta-duration .material-symbols-outlined {
    font-size: 14px;
}

.generated-course-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

.generated-course-actions .btn-secondary {
    padding: 8px 16px;
    font-size: 14px;
}

.generated-actions {
    border-top: 1px solid #DFE1E6;
    padding-top: 24px;
}

/* Course Search Dropdown in Manual Mode */
.course-search-container {
    position: relative;
}

.manual-course-search {
    margin-bottom: 0;
}

.course-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-top: none;
    border-radius: 0 0 4px 4px;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
    display: none;
}

.course-search-dropdown.show {
    display: block;
}

.course-search-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

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

.course-search-item:hover {
    background: var(--color-bg-hover);
}

.course-search-item-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.course-search-item-meta {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Selected Courses List */
.selected-courses-list {
    margin-top: 16px;
    min-height: 100px;
    background: #FAFBFC;
    border: 1px dashed #DFE1E6;
    border-radius: var(--radius-default);
    padding: 16px;
    text-align: left;
}

.no-courses-message {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: #626F86;
    text-align: center;
    margin: 0;
    padding: 24px 0;
}

/* Course selection summary bar */
.selected-courses-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--color-bg-subtle);
    border-radius: var(--radius-default);
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.selected-courses-summary .courses-count strong {
    color: var(--color-text-primary);
}

.selected-courses-summary .courses-duration {
    display: flex;
    align-items: center;
    gap: 4px;
}

.selected-courses-summary .courses-duration .material-symbols-outlined {
    font-size: 18px;
}

.selected-course-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    margin-bottom: 8px;
}

.selected-course-item:last-child {
    margin-bottom: 0;
}

.selected-course-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6B778C;
    cursor: grab;
    padding: 4px;
    margin: -4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}

.drag-handle:hover {
    color: #6B778C;
    background: var(--color-bg-subtle);
}

.drag-handle:active {
    cursor: grabbing;
}

.drag-handle .material-symbols-outlined {
    font-size: 20px;
}

.selected-course-item.dragging {
    opacity: 0.4;
    background: var(--color-bg-subtle);
}

/* Drop indicator line (Figma-style) */
.drop-indicator {
    height: 4px;
    margin: -2px 0;
    position: relative;
    z-index: 10;
}

.drop-indicator-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 2px;
    background: var(--color-primary);
    border-radius: 1px;
}

.drop-indicator-line::before,
.drop-indicator-line::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: var(--color-primary);
    border-radius: 50%;
}

.drop-indicator-line::before {
    left: 0;
}

.drop-indicator-line::after {
    right: 0;
}

.selected-course-drag {
    color: #6B778C;
    cursor: grab;
}

.selected-course-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.selected-course-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.selected-course-meta {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.selected-course-remove {
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color 0.2s;
}

.selected-course-remove:hover {
    color: #C62828;
}

/* Course Dropdown Items */
.course-dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    text-align: left;
}

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

.course-dropdown-item:hover {
    background: var(--color-bg-hover);
}

.course-dropdown-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.course-dropdown-meta {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.course-dropdown-empty {
    padding: 16px;
    text-align: center;
    color: #626F86;
    font-size: 14px;
}

/* Selected Course Item Extras */
.selected-course-item .course-number {
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.selected-course-item .course-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    text-align: left;
}

.selected-course-item .course-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
}

.selected-course-item .course-type,
.selected-course-item .course-meta {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.remove-course-btn {
    padding: 4px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-course-btn:hover {
    color: #C62828;
}

/* Mobile Sidebar Overlay */
.sidebar-overlay {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 49;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.visible {
    display: block;
    opacity: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .sidebar {
        transform: translateX(-100%);
        z-index: 100;
        box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
    }

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

    .scrollable-wrapper {
        margin-left: 0;
    }

    .header-center {
        display: none;
    }

    .course-drawer {
        width: 100%;
    }

    .search-filters-bar {
        flex-direction: column;
    }

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

/* Empty State */
.empty-state {
    text-align: center;
    padding: 60px 24px;
}

.empty-state-icon {
    font-size: 64px;
    color: #6B778C;
    margin-bottom: 16px;
}

.empty-state h2 {
    font-family: 'Bitter', serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.empty-state p {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Info Banner - for stub pages and informational messages */
.info-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    background: #E3F2FD;
    border: 1px solid #90CAF9;
    border-radius: 8px;
    margin-bottom: 24px;
}

.info-banner > .material-symbols-outlined {
    color: #1976D2;
    font-size: 24px;
    flex-shrink: 0;
}

.info-banner-content {
    font-size: 14px;
    color: #1565C0;
    line-height: 1.5;
}

.info-banner-content strong {
    font-weight: 600;
}

/* Warning Banner variant */
.info-banner.warning {
    background: #FFF8E1;
    border-color: #FFE082;
}

.info-banner.warning > .material-symbols-outlined {
    color: #F57C00;
}

.info-banner.warning .info-banner-content {
    color: #E65100;
}

/* =============================================
   USER GROUPS STYLES
   ============================================= */

/* Group Name Cell */

.group-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex-shrink: 0;
}

.group-avatar .material-symbols-outlined {
    font-size: 24px;
}


.group-name-link {
    font-weight: 600;
    color: #0052CC;
    text-decoration: none;
}

.group-name-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

.group-description {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Group Type Badges */
.group-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}

.group-type-badge.type-department {
    background: #DEEBFF;
    color: #0747A6;
}

.group-type-badge.type-cohort {
    background: #E3FCEF;
    color: #006644;
}

.group-type-badge.type-team {
    background: #EAE6FF;
    color: #403294;
}

.group-type-badge.type-custom {
    background: var(--color-bg-hover);
    color: var(--color-text-muted);
}

/* Assignment Type Badges */
.assignment-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 600;
}

.assignment-type-badge.type-pathway {
    background: #EAE6FF;
    color: #403294;
}

.assignment-type-badge.type-course {
    background: #DEEBFF;
    color: #0052CC;
}

/* Group Detail Page */


.group-detail-avatar .material-symbols-outlined {
    font-size: 40px;
}


.group-detail-info h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}


/* Group Detail Grid */


/* Group Members Section */


.group-members-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 500px;
    overflow-y: auto;
}

.group-member-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #F8F9FA;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.group-member-item:hover {
    background: var(--color-bg-hover);
}

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

.group-member-name {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    margin-bottom: 2px;
}

.group-member-name:hover {
    color: #0052CC;
    text-decoration: underline;
}

.group-member-title {
    font-size: 14px;
    color: var(--color-text-secondary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.empty-members .material-symbols-outlined {
    font-size: 48px;
    color: #6B778C;
    display: block;
    margin-bottom: 12px;
}

.empty-members p {
    margin-bottom: 16px;
}

/* Group Pathways List in Detail */
.group-pathways-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.group-pathway-item {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: #F8F9FA;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s;
}

.group-pathway-item:hover {
    background: var(--color-bg-hover);
}

.group-pathway-info {
    flex: 1;
}

.group-pathway-name {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.group-pathway-meta {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Card Header with Action */
.card-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.card-header-with-action .user-info-card-title {
    margin-bottom: 0;
}


.card-action-link .material-symbols-outlined {
    font-size: 20px;
}


/* Assign Group Info Card */
.assign-group-info {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #F8F9FA;
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
}

.assign-group-details {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.assign-group-name {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 16px;
}

.assign-group-type {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Members Assign Section */
.members-assign-section {
    margin-bottom: 24px;
}

.members-assign-list {
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    max-height: 400px;
    overflow-y: auto;
}

.member-assign-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    margin-bottom: 8px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.15s ease;
}

.member-assign-item:last-child {
    margin-bottom: 0;
}

.member-assign-item:hover {
    background: #F8F9FA;
    border-color: #6B778C;
}

.member-assign-item.is-member {
    background: #F0F9FF;
    border-color: #B3D4FF;
}

.member-assign-item.is-member:hover {
    background: #E6F2FF;
    border-color: #4C9AFF;
}

.member-assign-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    min-width: 18px;
    cursor: pointer;
    accent-color: #0052CC;
}

/* User avatar in member assign list */
.member-assign-item .user-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover);
    border-radius: 50%;
    color: var(--color-text-secondary);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
}

.member-assign-item.is-member .user-avatar {
    background: #DEEBFF;
    color: #0052CC;
}

.member-assign-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.member-assign-name {
    display: block;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.member-assign-meta {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.member-assign-status {
    flex-shrink: 0;
}

.no-users-message {
    padding: 32px;
    text-align: center;
    color: var(--color-text-secondary);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

/* Status badge for archived */
.status-archived {
    background: var(--color-bg-hover);
    color: var(--color-text-muted);
}

/* =============================================
   USER PROFILE TABS
   ============================================= */

/* Tab Navigation */
.user-profile-tabs {
    display: flex;
    border-bottom: 1px solid #DFE1E6;
    margin-bottom: 24px;
    gap: 0;
}

.user-profile-tab {
    padding: 12px 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.user-profile-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.user-profile-tab.active {
    color: #0052CC;
    border-bottom-color: #0052CC;
}

.user-profile-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #DFE1E6;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-left: 8px;
}

.user-profile-tab.active .tab-badge {
    background: #DEEBFF;
    color: #0052CC;
}

/* Tab Content Container */
.tab-content-container {
    min-height: 300px;
}

/* Tab Table Container */
.tab-table-container {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.tab-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #DFE1E6;
    background: #FAFBFC;
}

.tab-table-title {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

/* Tab Empty State */
.tab-empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-text-secondary);
}

.tab-empty-state .material-symbols-outlined {
    font-size: 48px;
    color: #6B778C;
    margin-bottom: 12px;
    display: block;
}

.tab-empty-state p {
    margin-bottom: 16px;
}

/* Tab Header Actions */


/* Tab Search and Filters Bar */
.tab-search-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: #fff;
    border-bottom: 1px solid #DFE1E6;
    flex-wrap: wrap;
}

.tab-search {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 200px;
    max-width: 320px;
    padding: 8px 12px;
    background: #F4F5F7;
    border: 1px solid transparent;
    border-radius: var(--radius-default);
    gap: 8px;
    transition: all 0.15s ease;
}

.tab-search:focus-within {
    background: #fff;
    border-color: var(--color-brand-primary);
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.1);
}

.tab-search .material-symbols-outlined {
    font-size: 20px;
    color: #6B778C;
}

.tab-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    outline: none;
}

.tab-search input::placeholder {
    color: #6B778C;
}

.tab-search .search-clear-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #6B778C;
    border-radius: 50%;
    transition: all 0.15s ease;
}

.tab-search .search-clear-btn:hover {
    background: #DFE1E6;
    color: var(--color-text-primary);
}

.tab-search .search-clear-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Per Page Select */
.per-page-select {
    padding: 6px 28px 6px 10px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background-color: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24'%3E%3Cpath fill='%236B778C' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    margin-right: 12px;
}

/* Filter Select Dropdown */
.filter-select {
    padding: 8px 32px 8px 12px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    background-color: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath fill='%236B778C' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    min-width: 140px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.filter-select:hover {
    border-color: #B3BAC5;
}

.filter-select:focus {
    outline: none;
    border-color: #0052CC;
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

/* Tab Pagination */
.tab-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid #DFE1E6;
    background: #FAFBFC;
}

.pagination-info {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 4px;
}

.pagination-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.pagination-btn:hover {
    background: var(--color-bg-hover);
    border-color: #B3BAC5;
    color: var(--color-text-primary);
}

.pagination-btn.active {
    background: #0052CC;
    border-color: #0052CC;
    color: #FFFFFF;
}

.pagination-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Skill Category */
.skill-category {
    display: block;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 2px;
}

/* Profile Tab Grid */
.profile-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

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

.profile-section {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    padding: 20px;
}


.profile-section-header .profile-section-title {
    margin: 0;
}

.profile-section-title {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
    padding-bottom: 12px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}


.profile-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-field label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-field span,
.profile-field a {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
}

/* Profile table label column */
.profile-label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    width: 160px;
}

.profile-field a.profile-link {
    color: #0052CC;
    text-decoration: none;
}

.profile-field a.profile-link:hover {
    text-decoration: underline;
}

.profile-field-subtitle {
    font-size: 14px !important;
    color: var(--color-text-secondary) !important;
    margin-top: 2px;
}

/* Role Badges */
.role-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}

.role-badge.role-learner {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.role-badge.role-manager {
    background: #DEEBFF;
    color: #0052CC;
}

.role-badge.role-admin {
    background: #EAE6FF;
    color: #403294;
}

.role-badge.role-org-owner {
    background: #EAE6FF;
    color: #403294;
}

.role-badge.role-org-manager {
    background: #DEEBFF;
    color: #0052CC;
}

/* Accreditation Type Badges */
.accred-type-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.accred-type-badge.accred-cle {
    background: #E3FCEF;
    color: #006644;
}

.accred-type-badge.accred-cpe {
    background: #DEEBFF;
    color: #0052CC;
}

/* Breadcrumb Navigation */

.breadcrumb a {
    color: var(--color-text-secondary);
    text-decoration: none;
}

.breadcrumb a:hover {
    color: var(--color-text-primary);
    text-decoration: underline;
}

.breadcrumb .material-symbols-outlined {
    font-size: 16px;
    color: #97A0AF;
}

.breadcrumb span:last-child {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* Form Card */
.form-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    overflow: hidden;
}

/* Selected Course Banner */

.selected-course-info {
    display: flex;
    align-items: center;
    gap: 16px;
}

.selected-course-details h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 2px 0;
}

.selected-course-meta {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Accreditation Form */
.accreditation-form {
    padding: 24px;
}

.accreditation-form .form-section {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 32px;
}

.accreditation-form .form-section:last-of-type {
    margin-bottom: 0;
}

.accreditation-form .form-section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

/* Selectable Table */
.selectable-table tbody tr {
    cursor: default;
}

.selectable-table .course-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    color: var(--color-text-primary);
}

/* Selected course title in cards (e.g., accreditation-new) - uses heading font */
.selected-course-title {
    font-family: 'Bitter', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.3;
}

.selectable-table .type-detail {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-left: 8px;
}

.selectable-table .accred-count {
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Table Action Buttons */
.table-action-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    transition: all 0.15s;
}

.table-action-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.table-action-btn.delete:hover {
    background: #FFEBE6;
    color: #DE350B;
}

.table-action-btn .material-symbols-outlined {
    font-size: 20px;
}

.table-action-btns {
    display: flex;
    gap: 4px;
    justify-content: flex-end;
}

/* Form static value - non-editable display text */
.form-static-value {
    padding: 8px 0;
    color: var(--color-text-primary);
    font-weight: 600;
    margin: 0;
}

/* Skill Level Badges */
.skill-level-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 3px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
}

.skill-level-badge.novice {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.skill-level-badge.beginner {
    background: #DEEBFF;
    color: #0052CC;
}

.skill-level-badge.intermediate {
    background: #E3FCEF;
    color: #006644;
}

.skill-level-badge.expert {
    background: #EAE6FF;
    color: #403294;
}

/* CLE Progress */
.cle-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* Certificate Type Badges */

.certificate-type-badge.type-professional {
    background: #E3FCEF;
    color: #006644;
}

.certificate-type-badge.type-technical {
    background: #DEEBFF;
    color: #0052CC;
}

.certificate-type-badge.type-compliance {
    background: #FFF0B3;
    color: var(--color-text-primary);
}

.certificate-type-badge.type-continuing_education {
    background: #EAE6FF;
    color: #403294;
}

.certificate-type-badge.type-other {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

/* Activity Timeline */
.activity-timeline {
    padding: 16px 20px;
}

.activity-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #F4F5F7;
}

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

.activity-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.activity-icon .material-symbols-outlined {
    font-size: 20px;
}

.activity-item.activity-success .activity-icon {
    background: #E3FCEF;
    color: #006644;
}

.activity-item.activity-info .activity-icon {
    background: #DEEBFF;
    color: #0052CC;
}

.activity-content {
    flex: 1;
    min-width: 0;
}

.activity-description {
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.activity-link {
    display: block;
    font-size: var(--font-size-md);
    color: var(--color-primary);
    text-decoration: none;
    margin-bottom: 4px;
}

.activity-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

/* Progress Bar Mini (for assignments table) */
.progress-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-bar-mini {
    width: 60px;
    height: 6px;
    background: var(--color-bg-active);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill-mini {
    height: 100%;
    background: #0052CC;
    border-radius: 3px;
}

.progress-text-mini {
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* Completion Badge - Not Started */
.completion-badge.not-started {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

/* Text utilities for tabs */
.text-muted {
    color: var(--color-text-secondary);
}

.text-danger {
    color: #DE350B;
}

.text-warning {
    color: #FF8B00;
}

/* Button text style */
.btn-text {
    background: none;
    border: none;
    color: #0052CC;
    cursor: pointer;
    font-size: 14px;
    padding: 0;
}

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

/* Checkbox label */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.radio-group {
    display: flex;
    gap: 20px;
}

.radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}

.radio-label input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #0052CC;
}

.radio-text {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.radio-hint {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* =============================================
   LOGIN PAGE STYLES
   ============================================= */

.login-page {
    min-height: 100vh;
    background: var(--color-bg-card);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.login-container {
    width: 100%;
    max-width: 420px;
}

.login-card {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    padding: 40px;
}

.login-header {
    text-align: center;
    margin-bottom: 32px;
}

.login-logo {
    max-width: 280px;
    height: auto;
    margin-bottom: 24px;
}

.login-header h1 {
    font-family: 'Bitter', serif;
    font-size: 40px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.required {
    color: #DE350B;
}

.required-note {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 20px 0;
}

.required-note::before {
    content: '*';
    color: #DE350B;
    margin-right: 4px;
}

.login-success {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #E3FCEF;
    border: 1px solid #36B37E;
    border-radius: var(--radius-default);
    padding: 12px 16px;
    margin-bottom: 24px;
    color: #006644;
    font-size: 14px;
}

.login-success .material-symbols-outlined {
    font-size: 20px;
    color: #36B37E;
}

.login-error {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #FFEBE6;
    border: 1px solid #FF5630;
    border-radius: var(--radius-default);
    padding: 12px 16px;
    margin-bottom: 24px;
    color: #BF2600;
    font-size: 14px;
}

.login-error .material-symbols-outlined {
    font-size: 20px;
    color: #FF5630;
}

.login-form .form-group {
    margin-bottom: 20px;
}

.login-form .form-group label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.login-form .form-group input[type="email"],
.login-form .form-group input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    background: #FAFBFC;
    transition: border-color 0.2s, background-color 0.2s;
}

.login-form .form-group input[type="email"]:focus,
.login-form .form-group input[type="password"]:focus {
    outline: none;
    border-color: #0052CC;
    background: var(--color-bg-card);
}

.login-form .form-group input[type="email"]:hover,
.login-form .form-group input[type="password"]:hover {
    background: var(--color-bg-card);
}

.form-group-checkbox {
    margin-bottom: 24px;
}

.form-group-checkbox .checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-muted);
}

.form-group-checkbox .checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0052CC;
    cursor: pointer;
}

.form-group-checkbox .checkbox-text {
    user-select: none;
}

/* ============================================
   FIELD VALIDATION ERRORS
   Visual indicators for form validation errors
   ============================================ */

/* Error state for input fields */
.field-error,
input.field-error,
select.field-error,
textarea.field-error {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 2px rgba(212, 68, 0, 0.15) !important;
}

.field-error:focus {
    border-color: var(--color-danger) !important;
    box-shadow: 0 0 0 3px rgba(212, 68, 0, 0.2) !important;
}

/* Error message below field */
.field-error-message {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--color-danger);
    font-weight: 500;
}

/* Error icon (optional, for inline display) */
.field-error-icon {
    color: var(--color-danger);
    font-size: 18px;
    vertical-align: middle;
    margin-right: 4px;
}

.login-btn {
    width: 100%;
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-default);
    cursor: pointer;
    background: #0D1F3C;
    color: #fff;
    transition: background-color 0.2s;
}

.login-btn:hover {
    background: #1A2F4D;
}

.login-btn:active {
    background: #0A1829;
}

.login-footer {
    text-align: center;
    margin-top: 24px;
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* =============================================
   ACCESS EXPIRED PAGE STYLES
   ============================================= */

.access-expired-card {
    max-width: 480px;
    text-align: center;
}

.access-expired-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #FFF0E6;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px;
}

.access-expired-icon .material-symbols-outlined {
    font-size: 40px;
    color: #FF8B00;
}

.access-expired-content h1 {
    font-family: 'Bitter', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 16px;
}

.access-expired-message {
    font-size: 16px;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin: 0 0 24px;
}

.access-expired-user {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0 0 32px;
    padding: 12px 16px;
    background: #F4F5F7;
    border-radius: var(--radius-default);
}

.access-expired-user strong {
    color: var(--color-text-primary);
}

.access-expired-actions {
    margin-bottom: 24px;
}

.access-expired-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 32px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}

.access-expired-support {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.access-expired-support p {
    margin: 0;
}

/* User avatar in header */
.user-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #0052CC;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.user-dropdown-role {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.user-dropdown-org {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.role-badge.role-super {
    background-color: #EAE6FF;
    color: #403294;
}

/* =============================================
   PLACEHOLDER PAGE STYLES
   ============================================= */


.placeholder-content h1 {
    font-family: 'Bitter', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0 0 8px 0;
}


.placeholder-features h3 {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin: 0 0 16px 0;
}

.placeholder-features ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.placeholder-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    font-size: 14px;
    color: var(--color-text-primary);
    border-bottom: 1px solid #E9ECEF;
}

.placeholder-features li:last-child {
    border-bottom: none;
}

.placeholder-features li .material-symbols-outlined {
    font-size: 20px;
    color: #0052CC;
}


.placeholder-footer .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    color: var(--color-text-muted);
    background: var(--color-bg-hover);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    transition: background-color 0.2s;
}

.placeholder-footer .btn-secondary:hover {
    background: var(--color-bg-active);
}

.placeholder-footer .btn-secondary .material-symbols-outlined {
    font-size: 18px;
}

/* =================================================
   SUPER ADMIN STYLES
   ================================================= */

/* Super Admin Badge in Header */
.super-admin-badge {
    background: #0D1F3C;
    color: white;
    padding: 3px 8px;
    border-radius: var(--radius-default);
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-left: 12px;
}

/* Super Admin Stats Grid */

/* Library Access Grid */


.library-stat-card.library-cle {
    border-top: 3px solid #2A5488;
}

.library-stat-card.library-cpe {
    border-top: 3px solid #00875A;
}

.library-stat-card.library-microlearning {
    border-top: 3px solid #FF8B00;
}

.library-stat-card.library-simulations {
    border-top: 3px solid #6554C0;
}

.library-stat-card.library-skills {
    border-top: 3px solid #00B8D9;
}


.library-stat-header .material-symbols-outlined {
    font-size: 24px;
    color: #5E6C84;
}

.library-name {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}


/* Library Badge - extends chip system
   Usage: <span class="chip library-badge library-cle">CLE</span>
   For larger contexts: <span class="chip chip-md library-badge library-cle">CLE</span>
*/
.library-badge {
    /* Ensure chip styling even if .chip class is missing */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 1px solid var(--color-border-default);
    white-space: nowrap;
}

.library-badge.library-cle {
    background: #DEEBFF;
    color: #0747A6;
    border-color: #4C9AFF;
}

.library-badge.library-cpe {
    background: #E3FCEF;
    color: #006644;
    border-color: #57D9A3;
}

.library-badge.library-microlearning {
    background: #FFF0B3;
    color: #FF8B00;
    border-color: #FFB74D;
}

.library-badge.library-simulations {
    background: #EAE6FF;
    color: #6554C0;
    border-color: #B8ACF6;
}

.library-badge.library-skills {
    background: #E6FCFF;
    color: #00B8D9;
    border-color: #4DD0E1;
}

/* Library Badges Container */
.library-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

/* Library Access List */
.library-access-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.library-access-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: #FAFBFC;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: 6px;
}

.library-access-item.has-access {
    background: #E3FCEF;
    border-color: #00875A;
}

.library-access-item.no-access {
    background: #FFEBE6;
    border-color: #DE350B;
}


.library-access-info .material-symbols-outlined {
    font-size: 28px;
    color: #5E6C84;
}

.library-access-item.has-access .library-access-info .material-symbols-outlined {
    color: #00875A;
}

.library-access-item.no-access .library-access-info .material-symbols-outlined {
    color: #DE350B;
}


.library-access-status.active {
    color: #00875A;
}

.library-access-status.inactive {
    color: #DE350B;
}

/* Dashboard Two Column Layout */
.dashboard-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 24px;
}

/* Dashboard Section */
.dashboard-section {
    margin-bottom: 24px;
}

.dashboard-section:last-child {
    margin-bottom: 0;
}

/* Section Header with Action */
.section-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.section-header-with-action .section-title {
    margin-bottom: 0;
}

.btn-sm {
    padding: 6px 12px;
    font-size: 14px;
}

/* Data Table in Cards */
.data-table-container {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: 6px;
    overflow: visible; /* Allow dropdown menus to extend beyond container */
}

.data-table-container .data-table {
    margin-bottom: 0;
}

/* Organization Link */
.org-link {
    color: #0052CC;
    text-decoration: none;
    font-weight: 500;
}

.org-link:hover {
    text-decoration: underline;
    color: #0747A6;
}

/* Activity Feed Card Wrapper */

.activity-feed-card .activity-item:first-child {
    padding-top: 0;
}

.activity-feed-card .activity-item:last-child {
    padding-bottom: 0;
}

/* Activity Meta with Org */
.activity-org {
    color: #5E6C84;
}

.activity-separator {
    color: #6B778C;
}

/* Quick Actions Grid */


.quick-action-card .material-symbols-outlined {
    font-size: 32px;
    color: #0052CC;
}


/* Empty State Small */
.empty-state-small {
    padding: 32px;
    text-align: center;
    color: var(--color-text-secondary);
}

.empty-state-small .material-symbols-outlined {
    font-size: 40px;
    color: #6B778C;
    margin-bottom: 12px;
}

.empty-state-small p {
    margin: 0;
    font-size: 14px;
}

/* Organization Header Card */


.org-avatar .material-symbols-outlined {
    font-size: 40px;
    color: white;
}

.org-details h1 {
    font-family: 'Bitter', serif;
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}


.org-meta-item .material-symbols-outlined {
    font-size: 18px;
}


/* Organization Stats Row */


.org-stat-card .stat-value {
    font-family: 'Bitter', serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.org-stat-card .stat-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Admin List */

.admin-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #F8F9FA;
    border-radius: 6px;
}

.admin-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.admin-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}


.admin-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-email {
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-role {
    padding: 4px 10px;
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.admin-role.owner {
    background: #EAE6FF;
    color: #403294;
}

.admin-role.manager {
    background: #DEEBFF;
    color: #0052CC;
}

/* Danger Zone */
.danger-zone {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #DFE1E6;
}

.danger-zone h3 {
    color: #DE350B;
    font-size: 16px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.danger-zone p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

/* Destructive Button (for delete actions) */
.btn-destructive {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #DE350B;
    background: transparent;
    border: 1px solid #DE350B;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-destructive:hover {
    background: #DE350B;
    color: #fff;
}

.btn-destructive .material-symbols-outlined {
    font-size: 18px;
}

/* Library Checkbox Group */
/* Owner Creation Section */


.owner-creation-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.owner-creation-toggle span {
    font-weight: 600;
    color: var(--color-text-primary);
}


.owner-fields.visible {
    display: block;
}

/* Super Admin Responsive */
@media (max-width: 1200px) {


}

@media (max-width: 992px) {
    .dashboard-two-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {


}

/* Stats Row (horizontal pills) */
.stats-row {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}


/* Filters Bar */
.filters-bar {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 16px;
    margin-bottom: 20px;
}


.search-filter {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-bg-hover);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    padding: 8px 12px;
    flex: 1;
    min-width: 200px;
    max-width: 300px;
}

.search-filter .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-secondary);
}

.search-filter input {
    border: none;
    background: transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    outline: none;
    width: 100%;
}

.search-filter input::placeholder {
    color: #626F86;
}

.filter-select select {
    padding: 10px 32px 10px 12px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235E6C84' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.filter-select select:focus {
    border-color: #0052CC;
    outline: none;
}

.btn-text {
    color: #0052CC;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 8px 12px;
}

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

/* User Cell */
.user-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-info {
    display: flex;
    flex-direction: column;
}

.user-name-link {
    color: #0052CC;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.user-name-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

.user-email {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Action Buttons */

.btn-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-default);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.btn-icon:hover {
    background: var(--color-bg-hover);
    color: #0052CC;
}

.btn-icon .material-symbols-outlined {
    font-size: 20px;
}

/* Empty Table Message */

.empty-table-message .material-symbols-outlined {
    font-size: 48px;
    color: #6B778C;
    display: block;
    margin-bottom: 12px;
}

.empty-table-message p {
    margin: 0;
    font-size: 14px;
}

/* Small Status Badge */
.status-badge.small {
    font-size: 14px;
    padding: 2px 6px;
    margin-left: 6px;
}

/* Content Library Cards */


.library-card.cle .library-card-header {
    background: linear-gradient(135deg, #DEEBFF 0%, #B3D4FF 100%);
}

.library-card.cpe .library-card-header {
    background: linear-gradient(135deg, #E3FCEF 0%, #ABF5D1 100%);
}

.library-card.microlearning .library-card-header {
    background: linear-gradient(135deg, #FFF0B3 0%, #FFE380 100%);
}

.library-card.simulations .library-card-header {
    background: linear-gradient(135deg, #EAE6FF 0%, #C0B6F2 100%);
}

.library-card.skills .library-card-header {
    background: linear-gradient(135deg, #E6FCFF 0%, #B3F5FF 100%);
}


.library-card.cle .library-card-icon .material-symbols-outlined {
    color: #0052CC;
}

.library-card.cpe .library-card-icon .material-symbols-outlined {
    color: #00875A;
}

.library-card.microlearning .library-card-icon .material-symbols-outlined {
    color: #FF8B00;
}

.library-card.simulations .library-card-icon .material-symbols-outlined {
    color: #6554C0;
}

.library-card.skills .library-card-icon .material-symbols-outlined {
    color: #00B8D9;
}

.library-card-icon .material-symbols-outlined {
    font-size: 28px;
}


.library-stat {
    text-align: center;
}


.library-card-actions .btn-secondary {
    flex: 1;
    justify-content: center;
}

/* Analytics Cards */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.analytics-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    padding: 24px;
}

.analytics-card.full-width {
    grid-column: span 2;
}

.analytics-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.analytics-card-title {
    font-family: 'Bitter', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}


.chart-placeholder .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 8px;
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

/* Override base metric-card padding for admin analytics */
.metrics-grid .metric-card {
    padding: 20px;
    display: block;
}

.metric-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.metric-card-header .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-secondary);
}

.metric-card-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric-card-value {
    font-family: 'Bitter', serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.metric-card-change {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.metric-card-change.positive {
    color: #00875A;
}

.metric-card-change.negative {
    color: #DE350B;
}

.metric-card-change .material-symbols-outlined {
    font-size: 16px;
}

/* Content Type Tabs (for report filtering) */
.content-type-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--color-border-default);
    padding-bottom: 0;
}

.content-type-tab {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: -1px;
}

.content-type-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.content-type-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.content-type-panel {
    display: none;
}

.content-type-panel.active {
    display: block;
}

/* Rating colors for lowest rated content */
.star-rating.rating-low {
    color: #DE350B;
}

.star-rating.rating-low .material-symbols-outlined {
    color: #DE350B;
}

.star-rating.rating-medium {
    color: #FF8B00;
}

.star-rating.rating-medium .material-symbols-outlined {
    color: #FF8B00;
}

/* Settings Page */
.settings-layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 24px;
}

/* Single column layout (no nav sidebar) */
.settings-layout.settings-layout-single {
    grid-template-columns: 1fr;
}

/* Cleaner look for single layout - remove redundant borders */
.settings-layout-single .settings-section {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 24px;
}

.settings-layout-single .setting-row {
    border-bottom: none;
    padding: 16px 0;
}

/* Settings Sub-Sidebar Navigation */
.settings-nav {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 8px;
    height: fit-content;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--font-size-base);
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.settings-nav-item:hover {
    background: #F4F5F7;
    color: var(--color-text-primary);
}

.settings-nav-item.active {
    background: #DEEBFF;
    color: #0052CC;
}

.settings-nav-item .material-symbols-outlined {
    font-size: 20px;
}

.settings-content {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 24px;
}

.settings-section {
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid #DFE1E6;
}

.settings-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Avoid double border when settings-actions follows settings-section */
.settings-section + .settings-actions {
    border-top: none;
    margin-top: 0;
}

.settings-section-title {
    font-family: 'Bitter', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}

.settings-section-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 20px 0;
}

.setting-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #F4F5F7;
}

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

.setting-info {
    flex: 1;
}

.setting-label {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.setting-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Toggle Switch */
.toggle-switch {
    position: relative;
    width: 48px;
    height: 24px;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #6B778C;
    transition: 0.3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
}

.toggle-switch input:checked + .toggle-slider {
    background-color: #0052CC;
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(24px);
}

/* Platform Permissions UI */
.permission-user-selector {
    margin-bottom: 24px;
}

.permission-user-selector label {
    display: block;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.permission-user-selector .search-select-container {
    position: relative;
    max-width: 400px;
}

.permission-user-selector .search-select-input-wrapper {
    position: relative;
}

.permission-user-selector .search-select-input {
    width: 100%;
    padding: 10px 12px 10px 40px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
}

.permission-user-selector .search-select-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.15);
}

.permission-user-selector .search-select-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-secondary);
    font-size: 20px;
}

.permission-user-selector .search-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 300px;
    overflow-y: auto;
    z-index: 100;
    margin-top: 4px;
}

.permission-user-selector .search-select-dropdown.show {
    display: block;
}

.permission-user-selector .search-select-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s;
}

.permission-user-selector .search-select-option:hover {
    background: #F4F5F7;
}

.permission-user-selector .option-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

.permission-user-selector .option-email {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.permissions-container {
    margin-top: 24px;
}

.permissions-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border-light);
}

.selected-admin-name {
    font-size: var(--font-size-md);
    font-weight: 600;
    color: var(--color-text-primary);
}

.permissions-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.permissions-grid.disabled {
    opacity: 0.6;
    pointer-events: none;
}

.permission-area {
    background: #FAFBFC;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 16px;
}

.permission-area-title {
    font-family: 'Bitter', serif;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 12px 0;
}

.permission-table {
    width: 100%;
    border-collapse: collapse;
}

.permission-table thead th {
    text-align: center;
    padding: 8px 12px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.permission-table thead th:first-child {
    text-align: left;
}

.permission-table tbody td {
    padding: 10px 12px;
    border-top: 1px solid var(--color-border-light);
}

.permission-table .permission-label {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

.permission-table .permission-col {
    text-align: center;
    width: 70px;
}

.permission-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.permission-checkbox:disabled {
    cursor: not-allowed;
}

.empty-state-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--color-text-secondary);
}

.empty-state-inline .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-state-inline p {
    margin: 0;
    font-size: var(--font-size-base);
}

.settings-actions {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border-light);
}

@media (max-width: 1200px) {

    .metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .settings-layout {
        grid-template-columns: 1fr;
    }

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

    .analytics-card.full-width {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {

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

    .stats-row {
        flex-direction: column;
    }


    .search-filter {
        max-width: none;
    }
}

/* Course Cell */
.course-cell {
    max-width: 400px;
}

.course-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

/* Course title in tables - override larger page title styles */
.course-cell .course-title {
    font-size: 14px;
    margin-bottom: 2px;
}

.course-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.4;
}

/* Credit Badge */

/* Count Badge */
.count-badge {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    margin-left: 8px;
}

/* Activity Trend Chart */
.activity-trend-chart {
    padding: 20px 0;
}

.trend-bars {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    height: 180px;
    gap: 8px;
}

.trend-bar-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.trend-bar {
    width: 100%;
    max-width: 40px;
    background: linear-gradient(180deg, #0052CC 0%, #0747A6 100%);
    border-radius: var(--radius-default) 4px 0 0;
    margin-top: auto;
    min-height: 4px;
    transition: height 0.3s;
}

.trend-bar:hover {
    background: linear-gradient(180deg, #0065FF 0%, #0052CC 100%);
}

.trend-bar-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 8px;
}

/* Activity Type List */
.activity-type-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.activity-type-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-type-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.activity-type-label {
    font-size: 14px;
    color: var(--color-text-primary);
}

.activity-type-count {
    font-weight: 600;
    color: var(--color-text-primary);
}

.activity-type-bar {
    height: 8px;
    background: var(--color-bg-hover);
    border-radius: var(--radius-default);
    overflow: hidden;
}

.activity-type-fill {
    height: 100%;
    background: linear-gradient(90deg, #0052CC 0%, #0065FF 100%);
    border-radius: var(--radius-default);
    transition: width 0.3s;
}

/* Library Usage List */


.library-usage-stat .stat-value {
    font-family: 'Bitter', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.library-usage-stat .stat-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Role Distribution */


/* Status Distribution */


.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}


/* No Data */
.no-data {
    color: var(--color-text-secondary);
    font-size: 14px;
    text-align: center;
    padding: 24px;
}

/* Settings Input */


.form-input {
    width: 250px;
    padding: 8px 12px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    background: var(--color-bg-card);
}

.form-input:focus {
    outline: none;
    border-color: #0052CC;
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

/* ===========================================
   DATE INPUT - Global Styling
   All date inputs site-wide use this style.
   Do NOT create custom date input styles - use these classes.
   =========================================== */

/* Base date input style - applies to ALL date inputs */
input[type="date"] {
    padding: 10px 12px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    min-width: 150px;
    box-sizing: border-box;
}

input[type="date"]:hover {
    border-color: var(--color-border-dark);
}

input[type="date"]:focus {
    outline: none;
    border-color: #0052CC;
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

/* Calendar picker icon styling */
input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.15s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

/* Date input with label wrapper */
.date-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.date-field label {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Inline date range (horizontal layout) */
.date-range-inline {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.date-range-inline .date-field {
    flex: 0 0 auto;
}

.date-range-inline .date-range-apply {
    margin-bottom: 0;
}

/* Legacy support - keep .form-input[type="date"] working */
.form-input[type="date"],
input[type="date"].form-input {
    width: auto;
}

/* ===========================================
   FLATPICKR THEME OVERRIDES
   Custom styling to match our design system.
   Loaded after flatpickr.min.css so these take precedence.
   =========================================== */

/* Flatpickr alt input (the visible text input) */
.flatpickr-input.form-input,
input.flatpickr-input {
    padding: 10px 12px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: 6px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    min-width: 150px;
    box-sizing: border-box;
    cursor: pointer;
}

.flatpickr-input:hover {
    border-color: var(--color-border-dark);
}

.flatpickr-input:focus,
.flatpickr-input.active {
    outline: none;
    border-color: #0052CC;
    box-shadow: 0 0 0 2px rgba(0, 82, 204, 0.2);
}

/* Calendar dropdown container */
.flatpickr-calendar {
    font-family: 'Nunito', sans-serif;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--color-border-light);
    background: var(--color-bg-card);
    width: 320px;  /* Wide enough for 7-day grid + padding */
}

.flatpickr-calendar.open {
    z-index: 10000;
}

.flatpickr-calendar.hasTime {
    width: 320px;
}

/* Month/year header */
.flatpickr-months {
    padding: 8px 12px;
    background: var(--color-bg-subtle);
    border-radius: 8px 8px 0 0;
    display: flex;
    align-items: center;
}

.flatpickr-months .flatpickr-month {
    height: 36px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flatpickr-current-month {
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-primary);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    position: relative;
    left: 0;
    width: auto;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 15px;
}

/* Navigation arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    position: relative;
    top: 0;
    padding: 8px;
    fill: var(--color-text-secondary);
    transition: fill 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    width: 36px;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    fill: var(--color-primary);
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
    width: 14px;
    height: 14px;
}

/* Weekday headers */
.flatpickr-weekdays {
    background: var(--color-bg-card);
    padding: 8px 8px 4px;
    width: 100%;
}

.flatpickr-weekdaycontainer {
    display: flex;
    justify-content: space-around;
}

.flatpickr-weekday {
    font-family: 'Nunito', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    flex: 1;
    text-align: center;
}

/* Day cells container */
.flatpickr-days {
    padding: 4px 8px 8px;
    width: 100% !important;
}

.dayContainer {
    min-width: 100%;
    max-width: 100%;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

/* Individual day cells */
.flatpickr-day {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    border-radius: 6px;
    height: 38px;
    line-height: 38px;
    margin: 2px;
    flex-basis: calc(14.2857% - 4px);
    max-width: 40px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.flatpickr-day:hover {
    background: var(--color-bg-subtle);
    border-color: transparent;
}

/* Today indicator */
.flatpickr-day.today {
    border-color: var(--color-primary);
    background: transparent;
    color: var(--color-primary);
    font-weight: 700;
}

.flatpickr-day.today:hover {
    background: var(--color-primary-lightest);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Selected day */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

/* Disabled/unavailable days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: var(--color-text-muted);
    opacity: 0.5;
}

.flatpickr-day.flatpickr-disabled {
    cursor: not-allowed;
}

/* Days from other months */
.flatpickr-day.prevMonthDay:hover,
.flatpickr-day.nextMonthDay:hover {
    background: var(--color-bg-subtle);
    border-color: transparent;
}

/* Time picker styles */
.flatpickr-time {
    border-top: 1px solid var(--color-border-light);
    padding: 4px 16px;
    background: var(--color-bg-subtle);
    border-radius: 0 0 8px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: auto;
    max-height: none;
    line-height: normal;
}

.flatpickr-time:after {
    display: none;  /* Remove the clearfix that causes layout issues */
}

.flatpickr-time .numInputWrapper {
    flex: 0 0 auto;
    width: 60px;
    height: 40px;
    float: none;
}

.flatpickr-time input {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    height: 40px;
    line-height: 40px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-card);
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
    background: var(--color-bg-card);
    border-color: var(--color-primary);
}

.flatpickr-time .flatpickr-time-separator {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 40px;
    height: 40px;
    width: auto;
    flex: 0 0 auto;
    float: none;
}

.flatpickr-time .flatpickr-am-pm {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    height: 40px;
    line-height: 40px;
    padding: 0 12px;
    border-radius: 6px;
    border: 1px solid var(--color-border-default);
    background: var(--color-bg-card);
    width: auto;
    float: none;
    flex: 0 0 auto;
}

.flatpickr-time .flatpickr-am-pm:hover {
    background: var(--color-primary-lightest);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.flatpickr-time .numInputWrapper:hover {
    background: transparent;
}

.flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-time .numInputWrapper span.arrowDown {
    border: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.flatpickr-time .numInputWrapper:hover span.arrowUp,
.flatpickr-time .numInputWrapper:hover span.arrowDown {
    opacity: 1;
}

.flatpickr-time .numInputWrapper span.arrowUp:hover,
.flatpickr-time .numInputWrapper span.arrowDown:hover {
    background: var(--color-primary-lightest);
}


/* Checkbox Group */
.checkbox-group {
    display: flex;
    gap: 16px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-primary);
}

.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* Subsection Title */

/* Provider List */


/* Template List */


.template-item > .material-symbols-outlined {
    font-size: 24px;
    color: #5E6C84;
}

.template-item > .material-symbols-outlined:last-child {
    color: #6B778C;
    margin-left: auto;
}


/* Integration List */


.integration-icon .material-symbols-outlined {
    font-size: 24px;
    color: #5E6C84;
}


/* API Keys */


/* Settings Actions */
.settings-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #DFE1E6;
    display: flex;
    gap: 12px;
}

/* Status Inactive Badge */
.status-badge.status-inactive {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

/* Actions Menu (Ellipsis Dropdown) */
.actions-menu-container {
    position: relative;
}

.actions-menu-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: all 0.2s;
}

.actions-menu-toggle:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

/* Button-style dropdown toggle */
.btn-secondary.actions-menu-toggle {
    width: auto;
    height: auto;
    padding: 8px 12px;
    gap: 6px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    color: var(--color-text-muted);
    font-size: 14px;
    font-weight: 500;
}

.btn-secondary.actions-menu-toggle:hover {
    background: var(--color-bg-hover);
    border-color: #6B778C;
}

.btn-secondary.actions-menu-toggle .material-symbols-outlined {
    font-size: 18px;
}

.btn-secondary.actions-menu-toggle .material-symbols-outlined:last-child {
    font-size: 16px;
    margin-left: 2px;
}

/* Primary button-style dropdown toggle */
.btn-primary.actions-menu-toggle {
    width: auto;
    height: auto;
    padding: 8px 16px;
    gap: 8px;
    display: inline-flex;
    align-items: center;
    background: #0D1F3C;
    border: none;
    border-radius: var(--radius-default);
    color: white;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary.actions-menu-toggle:hover {
    background: #1A2F4D;
}

.btn-primary.actions-menu-toggle .material-symbols-outlined {
    font-size: 18px;
    color: white;
}

.btn-primary.actions-menu-toggle .material-symbols-outlined:last-child {
    font-size: 16px;
    margin-left: 2px;
}

.actions-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: max-content;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s;
}

.actions-dropdown.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(4px);
}

.actions-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s;
}

.actions-dropdown .dropdown-item:hover {
    background: var(--color-bg-hover);
}

.actions-dropdown .dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

.actions-dropdown .dropdown-divider {
    height: 1px;
    background: #DFE1E6;
    margin: 4px 0;
}

/* Actions Column */
.actions-col {
    width: 60px;
    text-align: center;
}

/* Org Info Cell */
.org-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.org-name-link {
    color: #0052CC;
    text-decoration: none;
    font-weight: 600;
}

.org-name-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

.org-slug {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* User Count */
.user-count {
    font-weight: 600;
    color: var(--color-text-primary);
}

.user-count-total {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-left: 4px;
}

/* No Libraries */
.no-libraries {
    color: #626F86;
    font-style: italic;
    font-size: 14px;
}

/* Search Filters Bar */
.search-filters-bar {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: center;
}


.search-input-container .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-secondary);
}

.search-input-container input {
    border: none;
    background: transparent;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    outline: none;
    width: 100%;
}

.search-input-container input::placeholder {
    color: #626F86;
}


.filter-buttons .filter-select {
    padding: 8px 32px 8px 12px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    background: var(--color-bg-card);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%235E6C84' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

/* Pagination */
.pagination-info {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.pagination-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width-thin) solid var(--color-border-default);
    background: var(--color-bg-card);
    border-radius: var(--radius-default);
    color: var(--color-text-primary);
    text-decoration: none;
    transition: all 0.2s;
}

.pagination-btn:hover {
    background: var(--color-bg-hover);
    border-color: #6B778C;
}

.pagination-current {
    font-size: 14px;
    color: var(--color-text-primary);
    padding: 0 12px;
}

/* Pagination Wrapper */
.pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    margin-top: 16px;
}

.pagination .pagination-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Modal Visible State */
.modal-overlay.visible {
    opacity: 1;
    visibility: visible;
}

.modal-overlay.visible .modal-container {
    transform: translateY(0);
}

/* Modal Container Base */
.modal-container {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid #DFE1E6;
}

.modal-header h2 {
    font-family: 'Bitter', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.modal-close {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background-color 0.2s, color 0.2s;
}

.modal-close:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.modal-body {
    padding: 24px;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #DFE1E6;
    background: #FAFBFC;
}

/* Modal Container Sizes */
.modal-container.modal-medium {
    max-width: 600px;
}

.modal-container.modal-small {
    max-width: 450px;
}

.modal-container.modal-lg {
    max-width: 700px;
}

/* Modal Close Button (in header) */
.modal-close-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background-color 0.2s, color 0.2s;
}

.modal-close-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

/* Modal Subtitle */
.modal-subtitle {
    color: var(--color-text-secondary);
    font-size: 14px;
    margin: 0 0 24px 0;
}

/* Assignment Review Modal */


.global-due-date-row label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
}

.global-due-date-row input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    min-width: 150px;
}

.global-due-date-row input[type="date"]:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Assignment Review List */


.review-item-type.group {
    background: #E3F2FD;
    color: #1565C0;
}

.review-item-type.user {
    background: #F3E5F5;
    color: #7B1FA2;
}


.review-item-date input[type="date"] {
    padding: 6px 10px;
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
    font-size: 14px;
    color: var(--color-text-primary);
    background-color: var(--color-bg-primary);
    min-width: 140px;
}

.review-item-date input[type="date"]:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* =============================================
   ORGANIZATION DETAIL PAGE
   ============================================= */

/* Organization Stats Grid */
.org-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

.org-stats-grid .stat-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.org-stats-grid .stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.org-stats-grid .stat-icon .material-symbols-outlined {
    font-size: 24px;
    color: #5E6C84;
}

/* Organization Detail Grid */
.org-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.org-detail-left,
.org-detail-right {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Detail Section */
.detail-section {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    padding: 24px;
}

.detail-section .section-title {
    font-family: 'Bitter', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
}

.detail-section .section-header-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.detail-section .section-header-with-action .section-title {
    margin-bottom: 0;
}

/* Detail List */
.detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #F4F5F7;
}

.detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.detail-value {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-primary);
}

/* Library Access in Detail */
.detail-section .library-access-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: #F8F9FA;
    border-radius: 6px;
    border: var(--border-width-thin) solid var(--color-border-light);
}

.detail-section .library-icon {
    font-size: 24px;
    color: #5E6C84;
}

.detail-section .library-info {
    flex: 1;
}

.detail-section .library-info .library-name {
    font-weight: 600;
    color: var(--color-text-primary);
    display: block;
    margin-bottom: 2px;
}

.detail-section .library-info .library-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.detail-section .text-success {
    color: #00875A;
}

.detail-section .text-danger {
    color: #DE350B;
}

.detail-section .library-access-item.no-access {
    background: #FAFBFC;
    opacity: 0.7;
}

.detail-section .library-access-item.no-access .library-name,
.detail-section .library-access-item.no-access .library-desc,
.detail-section .library-access-item.no-access .library-icon {
    color: #97A0AF;
}

/* Admins List */
.admins-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Users List Compact */
.users-list-compact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.users-list-compact .user-item-compact:last-child {
    margin-bottom: 0;
}

.user-item-compact {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: #F8F9FA;
    border-radius: 6px;
}

.user-avatar-small {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
}

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

.user-item-compact .user-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-item-compact .user-meta {
    font-size: 14px;
    color: var(--color-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #6B778C;
    flex-shrink: 0;
}

.status-dot.status-active {
    background: #00875A;
}

.status-dot.status-inactive {
    background: #DE350B;
}

/* Activity Feed Compact */
.activity-feed.compact .activity-item {
    padding: 10px 0;
    border-bottom: 1px solid #F4F5F7;
}

.activity-feed.compact .activity-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.activity-feed.compact .activity-item:first-child {
    padding-top: 0;
}

.activity-feed.compact .activity-avatar {
    width: 32px;
    height: 32px;
}

.activity-feed.compact .activity-avatar.small {
    width: 28px;
    height: 28px;
}

.activity-feed.compact .activity-avatar .material-symbols-outlined {
    font-size: 16px;
}

.activity-feed.compact .activity-item-name {
    color: var(--color-primary);
    font-weight: 500;
}

/* Empty State Small */
.empty-state-small {
    text-align: center;
    padding: 32px 16px;
    color: var(--color-text-secondary);
}

.empty-state-small .material-symbols-outlined {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.5;
}

.empty-state-small p {
    margin: 0;
    font-size: 14px;
}

/* Role Badges */
.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.role-badge.role-admin {
    background: #DEEBFF;
    color: #0747A6;
}

.role-badge.role-manager {
    background: #E3FCEF;
    color: #006644;
}

/* Organization Meta */

.org-slug {
    display: inline-block;
    font-size: 14px;
    color: var(--color-text-secondary);
    font-family: monospace;
    background: var(--color-bg-hover);
    padding: 2px 6px;
    border-radius: 3px;
}

/* Button Small for section headers */
.btn-sm {
    padding: 6px 12px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-sm .material-symbols-outlined {
    font-size: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
    .org-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* Form Divider */

/* Form Section */
.form-section {
    margin-bottom: 24px;
}

.form-section:last-child {
    margin-bottom: 0;
}

/* Form Section Title */
.form-section-title {
    font-family: 'Bitter', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
}

.form-section-title + .form-section-desc,
.form-section-title + .form-section-description {
    margin-top: -8px;
}

.form-section-desc,
.form-section-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 12px 0;
}

/* Checkbox Label in Forms */
.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    background: #FAFBFC;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.checkbox-label:hover {
    background: var(--color-bg-hover);
}

.checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.checkbox-text .library-name {
    font-weight: 600;
    color: var(--color-text-primary);
}

.checkbox-text .library-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Library Checkboxes in Modal - Vertical Layout */
.library-checkboxes {
    flex-direction: column;
    gap: 0;
}

.library-checkboxes .checkbox-label {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    border-radius: 0;
    border-bottom: none;
}

.library-checkboxes .checkbox-label input[type="checkbox"] {
    order: 2;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
}

.library-checkboxes .checkbox-label:first-child {
    border-radius: 6px 6px 0 0;
}

.library-checkboxes .checkbox-label:last-child {
    border-radius: 0 0 6px 6px;
    border-bottom: 1px solid #DFE1E6;
}

.library-checkboxes .checkbox-label:only-child {
    border-radius: 6px;
    border-bottom: 1px solid #DFE1E6;
}

.library-checkboxes .checkbox-text {
    flex: 1;
}

/* Modal Description */
.modal-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

/* Empty State in Table */
td.empty-state {
    text-align: center;
    padding: 48px 24px !important;
    color: var(--color-text-secondary);
}

td.empty-state .material-symbols-outlined {
    font-size: 48px;
    color: #6B778C;
    display: block;
    margin-bottom: 12px;
}

/* =============================================
   Course Form Styles
   ============================================= */

/* Form Layout - Two Column */

@media (max-width: 1200px) {

}


.form-section {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    padding: 24px;
}

.form-section-title {
    font-family: 'Bitter', serif;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 1px solid #DFE1E6;
}

.form-section-desc {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: -8px 0 20px 0;
}

/* Form Sidebar */


.form-sidebar-card h3 {
    font-family: 'Bitter', serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
}


.form-sidebar-card .btn-full {
    margin-bottom: 12px;
}

.form-sidebar-card .btn-full:last-child {
    margin-bottom: 0;
}

.form-sidebar-card .btn-text.btn-full {
    text-align: center;
    display: block;
    padding: 10px;
    color: var(--color-text-secondary);
}

.form-sidebar-card .btn-text.btn-full:hover {
    color: var(--color-text-primary);
}

/* Skills Checkbox Grid */

.checkbox-label.compact {
    padding: 8px 12px;
    font-size: 14px;
}

.checkbox-label.compact input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

/* States Checkbox Grid */

.states-checkbox-grid .checkbox-label {
    padding: 8px 10px;
    justify-content: center;
    text-align: center;
}

.states-checkbox-grid .checkbox-label .checkbox-text {
    font-size: 14px;
    font-weight: 600;
}


.states-selection-header .btn-text {
    font-size: 14px;
}

/* Course Form specific */
.course-form .form-group {
    margin-bottom: 20px;
}

.course-form .form-group:last-child {
    margin-bottom: 0;
}

.course-form .form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.course-form .form-row .form-group {
    margin-bottom: 0;
}

/* Required Field Indicator */
.required {
    color: #DE350B;
}

/* =============================================
   ASSIGN TABS (Pathway Assignment Page)
   ============================================= */


.assign-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.assign-tab .material-symbols-outlined {
    font-size: 20px;
}

.assign-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.assign-tab.active {
    color: #0052CC;
    border-bottom-color: #0052CC;
}

.tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    background: #0052CC;
    border-radius: 10px;
}

.assign-tab:not(.active) .tab-badge {
    background: #6B778C;
}

/* User avatar in assign list */
.pathway-assign-item .user-avatar.small {
    width: 40px;
    height: 40px;
    min-width: 40px;
    font-size: 14px;
    font-weight: 600;
}

.pathway-assign-item.is-assigned .user-avatar.small {
    background: #0052CC;
}

/* Assign page search and filters bar */
.assign-search-filters {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.assign-search-filters .library-search {
    flex: 1;
}

/* Results count in assign list */
.assign-results-count {
    font-size: 14px;
    color: var(--color-text-secondary);
    padding: 8px 4px;
}

/* Type badge for groups */
.group-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-default);
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.group-type-badge.department {
    background: #EAE6FF;
    color: #5243AA;
}

.group-type-badge.team {
    background: #E3FCEF;
    color: #006644;
}

.group-type-badge.cohort {
    background: #FFFAE6;
    color: #FF8B00;
}

.group-type-badge.custom {
    background: #DEEBFF;
    color: #0052CC;
}

/* Skills List and Chips */
.skills-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: 200px;
}

.skill-chip {
    display: inline-block;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 500;
    background: var(--color-bg-hover);
    color: var(--color-text-muted);
    border-radius: var(--radius-default);
    white-space: nowrap;
}

/* =============================================
   COURSE DETAIL PAGE
   ============================================= */


.course-detail-meta .meta-divider {
    color: #6B778C;
}

.course-detail-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.course-detail-meta .meta-item .material-symbols-outlined {
    font-size: 18px;
}

/* Stats Cards Row */

.stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
}


.stat-card-icon .material-symbols-outlined {
    font-size: 24px;
}


/* Detail Tabs */
.detail-tabs {
    display: flex;
    border-bottom: 1px solid #DFE1E6;
    margin-bottom: 24px;
    gap: 0;
    overflow-x: auto;
}

.detail-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
}

.detail-tab .material-symbols-outlined {
    font-size: 20px;
}

.detail-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-hover);
}

.detail-tab.active {
    color: #0052CC;
    border-bottom-color: #0052CC;
}

.detail-tab .tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #DFE1E6;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.detail-tab.active .tab-badge {
    background: #DEEBFF;
    color: #0052CC;
}

/* Tab Count (used with detail-tabs) */
.tab-count {
    background: var(--color-bg-hover);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 14px;
}

.detail-tab.active .tab-count {
    background: #DEEBFF;
    color: var(--color-primary);
}

/* User Profile Header (Super Admin) */
.user-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border-light);
}


.user-profile-info h1 {
    font-size: 24px;
    margin-bottom: 4px;
}


/* Detail Cards Grid */


.detail-card h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light);
}

.detail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}


.detail-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.detail-row .detail-value {
    text-align: right;
}

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

.detail-value a:hover {
    text-decoration: underline;
}


@media (max-width: 768px) {
    .user-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }


}

/* Detail Sections */
.detail-section {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    padding: 24px;
    margin-bottom: 24px;
}

.detail-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.detail-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
}

.detail-section-header .detail-section-title {
    margin-bottom: 0;
}

/* Info Card - Read-only info display with label/value rows */
.info-card {
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-default);
    padding: 16px;
}

.info-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.info-card-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.info-card-row:first-child {
    padding-top: 0;
}

.info-card-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.info-card-value {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

/* Event datetime display in tables */
.event-datetime {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-date {
    font-weight: 500;
    color: var(--color-text-primary);
}

.event-time {
    font-size: var(--font-size-sm);
}

/* Detail Grid */
.detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.detail-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-field.full-width {
    grid-column: 1 / -1;
}

.detail-field label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-field .detail-value {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.5;
    text-align: left;
}

/* Jurisdiction Chips */

.jurisdiction-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    font-size: var(--font-size-sm);
    font-weight: 600;
    background: #DEEBFF;
    color: #0747A6;
    border-radius: var(--radius-default);
}

/* Skills Grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
}

.skill-category-card {
    background: #F8F9FA;
    border-radius: var(--radius-lg);
    padding: 16px;
}

.skill-category-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.skill-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--color-text-secondary);
}

.empty-state .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 16px;
    color: #6B778C;
}

.empty-state p {
    margin: 0 0 16px 0;
    font-size: 14px;
}

.empty-state-text {
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Consolidated Empty State Container - Use this for all empty states */
.empty-state-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 64px 24px;
    background: #FAFBFC;
    border: 1px dashed #DFE1E6;
    border-radius: var(--radius-lg);
    margin: 24px 0;
}

.empty-state-container .empty-state-icon {
    width: 72px;
    height: 72px;
    background: var(--color-bg-card);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.empty-state-container .empty-state-icon .material-symbols-outlined {
    font-size: 40px;
    color: var(--color-text-secondary);
}

.empty-state-container .empty-state-title {
    font-family: 'Bitter', serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}

.empty-state-container .empty-state-description {
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 24px 0;
    max-width: 400px;
    line-height: 1.5;
}

.empty-state-container .empty-state-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.empty-state-container .empty-state-actions .btn-primary,
.empty-state-container .empty-state-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Compact variant for smaller sections/cards */
.empty-state-container.compact {
    padding: 32px 24px;
    margin: 0;
    background: #FAFBFC;
    border: 1px dashed #DFE1E6;
}

.empty-state-container.compact .empty-state-icon {
    width: 56px;
    height: 56px;
    margin-bottom: 16px;
}

.empty-state-container.compact .empty-state-icon .material-symbols-outlined {
    font-size: 28px;
}

.empty-state-container.compact .empty-state-title {
    font-size: 16px;
    margin-bottom: 6px;
}

.empty-state-container.compact .empty-state-description {
    font-size: 14px;
    margin-bottom: 16px;
}

/* Inline empty state (for smaller sections within pages) */
.empty-state-inline {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    background: #FAFBFC;
    border: 1px dashed #DFE1E6;
    border-radius: var(--radius-md);
    text-align: center;
}

.empty-state-inline .material-symbols-outlined {
    font-size: 32px;
    color: var(--color-text-tertiary);
    margin-bottom: 12px;
}

.empty-state-inline p {
    margin: 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.empty-state-inline p.text-muted {
    font-size: var(--font-size-xs);
    margin-top: 4px;
}

/* Product table styles */
.product-name-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.product-name-cell .product-name {
    font-weight: var(--font-weight-medium);
}

.product-name-cell .product-description {
    font-size: var(--font-size-xs);
    line-height: 1.4;
}

/* Salesforce ID code styling */
code.sf-id {
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: var(--font-size-xs);
    background: var(--color-bg-hover);
    padding: 2px 6px;
    border-radius: 3px;
    color: var(--color-text-secondary);
}

/* Inline variant for dashboard sections and smaller areas */
.empty-state-container.inline {
    width: 100%;
    padding: 40px 16px;
    margin: 0;
    background: transparent;
    border: none;
}

.empty-state-container.inline .empty-state-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 12px;
    box-shadow: none;
    background: var(--color-bg-hover);
}

.empty-state-container.inline .empty-state-icon .material-symbols-outlined {
    font-size: 24px;
}

.empty-state-container.inline .empty-state-title {
    font-size: 14px;
}

.empty-state-container.inline .empty-state-description {
    font-size: 14px;
    margin-bottom: 12px;
}

/* ===========================================
   LIVE COURSES AGENDA
   Agenda-style view for upcoming live courses.
   Shows courses grouped by date with today first.
   =========================================== */

.live-agenda {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* Jump to date navigation */
.agenda-date-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.agenda-date-nav-label {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-right: 8px;
}

.agenda-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--teardrop-sm);
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.agenda-date-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.agenda-date-chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.agenda-date-chip .material-symbols-outlined {
    font-size: 16px;
}

.agenda-day {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.agenda-date-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-primary);
    border-radius: var(--teardrop);
    scroll-margin-top: 80px;
}

.agenda-date-header .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-white);
}

.agenda-date-header h2 {
    margin: 0;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.agenda-day-later .agenda-date-header {
    background: var(--color-text-secondary);
}

.agenda-events {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.agenda-event-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--teardrop);
    text-decoration: none;
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.agenda-event-card:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.event-time-block {
    flex-shrink: 0;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 16px;
    background: linear-gradient(135deg, #E8F0F8 0%, #DEEBFF 100%);
    border-right: 1px solid var(--color-border);
    text-align: center;
}

.event-time-block .event-date-day {
    font-size: 28px;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1;
}

.event-time-block .event-date-month {
    font-size: 12px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.event-time-block .event-time-text {
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-top: 8px;
}

.event-details {
    flex: 1;
    min-width: 0;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    display: block;
}

.event-details:hover {
    background: var(--color-bg-hover);
}

.event-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.event-duration {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.event-duration .material-symbols-outlined {
    font-size: 16px;
}

.event-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    line-height: 1.4;
}

.event-description {
    margin: 0 0 12px 0;
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.event-footer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.event-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--color-text-tertiary);
}

.event-badge .material-symbols-outlined {
    font-size: 16px;
}

.event-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 20px 16px;
    border-left: 1px solid var(--color-border-light);
}

.event-calendar-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.event-calendar-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-bg-selected);
}

.event-calendar-btn .material-symbols-outlined {
    font-size: 20px;
}

.event-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--color-text-tertiary);
    transition: color 0.15s ease;
}

.agenda-event-card:hover .event-view-btn {
    color: var(--color-primary);
}

.event-view-btn .material-symbols-outlined {
    font-size: 24px;
}

/* Event calendar dropdown */
.event-calendar-dropdown {
    position: relative;
}

.event-calendar-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: var(--z-dropdown);
    display: none;
}

.event-calendar-menu.show {
    display: block;
}

.event-calendar-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: var(--color-text-primary);
    text-decoration: none;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.event-calendar-menu .dropdown-item:hover {
    background: var(--color-bg-hover);
}

.event-calendar-menu .dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* Mobile responsive */
@media (max-width: 768px) {
    .agenda-event-card {
        flex-direction: column;
    }

    .event-time-block {
        width: 100%;
        flex-direction: row;
        gap: 16px;
        padding: 12px 16px;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
    }

    .event-time-block .event-date-day {
        font-size: 24px;
    }

    .event-time-block .event-time-text {
        margin-top: 0;
        margin-left: auto;
    }

    .event-actions {
        flex-direction: row;
        border-left: none;
        border-top: 1px solid var(--color-border-light);
        padding: 12px 16px;
    }
}

/* ===========================================
   LIVE COURSES PAGE (Card Layout)
   Uses course-card component with date groupings
   =========================================== */

.live-courses-date-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.live-courses-date-nav-label {
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-right: 8px;
}

.live-courses-date-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    font-size: 13px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.live-courses-date-chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
    background: var(--color-bg-hover);
}

.live-courses-date-chip .material-symbols-outlined {
    font-size: 16px;
}

/* Later chip as a button */
button.live-courses-date-chip {
    font-family: inherit;
    border: 1px solid var(--color-border);
}

button.live-courses-date-chip:hover {
    border-color: var(--color-primary);
}

/* Later count badge */
.later-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 2px;
}

button.live-courses-date-chip:hover .later-count {
    color: var(--color-primary);
}

/* Active date chip (when viewing a specific date range) */
.live-courses-date-chip.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #FFFFFF;
}

.live-courses-date-chip.active:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #FFFFFF;
}

.live-courses-date-chip.active .material-symbols-outlined {
    color: #FFFFFF;
}

.live-courses-day-section {
    margin-bottom: 32px;
}

.live-courses-day-header,
h2.live-courses-day-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 16px;
    margin: 0 0 16px 0;
    background: var(--color-primary);
    border-radius: 8px;
    scroll-margin-top: 80px;
    font-size: 16px;
    font-weight: var(--font-weight-semibold);
    color: #FFFFFF !important;
}

.live-courses-day-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.live-courses-day-header .material-symbols-outlined {
    font-size: 20px;
    color: #FFFFFF !important;
}

.back-to-top-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #FFFFFF;
    text-decoration: none;
    font-size: 14px;
    font-weight: var(--font-weight-medium);
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.back-to-top-link:hover {
    opacity: 1;
    color: #FFFFFF;
}

.back-to-top-link .material-symbols-outlined {
    font-size: 18px;
}

/* Date range view header styling removed - now uses back-link pattern */

/* Stats Summary */

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-item .stat-value {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.stat-item .stat-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 4px;
}

/* Table Link */
.table-link {
    color: #0052CC;
    text-decoration: none;
    font-weight: 500;
}

.table-link:hover {
    text-decoration: underline;
}

/* View All Link */

/* =============================================
   COURSE ASSIGNMENT MODAL
   ============================================= */

#course-assign-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

#course-assign-modal-overlay.show {
    display: flex;
}

.course-assign-modal {
    background: var(--color-bg-card);
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.course-assign-modal .modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #DFE1E6;
    position: relative;
}

.course-assign-modal .modal-title {
    font-family: 'Bitter', serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
}

.course-assign-modal .modal-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    padding-right: 40px;
}

.course-assign-modal .modal-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: var(--radius-default);
    color: var(--color-text-secondary);
}

.course-assign-modal .modal-close-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.course-assign-modal .modal-tabs {
    display: flex;
    border-bottom: 1px solid #DFE1E6;
    padding: 0 24px;
    gap: 8px;
}

.course-assign-modal .modal-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    transition: all 0.15s ease;
}

.course-assign-modal .modal-tab:hover {
    color: var(--color-text-primary);
}

.course-assign-modal .modal-tab.active {
    color: #0052CC;
    border-bottom-color: #0052CC;
}

.course-assign-modal .modal-tab .material-symbols-outlined {
    font-size: 20px;
}

.course-assign-modal .tab-badge {
    background: #DFE1E6;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 20px;
    text-align: center;
}

.course-assign-modal .modal-tab.active .tab-badge {
    background: #DEEBFF;
    color: #0052CC;
}

.course-assign-modal .modal-body {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.course-assign-modal .modal-tab-content {
    display: none;
    flex-direction: column;
    height: 100%;
}

.course-assign-modal .modal-tab-content.active {
    display: flex;
}

.course-assign-modal .modal-search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-bottom: 1px solid #DFE1E6;
    background: #FAFBFC;
}

.course-assign-modal .modal-search-bar .material-symbols-outlined {
    color: var(--color-text-secondary);
    font-size: 20px;
}

.course-assign-modal .modal-search-bar input {
    flex: 1;
    border: none;
    background: none;
    font-size: 14px;
    outline: none;
}

.course-assign-modal .modal-search-bar input::placeholder {
    color: #6B778C;
}

.course-assign-modal .modal-list {
    flex: 1;
    overflow-y: auto;
    max-height: 350px;
}

.course-assign-modal .modal-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    cursor: pointer;
    border-bottom: 1px solid #F4F5F7;
    transition: background-color 0.15s ease;
}

.course-assign-modal .modal-list-item:hover {
    background: var(--color-bg-hover);
}

.course-assign-modal .modal-list-item.selected {
    background: #DEEBFF;
}

.course-assign-modal .modal-list-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0052CC;
    cursor: pointer;
    flex-shrink: 0;
}

.course-assign-modal .item-content {
    flex: 1;
    min-width: 0;
}

.course-assign-modal .item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 2px;
}

.course-assign-modal .item-meta {
    display: flex;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.course-assign-modal .item-meta span {
    display: flex;
    align-items: center;
}

.course-assign-modal .item-type {
    background: #DFE1E6;
    padding: 2px 8px;
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

.course-assign-modal .item-status {
    font-size: 14px;
    color: transparent;
    font-weight: 500;
}

.course-assign-modal .item-status.assigned {
    color: #0052CC;
}

.course-assign-modal .modal-loading,
.course-assign-modal .modal-empty {
    padding: 40px 24px;
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.course-assign-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 24px;
    border-top: 1px solid #DFE1E6;
    background: #FAFBFC;
}

/* Success Banner (for assignment confirmation) */
.success-banner {
    display: none;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #E3FCEF;
    border: 1px solid #ABF5D1;
    border-radius: var(--radius-lg);
    margin: 16px 24px;
    color: #006644;
}

.success-banner .material-symbols-outlined {
    font-size: 20px;
    color: #36B37E;
}

.success-banner span:nth-child(2) {
    flex: 1;
    font-size: 14px;
}

.success-banner-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    border-radius: var(--radius-default);
}

.success-banner-close:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* =============================================
   ONBOARDING STYLES
   ============================================= */

/* Onboarding Page Layout */
body.onboarding-page {
    background: #F8F9FA;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Onboarding Header */
.onboarding-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--color-bg-card);
    border-bottom: 1px solid #DFE1E6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    z-index: 100;
}

.onboarding-header-left {
    flex: 1;
}

.onboarding-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.onboarding-logo img {
    max-width: 90px;
    height: auto;
}

.onboarding-header-center {
    flex: 2;
    display: flex;
    justify-content: center;
}

.onboarding-header-right {
    flex: 1;
}

/* Onboarding Steps Indicator - Numbered Circles */
.onboarding-steps {
    display: flex;
    align-items: center;
    gap: 0;
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
}

.onboarding-step .step-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    background: var(--color-bg-page);
    border: 2px solid var(--color-border-default);
    color: var(--color-text-secondary);
}

.onboarding-step.active .step-number {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.onboarding-step.active .step-label {
    color: var(--color-primary);
    font-weight: 600;
}

.onboarding-step.completed .step-number {
    background: #36B37E;
    border-color: #36B37E;
    color: white;
}

.onboarding-step.completed .step-number .material-symbols-outlined {
    font-size: 18px;
}

.onboarding-step.completed .step-label {
    color: #36B37E;
}

.step-connector {
    width: 40px;
    height: 2px;
    background: #DFE1E6;
}

.step-connector.completed {
    background: #36B37E;
}

/* Onboarding Main Content */
.onboarding-main {
    flex: 1;
    padding-top: 64px;
    display: flex;
    flex-direction: column;
}

.onboarding-container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 40px 24px;
}

.onboarding-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    padding: 40px;
    width: 100%;
    max-width: 560px;
}

.onboarding-card-wide {
    max-width: 900px;
}

.onboarding-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.onboarding-subtitle {
    color: var(--color-text-secondary);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* Onboarding Forms */
.onboarding-form {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.onboarding-question {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.question-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    line-height: 1.5;
}

.question-label .required {
    color: #DE350B;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.checkbox-item:hover {
    background-color: var(--color-bg-hover);
}

.checkbox-item input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--color-primary);
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-text {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
}

/* Onboarding Actions */
.onboarding-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid #F4F5F7;
}

.onboarding-actions-split {
    justify-content: space-between;
}

/* Onboarding Footer */
.onboarding-footer {
    background: var(--color-bg-card);
    border-top: 1px solid #DFE1E6;
    padding: 48px 24px;
}

.onboarding-footer .footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1120px;
    margin: 0 auto;
}

.onboarding-footer .footer-copyright {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.onboarding-footer .footer-links {
    display: flex;
    gap: 24px;
}

.onboarding-footer .footer-links a {
    font-size: 14px;
    color: var(--color-text-secondary);
    text-decoration: none;
}

.onboarding-footer .footer-links a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Jurisdictions Page Styles */
.jurisdictions-section {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.jurisdiction-form-card {
    background: #F8F9FA;
    border-radius: var(--radius-lg);
    padding: 24px;
}

.jurisdiction-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
}

.jurisdiction-form-grid .form-group {
    margin-bottom: 0;
}

.jurisdiction-form-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.jurisdiction-form-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.jurisdiction-form-actions .btn-primary .material-symbols-outlined {
    font-size: 18px;
}

/* Jurisdictions List */
.jurisdictions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 100px;
}

.jurisdictions-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: var(--color-text-secondary);
    text-align: center;
}

.jurisdictions-empty .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 12px;
    color: #DFE1E6;
}

.jurisdictions-empty p {
    font-size: 14px;
}

/* Jurisdiction Card */
.jurisdiction-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    padding: 12px 16px;
}

.jurisdiction-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.jurisdiction-card-title {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.credential-type-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-sm);
    background: #E3F2FD;
    color: #1565C0;
    position: relative;
    top: -1px;
}

.jurisdiction-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    line-height: 1.2;
}

.jurisdiction-card-details {
    display: flex;
    gap: 24px;
}

.jurisdiction-detail {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.detail-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.remove-jurisdiction {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--color-text-secondary);
    border-radius: var(--radius-default);
    display: flex;
    align-items: center;
    justify-content: center;
}

.remove-jurisdiction:hover {
    background: #FFEBE6;
    color: #DE350B;
}

.remove-jurisdiction .material-symbols-outlined {
    font-size: 20px;
}

/* Add More Link */

.add-more-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.add-more-link a:hover {
    text-decoration: underline;
}

.add-more-link .material-symbols-outlined {
    font-size: 18px;
}

/* Practice Areas Page Styles */
.practice-areas-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.practice-areas-section-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
}

.practice-areas-section-title .required {
    color: #DE350B;
    font-weight: normal;
}

.practice-areas-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

.practice-areas-column {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.practice-area-group {
    border-bottom: 1px solid #F4F5F7;
    padding-bottom: 4px;
    margin-bottom: 4px;
}

.practice-area-group:last-child {
    border-bottom: none;
}

.checkbox-parent {
    font-weight: 500;
}

.checkbox-parent .checkbox-text {
    font-weight: 500;
}

.practice-area-children {
    margin-left: 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.checkbox-child {
    padding: 6px 0;
}

.checkbox-child .checkbox-text {
    font-size: 14px;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .practice-areas-columns {
        grid-template-columns: 1fr;
    }

    .add-jurisdiction-form .form-row {
        flex-direction: column;
    }

    .add-jurisdiction-form .form-group {
        min-width: 100%;
    }

    .jurisdiction-card-details {
        flex-direction: column;
        gap: 12px;
    }

    .onboarding-header {
        padding: 0 16px;
    }

    .onboarding-steps {
        display: none;
    }

    .onboarding-card {
        padding: 24px;
    }
}

/* =============================================
   Learner Portal Styles
   ============================================= */

/* Dashboard Grid - Learner portal overrides for tighter spacing */
.dashboard-section {
    padding: 24px;
    margin-bottom: 24px;
}

.dashboard-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.dashboard-section .section-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.dashboard-section .section-link {
    font-size: 14px;
    color: #0052CC;
    text-decoration: none;
}

.dashboard-section .section-link:hover {
    text-decoration: underline;
}

/* Allow dropdowns to overflow table container on dashboard */
.dashboard-section .table-container {
    overflow: visible;
}


/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--color-bg-hover);
    border-radius: var(--radius-lg);
}

.stat-card .stat-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    color: #0052CC;
}

.stat-card .stat-icon .material-symbols-outlined {
    font-size: 24px;
}

.stat-card .stat-content {
    flex: 1;
}

.stat-card .stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.stat-card .stat-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Empty State Card */

.empty-state-card .material-symbols-outlined {
    font-size: 40px;
    color: #97A0AF;
    margin-bottom: 12px;
}

.empty-state-card h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px;
}

.empty-state-card p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
}

.empty-state-card.empty-state-small {
    padding: 24px;
}

.empty-state-card.empty-state-small .material-symbols-outlined {
    font-size: 32px;
    margin-bottom: 8px;
}

.empty-state-card.empty-state-small p {
    margin-bottom: 0;
}

/* Course Cards Grid */


.course-card-placeholder .course-card-image {
    height: 160px;
    background: #DFE1E6;
}

.course-card-placeholder .course-card-content {
    padding: 16px;
}

.course-card-placeholder .course-type-badge {
    display: inline-block;
    padding: 2px 8px;
    background: #E3F2FD;
    color: #0052CC;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--radius-default);
    margin-bottom: 8px;
}

.course-card-placeholder .course-card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin: 0 0 4px;
}

.course-card-placeholder .course-card-meta {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Filter Tabs */


.filter-tab.active {
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Filter Controls Row */


/* Progress Bar Small */

.progress-bar-small .progress-fill {
    height: 100%;
    background: #36B37E;
    border-radius: 3px;
}

.progress-text {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Certificates Grid */


.certificate-icon .material-symbols-outlined {
    font-size: 24px;
}


.certificate-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.certificate-meta .material-symbols-outlined {
    font-size: 16px;
}


.certificate-jurisdiction .material-symbols-outlined {
    font-size: 16px;
}

.certificate-actions {
    display: flex;
    align-items: flex-start;
}

/* Library Card Styles */


.library-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.library-card-placeholder .material-symbols-outlined {
    font-size: 48px;
}


.library-card-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.library-card-meta .material-symbols-outlined {
    font-size: 16px;
}


/* Library Search */


.library-search-bar .material-symbols-outlined {
    color: var(--color-text-secondary);
}

.library-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 14px;
}


.results-count {
    font-size: 14px;
    color: var(--color-text-secondary);
}


.results-controls label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Responsive Learner Dashboard */
@media (max-width: 1024px) {


    .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {

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


}

/* =============================================
   Learner Dashboard Layout
   ============================================= */

.dashboard-layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dashboard-section-full {
    width: 100%;
}

/* ===========================================
   OVERDUE ASSIGNMENTS PANEL
   Alert panel shown at top of learner dashboard when
   assignments are past their due date. Uses warning colors
   to draw attention.
   =========================================== */
.overdue-alert-section {
    background: var(--color-error-light);
    border: 1px solid var(--color-error);
    border-radius: 8px;
    padding: 20px 24px;
}

.overdue-alert-section .overdue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.overdue-header-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.overdue-header-content .overdue-icon {
    font-size: 24px;
    color: var(--color-error);
}

.overdue-alert-section .overdue-header h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-error);
    margin: 0;
}

.overdue-items-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.overdue-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: white;
    border-radius: 6px;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.overdue-item:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.overdue-item-info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.overdue-item-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.overdue-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.overdue-badge {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-error);
    background: white;
    border: 1px solid var(--color-error);
    padding: 4px 10px;
    border-radius: 4px;
}

.overdue-item-meta .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-tertiary);
}

/* Overdue count badge (admin dashboard) */
.overdue-count-badge {
    background: var(--color-error);
    color: white;
    font-size: 13px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 8px;
}

/* Overdue item user info (admin dashboard) */
.overdue-item-user {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--color-text-secondary);
    margin-left: 12px;
    flex-shrink: 0;
}

.overdue-item-user .material-symbols-outlined {
    font-size: 16px;
}

/* Pathway chip for overdue items */
.chip-pathway {
    background: #EAE6FF;
    color: #5243AA;
}

/* Dashboard Tables - ensure consistent styling */
.dashboard-layout .data-table th {
    padding: 14px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: #5E6C84;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.dashboard-layout .data-table td {
    padding: 18px 16px;
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    vertical-align: middle;
}

.dashboard-two-column {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

/* Course Progress List (Continue Learning) */


.course-progress-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.course-progress-image .material-symbols-outlined {
    font-size: 32px;
    color: #97A0AF;
}


.course-progress-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 4px 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.course-progress-info .progress-bar {
    width: 100%;
    height: 6px;
    background: var(--color-border-light);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}

.course-progress-info .progress-fill {
    height: 100%;
    background: var(--color-success);
    border-radius: 3px;
}

.course-progress-info .progress-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Course List Compact (Live & On-Demand) */


.course-list-icon.live {
    background: #FFEBE6;
    color: #DE350B;
}

.course-list-icon.on-demand {
    background: #E3F2FD;
    color: #0052CC;
}

.course-list-icon .material-symbols-outlined {
    font-size: 20px;
}


.course-list-info h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 4px 0 6px;
    line-height: 1.3;
}

.course-list-info h4 a {
    color: inherit;
    text-decoration: none;
}

.course-list-info h4 a:hover {
    color: #0052CC;
}


.course-list-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.course-list-meta .material-symbols-outlined {
    font-size: 14px;
}


.course-list-arrow .material-symbols-outlined {
    font-size: 20px;
}

/* Course Type Badges */

.course-type-badge.badge-live {
    background: #FFEBE6;
    color: #DE350B;
}

.course-type-badge.badge-on-demand {
    background: #E3F2FD;
    color: #0052CC;
}

/* Matching Jurisdictions */

.matching-jurisdictions .jurisdiction-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 3px;
    background: #E3FCEF;
    color: #006644;
}

.matching-jurisdictions .no-match {
    font-size: 14px;
    color: #97A0AF;
    font-style: italic;
}

/* Course Table */


.course-table thead th {
    text-align: left;
    padding: 12px 16px;
    font-weight: 600;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    background: var(--color-bg-hover);
    border-bottom: 1px solid #DFE1E6;
}

.course-table thead th:first-child {
    border-radius: var(--radius-lg) 0 0 0;
}

.course-table thead th:last-child {
    border-radius: 0 8px 0 0;
    text-align: right;
}

.course-table tbody td {
    padding: 16px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    vertical-align: middle;
}

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

.course-table tbody tr:hover {
    background: #FAFBFC;
}

.course-table tbody td:last-child {
    text-align: right;
}


.course-title-link {
    color: #0052CC;
    text-decoration: none;
    font-weight: 500;
    line-height: 1.4;
}

.course-title-link:hover {
    color: #0747A6;
    text-decoration: underline;
}

.date-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.date-cell .date-full {
    font-weight: 500;
    color: var(--color-text-primary);
}

.date-cell .date-time {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.text-muted {
    color: #97A0AF;
}

/* Activity Type Cell */
.activity-type-cell {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
}

.activity-type-cell .material-symbols-outlined {
    font-size: 18px;
}

.activity-type-cell.activity-type-blue {
    color: #0052CC;
}

.activity-type-cell.activity-type-green {
    color: #00875A;
}

.activity-type-cell.activity-type-gold {
    color: #B8860B;
}

.activity-type-cell.activity-type-purple {
    color: #5243AA;
}

.activity-type-cell.activity-type-gray {
    color: #6B778C;
}

/* Activity type icon colors for My Activity page */
.activity-type-cell .activity-started {
    color: #0052CC;
}

.activity-type-cell .activity-completed {
    color: #00875A;
}

.activity-type-cell .activity-certificate {
    color: #B8860B;
}

/* Course Cell in Activity Table */
.activity-table .course-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-table .course-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 400;
    color: var(--color-text-primary);
}

.activity-table .course-type {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Filter Date Inputs */
.filter-date-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.filter-date-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filter-date-group label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.filter-date-group input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

/* Calendar Button */
.calendar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 14px;
    font-weight: 500;
    color: #0052CC;
    background: #E3F2FD;
    border: none;
    border-radius: var(--radius-default);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.2s;
}

.calendar-btn:hover {
    background: #DEEBFF;
}

.calendar-btn .material-symbols-outlined {
    font-size: 14px;
}

/* Library Browse Grid */
.library-browse-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}

.library-browse-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s;
}

.library-browse-card:hover {
    border-color: #B3BAC5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.library-browse-card.library-cle {
    border-left: 4px solid #2A5488;
}

.library-browse-card.library-cpe {
    border-left: 4px solid #00875A;
}

.library-browse-card.library-skills {
    border-left: 4px solid #00B8D9;
}

.library-browse-card.library-simulations {
    border-left: 4px solid #6554C0;
}

.library-browse-card.library-microlearning {
    border-left: 4px solid #FF8B00;
}

.library-browse-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-hover);
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.library-browse-card.library-cle .library-browse-icon {
    background: #E8F0F8;
    color: var(--color-primary);
}

.library-browse-card.library-cpe .library-browse-icon {
    background: #E6F6F2;
    color: #00875A;
}

.library-browse-card.library-skills .library-browse-icon {
    background: #E6F8FB;
    color: #00B8D9;
}

.library-browse-card.library-simulations .library-browse-icon {
    background: #EEE9F8;
    color: #6554C0;
}

.library-browse-card.library-microlearning .library-browse-icon {
    background: #FFF4E5;
    color: #FF8B00;
}

.library-browse-icon .material-symbols-outlined {
    font-size: 24px;
}

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

.library-browse-info h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px;
}

.library-browse-info p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.library-browse-arrow {
    color: #97A0AF;
    font-size: 20px;
    flex-shrink: 0;
}

/* Responsive Learner Dashboard */
@media (max-width: 1024px) {
    .dashboard-two-column {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .dashboard-layout {
        gap: 16px;
    }


    .library-browse-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   Learner Settings / My Profile
   ============================================= */


/* Profile Header - scoped to learner settings */
.learner-settings-layout .settings-profile-header {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    margin-bottom: 24px;
    width: 100%;
}

.learner-settings-layout .settings-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, #2A5488 0%, #4B7BB5 100%);
    color: #fff;
    font-size: 28px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.learner-settings-layout .settings-profile-info h2 {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px;
}

.learner-settings-layout .settings-profile-title {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 12px;
}

.learner-settings-layout .settings-profile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.learner-settings-layout .settings-profile-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.learner-settings-layout .settings-profile-meta .material-symbols-outlined {
    font-size: 16px;
}

/* Settings Tabs - scoped to learner settings */
.learner-settings-layout .settings-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid #DFE1E6;
    margin-bottom: 24px;
    width: 100%;
}

.learner-settings-layout .settings-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.2s, border-color 0.2s;
}

.learner-settings-layout .settings-tab:hover {
    color: var(--color-text-primary);
}

.learner-settings-layout .settings-tab.active {
    color: #0052CC;
    border-bottom-color: #0052CC;
}

.learner-settings-layout .settings-tab .material-symbols-outlined {
    font-size: 18px;
}

/* Settings Sections - scoped to learner settings */
.learner-settings-layout .settings-section {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    padding: 24px;
    margin-bottom: 24px;
    width: 100%;
}

.learner-settings-layout .settings-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.learner-settings-layout .settings-section-header h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

/* Form Display (read-only view) - scoped to learner settings */
.learner-settings-layout .settings-form-display {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.learner-settings-layout .form-display-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.learner-settings-layout .form-display-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.learner-settings-layout .form-display-item label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.learner-settings-layout .form-display-item span {
    font-size: 14px;
    color: var(--color-text-primary);
}

/* Settings Table - scoped to learner settings */
.learner-settings-layout .settings-table {
    width: 100%;
    border-collapse: collapse;
}

.learner-settings-layout .settings-table thead th {
    text-align: left;
    padding: 12px 16px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    background: var(--color-bg-hover);
    border-bottom: 1px solid #DFE1E6;
}

.learner-settings-layout .settings-table thead th:first-child {
    border-radius: 6px 0 0 0;
}

.learner-settings-layout .settings-table thead th:last-child {
    border-radius: 0 6px 0 0;
    text-align: right;
}

.learner-settings-layout .settings-table tbody td {
    padding: 12px 16px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    font-size: 14px;
    color: var(--color-text-primary);
}

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

.learner-settings-layout .settings-table tbody td:last-child {
    text-align: right;
}

/* Credential Badge */

.credential-badge.badge-cle {
    background: #E8F0F8;
    color: var(--color-primary);
}

.credential-badge.badge-cpe {
    background: #E6F6F2;
    color: #00875A;
}

/* Practice Areas List - scoped to learner settings */
.learner-settings-layout .practice-areas-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.learner-settings-layout .practice-area-tag {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
    border-radius: 16px;
}

/* Practice Areas Grid (in modal) */

.practice-area-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.practice-area-parent {
    font-weight: 600;
}

.practice-area-children {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-left: 24px;
}

/* Icon Button */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: var(--radius-default);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.btn-icon:hover {
    background: var(--color-bg-hover);
    color: #DE350B;
}


.btn-icon .material-symbols-outlined {
    font-size: 18px;
}

/* Text colors */
.text-danger {
    color: #DE350B;
}

.text-warning {
    color: #FF8B00;
}

/* Modal description */
.modal-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 16px;
}

/* Checkbox styles */
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--color-text-primary);
}

.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0052CC;
}

/* Responsive Settings - scoped to learner settings */
@media (max-width: 768px) {

    .learner-settings-layout .settings-profile-header {
        flex-direction: column;
        text-align: center;
    }

    .learner-settings-layout .settings-profile-meta {
        justify-content: center;
    }

    .learner-settings-layout .settings-tabs {
        overflow-x: auto;
    }

    .learner-settings-layout .form-display-row {
        grid-template-columns: 1fr;
    }

}

/* Profile Info Grid (for learner profile tab) */


.profile-info-item label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.profile-info-item span {
    font-size: 14px;
    color: var(--color-text-primary);
}

/* Practice Areas Display */


@media (max-width: 768px) {
}

/* =============================================
   UNIFIED CHIP SYSTEM
   =============================================
   Consistent chip sizing across all portals.

   Size Scale:
   | Size | Font  | Padding   | Icon  | Use Case                  |
   |------|-------|-----------|-------|---------------------------|
   | xs   | 11px  | 2px 6px   | 12px  | Very dense tables         |
   | sm   | 12px  | 3px 8px   | 14px  | Standard tables (default) |
   | md   | 13px  | 4px 10px  | 16px  | Cards, less dense         |
   | lg   | 14px  | 6px 12px  | 18px  | Page headers              |

   Usage:
   - .chip (same as .chip-sm) - default for tables
   - .chip.chip-xs - very compact
   - .chip.chip-md - slightly larger
   - .chip.chip-lg - page headers, prominent display
   ============================================= */

/* Base Chip Styles (default = sm size) */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border-default);
    white-space: nowrap;
}

.chip .material-symbols-outlined {
    font-size: 14px;
}

/* Extra Small - very dense tables */
.chip-xs {
    padding: 2px 6px;
    font-size: 11px;
    gap: 3px;
    letter-spacing: 0.2px;
}

.chip-xs .material-symbols-outlined {
    font-size: 12px;
}

/* Small - standard tables (same as base) */
.chip-sm {
    padding: 3px 8px;
    font-size: 12px;
}

.chip-sm .material-symbols-outlined {
    font-size: 14px;
}

/* Medium - cards, less dense contexts */
.chip-md {
    padding: 4px 10px;
    font-size: 13px;
    gap: 5px;
}

.chip-md .material-symbols-outlined {
    font-size: 16px;
}

/* Large - page headers, prominent display */
.chip-lg {
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 6px;
    gap: 6px;
}

.chip-lg .material-symbols-outlined {
    font-size: 18px;
}

/* =============================================
   CHIP TYPE VARIANTS (Content Types)
   ============================================= */

/* CLE - Blue */
.chip-cle {
    background: #DEEBFF;
    border-color: #4C9AFF;
    color: #0747A6;
}

/* CPE - Green */
.chip-cpe {
    background: #E3FCEF;
    border-color: #57D9A3;
    color: #006644;
}

/* Microlearning - Orange */
.chip-microlearning {
    background: #FFF3E0;
    border-color: #FFB74D;
    color: #E65100;
}

/* Skills - Purple */
.chip-skills {
    background: #F3E5F5;
    border-color: #CE93D8;
    color: #7B1FA2;
}

/* Simulation - Teal */
.chip-simulation,

/* =============================================
   JURISDICTION DISPLAY (Browse Table)
   ============================================= */

.jurisdiction-cell {
    min-width: 160px;
}

.jurisdiction-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
}

.jurisdiction-tag {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    background: #F4F5F7;
    border-radius: 4px;
    font-family: 'Nunito', sans-serif;
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--color-text-secondary);
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.jurisdiction-tag.user-match {
    background: #E3FCEF;
    color: #006644;
}

.jurisdiction-tag.user-match .material-symbols-outlined {
    font-size: var(--font-size-sm);
    color: #22c55e;
}

/* Grey jurisdiction chip button */
.jurisdiction-chip-grey {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 6px;
    background: #F4F5F7;
    border: none;
    border-radius: 4px;
    font-family: 'Nunito', sans-serif;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
    cursor: pointer;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    transition: background-color 0.15s ease;
}

.jurisdiction-chip-grey:hover {
    background: #EBECF0;
    color: var(--color-text-primary);
}


.jurisdiction-modal-list .jurisdiction-tag {
    margin: 0;
}

/* =============================================
   CHIP ATTRIBUTE VARIANTS
   ============================================= */

/* Level - Purple */
.chip-level {
    background: #F3E8FF;
    border-color: #C4B5FD;
    color: #7C3AED;
}

/* Practice Area - Amber */
.chip-practice-area {
    background: #FEF3C7;
    border-color: #FCD34D;
    color: #B45309;
}

/* Duration - Gray with icon */
.chip-duration {
    background: var(--color-bg-hover);
    border-color: var(--color-border-default);
    color: var(--color-text-secondary);
}

/* Live - Red with pulse animation */

.chip-live .material-symbols-outlined {
    font-size: var(--font-size-sm);
    animation: chip-pulse 2s ease-in-out infinite;
}

.chip-lg.chip-live .material-symbols-outlined {
    font-size: var(--font-size-base);
}

@keyframes chip-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* On-Demand - Blue */

/* =============================================
   CHIP STATUS VARIANTS
   ============================================= */

/* Active/Connected/Yes/Done - Green */
.chip-status-active {
    background: #E3FCEF;
    border-color: #57D9A3;
    color: #006644;
}

/* Inactive/No - Red/Gray */
.chip-status-inactive {
    background: #FFEBEE;
    border-color: #EF9A9A;
    color: #C62828;
}

/* Pending/Override - Amber */
.chip-status-pending {
    background: #FFF8E1;
    border-color: #FFD54F;
    color: #F57F17;
}

/* Trial - Blue */
.chip-status-trial {
    background: #E3F2FD;
    border-color: #64B5F6;
    color: #1565C0;
}

/* Suspended - Orange */
.chip-status-suspended {
    background: #FFF3E0;
    border-color: #FFB74D;
    color: #E65100;
}

/* Cancelled - Dark gray */
.chip-status-cancelled {
    background: #F5F5F5;
    border-color: #BDBDBD;
    color: #616161;
}

/* Secondary - Blue (for secondary items) */
.chip-status-secondary {
    background: #E3F2FD;
    border-color: #64B5F6;
    color: #1565C0;
}

/* BARBRI - Primary brand color */
.chip-barbri {
    background: #E8EEF5;
    border-color: #2A5488;
    color: #2A5488;
}

/* On Leave - Amber */
.chip-status-on-leave {
    background: #FFF8E1;
    border-color: #FFD54F;
    color: #FF8B00;
}

/* Terminated - Red */
.chip-status-terminated {
    background: #FFEBEE;
    border-color: #EF9A9A;
    color: #DE350B;
}

/* Draft - Amber */
.chip-status-draft {
    background: #FFF8E1;
    border-color: #FFD54F;
    color: #F57F17;
}

/* Archived - Gray */
.chip-status-archived {
    background: #ECEFF1;
    border-color: #B0BEC5;
    color: #546E7A;
}

/* Published - Green (same as active) */

/* Unpublished - Gray (same as archived) */

/* In Progress */

/* Completed */
.chip-status-completed {
    background: #E3FCEF;
    border-color: #57D9A3;
    color: #006644;
}

/* Not Started */

/* Past Due - Red/Orange warning */
.chip-past-due {
    background: #FFEBE6;
    border-color: #FF5630;
    color: #DE350B;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.chip-past-due .material-symbols-outlined {
    font-size: var(--font-size-sm);
}

.chip-sm.chip-past-due {
    padding: 2px 8px;
    font-size: var(--font-size-sm);
}

.chip-sm.chip-past-due .material-symbols-outlined {
    font-size: var(--font-size-sm);
}

/* =============================================
   CONTRACTS SECTION STYLES
   ============================================= */

.contract-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #FFF8E6;
    border-radius: var(--radius-default);
    margin-bottom: 16px;
    font-size: 14px;
    color: #974F0C;
}

.contract-warning .material-symbols-outlined {
    font-size: 18px;
    color: #FF8B00;
}

.contracts-list {
    display: flex;
    flex-direction: column;
}

.contract-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #F4F5F7;
}

.contract-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contract-item:first-child {
    padding-top: 0;
}

.contract-main {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.contract-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contract-type {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-text-primary);
}

.contract-dates {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.contract-dates .material-symbols-outlined {
    font-size: 14px;
}

.contract-notes {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: 2px;
}

.contract-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.contract-item:hover .contract-actions {
    opacity: 1;
}

.contract-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
}

.contract-action-btn .material-symbols-outlined {
    font-size: 18px;
}

.contract-action-btn:hover {
    background: #F4F5F7;
    color: var(--color-text-primary);
}

.contract-action-btn.delete:hover {
    background: #FFEBE6;
    color: #DE350B;
}

/* Status with contract indicator (organizations table) */
.status-with-contract {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* =============================================
   LEGACY SUPPORT - course-type-chip
   (Keeping for backwards compatibility)
   ============================================= */

.course-type-chip.chip-cle {
    background: #DEEBFF;
    color: #0747A6;
    border-color: #4C9AFF;
}

.course-type-chip.chip-cpe {
    background: #E3FCEF;
    color: #006644;
    border-color: #57D9A3;
}

.course-type-chip.chip-microlearning {
    background: #FFF3E0;
    color: #E65100;
    border-color: #FFB74D;
}

.course-type-chip.chip-skills {
    background: #F3E5F5;
    color: #7B1FA2;
    border-color: #CE93D8;
}

.course-type-chip.chip-simulation {
    background: #E0F7FA;
    color: #00838F;
    border-color: #4DD0E1;
}

.course-type-chip.chip-other {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
    border-color: var(--color-border-default);
}

/* Course Actions Dropdown */
.course-actions-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.course-actions-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    border-radius: var(--radius-default);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.course-actions-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.course-actions-btn .material-symbols-outlined {
    font-size: 20px;
}

.course-actions-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: max-content;
    z-index: 100;
    overflow: hidden;
}

.course-actions-dropdown.show {
    display: block;
}

.course-actions-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    font-size: 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    transition: background 0.15s;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
}

.course-actions-dropdown .dropdown-item:hover {
    background: var(--color-bg-hover);
}

.course-actions-dropdown .dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* =============================================
   Accreditation UI Components
   ============================================= */


.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    color: #0052CC;
    background: transparent;
    border: none;
    border-radius: var(--radius-default);
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s;
}

.btn-text:hover {
    background: #DEEBFF;
}

.btn-text .material-symbols-outlined {
    font-size: 18px;
}

/* Accreditation Summary Bar */


/* Accreditation Jurisdictions Grid */
.accred-jurisdictions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 16px;
}

.accred-jurisdiction-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.accred-jurisdiction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #FAFBFC;
    border-bottom: 1px solid #DFE1E6;
}

.accred-jurisdiction-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.accred-jurisdiction-count {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Accreditation Items */
.accred-current-list,
.accred-history-list {
    padding: 12px 16px;
}

.accred-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 0;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.accred-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.accred-item:first-child {
    padding-top: 0;
}

.accred-item-content {
    flex: 1;
    min-width: 0;
}

.accred-item-main {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.accred-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.accred-item-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.accred-item:hover .accred-item-actions {
    opacity: 1;
}

.accred-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: var(--color-text-tertiary);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}

.accred-action-btn:hover {
    background: var(--color-background-tertiary);
    color: var(--color-text-primary);
}

.accred-action-btn.delete:hover {
    background: var(--color-status-error-background);
    color: var(--color-status-error);
}

.accred-action-btn .material-symbols-outlined {
    font-size: 18px;
}

.accred-item-historical {
    opacity: 0.7;
}

.accred-item-historical:hover {
    opacity: 1;
}

.accred-credit-type {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.accred-credits {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.accred-status {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 4px;
}

.accred-status.status-success {
    background: #E3FCEF;
    color: #006644;
}

.accred-status.status-warning {
    background: #FFFAE6;
    color: #FF8B00;
}

.accred-status.status-danger {
    background: #FFEBE6;
    color: #DE350B;
}

.accred-status.status-info {
    background: #DEEBFF;
    color: #0052CC;
}

.accred-status.status-muted {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.accred-approval,
.accred-dates {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.accred-no-current {
    padding: 12px 16px;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-style: italic;
    margin: 0;
}

/* Accreditation History Toggle */
.accred-history-details {
    border-top: 1px solid #DFE1E6;
}

.accred-history-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: background 0.15s;
    list-style: none;
}

.accred-history-toggle::-webkit-details-marker {
    display: none;
}

.accred-history-toggle:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.accred-history-toggle .material-symbols-outlined {
    font-size: 18px;
}

.accred-history-details[open] .accred-history-toggle {
    border-bottom: 1px solid #DFE1E6;
}

.accred-history-list {
    background: #FAFBFC;
}

/* Accreditation Type Badge */
.accred-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 3px;
}

.accred-type-badge.accred-cle {
    background: #E3FCEF;
    color: #006644;
}

.accred-type-badge.accred-cpe {
    background: #DEEBFF;
    color: #0052CC;
}

/* =============================================
   PRACTICE AREAS STYLES
   ============================================= */


.practice-area-chip.primary {
    background: #DEEBFF;
    border-color: #4C9AFF;
    color: #0052CC;
}

.practice-area-chip .chip-badge {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    background: #0052CC;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
}

/* Practice Areas Selector Modal */
.practice-areas-selector {
    max-height: 400px;
    overflow-y: auto;
}

.pa-category-group {
    margin-bottom: 20px;
}

.pa-category-group:last-child {
    margin-bottom: 0;
}

.pa-category-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
    padding-bottom: 6px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.pa-options {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pa-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: #FAFBFC;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.pa-option:hover {
    background: var(--color-bg-hover);
    border-color: #6B778C;
}

.pa-option.selected {
    background: #DEEBFF;
    border-color: #4C9AFF;
}

.pa-option input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.pa-option-name {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-primary);
}

.pa-primary-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    cursor: pointer;
    color: #6B778C;
    transition: all 0.15s ease;
}

.pa-primary-btn:hover {
    background: var(--color-bg-active);
    color: var(--color-text-secondary);
}

.pa-primary-btn.is-primary {
    color: #FFAB00;
}

.pa-primary-btn.is-primary:hover {
    background: #FFF4E5;
}

.pa-primary-btn .material-symbols-outlined {
    font-size: 18px;
}

.modal-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 20px;
}

.modal-medium {
    max-width: 600px;
}

/* =============================================
   EDIT PAGE FORM STYLES
   ============================================= */

/* Page header for edit pages */
.page-header {
    padding: 48px 0 32px;
}

.page-header h1 {
    font-size: 40px;
    font-weight: 600;
    color: var(--color-primary);
    letter-spacing: -0.5px;
    margin: 0 0 4px 0;
}

.page-header .page-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

.page-header .back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--color-text-secondary);
    text-decoration: none;
    margin-bottom: 16px;
}

.page-header .back-link:hover {
    color: var(--color-primary);
}

.page-header .back-link .material-symbols-outlined {
    font-size: 18px;
}

.edit-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
}

.edit-form .form-section {
    background: transparent;
    border: none;
    padding: 0;
    margin-bottom: 32px;
}

.edit-form .form-section:last-of-type {
    margin-bottom: 0;
}

.edit-form .form-section-title {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: none;
}

.form-card-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    padding: 16px 24px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    margin: 0;
}

.form-card-body {
    padding: 24px;
}

/* Form card header with title and action button */
.form-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.form-card-header .form-card-title {
    padding: 0;
    border-bottom: none;
}

/* ============================================
   Live Event Rows (Course Creation)
   ============================================ */
.live-event-row {
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}

.live-event-row:last-child {
    margin-bottom: 0;
}

.live-event-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light);
}

.live-event-number {
    font-weight: 600;
    color: var(--color-text-primary);
}

.live-event-row .form-row {
    margin-bottom: 12px;
}

.live-event-row .form-row:last-child {
    margin-bottom: 0;
}

.live-event-row .form-group {
    margin-bottom: 0;
}

/* Make inputs in live event rows fill their container */
.live-event-row .form-group .form-input,
.live-event-row .form-group input[type="datetime-local"],
.live-event-row .form-group input[type="url"],
.live-event-row .form-group input[type="text"],
.live-event-row .form-group input[type="number"],
.live-event-row .form-group select,
.live-event-row .form-group .flatpickr-input {
    width: 100%;
    box-sizing: border-box;
}

/* Resource Link Rows (for adding links during course creation) */
.resource-link-row {
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-md);
    padding: 16px;
    margin-bottom: 16px;
}

.resource-link-row:last-child {
    margin-bottom: 0;
}

.resource-link-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-border-light);
}

.resource-link-number {
    font-weight: 600;
    color: var(--color-text-primary);
}

.resource-link-row .form-row {
    margin-bottom: 0;
}

.resource-link-row .form-group {
    margin-bottom: 0;
}

/* Empty state inline (for no events message) */
.empty-state-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    color: var(--color-text-secondary);
    background: var(--color-bg-page);
    border: 1px dashed var(--color-border-default);
    border-radius: var(--radius-md);
}

.empty-state-inline .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-text-muted);
}

/* Ghost danger button for remove actions */
.btn-icon.btn-danger-ghost {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    padding: 4px;
    border-radius: var(--radius-default);
    cursor: pointer;
    transition: var(--transition-colors);
}

.btn-icon.btn-danger-ghost:hover {
    background: var(--color-error-light);
    color: var(--color-error);
}

/* ============================================
   Search & Select Component
   Used for practice areas, skills, etc.
   ============================================ */
.search-select-container {
    position: relative;
}

.search-select-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.search-select-input-wrapper .search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    font-size: 20px;
    pointer-events: none;
}

/* Higher specificity to override .form-group input[type="text"] */
.search-select-input,
.form-group .search-select-input,
.form-group input[type="text"].search-select-input {
    width: 100%;
    padding: 10px 12px 10px 40px; /* Left padding for search icon */
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.search-select-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
}

.search-select-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000; /* Higher z-index to escape overflow clipping */
    background: white;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    max-height: 240px;
    overflow-y: auto;
    margin-top: 4px;
}

.search-select-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-bottom: 1px solid var(--color-border-light);
}

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

.search-select-item:hover {
    background: var(--color-bg-hover);
}

.search-select-item .item-name {
    font-weight: 500;
    color: var(--color-text);
}

.search-select-item .item-meta {
    font-size: 14px;
    color: var(--color-text-muted);
}

.search-select-loading,
.search-select-empty {
    padding: 12px 16px;
    color: var(--color-text-muted);
    font-size: 14px;
    text-align: center;
}

.search-select-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

/* Selected tags/chips - styled to match app chip pattern */
.search-select-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 12px;
    background: #E8EEF4; /* Light blue-grey matching app chips */
    border: 1px solid #D0D9E3;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.search-select-tag .tag-text {
    color: inherit;
}

.search-select-tag .tag-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: background-color 0.15s, color 0.15s;
    margin-left: 2px;
}

.search-select-tag .tag-remove:hover {
    background: rgba(212, 68, 0, 0.1);
    color: var(--color-danger);
}

.search-select-tag .tag-remove .material-symbols-outlined {
    font-size: 16px;
}

/* Form cards containing search-select need overflow visible for dropdown */
.form-card:has(.search-select-container) {
    overflow: visible;
}

.form-card:has(.search-select-container) .form-card-body {
    overflow: visible;
}

/* Fallback class for browsers without :has() support */
.form-card.has-search-select,
.form-card--overflow-visible {
    overflow: visible;
}

.form-card.has-search-select .form-card-body,
.form-card--overflow-visible .form-card-body {
    overflow: visible;
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 16px 0;
}

/* =============================================
   COURSE DELIVERY PAGE
   ============================================= */

.course-delivery-page .content-header {
    padding: 24px 32px 0;
}

.course-delivery-page .content-body {
    padding: 24px 32px 48px;
}

/* Pathway Context Bar - shows when course is part of assigned pathway(s) */
.pathway-context-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--color-text-secondary);
    background: var(--color-surface-selected, #E5ECF9);
    border-radius: 12px 0 12px 0; /* Teardrop corners */
}

.pathway-context-bar .pathway-context-content {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    flex: 1;
}

.pathway-context-bar .pathway-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.pathway-context-bar .pathway-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: var(--transition-colors);
}

.pathway-context-bar .pathway-nav-link:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--color-text-primary);
}

.pathway-context-bar .pathway-nav-link .material-symbols-outlined {
    font-size: 18px;
}

.pathway-context-bar .pathway-nav-label {
    white-space: nowrap;
}

.pathway-context-bar > .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-primary);
}

/* Inline pathway context (for certificate page header) */
.pathway-context {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.pathway-context > .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-text-tertiary);
}

.pathway-context-text {
    display: inline;
}

.pathway-context-link,
.pathway-context-bar .pathway-context-link {
    color: var(--color-link);
    font-weight: 500;
    text-decoration: none;
}

.pathway-context-link:hover,
.pathway-context-bar .pathway-context-link:hover {
    color: var(--color-link-hover);
}

.pathway-context-position {
    color: var(--color-text-tertiary);
}

.course-delivery-layout.has-player {
    grid-template-columns: 1fr 320px;
}

/* Course Header Info */

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

.course-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

.course-badge.badge-live {
    background: #FEE2E2;
    color: #DC2626;
}

.course-badge.badge-live .material-symbols-outlined {
    font-size: 14px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.course-badge.badge-date {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* Course Type Badges */


/* Course Page Title - for course detail pages (uses heading font) */
.course-page-title {
    font-family: 'Bitter', serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 24px;
    color: var(--color-text-primary);
}

/* Purchase/External Actions */
.course-purchase-actions,

.btn-launch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Video Player Container */
.course-player-container {
    margin-bottom: 32px;
}

.video-player-wrapper {
    position: relative;
    background: #000;
    border-radius: 8px;
}

/* Only use aspect-ratio for non-Wistia and non-Storyline players */
.video-player-wrapper:not(:has(.wistia-embed-container)):not(:has(.storyline-embed-wrapper)) {
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.video-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Storyline Module Embed */
.storyline-embed-wrapper {
    width: 100%;
    height: calc(100vw * 0.5); /* Responsive height based on viewport width */
    max-height: 680px;
    min-height: 450px;
    background: #282828;
    border-radius: 8px;
    overflow: hidden;
}

.storyline-player {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* Ensure video-player-wrapper fills space for Storyline */
.video-player-wrapper:has(.storyline-embed-wrapper) {
    background: transparent;
    width: 100%;
}

.video-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #fff;
    gap: 16px;
}

.video-placeholder .material-symbols-outlined {
    font-size: 64px;
    opacity: 0.5;
}

.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
}

.video-play-btn,
.video-fullscreen-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s;
}

.video-play-btn:hover,
.video-fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.video-progress-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    cursor: pointer;
    position: relative;
}

.video-progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--color-accent);
    border-radius: 2px;
    transition: width 0.1s;
}

.video-progress-buffered {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

.video-time {
    font-size: 14px;
    color: #fff;
    white-space: nowrap;
}

/* Wistia Embed Container */

.wistia-embed-container .wistia_responsive_padding {
    border-radius: 8px;
    overflow: hidden;
}

.wistia_embed {
    border-radius: 8px;
}

.wistia_embed {
    width: 100%;
    height: 100%;
}

/* Read-only playbar for CLE/CPE courses - shows progress but prevents scrubbing */
.wistia_embed[data-readonly-playbar="true"] .w-bottom-bar-lower,
.wistia_embed[data-readonly-playbar="true"] .w-playbar-wrapper,
.wistia_embed[data-readonly-playbar="true"] .w-scrubbing-container {
    pointer-events: none !important;
    cursor: default !important;
}

/* Visually indicate the playbar is read-only */
.wistia_embed[data-readonly-playbar="true"] .w-playbar-wrapper {
    opacity: 0.85;
}

/* Progress Timeline */
.progress-timeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 16px 24px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: 8px;
    margin-top: 16px;
    margin-bottom: 32px;
}

/* Separator between video/timeline and content */
.course-player-section {
    padding-bottom: 32px;
    margin-bottom: 32px;
}

.timeline-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-right: 20px;
    white-space: nowrap;
}

.timeline-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.timeline-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--color-border-default);
    border: 2px solid var(--color-border-default);
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.timeline-dot .material-symbols-outlined {
    font-size: 14px;
    color: white;
    opacity: 0;
    transition: opacity 0.2s;
}

.timeline-step.completed .timeline-dot {
    background: var(--color-success);
    border-color: var(--color-success);
}

.timeline-step.completed .timeline-dot .material-symbols-outlined {
    opacity: 1;
}

.timeline-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.timeline-step.completed .timeline-label {
    color: var(--color-text-secondary);
}

/* Timeline steps are display-only (no clicking to prevent cheating) */

.timeline-connector {
    flex: 1;
    height: 2px;
    background: var(--color-border-light);
    min-width: 40px;
    margin: 0 8px;
    margin-bottom: 24px;
}

.timeline-connector.completed {
    background: var(--color-success);
}

.progress-timeline .btn-certificate {
    margin-left: auto;
    flex-shrink: 0;
}

/* Ensure space between last timeline step and certificate button */
.progress-timeline .timeline-step:last-of-type {
    margin-right: 24px;
}

.progress-timeline .btn-certificate.btn-primary,
.progress-timeline .btn-certificate.btn-secondary {
    padding: 8px 16px;
    font-size: 14px;
}

/* Legacy Progress Panel - keep for compatibility */


.progress-circle svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}


.checkpoint {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.checkpoint .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-border-default);
}

.checkpoint.completed .material-symbols-outlined {
    color: var(--color-success);
}

.checkpoint.completed {
    color: var(--color-text-primary);
}

.btn-certificate {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
}

/* Course Sections */
.course-section {
    margin-bottom: 32px;
}

.course-section h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.course-description {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* Presenters Grid */

.presenter-card {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: 8px;
}


.presenter-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.presenter-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-active);
}

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

.presenter-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.presenter-title {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 2px;
}


.presenter-bio {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


.presenter-expand-bio .material-symbols-outlined {
    font-size: 18px;
}

/* Course Sidebar */
.course-sidebar-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.course-sidebar-card {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: 8px;
    padding: 20px;
}

.course-sidebar-card h3 {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: var(--color-text-primary);
}

/* No Access Message */

.no-access-message .material-symbols-outlined {
    font-size: 48px;
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.no-access-message h3 {
    font-size: 16px;
    margin-bottom: 8px;
}

.no-access-message p {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Credit Information */

.credit-jurisdiction-select label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 6px;
    color: var(--color-text-secondary);
}

.credit-jurisdiction-select select {
    width: 100%;
    padding: 8px 12px;
    font-size: 14px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
}

.jurisdiction-credits {
    margin-top: 16px;
}

.credit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.credit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-default);
    font-size: 14px;
}


.credit-status {
    font-size: 14px;
    padding: 2px 8px;
    border-radius: 4px;
}

.credit-status.status-approved {
    background: #D1FAE5;
    color: #065F46;
}

.credit-status.status-available {
    background: #DBEAFE;
    color: #1E40AF;
}

.credit-status.status-self_apply {
    background: #FEF3C7;
    color: #92400E;
}

.no-credits {
    font-size: 14px;
    color: var(--color-text-muted);
    font-style: italic;
}

/* Live Date/Time */

.live-datetime .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-accent);
}

.live-date {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}


/* Collapsible Sidebar Cards */
.course-sidebar-card.collapsible .sidebar-card-content {
    display: none;
}

.course-sidebar-card.collapsible.expanded .sidebar-card-content {
    display: block;
    margin-top: 16px;
}


.sidebar-card-toggle h3 {
    margin: 0;
}

.sidebar-card-toggle .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-text-secondary);
    transition: transform 0.2s;
}

.course-sidebar-card.expanded .sidebar-card-toggle .material-symbols-outlined {
    transform: rotate(180deg);
}

/* Course Outline */
.course-outline-list {
    margin: 0;
    padding-left: 24px;
}

.course-outline-list li {
    padding: 8px 0;
    font-size: 14px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.course-outline-list li:last-child {
    border-bottom: none;
}

.outline-title {
    color: var(--color-text-primary);
}

.outline-duration {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-left: 8px;
}

/* Benefits List */

.benefits-list li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.benefits-list .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-success);
    flex-shrink: 0;
    margin-top: 2px;
}

/* NASBA Details */
.nasba-details p {
    font-size: 14px;
    margin-bottom: 8px;
    color: var(--color-text-secondary);
}

.nasba-details strong {
    color: var(--color-text-primary);
}

/* Attendance Verification Modal */
.attendance-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.attendance-modal.active {
    display: flex;
}

.attendance-modal-content {
    background: var(--color-bg-card);
    padding: 32px 40px 40px;
    border-radius: 12px;
    text-align: center;
    max-width: 480px;
    width: 90%;
    animation: attendanceModalSlideIn 0.3s ease;
}

@keyframes attendanceModalSlideIn {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.attendance-modal h2 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 24px;
    color: var(--color-text-primary);
}

.attendance-timer-box {
    background: #F4F5F7;
    border-radius: 8px;
    padding: 32px 48px;
    margin-bottom: 16px;
}

.attendance-timer {
    font-size: 48px;
    font-weight: 600;
    color: var(--color-text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -1px;
}

.attendance-instruction {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
    line-height: 1.5;
}


/* Legacy checkpoint modal classes for backwards compatibility */
.checkpoint-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
}

.checkpoint-modal.active {
    display: flex;
}

/* Responsive */
@media (max-width: 1200px) {
}

@media (max-width: 992px) {

    .course-sidebar-column {
        order: -1;
    }


}

@media (max-width: 768px) {
    .course-delivery-page .content-body {
        padding: 16px;
    }

    .pathway-context-bar {
        margin-bottom: 12px;
        padding: 10px 12px;
        font-size: 13px;
        border-radius: 8px 0 8px 0; /* Smaller teardrop on mobile */
    }

    .pathway-context-bar .pathway-nav {
        gap: 8px;
    }

    .pathway-context-bar .pathway-nav-link {
        padding: 4px 8px;
        font-size: 12px;
    }

    .pathway-context-bar .pathway-nav-link .material-symbols-outlined {
        font-size: 16px;
    }

    .pathway-context {
        font-size: 12px;
    }

    .course-title {
        font-size: 24px;
    }

}

/* =============================================
   COURSE DELIVERY PAGE - UPDATED LAYOUT
   ============================================= */

/* Full-width section at top */
.course-full-width-section {
    margin-bottom: 32px;
}

/* Badges row - spans full width, wraps */
.course-badges-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

/* Override chip-lg to be smaller on course detail page */
.course-badges-row .chip.chip-lg {
    padding: 4px 10px;
    font-size: 13px;
}

.course-badges-row .chip.chip-lg .material-symbols-outlined {
    font-size: 14px;
}

.course-badges-row .library-badge,
.course-badges-row .course-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
}

.course-badge.badge-format {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
}

.course-badge.badge-duration {
    background: var(--color-bg-secondary);
    color: var(--color-text-secondary);
    border: var(--border-width-thin) solid var(--color-border-light);
}

.course-badge.badge-duration .material-symbols-outlined {
    font-size: 16px;
}

.course-badge.badge-level {
    background: #F3E8FF;
    color: #7C3AED;
}

.course-badge.badge-practice-area {
    background: #FEF3C7;
    color: #B45309;
}

/* ===========================================
   COURSE AVAILABILITY OPTIONS
   Toggle for courses with both live and on-demand options.
   Allows users to choose how they want to engage.
   =========================================== */

.course-availability-options {
    margin-bottom: 24px;
}

.availability-toggle {
    display: inline-flex;
    background: var(--color-bg-hover);
    border-radius: 8px;
    padding: 4px;
    gap: 4px;
}

.availability-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.availability-option:hover {
    color: var(--color-text-primary);
    background: rgba(255, 255, 255, 0.5);
}

.availability-option.active {
    background: var(--color-white);
    color: var(--color-barbri-blue);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.availability-option .material-symbols-outlined {
    font-size: 20px;
}

/* Live view section - shown when 'Attend Live' is selected */
.course-live-view {
    display: none;
}

.course-live-view.active {
    display: block;
}

/* On-demand view section - shown when 'Watch On-Demand' is selected */
.course-ondemand-view {
    display: block;
}

.course-ondemand-view.hidden {
    display: none;
}

/* Live banner - prominent for live courses */
.live-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 24px;
    background: linear-gradient(135deg, #E8F0F8 0%, #DEEBFF 100%);
    border: 1px solid #B3D4FF;
    border-radius: 8px;
    margin-bottom: 24px;
}

.live-banner .material-symbols-outlined {
    font-size: 28px;
    color: var(--color-primary);
}

.live-banner-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.live-banner-date {
    font-weight: 600;
    color: #1E3D66;
    font-size: 16px;
}

.live-banner-time {
    color: #2A5488;
    font-size: 14px;
}

/* Additional Live Events - For courses with multiple upcoming sessions */
.additional-live-events {
    margin-top: -16px;
    margin-bottom: 24px;
}

.additional-events-details {
    background: var(--color-background-secondary);
    border: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px;
    border-top: none;
}

.additional-events-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    font-weight: 500;
}

.additional-events-summary:hover {
    background: var(--color-background-hover);
}

.additional-events-summary .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.additional-events-details[open] .additional-events-summary .material-symbols-outlined {
    transform: rotate(45deg);
}

.additional-events-list {
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.additional-event-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--color-background-primary);
    border-radius: var(--radius-default);
}

.additional-event-item .event-date {
    font-weight: 500;
    color: var(--color-text-primary);
}

.additional-event-item .event-time {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* Calendar Dropdown */
.calendar-dropdown {
    position: relative;
}

.calendar-dropdown .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.calendar-dropdown .btn-secondary .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s ease;
}

.calendar-dropdown.open .btn-secondary .material-symbols-outlined {
    transform: rotate(180deg);
}

.calendar-dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 200px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.calendar-dropdown.open .calendar-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.calendar-dropdown-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    transition: background 0.15s ease;
}

.calendar-dropdown-menu .dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.calendar-dropdown-menu .dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

.calendar-dropdown-menu .dropdown-item:hover {
    background: var(--color-bg-hover);
}

.calendar-dropdown-menu .dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

/* Dropdown divider inside calendar dropdown */
.calendar-dropdown-menu .dropdown-divider {
    height: 1px;
    background: var(--color-border-default);
    margin: 4px 0;
}

/* Button styled as dropdown item */
.calendar-dropdown-menu button.dropdown-item {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

/* Email Invite Preview Section */
.invite-preview {
    background: var(--color-bg-subtle);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    padding: 16px;
    margin-top: 16px;
}

.invite-preview-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 12px 0;
}

.invite-preview-content {
    background: var(--color-bg-card);
    border-radius: 6px;
    padding: 16px;
}

.invite-preview-content p {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: var(--color-text-primary);
}

.invite-preview-content p:last-child {
    margin-bottom: 0;
}

.invite-preview-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-primary);
    word-break: break-all;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-default);
}

.invite-preview-link .material-symbols-outlined {
    font-size: 16px;
    flex-shrink: 0;
}

/* Certificate Action Banner */

.certificate-action-banner .btn-primary {
    flex-shrink: 0;
}

/* Access banners */
.course-access-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.course-access-banner.no-access {
    background: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-default);
}

.course-access-banner.no-access .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-text-muted);
}

.access-banner-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.access-banner-content strong {
    font-size: 14px;
    color: var(--color-text-primary);
}

.access-banner-content span {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.course-access-banner.external-access {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-light);
}

.external-note {
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Two-column layout below video */
.course-details-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
}

/* Remove old layout styles that conflict */

.course-delivery-layout.has-player {
    grid-template-columns: 1fr;
}

/* Course subsections */
.course-subsection {
    margin-bottom: 24px;
}

.course-subsection:last-child {
    margin-bottom: 0;
}

.course-subsection h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.course-intro-text {
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.course-description-text {
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-text-secondary);
}

/* Presenter list - cleaner styling */
.presenters-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.presenter-item {
    display: flex;
    gap: 16px;
    padding: 16px;
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: 8px;
}

.presenter-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-active);
    display: flex;
    align-items: center;
    justify-content: center;
}

.presenter-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.presenter-avatar .presenter-initials {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.presenter-details {
    flex: 1;
    min-width: 0;
}

.presenter-details h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.presenter-details h4 a {
    color: var(--color-accent);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.presenter-details h4 a:hover {
    text-decoration: underline;
}

.presenter-details h4 a .material-symbols-outlined {
    font-size: 14px;
}

.presenter-role {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 8px;
}

.presenter-details .presenter-bio {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}

/* Materials list */
.materials-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.material-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-default);
    text-decoration: none;
    color: var(--color-text-primary);
    font-size: 14px;
    transition: background 0.15s;
}

.material-link:hover {
    background: var(--color-bg-active);
}

.material-link .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-secondary);
}

.material-link span:nth-child(2) {
    flex: 1;
}

.material-link .download-icon {
    opacity: 0;
    transition: opacity 0.15s;
}

.material-link:hover .download-icon {
    opacity: 1;
}

/* NASBA Details as definition list */
.nasba-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 16px;
    font-size: 14px;
}

.nasba-details dt {
    font-weight: 500;
    color: var(--color-text-secondary);
}

.nasba-details dd {
    margin: 0;
    color: var(--color-text-primary);
}

/* NASBA Card Sections */
.nasba-card .nasba-details {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.nasba-objectives {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.nasba-objectives h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.nasba-objectives p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
    margin: 0;
}

.nasba-sponsor,
.nasba-guarantee {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.nasba-sponsor:last-child,
.nasba-guarantee:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.nasba-logo,
.guarantee-logo {
    width: 48px;
    height: auto;
    flex-shrink: 0;
}

.nasba-sponsor p,
.nasba-guarantee p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
}

.nasba-sponsor a,
.nasba-guarantee a {
    color: var(--color-accent);
    text-decoration: none;
}

.nasba-sponsor a:hover,
.nasba-guarantee a:hover {
    text-decoration: underline;
}

/* =========================================
   Handouts Management (Super Admin)
   ========================================= */

.handouts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.handout-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-default);
}

.handout-item .drag-handle {
    cursor: grab;
    color: var(--color-text-muted);
    font-size: 20px;
}

.handout-item .drag-handle:hover {
    color: var(--color-text-secondary);
}

.handout-item .handout-icon {
    color: var(--color-text-secondary);
    font-size: 20px;
}

.handout-item .handout-title {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-primary);
}

.handout-type-badge {
    font-size: 14px;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--color-bg-subtle);
    color: var(--color-text-muted);
    font-weight: 600;
}

.handout-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: all 0.15s;
}

.btn-icon:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.btn-icon.delete-handout-btn:hover {
    background: #FFEBE6;
    color: #BF2600;
}

.empty-state-text {
    color: var(--color-text-muted);
    font-size: 14px;
    font-style: italic;
    padding: 16px 0;
}

/* Learning Objectives Content */
.learning-objectives-content {
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-secondary);
}

.learning-objectives-content p {
    margin: 0 0 12px;
}

.learning-objectives-content p:last-child {
    margin-bottom: 0;
}

.learning-objectives-content ul,
.learning-objectives-content ol {
    margin: 0 0 12px;
    padding-left: 24px;
}

.learning-objectives-content li {
    margin-bottom: 6px;
}

.nasba-objectives .learning-objectives-content {
    font-size: 14px;
}

/* Sidebar card updates - remove collapsible by default */
.course-sidebar-card {
    padding: 20px;
}

.course-sidebar-card h3 {
    margin-bottom: 16px;
}

/* Outline list updates */
.course-outline-list {
    margin: 0;
    padding-left: 20px;
}

.course-outline-list li {
    padding: 6px 0;
    border-bottom: none;
    font-size: 14px;
}

/* Responsive for new layout */
@media (max-width: 1024px) {
    .course-details-layout {
        grid-template-columns: 1fr;
    }

    .course-sidebar-column {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .live-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .presenter-item {
        flex-direction: column;
        text-align: center;
    }

    .presenter-avatar {
        margin: 0 auto;
    }
}

/* View Credits Button */
.view-credits-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-family: var(--font-family-primary);
}

.view-credits-btn:hover {
    background: var(--color-bg-active);
    border-color: var(--color-border-default);
}

.view-credits-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

.view-credits-text strong {
    font-size: 14px;
    color: var(--color-text-primary);
}

.view-credits-text span {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.view-credits-btn .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-secondary);
}

/* Credits Modal */
#credits-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 1;
    visibility: visible;
}

#credits-modal.active {
    display: flex;
}

#credits-modal .modal-content {
    background: var(--color-bg-card);
    border-radius: 12px;
    max-width: 600px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: modalSlideIn 0.2s ease;
    transform: none;
}

#credits-modal .modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

#credits-modal .modal-header h2 {
    font-size: 18px;
    margin: 0;
}

#credits-modal .modal-close-btn {
    position: static; /* Override absolute positioning from generic rule */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    cursor: pointer;
    color: var(--color-text-secondary);
    transition: background 0.15s;
    flex-shrink: 0;
}

#credits-modal .modal-close-btn:hover {
    background: var(--color-bg-hover);
}

#credits-modal .modal-body {
    padding: 24px;
    overflow-y: auto;
}


/* Credit Info Primary Display (sidebar) */
.credit-info-primary {
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-default);
    margin-bottom: 16px;
}

.credit-info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.credit-jurisdiction {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.credit-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    border: 1px solid;
}

.credit-status-badge .material-symbols-outlined {
    font-size: 14px;
}

.credit-status-badge.status-available,
.credit-status-badge.status-approved {
    background: #E6F4EA;
    border-color: #34A853;
    color: #1E7E34;
}

.credit-status-badge.status-pending {
    background: #FEF7E0;
    border-color: #F9AB00;
    color: #B06D00;
}

.credit-info-details {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.credit-info-row {
    display: flex;
    gap: 16px;
}

.credit-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
    min-width: 60px;
}

.credit-value {
    font-size: 14px;
    color: var(--color-text-primary);
}

/* Credits Modal */
#credits-modal .modal-content {
    max-width: 800px;
}

.credits-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border-radius: 24px;
    margin-bottom: 20px;
}

.credits-search .material-symbols-outlined {
    color: var(--color-text-muted);
    font-size: 20px;
}

.credits-search input {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 14px;
    font-family: var(--font-family-primary);
    color: var(--color-text-primary);
    outline: none;
}

.credits-search input::placeholder {
    color: var(--color-text-muted);
}

.credits-search .search-clear-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: var(--color-bg-tertiary);
    border-radius: 50%;
    cursor: pointer;
    color: var(--color-text-muted);
    flex-shrink: 0;
}

.credits-search .search-clear-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.credits-search .search-clear-btn .material-symbols-outlined {
    font-size: 16px;
}

.credits-jurisdiction-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.credits-jurisdiction-card {
    padding: 20px;
    background: #F4F5F7;
    border-radius: var(--radius-default);
    border: 1px solid transparent;
}

.credits-jurisdiction-card.hidden {
    display: none;
}

/* User's jurisdiction - highlighted in green */
.credits-jurisdiction-card.user-jurisdiction {
    background: #E3FCEF;
    border-color: #ABF5D1;
}

.credits-jurisdiction-card.user-jurisdiction .jurisdiction-name {
    color: #006644;
}

.credits-jurisdiction-card.user-jurisdiction .user-jur-icon {
    color: #22c55e;
    font-size: 18px;
    vertical-align: middle;
    margin-right: 4px;
}

/* Non-user jurisdiction - greyed out */
.credits-jurisdiction-card:not(.user-jurisdiction) {
    opacity: 0.7;
}

.credits-jurisdiction-card:not(.user-jurisdiction) .jurisdiction-name {
    color: var(--color-text-secondary);
}

.jurisdiction-name {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 12px;
}

.jurisdiction-details {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    gap: 16px;
}

.jurisdiction-col {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.col-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.col-value {
    font-size: 14px;
    color: var(--color-text-primary);
}

@media (max-width: 640px) {
    .jurisdiction-details {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

.credit-row-name span {
    font-size: 14px;
    color: var(--color-text-muted);
}


/* Transcript Section */
.course-section-transcript h2 {
    margin-bottom: 8px;
    padding-bottom: 8px;
}

.transcript-container {
    margin-top: 0;
}

.transcript-preview {
    display: block;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    white-space: pre-line;
    margin: 0;
    padding: 0;
}

.transcript-full {
    display: none !important;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-secondary);
    white-space: pre-line;
    margin-top: 16px;
    padding-top: 16px;
    border-top: var(--border-width-thin) dashed var(--color-border-light);
}

.transcript-full.expanded {
    display: block !important;
}

button.transcript-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 16px;
    padding: 8px 16px;
    width: fit-content;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #ffffff;
    font-size: 14px;
    color: #1f2937;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

button.transcript-toggle:hover {
    background-color: #f3f4f6;
    border-color: #9ca3af;
}

.transcript-toggle .material-symbols-outlined {
    font-size: 18px;
    transition: transform 0.2s;
}

.transcript-toggle.expanded .material-symbols-outlined {
    transform: rotate(180deg);
}

/* Bookmark/Save Course Button */
.bookmark-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-default);
    cursor: pointer;
    color: var(--color-text-muted);
    transition: color 0.15s, background 0.15s;
}

.bookmark-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.bookmark-btn.saved {
    color: var(--color-primary);
}

.bookmark-btn.saved .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

.bookmark-btn.saved:hover {
    color: var(--color-primary-dark);
}

.bookmark-btn .material-symbols-outlined {
    font-size: 20px;
}

/* Larger bookmark for course detail page */

.bookmark-btn-large .material-symbols-outlined {
    font-size: 28px;
}

/* Course title row with bookmark */
.course-title-row {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 24px;
}

.course-title-row .course-title {
    flex: 1;
    font-family: 'Bitter', serif;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin-bottom: 0;
    color: var(--color-primary);
}

.course-title-row .bookmark-btn {
    flex-shrink: 0;
    margin-top: 4px;
}

/* Save for later button */
.btn-save-course {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.btn-save-course .material-symbols-outlined {
    font-size: 20px;
    font-variation-settings: 'FILL' 0;
    transition: font-variation-settings 0.2s ease;
}

.btn-save-course.saved .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
    color: var(--color-primary);
}

.btn-save-course.saved {
    color: var(--color-primary);
    border-color: var(--color-primary);
}

/* =============================================
   Certificate Claim & Confirmation Pages
   ============================================= */

/* Meta info row for certificate pages */

.certificate-meta-info strong {
    color: var(--color-text-primary);
}

/* Survey Ratings */
.survey-ratings {
    margin-top: 16px;
}

.survey-prompt {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.rating-row {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 12px 0;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.rating-row label {
    min-width: 140px;
    font-size: 14px;
    color: var(--color-text-primary);
}

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

.rating-row label .required {
    color: var(--color-danger);
    margin-left: 2px;
}

.rating-row.error {
    background: rgba(239, 68, 68, 0.05);
    margin: 0 -16px;
    padding: 12px 16px;
    border-radius: var(--radius-default);
}

/* Star Rating */
.star-rating {
    display: flex;
    gap: 4px;
}

.star-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: var(--color-border-default);
    transition: color 0.15s, transform 0.15s;
}

.star-btn .material-symbols-outlined {
    font-size: 24px;
}

.star-btn:hover,
.star-btn.hover {
    color: #FCD34D;
    transform: scale(1.1);
}

.star-btn.active {
    color: #F59E0B;
}

.star-btn.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1;
}

/* Survey Feedback */
.survey-feedback {
    margin-top: 24px;
}

.survey-feedback label {
    display: block;
    font-size: 14px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.survey-feedback textarea {
    width: 100%;
    padding: 12px 16px;
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: var(--font-family-primary);
    font-size: 14px;
    resize: vertical;
    min-height: 100px;
}

.survey-feedback textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* CLE Reporting Section */

.jurisdiction-credits-list {
    margin-bottom: 16px;
}

.jurisdiction-credit-row {
    display: flex;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

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

.jurisdiction-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-right: 8px;
}

.jurisdiction-credits {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.jurisdiction-credits .not-approved,
.jurisdiction-credits .not-approved-text {
    color: var(--color-text-muted);
    font-style: italic;
}

.jurisdiction-credit-row.not-approved {
    opacity: 0.7;
}

.no-jurisdictions {
    font-size: 14px;
    color: var(--color-text-muted);
    font-style: italic;
    margin-bottom: 16px;
}

/* Reporting Instructions */
.reporting-instructions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reporting-instruction-item h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 4px;
}

.reporting-instruction-item p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
}

.reporting-instruction-item p a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Certificate Actions */
.certificate-actions {
    margin-top: 32px;
    text-align: center;
}

.btn-large {
    padding: 14px 32px;
    font-size: 16px;
}

/* =============================================
   Certificate Confirmation Page
   ============================================= */


.certificate-success-header h1 {
    font-family: var(--font-family-heading);
    font-size: 28px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.certificate-success-header .success-check {
    color: var(--color-success);
}


/* Reporting Style Legend */
.reporting-style-legend {
    list-style: none;
    padding: 0;
    margin: 16px 0 0 0;
}

.reporting-style-legend li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary);
    padding: 8px 0;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.reporting-style-legend li:last-child {
    border-bottom: none;
}

.reporting-style-legend .jurisdiction-name {
    min-width: auto;
}

/* Certificates Table */


.certificates-table th {
    text-align: left;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-muted);
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.certificates-table td {
    padding: 16px 12px;
    font-size: 14px;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
    vertical-align: middle;
}

.certificates-table .jurisdiction-cell {
    font-weight: 500;
    color: var(--color-text-primary);
}

.certificates-table .credits-cell {
    color: var(--color-text-secondary);
}

.certificates-table .reporting-cell {
    color: var(--color-text-muted);
}


.certificate-actions-group .btn-small {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

/* Completion Success Banner */
.completion-success {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.completion-success .success-icon {
    font-size: 32px;
    color: var(--color-success);
    font-variation-settings: 'FILL' 1;
}

.completion-success .success-text h3 {
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
}

.completion-success .success-text p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Certificate List (new layout) */
.certificates-list {
    display: flex;
    flex-direction: column;
}

.certificate-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

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

.certificate-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.certificate-info .jurisdiction-name {
    font-weight: 600;
    margin: 0;
}

.certificate-info .jurisdiction-credits {
    color: var(--color-text-secondary);
    margin: 0;
}

.certificate-row .certificate-actions {
    display: flex;
    gap: 8px;
    margin-top: 0;
    text-align: left;
}

.certificate-row .certificate-actions .btn-small {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 110px;
}

.certificate-actions-group .btn-small .material-symbols-outlined {
    font-size: 16px;
}

/* Loading spinner for generating certificate */
.rotating {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Footer Actions */

.certificate-footer-actions .btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Pathway Next Up Card (Certificate page) */
.pathway-next-up {
    background: var(--color-surface-selected, #E5ECF9);
    border-radius: var(--border-radius-lg);
    padding: 20px 24px;
}

.pathway-next-up .form-section-title {
    margin-bottom: 12px;
}

.next-course-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--color-bg-primary);
    border-radius: var(--border-radius-md);
    padding: 16px 20px;
}

.next-course-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.next-course-label {
    font-size: 12px;
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.next-course-title {
    font-family: var(--font-family-primary);
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
}

.next-course-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}

.next-course-meta .meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--color-text-secondary);
}

.next-course-meta .meta-item .material-symbols-outlined {
    font-size: 14px;
}

@media (max-width: 600px) {
    .next-course-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .next-course-card .btn-primary {
        width: 100%;
        justify-content: center;
    }
}

/* Transcript Tab (Admin) */
.transcript-content {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 24px;
    max-height: 600px;
    overflow-y: auto;
}

.transcript-text {
    font-family: inherit;
    font-size: 14px;
    line-height: 1.8;
    color: var(--color-text);
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
}

/* Transcript expandable section */
.transcript-details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-secondary);
}

.transcript-summary {
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    font-weight: 500;
    color: var(--color-primary);
    list-style: none;
}

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

.transcript-summary::before {
    content: '▶ ';
    font-size: 10px;
    margin-right: var(--space-2);
}

.transcript-details[open] .transcript-summary::before {
    content: '▼ ';
}

.transcript-details .transcript-text {
    padding: var(--space-4);
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
    max-height: 400px;
    overflow-y: auto;
}

/* Chip list (inline flow of chips) */
.chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Button styled as link */
.btn-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--color-primary);
    font-size: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: underline;
}

.btn-link:hover {
    color: var(--color-primary-dark);
}

/* Custom Video Play Overlay */
.video-play-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10;
    transition: opacity 0.3s ease;
}

.video-play-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Start button - big circle with play icon only */
.video-start-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28%;
    aspect-ratio: 1;
    max-width: 160px;
    padding: 0;
    background: var(--color-primary);
    color: #fff !important;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.video-start-btn:hover {
    background: var(--color-primary);
    color: #fff !important;
    transform: scale(1.05);
    text-decoration: none;
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.25);
}

.video-start-btn:focus {
    outline: 2px solid #fff;
    outline-offset: 4px;
}

.video-start-btn .material-symbols-outlined {
    font-size: 72px;
    color: #fff;
    font-variation-settings: 'FILL' 1;
}

/* Hide text in start state */
.video-start-btn .btn-text {
    display: none;
}

/* Resume button - pill shape with text */
.video-start-btn.is-resume {
    width: auto;
    aspect-ratio: auto;
    max-width: none;
    padding: 16px 32px;
    border-radius: 8px;
    gap: 12px;
}

.video-start-btn.is-resume .material-symbols-outlined {
    font-size: 28px;
    font-variation-settings: 'FILL' 0;
}

.video-start-btn.is-resume .btn-text,
.video-start-btn.is-resume .btn-text:hover,
.video-start-btn.is-resume .btn-text:focus,
.video-start-btn.is-resume .btn-text:active {
    display: inline;
    white-space: nowrap;
    color: #fff !important;
    background: none !important;
    text-decoration: none !important;
    font-family: 'Nunito', sans-serif;
    font-size: 18px;
    font-weight: 600;
}


/* =============================================
   LEARNER ASSIGNMENTS PAGE
   ============================================= */


.filter-tab.active {
    color: #0052CC;
    background: #DEEBFF;
}

.filter-tab .count {
    font-size: 14px;
    font-weight: 700;
    padding: 2px 6px;
    background: var(--color-bg-hover);
    border-radius: 10px;
}

.filter-tab.active .count {
    background: rgba(0, 82, 204, 0.2);
}


.filter-tab-overdue.active {
    color: #DE350B;
    background: #FFEBE6;
}

.filter-tab-overdue .count {
    background: #FFEBE6;
    color: #DE350B;
}

/* Assignments List */


.assignment-card.assignment-overdue {
    border-color: #FFBDAD;
    background: #FFFBFA;
}


.assignment-icon.icon-course {
    background: linear-gradient(135deg, #0052CC 0%, #0747A6 100%);
    color: #FFFFFF;
}

.assignment-icon.icon-pathway {
    background: linear-gradient(135deg, #6554C0 0%, #5243AA 100%);
    color: #FFFFFF;
}

.assignment-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.assignment-icon .material-symbols-outlined {
    font-size: 28px;
}


.assignment-type {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}


.progress-bar-sm {
    flex: 1;
    max-width: 200px;
    height: 6px;
    background: var(--color-bg-hover);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill-sm {
    height: 100%;
    background: #0052CC;
    border-radius: 3px;
    transition: width 0.3s ease;
}

.progress-text-sm {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    min-width: 32px;
}


.status-complete {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #006644;
}

.status-complete .material-symbols-outlined {
    font-size: 20px;
}

/* Due date badges */
.due-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.due-overdue {
    background: #FFEBE6;
    color: #DE350B;
}

.due-today {
    background: #FFF0B3;
    color: #974F0C;
}

.due-soon {
    background: #DEEBFF;
    color: #0052CC;
}

.due-normal {
    background: var(--color-bg-hover);
    color: var(--color-text-secondary);
}

.due-completed {
    background: #E3FCEF;
    color: #006644;
}

/* Pathway chip */
.chip-pathway {
    background: #EAE6FF;
    color: #5243AA;
    border-color: #EAE6FF;
}

.chip-pathway .material-symbols-outlined {
    font-size: 14px;
}

/* Assignment table styling */


.progress-cell {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-cell .progress-bar-sm {
    width: 80px;
    flex-shrink: 0;
}


/* =============================================
   COURSE ASSIGN PAGE
   Profile-style layout for assignment pages
   ============================================= */

/* Course icon in header (instead of user avatar) */

.course-assign-icon .material-symbols-outlined {
    font-size: 40px;
}

/* Tab count badge */
.tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #0052CC;
    background: #DEEBFF;
    border-radius: 10px;
}

.user-profile-tab.active .tab-count {
    background: #0052CC;
    color: #FFFFFF;
}

/* Tab header row with title and actions */


/* Results info text */

/* Simple assignment list */

/* Assignment row - checkbox style */


.assign-row.is-assigned {
    background: #F0F7FF;
}

.assign-row.is-assigned:hover {
    background: #E3EFFC;
}

.assign-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #0052CC;
    cursor: pointer;
}


/* Type chips for groups */

.assign-type-chip.department {
    background: #E3FCEF;
    color: #006644;
}

.assign-type-chip.team {
    background: #DEEBFF;
    color: #0052CC;
}

.assign-type-chip.custom {
    background: #F3E8FF;
    color: #7C3AED;
}

/* Role chips for users */

.role-chip.role-org_owner {
    background: #FFF3E0;
    color: #E65100;
}

.role-chip.role-org_manager {
    background: #E3FCEF;
    color: #006644;
}

.role-chip.role-learner {
    background: #DEEBFF;
    color: #0052CC;
}

.role-chip.role-super_admin {
    background: #F3E8FF;
    color: #7C3AED;
}

/* Simple empty state */

.empty-state-simple a {
    color: #0052CC;
    text-decoration: none;
}

.empty-state-simple a:hover {
    text-decoration: underline;
}

/* Assign Course Meta */

/* Bottom action buttons - outside container */


/* =============================================
   TOAST NOTIFICATIONS
   ============================================= */
.toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.toast {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: #1B2A4E;
    color: white;
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    font-size: 14px;
    font-weight: 500;
    min-width: 280px;
    max-width: 420px;
    animation: toast-in 0.3s ease-out;
}

.toast.toast-success {
    background: #1B7F4B;
}

.toast.toast-error {
    background: #C41E3A;
}

.toast .material-symbols-outlined {
    font-size: 20px;
    flex-shrink: 0;
}

.toast-message {
    flex: 1;
}

.toast-close {
    background: transparent;
    border: none;
    color: white;
    opacity: 0.7;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-default);
    transition: opacity 0.2s;
}

.toast-close:hover {
    opacity: 1;
}

.toast.hiding {
    animation: toast-out 0.3s ease-in forwards;
}

@keyframes toast-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes toast-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(16px);
    }
}

/* ============================================
   Accessibility: Reduced Motion Support
   WCAG 2.3.3 - Animation from Interactions
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================
   Accessibility: Touch Target Sizes
   WCAG 2.5.5 - Target Size (Enhanced)
   Only applies to touch devices (coarse pointer)
   Minimum 44x44 CSS pixels for touch targets
   ============================================ */
@media (pointer: coarse) {
    /* Buttons - ensure minimum touch target */
    .btn-primary,
    .btn-secondary,
    .btn-destructive,
    .btn-small {
        min-height: 44px;
        min-width: 44px;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* Icon-only buttons */
    .action-btn,
    .table-menu-btn,
    .course-actions-btn,
    .actions-menu-toggle,
    .drawer-close-btn,
    .modal-close-btn,
    .search-clear-btn,
    .filter-clear-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Table action menus */
    .table-actions-menu .action-btn,
    .actions-menu-container .actions-menu-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    /* Dropdown menu items */
    .table-dropdown-menu a,
    .table-dropdown-menu button,
    .actions-dropdown a,
    .actions-dropdown button,
    .dropdown-menu-item {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Checkboxes and radio buttons */
    input[type="checkbox"],
    input[type="radio"] {
        min-height: 24px;
        min-width: 24px;
    }

    /* Checkbox/radio containers with labels */
    .filter-option,
    .checkbox-group label,
    .radio-group label {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Form inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    input[type="date"],
    select,
    textarea {
        min-height: 44px;
    }

    /* Navigation links */
    .nav-link,
    .nav-item a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* Tab buttons */
    .detail-tab,
    .tab-btn {
        min-height: 44px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    /* Pagination buttons */
    .pagination-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Chip buttons and links */
    .chip[onclick],
    .chip[role="button"],
    a.chip {
        min-height: 32px;
        padding: 8px 12px;
    }

    /* Bookmark and save buttons */
    .bookmark-btn,
    .save-btn {
        min-height: 44px;
        min-width: 44px;
    }

    /* Close buttons */
    .close-btn,
    .toast-close {
        min-height: 44px;
        min-width: 44px;
    }

    /* Back links */
    .back-link {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Star rating buttons */
    .star-btn,

    /* Expand/collapse toggles */
    .filter-section-header,
    .accordion-header,

    /* Table row clickable areas */

    /* Sidebar navigation */
}

/* =============================================
   Pathway Builder Layout
   ============================================= */

.pathway-builder-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
}

.pathway-builder-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pathway-builder-main {
    min-height: 300px;
}

.builder-panel {
    background: var(--color-bg-card);
    border: var(--border-width-thin) solid var(--color-border-default);
    border-radius: var(--teardrop);
    padding: 24px;
}

.builder-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.builder-panel-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 16px 0;
}

.builder-panel-header .builder-panel-title {
    margin-bottom: 0;
}

.builder-panel-actions {
    display: flex;
    gap: 12px;
}

.builder-panel-actions .btn-secondary,
.builder-panel-actions .btn-primary {
    flex: 1;
}

/* Course builder specific */
.pathway-builder-main .course-search-container {
    margin-bottom: 16px;
}

.pathway-builder-main .selected-courses-list {
    min-height: 200px;
    background: var(--color-bg-hover);
    border-radius: var(--radius-default);
    padding: 16px;
}

.empty-courses-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--color-text-tertiary);
}

.empty-courses-state .material-symbols-outlined {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.5;
}

.empty-courses-state p {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-secondary);
    margin: 0 0 4px 0;
}

.empty-courses-state .empty-courses-hint {
    font-size: 14px;
    color: var(--color-text-tertiary);
}

/* Selected courses summary in header */
.builder-panel-header .selected-courses-summary {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
    background: none;
    border: none;
}

.builder-panel-header .courses-count,
.builder-panel-header .courses-duration {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.builder-panel-header .courses-duration {
    display: flex;
    align-items: center;
    gap: 4px;
}

.builder-panel-header .courses-duration .material-symbols-outlined {
    font-size: 16px;
}

/* Pathway builder actions - bottom aligned */
.pathway-builder-layout .builder-panel-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-start;
    padding-top: 8px;
}

.pathway-builder-layout .builder-panel-actions .btn-secondary,
.pathway-builder-layout .builder-panel-actions .btn-primary {
    flex: none;
}

/* =============================================
   CPE ASSESSMENTS - Checkpoint & Exam Management
   ============================================= */

.cpe-checkpoints-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cpe-checkpoint-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-default);
    padding: 20px;
}

.cpe-checkpoint-card.cpe-checkpoint-empty {
    border-style: dashed;
    background: var(--color-bg-page);
}

.checkpoint-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.checkpoint-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    color: var(--color-text-primary);
}

.checkpoint-timestamp {
    background: var(--color-bg-secondary);
    padding: 4px 12px;
    border-radius: var(--radius-full);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.checkpoint-header .btn-secondary {
    margin-left: auto;
}

.checkpoint-questions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkpoint-question {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
}

.checkpoint-question .question-number {
    font-weight: 600;
    color: var(--color-primary);
    flex-shrink: 0;
}

.checkpoint-question .question-text {
    color: var(--color-text-primary);
    flex: 1;
}

/* Assessment Question Display (Checkpoints & Exam) */
.assessment-question-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.assessment-question-item:first-child {
    padding-top: 0;
}

.assessment-question-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.assessment-question-header {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
}

.assessment-question-header .question-number {
    font-weight: 600;
    color: var(--color-primary);
    flex-shrink: 0;
}

.assessment-question-header .question-text {
    flex: 1;
    color: var(--color-text-primary);
    font-size: 14px;
    line-height: 1.5;
}

.assessment-question-header .btn-secondary {
    flex-shrink: 0;
    margin-left: auto;
}

.assessment-options-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-left: 28px;
}

.assessment-option {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary);
    padding: 6px 10px;
    background: var(--color-bg-surface);
    border-radius: var(--radius-sm);
}

.assessment-option.is-correct {
    background: #E3FCEF;
    color: #006644;
}

.assessment-option .option-letter {
    font-weight: 600;
    min-width: 20px;
}

.assessment-option .option-text {
    flex: 1;
}

.assessment-option .correct-icon {
    font-size: 16px;
    color: #00875A;
}

/* Exam Questions List */
.cpe-exam-questions-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cpe-exam-questions-list .cpe-exam-question-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-default);
    padding: 20px;
}

.cpe-exam-questions-list .assessment-question-item {
    padding: 0;
    border-bottom: none;
}

.exam-question-count {
    margin-top: 16px;
    font-size: 14px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Drag-and-Drop Question Reordering */
.assessment-question-item.draggable {
    cursor: grab;
    position: relative;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
    padding-left: 28px;
    border-radius: var(--radius-sm);
}

.assessment-question-item.draggable:hover {
    background-color: var(--color-bg-hover);
}

.assessment-question-item.draggable .drag-handle {
    position: absolute;
    left: 0;
    top: 16px;
    color: var(--color-text-tertiary);
    font-size: 18px;
    opacity: 0;
    transition: opacity 0.15s ease;
    cursor: grab;
}

.assessment-question-item.draggable:hover .drag-handle {
    opacity: 1;
}

.assessment-question-item.dragging {
    opacity: 0.5;
    background-color: var(--color-bg-surface);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    cursor: grabbing;
}

.assessment-question-item.drag-over {
    border-top: 2px solid var(--color-primary);
    padding-top: 14px;
}

.cpe-exam-question-card.draggable {
    cursor: grab;
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.cpe-exam-question-card.draggable:hover {
    background-color: var(--color-bg-hover);
}

.cpe-exam-question-card.dragging {
    opacity: 0.5;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    cursor: grabbing;
    transform: scale(1.02);
}

.cpe-exam-question-card.drag-over {
    border-top: 3px solid var(--color-primary);
    margin-top: -3px;
}

/* Drag handle for exam question cards */
.exam-question-drag-handle {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-tertiary);
    font-size: 20px;
    margin-right: 8px;
    cursor: grab;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.cpe-exam-question-card:hover .exam-question-drag-handle {
    opacity: 1;
}

/* Answer Options in Modal */
.answer-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.answer-option {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.answer-option input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.answer-option input[type="text"] {
    flex: 1;
}

/* Timestamp Input Group */
.timestamp-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timestamp-input-group span {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Modal Section Title */
.modal-section-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 24px 0 12px 0;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

.modal-section-title:first-of-type {
    margin-top: 16px;
    padding-top: 0;
    border-top: none;
}

/* Section Description */
.section-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

/* Icon-only button */
.btn-icon {
    padding: 4px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-default);
    cursor: pointer;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-icon:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

.btn-icon .material-symbols-outlined {
    font-size: 20px;
}

/* Flexible Checkpoint Question Blocks (Admin Modal) */
.checkpoint-question-block {
    background: var(--color-bg-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-default);
    padding: 16px;
    margin-bottom: 16px;
}

.checkpoint-question-block:last-child {
    margin-bottom: 0;
}

.question-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.question-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.options-section {
    margin-top: 16px;
}

.options-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.options-header-row label {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.options-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Option row layout - main row + explanation textarea */
.option-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    margin-bottom: 12px;
}

/* Main option row: radio + text input + delete button */
.option-row .option-main {
    display: flex;
    align-items: center;
    gap: 12px;
}

.option-row input[type="radio"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.option-row .option-text-input {
    flex: 1;
}

.option-row .remove-option-btn,
.option-row .remove-exam-option-btn {
    flex-shrink: 0;
    color: var(--color-text-tertiary);
}

.option-row .remove-option-btn:hover,
.option-row .remove-exam-option-btn:hover {
    color: var(--color-danger);
}

/* Explanation textarea section */
.option-row .option-explanation {
    margin-left: 30px; /* Align with text input (radio width + gap) */
}

.option-row .explanation-input {
    width: 100%;
    font-size: 14px;
    color: var(--color-text-secondary);
    resize: vertical;
}

.option-row .explanation-input::placeholder {
    font-style: italic;
}

.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* ===================================
   CPE Quiz Modals (Learner)
   =================================== */

/* CPE Timeline (extends progress-timeline for 3 checkpoints + exam) */
.progress-timeline.cpe-timeline {
    gap: 4px; /* Tighter spacing for more steps */
}

.progress-timeline.cpe-timeline .timeline-label {
    font-size: 14px;
}

.progress-timeline.cpe-timeline .timeline-connector {
    width: 16px;
}

/* Base modal styles for all CPE modals */
.cpe-quiz-modal,
.cpe-exam-modal,
.cpe-results-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}

.cpe-quiz-modal.active,
.cpe-exam-modal.active,
.cpe-results-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Quiz Modal Content */
.cpe-quiz-modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Exam Modal Content (wider) */
.cpe-exam-modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 800px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Results Modal Content (smaller, centered) */
.cpe-results-modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    padding: 40px 32px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Modal Headers */
.cpe-quiz-header,
.cpe-exam-header {
    padding: 24px 24px 16px;
    border-bottom: 1px solid var(--color-border);
}

.cpe-quiz-title,
.cpe-exam-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}

.cpe-quiz-instruction,
.cpe-exam-instruction {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Quiz Questions Body */
.cpe-quiz-body,
.cpe-exam-body {
    padding: 24px;
}

/* Question Card (inside modal) */
.cpe-question-card {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border);
}

.cpe-question-card:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.cpe-question-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.cpe-question-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    background: #F4F5F7;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
}

.cpe-question-status {
    font-size: 14px;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 4px;
    flex-shrink: 0;
    margin-left: auto;
}

.cpe-question-status.correct {
    background: #E3FCEF;
    color: #006644;
}

.cpe-question-status.incorrect {
    background: #FFEBE6;
    color: #BF2600;
}

.cpe-question-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    line-height: 1.5;
    margin-bottom: 16px;
}

/* Answer Options (Learner view) */
.cpe-answer-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cpe-answer-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.cpe-answer-option:hover {
    background: #F8F9FA;
    border-color: #C1C7D0;
}

.cpe-answer-option.selected {
    background: #E9F2FF;
    border-color: #0052CC;
}

.cpe-answer-option.correct {
    background: #E3FCEF;
    border-color: #00875A;
}

.cpe-answer-option.incorrect {
    background: #FFEBE6;
    border-color: #DE350B;
}

.cpe-answer-option.disabled {
    pointer-events: none;
    opacity: 0.7;
}

/* Previous attempt styling for retakes */
.cpe-answer-option.previous-correct {
    border-color: #00875A;
    background: #E3FCEF;
}

.cpe-answer-option.previous-incorrect {
    border-color: #DE350B;
    background: #FFEBE6;
}

.previous-answer-badge {
    margin-left: auto;
    padding: 2px 8px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    white-space: nowrap;
}

.previous-answer-badge.correct {
    color: #006644;
    background: #ABF5D1;
}

.previous-answer-badge.incorrect {
    color: #BF2600;
    background: #FFBDAD;
}

.cpe-previous-explanation {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 8px 0 0 30px;
    padding: 12px;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    line-height: 1.5;
}

.cpe-previous-explanation.correct {
    background: #E3FCEF;
    border-left: 3px solid #00875A;
    color: #006644;
}

.cpe-previous-explanation.incorrect {
    background: #FFEBE6;
    border-left: 3px solid #DE350B;
    color: #BF2600;
}

.cpe-previous-explanation .material-symbols-outlined {
    font-size: 18px;
    flex-shrink: 0;
}

.cpe-previous-explanation.correct .material-symbols-outlined {
    color: #00875A;
}

.cpe-previous-explanation.incorrect .material-symbols-outlined {
    color: #DE350B;
}

.cpe-previous-attempt-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #F4F5F7;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-bottom: 16px;
}

.cpe-previous-attempt-banner .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-text-secondary);
}

.cpe-previous-attempt-banner .previous-attempt-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cpe-previous-attempt-banner .previous-attempt-info strong {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.cpe-previous-attempt-banner .previous-attempt-info span {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.cpe-answer-option input[type="radio"] {
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
    cursor: pointer;
}

.cpe-answer-option-text {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.5;
}

/* Answer explanation - shown after submission when explanation exists */
.cpe-answer-explanation {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 12px;
    padding: 12px;
    background: rgba(0, 82, 204, 0.08);
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-secondary);
    width: 100%;
}

.cpe-answer-explanation .material-symbols-outlined {
    font-size: 18px;
    color: #0052CC;
    flex-shrink: 0;
    margin-top: 1px;
}

/* Explanation styling when answer is correct */
.cpe-answer-option.correct .cpe-answer-explanation {
    background: rgba(0, 135, 90, 0.08);
}

.cpe-answer-option.correct .cpe-answer-explanation .material-symbols-outlined {
    color: #00875A;
}

/* Explanation styling when answer is incorrect */
.cpe-answer-option.incorrect .cpe-answer-explanation {
    background: rgba(222, 53, 11, 0.08);
}

.cpe-answer-option.incorrect .cpe-answer-explanation .material-symbols-outlined {
    color: #DE350B;
}

/* Quiz Footer - Sticky at bottom while scrolling */
.cpe-quiz-footer,
.cpe-exam-footer {
    position: sticky;
    bottom: 0;
    padding: 16px 24px;
    border-top: 1px solid var(--color-border);
    background: white;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    z-index: 10;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

.cpe-quiz-footer .btn-primary,
.cpe-exam-footer .btn-primary {
    min-width: 140px;
}

.cpe-quiz-feedback {
    flex: 1;
    font-size: 14px;
    margin: 0;
    background: transparent;
    border: none;
    box-shadow: none;
}

.cpe-quiz-feedback.error {
    color: #DE350B;
}

.cpe-quiz-feedback.success {
    color: #006644;
}

.cpe-exam-progress {
    flex: 1;
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Results Modal */
.cpe-results-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.cpe-results-icon.passed {
    background: #E3FCEF;
}

.cpe-results-icon.failed {
    background: #FFEBE6;
}

.cpe-results-icon .material-symbols-outlined {
    font-size: 40px;
}

.cpe-results-icon.passed .material-symbols-outlined {
    color: #006644;
}

.cpe-results-icon.failed .material-symbols-outlined {
    color: #DE350B;
}

.cpe-results-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 24px 0;
}

.cpe-results-title.passed {
    color: #006644;
}

.cpe-results-score {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    margin-bottom: 4px;
}

.cpe-results-correct {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-text-primary);
}

.cpe-results-divider {
    font-size: 32px;
    font-weight: 400;
    color: var(--color-text-secondary);
}

.cpe-results-total {
    font-size: 32px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.cpe-results-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 16px 0;
}

.cpe-results-message {
    font-size: 16px;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}

.cpe-results-attempts {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 24px 0;
}

#cpe-results-action {
    min-width: 180px;
}

/* Loading state for questions */
.cpe-quiz-loading,
.cpe-exam-loading {
    text-align: center;
    padding: 40px;
    color: var(--color-text-secondary);
}

.cpe-quiz-loading .material-symbols-outlined,
.cpe-exam-loading .material-symbols-outlined {
    font-size: 32px;
    animation: spin 1s linear infinite;
    margin-bottom: 12px;
    display: block;
}

/* =============================================
   CPE Exam Inline (Claim Certificate Page)
   ============================================= */

.cpe-exam-inline {
    margin-bottom: 32px;
}

.cpe-exam-questions-container {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-default);
    padding: 24px;
    margin-bottom: 24px;
}

.cpe-exam-questions-container .loading-spinner {
    text-align: center;
    padding: 48px;
    color: var(--color-text-secondary);
}

.cpe-exam-questions-container .loading-spinner .material-symbols-outlined {
    font-size: 32px;
    margin-bottom: 8px;
    display: block;
}

.exam-question {
    padding: 24px 0;
    border-bottom: 1px solid var(--color-border-light);
}

.exam-question:first-child {
    padding-top: 0;
}

.exam-question:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.exam-question-header {
    margin-bottom: 12px;
}

.exam-question-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exam-question-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.exam-options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exam-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-default);
    cursor: pointer;
    transition: all 0.15s ease;
}

.exam-option:hover {
    border-color: var(--color-primary-hover);
    background: var(--color-bg-hover);
}

.exam-option input[type="radio"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.exam-option input[type="radio"]:checked + .exam-option-text {
    font-weight: 600;
}

.exam-option:has(input:checked) {
    border-color: var(--color-primary);
    background: rgba(var(--color-primary-rgb), 0.05);
}

.exam-option-text {
    font-size: 14px;
    color: var(--color-text-primary);
    line-height: 1.4;
}

/* Previous answer styling for exam retakes */
.exam-option.previous-correct {
    border-color: #00875A;
    background: #E3FCEF;
}

.exam-option.previous-incorrect {
    border-color: #DE350B;
    background: #FFEBE6;
}

.exam-option .previous-answer-badge {
    margin-left: auto;
}

.exam-options .cpe-previous-explanation {
    margin-left: 0;
}

.cpe-exam-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    background: var(--color-bg-page);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-default);
}

.cpe-exam-actions .btn-primary,
.cpe-exam-results .btn-primary {
    min-width: 140px;
}

.cpe-exam-inline .cpe-exam-progress {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* Sticky Action Bar - sticks to bottom of viewport until scrolled into view */
.sticky-action-bar {
    transition: box-shadow 0.2s ease;
}

.sticky-action-bar.is-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    padding: 16px 48px;
}

/* Account for sidebar on larger screens when fixed */
@media (min-width: 769px) {
    .sticky-action-bar.is-fixed {
        left: var(--sidebar-width, 260px);
    }

    .sidebar-collapsed .sticky-action-bar.is-fixed {
        left: var(--sidebar-collapsed-width, 72px);
    }
}

/* Placeholder to maintain layout when action bar becomes fixed */
.sticky-action-bar-placeholder {
    /* Always in document flow for IntersectionObserver to work */
    /* Height is 0 when not active, set via JS when active */
    height: 0;
    overflow: hidden;
}

/* Exam Results (inline version) */
.cpe-exam-results {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-default);
    padding: 48px;
    text-align: center;
}

.exam-results-content {
    max-width: 400px;
    margin: 0 auto;
}

.exam-results-icon {
    margin-bottom: 16px;
}

.exam-results-icon .material-symbols-outlined {
    font-size: 64px;
}

.exam-results-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 24px;
}

.exam-results-score {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.exam-results-correct {
    font-size: 48px;
    font-weight: 700;
    color: var(--color-primary);
}

.exam-results-divider {
    font-size: 32px;
    color: var(--color-text-secondary);
}

.exam-results-total {
    font-size: 32px;
    color: var(--color-text-secondary);
}

.exam-results-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

.exam-results-message {
    font-size: 16px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
}

.exam-results-attempts {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
}

/* =============================================
   CPE ASSESSMENTS ADMIN
   ============================================= */

/* Checkpoint Cards */
.cpe-checkpoints-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cpe-checkpoint-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-default);
    padding: 16px;
}

.cpe-checkpoint-card.cpe-checkpoint-empty {
    background: var(--color-bg-secondary);
    border-style: dashed;
}

.checkpoint-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.checkpoint-header h3 {
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

.checkpoint-timestamp {
    font-size: 14px;
    color: var(--color-text-secondary);
    background: var(--color-bg-secondary);
    padding: 2px 8px;
    border-radius: var(--radius-small);
}

.checkpoint-header .btn-secondary {
    margin-left: auto;
}

.checkpoint-questions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkpoint-question {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
}

.checkpoint-question .question-number {
    font-weight: 600;
    color: var(--color-primary);
    flex-shrink: 0;
}

.checkpoint-question .question-text {
    flex: 1;
    color: var(--color-text-primary);
}

.checkpoint-question .question-options-count {
    font-size: 14px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
}

/* Exam Questions Grid */

.cpe-exam-question-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-default);
    padding: 16px;
}

.exam-question-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.exam-question-header .question-number {
    font-weight: 700;
    font-size: 14px;
    color: var(--color-primary);
    background: var(--color-primary-lightest);
    padding: 4px 10px;
    border-radius: var(--radius-small);
}

.exam-question-text {
    font-size: 14px;
    color: var(--color-text-primary);
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.exam-question-count {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-top: 16px;
}

/* Answer Options in Modal */
.answer-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.answer-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--color-bg-secondary);
    border-radius: var(--radius-small);
    cursor: pointer;
}

.answer-option:hover {
    background: var(--color-bg-tertiary);
}

.answer-option input[type="radio"] {
    flex-shrink: 0;
}

.answer-option input[type="text"] {
    flex: 1;
}

.answer-option input[type="radio"]:checked + input[type="text"] {
    border-color: var(--color-success);
    background: rgba(16, 185, 129, 0.05);
}

/* Timestamp Input Group */
.timestamp-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.timestamp-input-group span {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Modal Section Title */
.modal-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-top: 24px;
    margin-bottom: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
}

/* Section Description */
.section-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 16px;
}

/* Loading Placeholder */
.loading-placeholder {
    padding: 24px;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* =============================================
   BARBRI LEARNING HUB
   Content styles for the hub landing page.
   Uses standard portal layout (header, sidebar, main-content).
   ============================================= */

/* Hub Section Containers */
.hub-section {
    margin-bottom: 48px;
}

/* Section titles in hub - has subtitle below so tight spacing */
.hub-section .section-title {
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
}

.hub-section .section-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 24px 0;
}

/* Your Products Grid */
.hub-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

.hub-product-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-decoration: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s, transform 0.2s;
}

.hub-product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.hub-product-logo {
    height: 48px;
    margin-bottom: 12px;
}

.hub-product-logo img {
    height: 100%;
    width: auto;
    display: block;
}

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

.hub-product-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 4px 0;
}

.hub-product-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.hub-product-status {
    font-size: 14px;
    color: var(--color-accent);
    font-weight: 500;
}

/* Getting Started / Welcome Card */
.hub-welcome-card {
    background: white;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    align-items: center;
    gap: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.hub-welcome-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hub-welcome-icon .material-symbols-outlined {
    font-size: 32px;
    color: #d97706;
}

.hub-welcome-content h2 {
    font-family: var(--font-family-heading);
    font-size: 20px;
    margin: 0 0 8px 0;
    color: var(--color-primary);
}

.hub-welcome-content p {
    font-size: 16px;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.6;
}

/* Journey Tabs (Career Stage Selector) */
.hub-journey-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.hub-journey-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: 2px solid var(--color-border);
    border-radius: 24px;
    background: white;
    cursor: pointer;
    transition: all 0.2s;
    font-family: var(--font-family-primary);
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.hub-journey-tab .material-symbols-outlined {
    font-size: 20px;
}

.hub-journey-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.hub-journey-tab.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.hub-journey-tab.active .material-symbols-outlined {
    color: white;
}

/* Journey Panels */
.hub-journey-panel {
    display: none;
}

.hub-journey-panel.active {
    display: block;
}

.hub-stage-header {
    margin-bottom: 24px;
}

.hub-stage-header h3 {
    font-family: var(--font-family-heading);
    font-size: 20px;
    margin: 0 0 4px 0;
    color: var(--color-primary);
}

.hub-stage-header p {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Discover Products Grid */
.hub-discover-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.hub-discover-card {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s, transform 0.2s;
}

.hub-discover-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.hub-discover-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.hub-discover-icon .material-symbols-outlined {
    font-size: 24px;
    color: var(--color-primary);
}

.hub-discover-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
}

.hub-discover-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.hub-discover-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.hub-discover-features li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 6px;
}

.hub-discover-features .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-success);
}


/* News Carousel */
.hub-news-carousel-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
}

.hub-news-nav {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

.hub-news-nav:hover:not(:disabled) {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.hub-news-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.hub-news-nav .material-symbols-outlined {
    font-size: 24px;
}

.hub-news-carousel {
    flex: 1;
    overflow: hidden;
}

.hub-news-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
}

.hub-news-card {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 280px;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: box-shadow 0.2s, transform 0.2s;
}

.hub-news-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.hub-news-image {
    position: relative;
    aspect-ratio: 16/10;
    overflow: hidden;
}

.hub-news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.hub-news-card:hover .hub-news-image img {
    transform: scale(1.05);
}

.hub-news-category {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.hub-news-content {
    padding: 16px;
}

.hub-news-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0 0 8px 0;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hub-news-date {
    font-size: 14px;
    color: var(--color-text-tertiary);
}

/* News Dots */
.hub-news-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.hub-news-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--color-border);
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
}

.hub-news-dot:hover {
    background: var(--color-text-tertiary);
}

.hub-news-dot.active {
    background: var(--color-primary);
    width: 24px;
    border-radius: 4px;
}


/* Responsive adjustments */
@media (max-width: 900px) {
    .hub-news-card {
        flex: 0 0 calc(50% - 12px);
    }

    .hub-journey-tab .tab-label {
        display: none;
    }

    .hub-journey-tab {
        padding: 12px 16px;
    }
}

@media (max-width: 600px) {


    .hub-news-card {
        flex: 0 0 100%;
    }

    .hub-news-nav {
        display: none;
    }


    .hub-welcome-card {
        flex-direction: column;
        text-align: center;
    }
}


/* ===========================================
   Feedback Management Page
   Super Admin page for viewing and managing
   user feedback from the feedback widget
   =========================================== */

/* ===========================================
   STATUS BAR (Compact)
   Horizontal bar with clickable status pills that filter the table.
   Used on Ideas, Backlog, and Bugs pages.
   =========================================== */

.status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 8px 12px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-default);
    flex-wrap: wrap;
}

.status-bar-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-secondary);
    margin-right: 4px;
}

.status-bar-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-secondary);
    background: var(--color-bg-page);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.15s ease;
}

.status-bar-item:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
    color: var(--color-text-primary);
}

.status-bar-item:focus,
.status-bar-item:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.status-bar-item.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.status-bar-item.active:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.status-bar-count {
    font-weight: 700;
}

.status-bar-divider {
    width: 1px;
    height: 20px;
    background: var(--color-border);
    margin: 0 4px;
}


.feedback-page-group {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-default);
    margin-bottom: 16px;
    overflow: hidden;
}

.feedback-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background: var(--color-bg-page);
    border-bottom: 1px solid var(--color-border-light);
}

.feedback-page-url {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.feedback-page-url a {
    color: var(--color-link);
    text-decoration: none;
}

.feedback-page-url a:hover {
    text-decoration: underline;
}

.feedback-page-url .material-symbols-outlined {
    font-size: 18px;
}

.feedback-page-count {
    font-size: 14px;
    color: var(--color-text-secondary);
    background: var(--color-bg-card);
    padding: 4px 10px;
    border-radius: 12px;
}

.feedback-items {
    padding: 0;
}

.feedback-items-flat {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.feedback-items-flat .feedback-item {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    border-radius: var(--radius-default);
}

.feedback-item {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border-light);
}

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

.feedback-item.is-closed {
    opacity: 0.7;
}

/* Comment section on left (like votes on ideas) */
.feedback-comment-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 48px;
    flex-shrink: 0;
    cursor: pointer;
}

.feedback-comment-icon {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.feedback-comment-icon:hover,
.feedback-comment-section:hover .feedback-comment-icon {
    border-color: var(--color-primary);
    background: var(--color-bg-light);
    color: var(--color-primary);
}

.feedback-comment-icon.has-comments {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: white;
}

.feedback-comment-icon .material-symbols-outlined {
    font-size: 20px;
}

.feedback-comment-section .feedback-comment-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

/* Main content area takes remaining space */
.feedback-item-content {
    flex: 1;
    min-width: 0;
}

.feedback-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    gap: 12px;
}

.feedback-item-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.feedback-item-user {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.feedback-item-date {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.feedback-item-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


.feedback-item-body {
    margin-bottom: 0;
}

.feedback-item-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-primary);
    white-space: pre-wrap;
}

.feedback-item-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
    font-size: 14px;
    color: var(--color-text-secondary);
}

.feedback-item-footer .material-symbols-outlined {
    font-size: 16px;
}

.feedback-item-footer a {
    color: var(--color-link);
    text-decoration: none;
}

.feedback-item-footer a:hover {
    text-decoration: underline;
}

/* Feedback Status Dropdown - Kanban Workflow */
.feedback-status-select {
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.feedback-status-select:hover {
    border-color: var(--color-border-hover);
}

.feedback-status-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(1, 48, 104, 0.15);
}

/* Feedback Detail Modal */
.feedback-detail-info {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-light);
}

.feedback-detail-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.feedback-detail-user {
    font-weight: 600;
    color: var(--color-text);
}

.feedback-detail-date {
    color: var(--color-text-muted);
    font-size: 13px;
}

.feedback-detail-text {
    line-height: 1.6;
    color: var(--color-text);
}

.feedback-detail-url {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.feedback-detail-url .material-symbols-outlined {
    font-size: 16px;
}

.feedback-detail-url a {
    color: var(--color-link);
}

/* Feedback Comments Section */
.feedback-comments-section {
    margin-top: 8px;
}

.feedback-comments-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 16px;
}

.feedback-comments-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-muted);
}

.feedback-comments-list {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 8px;
}

.feedback-comments-empty {
    color: var(--color-text-muted);
    font-size: 14px;
    text-align: center;
    padding: 24px;
}

.feedback-comment {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.feedback-comment:last-child {
    margin-bottom: 0;
}

.feedback-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.feedback-comment-author {
    font-weight: 600;
    color: var(--color-text);
    font-size: 14px;
}

.feedback-comment-time {
    color: var(--color-text-muted);
    font-size: 12px;
}

.feedback-comment-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
}

/* Comment Form in Modal Footer */
.feedback-comment-form {
    width: 100%;
}

.feedback-comment-form .form-row {
    display: flex;
    align-items: center;
}

.feedback-comment-form input[type="text"] {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
}

.feedback-comment-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 45, 114, 0.1);
}

/* Responsive */
@media (max-width: 768px) {
    .feedback-item-header {
        flex-direction: column;
    }

    .feedback-item-actions {
        align-self: flex-start;
    }
}

@media (max-width: 480px) {
    /* Stack comment section inline on very small screens */
    .feedback-comment-section {
        flex-direction: row;
        gap: 8px;
    }

    .feedback-comment-icon {
        width: 32px;
        height: 32px;
    }

    .feedback-comment-icon .material-symbols-outlined {
        font-size: 16px;
    }
}

/* =============================================
   IDEAS PORTAL STYLES
   Public ideas board for feature requests (Canny replacement)
   ============================================= */

/* Filter Controls */
.ideas-filter-controls {
    display: flex;
    gap: 12px;
    align-items: center;
}

.ideas-filter-select {
    padding: 8px 32px 8px 12px;
    font-size: 14px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background-color: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.ideas-filter-select:hover {
    border-color: var(--color-border-hover);
}

.ideas-filter-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(1, 48, 104, 0.15);
}

/* Ideas List */
.ideas-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border-light);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;
}

.ideas-loading,
.ideas-error {
    padding: 48px;
    text-align: center;
    color: var(--color-text-muted);
    background: white;
}

.ideas-loading .spinning {
    animation: spin 1s linear infinite;
}

/* Idea Card */
.idea-card {
    display: flex;
    gap: 16px;
    padding: 16px 20px;
    background: white;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.idea-card:hover {
    background: var(--color-bg-hover);
}

/* Vote Section */
.idea-vote-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 48px;
}

.idea-vote-btn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    background: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.idea-vote-btn:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-light);
}

.idea-vote-btn.voted {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: white;
}

.idea-vote-btn .material-symbols-outlined {
    font-size: 20px;
}

.idea-vote-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
}

/* Idea Content */
.idea-content {
    flex: 1;
    min-width: 0;
}

.idea-header {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.idea-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.idea-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.idea-author {
    font-weight: 500;
}

.idea-comments {
    display: flex;
    align-items: center;
    gap: 4px;
}

.idea-comments .material-symbols-outlined {
    font-size: 16px;
}

/* Idea Detail Modal */
.idea-detail-header {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--color-border-light);
}

.idea-detail-vote {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.idea-detail-info {
    flex: 1;
}

.idea-detail-title-text {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.idea-detail-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.idea-detail-author {
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.idea-detail-date {
    color: var(--color-text-muted);
    font-size: 13px;
}

.idea-detail-description {
    line-height: 1.6;
    color: var(--color-text);
    margin-bottom: 24px;
    font-size: 14px;
}

/* Idea Comments */
.idea-comments-section {
    margin-top: 8px;
}

.idea-comments-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 16px;
}

.idea-comments-title .material-symbols-outlined {
    font-size: 20px;
    color: var(--color-text-muted);
}

.idea-comments-list {
    max-height: 250px;
    overflow-y: auto;
    padding-right: 8px;
}

.idea-comments-empty {
    color: var(--color-text-muted);
    font-size: 14px;
    text-align: center;
    padding: 24px;
}

.idea-comment {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.idea-comment:last-child {
    margin-bottom: 0;
}

.idea-comment.is-admin {
    background: var(--color-bg-light);
    border-left: 3px solid var(--color-primary);
}

.idea-comment-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.idea-comment-author {
    font-weight: 600;
    color: var(--color-text);
    font-size: 14px;
}

.idea-comment-time {
    color: var(--color-text-muted);
    font-size: 12px;
    margin-left: auto;
}

.idea-comment-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text);
}

/* Idea Comment Form */
.idea-comment-form {
    width: 100%;
}

.idea-comment-form .form-row {
    display: flex;
    align-items: center;
}

.idea-comment-form input[type="text"] {
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-size: 14px;
}

.idea-comment-form input[type="text"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 45, 114, 0.1);
}

/* Ideas Admin Page - Table Elements */
.idea-vote-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 26px;
    padding: 0 8px;
    background: var(--color-bg-secondary);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text);
}

/* RICE Score Badge - shows calculated RICE prioritization score */
.rice-score-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 26px;
    padding: 0 8px;
    background: var(--color-primary-light);
    border-radius: 4px;
    font-weight: 600;
    font-size: 13px;
    color: var(--color-primary);
}

.rice-score-badge.rice-score-empty {
    background: var(--color-bg-secondary);
    color: var(--color-text-tertiary);
}

.idea-title-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.idea-title-text {
    font-weight: 500;
    color: var(--color-text);
}

.idea-submitter {
    font-size: 12px;
    color: var(--color-text-muted);
}

.idea-status-select,
.idea-score-select {
    padding: 4px 24px 4px 8px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background-color: white;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.idea-score-select {
    width: 56px;
    text-align: center;
}

.idea-status-select:hover,
.idea-score-select:hover {
    border-color: var(--color-border-hover);
}

.idea-status-select:focus,
.idea-score-select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/* Responsive Ideas Portal */
@media (max-width: 768px) {
    .ideas-filter-controls {
        flex-wrap: wrap;
        width: 100%;
    }

    .ideas-filter-select {
        flex: 1;
        min-width: 120px;
    }

    .idea-detail-header {
        flex-direction: column;
        gap: 12px;
    }

    .idea-detail-vote {
        flex-direction: row;
        gap: 12px;
    }
}

@media (max-width: 480px) {
    .idea-card {
        flex-direction: column;
        gap: 12px;
    }

    .idea-vote-section {
        flex-direction: row;
        gap: 12px;
    }
}

/* =============================================
   Course Cards List - Card Layout for Browse Pages
   Used when displaying mixed content types with many data points
   ============================================= */

.course-cards-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--color-border-light);
    border: 1px solid var(--color-border-default);
    border-radius: 6px;
}

/* First and last cards handle their own border-radius */
.course-cards-list .course-card-row:first-child {
    border-radius: 6px 6px 0 0;
}

.course-cards-list .course-card-row:last-child {
    border-radius: 0 0 6px 6px;
}

.course-cards-list .course-card-row:only-child {
    border-radius: 6px;
}

.course-card-row {
    display: grid;
    grid-template-columns: 40px 1fr 130px 180px 150px;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: var(--color-bg-card);
    transition: background-color 0.15s ease;
}

.course-card-row:hover {
    background: var(--color-bg-hover);
}

/* Compact card variant: 4-column grid without left bookmark/progress column */
/* Used on dashboards and admin pages where left column is not needed */
.course-card-row-compact {
    grid-template-columns: 1fr 120px 160px 140px;
}

/* Admin card variant: narrower right columns, extra left padding to balance the action column */
.course-card-row-admin {
    grid-template-columns: 1fr 110px 150px 56px;
    padding-left: 48px;
}

.course-card-row-admin .course-card-action {
    min-width: 56px;
    justify-content: center;
}

/* Selectable course cards with checkbox */
.course-card-row-selectable.course-card-row-admin {
    grid-template-columns: 40px 1fr 110px 150px 56px;
    padding-left: 24px;
}

.course-card-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Custom checkbox styling */
.bulk-select-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    width: 24px;
    height: 24px;
    position: relative;
}

.bulk-select-checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
}

.bulk-select-checkbox .checkmark {
    position: relative;
    width: 16px;
    height: 16px;
    border: 1px solid var(--color-border-default);
    border-radius: 3px;
    background: white;
    transition: all 0.15s ease;
}

.bulk-select-checkbox input:checked ~ .checkmark {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.bulk-select-checkbox input:checked ~ .checkmark::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.bulk-select-checkbox:hover .checkmark {
    border-color: var(--color-border-hover);
}

/* Selected row highlight */
.course-card-row-selectable:has(input:checked) {
    background: var(--color-selected-row);
}

/* Bulk action bar - fixed at bottom */
.bulk-action-bar {
    position: fixed;
    bottom: 0;
    left: 260px;
    right: 0;
    background: white;
    border-top: 1px solid var(--color-border);
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(100%);
    transition: transform 0.2s ease;
}

.bulk-action-bar.visible {
    transform: translateY(0);
}

.bulk-action-bar-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.bulk-action-bar-count {
    font-weight: 600;
    color: var(--color-text);
}

.bulk-action-bar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Select all toggle at top of list */
.bulk-select-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 24px;
}

.bulk-select-header label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-weight: 500;
    color: var(--color-text-secondary);
}

#bulk-select-label {
    font-size: var(--font-size-sm);
}

/* Library search input in modal */
.library-search-input {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
    margin-bottom: 12px;
}

.library-search-input .material-symbols-outlined {
    color: var(--color-text-tertiary);
    font-size: 20px;
}

.library-search-input input {
    flex: 1;
    border: none;
    outline: none;
    font-size: var(--font-size-base);
}

/* Library checkbox list */
.library-checkbox-list {
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
}

.library-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid var(--color-border-light);
}

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

.library-checkbox-item:hover {
    background: var(--color-bg-hover);
}

.library-checkbox-item.hidden {
    display: none;
}

.library-checkbox-item input[type="checkbox"] {
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.library-checkbox-item .library-name {
    font-size: var(--font-size-base);
    color: var(--color-text-primary);
}

/* Selection summary */
.library-selection-summary {
    margin-top: 8px;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.library-selection-summary:empty {
    display: none;
}


.course-card-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.course-card-line1 {
    min-width: 0;
}

.course-card-title {
    font-size: 16px;
    font-weight: 600;
    color: #0052CC;
    text-decoration: none;
    display: block;
}

.course-card-title:hover {
    color: #0747A6;
    text-decoration: underline;
}

.course-card-line2,
.course-card-line3,
.course-card-line4 {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.course-card-line2:empty,
.course-card-line3:empty,
.course-card-line4:empty {
    display: none;
}

.course-card-meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.course-card-meta-item .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-text-muted);
}

/* Clickable calendar link for live course dates */
.course-card-calendar-link {
    text-decoration: none;
    color: inherit;
    border-radius: 4px;
    padding: 2px 6px;
    margin: -2px -6px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.course-card-calendar-link:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-primary);
}

.course-card-calendar-link:hover .material-symbols-outlined {
    color: var(--color-primary);
}

.course-card-calendar-link .calendar-add-icon {
    font-size: 14px;
    opacity: 0;
    transition: opacity 0.15s ease;
    margin-left: 2px;
}

.course-card-calendar-link:hover .calendar-add-icon {
    opacity: 1;
}

/* Course Card Calendar Dropdown */
.course-card-calendar-dropdown {
    position: relative;
    display: inline-flex;
}

.course-card-calendar-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    padding: 2px 6px;
    margin: -2px -6px;
    border-radius: 4px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.course-card-calendar-btn:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-primary);
}

.course-card-calendar-btn:hover .material-symbols-outlined {
    color: var(--color-primary);
}

.course-card-calendar-btn .calendar-add-icon {
    font-size: 16px;
    transition: transform 0.2s ease;
}

.course-card-calendar-dropdown.open .course-card-calendar-btn .calendar-add-icon {
    transform: rotate(180deg);
}

.course-card-calendar-menu {
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    min-width: 180px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: 8px;
    box-shadow: var(--shadow-lg);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}

.course-card-calendar-dropdown.open .course-card-calendar-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.course-card-calendar-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 14px;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s ease;
}

.course-card-calendar-menu .dropdown-item:first-child {
    border-radius: 8px 8px 0 0;
}

.course-card-calendar-menu .dropdown-item:last-child {
    border-radius: 0 0 8px 8px;
}

.course-card-calendar-menu .dropdown-item:hover {
    background: var(--color-bg-hover);
}

.course-card-calendar-menu .dropdown-item .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

.course-card-calendar-menu .dropdown-divider {
    height: 1px;
    background: var(--color-border-default);
    margin: 4px 0;
}

/* Clickable filter tags in course cards */
.filter-tag {
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
}

.filter-tag:hover {
    color: #0052CC;
    text-decoration: underline;
}

.course-card-credits {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 140px;
}

.course-card-type {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    min-width: 120px;
}

.course-card-action {
    min-width: 150px;
    text-align: right;
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
}

/* Responsive adjustments for card layout */
@media (max-width: 1100px) {
    .course-card-row {
        grid-template-columns: 40px 1fr 130px 150px;
    }

    .course-card-credits {
        display: none;
    }
}

@media (max-width: 900px) {
    .course-card-row {
        grid-template-columns: 1fr;
        gap: 12px;
        position: relative;
        padding-right: 48px;
    }


    .course-card-credits {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        min-width: auto;
    }

    .course-card-type {
        min-width: auto;
        justify-content: flex-start;
    }

    .course-card-action {
        text-align: left;
        min-width: auto;
    }
}

/* =============================================
   Course Card Variants
   Different left column content for different contexts
   ============================================= */

/* Generic left column (replaces .course-card-bookmark for flexibility) */
.course-card-left {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
    width: 40px;
    flex-shrink: 0;
}

/* Pathway context: Sequence number */
.course-card-sequence {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    font-size: 14px;
    font-weight: 600;
}

/* Pathway context: Completed checkmark */
.course-card-complete-check {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-success);
}

.course-card-complete-check .material-symbols-outlined {
    font-size: 28px;
}

/* History context: Progress ring */
.course-card-progress-ring {
    position: relative;
    width: 36px;
    height: 36px;
}

.course-card-progress-ring .circular-progress {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.course-card-progress-ring .circle-bg {
    stroke: var(--color-border-light);
}

.course-card-progress-ring .circle-progress {
    stroke-linecap: round;
    transition: stroke-dasharray 0.3s ease;
}

.course-card-progress-ring .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Certificates context: Icon */
.course-card-cert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #f59e0b;
}

.course-card-cert-icon .material-symbols-outlined {
    font-size: 24px;
}

/* Last accessed text for history */
.course-card-last-accessed {
    color: var(--color-text-muted);
}

/* Static filter tags (non-clickable in non-browse contexts) */

/* Pathway card variant - can have different styling if needed */
.course-card-pathway {
    /* Future: can add pathway-specific styles */
}

/* Certificate card variant */
.course-card-certificate {
    /* Future: can add certificate-specific styles */
}

/* Certificate download button icon alignment */
.course-card-certificate .course-card-action .btn-table-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.course-card-certificate .course-card-action .material-symbols-outlined {
    font-size: 18px;
}

/* ===========================================
   Pathway Card Styles
   Card-based layout for pathway listings
   Similar structure to course cards
   =========================================== */

.pathway-cards-list {
    display: flex;
    flex-direction: column;
    border: var(--border-width-thin) solid var(--color-border-light);
    border-radius: var(--radius-default);
    overflow: hidden;
}

.pathway-cards-list .pathway-card-row:not(:last-child) {
    border-bottom: var(--border-width-thin) solid var(--color-border-light);
}

.pathway-card-row {
    display: grid;
    grid-template-columns: 40px 1fr 140px 150px;
    gap: 16px;
    align-items: center;
    padding: 16px;
    background: var(--color-bg-card);
    transition: background-color 0.15s ease;
}

.pathway-card-row:hover {
    background: var(--color-bg-hover);
}

.pathway-card-left {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 2px;
}

.pathway-card-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.pathway-card-line1 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pathway-card-title {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #0052CC;
    text-decoration: none;
    line-height: 1.4;
}

.pathway-card-title:hover {
    color: #0747A6;
    text-decoration: underline;
}

.pathway-card-line2 {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.pathway-card-description {
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.3;
}

.pathway-card-line3 {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.pathway-card-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
    color: var(--color-text-secondary);
}

.pathway-card-meta-item .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-text-muted);
}

.pathway-progress-text {
    color: var(--color-text-muted);
    font-size: 14px;
}

.pathway-card-type {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.pathway-card-action {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Admin pathway cards - single type chip, narrower action for just ellipsis */
.pathway-cards-list-admin .pathway-card-row {
    grid-template-columns: 40px 1fr 130px 56px;
}

.pathway-cards-list-admin .pathway-card-action {
    justify-content: center;
}

/* Progress ring for pathway cards */
.pathway-card-progress-ring {
    width: 36px;
    height: 36px;
    position: relative;
}

.pathway-card-progress-ring .circular-progress {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.pathway-card-progress-ring .progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Responsive adjustments for pathway cards */
@media (max-width: 1100px) {
    .pathway-card-row {
        grid-template-columns: 40px 1fr 140px;
    }

    .pathway-card-action {
        display: none;
    }
}

@media (max-width: 768px) {
    .pathway-card-row {
        grid-template-columns: 1fr;
        gap: 12px;
        position: relative;
        padding-right: 48px;
    }

    .pathway-card-left {
        position: absolute;
        top: 12px;
        right: 12px;
        padding-top: 0;
    }

    .pathway-card-type {
        justify-content: flex-start;
    }

    .pathway-card-action {
        display: flex;
        justify-content: flex-start;
    }
}

/* Responsive: Progress ring on mobile */
@media (max-width: 900px) {
    .course-card-left {
        position: absolute;
        top: 12px;
        right: 12px;
        padding-top: 0;
        width: auto;
    }

    .course-card-progress-ring {
        width: 32px;
        height: 32px;
    }

    .course-card-sequence {
        width: 24px;
        height: 24px;
        font-size: 14px;
    }
}

/* =============================================
   Browse Table - Column Width Constraints
   Prevents horizontal scrolling on tables with many columns
   ============================================= */

/* Truncate text columns to prevent table overflow */
.data-table .truncate-cell {
    max-width: 150px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Course title column - allow more space but still truncate if needed */
.data-table .title-cell {
    max-width: 280px;
}

.data-table .title-cell a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Narrower columns for compact display */
.data-table .compact-cell {
    white-space: nowrap;
}

/* Hide less important columns on medium screens (before mobile breakpoint) */
@media (min-width: 901px) and (max-width: 1300px) {
    .data-table .hide-on-medium {
        display: none;
    }

    .data-table th.hide-on-medium {
        display: none;
    }
}

/* Even narrower truncation on medium screens */
@media (min-width: 901px) and (max-width: 1300px) {
    .data-table .truncate-cell {
        max-width: 120px;
    }

    .data-table .title-cell {
        max-width: 200px;
    }
}

/* ===========================================
   REPORTS PAGES STYLES
   Organization and Content report pages
   =========================================== */

/* Date Range Picker Component
   Used on reports pages for selecting date ranges
   Consists of a preset dropdown + date button with popover */

.date-range-picker {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
}

.date-range-preset select {
    padding: 8px 12px;
    padding-right: 32px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    background: var(--color-bg-card);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B778C' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.date-range-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
    background: var(--color-bg-card);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    color: var(--color-text-primary);
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.15s, background-color 0.15s;
}

.date-range-button:hover {
    border-color: var(--color-border-hover);
    background: var(--color-bg-hover);
}

.date-range-button .material-symbols-outlined {
    font-size: 18px;
    color: var(--color-text-secondary);
}

.date-range-display {
    font-weight: 500;
}

/* Popover for custom date selection */
.date-range-popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1000;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-medium);
    padding: 16px;
    min-width: 280px;
    display: none;
}

.date-range-popover.show {
    display: block;
}

.date-range-inputs {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.date-input-group {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.date-input-group label {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.date-input-group input[type="date"] {
    padding: 8px 10px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    width: 100%;
}

.date-input-group input[type="date"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 82, 204, 0.1);
}

.date-range-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border-light);
}

/* Legacy support - can be removed after migration */

.date-range-filter select {
    padding: 8px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
    background: var(--color-bg-card);
    cursor: pointer;
}


.custom-date-range input[type="date"] {
    padding: 8px 12px;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-default);
    font-family: 'Nunito', sans-serif;
    font-size: 14px;
}

.custom-date-range span {
    color: var(--color-text-secondary);
    font-size: 14px;
}

/* Metric card variants */
.metric-card-warning {
    border-color: #DE350B !important;
    background: linear-gradient(135deg, #FFEBE6 0%, var(--color-bg-card) 100%);
}

.metric-card-alert {
    border-color: #FF8B00 !important;
    background: linear-gradient(135deg, #FFF4E5 0%, var(--color-bg-card) 100%);
}

.metric-card-change.negative {
    color: #DE350B;
}

/* Days overdue/remaining badges */
.days-overdue-badge {
    display: inline-block;
    padding: 4px 8px;
    background: #FFEBE6;
    color: #DE350B;
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 600;
}

.days-remaining-badge {
    display: inline-block;
    padding: 4px 8px;
    background: #FFF4E5;
    color: #FF8B00;
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 600;
}

.days-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 600;
}

.days-badge.badge-warning {
    background: #FFF4E5;
    color: #FF8B00;
}

.days-badge.badge-info {
    background: #E6F4FF;
    color: #0052CC;
}

/* Status/Type breakdown lists */
.status-breakdown,
.type-breakdown {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.status-breakdown-item,
.type-breakdown-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.status-breakdown-header,
.type-breakdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.status-breakdown-label,
.type-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.status-breakdown-count,
.type-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.status-breakdown-bar,
.type-breakdown-bar {
    height: 8px;
    background: var(--color-bg-subtle);
    border-radius: 4px;
    overflow: hidden;
}

.status-breakdown-fill,
.type-breakdown-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

/* Size breakdown (org tiers) */
.size-breakdown {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.size-breakdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.size-tier {
    font-size: 14px;
    color: var(--color-text-primary);
}

.size-count {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-secondary);
}

/* Library access list */
.library-access-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.library-access-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.library-access-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

/* Rating breakdown */
.ratings-breakdown {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rating-category-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rating-category-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating-category-label {
    font-size: 14px;
    color: var(--color-text-secondary);
}

.rating-category-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.rating-category-bar {
    height: 6px;
    background: var(--color-bg-subtle);
    border-radius: 3px;
    overflow: hidden;
}

.rating-category-fill {
    height: 100%;
    background: #FFAB00;
    border-radius: 3px;
}

/* Completion rate indicators */
.completion-rate {
    display: inline-block;
    padding: 4px 8px;
    border-radius: var(--radius-default);
    font-size: 14px;
    font-weight: 600;
}

.completion-rate.good {
    background: #E3FCEF;
    color: #006644;
}

.completion-rate.medium {
    background: #FFF4E5;
    color: #FF8B00;
}

.completion-rate.low {
    background: #FFEBE6;
    color: #DE350B;
}

/* Star rating display */
.star-rating {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

/* Coverage lists */
.coverage-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.coverage-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.coverage-item.gap {
    margin: 0 -12px;
    padding: 8px 12px;
    border-radius: var(--radius-default);
    border-bottom: none;
    background: var(--color-bg-hover);
}

.coverage-name {
    font-size: 14px;
    color: var(--color-text-primary);
}

.coverage-count {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.coverage-count.zero {
    color: #DE350B;
    font-weight: 600;
}

/* Analytics card subtitle */
.analytics-card-subtitle {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-weight: 400;
}

/* Info icon with smart tooltip
   Use for inline help text on labels, headers, and metrics.
   Icon is always 16px to stay subtle and not compete with content.
   Tooltip is positioned via JS to avoid viewport overflow. */
.info-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
    cursor: help;
    vertical-align: middle;
}

.info-icon .material-symbols-outlined {
    font-size: 16px;
    color: var(--color-text-tertiary);
    transition: color 0.15s ease;
}

.info-icon:hover .material-symbols-outlined {
    color: var(--color-text-secondary);
}

/* Tooltip element - positioned by JS */
.info-tooltip-popup {
    position: fixed;
    background: var(--color-text-primary);
    color: white;
    padding: 10px 14px;
    border-radius: var(--radius-default);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    width: 260px;
    z-index: 10000;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.info-tooltip-popup.visible {
    opacity: 1;
}

.coverage-name-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.gap-score {
    background: #FF8B00;
    color: white;
    font-size: 14px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: var(--radius-default);
}

.coverage-details {
    display: flex;
    gap: 16px;
    font-size: 14px;
}

.coverage-stat {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-secondary);
}

.coverage-stat .material-symbols-outlined {
    font-size: 14px;
}

.coverage-stat.demand {
    color: #0052CC;
}

.coverage-stat.supply.low {
    color: #DE350B;
}

/* Content Gaps by Type Grid */


.type-gap-count.zero {
    background: #FFEBE6;
    color: #DE350B;
}


/* Coverage bars for jurisdiction report */
.coverage-bar {
    width: 100%;
    height: 6px;
    background: var(--color-bg-hover);
    border-radius: 3px;
    margin-top: 4px;
    overflow: hidden;
}

.coverage-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #0052CC 0%, #0747A6 100%);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.coverage-bar-fill.success {
    background: linear-gradient(90deg, #00875A 0%, #006644 100%);
}

.coverage-name-full {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-weight: 400;
    margin-left: 6px;
}

/* Jurisdiction credit types grid */
.jurisdiction-credit-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

@media (max-width: 1200px) {
    .jurisdiction-credit-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.jurisdiction-credit-card {
    background: var(--color-bg-hover);
    border-radius: var(--radius-default);
    padding: 16px;
}

.jurisdiction-credit-header {
    font-size: 16px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border-light);
}

.jurisdiction-credit-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.jurisdiction-credit-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.credit-type-name {
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.credit-type-count {
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--color-bg-card);
    padding: 2px 8px;
    border-radius: var(--radius-default);
    font-size: 14px;
    flex-shrink: 0;
}

.jurisdiction-credit-more {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-style: italic;
    margin-top: 4px;
}

/* Analytics Section Divider */


.analytics-section-title .material-symbols-outlined {
    font-size: 24px;
    color: #0052CC;
}


/* Onboarding Stats */


.onboarding-stat-secondary .material-symbols-outlined {
    font-size: 18px;
}

/* Horizontal Bar Chart */
.horizontal-bar-chart {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.bar-chart-item {
    display: grid;
    grid-template-columns: 140px 1fr 50px;
    gap: 12px;
    align-items: center;
}

.bar-chart-label {
    font-size: 14px;
    color: var(--color-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-chart-bar-wrapper {
    background: var(--color-bg-hover);
    height: 20px;
    border-radius: var(--radius-default);
    overflow: hidden;
}

.bar-chart-bar {
    height: 100%;
    background: linear-gradient(90deg, #0052CC 0%, #0747A6 100%);
    border-radius: var(--radius-default);
    transition: width 0.3s ease;
}

.bar-chart-bar.secondary {
    background: linear-gradient(90deg, #00875A 0%, #006644 100%);
}

.bar-chart-bar.tertiary {
    background: linear-gradient(90deg, #FF8B00 0%, #FF991F 100%);
}

.bar-chart-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-align: right;
}

/* Row muted (for inactive/no-activity items) */
.row-muted {
    opacity: 0.7;
}

.row-muted:hover {
    opacity: 1;
}

/* No data placeholder */
.no-data {
    padding: 24px;
    text-align: center;
    color: var(--color-text-secondary);
    font-style: italic;
}

/* Day of Week Activity Chart */
.day-of-week-chart {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
}

.dow-bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.dow-bar-wrapper {
    height: 100px;
    display: flex;
    align-items: flex-end;
    width: 100%;
    justify-content: center;
}

.dow-bar {
    width: 32px;
    background: linear-gradient(180deg, #0052CC 0%, #0747A6 100%);
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
    min-height: 4px;
}

.dow-label {
    font-size: 14px;
    color: var(--color-text-secondary);
    font-weight: 500;
}

/* Peak Hours List */
.peak-hours-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.peak-hour-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--color-border-light);
}

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

.peak-hour-time {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-primary);
}

.peak-hour-count {
    font-size: 14px;
    color: var(--color-text-secondary);
}

/* ===========================================
   UTILITY CLASSES
   Common patterns to replace inline styles
   =========================================== */

/* Display utilities */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }

/* Flex utilities */
.align-items-center { align-items: center !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-4 { gap: 16px !important; }

/* Text alignment */
.text-right { text-align: right !important; }

/* Margin utilities (8px scale) */
.mt-2 { margin-top: 16px !important; }
.mt-3 { margin-top: 24px !important; }

.mb-2 { margin-bottom: 16px !important; }
.mb-3 { margin-bottom: 24px !important; }
.mb-4 { margin-bottom: 32px !important; }

.mt-6 { margin-top: 48px !important; }

/* Text color utilities */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }
.text-success { color: #00875A !important; }
.text-warning { color: #FF8B00 !important; }
.text-danger { color: #DE350B !important; }
.text-muted-icon { color: #6B778C !important; }
.text-gold { color: #FFAB00 !important; }
.text-purple { color: #6554C0 !important; }
.text-cle { color: #0052CC !important; }
.text-cpe { color: #403294 !important; }

/* Width utilities */
.w-auto { width: auto !important; }

/* Text utilities */
.text-nowrap { white-space: nowrap !important; }

/* Vertical alignment */
.align-middle { vertical-align: middle !important; }

/* Common component patterns */


/* Description text (common pattern) */
.description-text {
    margin-bottom: 16px;
    color: var(--color-text-secondary);
}

/* Due date controls box */
.due-date-controls {
    margin-bottom: 24px;
    padding: 16px;
    background: var(--color-bg-secondary, #f8f9fa);
    border: 1px solid var(--color-border-light);
    border-radius: 8px;
}

/* =============================================
   Inline Due Date Editor (Assignments Tab)
   ============================================= */

.due-date-cell {
    min-width: 160px;
}

.due-date-display {
    display: flex;
    align-items: center;
    gap: 4px;
}

.due-date-text {
    white-space: nowrap;
}

.due-date-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.due-date-edit-btn .material-symbols-outlined {
    font-size: 16px;
}

/* Show edit button on row hover */
tr:hover .due-date-edit-btn,
.due-date-display:hover .due-date-edit-btn,
.due-date-edit-btn:focus {
    opacity: 1;
}

.due-date-edit-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.due-date-editor {
    display: flex;
    align-items: center;
    gap: 4px;
}

.due-date-input {
    padding: 4px 8px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    width: 130px;
}

.due-date-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(0, 45, 114, 0.1);
}

.due-date-save-btn,
.due-date-cancel-btn,
.due-date-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.due-date-save-btn {
    background: var(--color-success-light, #e8f5e9);
    color: var(--color-success, #447228);
}

.due-date-save-btn:hover {
    background: var(--color-success, #447228);
    color: white;
}

.due-date-cancel-btn {
    background: var(--color-bg-secondary);
    color: var(--color-text-muted);
}

.due-date-cancel-btn:hover {
    background: var(--color-bg-hover);
    color: var(--color-text-primary);
}

.due-date-clear-btn {
    background: var(--color-error-light, #ffebee);
    color: var(--color-error, #D44400);
}

.due-date-clear-btn:hover {
    background: var(--color-error, #D44400);
    color: white;
}

.due-date-save-btn .material-symbols-outlined,
.due-date-cancel-btn .material-symbols-outlined,
.due-date-clear-btn .material-symbols-outlined {
    font-size: 18px;
}

/* Spinning animation for loading state */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spinning {
    animation: spin 1s linear infinite;
}

/* Inline label pattern */
.inline-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    white-space: nowrap;
    margin: 0;
    font-weight: 500;
}

/* Flex cell aligned to end */
.flex-end-cell {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: flex-end;
}

/* Table column utilities */
.col-date {
    width: 280px;
    text-align: right;
}

/* Clickable label */
.clickable-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}

/* ===========================================
   Libraries Selector (Manage Libraries Modal)
   Checkbox list for assigning courses to libraries
   Used on: course-detail.php
   =========================================== */

.libraries-selector {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 300px;
    overflow-y: auto;
    padding: 4px 0;
}

.library-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.library-option:hover {
    background: var(--color-bg-hover);
    border-color: var(--color-border-hover);
}

.library-option.selected {
    background: var(--color-selected-bg, #E5ECF9);
    border-color: var(--color-primary);
}

.library-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--color-primary);
}

.library-option .library-icon {
    font-size: 20px;
    color: var(--color-text-secondary);
}

.library-option.selected .library-icon {
    color: var(--color-primary);
}

.library-option-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-primary);
    flex: 1;
}