/* =====================================================
   HL Core Frontend Design System
   =====================================================
   Consolidated design tokens — single canonical palette.
   All components use these tokens for consistent theming.
   ===================================================== */

:root {
    /* ---- Primary (Navy) ---- */
    --hl-primary:          #1A2B47;
    --hl-primary-light:    #243B5C;
    --hl-primary-rgb:      26, 43, 71;

    /* ---- Accent (Green — CTAs, success) ---- */
    --hl-accent:           #2ECC71;
    --hl-accent-dark:      #059669;
    --hl-accent-darker:    #047857;

    /* ---- Interactive (Indigo — tags, links, secondary actions) ---- */
    --hl-interactive:      #6366f1;
    --hl-interactive-dark: #4f46e5;
    --hl-interactive-light:#818cf8;
    --hl-interactive-bg:   #f5f3ff;
    --hl-interactive-border:#c7d2fe;

    /* ---- Secondary (Blue — legacy compat, info states) ---- */
    --hl-secondary:        #2C7BE5;
    --hl-secondary-dark:   #1D4ED8;

    /* ---- Warning / Error ---- */
    --hl-warning:          #F59E0B;
    --hl-error:            #EF4444;
    --hl-error-dark:       #DC2626;

    /* ---- Text Scale ---- */
    --hl-text:             #374151;
    --hl-text-heading:     #1A2B47;
    --hl-text-secondary:   #6B7280;
    --hl-text-muted:       #9CA3AF;

    /* ---- Surfaces ---- */
    --hl-surface:          #FFFFFF;
    --hl-bg:               #F4F5F7;
    --hl-bg-subtle:        #F9FAFB;
    --hl-bg-card:          #F7F8FA;
    --hl-bg-hover:         #EFF6FF;

    /* ---- Borders ---- */
    --hl-border:           #E8EAF0;
    --hl-border-light:     #F0F1F5;
    --hl-border-medium:    #D4D8E0;

    /* ---- Radius ---- */
    --hl-radius:           16px;
    --hl-radius-sm:        12px;
    --hl-radius-xs:        8px;
    --hl-radius-pill:      100px;

    /* ---- Shadows ---- */
    --hl-shadow:           0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.03);
    --hl-shadow-md:        0 2px 8px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
    --hl-shadow-lg:        0 4px 16px rgba(0,0,0,0.08);
    --hl-shadow-hover:     0 4px 12px rgba(0,0,0,0.07);

    /* ---- Transitions ---- */
    --hl-transition:       all 0.2s ease;
    --hl-transition-slow:  all 0.3s ease;

    /* ---- Status Colors ---- */
    --hl-status-active-bg:      #D1FAE5;
    --hl-status-active-text:    #065F46;
    --hl-status-complete-bg:    #D1FAE5;
    --hl-status-complete-text:  #065F46;
    --hl-status-progress-bg:    #DBEAFE;
    --hl-status-progress-text:  #1D4ED8;
    --hl-status-paused-bg:      #FEF3C7;
    --hl-status-paused-text:    #92400E;
    --hl-status-draft-bg:       #F3F4F6;
    --hl-status-draft-text:     #6B7280;
    --hl-status-archived-bg:    #FEE2E2;
    --hl-status-archived-text:  #991B1B;
    --hl-status-role-bg:        #E0E7FF;
    --hl-status-role-text:      #3730A3;

    /* ---- Typography ---- */
    --hl-font:             'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* ---- Backward compat aliases — remove after full migration ---- */
    --hl-indigo:           var(--hl-interactive);
    --hl-indigo-dark:      var(--hl-interactive-dark);
    --hl-indigo-light:     var(--hl-interactive-light);
    --hl-indigo-bg:        var(--hl-interactive-bg);
    --hl-indigo-border:    var(--hl-interactive-border);
    --hl-violet:           #8b5cf6;
    --hl-bg-alt:           #FAFBFC;
    --hl-bg-secondary:     #F9FAFB;
    --hl-primary-dark:     #135e96;
    --hl-surface-alt:      #F3F4F6;

    /* Slate scale — used by CRM pages */
    --hl-slate-50:         #f8fafc;
    --hl-slate-100:        #f1f5f9;
    --hl-slate-200:        #e2e8f0;
    --hl-slate-300:        #cbd5e1;
    --hl-slate-400:        #94a3b8;
    --hl-slate-500:        #64748b;
    --hl-slate-600:        #475569;
    --hl-slate-700:        #334155;
    --hl-slate-800:        #1e293b;
    --hl-slate-900:        #0f172a;

    /* CRM aliases */
    --hl-crm-border:       #E2E8F0;
    --hl-crm-text:         #64748B;
    --hl-crm-text-dark:    #475569;
    --hl-crm-accent:       #3B82F6;
    --hl-crm-border-light: #F1F5F9;
}

/* =====================================================
   0. SCROLL OFFSET FOR FIXED TOPBAR
   ===================================================== */
html {
    scroll-padding-top: 70px;
}

/* =====================================================
   1b. GLOBAL FONT & BASE STYLES
   Typography, links, headings, form elements, tables.
   ===================================================== */

/* HL app base styles — set on body so everything inherits naturally.
   Components override via normal class selectors (any class > inheritance).
   This eliminates the specificity war that broke white-on-dark components. */
body.hl-app {
    font-family: var(--hl-font);
    color: var(--hl-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Global box-sizing reset for HL app */
.hl-app *,
.hl-app *::before,
.hl-app *::after {
    box-sizing: border-box;
}

/* Default link colors — entire selector inside :where() so specificity
   is truly 0,0,0. Any class-based rule (buttons, hero links) wins. */
:where(.hl-app a) {
    color: var(--hl-interactive);
    transition: var(--hl-transition);
}
:where(.hl-app a:hover) {
    color: var(--hl-interactive-dark);
}

/* Default headings — NO color here; headings inherit from their parent.
   Inside dark heroes they inherit white, on light backgrounds they
   inherit var(--hl-text) from body. This prevents the heading default
   from overriding white text inside dark containers. */
:where(.hl-app) h1,
:where(.hl-app) h2,
:where(.hl-app) h3,
:where(.hl-app) h4 {
    font-family: var(--hl-font);
    font-weight: 700;
    line-height: 1.3;
}

/* Form elements — explicit font-family because inputs don't inherit */
:where(.hl-app) input[type="text"],
:where(.hl-app) input[type="email"],
:where(.hl-app) input[type="password"],
:where(.hl-app) input[type="number"],
:where(.hl-app) input[type="search"],
:where(.hl-app) input[type="date"],
:where(.hl-app) input[type="tel"],
:where(.hl-app) input[type="url"],
:where(.hl-app) select,
:where(.hl-app) textarea {
    font-family: var(--hl-font);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-xs);
    padding: 10px 14px;
    font-size: 14px;
    color: var(--hl-text);
    background: var(--hl-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}
:where(.hl-app) input:focus,
:where(.hl-app) select:focus,
:where(.hl-app) textarea:focus {
    border-color: var(--hl-interactive);
    box-shadow: 0 0 0 3px var(--hl-interactive-bg);
}

/* Default table styles */
:where(.hl-app) table {
    border-collapse: collapse;
    width: 100%;
}
:where(.hl-app) table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--hl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--hl-border);
    background: transparent;
}
:where(.hl-app) table td {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--hl-text);
    border-bottom: 1px solid var(--hl-border-light);
}
:where(.hl-app) table tr:hover td {
    background: var(--hl-bg-subtle);
}

/* =====================================================
   2. BASE / PAGE WRAPPER
   ===================================================== */

.hl-dashboard {
    margin: 0 auto;
    padding: 0;
    font-family: var(--hl-font);
    color: var(--hl-text-heading);
    line-height: 1.5;
}

.hl-dashboard *,
.hl-dashboard *::before,
.hl-dashboard *::after {
    box-sizing: border-box;
}

.hl-app__content .hl-dashboard {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
}

/* ---- Global: content constraint for HL Core pages ----
   .hl-app__content provides a single, consistent width cap for all
   HL pages. Individual sub-wrappers fill their parent — they must
   NOT set their own max-width (that creates misalignment).
   ---------------------------------------------------------------------- */

/* ---- Override: strip hardcoded max-width from ALL sub-wrappers ----
   These wrappers had 720px-1100px max-widths that conflict with the
   content area constraint. Force them to fill their parent so
   every element aligns to the same left/right edges.
   ---------------------------------------------------------------------- */
.hl-app__content .hlap-form-wrapper,
.hl-app__content .hlrn-form-wrapper,
.hl-app__content .hlcv-form-wrapper,
.hl-app__content .hls-scheduler,
.hl-app__content .hls-session,
.hl-app__content .hlmc-wrap,
.hl-app__content .hlca-wrapper,
.hl-app__content .hlcd-wrapper,
.hl-app__content .hlcm-wrapper,
.hl-app__content .hlcr-wrapper,
.hl-app__content .hlcmd-wrapper,
.hl-app__content .hl-rp-session-detail,
.hl-app__content .hl-docs-wrapper,
.hl-app__content .hl-back-link,
.hl-app__content .hlcv-alert {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =====================================================
   3. TYPOGRAPHY
   ===================================================== */

/* Heading weight/line-height — NO color here; headings inherit from
   their parent so white-on-dark heroes work without specificity fights. */
.hl-dashboard h1,
.hl-dashboard h2,
.hl-dashboard h3,
.hl-dashboard h4 {
    font-weight: 700;
    line-height: 1.3;
}

.hl-dashboard h2 {
    font-size: 24px;
    margin: 0 0 24px;
}

/* =====================================================
   4. NOTICE MESSAGES
   ===================================================== */

.hl-notice {
    padding: 16px 22px;
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 28px;
    border-left: 4px solid transparent;
}

.hl-notice-warning {
    background: #FFFBEB;
    border-left-color: var(--hl-warning);
    color: var(--hl-status-paused-text);
}

.hl-notice-info {
    background: #EFF6FF;
    border-left-color: var(--hl-secondary);
    color: #1E40AF;
}

.hl-notice-error {
    background: #FEF2F2;
    border-left-color: var(--hl-error);
    color: var(--hl-status-archived-text);
}

.hl-notice-success {
    background: #ECFDF5;
    border-left-color: var(--hl-accent-dark);
    color: var(--hl-status-active-text);
}

/* =====================================================
   5. TABS — PILL / SEGMENT CONTROL
   ===================================================== */

.hl-partnership-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    background: var(--hl-bg-card);
    padding: 5px;
    border-radius: var(--hl-radius-sm);
    border: 1px solid var(--hl-border-light);
}

.hl-tab {
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text-secondary);
    background: transparent;
    border: none;
    border-radius: var(--hl-radius-xs);
    cursor: pointer;
    transition: var(--hl-transition);
    margin-bottom: 0;
    letter-spacing: 0.01em;
}

.hl-tab:hover {
    color: var(--hl-text-heading);
    background: rgba(var(--hl-primary-rgb), 0.06);
}

.hl-tab.active {
    color: var(--hl-surface);
    background: var(--hl-primary);
    box-shadow: 0 1px 3px rgba(var(--hl-primary-rgb), 0.2);
}

/* Tab content show/hide */
.hl-frontend-wrap .hl-partnership-content {
    display: none !important;
}

.hl-frontend-wrap .hl-partnership-content.active {
    display: block !important;
}

/* =====================================================
   6. PARTNERSHIP BLOCK
   ===================================================== */

.hl-partnership-block {
    margin-bottom: 36px;
}

/* =====================================================
   7. SECTION TITLE
   ===================================================== */

.hl-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--hl-text-heading);
    margin: 0 0 18px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.hl-section-count {
    color: var(--hl-text-muted);
    font-weight: normal;
}

.hl-inst-section + .hl-inst-section {
    margin-top: 32px;
}

.hl-text-muted {
    color: var(--hl-text-muted);
}

/* =====================================================
   8. BADGES — PILL SHAPES WITH COLOR FILLS
   ===================================================== */

.hl-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 14px;
    border-radius: var(--hl-radius-pill);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.5;
}

.hl-badge-active       { background: var(--hl-status-active-bg); color: var(--hl-status-active-text); }
.hl-badge-paused       { background: var(--hl-status-paused-bg); color: var(--hl-status-paused-text); }
.hl-badge-draft        { background: var(--hl-status-draft-bg); color: var(--hl-status-draft-text); }
.hl-badge-archived     { background: var(--hl-status-archived-bg); color: var(--hl-status-archived-text); }
.hl-badge-role         { background: var(--hl-status-role-bg); color: var(--hl-status-role-text); margin: 1px 3px; }
.hl-badge-not-started  { background: var(--hl-status-draft-bg); color: var(--hl-status-draft-text); }
.hl-badge-in-progress  { background: var(--hl-status-progress-bg); color: var(--hl-status-progress-text); }
.hl-badge-completed,
.hl-badge-complete     { background: var(--hl-status-complete-bg); color: var(--hl-status-complete-text); }
.hl-badge-future       { background: var(--hl-interactive-bg); color: var(--hl-interactive-dark); }
.hl-badge-scheduled    { background: var(--hl-status-progress-bg); color: var(--hl-status-progress-text); }
.hl-badge-attended     { background: var(--hl-status-complete-bg); color: var(--hl-status-complete-text); }
.hl-badge-missed       { background: var(--hl-status-archived-bg); color: var(--hl-status-archived-text); }
.hl-badge-cancelled    { background: var(--hl-status-draft-bg); color: var(--hl-status-draft-text); }
.hl-badge-rescheduled  { background: var(--hl-status-paused-bg); color: var(--hl-status-paused-text); }

/* =====================================================
   9. META ITEMS
   ===================================================== */

.hl-partnership-meta,
.hl-cycle-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--hl-text-secondary);
    margin-top: 6px;
}

.hl-meta-item strong {
    font-weight: 600;
    color: var(--hl-text);
}

/* =====================================================
   10. PROGRESS BARS
   ===================================================== */

.hl-progress-bar-container {
    width: 100%;
    height: 8px;
    background: var(--hl-border);
    border-radius: var(--hl-radius-pill);
    overflow: hidden;
}

.hl-progress-bar {
    height: 100%;
    border-radius: var(--hl-radius-pill);
    transition: width 0.5s ease;
    background: var(--hl-border-medium);
}

.hl-progress-bar.hl-progress-active {
    background: linear-gradient(90deg, var(--hl-primary) 0%, var(--hl-secondary) 100%);
}

.hl-progress-bar.hl-progress-complete {
    background: linear-gradient(90deg, var(--hl-accent-dark) 0%, var(--hl-accent) 100%);
}

.hl-progress-bar.hl-progress-locked {
    background: var(--hl-border);
}

/* =====================================================
   11. SVG PROGRESS RING
   ===================================================== */

.hl-progress-ring-container,
.hl-team-avg {
    flex-shrink: 0;
}

.hl-progress-ring {
    position: relative;
    width: 110px;
    height: 110px;
}

.hl-progress-ring svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.hl-ring-bg {
    fill: none;
    stroke: var(--hl-border);
    stroke-width: 8;
}

.hl-ring-fill {
    fill: none;
    stroke: var(--hl-accent);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.6s ease;
}

.hl-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    line-height: 1.2;
}

.hl-ring-percent {
    display: block;
    font-size: 24px;
    font-weight: 800;
    color: var(--hl-text-heading);
}

.hl-ring-label {
    display: block;
    font-size: 11px;
    color: var(--hl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* =====================================================
   12. BUTTONS
   ===================================================== */

.hl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid var(--hl-border-medium);
    cursor: pointer;
    transition: var(--hl-transition);
    line-height: 1.4;
    gap: 8px;
    background: var(--hl-surface);
    color: var(--hl-primary);
    letter-spacing: 0.01em;
}

.hl-btn-sm {
    padding: 7px 16px;
    font-size: 13px;
    border-radius: var(--hl-radius-xs);
}

.hl-btn-small {
    padding: 6px 14px;
    font-size: 12px;
}

a.hl-btn-primary,
button.hl-btn-primary,
.hl-btn.hl-btn-primary {
    background: var(--hl-primary);
    color: #FFFFFF !important;
    border-color: var(--hl-primary);
}

a.hl-btn-primary:hover,
button.hl-btn-primary:hover,
.hl-btn.hl-btn-primary:hover {
    background: var(--hl-primary-light);
    border-color: var(--hl-primary-light);
    color: #FFFFFF !important;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(var(--hl-primary-rgb), 0.25);
    transform: translateY(-1px);
}

.hl-btn-secondary {
    background: transparent;
    color: var(--hl-primary);
    border-color: var(--hl-border-medium);
}

.hl-btn-secondary:hover {
    background: var(--hl-bg);
    border-color: var(--hl-primary);
    color: var(--hl-primary);
    text-decoration: none;
}

a.hl-btn-success,
button.hl-btn-success,
.hl-btn.hl-btn-success {
    background: var(--hl-accent-dark);
    color: #FFFFFF !important;
    border-color: var(--hl-accent-dark);
}

a.hl-btn-success:hover,
button.hl-btn-success:hover,
.hl-btn.hl-btn-success:hover {
    background: var(--hl-accent-darker);
    border-color: var(--hl-accent-darker);
    color: #FFFFFF !important;
    text-decoration: none;
}

a.hl-btn-danger,
button.hl-btn-danger,
.hl-btn.hl-btn-danger {
    background: var(--hl-error);
    color: #FFFFFF !important;
    border-color: var(--hl-error);
}

a.hl-btn-danger:hover,
button.hl-btn-danger:hover,
.hl-btn.hl-btn-danger:hover {
    background: var(--hl-error-dark);
    border-color: var(--hl-error-dark);
    color: #FFFFFF !important;
    text-decoration: none;
}

/* =====================================================
   13. HERO / HEADER PANELS
   ===================================================== */

.hl-progress-header,
.hl-team-header,
.hl-my-partnership-header,
.hl-my-cycle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%);
    border: none;
    border-radius: var(--hl-radius);
    padding: 32px 36px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    color: var(--hl-surface);
}

.hl-progress-header-info,
.hl-team-header-info,
.hl-my-partnership-header-info,
.hl-my-cycle-header-info {
    flex: 1;
    min-width: 200px;
}

.hl-progress-header .hl-partnership-title,
.hl-team-header .hl-team-title,
.hl-my-partnership-header .hl-partnership-title,
.hl-my-cycle-header .hl-cycle-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--hl-surface);
    margin: 0 0 6px;
    letter-spacing: -0.02em;
}

.hl-progress-header .hl-partnership-meta,
.hl-my-partnership-header .hl-partnership-meta,
.hl-my-cycle-header .hl-cycle-meta {
    color: rgba(255, 255, 255, 0.75);
}

.hl-progress-header .hl-meta-item strong,
.hl-my-partnership-header .hl-meta-item strong,
.hl-my-cycle-header .hl-meta-item strong {
    color: var(--hl-text);
}

.hl-progress-header .hl-badge,
.hl-my-partnership-header .hl-badge,
.hl-my-cycle-header .hl-badge {
    background: rgba(255, 255, 255, 0.15);
    color: var(--hl-surface);
}

.hl-progress-header .hl-ring-percent,
.hl-my-partnership-header .hl-ring-percent {
    color: var(--hl-surface);
}

.hl-progress-header .hl-ring-label,
.hl-my-partnership-header .hl-ring-label {
    color: rgba(255, 255, 255, 0.6);
}

.hl-progress-header .hl-ring-bg,
.hl-my-partnership-header .hl-ring-bg {
    stroke: rgba(255, 255, 255, 0.15);
}

.hl-progress-header .hl-ring-fill,
.hl-my-partnership-header .hl-ring-fill {
    stroke: var(--hl-accent);
}

.hl-my-partnership-header .hl-scope-indicator,
.hl-my-cycle-header .hl-scope-indicator {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 0 8px;
    font-style: italic;
}

.hl-my-partnership-header .hl-partnership-selector label,
.hl-my-cycle-header .hl-cycle-selector label {
    color: rgba(255, 255, 255, 0.8);
}

.hl-my-partnership-header .hl-partnership-selector .hl-select,
.hl-my-cycle-header .hl-cycle-selector .hl-select {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.25);
    color: var(--hl-surface);
}

/* =====================================================
   14. DASHBOARD HEADER (Partnership Dashboard)
   ===================================================== */

.hl-dashboard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.hl-dashboard-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--hl-text-heading);
    margin: 0;
}

/* =====================================================
   15. PARTNERSHIP SELECTOR
   ===================================================== */

.hl-partnership-selector,
.hl-cycle-selector {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hl-partnership-selector label,
.hl-cycle-selector label {
    font-size: 14px;
    font-weight: 600;
    color: var(--hl-text-secondary);
}

/* =====================================================
   16. FORMS — SELECT, SEARCH, TEXT INPUTS
   ===================================================== */

.hl-select {
    padding: 10px 16px;
    border: 1.5px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    background: var(--hl-surface);
    min-width: 180px;
    color: var(--hl-text-heading);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hl-select:focus {
    outline: none;
    border-color: var(--hl-secondary);
    box-shadow: 0 0 0 4px rgba(44, 123, 229, 0.08);
}

.hl-search-input {
    padding: 10px 16px;
    border: 1.5px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    min-width: 200px;
    background: var(--hl-surface);
    color: var(--hl-text-heading);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.hl-search-input:focus {
    outline: none;
    border-color: var(--hl-secondary);
    box-shadow: 0 0 0 4px rgba(44, 123, 229, 0.08);
}

.hl-search-input::placeholder {
    color: var(--hl-text-muted);
}

.hl-input {
    padding: 10px 16px;
    border: 1.5px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    background: var(--hl-surface);
    color: var(--hl-text-heading);
    transition: border-color 0.2s, box-shadow 0.2s;
    width: 100%;
    max-width: 400px;
}

.hl-input:focus {
    outline: none;
    border-color: var(--hl-secondary);
    box-shadow: 0 0 0 4px rgba(44, 123, 229, 0.08);
}

.hl-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--hl-text-heading);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.hl-form-group {
    margin-bottom: 16px;
}

/* =====================================================
   17. FILTERS BAR
   ===================================================== */

.hl-filters-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 20px;
}

.hl-filters-bar .hl-search-input {
    flex: 1;
    min-width: 200px;
}

.hl-filters-bar .hl-select {
    min-width: 160px;
}

/* Checkbox filter group (inline) */
.hl-filter-checkboxes {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.hl-filter-checkboxes label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 500;
    color: var(--hl-text-secondary);
    cursor: pointer;
}

/* =====================================================
   18. METRICS ROW
   ===================================================== */

.hl-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.hl-metric-card {
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 22px 24px;
    text-align: center;
    transition: box-shadow 0.2s, transform 0.2s;
}

.hl-metric-card:hover {
    box-shadow: var(--hl-shadow-md);
    transform: translateY(-1px);
}

.hl-metric-value {
    font-size: 32px;
    font-weight: 800;
    color: var(--hl-text-heading);
    line-height: 1.2;
}

.hl-metric-label {
    font-size: 13px;
    color: var(--hl-text-muted);
    margin-top: 4px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* =====================================================
   19. DATA TABLES
   ===================================================== */

.hl-table-container {
    margin-bottom: 28px;
}

.hl-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.hl-table-filters {
    display: flex;
    gap: 12px;
    align-items: center;
}

.hl-table-header-actions {
    display: flex;
    gap: 12px;
    align-items: center;
}

.hl-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    overflow: hidden;
    box-shadow: var(--hl-shadow);
}

.hl-table thead th {
    background: var(--hl-bg-card);
    padding: 14px 18px;
    text-align: left;
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--hl-text-secondary);
    border-bottom: 1px solid var(--hl-border);
}

.hl-table tbody td {
    padding: 14px 18px;
    border-bottom: 1px solid var(--hl-border-light);
    vertical-align: middle;
    color: var(--hl-text);
}

.hl-table tbody tr:nth-child(even) {
    background: var(--hl-bg-alt);
}

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

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

.hl-table tbody td strong {
    color: var(--hl-text-heading);
    font-weight: 600;
}

.hl-table tbody td a {
    color: var(--hl-secondary);
    text-decoration: none;
    font-weight: 500;
}

.hl-table tbody td a:hover {
    color: var(--hl-secondary-dark);
    text-decoration: underline;
}

/* --- Inline Progress (table cells) --- */
.hl-inline-progress {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hl-progress-inline {
    flex: 1;
    min-width: 60px;
}

.hl-progress-text {
    font-size: 13px;
    font-weight: 700;
    color: var(--hl-text-heading);
    white-space: nowrap;
    min-width: 36px;
}

/* =====================================================
   20. COMPONENT CARDS
   ===================================================== */

.hl-component-list {
    margin-bottom: 28px;
}

.hl-component-list .hl-section-title {
    margin-bottom: 16px;
}

.hl-component-card {
    display: flex;
    align-items: stretch;
    gap: 16px;
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 20px 24px;
    margin-bottom: 12px;
    transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.hl-component-card:hover {
    box-shadow: var(--hl-shadow-md);
    transform: translateY(-1px);
    border-color: var(--hl-border);
}

.hl-component-completed {
    border-left: 4px solid var(--hl-accent);
    background: #F0FDF4;
}

.hl-component-locked {
    opacity: 0.55;
    background: var(--hl-bg-alt);
}

.hl-component-not-applicable {
    opacity: 0.5;
    background: #f0f0f0;
    pointer-events: none;
}

.hl-component-available {
    border-left: 4px solid var(--hl-secondary);
}

/* --- Component Status Icon --- */
.hl-component-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    font-size: 18px;
    border-radius: 50%;
    background: var(--hl-bg);
    align-self: flex-start;
    margin-top: 2px;
}

.hl-icon-check    { color: var(--hl-accent-dark); }
.hl-icon-lock     { color: var(--hl-text-muted); font-size: 15px; }
.hl-icon-progress { color: var(--hl-secondary); }

.hl-component-completed .hl-component-status-icon { background: var(--hl-status-complete-bg); }
.hl-component-available .hl-component-status-icon { background: var(--hl-status-progress-bg); }

/* --- Component Content --- */
.hl-component-content {
    flex: 1;
    min-width: 0;
}

.hl-component-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin: 0 0 6px;
}

.hl-component-title a {
    color: var(--hl-text-heading);
    text-decoration: none;
}

.hl-component-title a:hover {
    color: var(--hl-secondary);
    text-decoration: underline;
}

.hl-component-meta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 13px;
    color: var(--hl-text-muted);
    margin-bottom: 10px;
    align-items: center;
}

.hl-component-type {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--hl-radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: var(--hl-status-role-bg);
    color: var(--hl-status-role-text);
}

.hl-component-date {
    color: var(--hl-accent-dark);
    font-weight: 500;
}

.hl-component-lock-reason {
    color: var(--hl-error-dark);
    font-style: italic;
}

.hl-component-progress-text {
    color: var(--hl-text-secondary);
}

.hl-component-action {
    margin: 8px 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.hl-component-notice {
    display: inline-block;
    font-size: 13px;
    color: var(--hl-text-muted);
    font-style: italic;
}

.hl-drip-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: var(--hl-radius-pill);
    font-size: 11px;
    font-weight: 600;
    background: #FEF3C7;
    color: #92400E;
    margin-left: 8px;
    vertical-align: middle;
}

/* =====================================================
   21. INLINE FORM VIEW (JFB)
   ===================================================== */

.hl-inline-form-wrapper {
    margin-bottom: 28px;
}

.hl-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--hl-secondary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.hl-back-link:hover {
    color: var(--hl-secondary-dark);
    text-decoration: none;
}

.hl-inline-form-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--hl-text-heading);
    margin: 0 0 8px;
}

.hl-inline-form-description {
    font-size: 15px;
    color: var(--hl-text-secondary);
    margin: 0 0 24px;
    line-height: 1.7;
}

.hl-jfb-form-container {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 32px;
    box-shadow: var(--hl-shadow);
}

/* =====================================================
   22. EMPTY STATE
   ===================================================== */

.hl-empty-state {
    text-align: center;
    padding: 60px 24px;
    color: var(--hl-text-muted);
}

.hl-empty-state h3 {
    font-size: 18px;
    color: var(--hl-text-secondary);
    margin: 0 0 8px;
    font-weight: 600;
}

.hl-empty-state p {
    font-size: 15px;
    margin: 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* =====================================================
   23. MEMBER CARDS (Team Progress)
   ===================================================== */

.hl-team-members {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hl-member-card {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    overflow: hidden;
    transition: box-shadow 0.2s, transform 0.15s;
}

.hl-member-card:hover {
    box-shadow: var(--hl-shadow-md);
    border-color: var(--hl-border);
}

.hl-member-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
}

.hl-member-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hl-primary), var(--hl-secondary));
    color: var(--hl-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    flex-shrink: 0;
}

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

.hl-member-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin: 0;
}

.hl-member-email {
    font-size: 13px;
    color: var(--hl-text-muted);
    display: block;
}

.hl-member-role {
    font-size: 12px;
    color: var(--hl-text-secondary);
}

.hl-member-completion {
    flex-shrink: 0;
    text-align: right;
}

.hl-completion-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--hl-text-heading);
}

.hl-member-card .hl-progress-bar-container {
    border-radius: 0;
    height: 4px;
}

/* --- Member Details (native <details>) --- */
.hl-member-details {
    border-top: 1px solid var(--hl-border-light);
    font-size: 14px;
}

.hl-member-details summary {
    padding: 12px 20px;
    cursor: pointer;
    color: var(--hl-secondary);
    font-weight: 600;
    font-size: 13px;
    transition: background 0.2s;
}

.hl-member-details summary:hover {
    background: var(--hl-bg-subtle);
}

.hl-member-components {
    padding: 0 20px 16px;
}

/* --- Mini Component Row --- */
.hl-mini-component {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid var(--hl-border-light);
    font-size: 13px;
}

.hl-mini-component:last-child {
    border-bottom: none;
}

.hl-mini-status {
    width: 22px;
    text-align: center;
    flex-shrink: 0;
    font-size: 14px;
}

.hl-mini-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--hl-text);
}

.hl-mini-percent {
    flex-shrink: 0;
    font-weight: 700;
    font-size: 12px;
    min-width: 60px;
    text-align: right;
}

.hl-mini-complete .hl-mini-status  { color: var(--hl-accent-dark); }
.hl-mini-complete .hl-mini-title   { color: var(--hl-status-active-text); }
.hl-mini-complete .hl-mini-percent { color: var(--hl-accent-dark); }

.hl-mini-progress .hl-mini-status  { color: var(--hl-secondary); }
.hl-mini-progress .hl-mini-percent { color: var(--hl-secondary); }

.hl-mini-locked .hl-mini-status  { color: var(--hl-border-medium); }
.hl-mini-locked .hl-mini-title   { color: var(--hl-text-muted); }
.hl-mini-locked .hl-mini-percent { color: var(--hl-text-muted); }

/* =====================================================
   24. MY PROGRAMS
   ===================================================== */

.hl-programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
}

.hl-program-card {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    overflow: hidden;
    transition: var(--hl-transition-slow);
    box-shadow: var(--hl-shadow);
}

.hl-program-card:hover {
    box-shadow: var(--hl-shadow-lg);
    transform: translateY(-2px);
    border-color: var(--hl-border);
}

.hl-program-card-image {
    height: 180px;
    background: linear-gradient(135deg, var(--hl-primary), var(--hl-secondary));
    overflow: hidden;
    position: relative;
}

.hl-program-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hl-program-card-body {
    padding: 20px;
}

.hl-program-card-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--hl-text-heading);
}

.hl-program-card-partnership {
    font-size: 13px;
    color: var(--hl-text-muted);
    margin: 0 0 14px;
    font-weight: 500;
}

.hl-program-card-progress {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.hl-program-card-progress span {
    font-size: 14px;
    font-weight: 700;
    color: var(--hl-text-heading);
    min-width: 36px;
}

.hl-program-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 16px;
    border-top: 1px solid var(--hl-border-light);
}

/* =====================================================
   25. COACH INFO CARD
   ===================================================== */

.hl-coach-info-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    margin-bottom: 28px;
}

.hl-coach-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid var(--hl-border);
}

.hl-coach-avatar-placeholder {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--hl-primary), var(--hl-secondary));
    color: var(--hl-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 20px;
    flex-shrink: 0;
}

.hl-coach-details {
    flex: 1;
    min-width: 0;
}

.hl-coach-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--hl-text-heading);
    margin: 0 0 2px;
}

.hl-coach-email {
    font-size: 13px;
    color: var(--hl-text-secondary);
    margin: 0 0 8px;
}

.hl-coach-email a {
    color: var(--hl-secondary);
    text-decoration: none;
}

.hl-coach-email a:hover {
    text-decoration: underline;
}

.hl-coach-no-assignment {
    font-size: 14px;
    color: var(--hl-text-muted);
    font-style: italic;
}

/* =====================================================
   26. COACHING SESSION CARDS
   ===================================================== */

.hl-sessions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
}

.hl-session-card {
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 20px 24px;
    transition: var(--hl-transition);
}

.hl-session-card:hover {
    box-shadow: var(--hl-shadow-md);
    border-color: var(--hl-border);
}

.hl-session-card--past {
    opacity: 0.8;
}

.hl-session-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.hl-session-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin: 0;
}

.hl-session-date {
    font-size: 13px;
    color: var(--hl-text-secondary);
    margin-bottom: 10px;
}

.hl-session-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.hl-session-no-items {
    color: var(--hl-text-muted);
    font-size: 14px;
    padding: 8px 0;
}

/* =====================================================
   27. ENROLLMENT SWITCHER
   ===================================================== */

.hl-enrollment-switcher {
    margin-bottom: 20px;
}

.hl-enrollment-switcher label {
    font-size: 14px;
    font-weight: 600;
    color: var(--hl-text-secondary);
    margin-right: 8px;
}

/* =====================================================
   28. SCHEDULE FORM
   ===================================================== */

.hl-schedule-form {
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 28px;
    margin-top: 32px;
}

.hl-schedule-form h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--hl-text-heading);
    margin: 0 0 16px;
}

.hl-reschedule-form {
    margin-top: 8px;
    display: none;
    padding: 12px;
    background: var(--hl-bg-subtle);
    border-radius: var(--hl-radius-sm);
    border: 1px solid var(--hl-border);
}

.hl-reschedule-form .hl-input {
    margin-bottom: 8px;
}

/* =====================================================
   30. COMPONENT PAGE
   ===================================================== */

.hl-component-page .hl-component-type-badge {
    display: inline-block;
    padding: 4px 14px;
    background: var(--hl-status-role-bg);
    border-radius: var(--hl-radius-pill);
    font-size: 12px;
    font-weight: 600;
    color: var(--hl-status-role-text);
    margin-bottom: 20px;
}

.hl-component-locked-view {
    text-align: center;
    padding: 60px 32px;
    background: var(--hl-bg-card);
    border-radius: var(--hl-radius);
    border: 1px solid var(--hl-border-light);
}

.hl-component-locked-view .hl-lock-icon {
    font-size: 52px;
    color: var(--hl-border-medium);
    margin-bottom: 16px;
}

/* =====================================================
   31. TEAMS GRID (My Partnership / Workspace)
   ===================================================== */

.hl-school-section {
    margin-bottom: 36px;
}
.hl-school-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--hl-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 14px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--hl-primary-light);
}
.hl-teams-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.hl-team-card-item {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 24px;
    transition: var(--hl-transition-slow);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: var(--hl-shadow);
}

.hl-team-card-item:hover {
    box-shadow: var(--hl-shadow-hover);
    transform: translateY(-2px);
    border-color: var(--hl-border);
}

.hl-team-card-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--hl-text-heading);
    margin: 0 0 4px;
}

.hl-team-card-name a {
    color: var(--hl-text-heading);
    text-decoration: none;
    transition: color 0.2s;
}

.hl-team-card-name a:hover {
    color: var(--hl-secondary);
}

.hl-team-card-school {
    font-size: 13px;
    color: var(--hl-text-muted);
    margin: 0 0 12px;
    font-weight: 500;
}

.hl-team-card-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
    color: var(--hl-text-secondary);
    margin-bottom: 14px;
}

.hl-team-card-meta strong {
    font-weight: 600;
    color: var(--hl-text);
}

.hl-team-card-progress {
    margin-bottom: 14px;
}

.hl-team-card-action {
    text-align: right;
    padding-top: 14px;
    border-top: 1px solid var(--hl-border-light);
}

/* =====================================================
   32. REPORT FILTERS
   ===================================================== */

.hl-report-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* =====================================================
   33. EXPORT BUTTON
   ===================================================== */

.hl-export-btn {
    white-space: nowrap;
    background: var(--hl-accent-dark);
    color: var(--hl-surface);
    border-color: var(--hl-accent-dark);
}

.hl-export-btn:hover {
    background: var(--hl-accent-darker);
    border-color: var(--hl-accent-darker);
    color: var(--hl-surface);
}

/* =====================================================
   34. DETAIL ROW (expandable reports)
   ===================================================== */

.hl-detail-row {
    display: none;
}

.hl-detail-row td {
    padding: 0 !important;
    background: var(--hl-bg-subtle);
}

.hl-detail-content {
    padding: 16px 20px;
}

.hl-detail-table {
    margin: 0;
    font-size: 13px;
    border-radius: var(--hl-radius-sm);
}

.hl-detail-table thead th {
    background: var(--hl-text);
    padding: 10px 14px;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.9);
}

.hl-detail-table tbody td {
    padding: 8px 14px;
}

.hl-detail-toggle {
    font-size: 12px !important;
    padding: 4px 12px !important;
    border-radius: var(--hl-radius-xs) !important;
}

/* =====================================================
   37. CRM DIRECTORY — SHARED STYLES
   ===================================================== */

.hl-crm-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hl-spacing-sm);
    margin-bottom: 24px;
}

.hl-crm-page-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--hl-text-heading);
    margin: 0;
}

/* Card grid for districts, schools, partnerships */
.hl-crm-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 28px;
}

.hl-crm-card {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
    box-shadow: var(--hl-shadow);
}

.hl-crm-card:hover {
    border-color: var(--hl-crm-accent);
    box-shadow: var(--hl-shadow-md);
}

.hl-crm-card-body {
    flex: 1;
}

.hl-crm-card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin: 0 0 8px;
}

.hl-crm-card-title a {
    color: var(--hl-text-heading);
    text-decoration: none;
}

.hl-crm-card-title a:hover {
    color: var(--hl-crm-accent);
}

.hl-crm-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.hl-crm-card-header .hl-crm-card-title {
    margin-bottom: 0;
}

.hl-crm-card-subtitle {
    font-size: 13px;
    color: var(--hl-crm-text);
    margin: 0 0 8px;
}

.hl-crm-card-code {
    font-size: 12px;
    color: var(--hl-text-muted);
    margin-bottom: 8px;
    font-family: monospace;
}

.hl-crm-card-dates {
    font-size: 13px;
    color: var(--hl-text-muted);
    margin-bottom: 10px;
}

.hl-crm-card-image {
    height: 140px;
    overflow: hidden;
    border-radius: var(--hl-radius-sm) var(--hl-radius-sm) 0 0;
    margin: -20px -20px 16px -20px;
    background: linear-gradient(135deg, var(--hl-primary), var(--hl-secondary));
}

.hl-crm-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hl-crm-card-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.hl-crm-card-stat {
    font-size: 13px;
    color: var(--hl-crm-text);
}

.hl-crm-card-stat strong {
    color: var(--hl-text-heading);
    font-weight: 600;
    margin-right: 3px;
}

.hl-crm-card-detail {
    font-size: 13px;
    color: var(--hl-crm-text);
    margin: 4px 0 0;
}

.hl-crm-card-detail strong {
    color: var(--hl-crm-text-dark);
}

.hl-crm-card-hint {
    font-size: 12px;
    color: var(--hl-text-muted);
    margin-top: 6px;
}

.hl-crm-card-action {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--hl-crm-border-light);
}

.hl-crm-card-description {
    font-size: 13px;
    color: var(--hl-text-secondary);
    margin: 8px 0 0;
}

/* =====================================================
   37b. COACH WIDGET (compact inline coach display)
   ===================================================== */

.hl-coach-widget {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: var(--hl-bg-subtle);
    border-radius: var(--hl-radius-sm);
    margin-bottom: 24px;
}

.hl-coach-widget .hl-coach-avatar img {
    border-radius: 50%;
}

.hl-coach-widget-info {
    flex: 1;
}

.hl-coach-widget-info strong {
    display: block;
    color: var(--hl-text-heading);
    margin-bottom: 2px;
}

/* =====================================================
   37c. PROGRAM CARD IMAGE PLACEHOLDER
   ===================================================== */

.hl-program-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hl-text-muted);
    font-size: 48px;
}

/* =====================================================
   38. CRM DETAIL PAGE HEADER (District/School)
   ===================================================== */

.hl-crm-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%);
    border: none;
    border-radius: var(--hl-radius);
    padding: 32px 36px;
    margin-bottom: 32px;
    flex-wrap: wrap;
    color: var(--hl-surface);
}

.hl-crm-detail-header-info {
    flex: 1;
    min-width: 200px;
}

.hl-crm-detail-header .hl-partnership-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--hl-surface);
    margin: 0 0 6px;
}

.hl-crm-detail-header .hl-scope-indicator {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}

.hl-crm-detail-header .hl-scope-indicator a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: underline;
    font-style: italic;
}

.hl-crm-detail-header-stats {
    display: flex;
    gap: 16px;
}

.hl-crm-stat-box {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--hl-radius-sm);
    padding: 12px 20px;
    text-align: center;
    min-width: 90px;
}

.hl-crm-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--hl-surface);
}

.hl-crm-stat-label {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
}

/* =====================================================
   39. CRM SECTIONS
   ===================================================== */

.hl-crm-section {
    margin-bottom: 32px;
}

.hl-crm-section .hl-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--hl-text-heading);
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--hl-border-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Partnership list rows */
.hl-crm-partnership-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hl-crm-partnership-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius-sm);
    padding: 18px 24px;
    flex-wrap: wrap;
}

.hl-crm-partnership-info {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    flex: 1;
}

.hl-crm-partnership-info strong {
    font-size: 15px;
    color: var(--hl-text-heading);
}

.hl-crm-partnership-dates {
    font-size: 13px;
    color: var(--hl-crm-text);
}

.hl-crm-partnership-count {
    font-size: 13px;
    color: var(--hl-crm-text);
}

/* Stats row for overview */
.hl-crm-stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}

/* =====================================================
   40. PARTNERSHIP WORKSPACE — DASHBOARD TAB
   ===================================================== */

.hl-workspace-dashboard .hl-metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.hl-metrics-row + .hl-metrics-row {
    margin-top: 16px;
}

/* =====================================================
   41. PAGINATION
   ===================================================== */

.hl-pagination {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.hl-pagination a,
.hl-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: var(--hl-transition);
}

.hl-pagination a {
    color: var(--hl-text-secondary);
    border: 1px solid var(--hl-border);
    background: var(--hl-surface);
}

.hl-pagination a:hover {
    background: var(--hl-bg);
    border-color: var(--hl-primary);
    color: var(--hl-primary);
    text-decoration: none;
}

.hl-pagination .hl-pagination-current {
    background: var(--hl-primary);
    color: var(--hl-surface);
    border: 1px solid var(--hl-primary);
    font-weight: 700;
}

.hl-pagination .hl-pagination-dots {
    color: var(--hl-text-muted);
    border: none;
}

/* =====================================================
   42. NO-RESULTS (hidden by default, shown by JS)
   ===================================================== */

.hl-no-results {
    display: none;
    text-align: center;
    padding: 40px 20px;
    color: var(--hl-text-muted);
    font-size: 14px;
}

/* =====================================================
   43. child assessment (Branded Form)
   ===================================================== */

/* Base layout for the child assessment pages */
.hl-child-assessment.hl-assessment-form,
.hl-child-assessment.hl-assessment-summary {
    padding: 0;
}

/* Override any theme max-width constraints on the form wrapper */
.hl-ca-form-wrap,
.hl-ca-summary-wrap {
    box-sizing: border-box;
}

/* Ensure the back-to-assessments link sits outside the card */
.hl-child-assessment > p > .hl-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* =====================================================
   44. OBSERVATION PAGES
   ===================================================== */

.hl-observation-create-form {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 28px;
    margin-bottom: 32px;
    box-shadow: var(--hl-shadow);
}

.hl-observation-create-form .hl-form-group {
    margin-bottom: 16px;
}

.hl-observation-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--hl-text-secondary);
    margin-bottom: 16px;
}

/* =====================================================
   45. RESPONSIVE
   ===================================================== */

@media (max-width: 768px) {
    .hl-progress-header,
    .hl-team-header,
    .hl-my-partnership-header,
    .hl-my-cycle-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }

    .hl-metrics-row {
        grid-template-columns: 1fr 1fr;
    }

    .hl-metric-card {
        min-width: 0;
    }

    .hl-partnership-tabs {
        gap: 4px;
    }

    .hl-tab {
        padding: 8px 16px;
        font-size: 13px;
        flex: 1;
        text-align: center;
    }

    .hl-member-header {
        flex-wrap: wrap;
    }

    .hl-dashboard-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .hl-table {
        font-size: 13px;
    }

    .hl-table thead th,
    .hl-table tbody td {
        padding: 10px 12px;
    }

    .hl-partnership-meta {
        flex-direction: column;
        gap: 4px;
    }

    .hl-programs-grid {
        grid-template-columns: 1fr;
    }

    .hl-teams-grid {
        grid-template-columns: 1fr;
    }

    .hl-program-header {
        flex-direction: column;
    }

    .hl-program-details {
        flex-direction: column;
    }

    .hl-report-filters {
        flex-direction: column;
        align-items: stretch;
    }

    .hl-report-filters .hl-select,
    .hl-report-filters .hl-search-input {
        width: 100%;
        min-width: 0;
    }

    .hl-filters-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .hl-filters-bar .hl-search-input,
    .hl-filters-bar .hl-select {
        width: 100%;
        min-width: 0;
    }

    .hl-filter-checkboxes {
        width: 100%;
    }

    .hl-coach-info-card {
        flex-direction: column;
        text-align: center;
    }

    .hl-session-header {
        flex-direction: column;
    }

    .hl-crm-card-grid {
        grid-template-columns: 1fr;
    }

    .hl-crm-detail-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 20px;
    }

    .hl-crm-detail-header-stats {
        flex-wrap: wrap;
    }

    .hl-crm-partnership-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .hl-crm-partnership-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }


    .hl-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hl-observation-meta {
        flex-direction: column;
        gap: 8px;
    }
}

@media (max-width: 480px) {
    .hl-table-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .hl-partnership-selector,
    .hl-cycle-selector {
        width: 100%;
    }

    .hl-select {
        flex: 1;
    }

    .hl-metrics-row {
        grid-template-columns: 1fr;
    }

    .hl-partnership-tabs {
        flex-direction: column;
    }

    .hl-tab {
        text-align: center;
    }

    .hl-program-card-footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .hl-session-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hl-pagination {
        gap: 2px;
    }

    .hl-pagination a,
    .hl-pagination span {
        min-width: 32px;
        height: 32px;
        font-size: 13px;
    }

    .hl-dash-cards {
        grid-template-columns: 1fr !important;
    }

    .hl-dash-welcome {
        flex-direction: column;
        text-align: center;
    }
}

/* =====================================================
   PROGRAM PAGE V2 — CALM PROFESSIONAL REDESIGN
   Scoped to .hl-program-page-v2 so it doesn't affect
   legacy program page rendering if any exists.
   ===================================================== */

/* ---- BuddyBoss overrides for program page ---- */
.hl-program-page-v2 {
    font-family: var(--hl-font);
    max-width: none;
}

.hl-program-page-v2 h1,
.hl-program-page-v2 h2,
.hl-program-page-v2 h3,
.hl-program-page-v2 h4 {
    font-family: var(--hl-font);
    letter-spacing: -0.01em;
}

/* ---- Page layout ---- */
.hl-program-page-v2 .hl-pp-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

.hl-program-page-v2 .hl-pp-main {
    min-width: 0;
}

/* ---- Hero banner ---- */
.hl-pp-hero {
    margin-bottom: 24px;
}

.hl-pp-hero-card {
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%);
    display: flex;
    min-height: 160px;
    position: relative;
}

.hl-pp-hero-text {
    flex: 1;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 1;
}

.hl-pp-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: var(--hl-radius-pill);
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    width: fit-content;
}

.hl-pp-hero-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 6px !important;
}

.hl-pp-hero-subtitle {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.hl-pp-hero-image {
    width: 200px;
    flex-shrink: 0;
    position: relative;
}
.hl-pp-hero-image img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: calc(100% - 32px);
    max-height: calc(100% - 32px);
    object-fit: contain;
    opacity: 0.85;
}

/* ---- About brief (no card wrapper) ---- */
.hl-pp-about {
    font-size: 14px;
    color: var(--hl-slate-500);
    line-height: 1.7;
    margin-bottom: 24px;
}

/* ---- Expandable toggle sections ---- */
.hl-pp-toggles {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.hl-pp-toggle-btn {
    padding: 8px 18px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--hl-slate-200);
    background: #fff;
    color: var(--hl-slate-500);
    cursor: pointer;
    transition: var(--hl-transition);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hl-font);
}

.hl-pp-toggle-btn:hover {
    border-color: var(--hl-indigo-border);
    color: var(--hl-indigo);
    background: var(--hl-indigo-bg);
}

.hl-pp-toggle-btn.active {
    background: var(--hl-indigo);
    color: #fff;
    border-color: var(--hl-indigo);
}

.hl-pp-panel {
    display: none;
    background: #fff;
    border: 1px solid var(--hl-slate-200);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 20px;
    animation: hlPanelSlide 0.2s ease;
}

.hl-pp-panel.show {
    display: block;
}

@keyframes hlPanelSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.hl-pp-panel h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--hl-slate-900);
    margin: 0 0 10px;
}

.hl-pp-panel p {
    font-size: 14px;
    color: var(--hl-slate-600);
    line-height: 1.7;
}

.hl-pp-syllabus-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 12px;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--hl-indigo);
    text-decoration: none;
    background: var(--hl-indigo-bg);
    border-radius: 8px;
    transition: var(--hl-transition);
}

.hl-pp-syllabus-link:hover {
    background: #ede9fe;
}

/* ---- Section label ---- */
.hl-pp-section-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--hl-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 8px 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--hl-slate-100);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hl-pp-section-count {
    background: var(--hl-slate-100);
    color: var(--hl-slate-500);
    padding: 2px 8px;
    border-radius: var(--hl-radius-pill);
    font-size: 11px;
    font-weight: 600;
}

/* ---- Sidebar ---- */
.hl-pp-sidebar {
    position: sticky;
    top: 80px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hl-pp-sidebar-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--hl-slate-200);
    overflow: hidden;
}

/* Progress combo card */
.hl-pp-progress-combo {
    padding: 18px 20px;
}

.hl-pp-progress-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.hl-pp-ring-mini {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.hl-pp-ring-mini svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hl-pp-ring-mini .ring-bg {
    fill: none;
    stroke: var(--hl-slate-100);
    stroke-width: 6;
}

.hl-pp-ring-mini .ring-fill {
    fill: none;
    stroke: var(--hl-indigo);
    stroke-width: 6;
    stroke-linecap: round;
}

.hl-pp-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 13px;
    font-weight: 800;
    color: var(--hl-slate-900);
}

.hl-pp-progress-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--hl-slate-900);
}

.hl-pp-progress-sub {
    font-size: 12px;
    color: var(--hl-slate-400);
    margin-top: 1px;
}

.hl-pp-bar-full {
    width: 100%;
    height: 6px;
    background: var(--hl-slate-100);
    border-radius: var(--hl-radius-pill);
    overflow: hidden;
}

.hl-pp-bar-fill {
    height: 100%;
    border-radius: var(--hl-radius-pill);
    background: linear-gradient(90deg, var(--hl-indigo), var(--hl-violet));
    transition: width 0.5s ease;
}

/* Compact stats row */
.hl-pp-stats-row {
    display: flex;
    gap: 0;
    border-top: 1px solid var(--hl-slate-100);
    margin: 14px -20px -18px;
}

.hl-pp-stat {
    flex: 1;
    padding: 12px 0;
    text-align: center;
    border-right: 1px solid var(--hl-slate-100);
}

.hl-pp-stat:last-child {
    border-right: none;
}

.hl-pp-stat-num {
    font-size: 18px;
    font-weight: 800;
    color: var(--hl-slate-900);
}

.hl-pp-stat-lbl {
    font-size: 10px;
    color: var(--hl-slate-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Details card */
.hl-pp-details {
    padding: 0;
}

.hl-pp-detail-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--hl-slate-50);
}

.hl-pp-detail-row:last-child {
    border-bottom: none;
}

.hl-pp-detail-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    background: var(--hl-slate-50);
    flex-shrink: 0;
}

.hl-pp-detail-label {
    font-size: 11px;
    color: var(--hl-slate-400);
}

.hl-pp-detail-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--hl-slate-900);
}

/* Certificate card */
.hl-pp-cert {
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.hl-pp-cert-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    background: var(--hl-slate-50);
    color: var(--hl-slate-300);
}

.hl-pp-cert-icon.available {
    background: var(--hl-indigo-bg);
    color: #7c3aed;
}

.hl-pp-cert-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-slate-900);
}

.hl-pp-cert-desc {
    font-size: 11px;
    color: var(--hl-slate-400);
}

.hl-pp-cert-btn {
    margin-left: auto;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, var(--hl-indigo), var(--hl-violet));
    color: #fff;
    box-shadow: 0 2px 6px rgba(99, 102, 241, 0.25);
    text-decoration: none;
}

/* ---- Component cards v2 ---- */
.hl-pp-component {
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid var(--hl-slate-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 10px;
    transition: var(--hl-transition);
    min-height: 100px;
}

.hl-pp-component:hover {
    border-color: var(--hl-indigo-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* Component with course image */
.hl-pp-component-image {
    width: 160px;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.hl-pp-component-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hl-pp-component-image .hl-pp-status-overlay {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hl-pp-overlay-completed {
    background: #22c55e;
    color: #fff;
}

.hl-pp-overlay-in-progress {
    background: var(--hl-indigo);
    color: #fff;
}

.hl-pp-overlay-not-started {
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
}

.hl-pp-overlay-locked {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

/* Non-course component icon */
.hl-pp-component-icon {
    width: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--hl-slate-50);
    border-right: 1px solid var(--hl-slate-100);
    font-size: 22px;
}

/* Component body */
.hl-pp-component-body {
    flex: 1;
    padding: 14px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hl-pp-component-type {
    font-size: 10px;
    font-weight: 600;
    color: var(--hl-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 3px;
}

.hl-pp-component-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--hl-slate-900);
    letter-spacing: -0.01em;
    margin: 0 0 3px;
}

.hl-pp-component-desc {
    font-size: 12px;
    color: var(--hl-slate-500);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 8px;
}

.hl-pp-component-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: auto;
}

.hl-pp-component-meta {
    font-size: 11px;
    color: var(--hl-slate-400);
    display: flex;
    align-items: center;
    gap: 4px;
}

.hl-pp-component-progress {
    flex: 1;
    max-width: 100px;
    height: 4px;
    background: var(--hl-slate-100);
    border-radius: var(--hl-radius-pill);
    overflow: hidden;
}

.hl-pp-progress-fill {
    height: 100%;
    border-radius: var(--hl-radius-pill);
}

.hl-pp-fill-active {
    background: var(--hl-indigo);
}

.hl-pp-fill-complete {
    background: #22c55e;
}

.hl-pp-fill-none {
    background: var(--hl-slate-200);
}

.hl-pp-component-action {
    margin-left: auto;
}

/* V2 button styles */
.hl-pp-btn {
    padding: 7px 16px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--hl-font);
    transition: var(--hl-transition);
}

.hl-pp-btn-start {
    background: var(--hl-indigo);
    color: #fff;
}

.hl-pp-btn-start:hover {
    background: var(--hl-indigo-dark);
    color: #fff;
}

.hl-pp-btn-continue {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

.hl-pp-btn-continue:hover {
    background: #dcfce7;
    color: #16a34a;
}

.hl-pp-btn-view {
    background: var(--hl-slate-50);
    color: var(--hl-slate-500);
    border: 1px solid var(--hl-slate-200);
}

.hl-pp-btn-view:hover {
    background: var(--hl-slate-100);
    color: var(--hl-slate-500);
}

/* Locked component */
.hl-pp-component.hl-pp-locked {
    opacity: 0.55;
}

.hl-pp-component.hl-pp-locked:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--hl-slate-200);
}

/* Not Applicable component */
.hl-pp-component.hl-pp-not-applicable {
    opacity: 0.5;
    pointer-events: none;
}

.hl-pp-overlay-not-applicable {
    background: #f0f0f0;
    color: #999;
}

/* User Profile — Not Applicable status */
.hlup-status-not-applicable {
    color: #999;
}

.hl-pp-drip-badge {
    display: inline-flex;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    background: #FEF3C7;
    color: #92400E;
    margin-left: 6px;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .hl-program-page-v2 .hl-pp-layout {
        grid-template-columns: 1fr;
    }

    .hl-pp-sidebar {
        position: static;
    }

    .hl-pp-hero-image {
        display: none;
    }
}

@media (max-width: 600px) {
    .hl-pp-hero-text {
        padding: 20px 24px;
    }

    .hl-pp-hero-title {
        font-size: 18px;
    }

    .hl-pp-component-image {
        width: 100px;
    }

    .hl-pp-component-desc {
        display: none;
    }
}

/* =====================================================
   DASHBOARD V2 — CALM PROFESSIONAL REDESIGN
   Scoped to .hl-dashboard-v2
   ===================================================== */

.hl-dashboard-v2 {
    font-family: var(--hl-font);
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
}

/* ---- Welcome Hero ---- */
.hl-dv2-welcome {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 36px;
}

.hl-dv2-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    overflow: hidden;
}

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

.hl-dv2-welcome-text h2 {
    font-size: 24px;
    font-weight: 800;
    color: var(--hl-slate-900);
    letter-spacing: -0.03em;
    margin: 0 0 2px;
    font-family: var(--hl-font);
}

.hl-dv2-welcome-text p {
    font-size: 14px;
    color: var(--hl-slate-400);
    margin: 0;
}

/* ---- Section ---- */
.hl-dv2-section {
    margin-bottom: 28px;
}

.hl-dv2-section-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--hl-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
    padding-left: 2px;
}

.hl-dv2-divider {
    height: 1px;
    background: var(--hl-slate-100);
    margin: 8px 0 28px;
}

/* ---- Card Grid ---- */
.hl-dv2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

/* ---- Nav Cards ---- */
.hl-dv2-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--hl-slate-200);
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s;
    cursor: pointer;
    position: relative;
}

.hl-dv2-card:hover {
    border-color: var(--hl-indigo-border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    text-decoration: none;
    color: inherit;
}

.hl-dv2-card-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.hl-dv2-card h4 {
    font-size: 15px;
    font-weight: 700;
    color: var(--hl-slate-900);
    letter-spacing: -0.01em;
    margin: 0 0 2px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--hl-font);
}

.hl-dv2-card p {
    font-size: 12px;
    color: var(--hl-slate-400);
    line-height: 1.4;
    margin: 0;
}

.hl-dv2-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: var(--hl-radius-pill);
    font-size: 11px;
    font-weight: 700;
    background: #ef4444;
    color: #fff;
}

.hl-dv2-arrow {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--hl-slate-300);
    font-size: 16px;
    opacity: 0;
    transition: all 0.2s;
}

.hl-dv2-card:hover .hl-dv2-arrow {
    opacity: 1;
    right: 14px;
}

/* ---- Icon Color Variants ---- */
.hl-dv2-icon-programs    { background: #ede9fe; color: #7c3aed; }
.hl-dv2-icon-classrooms  { background: #fef3c7; color: #d97706; }
.hl-dv2-icon-coaching    { background: #dbeafe; color: #2563eb; }
.hl-dv2-icon-team        { background: #fce7f3; color: #db2777; }
.hl-dv2-icon-cycle       { background: #d1fae5; color: #059669; }
.hl-dv2-icon-cycles      { background: #e0e7ff; color: #4f46e5; }
.hl-dv2-icon-institutions { background: #fef3c7; color: #b45309; }
.hl-dv2-icon-learners    { background: #dbeafe; color: #1d4ed8; }
.hl-dv2-icon-pathways    { background: #fce7f3; color: #be185d; }
.hl-dv2-icon-hub         { background: #ccfbf1; color: #0d9488; }
.hl-dv2-icon-reports     { background: #f3e8ff; color: #9333ea; }

/* ---- Empty State ---- */
.hl-dv2-empty {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid var(--hl-slate-200);
    border-radius: 14px;
}

.hl-dv2-empty h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--hl-slate-900);
    margin: 0 0 8px;
}

.hl-dv2-empty p {
    font-size: 14px;
    color: var(--hl-slate-400);
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .hl-dv2-grid {
        grid-template-columns: 1fr;
    }

    .hl-dv2-welcome-text h2 {
        font-size: 20px;
    }

    .hl-dv2-avatar {
        width: 48px;
        height: 48px;
    }
}


/* =====================================================
   CYCLE WORKSPACE V2 — CALM PROFESSIONAL
   =====================================================
   All styles scoped to .hl-cw-v2
   ===================================================== */

/* ---- Back Link ---- */
.hl-cw-v2 .hl-cw-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--hl-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--hl-indigo);
    text-decoration: none;
    margin-bottom: 24px;
}

.hl-cw-v2 .hl-cw-back:hover {
    color: var(--hl-indigo-dark);
}

/* ---- Hero Header ---- */
.hl-cw-v2 .hl-cw-hero {
    border-radius: 16px;
    padding: 28px 32px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%);
}

.hl-cw-v2 .hl-cw-hero::after {
    content: '';
    position: absolute;
    right: -30px;
    top: -30px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.hl-cw-v2 .hl-cw-hero-left {
    flex: 1;
    z-index: 1;
}

.hl-cw-v2 .hl-cw-hero-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: var(--hl-radius-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
    width: fit-content;
}

.hl-cw-v2 .hl-cw-hero-badge-active {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: #86efac;
}

.hl-cw-v2 .hl-cw-hero-badge-completed {
    background: rgba(34, 197, 94, 0.25);
    border: 1px solid rgba(34, 197, 94, 0.5);
    color: #4ade80;
}

.hl-cw-v2 .hl-cw-hero-badge-paused {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: #fcd34d;
}

.hl-cw-v2 .hl-cw-hero-badge-draft {
    background: rgba(148, 163, 184, 0.15);
    border: 1px solid rgba(148, 163, 184, 0.3);
    color: #cbd5e1;
}

.hl-cw-v2 .hl-cw-hero-badge-archived {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.hl-cw-v2 .hl-cw-hero-title {
    font-family: var(--hl-font);
    font-size: 24px;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: -0.03em;
    margin: 0 0 4px !important;
    line-height: 1.2;
}

.hl-cw-v2 .hl-cw-hero-sub {
    font-family: var(--hl-font);
    font-size: 13px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.hl-cw-v2 .hl-cw-hero-scope {
    font-family: var(--hl-font);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    margin: 6px 0 0;
    font-style: italic;
}

.hl-cw-v2 .hl-cw-hero-meta {
    display: flex;
    gap: 20px;
    z-index: 1;
}

.hl-cw-v2 .hl-cw-hero-meta-item {
    font-family: var(--hl-font);
    font-size: 12px;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.hl-cw-v2 .hl-cw-hero-meta-item strong {
    display: block;
    font-size: 20px;
    color: #fff;
    font-weight: 800;
}

/* ---- Filter Bar ---- */
.hl-cw-v2 .hl-cw-filter-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.hl-cw-v2 .hl-cw-filter-bar label {
    font-family: var(--hl-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--hl-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.hl-cw-v2 .hl-cw-filter-select {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--hl-slate-200);
    background: #fff;
    font-family: var(--hl-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--hl-slate-700);
    cursor: pointer;
    min-width: 200px;
    transition: border-color 0.15s;
}

.hl-cw-v2 .hl-cw-filter-select:focus {
    outline: none;
    border-color: var(--hl-indigo-border);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.hl-cw-v2 .hl-cw-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-family: var(--hl-font);
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    color: var(--hl-slate-500);
    border: 1px solid var(--hl-slate-200);
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
}

.hl-cw-v2 .hl-cw-export-btn:hover {
    border-color: var(--hl-indigo-border);
    color: var(--hl-indigo);
}

/* ---- Tabs (underline style) ---- */
.hl-cw-v2 .hl-cw-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--hl-slate-100);
    margin-bottom: 24px;
}

.hl-cw-v2 .hl-cw-tab {
    padding: 10px 22px;
    font-family: var(--hl-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-slate-400);
    cursor: pointer;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    background: none;
}

.hl-cw-v2 .hl-cw-tab:hover {
    color: var(--hl-slate-600);
}

.hl-cw-v2 .hl-cw-tab.active {
    color: var(--hl-slate-900);
    border-bottom-color: var(--hl-indigo);
}

.hl-cw-v2 .hl-cw-panel {
    display: none;
}

.hl-cw-v2 .hl-cw-panel.active {
    display: block;
}

/* ================================================================
   My Cycle (hl_my_cycle / My Partnership) — Tab System
   ================================================================ */
.hl-my-cycle .hl-cycle-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--hl-slate-100);
    margin-bottom: 24px;
}

.hl-my-cycle .hl-cycle-tab {
    padding: 10px 22px;
    font-family: var(--hl-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-slate-400);
    text-decoration: none;
    border: none;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
    background: none;
    display: inline-block;
}

.hl-my-cycle .hl-cycle-tab:hover {
    color: var(--hl-slate-600);
}

.hl-my-cycle .hl-cycle-tab.active {
    color: var(--hl-slate-900);
    border-bottom-color: var(--hl-indigo);
}

.hl-my-cycle .hl-cycle-content {
    display: none;
}

.hl-my-cycle .hl-cycle-content.active {
    display: block;
}

@media (max-width: 600px) {
    .hl-my-cycle .hl-cycle-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .hl-my-cycle .hl-cycle-tab {
        padding: 10px 14px;
        font-size: 12px;
        white-space: nowrap;
    }
}

/* ---- Stats Grid (5-column) ---- */
.hl-cw-v2 .hl-cw-stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.hl-cw-v2 .hl-cw-stat-card {
    background: #fff;
    border: 1px solid var(--hl-slate-200);
    border-radius: 12px;
    padding: 18px 16px;
    text-align: center;
    transition: all 0.15s;
}

.hl-cw-v2 .hl-cw-stat-card:hover {
    border-color: var(--hl-indigo-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hl-cw-v2 .hl-cw-stat-value {
    font-family: var(--hl-font);
    font-size: 28px;
    font-weight: 800;
    color: var(--hl-slate-900);
    letter-spacing: -0.02em;
    line-height: 1;
}

.hl-cw-v2 .hl-cw-stat-value.hl-cw-highlight {
    color: var(--hl-indigo);
}

.hl-cw-v2 .hl-cw-stat-value.hl-cw-success {
    color: #22c55e;
}

.hl-cw-v2 .hl-cw-stat-value.hl-cw-warning {
    color: #f59e0b;
}

.hl-cw-v2 .hl-cw-stat-label {
    font-family: var(--hl-font);
    font-size: 10px;
    font-weight: 600;
    color: var(--hl-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 4px;
}

/* ---- Role Breakdown Row ---- */
.hl-cw-v2 .hl-cw-role-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 28px;
}

.hl-cw-v2 .hl-cw-role-card {
    background: #fff;
    border: 1px solid var(--hl-slate-200);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.15s;
}

.hl-cw-v2 .hl-cw-role-card:hover {
    border-color: var(--hl-indigo-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.hl-cw-v2 .hl-cw-role-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.hl-cw-v2 .hl-cw-role-icon-teachers {
    background: #ede9fe;
    color: #7c3aed;
}

.hl-cw-v2 .hl-cw-role-icon-mentors {
    background: #dbeafe;
    color: #2563eb;
}

.hl-cw-v2 .hl-cw-role-icon-schools {
    background: #fef3c7;
    color: #d97706;
}

.hl-cw-v2 .hl-cw-role-num {
    font-family: var(--hl-font);
    font-size: 22px;
    font-weight: 800;
    color: var(--hl-slate-900);
}

.hl-cw-v2 .hl-cw-role-label {
    font-family: var(--hl-font);
    font-size: 11px;
    color: var(--hl-slate-400);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- Section Label ---- */
.hl-cw-v2 .hl-cw-section-label {
    font-family: var(--hl-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--hl-slate-400);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--hl-slate-100);
}

/* ---- Team Cards ---- */
.hl-cw-v2 .hl-cw-team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
    margin-bottom: 32px;
}

.hl-cw-v2 .hl-cw-team-card {
    background: #fff;
    border: 1px solid var(--hl-slate-200);
    border-radius: 12px;
    padding: 20px 22px;
    transition: all 0.2s;
    position: relative;
    display: flex;
    flex-direction: column;
}

.hl-cw-v2 .hl-cw-team-card:hover {
    border-color: var(--hl-indigo-border);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.hl-cw-v2 .hl-cw-team-name {
    font-family: var(--hl-font);
    font-size: 15px;
    font-weight: 700;
    color: var(--hl-slate-900);
    margin: 0 0 4px;
}

.hl-cw-v2 .hl-cw-team-name a {
    color: inherit;
    text-decoration: none;
}

.hl-cw-v2 .hl-cw-team-name a:hover {
    color: var(--hl-indigo);
}

.hl-cw-v2 .hl-cw-team-school {
    font-family: var(--hl-font);
    font-size: 12px;
    color: var(--hl-slate-400);
    margin: 0 0 12px;
}

.hl-cw-v2 .hl-cw-team-meta {
    display: flex;
    gap: 16px;
    font-family: var(--hl-font);
    font-size: 12px;
    color: var(--hl-slate-500);
    margin-bottom: 14px;
}

.hl-cw-v2 .hl-cw-team-meta strong {
    font-weight: 600;
    color: var(--hl-slate-700);
}

.hl-cw-v2 .hl-cw-team-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.hl-cw-v2 .hl-cw-team-bar {
    flex: 1;
    height: 6px;
    background: var(--hl-slate-100);
    border-radius: var(--hl-radius-pill);
    overflow: hidden;
}

.hl-cw-v2 .hl-cw-team-bar-fill {
    height: 100%;
    border-radius: var(--hl-radius-pill);
    background: linear-gradient(90deg, var(--hl-indigo), var(--hl-violet));
    transition: width 0.4s ease;
}

.hl-cw-v2 .hl-cw-team-pct {
    font-family: var(--hl-font);
    font-size: 13px;
    font-weight: 700;
    color: var(--hl-slate-900);
    min-width: 36px;
    text-align: right;
}

.hl-cw-v2 .hl-cw-team-btn {
    display: inline-flex;
    padding: 8px 18px;
    border-radius: 8px;
    font-family: var(--hl-font);
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--hl-slate-200);
    background: #fff;
    color: var(--hl-slate-500);
    cursor: pointer;
    transition: all 0.15s;
    align-self: flex-start;
    text-decoration: none;
}

.hl-cw-v2 .hl-cw-team-btn:hover {
    border-color: var(--hl-indigo-border);
    color: var(--hl-indigo);
    background: var(--hl-indigo-bg);
}

/* ---- Staff Table ---- */
.hl-cw-v2 .hl-cw-staff-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.hl-cw-v2 .hl-cw-staff-search {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--hl-slate-200);
    background: #fff;
    font-family: var(--hl-font);
    font-size: 13px;
    min-width: 220px;
    color: var(--hl-slate-700);
    transition: border-color 0.15s;
}

.hl-cw-v2 .hl-cw-staff-search::placeholder {
    color: var(--hl-slate-300);
}

.hl-cw-v2 .hl-cw-staff-search:focus {
    outline: none;
    border-color: var(--hl-indigo-border);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.hl-cw-v2 .hl-cw-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--hl-slate-200);
}

.hl-cw-v2 .hl-cw-table th {
    padding: 12px 18px;
    font-family: var(--hl-font);
    font-size: 11px;
    font-weight: 700;
    color: var(--hl-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    background: var(--hl-slate-50);
    border-bottom: 1px solid var(--hl-slate-200);
}

.hl-cw-v2 .hl-cw-table td {
    padding: 14px 18px;
    font-family: var(--hl-font);
    font-size: 13px;
    border-bottom: 1px solid var(--hl-slate-50);
    color: var(--hl-slate-700);
}

.hl-cw-v2 .hl-cw-table tr:last-child td {
    border-bottom: none;
}

.hl-cw-v2 .hl-cw-table tr:hover td {
    background: #fafbff;
}

.hl-cw-v2 .hl-cw-table .hl-cw-name {
    font-weight: 600;
    color: var(--hl-slate-900);
}

.hl-cw-v2 .hl-cw-table .hl-cw-email {
    color: var(--hl-slate-400);
    font-size: 12px;
}

/* ---- Role Badges (pill style) ---- */
.hl-cw-v2 .hl-cw-role-badge {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: var(--hl-radius-pill);
    font-family: var(--hl-font);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.hl-cw-v2 .hl-cw-role-badge + .hl-cw-role-badge {
    margin-left: 4px;
}

.hl-cw-v2 .hl-cw-badge-teacher {
    background: #ede9fe;
    color: #7c3aed;
}

.hl-cw-v2 .hl-cw-badge-mentor {
    background: #dbeafe;
    color: #2563eb;
}

.hl-cw-v2 .hl-cw-badge-school_leader,
.hl-cw-v2 .hl-cw-badge-district_leader {
    background: #fef3c7;
    color: #b45309;
}

/* ---- Inline Progress Bar (staff/reports) ---- */
.hl-cw-v2 .hl-cw-progress {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hl-cw-v2 .hl-cw-progress-bar {
    width: 60px;
    height: 4px;
    background: var(--hl-slate-100);
    border-radius: var(--hl-radius-pill);
    overflow: hidden;
}

.hl-cw-v2 .hl-cw-progress-fill {
    height: 100%;
    border-radius: var(--hl-radius-pill);
    background: var(--hl-indigo);
    transition: width 0.4s ease;
}

.hl-cw-v2 .hl-cw-progress-fill.hl-cw-complete {
    background: #22c55e;
}

.hl-cw-v2 .hl-cw-progress-pct {
    font-family: var(--hl-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--hl-slate-500);
    min-width: 32px;
}

/* ---- Reports Container ---- */
.hl-cw-v2 .hl-cw-report-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.hl-cw-v2 .hl-cw-report-filters {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.hl-cw-v2 .hl-cw-report-filters select,
.hl-cw-v2 .hl-cw-report-filters input {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--hl-slate-200);
    background: #fff;
    font-family: var(--hl-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--hl-slate-700);
    transition: border-color 0.15s;
}

.hl-cw-v2 .hl-cw-report-filters select:focus,
.hl-cw-v2 .hl-cw-report-filters input:focus {
    outline: none;
    border-color: var(--hl-indigo-border);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.hl-cw-v2 .hl-cw-report-filters input::placeholder {
    color: var(--hl-slate-300);
}

/* Detail rows in reports */
.hl-cw-v2 .hl-cw-detail-row {
    display: none;
}

.hl-cw-v2 .hl-cw-detail-row td {
    padding: 0 18px 14px;
    background: var(--hl-slate-50);
}

.hl-cw-v2 .hl-cw-detail-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--hl-slate-200);
    background: #fff;
}

.hl-cw-v2 .hl-cw-detail-table th {
    padding: 8px 14px;
    font-family: var(--hl-font);
    font-size: 10px;
    font-weight: 700;
    color: var(--hl-slate-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    text-align: left;
    background: var(--hl-slate-50);
    border-bottom: 1px solid var(--hl-slate-200);
}

.hl-cw-v2 .hl-cw-detail-table td {
    padding: 10px 14px;
    font-family: var(--hl-font);
    font-size: 12px;
    border-bottom: 1px solid var(--hl-slate-100);
    color: var(--hl-slate-700);
    background: #fff;
}

.hl-cw-v2 .hl-cw-detail-table tr:last-child td {
    border-bottom: none;
}

.hl-cw-v2 .hl-cw-view-btn {
    display: inline-flex;
    padding: 5px 14px;
    border-radius: 6px;
    font-family: var(--hl-font);
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--hl-slate-200);
    background: #fff;
    color: var(--hl-slate-500);
    cursor: pointer;
    transition: all 0.15s;
}

.hl-cw-v2 .hl-cw-view-btn:hover {
    border-color: var(--hl-indigo-border);
    color: var(--hl-indigo);
}

/* Activity type label */
.hl-cw-v2 .hl-cw-activity-type {
    font-family: var(--hl-font);
    font-size: 11px;
    font-weight: 500;
    color: var(--hl-slate-400);
}

/* Status badges in detail table */
.hl-cw-v2 .hl-cw-status-badge {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: var(--hl-radius-pill);
    font-family: var(--hl-font);
    font-size: 11px;
    font-weight: 600;
}

.hl-cw-v2 .hl-cw-status-completed {
    background: #d1fae5;
    color: #065f46;
}

.hl-cw-v2 .hl-cw-status-in-progress {
    background: #dbeafe;
    color: #1d4ed8;
}

.hl-cw-v2 .hl-cw-status-not-started {
    background: var(--hl-slate-100);
    color: var(--hl-slate-500);
}

/* ---- Empty State ---- */
.hl-cw-v2 .hl-cw-empty {
    text-align: center;
    padding: 48px 24px;
    background: #fff;
    border: 1px solid var(--hl-slate-200);
    border-radius: 14px;
}

.hl-cw-v2 .hl-cw-empty p {
    font-family: var(--hl-font);
    font-size: 14px;
    color: var(--hl-slate-400);
    margin: 0;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .hl-cw-v2 .hl-cw-hero {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .hl-cw-v2 .hl-cw-hero-meta {
        flex-wrap: wrap;
        gap: 16px;
    }

    .hl-cw-v2 .hl-cw-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hl-cw-v2 .hl-cw-role-row {
        grid-template-columns: 1fr;
    }

    .hl-cw-v2 .hl-cw-team-grid {
        grid-template-columns: 1fr;
    }

    .hl-cw-v2 .hl-cw-filter-bar {
        flex-wrap: wrap;
    }

    .hl-cw-v2 .hl-cw-staff-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .hl-cw-v2 .hl-cw-report-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .hl-cw-v2 .hl-cw-table {
        font-size: 12px;
    }

    .hl-cw-v2 .hl-cw-table th,
    .hl-cw-v2 .hl-cw-table td {
        padding: 10px 12px;
    }
}

@media (max-width: 600px) {
    .hl-cw-v2 .hl-cw-hero {
        padding: 20px 24px;
    }

    .hl-cw-v2 .hl-cw-hero-title {
        font-size: 18px;
    }

    .hl-cw-v2 .hl-cw-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .hl-cw-v2 .hl-cw-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .hl-cw-v2 .hl-cw-tab {
        padding: 10px 14px;
        font-size: 12px;
        white-space: nowrap;
    }

    .hl-cw-v2 .hl-cw-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* =====================================================================
   User Profile Page (.hlup-*)
   ===================================================================== */

/* ── Breadcrumbs ──────────────────────────────────────────────────── */

.hlup-breadcrumbs {
    font-size: 13px;
    color: var(--hl-text-secondary);
    margin-bottom: 12px;
}

.hlup-breadcrumbs a {
    color: var(--hl-secondary);
    text-decoration: none;
}

.hlup-breadcrumbs a:hover {
    text-decoration: underline;
}

.hlup-breadcrumb-sep {
    margin: 0 6px;
    color: var(--hl-text-muted);
}

.hlup-breadcrumb-current {
    color: var(--hl-text-heading);
    font-weight: 600;
}

.hlup-wrapper {
    max-width: 960px;
    margin: 0 auto;
    padding: 0 4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Hero ─────────────────────────────────────────────────────────── */

.hlup-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%);
    border-radius: var(--hl-radius);
    padding: 32px 36px;
    margin-bottom: 24px;
    color: #fff;
}

.hlup-hero-left {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}

.hlup-hero-avatar {
    flex-shrink: 0;
}

.hlup-hero-avatar .hlup-avatar-img,
.hlup-hero-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid rgba(255, 255, 255, 0.3);
    object-fit: cover;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.hlup-hero-info {
    min-width: 0;
}

.hlup-hero-name {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.2;
    color: #fff;
}

.hlup-hero-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.hlup-hero-roles {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.hlup-role-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    backdrop-filter: blur(4px);
    text-transform: capitalize;
}

.hlup-hero-school {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    opacity: 0.9;
}

.hlup-hero-school svg {
    opacity: 0.7;
}

/* Circular completion indicator */
.hlup-hero-right {
    flex-shrink: 0;
}

.hlup-hero-completion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hlup-completion-circle {
    position: relative;
    width: 72px;
    height: 72px;
}

.hlup-completion-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hlup-circle-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.15);
    stroke-width: 3;
}

.hlup-circle-fill {
    fill: none;
    stroke: #2ECC71;
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}

.hlup-completion-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    font-weight: 700;
    color: #fff;
}

.hlup-completion-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.75;
    font-weight: 600;
}

/* ── Cycle Selector ───────────────────────────────────────────────── */

.hlup-cycle-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.hlup-cycle-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hlup-cycle-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    background: var(--hl-bg);
    color: var(--hl-text-secondary);
    border: 1px solid var(--hl-border);
    text-decoration: none;
    transition: var(--hl-transition);
}

.hlup-cycle-pill:hover {
    background: var(--hl-bg-hover);
    color: var(--hl-text-heading);
    border-color: var(--hl-secondary);
    text-decoration: none;
}

.hlup-cycle-pill.active {
    background: var(--hl-primary);
    color: #fff;
    border-color: var(--hl-primary);
}

/* ── Tab Navigation ───────────────────────────────────────────────── */

.hlup-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 28px;
    border-bottom: 2px solid var(--hl-border-light);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.hlup-tabs::-webkit-scrollbar {
    display: none;
}

.hlup-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hl-text-secondary);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: var(--hl-transition);
}

.hlup-tab:hover {
    color: var(--hl-text-heading);
    text-decoration: none;
}

.hlup-tab.active {
    color: var(--hl-primary);
    border-bottom-color: var(--hl-primary);
}

.hlup-tab svg {
    flex-shrink: 0;
    opacity: 0.6;
}

.hlup-tab.active svg {
    opacity: 1;
}

/* ── Overview Grid ────────────────────────────────────────────────── */

.hlup-overview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

/* ── Cards ────────────────────────────────────────────────────────── */

.hlup-card {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    overflow: hidden;
    transition: var(--hl-transition);
    box-shadow: var(--hl-shadow);
}

.hlup-card:hover {
    box-shadow: var(--hl-shadow-md);
}

.hlup-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-bottom: 1px solid var(--hl-border-light);
    background: var(--hl-bg-card);
}

.hlup-card-header svg {
    flex-shrink: 0;
    color: var(--hl-primary);
}

.hlup-card-header h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--hl-text-heading);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.hlup-card-body {
    padding: 16px 20px;
}

/* ── Fields ───────────────────────────────────────────────────────── */

.hlup-field {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 0;
    border-bottom: 1px solid var(--hl-border);
}

.hlup-field:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.hlup-field:first-child {
    padding-top: 0;
}

.hlup-field-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--hl-text-secondary);
    flex-shrink: 0;
    min-width: 80px;
}

.hlup-field-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-text-heading);
    text-align: right;
    word-break: break-word;
}

.hlup-field-empty {
    font-size: 14px;
    color: var(--hl-text-muted);
    font-style: italic;
    margin: 4px 0 0;
}

/* Progress bar within field */
.hlup-field-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 200px;
}

.hlup-progress-track {
    flex: 1;
    height: 8px;
    background: var(--hl-border);
    border-radius: 20px;
    overflow: hidden;
}

.hlup-progress-fill {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--hl-primary) 0%, var(--hl-secondary) 100%);
    transition: width 0.5s ease;
}

.hlup-progress-fill.complete {
    background: linear-gradient(90deg, var(--hl-accent-dark) 0%, var(--hl-accent) 100%);
}

.hlup-progress-pct {
    font-size: 13px;
    font-weight: 700;
    color: var(--hl-text-heading);
    min-width: 36px;
    text-align: right;
}

/* ── Classroom Items ──────────────────────────────────────────────── */

.hlup-classroom-item {
    display: flex;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--hl-border);
}

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

.hlup-classroom-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-text);
}

/* ── Empty State ──────────────────────────────────────────────────── */

.hlup-empty-state {
    text-align: center;
    padding: 56px 32px;
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
}

.hlup-empty-state svg {
    color: var(--hl-text-muted);
    margin-bottom: 16px;
}

.hlup-empty-state h3 {
    margin: 0 0 8px;
    font-size: 18px;
    color: var(--hl-text-heading);
}

.hlup-empty-state p {
    margin: 0;
    font-size: 14px;
    color: var(--hl-text-secondary);
}

.hlup-empty-email {
    margin-top: 8px !important;
    font-size: 13px !important;
    color: var(--hl-text-muted) !important;
}

/* ── Placeholder Tab (future phases) ──────────────────────────────── */

.hlup-placeholder-tab {
    text-align: center;
    padding: 60px 24px;
    background: var(--hl-surface);
    border: 1px dashed var(--hl-border);
    border-radius: var(--hl-radius);
}

.hlup-placeholder-icon {
    color: var(--hl-text-muted);
    margin-bottom: 16px;
}

.hlup-placeholder-title {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
    color: var(--hl-text-heading);
}

.hlup-placeholder-text {
    margin: 0;
    font-size: 14px;
    color: var(--hl-text-secondary);
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .hlup-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }

    .hlup-hero-left {
        flex-direction: column;
        align-items: center;
    }

    .hlup-hero-info {
        text-align: center;
    }

    .hlup-hero-meta {
        justify-content: center;
    }

    .hlup-hero-name {
        font-size: 20px;
    }

    .hlup-overview-grid {
        grid-template-columns: 1fr;
    }

    .hlup-field {
        flex-direction: column;
        gap: 4px;
    }

    .hlup-field-value {
        text-align: left;
    }

    .hlup-field-progress {
        max-width: 100%;
    }

    .hlup-tab-label {
        display: none;
    }

    .hlup-tab {
        padding: 12px;
    }

    .hlup-tab svg {
        width: 20px;
        height: 20px;
    }
}

/* ── Progress Tab ─────────────────────────────────────────────────── */

.hlup-prog-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 24px 28px;
    margin-bottom: 24px;
}

.hlup-prog-summary-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: var(--hl-text-heading);
}

.hlup-prog-summary-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hlup-prog-meta-item {
    font-size: 13px;
    color: var(--hl-text-secondary);
    font-weight: 500;
}

.hlup-prog-summary-pct {
    flex-shrink: 0;
}

.hlup-prog-overall-ring {
    position: relative;
    width: 64px;
    height: 64px;
}

.hlup-prog-overall-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hlup-ring-bg {
    fill: none;
    stroke: var(--hl-border);
    stroke-width: 3;
}

.hlup-ring-fill {
    fill: none;
    stroke: var(--hl-accent);
    stroke-width: 3;
    stroke-linecap: round;
    transition: stroke-dasharray 0.6s ease;
}

.hlup-ring-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 700;
    color: var(--hl-text-heading);
}

/* ── Pathway Card ─────────────────────────────────────────────────── */

.hlup-pathway-card {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    margin-bottom: 18px;
    overflow: hidden;
    box-shadow: var(--hl-shadow);
}

.hlup-pathway-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    background: var(--hl-bg-card);
    border-bottom: 1px solid var(--hl-border-light);
}

.hlup-pathway-info {
    min-width: 0;
}

.hlup-pathway-name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--hl-text-heading);
}

.hlup-pathway-counts {
    font-size: 12px;
    color: var(--hl-text-secondary);
    font-weight: 500;
}

.hlup-pathway-pct-group {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.hlup-pathway-bar {
    width: 100px;
    height: 8px;
    background: var(--hl-border);
    border-radius: 20px;
    overflow: hidden;
}

.hlup-pathway-bar-fill {
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(90deg, var(--hl-primary) 0%, var(--hl-secondary) 100%);
    transition: width 0.5s ease;
}

.hlup-pathway-bar-fill.complete {
    background: linear-gradient(90deg, var(--hl-accent-dark) 0%, var(--hl-accent) 100%);
}

.hlup-pathway-pct-text {
    font-size: 14px;
    font-weight: 700;
    color: var(--hl-text-heading);
    min-width: 36px;
    text-align: right;
}

/* ── Component List ───────────────────────────────────────────────── */

.hlup-component-list {
    padding: 4px 0;
}

.hlup-component-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    border-bottom: 1px solid var(--hl-border);
    transition: background 0.15s ease;
}

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

.hlup-component-row:hover {
    background: var(--hl-bg);
}

.hlup-component-index {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--hl-bg);
    font-size: 11px;
    font-weight: 700;
    color: var(--hl-text-secondary);
    flex-shrink: 0;
}

.hlup-component-main {
    flex: 1;
    min-width: 0;
}

.hlup-component-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-text);
    line-height: 1.3;
}

.hlup-component-type {
    font-size: 11px;
    color: var(--hl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-weight: 600;
}

/* Component status badges */
.hlup-component-status {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.hlup-status-not-started {
    color: var(--hl-text-muted);
}

.hlup-status-in-progress {
    color: var(--hl-secondary);
}

.hlup-status-complete {
    color: var(--hl-accent-dark);
}

.hlup-component-status-label {
    display: inline;
}

/* Component mini progress bar */
.hlup-component-pct {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    width: 110px;
}

.hlup-component-bar {
    flex: 1;
    height: 6px;
    background: var(--hl-border);
    border-radius: 20px;
    overflow: hidden;
}

.hlup-component-bar-fill {
    height: 100%;
    border-radius: 20px;
    background: var(--hl-secondary);
    transition: width 0.4s ease;
}

.hlup-component-bar-fill.complete {
    background: var(--hl-accent);
}

.hlup-component-pct-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--hl-text-secondary);
    min-width: 30px;
    text-align: right;
}

/* ── Progress Tab Responsive ──────────────────────────────────────── */

@media (max-width: 768px) {
    .hlup-prog-summary {
        flex-direction: column;
        text-align: center;
    }

    .hlup-prog-summary-meta {
        justify-content: center;
    }

    .hlup-pathway-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .hlup-pathway-pct-group {
        width: 100%;
    }

    .hlup-pathway-bar {
        flex: 1;
        width: auto;
    }

    .hlup-component-row {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 16px;
    }

    .hlup-component-pct {
        width: 100%;
        margin-left: 36px;
    }

    .hlup-component-status-label {
        display: none;
    }
}

/* ── Coaching Tab ─────────────────────────────────────────────────── */

.hlup-coach-schedule-bar {
    margin-bottom: 20px;
}

.hlup-coach-schedule-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: var(--hl-primary);
    color: #fff;
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--hl-transition);
}

.hlup-coach-schedule-btn:hover {
    background: var(--hl-primary-light);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--hl-shadow-hover);
}

.hlup-coach-all-scheduled {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 20px;
    background: #d1fae5;
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: #065f46;
}

.hlup-coach-section {
    margin-bottom: 20px;
}

.hlup-coach-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--hl-text-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hlup-coach-section-title svg {
    color: var(--hl-text-secondary);
}

.hlup-coach-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--hl-bg);
    font-size: 12px;
    font-weight: 700;
    color: var(--hl-text-secondary);
}

/* ── Session Card ─────────────────────────────────────────────────── */

.hlup-session-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 22px;
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius-sm);
    margin-bottom: 10px;
    transition: var(--hl-transition);
}

.hlup-session-card:hover {
    box-shadow: var(--hl-shadow-md);
    border-color: var(--hl-border);
}

.hlup-session-card.upcoming {
    border-left: 3px solid var(--hl-secondary);
}

.hlup-session-main {
    min-width: 0;
    flex: 1;
}

.hlup-session-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin-bottom: 4px;
}

.hlup-session-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hlup-session-date,
.hlup-session-coach {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--hl-text-secondary);
}

.hlup-session-date svg,
.hlup-session-coach svg {
    opacity: 0.5;
    flex-shrink: 0;
}

.hlup-session-time {
    margin-left: 4px;
    color: var(--hl-text-muted);
}

.hlup-session-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.hlup-session-join {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: var(--hl-secondary);
    color: #fff;
    border-radius: var(--hl-radius-xs);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: var(--hl-transition);
}

.hlup-session-join:hover {
    background: #1a6ad4;
    color: #fff;
    text-decoration: none;
}

/* ── Action Plan Card ─────────────────────────────────────────────── */

.hlup-action-plan-card {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--hl-shadow);
}

.hlup-ap-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--hl-bg);
    border-bottom: 1px solid var(--hl-border);
}

.hlup-ap-session {
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text-heading);
}

.hlup-ap-date {
    font-size: 12px;
    color: var(--hl-text-muted);
}

.hlup-ap-field {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 10px 16px;
    border-bottom: 1px solid var(--hl-border);
}

.hlup-ap-field:last-child {
    border-bottom: none;
}

.hlup-ap-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--hl-text-secondary);
    flex-shrink: 0;
}

.hlup-ap-value {
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-text);
    text-align: right;
    word-break: break-word;
}

/* ── Coaching Tab Responsive ──────────────────────────────────────── */

@media (max-width: 768px) {
    .hlup-session-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .hlup-session-actions {
        align-self: flex-end;
    }

    .hlup-ap-field {
        flex-direction: column;
        gap: 4px;
    }

    .hlup-ap-value {
        text-align: left;
    }
}

/* ── Assessments Tab ──────────────────────────────────────────────── */

.hlup-assess-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.hlup-assess-stat-card {
    flex: 1;
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 18px 22px;
    text-align: center;
}

.hlup-assess-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: var(--hl-text-heading);
    line-height: 1.1;
}

.hlup-assess-stat-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--hl-text-secondary);
    margin-top: 4px;
}

.hlup-assess-stat-sub {
    font-size: 12px;
    color: var(--hl-text-muted);
    margin-top: 2px;
}

.hlup-assess-section {
    margin-bottom: 24px;
}

.hlup-assess-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--hl-text-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hlup-assess-section-title svg {
    color: var(--hl-text-secondary);
}

/* ── Assessment Card ──────────────────────────────────────────────── */

.hlup-assess-card {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius-sm);
    margin-bottom: 10px;
    overflow: hidden;
    box-shadow: var(--hl-shadow);
}

.hlup-assess-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
}

.hlup-assess-card-info {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
}

.hlup-assess-phase {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.hlup-assess-phase.pre {
    background: #dbeafe;
    color: #1e40af;
}

.hlup-assess-phase.post {
    background: #fef3c7;
    color: #92400e;
}

.hlup-assess-card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-text);
}

.hlup-assess-age-band {
    font-size: 12px;
    color: var(--hl-text-muted);
    background: var(--hl-bg);
    padding: 2px 8px;
    border-radius: 4px;
}

.hlup-assess-card-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.hlup-assess-date {
    font-size: 13px;
    color: var(--hl-text-muted);
}

.hlup-assess-children {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--hl-text-secondary);
}

/* Assessment status badges */
.hlup-assess-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.hlup-badge-submitted {
    background: #d1fae5;
    color: #065f46;
}

.hlup-badge-draft {
    background: #fef3c7;
    color: #92400e;
}

.hlup-badge-pending {
    background: #f3f4f6;
    color: #6b7280;
}

/* View toggle button */
.hlup-assess-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-xs);
    background: var(--hl-surface);
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-secondary);
    cursor: pointer;
    transition: var(--hl-transition);
}

.hlup-assess-toggle:hover {
    background: var(--hl-bg-hover);
    border-color: var(--hl-secondary);
}

.hlup-assess-toggle.open svg {
    transform: rotate(180deg);
}

/* Inline responses panel */
.hlup-assess-responses {
    border-top: 1px solid var(--hl-border);
    padding: 16px;
    background: var(--hl-bg);
}

/* ── Assessments Tab Responsive ───────────────────────────────────── */

@media (max-width: 768px) {
    .hlup-assess-stats {
        flex-direction: column;
    }

    .hlup-assess-card-main {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .hlup-assess-card-right {
        align-self: flex-end;
    }
}

/* ── RP & Observations Tab ────────────────────────────────────────── */

.hlup-rp-section {
    margin-bottom: 24px;
}

.hlup-rp-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--hl-text-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hlup-rp-section-title svg {
    color: var(--hl-text-secondary);
}

.hlup-rp-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    background: var(--hl-bg);
    font-size: 12px;
    font-weight: 700;
    color: var(--hl-text-secondary);
}

.hlup-rp-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    background: var(--hl-bg-card);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius-sm);
    margin-bottom: 10px;
    transition: var(--hl-transition);
}

.hlup-rp-card:hover {
    box-shadow: var(--hl-shadow-md);
    border-color: var(--hl-border);
}

.hlup-rp-card-left {
    min-width: 0;
}

.hlup-rp-number {
    font-size: 14px;
    font-weight: 600;
    color: var(--hl-text-heading);
}

.hlup-rp-card-meta {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.hlup-rp-date,
.hlup-rp-partner {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--hl-text-secondary);
}

.hlup-rp-date svg,
.hlup-rp-partner svg {
    opacity: 0.5;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .hlup-rp-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ── Manage Tab ───────────────────────────────────────────────────── */

.hlup-manage-flash {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    margin-bottom: 20px;
    background: #d1fae5;
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    font-weight: 500;
    color: #065f46;
}

.hlup-manage-section {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border-light);
    border-radius: var(--hl-radius);
    padding: 24px 28px;
    margin-bottom: 18px;
    box-shadow: var(--hl-shadow);
}

.hlup-manage-section-title {
    margin: 0 0 16px;
    font-size: 14px;
    font-weight: 700;
    color: var(--hl-text-heading);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.hlup-manage-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.hlup-manage-form .hlup-manage-btn {
    align-self: flex-start;
}

.hlup-manage-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.hlup-manage-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hlup-manage-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text-secondary);
}

.hlup-manage-field input[type="text"],
.hlup-manage-field input[type="email"],
.hlup-manage-field select {
    padding: 10px 14px;
    border: 1.5px solid var(--hl-border);
    border-radius: var(--hl-radius-xs);
    font-size: 14px;
    font-family: inherit;
    color: var(--hl-text);
    background: var(--hl-surface);
    transition: border-color 0.2s ease;
}

.hlup-manage-field input:focus,
.hlup-manage-field select:focus {
    outline: none;
    border-color: var(--hl-secondary);
    box-shadow: 0 0 0 4px rgba(44, 123, 229, 0.08);
}

.hlup-manage-checkboxes {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.hlup-manage-checkbox {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-text);
    cursor: pointer;
}

.hlup-manage-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--hl-primary);
}

/* Buttons */
.hlup-manage-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: var(--hl-radius-xs);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--hl-transition);
}

.hlup-manage-btn.primary {
    background: var(--hl-primary);
    color: #fff;
}

.hlup-manage-btn.primary:hover {
    background: var(--hl-primary-light);
}

.hlup-manage-btn.secondary {
    background: var(--hl-bg);
    color: var(--hl-text);
    border: 1px solid var(--hl-border);
}

.hlup-manage-btn.secondary:hover {
    background: var(--hl-bg-hover);
    border-color: var(--hl-text-secondary);
}

.hlup-manage-btn.danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.hlup-manage-btn.danger:hover {
    background: #fecaca;
}

.hlup-manage-btn.danger-sm {
    background: transparent;
    color: #dc2626;
    padding: 4px 10px;
    font-size: 12px;
}

.hlup-manage-btn.danger-sm:hover {
    background: #fee2e2;
}

.hlup-manage-coach-inherited {
    font-size: 13px;
    color: var(--hl-text-secondary);
    margin: 0 0 4px;
}

/* Pathway list */
.hlup-manage-pathway-list {
    margin-bottom: 12px;
}

.hlup-manage-pathway-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--hl-border);
}

.hlup-manage-pathway-row:last-child {
    border-bottom: none;
}

.hlup-manage-pathway-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-text);
}

.hlup-manage-inline-form {
    display: inline;
}

.hlup-manage-assign-form {
    margin-top: 8px;
}

.hlup-manage-assign-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hlup-manage-assign-row select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-xs);
    font-size: 14px;
    font-family: inherit;
    color: var(--hl-text);
}

.hlup-manage-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Danger zone */
.hlup-manage-danger {
    border-color: #fecaca;
}

.hlup-manage-danger .hlup-manage-section-title {
    color: #991b1b;
}

.hlup-manage-danger-text {
    font-size: 14px;
    color: var(--hl-text-secondary);
    margin: 0 0 12px;
}

@media (max-width: 768px) {
    .hlup-manage-section {
        padding: 16px;
    }

    .hlup-manage-checkboxes {
        flex-direction: column;
        gap: 8px;
    }

    .hlup-manage-assign-row {
        flex-direction: column;
    }

    .hlup-manage-assign-row select {
        width: 100%;
    }

    .hlup-manage-field-row {
        grid-template-columns: 1fr;
    }
}

/* --- View As & Switch-back --- */
.hlup-view-as-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
    margin-left: 4px;
}
.hlup-view-as-btn:hover {
    background: rgba(255,255,255,0.25);
    border-color: rgba(255,255,255,0.5);
    color: #fff;
    text-decoration: none;
}

.hlup-switch-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fef3c7;
    border: 1px solid #f59e0b;
    color: #92400e;
    padding: 10px 16px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 13px;
    font-weight: 500;
}
.hlup-switch-banner svg {
    flex-shrink: 0;
    color: #d97706;
}
.hlup-switch-back-link {
    margin-left: auto;
    font-weight: 700;
    color: #d97706;
    text-decoration: none;
    white-space: nowrap;
}
.hlup-switch-back-link:hover {
    color: #92400e;
    text-decoration: underline;
}

/* =====================================================
   COMPONENT LIBRARY — REUSABLE DESIGN SYSTEM
   Used across all frontend pages. Refer to the spec at
   docs/superpowers/specs/2026-04-01-design-system-spec.md
   ===================================================== */

/* ---- Cards ---- */
.hl-card {
    background: var(--hl-surface);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--hl-shadow);
}
.hl-card-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--hl-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

/* ---- Buttons (BEM variants) ----
   Base .hl-btn is in Section 12. These BEM modifiers layer on top.
   ---------------------------------------------------- */
.hl-btn--accent {
    background: var(--hl-accent);
    color: #fff;
}
.hl-btn--accent:hover {
    background: var(--hl-accent-dark);
    color: #fff;
}
.hl-btn--interactive {
    background: var(--hl-interactive);
    color: #fff;
}
.hl-btn--interactive:hover {
    background: var(--hl-interactive-dark);
    color: #fff;
}
.hl-btn--outline {
    background: transparent;
    border: 1px solid var(--hl-border);
    color: var(--hl-text-secondary);
}
.hl-btn--outline:hover {
    border-color: var(--hl-interactive);
    color: var(--hl-interactive);
}
.hl-btn--danger {
    background: var(--hl-error);
    color: #fff;
}
.hl-btn--danger:hover {
    background: var(--hl-error-dark);
    color: #fff;
}
.hl-btn--sm {
    padding: 6px 14px;
    font-size: 12px;
}

/* ---- Badges (BEM variants) ----
   Base .hl-badge is in Section 8. These BEM modifiers layer on top.
   ---------------------------------------------------- */
.hl-badge--success {
    background: var(--hl-status-active-bg);
    color: var(--hl-status-active-text);
}
.hl-badge--warning {
    background: var(--hl-status-paused-bg);
    color: var(--hl-status-paused-text);
}
.hl-badge--error {
    background: var(--hl-status-archived-bg);
    color: var(--hl-status-archived-text);
}
.hl-badge--info {
    background: var(--hl-status-progress-bg);
    color: var(--hl-status-progress-text);
}
.hl-badge--draft {
    background: var(--hl-status-draft-bg);
    color: var(--hl-status-draft-text);
}

/* ---- Pills / Tags ---- */
.hl-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--hl-radius-pill);
    font-size: 12px;
    font-weight: 600;
}
.hl-pill--interactive {
    background: var(--hl-interactive);
    color: #fff;
}
.hl-pill--primary {
    background: var(--hl-primary);
    color: #fff;
}
.hl-pill--outline {
    background: transparent;
    border: 1.5px dashed var(--hl-border);
    color: var(--hl-text-secondary);
    cursor: pointer;
}
.hl-pill--outline:hover {
    border-color: var(--hl-interactive);
    color: var(--hl-interactive);
}

/* ---- Tabs ---- */
.hl-tabs-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--hl-border-light);
    margin-bottom: 24px;
}
.hl-tabs-bar__tab {
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: var(--hl-transition);
    text-decoration: none;
    background: none;
    border-top: none;
    border-left: none;
    border-right: none;
}
.hl-tabs-bar__tab:hover {
    color: var(--hl-text-heading);
    text-decoration: none;
}
.hl-tabs-bar__tab--active {
    color: var(--hl-interactive);
    border-bottom-color: var(--hl-interactive);
    font-weight: 600;
}

/* ---- Hero Banner ---- */
.hl-hero {
    background: var(--hl-primary);
    border-radius: var(--hl-radius);
    padding: 28px 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}
.hl-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
}
.hl-hero__tag {
    display: inline-block;
    background: var(--hl-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: var(--hl-radius-pill);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.hl-hero__title {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    margin-bottom: 6px;
}
.hl-hero__subtitle {
    color: rgba(255,255,255,0.65);
    font-size: 14px;
}

/* ---- Page Hero — reusable header for Team, Classroom, School pages ---- */
.hl-page-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%);
    color: #fff;
    padding: 28px 32px;
    border-radius: var(--hl-radius);
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}
.hl-page-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
}
.hl-page-hero__icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.12);
    border-radius: var(--hl-radius);
    display: flex;
    align-items: center;
    justify-content: center;
}
.hl-page-hero__icon .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: #fff;
}
.hl-page-hero__tag {
    display: inline-block;
    background: var(--hl-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: var(--hl-radius-pill);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.hl-page-hero__title {
    color: #fff;
    font-size: 26px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -0.3px;
}
.hl-page-hero__text {
    flex: 1;
    min-width: 0;
}
.hl-page-hero__subtitle {
    color: rgba(255,255,255,0.65);
    font-size: 14px;
    margin: 4px 0 0;
}

/* ---- Meta Bar — info cards row below page heroes ---- */
.hl-meta-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

@media (max-width: 600px) {
    .hl-page-hero {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
    }
    .hl-meta-bar {
        flex-direction: column;
    }
}

/* ---- Meta Bar ---- (defined above in Page Hero section) */
.hl-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hl-surface);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    padding: 12px 16px;
    flex: 1;
    min-width: 160px;
    color: var(--hl-text-secondary);
}
.hl-meta-item__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--hl-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hl-text-secondary);
    font-size: 16px;
}
.hl-meta-item__label {
    font-size: 10px;
    font-weight: 600;
    color: var(--hl-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.hl-meta-item__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin-top: 1px;
}

/* ---- Tables ---- */
.hl-table {
    width: 100%;
    border-collapse: collapse;
}
.hl-table th {
    text-align: left;
    padding: 10px 14px;
    font-size: 11px;
    font-weight: 600;
    color: var(--hl-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--hl-border);
    background: transparent;
}
.hl-table td {
    padding: 12px 14px;
    font-size: 14px;
    color: var(--hl-text);
    border-bottom: 1px solid var(--hl-border-light);
}
.hl-table tr:hover td {
    background: var(--hl-bg-subtle);
}
.hl-table__link {
    color: var(--hl-interactive);
    font-weight: 500;
    text-decoration: none;
}
.hl-table__link:hover {
    color: var(--hl-interactive-dark);
    text-decoration: underline;
}

/* ---- Progress Bar ---- */
.hl-progress {
    height: 6px;
    background: var(--hl-border-light);
    border-radius: 3px;
    overflow: hidden;
}
.hl-progress__fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
}
.hl-progress__fill--accent {
    background: var(--hl-accent);
}
.hl-progress__fill--interactive {
    background: var(--hl-interactive);
}
.hl-progress__fill--warning {
    background: var(--hl-warning);
}

/* ---- Rating Circles ---- */
.hl-rating {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin: 12px 0 4px;
}
.hl-rating__circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid var(--hl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 700;
    color: var(--hl-text-secondary);
    cursor: pointer;
    transition: var(--hl-transition);
}
.hl-rating__circle:hover {
    border-color: var(--hl-interactive);
    color: var(--hl-interactive);
}
.hl-rating__circle--selected {
    background: var(--hl-interactive);
    border-color: var(--hl-interactive);
    color: #fff;
}

/* ---- Breadcrumb ---- */
.hl-breadcrumb {
    font-size: 13px;
    color: var(--hl-text-secondary);
    margin-bottom: 16px;
}
.hl-breadcrumb a {
    color: var(--hl-interactive);
    text-decoration: none;
}
.hl-breadcrumb a:hover {
    text-decoration: underline;
}

/* ---- Section Divider ---- */
.hl-section-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 24px 0 16px;
    font-size: 15px;
    font-weight: 700;
    color: var(--hl-text-heading);
}
.hl-section-divider__num {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--hl-interactive-bg);
    color: var(--hl-interactive);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}
.hl-section-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--hl-border);
}

/* ---- Empty State ---- */
.hl-empty {
    text-align: center;
    padding: 48px 24px;
    color: var(--hl-text-muted);
    font-size: 14px;
}

/* ---- Notice (BEM variants) ----
   Base .hl-notice is in Section 4. These BEM modifiers layer on top.
   ---------------------------------------------------- */
.hl-notice--info {
    background: var(--hl-status-progress-bg);
    color: var(--hl-status-progress-text);
    border: 1px solid rgba(29, 78, 216, 0.15);
}
.hl-notice--success {
    background: var(--hl-status-active-bg);
    color: var(--hl-status-active-text);
    border: 1px solid rgba(6, 95, 70, 0.15);
}
.hl-notice--warning {
    background: var(--hl-status-paused-bg);
    color: var(--hl-status-paused-text);
    border: 1px solid rgba(146, 64, 14, 0.15);
}
.hl-notice--error {
    background: var(--hl-status-archived-bg);
    color: var(--hl-status-archived-text);
    border: 1px solid rgba(153, 27, 27, 0.15);
}

/* =====================================================
   SIDEBAR — HL CORE CUSTOM SIDEBAR
   Replaces BuddyBoss BuddyPanel for all HL pages.
   ===================================================== */

/* Sidebar base — fixed position, always visible */
.hl-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 240px;
    height: 100vh;
    background: var(--hl-primary);
    display: flex;
    flex-direction: column;
    z-index: 9999;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Brand */
.hl-sidebar__brand {
    padding: 20px 20px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 8px;
}
.hl-sidebar__logo {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(255,255,255,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hl-accent);
    font-weight: 800;
    font-size: 15px;
    margin-bottom: 10px;
}
.hl-sidebar__logo-link {
    display: block;
    text-decoration: none !important;
}
.hl-sidebar__logo-img {
    display: block;
    max-width: 136px;
    max-height: 54px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.hl-sidebar__title {
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
}
.hl-sidebar__subtitle {
    color: rgba(255,255,255,0.4) !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: 2px;
}

/* Nav section */
.hl-sidebar__nav {
    padding: 4px 12px;
    flex: 1;
}
.hl-sidebar__section-label {
    color: rgba(255,255,255,0.3);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 12px 8px 4px;
}

/* Nav items */
.hl-sidebar__item,
.hl-sidebar a.hl-sidebar__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(255,255,255,0.6) !important;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none !important;
    transition: all 0.15s ease;
    cursor: pointer;
}
.hl-sidebar__item:hover,
.hl-sidebar a.hl-sidebar__item:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85) !important;
    text-decoration: none !important;
}
.hl-sidebar__item--active,
.hl-sidebar a.hl-sidebar__item--active {
    background: rgba(255,255,255,0.1);
    color: #fff !important;
}
.hl-sidebar__icon {
    width: 20px;
    text-align: center;
    font-size: 18px;
}
.hl-sidebar__badge {
    margin-left: auto;
    background: var(--hl-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--hl-radius-pill);
    min-width: 20px;
    text-align: center;
}

/* Footer */
.hl-sidebar__footer {
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
/* Topbar right-side actions group */
.hl-topbar__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
}
/* WPML language switcher — flag + name dropdown (topbar, light bg) */
.hl-lang-switcher {
    position: relative;
}
.hl-lang-switcher__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: transparent;
    color: var(--hl-text-secondary);
    border: 1px solid var(--hl-border);
    border-radius: 6px;
    font-family: var(--hl-font);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}
.hl-lang-switcher__toggle:hover {
    background: var(--hl-bg);
    border-color: var(--hl-text-secondary);
    color: var(--hl-text);
}
.hl-lang-switcher__flag {
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
}
.hl-lang-switcher__flag svg {
    display: block;
}
.hl-lang-switcher__name {
    text-align: left;
}
.hl-lang-switcher__arrow {
    flex-shrink: 0;
    color: var(--hl-text-secondary);
    transition: transform 0.2s;
}
.hl-lang-switcher[data-open="true"] .hl-lang-switcher__arrow {
    transform: rotate(180deg);
}
/* Dropdown menu — opens downward from topbar */
.hl-lang-switcher__menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 160px;
    background: var(--hl-surface);
    border: 1px solid var(--hl-border);
    border-radius: 8px;
    padding: 4px;
    margin: 0;
    list-style: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    z-index: 10000;
}
.hl-lang-switcher[data-open="true"] .hl-lang-switcher__menu {
    display: block;
}
.hl-lang-switcher__menu li {
    margin: 0;
    padding: 0;
}
.hl-lang-switcher__option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    color: var(--hl-text-secondary);
    text-decoration: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.12s, color 0.12s;
}
.hl-lang-switcher__option:hover {
    background: var(--hl-bg);
    color: var(--hl-text);
    text-decoration: none;
}

/* HL Sidebar dashicons */
.hl-sidebar .dashicons {
    font-size: 20px !important;
    width: 20px !important;
    height: 20px !important;
    line-height: 20px !important;
}

/* =====================================================
   LAYOUT SHELL — TOP BAR & CONTENT AREA
   ===================================================== */

/* Top bar — fixed at top, offset by sidebar width */
.hl-topbar {
    position: fixed;
    top: 0;
    left: 240px;
    right: 0;
    z-index: 9998;
    background: var(--hl-surface);
    border-bottom: 1px solid var(--hl-border);
    padding: 12px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: var(--hl-font);
    height: 48px;
}
.hl-topbar .hl-breadcrumb {
    margin-bottom: 0;
}
/* User dropdown wrapper */
.hl-topbar__user-wrap {
    position: relative;
}
.hl-topbar__user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--hl-text-secondary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 8px;
    font-family: var(--hl-font);
    transition: background 0.15s;
}
.hl-topbar__user-btn:hover {
    background: var(--hl-interactive-bg);
    color: var(--hl-text);
}
.hl-topbar__user-name {
    font-size: 13px;
}
.hl-topbar__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.hl-topbar__avatar--initials {
    background: var(--hl-interactive-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hl-interactive);
    font-weight: 700;
    font-size: 12px;
    font-family: var(--hl-font);
}
.hl-topbar__dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--hl-surface);
    border: 1px solid var(--hl-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    min-width: 180px;
    z-index: 10000;
    overflow: hidden;
}
.hl-topbar__dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: var(--hl-text) !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.15s;
}
.hl-topbar__dropdown-item:hover {
    background: var(--hl-interactive-bg);
    text-decoration: none !important;
}
.hl-topbar__dropdown-item .dashicons {
    font-size: 16px !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 16px !important;
    color: var(--hl-text-secondary);
}

/* --- View-As topbar indicator --- */
.hl-topbar--view-as {
    border-bottom: 2px solid #f59e0b;
}
.hl-topbar__dropdown-notice {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #92400e;
    background: #fef3c7;
}
.hl-topbar__dropdown-item--switch-back {
    color: #d97706 !important;
    font-weight: 600;
}
.hl-topbar__dropdown-item--switch-back .dashicons {
    color: #d97706 !important;
}
.hl-topbar__dropdown-item--switch-back:hover {
    background: #fef3c7 !important;
}
.hl-topbar__dropdown-divider {
    height: 1px;
    background: var(--hl-border);
}

/* Content area — offset for fixed topbar (48px) + sidebar (240px) */
.hl-app__content {
    margin-left: 240px;
    padding: 72px 32px 24px;
    background: var(--hl-bg);
    min-height: 100vh;
    box-sizing: border-box;
}
@media (min-width: 1600px) {
    .hl-app__content {
        padding: 72px 48px 24px;
    }
}
@media (min-width: 1920px) {
    .hl-app__content {
        padding: 72px 64px 24px;
    }
}

/* =====================================================
   NAV SHELL ON BB THEME PAGES (LearnDash, Community)
   Offsets the BB theme content to make room for the
   HL sidebar + topbar injected via wp_body_open.
   ===================================================== */
body.hl-has-nav #page {
    margin-left: 240px;
    padding-top: 48px;
}
body.hl-has-nav #masthead {
    display: none;
}
body.hl-has-nav .bb-mobile-header {
    display: none;
}
@media (max-width: 1024px) {
    body.hl-has-nav #page {
        margin-left: 0;
        padding-top: 48px;
    }
}

/* =====================================================
   DIRECTORY & PROFILE PAGES (Session 5)
   ===================================================== */

/* ---- Utility: Hidden (JS-toggled elements) ---- */
.hl-hidden {
    display: none;
}

/* ---- Utility: Spacing ---- */
.hl-mt-lg { margin-top: 2.5rem; }

/* ---- Classroom Page: Add Child Panel ---- */
.hl-add-child-panel {
    padding: 20px;
    background: var(--hl-bg-subtle);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-xs);
    margin-bottom: 16px;
}
.hl-add-child-panel h4 {
    margin-top: 0;
}

/* ---- Reusable: 2-Column Form Grid ---- */
.hl-form-grid-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}
.hl-form-grid-2col input,
.hl-form-grid-2col select,
.hl-form-grid-2col textarea {
    width: 100%;
}

/* ---- Reusable: Button Row ---- */
.hl-btn-row {
    display: flex;
    gap: 8px;
}
.hl-btn-row--end {
    justify-content: flex-end;
}

/* ---- Reusable: Modal Overlay + Box ---- */
.hl-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 9999;
    align-items: center;
    justify-content: center;
}
.hl-modal-box {
    background: var(--hl-surface);
    border-radius: var(--hl-radius-xs);
    padding: 24px;
    max-width: 400px;
    width: 90%;
    margin: auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
.hl-modal-box h4 {
    margin-top: 0;
}
.hl-modal-box select,
.hl-modal-box textarea {
    width: 100%;
}

/* ---- Classroom Page: Table Actions Column ---- */
.hl-classroom-page .hl-table th.hl-col-actions {
    width: 100px;
}

/* ---- User Profile: Success Banner ---- */
.hlup-success-banner {
    margin-bottom: 16px;
    padding: 10px 16px;
    background: var(--hl-status-active-bg);
    border: 1px solid #a7f3d0;
    color: var(--hl-status-active-text);
    border-radius: var(--hl-radius-xs);
    font-size: 13px;
}

/* ---- User Profile: Quick Edit Form ---- */
.hlup-quick-edit-form {
    margin-top: 20px;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}
.hlup-quick-edit-form input {
    width: 100%;
}

/* ---- User Profile: Empty State Spacing ---- */
.hlup-empty-state--spaced {
    margin-top: 16px;
}

/* ---- User Profile: Coach Section Top Margin ---- */
.hlup-coach-section--spaced {
    margin-top: 24px;
}

/* ---- Docs: Not Found Icon ---- */
.hl-docs-not-found .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--hl-warning);
}

/* ---- Learners: Inline Progress Fixed Width ---- */
.hl-learners .hl-inline-progress {
    width: 110px;
}

/* Responsive: collapse sidebar on small screens */
@media (max-width: 1024px) {
    .hl-app__content {
        margin-left: 0;
    }
    .hl-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }
    .hl-sidebar.hl-sidebar--open {
        transform: translateX(0);
    }
    .hl-topbar {
        left: 0;
    }
}


/* =====================================================
   FORMS & INSTRUMENTS (Session 2)
   Extracted from PHP inline <style> blocks.
   Files: action-plan, classroom-visit, rp-notes,
   self-reflection, child-assessment,
   instrument-renderer, teacher-assessment-renderer
   ===================================================== */

/* --- Action Plan (.hlap-*) ----------------------------------------- */
.hlap-form-wrapper { max-width: 820px; margin: 0 auto; font-family: var(--hl-font) }
.hlap-hero { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: #fff; padding: 28px 32px; border-radius: var(--hl-radius); margin-bottom: 24px; position: relative; z-index: 1; overflow: visible }
.hlap-hero-icon { background: rgba(255,255,255,.12); border-radius: var(--hl-radius-sm); padding: 12px; display: flex; align-items: center; justify-content: center }
.hlap-hero-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px; color: #fff }
.hlap-hero-sub { font-size: 14px; opacity: .8; margin: 4px 0 0 }

.hlap-alert { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--hl-radius-sm); font-size: 14px; margin-bottom: 20px }
.hlap-alert-info { background: #e8f4fd; color: #1e5f8a; border: 1px solid #b8daef }

.hlap-section { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); margin-bottom: 20px; overflow: hidden }
.hlap-section-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, var(--hl-bg-subtle), var(--hl-bg)); border-bottom: 1px solid var(--hl-border) }
.hlap-section-num { background: var(--hl-primary); color: #fff; font-size: 11px; font-weight: 700; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }
.hlap-section-title { font-size: 15px; font-weight: 600; color: var(--hl-text-heading) }
.hlap-section-body { padding: 20px }

.hlap-field { margin-bottom: 20px }
.hlap-field:last-child { margin-bottom: 0 }
.hlap-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--hl-text); margin-bottom: 8px; letter-spacing: .3px }
.hlap-readonly-value { background: var(--hl-bg); padding: 12px 16px; border-radius: var(--hl-radius-sm); font-size: 14px; color: var(--hl-text); line-height: 1.6; min-height: 20px }
.hlap-muted { color: var(--hl-text-muted); font-size: 14px }

.hlap-select { width: 100%; padding: 10px 16px; border: 2px solid var(--hl-border); border-radius: var(--hl-radius-sm); font-size: 14px; line-height: 1.4; font-weight: 500; color: var(--hl-text-heading); background: var(--hl-surface); font-family: inherit; transition: border-color .2s; appearance: auto; height: auto }
.hlap-select:focus { outline: none; border-color: #2d5f8a; box-shadow: 0 0 0 3px rgba(45,95,138,.1) }

.hlap-textarea { width: 100%; border: 2px solid var(--hl-border); border-radius: var(--hl-radius-sm); padding: 12px 16px; font-size: 14px; font-family: inherit; resize: vertical; min-height: 80px; transition: border-color .2s; background: var(--hl-bg-subtle); box-sizing: border-box }
.hlap-textarea:focus { outline: none; border-color: #2d5f8a; box-shadow: 0 0 0 3px rgba(45,95,138,.1); background: var(--hl-surface) }
.hlap-textarea::placeholder { color: var(--hl-text-muted) }

.hlap-domain-badge { display: inline-flex; padding: 6px 16px; border-radius: var(--hl-radius-pill); font-size: 14px; font-weight: 600; background: var(--hl-primary); color: #fff }

.hlap-pills { display: flex; flex-wrap: wrap; gap: 10px }
.hlap-pill { position: relative }
.hlap-pill input { position: absolute; opacity: 0; pointer-events: none }
.hlap-pill-label { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 2px solid var(--hl-border); border-radius: var(--hl-radius-pill); font-size: 14px; font-weight: 500; color: var(--hl-text-secondary); cursor: pointer; transition: all .2s ease; background: var(--hl-surface); user-select: none }
.hlap-pill-label:hover { border-color: var(--hl-text-muted); color: var(--hl-text) }
.hlap-pill input:checked + .hlap-pill-label { background: var(--hl-primary); border-color: var(--hl-primary); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08) }
.hlap-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hl-border-medium); transition: background .2s }
.hlap-pill input:checked + .hlap-pill-label .hlap-pill-dot { background: #6ee7b7 }
.hlap-pills-ro { display: flex; flex-wrap: wrap; gap: 8px }
.hlap-pill-ro { display: inline-flex; padding: 6px 14px; border-radius: var(--hl-radius-pill); font-size: 13px; font-weight: 600; background: var(--hl-status-active-bg); color: var(--hl-status-active-text) }

.hlap-likert { display: flex; flex-direction: column; gap: 8px }
.hlap-likert-option { display: block; cursor: pointer }
.hlap-likert-option input { position: absolute; opacity: 0; pointer-events: none }
.hlap-likert-btn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border: 2px solid var(--hl-border); border-radius: var(--hl-radius-sm); transition: all .2s; background: var(--hl-surface) }
.hlap-likert-option:hover .hlap-likert-btn { border-color: var(--hl-text-muted) }
.hlap-likert-option input:checked + .hlap-likert-btn { border-color: var(--hl-primary); background: var(--hl-bg-hover); box-shadow: 0 2px 8px rgba(0,0,0,.06) }
.hlap-likert-num { width: 28px; height: 28px; border-radius: 50%; background: var(--hl-border); color: var(--hl-text-secondary); font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; transition: all .2s; flex-shrink: 0 }
.hlap-likert-option input:checked + .hlap-likert-btn .hlap-likert-num { background: var(--hl-primary); color: #fff }
.hlap-likert-text { font-size: 14px; font-weight: 500; color: var(--hl-text) }
.hlap-likert-badge { display: inline-flex; padding: 6px 14px; border-radius: var(--hl-radius-pill); font-size: 13px; font-weight: 600 }
.hlap-likert-1 { background: var(--hl-status-archived-bg); color: var(--hl-status-archived-text) }
.hlap-likert-2 { background: var(--hl-status-paused-bg); color: var(--hl-status-paused-text) }
.hlap-likert-3 { background: #fef9c3; color: #854d0e }
.hlap-likert-4 { background: var(--hl-status-active-bg); color: var(--hl-status-active-text) }
.hlap-likert-5 { background: #a7f3d0; color: #064e3b }

.hlap-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hl-border) }
.hlap-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--hl-radius-sm); font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all .2s; font-family: inherit }
.hlap-btn-draft { background: var(--hl-bg); color: var(--hl-text); border: 2px solid var(--hl-border) }
.hlap-btn-draft:hover { background: var(--hl-border); border-color: var(--hl-border-medium) }
.hlap-btn-submit { background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: #fff; border: 2px solid transparent; box-shadow: 0 4px 14px rgba(0,0,0,.12) }
.hlap-btn-submit:hover { box-shadow: 0 6px 20px rgba(0,0,0,.15); transform: translateY(-1px) }

@media (max-width: 600px) {
    .hlap-hero { flex-direction: column; text-align: center; padding: 24px 20px }
    .hlap-pills { gap: 6px }
    .hlap-pill-label { padding: 8px 14px; font-size: 13px }
    .hlap-likert-btn { padding: 10px 12px; gap: 8px }
    .hlap-actions { flex-direction: column }
    .hlap-btn { justify-content: center }
}

/* --- Classroom Visit & Self-Reflection (.hlcv-*) ------------------- */
.hlcv-form-wrapper { max-width: 820px; margin: 0 auto; font-family: var(--hl-font) }
.hlcv-hero { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: #fff !important; padding: 28px 32px; border-radius: var(--hl-radius); margin-bottom: 24px; position: relative; z-index: 1; overflow: visible }
.hlcv-hero * { color: #fff !important }
.hlcv-hero-icon { background: rgba(255,255,255,.12); border-radius: var(--hl-radius-sm); padding: 12px; display: flex; align-items: center; justify-content: center }
.hlcv-hero-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px; color: #fff !important }
.hlcv-hero-sub { font-size: 14px; opacity: .8; margin: 4px 0 0; color: rgba(255,255,255,.8) !important }
.hlcv-alert { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--hl-radius-sm); font-size: 14px; margin-bottom: 20px }
.hlcv-alert-info { background: #e8f4fd; color: #1e5f8a; border: 1px solid #b8daef }
.hlcv-alert-success { background: var(--hl-status-active-bg); color: var(--hl-status-active-text); border: 1px solid #a7f3d0 }
.hlcv-alert--standalone { max-width: 820px; margin-left: auto; margin-right: auto }
.hlcv-info-card { background: var(--hl-bg-card); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); padding: 20px 24px; margin-bottom: 28px }
.hlcv-info-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px }
.hlcv-info-row + .hlcv-info-row { margin-top: 12px }
.hlcv-info-cell { display: flex; flex-direction: column; gap: 4px }
.hlcv-info-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted) }
.hlcv-info-value { font-size: 15px; font-weight: 600; color: var(--hl-text-heading) }
.hlcv-visit-num { display: inline-flex; align-items: center; justify-content: center; background: var(--hl-primary); color: #fff; width: 28px; height: 28px; border-radius: var(--hl-radius-xs); font-size: 14px }

.hlcv-context { margin-bottom: 28px }
.hlcv-context-title { font-size: 14px; font-weight: 600; color: var(--hl-text); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .5px }
.hlcv-pills { display: flex; flex-wrap: wrap; gap: 10px }
.hlcv-pill { position: relative }
.hlcv-pill input { position: absolute; opacity: 0; pointer-events: none }
.hlcv-pill-label { display: inline-flex; align-items: center; gap: 6px; padding: 10px 18px; border: 2px solid var(--hl-border); border-radius: var(--hl-radius-pill); font-size: 14px; font-weight: 500; color: var(--hl-text-secondary); cursor: pointer; transition: all .2s ease; background: var(--hl-surface); user-select: none }
.hlcv-pill-label:hover { border-color: var(--hl-text-muted); color: var(--hl-text) }
.hlcv-pill input:checked + .hlcv-pill-label { background: var(--hl-primary); border-color: var(--hl-primary); color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08) }
.hlcv-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hl-border-medium); transition: background .2s }
.hlcv-pill input:checked + .hlcv-pill-label .hlcv-pill-dot { background: #6ee7b7 }

.hlcv-domain-flat { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); margin-bottom: 20px; overflow: hidden }
.hlcv-domain-flat-header { display: flex; align-items: center; gap: 10px; padding: 16px 20px; background: linear-gradient(135deg, var(--hl-bg-subtle), var(--hl-bg)); border-bottom: 1px solid var(--hl-border) }
.hlcv-domain-flat-title { font-size: 15px; font-weight: 600; color: var(--hl-text-heading) }
.hlcv-domain-num { background: var(--hl-primary); color: #fff; font-size: 11px; font-weight: 700; width: 24px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }

.hlcv-indicators-grid { padding: 4px 20px }
.hlcv-ind-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--hl-border-light) }
.hlcv-ind-row:last-child { border-bottom: none }
.hlcv-ind-label { font-size: 14px; color: var(--hl-text); flex: 1; line-height: 1.4 }
.hlcv-toggle-group { display: flex; gap: 0; border-radius: var(--hl-radius-xs); overflow: hidden; border: 2px solid var(--hl-border); flex-shrink: 0 }
.hlcv-toggle-group label { margin: 0 }
.hlcv-toggle-group input { position: absolute; opacity: 0; pointer-events: none }
.hlcv-toggle-btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 18px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; background: var(--hl-surface); color: var(--hl-text-muted); user-select: none; border: none }
.hlcv-toggle-group input[value="1"]:checked + .hlcv-toggle-btn { background: var(--hl-accent-dark); color: #fff }
.hlcv-toggle-group input[value="0"]:checked + .hlcv-toggle-btn { background: var(--hl-border); color: var(--hl-text-secondary) }

.hlcv-domain-desc { padding: 0 20px 16px; animation: hlcvSlideDown .3s ease }
.hlcv-domain-desc textarea { width: 100%; border: 2px solid var(--hl-border); border-radius: var(--hl-radius-sm); padding: 12px 16px; font-size: 14px; font-family: inherit; resize: vertical; min-height: 70px; transition: border-color .2s; background: var(--hl-bg-subtle); box-sizing: border-box }
.hlcv-domain-desc textarea:focus { outline: none; border-color: #2d5f8a; box-shadow: 0 0 0 3px rgba(45,95,138,.1); background: var(--hl-surface) }
.hlcv-domain-desc textarea::placeholder { color: var(--hl-text-muted) }
.hlcv-domain-desc-ro { padding: 8px 20px 16px }
.hlcv-domain-desc-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted); margin-bottom: 6px }
.hlcv-domain-desc-text { background: var(--hl-bg); padding: 10px 14px; border-radius: var(--hl-radius-xs); font-size: 14px; color: var(--hl-text); line-height: 1.5 }
@keyframes hlcvSlideDown { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: translateY(0) } }

.hlcv-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hl-border) }
.hlcv-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--hl-radius-sm); font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all .2s; font-family: inherit }
.hlcv-btn-draft { background: var(--hl-bg); color: var(--hl-text); border: 2px solid var(--hl-border) }
.hlcv-btn-draft:hover { background: var(--hl-border); border-color: var(--hl-border-medium) }
.hlcv-btn-submit { background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: #fff; border: 2px solid transparent; box-shadow: 0 4px 14px rgba(0,0,0,.12) }
.hlcv-btn-submit:hover { box-shadow: 0 6px 20px rgba(0,0,0,.15); transform: translateY(-1px) }

.hlcv-ro-badge { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--hl-radius-pill); font-size: 12px; font-weight: 600 }
.hlcv-ro-yes { background: var(--hl-status-active-bg); color: var(--hl-status-active-text) }
.hlcv-ro-no { background: var(--hl-bg); color: var(--hl-text-secondary) }

.hlcv-instructions { margin-bottom: 28px; display: flex; flex-direction: column; gap: 12px }
.hlcv-instr-section { display: flex; gap: 14px; padding: 16px 18px; background: var(--hl-bg-card); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm) }
.hlcv-instr-highlight { background: var(--hl-bg-hover); border-color: var(--hl-interactive-border) }
.hlcv-instr-icon { flex-shrink: 0; width: 36px; height: 36px; border-radius: var(--hl-radius-sm); background: var(--hl-border); display: flex; align-items: center; justify-content: center; color: var(--hl-text-secondary) }
.hlcv-instr-icon-warn { background: var(--hl-status-paused-bg); color: var(--hl-warning) }
.hlcv-instr-icon-how { background: #dbeafe; color: #2563eb }
.hlcv-instr-heading { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--hl-text); margin-bottom: 4px }
.hlcv-instr-section p { font-size: 14px; line-height: 1.6; color: var(--hl-text); margin: 0 }

.hlcv-notes { background: var(--hl-bg-subtle); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); padding: 16px 20px; margin-top: 24px; margin-bottom: 8px }
.hlcv-notes--flush { margin-top: 0; margin-bottom: 0 }
.hlcv-notes-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-secondary); margin-bottom: 10px; display: flex; align-items: center; gap: 6px }
.hlcv-notes-list { margin: 0; padding-left: 18px; font-size: 13px; color: var(--hl-text-secondary); line-height: 1.7 }
.hlcv-notes-list li { margin-bottom: 4px }
.hlcv-notes-list em { font-style: italic; color: var(--hl-text) }

.hlcv-back-link { display: block; margin-bottom: 8px }
.hlcv-muted { color: var(--hl-text-muted); font-size: 14px }

@media (max-width: 600px) {
    .hlcv-hero { flex-direction: column; text-align: center; padding: 24px 20px }
    .hlcv-info-row { grid-template-columns: 1fr 1fr }
    .hlcv-ind-top { flex-direction: column; align-items: flex-start }
    .hlcv-actions { flex-direction: column }
    .hlcv-btn { justify-content: center }
}


/* =====================================================
   COACH PAGES (Session 3)
   Extracted from inline <style> blocks in 7 coach PHP files.
   All colors use design tokens from :root.
   ===================================================== */


/* ---------- Coach Dashboard (hlcd-) ---------- */

.hlcd-wrapper { max-width: 1100px; margin: 0 auto !important }

.hlcd-hero {
    display: flex !important; align-items: center; gap: 24px;
    background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%) !important;
    color: var(--hl-surface) !important; padding: 28px 32px !important;
    border-radius: var(--hl-radius) !important; margin-bottom: 32px
}
.hlcd-hero-avatar { flex-shrink: 0 }
.hlcd-hero-avatar img {
    width: 64px; height: 64px; border-radius: 50% !important;
    border: 3px solid rgba(255,255,255,.25) !important; display: block; object-fit: cover
}
.hlcd-hero-title { font-size: 24px !important; font-weight: 800 !important; margin: 0 !important; letter-spacing: -.3px; color: var(--hl-surface) !important }
.hlcd-hero-sub { font-size: 14px; opacity: .75; margin: 4px 0 0 !important; color: var(--hl-surface) !important }

.hlcd-stats-grid { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 36px }
.hlcd-stat-card {
    background: var(--hl-surface) !important; border: 1px solid var(--hl-border-light) !important;
    border-radius: var(--hl-radius) !important; overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease; box-shadow: var(--hl-shadow)
}
.hlcd-stat-card:hover { box-shadow: var(--hl-shadow-lg) !important; transform: translateY(-2px) }
.hlcd-stat-accent { height: 4px; background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%) }
.hlcd-stat-accent-sessions { background: linear-gradient(135deg, var(--hl-accent-dark) 0%, #34d399 100%) }
.hlcd-stat-accent-month { background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%) }
.hlcd-stat-body { display: flex !important; align-items: center; gap: 16px; padding: 18px 22px }
.hlcd-stat-icon { display: inline-flex !important; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--hl-radius-sm); flex-shrink: 0 }
.hlcd-stat-icon-mentors { background: rgba(var(--hl-primary-rgb), 0.08) !important; color: var(--hl-primary) !important }
.hlcd-stat-icon-sessions { background: rgba(5,150,105,0.08) !important; color: var(--hl-accent-dark) !important }
.hlcd-stat-icon-month { background: rgba(217,119,6,0.08) !important; color: #d97706 !important }
.hlcd-stat-content { min-width: 0 }
.hlcd-stat-value { font-size: 28px !important; font-weight: 700 !important; color: var(--hl-text-heading) !important; line-height: 1; margin-bottom: 4px }
.hlcd-stat-label { font-size: 11px !important; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted) !important }

.hlcd-section-title { font-size: 13px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .06em; color: var(--hl-text) !important; margin-bottom: 18px }
.hlcd-section-title--attention { color: var(--hl-error-dark) !important }
.hlcd-section-title svg.hlcd-inline-icon { vertical-align: -2px; margin-right: 4px }

.hlcd-links-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; margin-bottom: 20px }
.hlcd-link-card {
    display: flex !important; align-items: center; gap: 16px;
    background: var(--hl-surface) !important; border: 1px solid var(--hl-border-light) !important;
    border-radius: var(--hl-radius) !important; padding: 22px 24px;
    text-decoration: none !important; color: var(--hl-text) !important;
    transition: box-shadow .25s ease, transform .25s ease; box-shadow: var(--hl-shadow)
}
.hlcd-link-card:hover { box-shadow: var(--hl-shadow-lg) !important; transform: translateY(-2px); text-decoration: none !important; color: var(--hl-text) !important; border-color: var(--hl-border) !important }
.hlcd-link-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--hl-radius-sm); display: flex !important; align-items: center; justify-content: center }
.hlcd-link-icon-mentors { background: rgba(var(--hl-primary-rgb), 0.08) !important; color: var(--hl-primary) !important }
.hlcd-link-icon-reports { background: rgba(5,150,105,0.08) !important; color: var(--hl-accent-dark) !important }
.hlcd-link-icon-availability { background: rgba(217,119,6,0.08) !important; color: #d97706 !important }
.hlcd-link-icon-profile { background: var(--hl-interactive-bg) !important; color: var(--hl-interactive) !important }
.hlcd-link-text { flex: 1; min-width: 0 }
.hlcd-link-title { font-size: 15px !important; font-weight: 600 !important; color: var(--hl-text-heading) !important; margin-bottom: 4px }
.hlcd-link-desc { font-size: 13px !important; color: var(--hl-text-muted) !important; line-height: 1.4 }
.hlcd-link-arrow { flex-shrink: 0; color: var(--hl-border-medium); transition: color .2s, transform .2s }
.hlcd-link-card:hover .hlcd-link-arrow { color: var(--hl-primary); transform: translateX(2px) }

.hlcd-sessions-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 28px }
.hlcd-session-row {
    display: flex !important; align-items: center; gap: 16px;
    background: var(--hl-bg-card) !important; border: 1px solid var(--hl-border-light) !important;
    border-radius: var(--hl-radius-sm) !important; padding: 16px 22px;
    transition: box-shadow .2s, border-color .2s
}
.hlcd-session-row:hover { border-color: var(--hl-border) !important; box-shadow: var(--hl-shadow-md) }
.hlcd-session-attention { border-left: 3px solid var(--hl-error-dark) !important; background: #fffbfb !important }
.hlcd-session-date-col { flex-shrink: 0; width: 100px; text-align: center }
.hlcd-session-day { font-size: 14px !important; font-weight: 700 !important; color: var(--hl-text-heading) !important }
.hlcd-session-time { font-size: 12px !important; color: var(--hl-text-secondary) !important }
.hlcd-session-info-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px }
.hlcd-session-mentor { font-size: 14px !important; font-weight: 600 !important; color: var(--hl-text-heading) !important; text-decoration: none !important }
a.hlcd-session-mentor:hover { color: var(--hl-interactive) !important; text-decoration: underline !important }
.hlcd-session-title-text { font-size: 12px !important; color: var(--hl-text-muted) !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hlcd-session-action-col { flex-shrink: 0; display: flex; align-items: center; gap: 8px }
.hlcd-att-badge { display: inline-flex; padding: 4px 10px; background: var(--hl-status-archived-bg) !important; color: var(--hl-error-dark) !important; border-radius: 6px; font-size: 11px; font-weight: 700; white-space: nowrap }
.hlcd-session-view-btn {
    display: inline-flex !important; align-items: center; padding: 7px 16px;
    background: var(--hl-surface) !important; border: 1px solid var(--hl-border) !important;
    border-radius: 10px !important; font-size: 13px !important; font-weight: 600 !important;
    color: var(--hl-text) !important; text-decoration: none !important; transition: var(--hl-transition)
}
.hlcd-session-view-btn:hover { background: var(--hl-surface) !important; border-color: var(--hl-interactive) !important; color: var(--hl-interactive) !important }

.hlcd-empty-state { text-align: center; padding: 30px; background: var(--hl-bg-subtle); border-radius: var(--hl-radius-sm); border: 1px solid var(--hl-border) }
.hlcd-empty-state p { color: var(--hl-text-muted); font-size: 14px; margin: 0 }

@media (max-width: 600px) {
    .hlcd-hero { flex-direction: column; text-align: center; padding: 24px 20px !important }
    .hlcd-stats-grid { grid-template-columns: 1fr }
    .hlcd-links-grid { grid-template-columns: 1fr }
    .hlcd-session-row { flex-wrap: wrap }
    .hlcd-session-date-col { width: auto; text-align: left }
    .hlcd-session-action-col { width: 100%; justify-content: flex-end }
}


/* ---------- Coach Mentors (hlcm-) ---------- */

.hlcm-wrapper { max-width: 1100px; margin: 0 auto }

.hlcm-hero {
    display: flex; align-items: center; gap: 20px;
    background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%);
    color: var(--hl-surface); padding: 28px 32px; border-radius: var(--hl-radius); margin-bottom: 28px
}
.hlcm-hero-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; background: rgba(255,255,255,.12); border-radius: var(--hl-radius) }
.hlcm-hero-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px }
.hlcm-hero-sub { font-size: 14px; opacity: .75; margin: 4px 0 0 }

.hlcm-filters { display: flex; gap: 12px; margin-bottom: 24px }
.hlcm-search-input { flex: 1; min-width: 0; padding: 10px 16px; font-size: 14px; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); background: var(--hl-surface); color: var(--hl-text-heading); outline: none; transition: border-color .2s, box-shadow .2s }
.hlcm-search-input:focus { border-color: var(--hl-primary-light); box-shadow: 0 0 0 3px rgba(var(--hl-primary-rgb), 0.12) }
.hlcm-search-input::placeholder { color: var(--hl-text-muted) }
.hlcm-select { padding: 10px 16px; font-size: 14px; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); background: var(--hl-surface); color: var(--hl-text-heading); outline: none; cursor: pointer; min-width: 180px; transition: border-color .2s, box-shadow .2s }
.hlcm-select:focus { border-color: var(--hl-primary-light); box-shadow: 0 0 0 3px rgba(var(--hl-primary-rgb), 0.12) }

.hlcm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px }

.hlcm-card { display: block; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 24px; text-decoration: none; color: inherit; transition: box-shadow .25s ease, transform .25s ease }
.hlcm-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,.08); transform: translateY(-2px); text-decoration: none; color: inherit }
a.hlcm-card { cursor: pointer }

.hlcm-card-top { display: flex; align-items: center; gap: 14px; margin-bottom: 16px }
.hlcm-card-avatar { flex-shrink: 0 }
.hlcm-card-avatar img { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--hl-border); display: block }
.hlcm-card-name { font-size: 15px; font-weight: 600; color: var(--hl-text-heading); line-height: 1.3 }
.hlcm-card-school { font-size: 13px; color: var(--hl-text-muted); margin-top: 2px }

.hlcm-card-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px }
.hlcm-badge { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: 20px; line-height: 1.4 }
.hlcm-badge-team { background: rgba(var(--hl-primary-rgb), 0.08); color: var(--hl-primary) }
.hlcm-badge-pathway { background: rgba(5,150,105,0.08); color: var(--hl-accent-dark) }

.hlcm-progress-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px }
.hlcm-progress-track { flex: 1; height: 8px; background: var(--hl-border); border-radius: 4px; overflow: hidden }
.hlcm-progress-fill { height: 100%; background: linear-gradient(90deg, var(--hl-accent-dark), #10b981); border-radius: 4px; transition: width .4s ease }
.hlcm-progress-pct { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--hl-text-heading); min-width: 36px; text-align: right }

.hlcm-card-meta { display: flex; gap: 20px; padding-top: 14px; border-top: 1px solid var(--hl-border-light) }
.hlcm-meta-item { flex: 1; min-width: 0 }
.hlcm-meta-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted); margin-bottom: 4px }
.hlcm-meta-value { display: block; font-size: 15px; font-weight: 600; color: var(--hl-text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }

.hlcm-no-results { text-align: center; padding: 40px 20px; color: var(--hl-text-muted); font-size: 15px }

.hlcm-empty { text-align: center; padding: 60px 20px; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius) }
.hlcm-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: rgba(var(--hl-primary-rgb), 0.06); color: var(--hl-text-muted); margin-bottom: 16px }
.hlcm-empty-text { font-size: 16px; color: var(--hl-text-secondary); margin: 0 }

.hlcm-profile-link { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 0; font-size: 12px; font-weight: 600; color: var(--hl-secondary); text-decoration: none; transition: color .2s }
.hlcm-profile-link:hover { color: var(--hl-secondary-dark); text-decoration: underline }
.hlcm-profile-link svg { opacity: .6 }

@media (max-width: 600px) {
    .hlcm-hero { flex-direction: column; text-align: center; padding: 24px 20px }
    .hlcm-filters { flex-direction: column }
    .hlcm-select { min-width: 0; width: 100% }
    .hlcm-grid { grid-template-columns: 1fr }
    .hlcm-card-meta { flex-direction: column; gap: 10px }
}


/* ---------- Coach Mentor Detail (hlcmd-) ---------- */

.hlcmd-wrapper { max-width: 1100px; margin: 0 auto }

.hlcmd-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; color: var(--hl-text); text-decoration: none; margin-bottom: 20px; transition: color .2s }
.hlcmd-back:hover { color: var(--hl-primary); text-decoration: none }

.hlcmd-hero { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: var(--hl-surface); padding: 28px 32px; border-radius: var(--hl-radius); margin-bottom: 24px }
.hlcmd-hero-avatar { flex-shrink: 0 }
.hlcmd-hero-avatar img { width: 64px; height: 64px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); display: block }
.hlcmd-hero-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px; color: var(--hl-surface) !important }
.hlcmd-hero-sub { font-size: 14px; opacity: .75; margin: 4px 0 0; color: var(--hl-surface) !important }

.hlcmd-info-card { background: var(--hl-bg-subtle); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 20px 24px; margin-bottom: 24px }
.hlcmd-info-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px }
.hlcmd-info-cell { display: flex; flex-direction: column; gap: 6px }
.hlcmd-info-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted) }
.hlcmd-info-value { font-size: 15px; font-weight: 600; color: var(--hl-text-heading) }
.hlcmd-info-progress { display: flex; align-items: center; gap: 10px }

.hlcmd-progress-row { display: flex; align-items: center; gap: 10px }
.hlcmd-progress-track { flex: 1; height: 8px; background: var(--hl-border); border-radius: 4px; overflow: hidden }
.hlcmd-progress-track-lg { height: 10px; margin-top: 8px }
.hlcmd-progress-track-wide { flex: 1; height: 8px; background: var(--hl-border); border-radius: 4px; overflow: hidden }
.hlcmd-progress-fill { height: 100%; background: linear-gradient(90deg, var(--hl-accent-dark), #10b981); border-radius: 4px; transition: width .4s ease }
.hlcmd-progress-fill-alt { background: linear-gradient(90deg, var(--hl-secondary), #60a5fa) }
.hlcmd-progress-pct { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--hl-text-heading); min-width: 36px; text-align: right }

.hlcmd-tabs { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap }
.hlcmd-tab-btn { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; border-radius: var(--hl-radius-sm); font-size: 14px; font-weight: 600; border: 2px solid var(--hl-border); background: var(--hl-surface); color: var(--hl-text-secondary); cursor: pointer; transition: var(--hl-transition); font-family: inherit }
.hlcmd-tab-btn:hover { border-color: var(--hl-text-muted); color: var(--hl-text); background: var(--hl-bg-subtle) }
.hlcmd-tab-btn.hlcmd-tab-active { background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: var(--hl-surface); border-color: transparent; box-shadow: 0 4px 14px rgba(var(--hl-primary-rgb), .25) }
.hlcmd-tab-btn.hlcmd-tab-active svg { stroke: var(--hl-surface) }

.hlcmd-tab-panel { animation: hlcmdFadeIn .3s ease }
@keyframes hlcmdFadeIn { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: translateY(0) } }

.hlcmd-panel-empty { text-align: center; padding: 48px 20px; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); color: var(--hl-text-muted) }
.hlcmd-panel-empty svg { margin-bottom: 12px; opacity: .5 }
.hlcmd-panel-empty p { font-size: 15px; margin: 0 }

.hlcmd-schedule-wrap { margin-bottom: 16px }
.hlcmd-btn-schedule { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: var(--hl-secondary); color: var(--hl-surface); border: none; border-radius: var(--hl-radius-sm); font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; text-decoration: none; transition: background .15s }
.hlcmd-btn-schedule:hover { background: var(--hl-secondary-dark); color: var(--hl-surface) }

.hlcmd-all-scheduled { margin-bottom: 16px; padding: 10px 16px; background: var(--hl-status-active-bg); border-radius: var(--hl-radius-xs); font-size: 14px; color: var(--hl-status-active-text); font-weight: 500 }

.hlcmd-sessions-list { display: flex; flex-direction: column; gap: 12px }
.hlcmd-session-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 18px 24px; transition: box-shadow .25s ease }
.hlcmd-session-row:hover { box-shadow: var(--hl-shadow-lg) }
.hlcmd-session-main { flex: 1; min-width: 0 }
.hlcmd-session-title { font-size: 15px; font-weight: 600; color: var(--hl-text-heading); margin-bottom: 6px }
.hlcmd-session-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--hl-text-secondary) }
.hlcmd-session-meta svg { vertical-align: middle; margin-right: 4px; opacity: .6 }
.hlcmd-session-time { margin-left: 6px; color: var(--hl-text-muted) }
.hlcmd-session-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0 }
.hlcmd-join-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--hl-radius-xs); font-size: 13px; font-weight: 600; background: var(--hl-accent-dark); color: var(--hl-surface); text-decoration: none; transition: background .2s, box-shadow .2s }
.hlcmd-join-btn:hover { background: var(--hl-accent-darker); box-shadow: 0 4px 12px rgba(5,150,105,.3); text-decoration: none; color: var(--hl-surface) }

.hlcmd-rp-table-wrap { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); overflow: hidden }
.hlcmd-rp-table { width: 100%; border-collapse: collapse }
.hlcmd-rp-table thead th { text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted); padding: 14px 20px; background: var(--hl-bg-subtle); border-bottom: 1px solid var(--hl-border) }
.hlcmd-rp-table tbody td { padding: 14px 20px; font-size: 14px; color: var(--hl-text); border-bottom: 1px solid var(--hl-border-light) }
.hlcmd-rp-table tbody tr:last-child td { border-bottom: none }
.hlcmd-rp-table tbody tr:hover { background: var(--hl-bg-subtle) }

.hlcmd-team-member-name { font-weight: 600; color: var(--hl-text-heading) }
.hlcmd-team-member-email { font-size: 12px; color: var(--hl-text-muted) }

.hlcmd-badge { display: inline-block; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: var(--hl-radius); line-height: 1.4 }
.hlcmd-badge-green { background: var(--hl-status-active-bg); color: var(--hl-status-active-text) }
.hlcmd-badge-blue { background: var(--hl-status-progress-bg); color: var(--hl-status-progress-text) }
.hlcmd-badge-orange { background: var(--hl-status-paused-bg); color: var(--hl-status-paused-text) }
.hlcmd-badge-gray { background: var(--hl-status-draft-bg); color: var(--hl-status-draft-text) }

.hlcmd-rp-badge { display: inline-block; padding: 4px 12px; border-radius: var(--hl-radius); font-size: 12px; font-weight: 600 }
.hlcmd-rp-badge--completed { background: var(--hl-status-active-bg); color: var(--hl-status-active-text) }
.hlcmd-rp-badge--scheduled { background: var(--hl-status-progress-bg); color: var(--hl-status-progress-text) }
.hlcmd-rp-badge--pending { background: var(--hl-status-paused-bg); color: var(--hl-status-paused-text) }
.hlcmd-rp-badge--cancelled { background: var(--hl-status-draft-bg); color: var(--hl-status-draft-text) }

.hlcmd-report-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px }
.hlcmd-report-card { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 20px; text-align: center }
.hlcmd-report-card-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted); margin-bottom: 8px }
.hlcmd-report-card-value { font-size: 32px; font-weight: 700; color: var(--hl-text-heading); line-height: 1; margin-bottom: 4px }

.hlcmd-comparison-card { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 24px; margin-bottom: 24px }
.hlcmd-comparison-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text); margin-bottom: 20px }
.hlcmd-comparison-row { display: flex; align-items: center; gap: 14px; margin-bottom: 14px }
.hlcmd-comparison-row:last-child { margin-bottom: 0 }
.hlcmd-comparison-label { font-size: 14px; font-weight: 500; color: var(--hl-text); min-width: 140px; flex-shrink: 0 }
.hlcmd-comparison-pct { font-size: 14px; font-weight: 700; color: var(--hl-text-heading); min-width: 44px; text-align: right; flex-shrink: 0 }

.hlcmd-export-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 24px }
.hlcmd-export-title { font-size: 15px; font-weight: 600; color: var(--hl-text-heading); margin-bottom: 4px }
.hlcmd-export-desc { font-size: 13px; color: var(--hl-text-muted) }
.hlcmd-export-form { flex-shrink: 0 }
.hlcmd-export-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 24px; border-radius: var(--hl-radius-sm); font-size: 14px; font-weight: 600; background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: var(--hl-surface); border: none; cursor: pointer; transition: box-shadow .2s, transform .2s; font-family: inherit }
.hlcmd-export-btn:hover { box-shadow: 0 6px 20px rgba(var(--hl-primary-rgb), .3); transform: translateY(-1px) }

.hlcmd-empty { text-align: center; padding: 60px 20px; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius) }
.hlcmd-empty-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background: rgba(var(--hl-primary-rgb), 0.06); color: var(--hl-text-muted); margin-bottom: 16px }
.hlcmd-empty-text { font-size: 16px; color: var(--hl-text-secondary); margin: 0 }

@media (max-width: 600px) {
    .hlcmd-hero { flex-direction: column; text-align: center; padding: 24px 20px }
    .hlcmd-info-row { grid-template-columns: 1fr }
    .hlcmd-tabs { flex-direction: column }
    .hlcmd-tab-btn { width: 100%; justify-content: center }
    .hlcmd-session-row { flex-direction: column; align-items: flex-start; gap: 12px }
    .hlcmd-session-actions { width: 100%; justify-content: flex-start }
    .hlcmd-report-grid { grid-template-columns: repeat(2, 1fr) }
    .hlcmd-comparison-row { flex-direction: column; align-items: flex-start; gap: 6px }
    .hlcmd-comparison-label { min-width: 0 }
    .hlcmd-export-card { flex-direction: column; text-align: center }
    .hlcmd-rp-table thead th, .hlcmd-rp-table tbody td { padding: 10px 12px; font-size: 13px }
}


/* ---------- Coach Reports (hlcr-) ---------- */

.hlcr-wrapper { max-width: 1100px; margin: 0 auto }

.hlcr-hero { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: var(--hl-surface); padding: 28px 32px; border-radius: var(--hl-radius); margin-bottom: 28px; position: relative }
.hlcr-hero-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--hl-radius); background: rgba(255,255,255,.12) }
.hlcr-hero-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px }
.hlcr-hero-sub { font-size: 14px; opacity: .75; margin: 4px 0 0 }
.hlcr-hero-back { position: absolute; top: 16px; right: 20px; display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.8); text-decoration: none; transition: color .2s }
.hlcr-hero-back:hover { color: var(--hl-surface); text-decoration: none }

.hlcr-filter-bar { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 20px 24px; margin-bottom: 24px }
.hlcr-filter-form { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap }
.hlcr-filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 180px }
.hlcr-filter-group-btn { align-self: flex-end }
.hlcr-filter-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted) }
.hlcr-filter-select { padding: 8px 12px; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-xs); font-size: 14px; color: var(--hl-text-heading); background: var(--hl-surface); font-family: inherit; cursor: pointer; transition: border-color .2s }
.hlcr-filter-select:focus { outline: none; border-color: var(--hl-primary-light); box-shadow: 0 0 0 3px rgba(var(--hl-primary-rgb), 0.12) }

.hlcr-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border: none; border-radius: var(--hl-radius-xs); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .2s, box-shadow .2s, transform .15s }
.hlcr-btn:active { transform: scale(.97) }
.hlcr-btn-filter { background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: var(--hl-surface) }
.hlcr-btn-filter:hover { box-shadow: 0 4px 14px rgba(var(--hl-primary-rgb), .25) }
.hlcr-btn-export { background: linear-gradient(135deg, var(--hl-accent-dark) 0%, #10b981 100%); color: var(--hl-surface) }
.hlcr-btn-export:hover { box-shadow: 0 4px 14px rgba(5,150,105,.3) }

.hlcr-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px }
.hlcr-stat-card { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); overflow: hidden; transition: box-shadow .25s ease, transform .25s ease }
.hlcr-stat-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,.08); transform: translateY(-2px) }
.hlcr-stat-accent { height: 4px; background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%) }
.hlcr-stat-accent-completion { background: linear-gradient(135deg, var(--hl-accent-dark) 0%, #34d399 100%) }
.hlcr-stat-accent-schools { background: linear-gradient(135deg, #d97706 0%, #fbbf24 100%) }
.hlcr-stat-body { padding: 24px 20px; text-align: center }
.hlcr-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--hl-radius-sm); margin-bottom: 16px }
.hlcr-stat-icon-mentors { background: rgba(var(--hl-primary-rgb), 0.08); color: var(--hl-primary) }
.hlcr-stat-icon-completion { background: rgba(5,150,105,0.08); color: var(--hl-accent-dark) }
.hlcr-stat-icon-schools { background: rgba(217,119,6,0.08); color: #d97706 }
.hlcr-stat-value { font-size: 36px; font-weight: 700; color: var(--hl-text-heading); line-height: 1; margin-bottom: 6px }
.hlcr-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted) }

.hlcr-section-title { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text); margin-bottom: 16px }

.hlcr-table-wrap { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); overflow: hidden; margin-bottom: 32px }
.hlcr-table { width: 100%; border-collapse: collapse }
.hlcr-th { padding: 14px 16px; text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted); background: var(--hl-bg-subtle); border-bottom: 2px solid var(--hl-border); white-space: nowrap; cursor: default }
.hlcr-th-pct { min-width: 180px }
.hlcr-td { padding: 13px 16px; font-size: 14px; color: var(--hl-text-heading); border-bottom: 1px solid var(--hl-border-light) }
.hlcr-td-name { font-weight: 600 }
.hlcr-tr-even { background: var(--hl-surface) }
.hlcr-tr-odd { background: var(--hl-bg-subtle) }
.hlcr-tr-even:hover, .hlcr-tr-odd:hover { background: var(--hl-bg-hover) }
.hlcr-td-pct { padding-right: 20px }

.hlcr-pct-cell { display: flex; align-items: center; gap: 10px }
.hlcr-pct-num { font-size: 13px; font-weight: 600; color: var(--hl-text-heading); min-width: 42px; text-align: right }
.hlcr-progress-track { flex: 1; height: 8px; background: var(--hl-border); border-radius: 4px; overflow: hidden }
.hlcr-progress-fill { height: 100%; background: linear-gradient(90deg, var(--hl-accent-dark), #10b981); border-radius: 4px; transition: width .4s ease }

.hlcr-empty { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 48px 24px; text-align: center; margin-bottom: 32px }
.hlcr-empty-icon { color: var(--hl-border-medium); margin-bottom: 12px }
.hlcr-empty-text { font-size: 15px; color: var(--hl-text-muted); margin: 0 }

.hlcr-teams-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 32px }
.hlcr-team-card { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 20px 24px; transition: box-shadow .25s ease, transform .25s ease }
.hlcr-team-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,.08); transform: translateY(-2px) }
.hlcr-team-header { display: flex; align-items: center; gap: 10px; margin-bottom: 16px }
.hlcr-team-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; background: rgba(var(--hl-primary-rgb), 0.08); color: var(--hl-primary); flex-shrink: 0 }
.hlcr-team-name { font-size: 15px; font-weight: 600; color: var(--hl-text-heading); margin: 0 }
.hlcr-team-stats { display: flex; justify-content: space-between; margin-bottom: 14px }
.hlcr-team-stat { display: flex; flex-direction: column; gap: 2px }
.hlcr-team-stat-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted) }
.hlcr-team-stat-value { font-size: 15px; font-weight: 600; color: var(--hl-text-heading) }
.hlcr-team-progress { margin-top: 0 }

.hlcr-export-bar { text-align: right; margin-bottom: 20px }
.hlcr-export-form--inline { display: inline }

@media (max-width: 768px) {
    .hlcr-stats-grid { grid-template-columns: 1fr 1fr }
    .hlcr-teams-grid { grid-template-columns: 1fr 1fr }
    .hlcr-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
}
@media (max-width: 600px) {
    .hlcr-hero { flex-direction: column; text-align: center; padding: 24px 20px }
    .hlcr-hero-back { position: static; margin-top: 8px }
    .hlcr-stats-grid { grid-template-columns: 1fr }
    .hlcr-teams-grid { grid-template-columns: 1fr }
    .hlcr-filter-form { flex-direction: column }
    .hlcr-filter-group { min-width: 0; width: 100% }
    .hlcr-filter-select { width: 100% }
    .hlcr-filter-group-btn { width: 100% }
    .hlcr-btn-filter { width: 100%; justify-content: center }
}


/* ---------- Coach Availability (hlca-) ---------- */

.hlca-wrapper { max-width: 1100px; margin: 0 auto }

.hlca-back-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--hl-text-secondary); text-decoration: none; margin-bottom: 16px; transition: color .2s }
.hlca-back-link:hover { color: var(--hl-primary); text-decoration: none }

.hlca-hero { display: flex; align-items: center; gap: 20px; background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: var(--hl-surface); padding: 28px 32px; border-radius: var(--hl-radius); margin-bottom: 24px }
.hlca-hero-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--hl-radius); background: rgba(255,255,255,.12) }
.hlca-hero-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px }
.hlca-hero-sub { font-size: 14px; opacity: .75; margin: 4px 0 0 }

.hlca-success-banner { display: flex; align-items: center; gap: 10px; background: #ecfdf5; border: 1px solid #a7f3d0; color: var(--hl-status-active-text); padding: 14px 20px; border-radius: var(--hl-radius-sm); margin-bottom: 20px; font-size: 14px; font-weight: 500 }
.hlca-success-banner svg { flex-shrink: 0; color: var(--hl-accent-dark) }

.hlca-instructions-card { display: flex; align-items: flex-start; gap: 12px; background: var(--hl-bg-hover); border: 1px solid #bfdbfe; padding: 16px 20px; border-radius: var(--hl-radius-sm); margin-bottom: 24px }
.hlca-instructions-icon { flex-shrink: 0; color: #3b82f6; margin-top: 1px }
.hlca-instructions-text { font-size: 14px; color: #1e40af; line-height: 1.5 }

.hlca-grid-card { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 24px; margin-bottom: 20px; overflow: hidden }
.hlca-grid-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch }

.hlca-grid { display: grid; grid-template-columns: 70px repeat(7, 1fr); gap: 2px; min-width: 600px; user-select: none; -webkit-user-select: none }
.hlca-grid-header { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--hl-text); padding: 10px 4px; background: var(--hl-bg-subtle); border-radius: 6px }
.hlca-grid-time-header { background: transparent }

.hlca-grid-time { display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-size: 11px; color: var(--hl-text-muted); font-weight: 500; white-space: nowrap; min-height: 28px }
.hlca-grid-time-hour { font-weight: 600; color: var(--hl-text-secondary) }
.hlca-grid-time-half { font-size: 10px; color: var(--hl-border-medium) }

.hlca-cell { min-height: 28px; background: var(--hl-bg-subtle); border-radius: 4px; cursor: pointer; transition: background .15s ease, box-shadow .15s ease; position: relative }
.hlca-cell:hover { background: var(--hl-border); box-shadow: inset 0 0 0 1px var(--hl-border-medium) }
.hlca-cell.hlca-active { background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15) }
.hlca-cell.hlca-active:hover { background: linear-gradient(135deg, #162d4a 0%, #245178 100%) }
.hlca-cell:focus { outline: 2px solid #3b82f6; outline-offset: 1px; z-index: 1 }
.hlca-cell-hour { border-top: 1px solid var(--hl-border) }

.hlca-legend { display: flex; align-items: center; gap: 24px; margin-bottom: 24px; padding: 0 4px }
.hlca-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--hl-text-secondary); font-weight: 500 }
.hlca-legend-swatch { display: inline-block; width: 18px; height: 14px; border-radius: 3px }
.hlca-legend-swatch-active { background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%) }
.hlca-legend-swatch-inactive { background: var(--hl-bg-subtle); border: 1px solid var(--hl-border) }
.hlca-legend-count { margin-left: auto; font-size: 13px; color: var(--hl-text-muted); font-weight: 500 }

.hlca-tz-card { display: flex; align-items: center; gap: 12px; background: var(--hl-surface); border: 1px solid var(--hl-border); padding: 14px 20px; border-radius: var(--hl-radius-sm); margin-bottom: 24px }
.hlca-tz-icon { flex-shrink: 0; color: var(--hl-interactive); opacity: .7 }
.hlca-tz-body { display: flex; flex-direction: column; gap: 4px; flex: 1 }
.hlca-tz-dropdown { border: 1px solid var(--hl-border); border-radius: var(--hl-radius-xs); padding: 6px 10px; font-size: 14px; font-weight: 500; color: var(--hl-text); font-family: inherit; cursor: pointer; background: var(--hl-bg-subtle); max-width: 360px }
.hlca-tz-dropdown:focus { outline: 2px solid var(--hl-interactive); outline-offset: 1px; border-color: var(--hl-interactive) }
.hlca-tz-hint { font-size: 12px; color: var(--hl-text-muted); font-weight: 500 }

.hlca-save-form { text-align: center; margin-bottom: 24px }
.hlca-btn-save { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: var(--hl-surface); border: none; padding: 12px 28px; border-radius: var(--hl-radius-sm); font-size: 15px; font-weight: 600; cursor: pointer; transition: box-shadow .25s ease, transform .25s ease; font-family: inherit }
.hlca-btn-save:hover { box-shadow: 0 8px 25px rgba(var(--hl-primary-rgb), .25); transform: translateY(-1px) }
.hlca-btn-save:active { transform: translateY(0) }

@media (max-width: 600px) {
    .hlca-hero { flex-direction: column; text-align: center; padding: 24px 20px }
    .hlca-grid-card { padding: 16px 12px }
    .hlca-legend { flex-wrap: wrap; gap: 12px }
    .hlca-legend-count { margin-left: 0; width: 100%; text-align: center }
}


/* ---------- Coaching Hub (hlch-) ---------- */

.hl-coaching-hub .hl-coaches-section { margin-bottom: 24px }
.hl-coaching-hub .hl-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px }
.hl-coaching-hub .hl-coach-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-xs) }
.hl-coaching-hub .hl-coach-card .hl-coach-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden }
.hl-coaching-hub .hl-coach-card .hl-coach-info span { font-size: 13px; color: var(--hl-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.hl-coaching-hub .hl-coach-email-text { word-break: break-all; overflow-wrap: break-word }
.hl-coaching-hub .hl-view-toggle { display: flex; gap: 4px; margin-bottom: 16px }
.hl-hub-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px }
.hl-hub-calendar-view .hl-calendar-header { margin-bottom: 8px; font-weight: 600 }
.hl-hub-calendar-view .hl-calendar-dow { padding: 4px; text-align: center; font-weight: 600; font-size: 12px; color: var(--hl-text-secondary) }
.hl-hub-calendar-view .hl-calendar-day { padding: 8px; min-height: 60px; border: 1px solid var(--hl-border-light); border-radius: var(--hl-radius-xs); font-size: 14px }
.hl-hub-calendar-view .hl-calendar-today { background: var(--hl-bg-hover) }
.hl-hub-calendar-view .hl-calendar-empty { border: none }
.hl-cal-day-num { display: block; font-weight: 600; margin-bottom: 4px }
.hl-cal-dots { display: flex; gap: 3px; flex-wrap: wrap }
.hl-cal-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block }
.hl-cal-dot--attended { background: #4caf50 }
.hl-cal-dot--scheduled { background: #2196f3 }
.hl-cal-dot--missed { background: var(--hl-error) }
.hl-cal-dot--cancelled { background: var(--hl-text-muted) }
.hl-cal-dot--rescheduled { background: #ff9800 }


/* ---------- My Coaching (hlmc-) ---------- */

.hlmc-wrap { max-width: 720px; margin: 0 auto }
.hlmc-empty { text-align: center; padding: 40px; color: var(--hl-text-muted); font-size: 15px }

.hlmc-cycle-header { margin-bottom: 12px; padding: 12px 0; border-bottom: 1px solid var(--hl-border) }
.hlmc-cycle-header h3 { margin: 0; font-size: 16px; color: var(--hl-primary) }
.hlmc-cycle-header .hlmc-cycle-name { font-size: 13px; color: var(--hl-text-secondary) }

.hlmc-coach-card { display: flex; align-items: center; gap: 14px; background: var(--hl-bg-subtle); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); padding: 16px 20px; margin-bottom: 20px }
.hlmc-coach-card img.hlmc-coach-avatar { width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0 }
.hlmc-coach-placeholder { width: 48px; height: 48px; border-radius: 50%; background: var(--hl-border); display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--hl-text-muted); flex-shrink: 0 }
.hlmc-coach-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--hl-text-muted) }
.hlmc-coach-name { font-size: 16px; font-weight: 600; color: var(--hl-text-heading) }
.hlmc-coach-email { font-size: 13px; color: var(--hl-secondary); text-decoration: none }

.hlmc-sessions-table { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px }
.hlmc-session-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: 10px; padding: 14px 18px; transition: border-color .15s }
.hlmc-session-row:hover { border-color: var(--hl-border-medium) }
.hlmc-session-locked { opacity: .65 }
.hlmc-session-info { flex: 1; min-width: 0 }
.hlmc-session-title { font-size: 15px; font-weight: 600; color: var(--hl-text-heading); margin-bottom: 4px }
.hlmc-session-num { display: inline-block; font-size: 12px; font-weight: 700; background: var(--hl-border); color: var(--hl-text); padding: 2px 8px; border-radius: 6px; margin-right: 6px; vertical-align: middle }
.hlmc-session-status { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
.hlmc-status-date { font-size: 13px; color: var(--hl-text) }
.hlmc-status-note { font-size: 12px; color: var(--hl-text-muted); font-style: italic }

.hlmc-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap }
.hlmc-badge-blue { background: var(--hl-status-progress-bg); color: var(--hl-status-progress-text) }
.hlmc-badge-green { background: var(--hl-status-active-bg); color: var(--hl-status-active-text) }
.hlmc-badge-gray { background: var(--hl-status-draft-bg); color: var(--hl-status-draft-text) }

.hlmc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: var(--hl-radius-xs); font-size: 13px; font-weight: 600; border: none; cursor: pointer; font-family: inherit; text-decoration: none; transition: var(--hl-transition) }
.hlmc-btn-outline { background: var(--hl-surface); color: var(--hl-text); border: 1px solid var(--hl-border-medium) }
.hlmc-btn-outline:hover { background: var(--hl-bg-subtle); border-color: var(--hl-text-muted); color: var(--hl-text-heading) }
.hlmc-btn-disabled { background: var(--hl-border-light); color: var(--hl-text-muted); border: 1px solid var(--hl-border); cursor: default }
.hlmc-lock-icon { font-size: 14px; width: 14px; height: 14px }

@media (max-width: 600px) {
    .hlmc-session-row { flex-direction: column; align-items: flex-start }
    .hlmc-session-action { width: 100% }
    .hlmc-session-action .hlmc-btn { width: 100%; justify-content: center }
}

/* =====================================================
   PROGRAM & NAVIGATION PAGES (Session 4)
   Extracted from PHP inline <style> blocks and style=
   attributes. Uses design tokens throughout.
   ===================================================== */

/* -- Schedule Session (.hls-*) -- */
.hls-scheduler *,.hls-session *{box-sizing:border-box}
.hls-scheduler button,.hls-session button{font-family:inherit;outline:none}
.hls-scheduler a,.hls-session a{text-decoration:none}
.hls-scheduler,.hls-session{max-width:780px;margin:0 auto!important;padding:0!important;font-family:var(--hl-font);color:var(--hl-text-heading);text-align:left}
.hls-locked{text-align:center;padding:60px 20px}
.hls-locked-icon{margin-bottom:20px}
.hls-locked-title{font-size:20px;font-weight:700;color:var(--hl-text-heading);margin:0 0 8px}
.hls-locked-msg{font-size:15px;color:var(--hl-text-secondary);margin:0}
.hls-reschedule-banner{display:flex;align-items:center;gap:10px;padding:12px 18px;background:var(--hl-status-paused-bg);border:1px solid #fde68a;border-radius:var(--hl-radius-sm);color:var(--hl-status-paused-text);font-size:14px;font-weight:500;margin-bottom:20px}
.hls-coach-header{display:flex;align-items:center;gap:16px;padding:20px 24px;background:linear-gradient(135deg,var(--hl-primary) 0%,var(--hl-primary-light) 100%);border-radius:var(--hl-radius);margin-bottom:24px;color:#fff}
.hls-coach-avatar{width:64px;height:64px;border-radius:50%;border:3px solid rgba(255,255,255,.25);object-fit:cover}
.hls-coach-info{display:flex;flex-direction:column;gap:2px}
.hls-coach-label{font-size:12px;text-transform:uppercase;letter-spacing:.8px;opacity:.7;font-weight:600}
.hls-coach-name{font-size:20px;font-weight:700}
.hls-duration{display:inline-flex;align-items:center;gap:5px;font-size:13px;opacity:.8;margin-top:2px}
.hls-booking-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start}
@media(max-width:680px){.hls-booking-layout{grid-template-columns:1fr}}
.hls-calendar-panel,.hls-slots-panel{background:var(--hl-surface)!important;border:1px solid var(--hl-border)!important;border-radius:var(--hl-radius);padding:24px;min-height:340px}
.hls-section-title{font-size:15px;font-weight:700;color:var(--hl-text-heading);margin:0 0 16px}
.hls-cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.hls-cal-month{font-size:16px;font-weight:700;color:var(--hl-text-heading)}
.hls-cal-arrow{background:var(--hl-surface)!important;border:1.5px solid var(--hl-border)!important;border-radius:10px!important;width:38px;height:38px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--hl-text-secondary)!important;transition:var(--hl-transition);padding:0!important}
.hls-cal-arrow:hover{background:var(--hl-bg-subtle)!important;border-color:var(--hl-border-medium)!important;color:var(--hl-text-heading)!important}
.hls-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}
.hls-cal-head{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--hl-text-muted);padding:8px 0}
.hls-cal-empty{padding:8px 0}
.hls-cal-day{padding:10px 0;border-radius:10px;font-size:14px;font-weight:500;cursor:default;transition:var(--hl-transition);position:relative}
.hls-cal-on{cursor:pointer;color:var(--hl-text-heading)}
.hls-cal-on:hover{background:var(--hl-interactive-bg);color:var(--hl-interactive)}
.hls-cal-off{color:#d1d5db}
.hls-cal-today{font-weight:700}
.hls-cal-today::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:4px;height:4px;border-radius:50%;background:var(--hl-interactive)}
.hls-cal-sel{background:var(--hl-interactive)!important;color:#fff!important;font-weight:700;box-shadow:0 2px 8px rgba(99,102,241,.35)}
.hls-cal-sel::after{background:#fff!important}
.hls-slots-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;height:260px;gap:12px;color:var(--hl-text-muted);font-size:14px}
.hls-slots-placeholder p{margin:0}
.hls-slots-header{margin-bottom:12px}
.hls-slots-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:40px 0;color:var(--hl-text-secondary);font-size:14px}
.hls-slots-loading p{margin:0}
.hls-spinner{width:32px;height:32px;border:3px solid var(--hl-border);border-top-color:var(--hl-interactive);border-radius:50%;animation:hls-spin .7s linear infinite}
@keyframes hls-spin{to{transform:rotate(360deg)}}
.hls-slots-list{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto;padding-right:4px}
.hls-slots-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 0;color:var(--hl-text-muted);font-size:14px}
.hls-slots-empty p{margin:0}
.hls-slots-warning{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--hl-status-paused-bg);border-radius:var(--hl-radius-xs);font-size:13px;color:var(--hl-status-paused-text);margin-top:12px}
.hls-tz-selector{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--hl-bg-subtle);border:1px solid var(--hl-border);border-radius:10px;margin-bottom:14px}
.hls-tz-selector svg{flex-shrink:0;color:var(--hl-interactive);opacity:.7}
.hls-tz-selector select{flex:1;border:none;background:transparent;font-size:13px;font-weight:500;color:var(--hl-text-heading);font-family:inherit;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;padding:2px 0}
.hls-tz-selector select:focus{color:var(--hl-interactive)}
.hls-slot{display:flex;align-items:center;justify-content:center;padding:12px 16px;border:1.5px solid var(--hl-border)!important;border-radius:var(--hl-radius-sm)!important;background:var(--hl-surface)!important;cursor:pointer;transition:var(--hl-transition);font-family:inherit}
.hls-slot:hover{border-color:var(--hl-interactive)!important;background:var(--hl-interactive-bg)!important}
.hls-slot-time{font-size:14px;font-weight:600;color:var(--hl-text-heading)!important}
.hls-slot:hover .hls-slot-time{color:var(--hl-interactive)!important}
.hls-slot-sel{border-color:var(--hl-interactive)!important;background:var(--hl-interactive)!important}
.hls-slot-sel .hls-slot-time{color:#fff!important}
.hls-confirm{margin-top:24px;padding:20px 24px;background:var(--hl-interactive-bg);border:1px solid var(--hl-interactive-border);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;animation:hls-slide .25s ease}
@keyframes hls-slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.hls-confirm-details{display:flex;align-items:center;gap:14px}
.hls-confirm-icon{width:44px;height:44px;background:var(--hl-interactive-border);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hls-confirm-date{font-size:15px;font-weight:700;color:var(--hl-text-heading)}
.hls-confirm-time{font-size:14px;color:var(--hl-interactive);font-weight:600}
.hls-confirm-actions{display:flex;align-items:center;gap:12px}
.hls-book-btn{padding:12px 28px;background:var(--hl-interactive);color:#fff;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;transition:var(--hl-transition);font-family:inherit}
.hls-book-btn:hover{background:var(--hl-interactive-dark);box-shadow:0 4px 14px rgba(99,102,241,.35)}
.hls-book-btn:disabled{opacity:.7;cursor:not-allowed}
.hls-btn-loading{position:relative;color:transparent}
.hls-btn-loading::after{content:'';position:absolute;top:50%;left:50%;width:18px;height:18px;margin:-9px 0 0 -9px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:hls-spin .6s linear infinite}
.hls-booking-status{font-size:13px;color:var(--hl-text-secondary)}
.hls-success{animation:hls-slide .35s ease}
.hls-success-inner{text-align:center;padding:48px 24px;max-width:440px;margin:0 auto}
.hls-success-check{margin-bottom:20px}
.hls-success-title{font-size:26px;font-weight:800;color:var(--hl-accent-dark);margin:0 0 6px}
.hls-success-subtitle{font-size:15px;color:var(--hl-text-secondary);margin:0 0 28px}
.hls-success-card{background:var(--hl-bg-subtle);border:1px solid var(--hl-border);border-radius:var(--hl-radius-sm);padding:18px 24px;margin-bottom:24px;text-align:left}
.hls-success-row{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:14px;color:var(--hl-text-heading);font-weight:500}
.hls-zoom-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:var(--hl-secondary);color:#fff;border-radius:10px;font-size:15px;font-weight:700;text-decoration:none;transition:var(--hl-transition);margin-bottom:16px}
.hls-zoom-btn:hover{background:var(--hl-secondary-dark);color:#fff;box-shadow:0 4px 14px rgba(37,99,235,.3)}
.hls-view-details-link{display:inline-block;font-size:14px;color:var(--hl-interactive);text-decoration:none;font-weight:600}
.hls-view-details-link:hover{text-decoration:underline}
.hls-tabs{display:inline-flex!important;gap:4px!important;padding:4px!important;margin:0 0 28px!important;background:var(--hl-bg-subtle)!important;border:none!important;border-bottom:none!important;border-radius:var(--hl-radius-sm)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)!important}
.hls-tab{display:inline-flex!important;align-items:center!important;gap:7px!important;padding:10px 22px!important;margin:0!important;border:none!important;border-bottom:none!important;border-radius:9px!important;background:transparent!important;font-size:14px!important;font-weight:600!important;color:var(--hl-text-secondary)!important;cursor:pointer!important;transition:var(--hl-transition)!important;font-family:var(--hl-font)!important;line-height:1.4!important;white-space:nowrap!important;text-decoration:none!important;box-shadow:none!important;text-transform:none!important;letter-spacing:normal!important}
.hls-tab:hover{color:var(--hl-text)!important;background:rgba(255,255,255,.5)!important}
.hls-tab-on{background:var(--hl-surface)!important;color:var(--hl-text-heading)!important;box-shadow:var(--hl-shadow)!important}
.hls-tab-on:hover{background:var(--hl-surface)!important;color:var(--hl-text-heading)!important}
.hls-tab svg{flex-shrink:0;opacity:.6}
.hls-tab-on svg{opacity:1;color:var(--hl-interactive)!important;stroke:var(--hl-interactive)!important}
.hls-detail-card{background:var(--hl-surface);border:1px solid var(--hl-border);border-radius:14px;padding:28px}
.hls-detail-status{margin-bottom:24px}
.hls-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:20px;font-size:13px;font-weight:700}
.hls-badge-green{background:var(--hl-status-complete-bg);color:var(--hl-status-complete-text)}
.hls-badge-blue{background:var(--hl-interactive-border);color:#3730a3}
.hls-badge-red{background:var(--hl-status-archived-bg);color:var(--hl-status-archived-text)}
.hls-detail-rows{display:flex;flex-direction:column;gap:20px;margin-bottom:24px}
.hls-detail-row{display:flex;align-items:flex-start;gap:14px}
.hls-detail-icon{width:44px;height:44px;background:var(--hl-interactive-bg);border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.hls-detail-avatar{width:44px;height:44px;border-radius:10px;object-fit:cover}
.hls-detail-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--hl-text-muted);margin-bottom:2px}
.hls-detail-value{font-size:16px;font-weight:700;color:var(--hl-text-heading)}
.hls-detail-sub{font-size:13px;color:var(--hl-text-secondary);margin-top:2px}
.hls-detail-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px;padding-top:20px;border-top:1px solid var(--hl-border-light)}
.hls-action-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border:1px solid var(--hl-border)!important;border-radius:10px!important;background:var(--hl-surface)!important;font-size:13px;font-weight:600;color:var(--hl-text)!important;cursor:pointer;text-decoration:none;transition:var(--hl-transition);font-family:inherit}
.hls-action-btn:hover{background:var(--hl-bg-subtle)!important;border-color:var(--hl-border-medium)!important;color:var(--hl-text-heading)!important}
.hls-action-danger{color:var(--hl-error)!important;border-color:#fecaca!important}
.hls-action-danger:hover{background:#fef2f2!important;border-color:#fca5a5!important;color:var(--hl-error-dark)!important}
.hls-cancel-box{margin-top:16px;padding:18px 20px;background:#fef2f2;border:1px solid #fecaca;border-radius:var(--hl-radius-sm);animation:hls-slide .2s ease}
.hls-cancel-box p{margin:0 0 14px;color:var(--hl-status-archived-text);font-size:14px;font-weight:500}
.hls-cancel-btns{display:flex;gap:10px;flex-wrap:wrap}
.hls-cancel-confirm-btn{padding:9px 18px;background:var(--hl-error-dark);color:#fff;border:none;border-radius:9px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.hls-cancel-confirm-btn:hover{background:#b91c1c}
.hls-attendance-box{margin-top:24px;padding:20px 24px;background:var(--hl-interactive-bg);border:1px solid var(--hl-interactive-border);border-radius:14px;animation:hls-slide .25s ease}
.hls-attendance-header{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;color:var(--hl-text-heading);margin-bottom:14px}
.hls-attendance-btns{display:flex;gap:10px;flex-wrap:wrap}
.hls-attend-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 24px;border-radius:10px;font-size:14px;font-weight:700;cursor:pointer;transition:var(--hl-transition);font-family:inherit;border:2px solid}
.hls-attend-yes{background:var(--hl-surface);color:var(--hl-accent-dark);border-color:#a7f3d0}
.hls-attend-yes:hover{background:#ecfdf5;border-color:var(--hl-accent-dark)}
.hls-attend-no{background:var(--hl-surface);color:var(--hl-error-dark);border-color:#fecaca}
.hls-attend-no:hover{background:#fef2f2;border-color:var(--hl-error-dark)}
.hls-attend-btn:disabled{opacity:.6;cursor:not-allowed}
.hls-empty-forms{text-align:center;padding:48px 20px;color:var(--hl-text-muted);font-size:14px}
.hls-empty-forms p{margin:12px 0 0}
.hls-form-card{background:var(--hl-bg-subtle);border:1px solid var(--hl-border);border-radius:10px;padding:18px 20px;margin-bottom:10px}
.hls-form-title{font-size:14px;font-weight:700;color:var(--hl-text-heading);margin-bottom:10px;text-transform:uppercase;letter-spacing:.3px}
.hls-form-row{display:flex;gap:8px;margin-bottom:4px;font-size:14px}
.hls-form-label{color:var(--hl-text-secondary);min-width:120px;flex-shrink:0}
.hls-form-value{color:var(--hl-text-heading);font-weight:500}
.hls-form-section-title{font-size:15px;font-weight:700;color:var(--hl-text-heading);margin:0 0 12px}
.hls-form-section-wrapper{margin-top:24px}
.hls-not-submitted{color:var(--hl-text-muted);font-size:14px;margin-bottom:24px}
.hls-not-submitted:last-child{margin-bottom:0}
@media(max-width:680px){
    .hls-coach-header{flex-direction:column;text-align:center;align-items:center}
    .hls-confirm{flex-direction:column;text-align:center}
    .hls-confirm-details{flex-direction:column}
    .hls-detail-actions{flex-direction:column}
    .hls-action-btn,.hls-cancel-confirm-btn{width:100%;justify-content:center;text-align:center}
}

/* -- RP Session Tabs (.hl-rp-*) -- */
.hl-rp-tabs{display:flex;gap:0;border-bottom:2px solid var(--hl-border);margin-bottom:20px}
.hl-rp-tab{padding:10px 20px;font-size:14px;font-weight:600;color:var(--hl-text-muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;transition:var(--hl-transition);background:none;border-top:none;border-left:none;border-right:none;white-space:nowrap}
.hl-rp-tab:hover{color:var(--hl-text)}
.hl-rp-tab.active{color:var(--hl-primary);border-bottom-color:var(--hl-primary)}
.hl-rp-tab-panel{display:none}
.hl-rp-tab-panel.active{display:block}
.hl-rp-session-detail{max-width:860px;margin:0 auto}

/* -- Back Link Block Variant -- */
.hl-back-link--block{display:block;max-width:860px;margin:0 auto 8px}

/* -- My Cycle Assessment Cards (.hlmyc-*) -- */
.hlmyc-stat-row{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.hlmyc-stat-card{flex:1;min-width:160px;border:1px solid var(--hl-border);border-radius:var(--hl-radius-xs);padding:1rem}
.hlmyc-stat-value{font-size:1.75rem;font-weight:700}
.hlmyc-stat-value--success{color:var(--hl-accent-dark)}
.hlmyc-stat-value--error{color:var(--hl-error)}
.hlmyc-stat-label{font-size:0.8rem;color:var(--hl-text-muted);text-transform:uppercase;letter-spacing:0.05em}
.hlmyc-phase-divider{border-left:3px solid var(--hl-primary);padding-left:0.75rem;margin:1.5rem 0 0.75rem;font-weight:600}
.hlmyc-phase-divider--ca{border-left-color:var(--hl-accent-dark)}
.hlmyc-phase-count{font-weight:400;color:var(--hl-text-muted)}
.hlmyc-detail-grid{background:var(--hl-bg-subtle);border-radius:var(--hl-radius-sm);padding:1.25rem 1.5rem;margin-bottom:1.5rem}
.hlmyc-detail-grid-inner{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem 2rem;max-width:600px}
.hlmyc-detail-label{font-size:0.75rem;color:var(--hl-text-muted);text-transform:uppercase;letter-spacing:0.05em}
.hlmyc-detail-value{font-weight:600}
.hlmyc-back-link{display:inline-block;margin-bottom:1rem;color:var(--hl-interactive);text-decoration:none}
.hlmyc-back-link:hover{text-decoration:underline}

/* -- Cycle Workspace Extras (.hl-cw-*) -- */
.hl-cw-section-label--plain{border:none;margin:0;padding:0}
.hl-cw-table-link{color:var(--hl-interactive);text-decoration:none;font-weight:600}
.hl-cw-table-link:hover{color:var(--hl-interactive-dark);text-decoration:underline}

/* -- My Programs Guide Line -- */
.hl-program-card-guide{font-size:13px;color:var(--hl-text-secondary);margin:4px 0 8px}

/* --- RP Notes (.hlrn-*) -------------------------------------------- */
.hlrn-form-wrapper { max-width: 820px; margin: 0 auto; font-family: var(--hl-font) }
.hlrn-hero { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: #fff !important; padding: 28px 32px; border-radius: var(--hl-radius); margin-bottom: 24px; position: relative; z-index: 1; overflow: visible }
.hlrn-hero * { color: #fff !important }
.hlrn-hero-icon { background: rgba(255,255,255,.12); border-radius: var(--hl-radius-sm); padding: 12px; display: flex; align-items: center; justify-content: center }
.hlrn-hero-title { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.3px; color: #fff !important }
.hlrn-hero-sub { font-size: 14px; opacity: .8; margin: 4px 0 0; color: rgba(255,255,255,.8) !important }
.hlrn-alert { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-radius: var(--hl-radius-sm); font-size: 14px; margin-bottom: 20px }
.hlrn-alert-info { background: #e8f4fd; color: #1e5f8a; border: 1px solid #b8daef }
.hlrn-info-card { background: var(--hl-bg-card); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); padding: 20px 24px; margin-bottom: 28px }
.hlrn-info-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px }
.hlrn-info-row + .hlrn-info-row { margin-top: 12px }
.hlrn-info-cell { display: flex; flex-direction: column; gap: 4px }
.hlrn-info-cell--wide { grid-column: span 2 }
.hlrn-info-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .8px; color: var(--hl-text-muted) }
.hlrn-info-value { font-size: 15px; font-weight: 600; color: var(--hl-text-heading) }
.hlrn-session-num { display: inline-flex; align-items: center; justify-content: center; background: var(--hl-primary); color: #fff; width: 28px; height: 28px; border-radius: var(--hl-radius-xs); font-size: 14px }
.hlrn-section { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); margin-bottom: 20px; overflow: hidden }
.hlrn-section-auto { background: var(--hl-bg-subtle) }
.hlrn-section-header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; background: linear-gradient(135deg, var(--hl-bg-subtle), var(--hl-bg)); border-bottom: 1px solid var(--hl-border) }
.hlrn-section-num { background: var(--hl-primary); color: #fff; font-size: 11px; font-weight: 700; width: 24px; height: 24px; border-radius: var(--hl-radius-xs); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0 }
.hlrn-section-title { font-size: 15px; font-weight: 600; color: var(--hl-text-heading); display: block }
.hlrn-section-hint { font-size: 12px; color: var(--hl-text-muted); display: block; margin-top: 2px }
.hlrn-section-body { padding: 20px }
.hlrn-field { margin-bottom: 20px }
.hlrn-field:last-child { margin-bottom: 0 }
.hlrn-field-label { display: block; font-size: 13px; font-weight: 600; color: var(--hl-text); margin-bottom: 8px; text-transform: uppercase; letter-spacing: .3px }
.hlrn-readonly-value { background: var(--hl-bg); padding: 12px 16px; border-radius: var(--hl-radius-sm); font-size: 14px; color: var(--hl-text); line-height: 1.6; min-height: 20px }
.hlrn-date-input { padding: 10px 14px; border: 2px solid var(--hl-border); border-radius: var(--hl-radius-sm); font-size: 14px; font-weight: 500; color: var(--hl-text-heading); background: var(--hl-surface); font-family: inherit; transition: border-color .2s }
.hlrn-date-input:focus { outline: none; border-color: #2d5f8a; box-shadow: 0 0 0 3px rgba(45,95,138,.1) }
.hlrn-muted { color: var(--hl-text-muted); font-size: 14px; margin: 0 }
.hlrn-prep-card { background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); padding: 16px; margin-bottom: 16px }
.hlrn-prep-card:last-child { margin-bottom: 0 }
.hlrn-prep-card-title { font-size: 13px; font-weight: 700; color: var(--hl-text); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; text-transform: uppercase; letter-spacing: .5px }
.hlrn-progress { margin-top: 4px }
.hlrn-progress-info { display: flex; justify-content: space-between; font-size: 13px; color: var(--hl-text-secondary); margin-bottom: 8px }
.hlrn-progress-pct { font-weight: 700; color: var(--hl-primary) }
.hlrn-progress-bar { height: 8px; background: var(--hl-border); border-radius: 4px; overflow: hidden }
.hlrn-progress-fill { height: 100%; background: linear-gradient(90deg, var(--hl-primary), #2d5f8a); border-radius: 4px; transition: width .5s ease }
.hlrn-scroll-list { max-height: 260px; overflow-y: auto }
.hlrn-plan-item { padding: 12px; border: 1px solid var(--hl-border-light); border-radius: var(--hl-radius-xs); margin-bottom: 8px; background: var(--hl-bg-subtle) }
.hlrn-plan-item:last-child { margin-bottom: 0 }
.hlrn-plan-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px }
.hlrn-plan-date { font-size: 13px; font-weight: 600; color: var(--hl-text-heading) }
.hlrn-plan-excerpt { font-size: 13px; color: var(--hl-text-secondary); margin: 0; line-height: 1.5 }
.hlrn-plan-fields { display: grid; gap: 6px; margin-top: 8px; font-size: 12px }
.hlrn-plan-field-row { display: flex; gap: 8px; line-height: 1.4 }
.hlrn-plan-field-label { font-weight: 600; color: var(--hl-text-secondary); min-width: 140px; flex-shrink: 0 }
.hlrn-plan-field-value { color: var(--hl-text) }
.hlrn-badge { display: inline-flex; padding: 3px 10px; border-radius: var(--hl-radius-pill); font-size: 11px; font-weight: 600; background: #e8f4fd; color: #1e5f8a }
.hlrn-badge-yes { background: var(--hl-status-active-bg); color: var(--hl-status-active-text) }
.hlrn-badge-no { background: var(--hl-bg); color: var(--hl-text-secondary) }
.hlrn-cv-sub { border: 1px solid var(--hl-border); border-radius: var(--hl-radius-xs); padding: 12px; margin-top: 12px }
.hlrn-cv-sub-header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px }
.hlrn-cv-domain { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hl-border-light) }
.hlrn-cv-domain-name { font-size: 12px; font-weight: 600; color: var(--hl-text); margin-bottom: 4px }
.hlrn-cv-indicators { display: flex; flex-wrap: wrap; gap: 4px }
.hlrn-guide-trigger { text-align: center; margin: 20px 0 8px }
.hlrn-guide-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: var(--hl-radius-sm); background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: #fff; border: none; cursor: pointer; font-size: 14px; font-weight: 600; font-family: inherit; box-shadow: 0 2px 8px rgba(0,0,0,.08); transition: all .2s }
.hlrn-guide-btn:hover { box-shadow: 0 4px 16px rgba(0,0,0,.12); transform: translateY(-1px) }
.hlrn-guide-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 9998 }
.hlrn-guide-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 90vw; background: var(--hl-surface); z-index: 9999; box-shadow: -4px 0 24px rgba(0,0,0,.15); display: flex; flex-direction: column; overflow: hidden }
.hlrn-guide-drawer-header { padding: 24px 24px 16px; border-bottom: 1px solid var(--hl-border); position: relative }
.hlrn-guide-drawer-title { font-size: 20px; font-weight: 700; color: var(--hl-text-heading); margin: 0 }
.hlrn-guide-drawer-sub { font-size: 13px; color: var(--hl-text-secondary); margin: 6px 0 0 }
.hlrn-guide-close { position: absolute; top: 16px; right: 16px; background: none; border: none; font-size: 28px; color: var(--hl-text-muted); cursor: pointer; line-height: 1; padding: 4px }
.hlrn-guide-close:hover { color: var(--hl-text-heading) }
.hlrn-guide-drawer-body { padding: 20px 24px; overflow-y: auto; flex: 1 }
.hlrn-rp-steps { display: flex; flex-direction: column; gap: 12px }
.hlrn-rp-step { display: flex; gap: 12px; padding: 14px 16px; background: var(--hl-bg-card); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm) }
.hlrn-rp-step-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--hl-radius-xs); background: var(--hl-border); display: flex; align-items: center; justify-content: center; color: var(--hl-text-secondary) }
.hlrn-rp-step-title { font-size: 14px; font-weight: 700; color: var(--hl-text-heading); margin-bottom: 6px }
.hlrn-rp-step-questions { margin: 0; padding-left: 18px; list-style: disc }
.hlrn-rp-step-questions li { font-size: 13px; color: var(--hl-text-secondary); line-height: 1.5; margin-bottom: 6px }
.hlrn-rp-step-questions li:last-child { margin-bottom: 0 }
.hlrn-form-wrapper .mce-toolbar .mce-btn { background: transparent !important; border-color: transparent !important }
.hlrn-form-wrapper .mce-toolbar .mce-btn button { background-color: transparent !important; color: #555 !important }
.hlrn-form-wrapper .mce-toolbar .mce-btn:hover, .hlrn-form-wrapper .mce-toolbar .mce-btn.mce-active { background: var(--hl-border) !important }
.hlrn-form-wrapper .mce-ico { color: #555 !important }
.hlrn-form-wrapper .mce-toolbar .mce-btn-group { background: transparent !important }
.hlrn-form-wrapper .mce-panel { background: var(--hl-bg-card) !important; border-color: var(--hl-border) !important }
.hlrn-form-wrapper .mce-edit-area { border-color: var(--hl-border) !important }
.hlrn-form-wrapper .mce-edit-area iframe { min-height: 80px }
.hlrn-form-wrapper .wp-editor-container { border: 2px solid var(--hl-border); border-radius: var(--hl-radius-sm); overflow: hidden }
.hlrn-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--hl-border) }
.hlrn-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; border-radius: var(--hl-radius-sm); font-size: 15px; font-weight: 600; border: none; cursor: pointer; transition: all .2s; font-family: inherit }
.hlrn-btn-draft { background: var(--hl-bg); color: var(--hl-text); border: 2px solid var(--hl-border) }
.hlrn-btn-draft:hover { background: var(--hl-border); border-color: var(--hl-border-medium) }
.hlrn-btn-submit { background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%); color: #fff; border: 2px solid transparent; box-shadow: 0 4px 14px rgba(0,0,0,.12) }
.hlrn-btn-submit:hover { box-shadow: 0 6px 20px rgba(0,0,0,.15); transform: translateY(-1px) }
.hlrn-cvr { font-size: 13px }
.hlrn-cvr-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-bottom: 10px; font-size: 12px; color: var(--hl-text-secondary) }
.hlrn-cvr-meta strong { color: var(--hl-text) }
.hlrn-cvr-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
.hlrn-cvr-col { border: 1px solid var(--hl-border); border-radius: var(--hl-radius-xs); overflow: hidden }
.hlrn-cvr-col-hdr { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--hl-bg-subtle); border-bottom: 1px solid var(--hl-border) }
.hlrn-cvr-col-hdr strong { font-size: 13px; color: var(--hl-text-heading) }
.hlrn-cvr-col-badge { display: inline-block; padding: 1px 7px; border-radius: var(--hl-radius-sm); font-size: 10px; font-weight: 600 }
.hlrn-cvr-col-badge--submitted { background: var(--hl-status-active-bg); color: var(--hl-status-active-text) }
.hlrn-cvr-col-badge--draft { background: var(--hl-bg); color: var(--hl-text-secondary) }
.hlrn-cvr-col-by { font-size: 10px; color: var(--hl-text-muted); margin-left: auto; white-space: nowrap }
.hlrn-cvr-col-body { padding: 8px 10px }
.hlrn-cvr-empty { padding: 20px; text-align: center; color: var(--hl-text-muted); font-size: 12px }
.hlrn-cv-full-data .hlcv-context { margin: 4px 0 8px; padding: 6px 10px; background: var(--hl-bg-subtle); border-radius: var(--hl-radius-xs); border: 1px solid var(--hl-border) }
.hlrn-cv-full-data .hlcv-context-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--hl-text); margin-bottom: 4px }
.hlrn-cv-full-data .hlcv-pills { display: flex; flex-wrap: wrap; gap: 3px }
.hlrn-cv-full-data .hlcv-ro-badge { display: inline-block; padding: 1px 7px; border-radius: var(--hl-radius-sm); font-size: 10px; font-weight: 500 }
.hlrn-cv-full-data .hlcv-ro-yes { background: var(--hl-status-active-bg); color: var(--hl-status-active-text) }
.hlrn-cv-full-data .hlcv-ro-no { background: var(--hl-status-archived-bg); color: var(--hl-status-archived-text) }
.hlrn-cv-full-data .hlcv-domain-flat { margin: 6px 0; padding: 6px 8px; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius-xs) }
.hlrn-cv-full-data .hlcv-domain-flat-header { display: flex; align-items: center; gap: 5px; margin-bottom: 4px }
.hlrn-cv-full-data .hlcv-domain-num { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: linear-gradient(135deg, var(--hl-primary), #2d5f8a); color: #fff; font-size: 9px; font-weight: 700; flex-shrink: 0 }
.hlrn-cv-full-data .hlcv-domain-flat-title { font-size: 12px; font-weight: 600; color: var(--hl-text-heading) }
.hlrn-cv-full-data .hlcv-indicators-grid { display: flex; flex-direction: column; gap: 2px }
.hlrn-cv-full-data .hlcv-ind-row { display: flex; align-items: center; justify-content: space-between; padding: 3px 6px; background: var(--hl-bg-subtle); border-radius: 4px; border: 1px solid var(--hl-border-light) }
.hlrn-cv-full-data .hlcv-ind-label { font-size: 11px; color: var(--hl-text); flex: 1 }
.hlrn-cv-full-data .hlcv-domain-desc-ro { margin-top: 4px; padding: 5px 8px; background: var(--hl-bg-hover); border-radius: 5px; border: 1px solid var(--hl-interactive-border) }
.hlrn-cv-full-data .hlcv-domain-desc-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--hl-interactive); margin-bottom: 1px }
.hlrn-cv-full-data .hlcv-domain-desc-text { font-size: 11px; color: var(--hl-secondary-dark); line-height: 1.4 }
@media (max-width: 900px) { .hlrn-cvr-cols { grid-template-columns: 1fr } }
@media (max-width: 600px) {
    .hlrn-hero { flex-direction: column; text-align: center; padding: 24px 20px }
    .hlrn-info-row { grid-template-columns: 1fr 1fr }
    .hlrn-actions { flex-direction: column }
    .hlrn-btn { justify-content: center }
}

/* --- Child Assessment Summary (.hl-ca-summary-*) ------------------- */
.hl-ca-summary-wrap { max-width: 900px; margin: 0 auto 2em; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); box-shadow: var(--hl-shadow); padding: 40px 48px; font-family: var(--hl-font); color: var(--hl-text); line-height: 1.6 }
.hl-ca-summary-wrap .hl-ca-branded-header { text-align: center; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 2px solid var(--hl-border-light) }
.hl-ca-summary-wrap .hl-ca-brand-logo { display: block; text-align: center; margin-bottom: 16px }
.hl-ca-summary-wrap .hl-ca-brand-img { max-width: 176px; height: auto }
.hl-ca-summary-wrap .hl-ca-title { font-size: 22px; font-weight: 700; color: var(--hl-text-heading); margin: 0 }
.hl-ca-summary-wrap .hl-ca-phase-label { color: var(--hl-text-secondary); font-weight: 400 }
.hl-ca-summary-teacher-info { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--hl-border-light) }
.hl-ca-summary-teacher-info .hl-ca-info-row { margin-bottom: 6px; font-size: 15px }
.hl-ca-summary-teacher-info .hl-ca-info-label { font-weight: 700; color: var(--hl-text-heading); margin-right: 6px }
.hl-ca-summary-teacher-info .hl-ca-info-value { color: var(--hl-text) }
.hl-ca-summary-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 16px }
table.hl-ca-summary-matrix { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 500px }
table.hl-ca-summary-matrix thead th { padding: 12px 16px; font-weight: 600; font-size: 13px; color: var(--hl-text-secondary); text-align: center; border-bottom: 2px solid var(--hl-border); white-space: nowrap }
table.hl-ca-summary-matrix thead th:first-child { text-align: left; min-width: 180px }
table.hl-ca-summary-matrix tbody td { padding: 10px 16px; vertical-align: middle; text-align: center; border-bottom: 1px solid var(--hl-border-light) }
table.hl-ca-summary-matrix tbody td:first-child { text-align: left; font-weight: 500; color: var(--hl-text-heading); white-space: nowrap; min-width: 180px }
table.hl-ca-summary-matrix tbody tr:nth-child(even) td { background-color: var(--hl-bg-subtle) }
table.hl-ca-summary-matrix tbody tr:nth-child(odd) td { background-color: var(--hl-surface) }
.hl-ca-summary-child-dob { display: block; font-size: 12px; font-weight: 400; color: var(--hl-text-muted) }
.hl-ca-answer-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--hl-primary) }
.hl-ca-answer-empty { color: var(--hl-text-muted); font-size: 13px }
.hl-ca-summary-group-header { font-size: 16px; font-weight: 700; color: var(--hl-primary); margin: 24px 0 10px; padding: 8px 12px; background: var(--hl-bg-subtle); border-radius: var(--hl-radius-xs); border-left: 4px solid var(--hl-secondary) }
.hl-ca-summary-group-header:first-of-type { margin-top: 0 }
.hl-ca-skip-badge { display: inline-block; padding: 2px 8px; border-radius: var(--hl-radius-pill); background: var(--hl-bg); color: var(--hl-text-muted); font-size: 11px; font-weight: 500; font-style: italic }
.hl-ca-missing-child { margin: 16px 0; padding: 12px 16px; background: var(--hl-bg-subtle); border-radius: var(--hl-radius-xs); border: 1px dashed var(--hl-border) }
.hl-ca-missing-child a { font-weight: 600; color: var(--hl-secondary); text-decoration: none }
.hl-ca-missing-child p { margin: 4px 0 0; font-size: 13px; color: var(--hl-text-secondary) }
@media (max-width: 768px) {
    .hl-ca-summary-wrap { padding: 24px 20px; margin: 0 -10px 1.5em }
    .hl-ca-summary-wrap .hl-ca-title { font-size: 18px }
}

/* Child Assessment utility classes */
.hl-ca-actions-row { margin-top: 16px }
.hl-ca-row-skipped { opacity: 0.5 }
.hl-ca-skip-cell { text-align: center }


/* --- Teacher Assessment Renderer (.hl-tsa-*) ----------------------- */
.hl-tsa-form-wrap { max-width: 900px; margin: 2em auto; background: var(--hl-surface); border-radius: var(--hl-radius); box-shadow: var(--hl-shadow); padding: 32px 40px; color: var(--hl-text) }
.hl-tsa-form-wrap p, .hl-tsa-form-wrap td, .hl-tsa-form-wrap th, .hl-tsa-form-wrap label, .hl-tsa-form-wrap span, .hl-tsa-form-wrap div { color: inherit }

.hl-tsa-header { text-align: center; margin-bottom: 1.5em; padding-bottom: 1.5em; border-bottom: 1px solid var(--hl-border) }
.hl-tsa-header h2 { margin: 0 0 6px 0; font-size: 1.6em; font-weight: 700; color: var(--hl-text) }
.hl-tsa-program-name { display: block; font-size: 0.95em; color: var(--hl-text-secondary); margin-bottom: 8px }
.hl-tsa-phase-badge { display: inline-block; padding: 3px 12px; border-radius: 20px; font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em }
.hl-tsa-phase-pre { background: #e3f2fd; color: #1565c0 }
.hl-tsa-phase-post { background: #e8f5e9; color: #2e7d32 }

.hl-tsa-instructions { background: var(--hl-bg-subtle); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); padding: 16px 20px; margin-bottom: 1.5em; font-size: 0.95em; line-height: 1.6; color: var(--hl-text-secondary) }
.hl-tsa-instructions p:first-child { margin-top: 0 }
.hl-tsa-instructions p:last-child { margin-bottom: 0 }
.hl-tsa-notice { padding: 14px 18px; background: #fff8e1; border-left: 4px solid #ffb300; border-radius: 0 var(--hl-radius-xs) var(--hl-radius-xs) 0; margin: 1em 0 }

.hl-tsa-step-indicator { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 2em; padding: 16px 0 8px }
.hl-tsa-step-label { font-size: 0.85em; color: var(--hl-text-secondary); font-weight: 500 }
.hl-tsa-step-dots { display: flex; gap: 10px }
.hl-tsa-step { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--hl-border-medium); font-size: 0.85em; font-weight: 600; color: var(--hl-text-muted); background: var(--hl-surface); cursor: pointer; transition: all 0.25s ease }
.hl-tsa-step:hover { border-color: var(--hl-primary); color: var(--hl-primary) }
.hl-tsa-step--active, .hl-tsa-step--active:hover { border-color: var(--hl-primary); background: var(--hl-primary); color: #fff !important; transform: scale(1.1) }
.hl-tsa-step--completed { border-color: #2e7d32; background: #e8f5e9; color: #2e7d32 }

.hl-tsa-section { margin-bottom: 2.5em }
.hl-tsa-section-title { font-size: 1.25em; font-weight: 600; margin: 0 0 0.4em 0; padding-bottom: 0.4em; border-bottom: 2px solid var(--hl-border); color: var(--hl-text) }
.hl-tsa-section-desc { color: var(--hl-text-secondary); font-size: 0.93em; margin: 0 0 1.2em 0; line-height: 1.5 }

.hl-tsa-table-wrap { overflow-x: auto; margin-bottom: 1em; -webkit-overflow-scrolling: touch; border-radius: var(--hl-radius-xs); border: 1px solid var(--hl-border) }
table.hl-tsa-likert-table { border-collapse: collapse; width: 100%; font-size: 0.93em }
table.hl-tsa-likert-table th, table.hl-tsa-likert-table td { border: 1px solid var(--hl-border); padding: 10px 8px; text-align: center; vertical-align: middle }
table.hl-tsa-likert-table .hl-tsa-item-col, table.hl-tsa-likert-table .hl-tsa-item-cell { text-align: left; min-width: 280px; max-width: 420px; line-height: 1.4 }
table.hl-tsa-likert-table thead th { background: var(--hl-bg-subtle); font-weight: 600; font-size: 0.88em }
table.hl-tsa-likert-table .hl-tsa-label-col { min-width: 50px; font-size: 0.92em; line-height: 1.3; overflow-wrap: break-word; word-break: break-word }
.hl-tsa-group-header { background: #e8e8e8 !important; font-weight: 700 !important; font-size: 0.9em !important }
.hl-tsa-now-header { background: #e8f5e9 !important }
.hl-tsa-sublabel-row th { font-size: 0.8em !important; padding: 5px 4px !important }
.hl-tsa-before-label { background: var(--hl-bg-subtle) }
.hl-tsa-now-label { background: #f0faf0 }
tr.hl-tsa-row-even td { background-color: var(--hl-surface) }
tr.hl-tsa-row-odd td { background-color: var(--hl-bg-subtle) }
.hl-tsa-radio-cell { width: 44px; min-width: 44px }

.hl-tsa-form-wrap input[type="radio"].hl-tsa-radio { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; border: 2px solid var(--hl-border-medium) !important; border-radius: 50% !important; cursor: pointer; transition: all 0.15s ease; margin: 0 !important; padding: 0 !important; position: relative; background: var(--hl-surface) !important; box-shadow: none !important; outline: none !important; flex-shrink: 0 }
.hl-tsa-form-wrap input[type="radio"].hl-tsa-radio:hover { border-color: var(--hl-primary) !important }
.hl-tsa-form-wrap input[type="radio"].hl-tsa-radio:checked { border-color: var(--hl-primary) !important; background: var(--hl-primary) !important }
.hl-tsa-form-wrap input[type="radio"].hl-tsa-radio:checked::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; background: #fff }
.hl-tsa-scale-label input[type="radio"].hl-tsa-radio { width: 24px !important; height: 24px !important; min-width: 24px !important; min-height: 24px !important }
.hl-tsa-before-col { background-color: var(--hl-bg-subtle) !important }
.hl-tsa-now-col { background-color: #f5fdf5 !important }
.hl-tsa-radio-disabled { opacity: 0.5; cursor: not-allowed }

.hl-tsa-scale-section { margin-bottom: 1em }
.hl-tsa-scale-anchors { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.85em; color: var(--hl-text-secondary); font-style: italic; margin-bottom: 0.5em }
.hl-tsa-scale-row { padding: 16px 18px; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-xs); margin-bottom: 10px; background: var(--hl-surface) }
.hl-tsa-scale-row.hl-tsa-row-odd { background: var(--hl-bg-subtle) }
.hl-tsa-scale-text { margin-bottom: 10px; font-size: 0.95em; line-height: 1.4 }
.hl-tsa-scale-radios { display: flex; gap: 4px; flex-wrap: wrap; align-items: center }
.hl-tsa-scale-label { display: flex; flex-direction: column; align-items: center; min-width: 36px; cursor: pointer; padding: 4px 6px; font-size: 0.95em; text-align: center; border-radius: 6px; transition: background 0.15s ease }
.hl-tsa-scale-label:hover { background: var(--hl-bg-subtle) }
.hl-tsa-scale-label span { margin-top: 3px; color: var(--hl-text-secondary); font-size: 0.9em }
.hl-tsa-scale-dual { display: flex; gap: 24px; flex-wrap: wrap }
.hl-tsa-scale-group { flex: 1; min-width: 280px }
.hl-tsa-group-label { display: block; font-size: 0.8em; font-weight: 600; color: var(--hl-text-secondary); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.03em }
.hl-tsa-before-group { opacity: 0.6 }

.hl-tsa-actions { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 2em 0 1em; border-top: 1px solid var(--hl-border); margin-top: 1em }
.hl-tsa-actions .button { padding: 10px 28px; font-size: 0.95em; border-radius: var(--hl-radius-xs); min-height: 44px }
.hl-tsa-form-wrap .hl-tsa-actions .hl-btn-submit-assessment { background: var(--hl-primary) !important; border-color: var(--hl-primary) !important; color: #fff !important }
.hl-tsa-form-wrap .hl-tsa-actions .hl-btn-submit-assessment:hover { background: var(--hl-primary-dark, #135e96) !important }
.hl-tsa-form-wrap .hl-tsa-actions .hl-btn-save-draft { background: var(--hl-surface) !important; border-color: var(--hl-border-medium) !important; color: var(--hl-text) !important }
.hl-tsa-form-wrap .hl-tsa-actions .hl-btn-save-draft:hover { background: var(--hl-bg-subtle) !important }

.hl-tsa-form--paginated .hl-tsa-section { display: none }
.hl-tsa-form--paginated .hl-tsa-section--active { display: block }
.hl-tsa-form--paginated .hl-tsa-actions { display: none }
.hl-tsa-form--paginated .hl-tsa-actions--visible { display: flex }

.hl-tsa-nav { display: flex; gap: 14px; padding: 1.5em 0 0.5em; border-top: 1px solid var(--hl-border); margin-top: 1.5em }
.hl-tsa-form-wrap .hl-tsa-nav .button { padding: 10px 24px; border-radius: var(--hl-radius-xs); min-height: 44px; font-size: 0.95em; font-weight: 500; transition: all 0.15s ease }
.hl-tsa-form-wrap .hl-tsa-nav .hl-tsa-btn-prev { background: var(--hl-surface) !important; border-color: var(--hl-border-medium) !important; color: var(--hl-text) !important }
.hl-tsa-form-wrap .hl-tsa-nav .hl-tsa-btn-prev:hover { background: var(--hl-bg-subtle) !important; border-color: var(--hl-text-muted) !important }
.hl-tsa-form-wrap .hl-tsa-nav .hl-tsa-btn-prev::before { content: '\2190\00a0' }
.hl-tsa-form-wrap .hl-tsa-nav .hl-tsa-nav-draft { background: var(--hl-surface) !important; border-color: var(--hl-border-medium) !important; color: var(--hl-text-muted) !important; font-size: 0.85em }
.hl-tsa-form-wrap .hl-tsa-nav .hl-tsa-nav-draft:hover { background: var(--hl-bg-subtle) !important; border-color: var(--hl-text-muted) !important }
.hl-tsa-form-wrap .hl-tsa-nav .hl-tsa-btn-next { margin-left: auto; background: var(--hl-primary) !important; border-color: var(--hl-primary) !important; color: #fff !important }
.hl-tsa-form-wrap .hl-tsa-nav .hl-tsa-btn-next:hover { background: var(--hl-primary-dark, #135e96) !important; border-color: var(--hl-primary-dark, #135e96) !important }
.hl-tsa-form-wrap .hl-tsa-btn-next::after { content: '\00a0\2192' }

/* Text (open-ended) section */
.hl-tsa-text-section { display: flex; flex-direction: column; gap: 24px }
.hl-tsa-text-item { display: flex; flex-direction: column; gap: 8px }
.hl-tsa-text-label { font-weight: 500; font-size: 0.95em; color: var(--hl-text); line-height: 1.5 }
.hl-tsa-textarea { width: 100%; min-height: 100px; padding: 12px 14px; border: 1px solid var(--hl-border-medium); border-radius: var(--hl-radius-xs); font-family: inherit; font-size: 0.95em; line-height: 1.5; resize: vertical; transition: border-color 0.15s ease }
.hl-tsa-textarea:focus { border-color: var(--hl-primary); outline: none; box-shadow: 0 0 0 2px rgba(26, 115, 232, 0.15) }
.hl-tsa-text-readonly { padding: 12px 14px; background: var(--hl-bg-subtle); border-radius: var(--hl-radius-xs); font-size: 0.95em; line-height: 1.6; color: var(--hl-text); min-height: 60px; white-space: pre-wrap }

.hl-tsa-skip-overlay { position: fixed; inset: 0; z-index: 100000; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; padding: 20px }
.hl-tsa-skip-modal { background: var(--hl-surface); border-radius: var(--hl-radius); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3); max-width: 480px; width: 100%; padding: 32px; text-align: center }
.hl-tsa-skip-modal p { font-size: 1em; line-height: 1.6; color: var(--hl-text); margin: 0 0 24px }
.hl-tsa-skip-modal p.hl-tsa-skip-bold { font-weight: 600 }
.hl-tsa-skip-modal p.hl-tsa-skip-detail { margin-top: 8px }
.hl-tsa-skip-buttons { display: flex; gap: 12px; justify-content: center }
.hl-tsa-skip-buttons .button { min-width: 120px; padding: 10px 24px !important; font-size: 0.95em !important; border-radius: 6px !important; cursor: pointer }
.hl-tsa-skip-buttons .hl-tsa-skip-return { background: var(--hl-surface) !important; border-color: var(--hl-border-medium) !important; color: var(--hl-text) !important }
.hl-tsa-skip-buttons .hl-tsa-skip-return:hover { background: var(--hl-bg-subtle) !important; border-color: var(--hl-text-muted) !important }
.hl-tsa-skip-buttons .hl-tsa-skip-submit { background: var(--hl-primary) !important; border-color: var(--hl-primary) !important; color: #fff !important }
.hl-tsa-skip-buttons .hl-tsa-skip-submit:hover { background: var(--hl-primary-dark, #135e96) !important; border-color: var(--hl-primary-dark, #135e96) !important }

/* --- TSA Submitted Hero --- */
.hl-tsa-submitted-hero {
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%);
    color: #fff;
    padding: 28px 32px;
    border-radius: 14px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
    min-height: 130px;
}
.hl-tsa-submitted-hero::after {
    content: '';
    position: absolute;
    right: -40px;
    top: -40px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    pointer-events: none;
}
.hl-tsa-submitted-hero__text { flex: 1; min-width: 0; z-index: 1 }
.hl-tsa-submitted-hero__badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--hl-radius-pill);
    background: rgba(99, 102, 241, 0.2);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #a5b4fc;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.hl-tsa-submitted-hero__title {
    font-size: 22px;
    font-weight: 800;
    color: #fff !important;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0 0 6px !important;
}
.hl-tsa-submitted-hero__subtitle {
    font-size: 13px;
    color: rgba(255,255,255,0.55);
    margin: 0;
}
.hl-tsa-submitted-hero__icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.12);
    border-radius: var(--hl-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.hl-tsa-submitted-hero__icon .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    color: #fff;
}

/* --- TSA Submitted Meta Cards --- */
.hl-tsa-submitted-meta {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.hl-tsa-submitted-meta__card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--hl-surface);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    padding: 12px 16px;
    flex: 1;
    min-width: 160px;
}
.hl-tsa-submitted-meta__icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--hl-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hl-text-secondary);
    font-size: 16px;
    flex-shrink: 0;
}
.hl-tsa-submitted-meta__icon .dashicons { font-size: 18px; width: 18px; height: 18px }
.hl-tsa-submitted-meta__icon--green { background: #e8f5e9; color: #2e7d32 }
.hl-tsa-submitted-meta__detail { display: flex; flex-direction: column }
.hl-tsa-submitted-meta__label {
    font-size: 10px;
    font-weight: 600;
    color: var(--hl-text-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.hl-tsa-submitted-meta__value {
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin-top: 1px;
}

@media screen and (max-width: 768px) {
    .hl-tsa-form-wrap { padding: 20px 16px; margin: 1em 0; border-radius: var(--hl-radius-xs) }
    .hl-tsa-header h2 { font-size: 1.3em }
    table.hl-tsa-likert-table .hl-tsa-item-col, table.hl-tsa-likert-table .hl-tsa-item-cell { min-width: 200px }
    .hl-tsa-scale-row { padding: 12px }
    .hl-tsa-actions .button { width: 100%; text-align: center }
    .hl-tsa-submitted-hero { padding: 24px 20px; flex-direction: column; text-align: center; min-height: auto }
    .hl-tsa-submitted-hero__icon { margin-top: 16px }
    .hl-tsa-submitted-meta { flex-direction: column }
}

/* --- Instrument Renderer / Child Assessment Form (.hl-ca-*) -------- */
.hl-ca-form-wrap { max-width: 900px; margin: 0 auto 2em; background: var(--hl-surface); border: 1px solid var(--hl-border); border-radius: var(--hl-radius); box-shadow: var(--hl-shadow); padding: 32px 40px; font-family: var(--hl-font); color: var(--hl-text) }
.hl-ca-form-wrap p, .hl-ca-form-wrap td, .hl-ca-form-wrap th, .hl-ca-form-wrap label, .hl-ca-form-wrap span, .hl-ca-form-wrap div { color: var(--hl-text); line-height: 1.6 }

.hl-ca-branded-header { text-align: center; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 2px solid var(--hl-border-light) }
.hl-ca-brand-logo { display: block; text-align: center; margin-bottom: 12px }
.hl-ca-brand-img { max-width: 176px; height: auto }
.hl-ca-title { font-size: 22px; font-weight: 700; color: var(--hl-text-heading); margin: 0; line-height: 1.3 }
.hl-ca-phase-label { color: var(--hl-text-secondary); font-weight: 400 }

.hl-ca-teacher-info { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid var(--hl-border-light) }
.hl-ca-info-row { margin-bottom: 4px; font-size: 15px }
.hl-ca-info-label { font-weight: 700; color: var(--hl-text-heading); margin-right: 6px }
.hl-ca-info-value { color: var(--hl-text) }

.hl-ca-instructions { margin-bottom: 18px }
.hl-ca-instructions h3 { font-size: 17px; font-weight: 700; color: var(--hl-text-heading); margin: 0 0 8px 0 }
.hl-ca-instructions p { font-size: 14px; color: var(--hl-text); margin: 0; line-height: 1.7 }

.hl-ca-behavior-key { margin-bottom: 20px }
table.hl-ca-key-table { width: 100%; border-collapse: collapse; font-size: 14px; border: 1px solid var(--hl-border); border-radius: var(--hl-radius-sm); overflow: hidden }
table.hl-ca-key-table thead th { background: var(--hl-primary); color: #fff; padding: 12px 16px; font-size: 15px; font-weight: 600; text-align: center; letter-spacing: 0.02em }
table.hl-ca-key-table tbody td { padding: 10px 16px; border-bottom: 1px solid var(--hl-border-light); vertical-align: top }
table.hl-ca-key-table tbody tr:last-child td { border-bottom: none }
.hl-ca-key-label-cell { width: 140px; min-width: 120px; white-space: nowrap }
.hl-ca-key-label-cell strong { display: block; color: var(--hl-text-heading); font-size: 14px }
.hl-ca-key-freq { display: block; font-size: 12px; color: var(--hl-text-secondary); margin-top: 2px }
.hl-ca-key-desc-cell { color: var(--hl-text); line-height: 1.5 }

.hl-ca-question-section { margin-bottom: 18px }
.hl-ca-question-section h3 { font-size: 16px; font-weight: 700; color: var(--hl-text-heading); margin: 0 0 6px 0 }
.hl-ca-question-text { font-size: 15px; color: var(--hl-text-heading); line-height: 1.6; margin: 0; font-weight: 600 }

.hl-ca-age-group-section { margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid var(--hl-border-light) }
.hl-ca-age-group-section:last-of-type { border-bottom: none; margin-bottom: 0 }
.hl-ca-age-group-header { font-size: 18px; font-weight: 700; color: var(--hl-primary); margin: 24px 0 12px; padding: 8px 12px; background: var(--hl-bg-subtle); border-radius: var(--hl-radius-sm); border-left: 4px solid var(--hl-secondary) }

.hl-ca-skip-wrap { margin-top: 4px }
.hl-ca-skip-label { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 400; color: var(--hl-text-muted); cursor: pointer; white-space: nowrap }
.hl-ca-skip-label:hover { color: var(--hl-error) }
.hl-ca-skip-checkbox { width: 14px; height: 14px; accent-color: var(--hl-error); margin: 0; cursor: pointer }
.hl-ca-skip-reason { display: block; margin-top: 4px; font-size: 11px; padding: 2px 6px; border: 1px solid var(--hl-border-medium); border-radius: 4px; color: var(--hl-text); max-width: 180px }
tr.hl-ca-row-skipped td { opacity: 0.45 }
tr.hl-ca-row-skipped td.hl-ca-child-cell { opacity: 1 }
tr.hl-ca-row-skipped td.hl-ca-child-cell .hl-ca-skip-wrap { opacity: 1 }

.hl-ca-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 8px }
table.hl-ca-matrix { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 500px }
table.hl-ca-matrix thead th { padding: 12px 16px; font-weight: 600; font-size: 15px; color: var(--hl-text); text-align: center; border-bottom: 2px solid var(--hl-border); white-space: nowrap }
table.hl-ca-matrix thead th.hl-ca-child-header { text-align: left; min-width: 180px }
table.hl-ca-matrix tbody td { padding: 10px 16px; vertical-align: middle; text-align: center; border-bottom: 1px solid var(--hl-border-light) }
table.hl-ca-matrix tbody td.hl-ca-child-cell { text-align: left; font-weight: 500; color: var(--hl-text-heading); white-space: nowrap; min-width: 180px }
.hl-ca-child-dob { display: block; font-size: 12px; font-weight: 400; color: var(--hl-text-secondary); margin-top: 1px }

table.hl-ca-matrix tbody tr.hl-ca-row-even td { background-color: var(--hl-bg-subtle) }
table.hl-ca-matrix tbody tr.hl-ca-row-odd td { background-color: var(--hl-surface) }
table.hl-ca-matrix tbody tr:hover td { background-color: var(--hl-bg-hover) }

.hl-ca-radio-cell { padding: 10px 8px !important }
.hl-ca-radio { width: 20px; height: 20px; cursor: pointer; accent-color: var(--hl-primary); margin: 0 }

.hl-ca-matrix-multi thead th.hl-ca-question-header { text-align: left; font-size: 13px; max-width: 200px; white-space: normal }
.hl-ca-input-cell { text-align: left !important }
.hl-ca-likert-group { display: flex; flex-direction: column; gap: 4px }
.hl-ca-likert-label { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 2px 0; font-size: 13px }
.hl-ca-multiselect-group { display: flex; flex-direction: column; gap: 4px }
.hl-ca-multiselect-label { display: flex; align-items: center; gap: 6px; cursor: pointer; padding: 2px 0; font-size: 13px }
.hl-ca-input-text, .hl-ca-input-number { width: 100%; max-width: 160px; padding: 6px 8px; border: 1px solid var(--hl-border-medium); border-radius: var(--hl-radius-xs); font-size: 14px; transition: border-color 0.2s }
.hl-ca-input-text:focus, .hl-ca-input-number:focus, .hl-ca-input-select:focus { outline: none; border-color: var(--hl-secondary); box-shadow: 0 0 0 3px rgba(44, 123, 229, 0.1) }
.hl-ca-input-select { width: 100%; max-width: 180px; padding: 6px 8px; border: 1px solid var(--hl-border-medium); border-radius: var(--hl-radius-xs); font-size: 14px }
.hl-ca-required { color: var(--hl-error); font-weight: bold; margin-left: 2px }

.hl-ca-actions { display: flex; gap: 12px; justify-content: flex-start; align-items: center; padding: 16px 0 4px; border-top: 1px solid var(--hl-border-light) }
.hl-ca-btn-draft { min-width: 130px }
.hl-ca-btn-submit { min-width: 170px; background: var(--hl-primary) !important; color: #fff !important; border-color: var(--hl-primary) !important }
.hl-ca-btn-submit:hover { background: var(--hl-primary-light) !important; border-color: var(--hl-primary-light) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(26, 43, 71, 0.25) }

.hl-ca-notice { padding: 12px 16px; border-radius: var(--hl-radius-sm); margin: 1em 0 }
.hl-ca-notice-warning { background: var(--hl-status-paused-bg); border-left: 4px solid var(--hl-warning); color: var(--hl-status-paused-text) }

.hl-ca-validation-error { border-color: var(--hl-error) !important; box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15) }

.hl-ca-form-wrap.hl-ca-readonly table.hl-ca-matrix tbody td { font-size: 13px }
.hl-ca-submitted-banner { display: flex; align-items: center; gap: 10px; padding: 12px 16px; background: var(--hl-status-complete-bg); color: var(--hl-status-complete-text); border-radius: var(--hl-radius-sm); margin-bottom: 24px; font-weight: 600; font-size: 14px }
.hl-ca-submitted-banner .hl-ca-submitted-icon { font-size: 18px }
.hl-ca-answer-pill { display: inline-block; padding: 3px 12px; border-radius: var(--hl-radius-pill); background: var(--hl-bg); color: var(--hl-text); font-size: 13px; font-weight: 500 }

@media (max-width: 768px) {
    .hl-ca-form-wrap { padding: 24px 20px; margin: 0 -10px 1.5em; border-radius: var(--hl-radius-sm) }
    .hl-ca-title { font-size: 18px }
    .hl-ca-brand-img { max-width: 140px }
    table.hl-ca-key-table { font-size: 13px }
    .hl-ca-key-label-cell { min-width: 90px; width: 100px }
    .hl-ca-actions { flex-direction: column; align-items: stretch }
    .hl-ca-btn-draft, .hl-ca-btn-submit { min-width: 0; width: 100%; text-align: center }
    table.hl-ca-matrix thead th { padding: 8px 10px; font-size: 12px }
    table.hl-ca-matrix tbody td { padding: 8px 10px }
    table.hl-ca-matrix tbody td.hl-ca-child-cell { min-width: 140px; font-size: 13px }
}


/* =====================================================
   COLLAPSIBLE SIDEBAR
   Toggle between 240px (expanded) and 60px (collapsed).
   Body class .hl-sidebar-is-collapsed drives offsets.
   ===================================================== */

/* Modern sidebar toggle */
.hl-sidebar__collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: all 0.2s ease;
    margin: 8px auto;
    padding: 0;
    font-size: 16px;
    line-height: 1;
    z-index: 10000;
}
.hl-sidebar__collapse-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Smooth sidebar transition */
.hl-sidebar {
    transition: width 0.25s ease;
}
.hl-app__content {
    transition: margin-left 0.25s ease;
}
.hl-topbar {
    transition: left 0.25s ease;
}

/* Collapsed state */
.hl-sidebar--collapsed {
    width: 60px;
}
.hl-sidebar--collapsed .hl-sidebar__brand {
    padding: 16px 10px;
    display: flex;
    justify-content: center;
}
.hl-sidebar--collapsed .hl-sidebar__logo-img {
    max-width: 32px;
    max-height: 32px;
}
.hl-sidebar--collapsed .hl-sidebar__title,
.hl-sidebar--collapsed .hl-sidebar__subtitle {
    display: none;
}
.hl-sidebar--collapsed .hl-sidebar__nav {
    padding: 4px 6px;
}
.hl-sidebar--collapsed .hl-sidebar__section-label {
    display: none;
}
.hl-sidebar--collapsed .hl-sidebar__item,
.hl-sidebar--collapsed .hl-sidebar a.hl-sidebar__item {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}
.hl-sidebar--collapsed .hl-sidebar__item span:not(.hl-sidebar__icon) {
    display: none;
}
.hl-sidebar--collapsed .hl-sidebar__badge {
    display: none;
}

/* Tooltip on hover for collapsed items */
.hl-sidebar--collapsed .hl-sidebar__item {
    position: relative;
}
.hl-sidebar--collapsed .hl-sidebar__item:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(100% + 8px);
    top: 50%;
    transform: translateY(-50%);
    background: #1a1f2e;
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--hl-radius-xs);
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    z-index: 10001;
    box-shadow: var(--hl-shadow-md);
    pointer-events: none;
}

/* Content offset when sidebar collapsed */
body.hl-sidebar-is-collapsed .hl-app__content {
    margin-left: 60px;
}
body.hl-sidebar-is-collapsed .hl-topbar {
    left: 60px;
}

/* BB theme pages — collapsed sidebar */
body.hl-has-nav.hl-sidebar-is-collapsed #page {
    margin-left: 60px;
}

/* Collapsed sidebar footer */
.hl-sidebar--collapsed .hl-sidebar__footer {
    padding: 8px 6px;
}
.hl-sidebar--collapsed .hl-sidebar__footer .hl-sidebar__item span:not(.hl-sidebar__icon) {
    display: none;
}


/* =====================================================
   COURSE OUTLINE PANEL
   Dark panel between sidebar and lesson content.
   Shows course structure, progress, and lesson list.
   ===================================================== */

.hl-course-outline {
    position: fixed;
    top: 48px;
    right: 0;
    width: 320px;
    height: calc(100vh - 48px);
    background: #1e2433;
    color: #fff;
    overflow-y: auto;
    z-index: 99;
    border-left: 1px solid rgba(255,255,255,0.08);
    padding: 20px 0;
    font-family: var(--hl-font);
    transition: right 0.25s ease;
}

/* Outline is now on the right — sidebar collapse doesn't affect it */

/* Collapsed outline — element class toggled by frontend.js */
.hl-course-outline--collapsed {
    display: none;
}

/* Collapsed outline — body class driven (used by inline init script + reopen) */
body.hl-course-outline-is-collapsed .hl-course-outline {
    transform: translateX(100%);
    pointer-events: none;
}

/* Outline reopen button — visible when outline is collapsed */
.hl-course-outline__reopen {
    display: none;
    position: fixed;
    top: 56px;
    z-index: 1000;
    background: #1e293b;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 0 8px 8px 0;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
    box-shadow: 2px 0 8px rgba(0,0,0,0.15);
}
.hl-course-outline__reopen:hover {
    background: #334155;
    color: #fff;
}
.hl-course-outline__reopen .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
}
body.hl-course-outline-is-collapsed .hl-course-outline__reopen {
    display: flex;
    right: 0;
    left: auto;
    border-radius: 8px 0 0 8px;
}

/* Back to Course link */
.hl-course-outline__back {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px 16px;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: color 0.15s;
}
.hl-course-outline__back:hover {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}
.hl-course-outline__back .dashicons {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
}

/* Course title */
.hl-course-outline__title {
    padding: 0 20px 12px;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    line-height: 1.35;
}

/* Progress bar inside outline */
.hl-course-outline__progress {
    padding: 0 20px 16px;
}
/* Progress text — matches ld-lesson.php HTML classes */
.hl-course-outline__progress-text {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
}
.hl-course-outline__activity {
    display: block;
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-top: 4px;
}
.hl-course-outline__progress-bar {
    height: 6px;
    background: rgba(255,255,255,0.1);
    border-radius: 3px;
    overflow: hidden;
}
.hl-course-outline__progress-fill {
    height: 100%;
    background: var(--hl-accent);
    border-radius: 3px;
    transition: width 0.3s ease;
}

/* Section headers (module names) — matches ld-lesson.php HTML */
.hl-course-outline__section {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px 8px;
    margin-top: 4px;
}
.hl-course-outline__section-bar {
    width: 3px;
    height: 16px;
    background: #f59e0b;
    border-radius: 2px;
    flex-shrink: 0;
}
.hl-course-outline__section-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: rgba(255,255,255,0.45);
}

/* Lesson rows */
.hl-course-outline__lesson {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    color: rgba(255,255,255,0.65);
    cursor: pointer;
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: background 0.15s, color 0.15s;
    gap: 10px;
}
.hl-course-outline__lesson:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.9);
    text-decoration: none;
}
/* Current lesson highlight (matches ld-lesson.php HTML class) */
.hl-course-outline__lesson--current {
    background: rgba(99,102,241,0.15);
    color: #a5b4fc;
    border-left: 3px solid #6366f1;
    padding-left: 17px; /* 20 - 3 border */
}
.hl-course-outline__lesson--current:hover {
    background: rgba(99,102,241,0.2);
    color: #c7d2fe;
}

/* Lesson title (flex child) — matches ld-lesson.php HTML class */
.hl-course-outline__lesson-title {
    flex: 1;
    min-width: 0;
}

/* Completion check circles — matches ld-lesson.php HTML classes */
.hl-course-outline__check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}
.hl-course-outline__check--done {
    background: #22c55e;
    border-color: #22c55e;
}
.hl-course-outline__check--done .dashicons {
    font-size: 12px;
    width: 12px;
    height: 12px;
    color: #fff;
}

/* Toggle button */
.hl-course-outline__toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: var(--hl-radius-xs);
    background: rgba(255,255,255,0.08);
    border: none;
    color: rgba(255,255,255,0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.15s, color 0.15s;
    padding: 0;
}
.hl-course-outline__toggle:hover {
    background: rgba(255,255,255,0.15);
    color: #fff;
}

/* Scrollbar styling for outline panel */
.hl-course-outline::-webkit-scrollbar {
    width: 4px;
}
.hl-course-outline::-webkit-scrollbar-track {
    background: transparent;
}
.hl-course-outline::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 2px;
}
.hl-course-outline::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.25);
}

/* Responsive: hide outline on tablets and below */
@media (max-width: 1024px) {
    .hl-course-outline {
        display: none;
    }
}


/* =====================================================
   LEARNDASH CONTENT STYLING
   Overrides LearnDash output classes with HL design
   tokens. Scoped under .hl-app .learndash-wrapper
   (specificity 0,2,0) to beat LD's defaults.
   LD core CSS is kept — these rules override it.
   ===================================================== */

/* --- Global typography: force Inter on all LD elements --- */
/* Exception: .ld-icon elements use the ld-icons font (icon font). */
.hl-app .learndash-wrapper,
.hl-app .learndash-wrapper *:not([class*="ld-icon"]):not(.dashicons) {
    font-family: var(--hl-font);
}

/* --- Global layout: LD content fits our shell --- */
.hl-app .learndash-wrapper {
    max-width: 100%;
    box-sizing: border-box;
}

/* --- Color overrides: replace LD green/blue with our tokens --- */
.hl-app .ld-progress-bar .ld-progress-bar-percentage {
    background: var(--hl-accent);
}
.hl-app .ld-status-complete {
    background-color: var(--hl-accent);
    color: #fff;
}
.hl-app .ld-status-icon.ld-status-complete {
    background-color: var(--hl-accent);
    color: #fff;
}

/* --- LD modern layout sidebar (floating right panel) --- */
.hl-app .ld-layout {
    display: flex;
    gap: 32px;
}
.hl-app .ld-layout__sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 72px; /* below topbar */
    align-self: flex-start;
}
.hl-app .ld-layout__content {
    flex: 1;
    min-width: 0;
}

/* --- Custom course sidebar (replaces BB sidebar) --- */
.hl-course-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 72px; /* below topbar (48px + 24px padding) */
    align-self: flex-start;
    background: var(--hl-surface);
    border-radius: var(--hl-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

/* Course image */
.hl-course-sidebar__image-wrap {
    width: 100%;
    overflow: hidden;
}
.hl-course-sidebar__image-wrap img {
    width: 100%;
    height: auto;
    display: block;
}

/* Progress bar */
.hl-course-sidebar__progress {
    padding: 16px 20px 0;
}
.hl-course-sidebar__progress-bar {
    height: 8px;
    background: var(--hl-border);
    border-radius: 4px;
    overflow: hidden;
}
.hl-course-sidebar__progress-fill {
    height: 100%;
    background: var(--hl-success);
    border-radius: 4px;
    transition: width 0.3s ease;
}
.hl-course-sidebar__progress-text {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-success);
}

/* Action button */
.hl-course-sidebar__action {
    padding: 16px 20px;
}
.hl-course-sidebar__btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    text-align: center;
    border-radius: var(--hl-radius);
    background: var(--hl-primary);
    color: #fff;
    font-family: var(--hl-font);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s ease;
    box-sizing: border-box;
}
.hl-course-sidebar__btn:hover {
    background: var(--hl-primary-dark);
    color: #fff;
}
.hl-course-sidebar__btn--secondary {
    background: transparent;
    color: var(--hl-primary);
    border: 1px solid var(--hl-primary);
    margin-top: 8px;
}
.hl-course-sidebar__btn--secondary:hover {
    background: rgba(63, 81, 181, 0.05);
    color: var(--hl-primary-dark);
}
.hl-course-sidebar__btn--disabled {
    background: var(--hl-border);
    color: var(--hl-text-muted);
    cursor: default;
}
.hl-course-sidebar__badge--complete {
    display: block;
    text-align: center;
    padding: 10px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: var(--hl-radius);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 8px;
}

/* Course includes section */
.hl-course-sidebar__includes {
    padding: 0 20px 20px;
    border-top: 1px solid var(--hl-border);
    margin-top: 4px;
}
.hl-course-sidebar__includes-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--hl-text-secondary);
    margin: 16px 0 12px;
}
.hl-course-sidebar__includes-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hl-course-sidebar__includes-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    font-size: 14px;
    color: var(--hl-text);
    border-bottom: 1px solid var(--hl-border);
}
.hl-course-sidebar__includes-list li:last-child {
    border-bottom: none;
}
.hl-course-sidebar__includes-list .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--hl-text-muted);
}

/* --- Course page layout (content + sidebar flex row) --- */
.hl-course-layout {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}
.hl-course-content {
    flex: 1;
    min-width: 0; /* prevent overflow */
}

/* Hide BB masthead remnants */
.hl-app #masthead,
.hl-app .site-header { display: none !important; }

/* --- BB template part cleanup (course pages) ---
   BB's learndash-helper injects .bb-vw-container.bb-learndash-banner
   (the full-bleed blue hero) and wraps content in .bb-grid.
   Our dequeue removes BB CSS but the HTML still renders.
   Hide the banner, neutralize the grid wrapper. */
.hl-ld-course .bb-vw-container { display: none !important; }
.hl-ld-course .learndash-wrapper .bb-grid {
    display: block !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Also hide BB sidebar/panel remnants that may render inside LD content */
.hl-ld-course .bb-single-course-sidebar,
.hl-ld-course .bb-learndash-content-wrap .bb-course-sidebar,
.hl-ld-course .lms-topic-sidebar-wrapper { display: none !important; }
/* Ensure LD content inside BB grid fills available width */
.hl-ld-course .learndash-wrapper .bb-grid .bb-learndash-content-wrap {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Hide BB's own course header elements */
.hl-ld-course .bb-lms-header,
.hl-ld-course .bb-course-header { display: none !important; }
/* BB moderation popups (Report, Block Member) — normally hidden by
   MagnificPopup's .mfp-hide, which we dequeued. Restore the hiding. */
.hl-app .mfp-hide { display: none !important; }
.hl-app .moderation-popup,
.hl-app .content-report-popup,
.hl-app .block-member-popup { display: none !important; }
/* BB elements on lesson pages */
.hl-ld-lesson .bb-lms-header,
.hl-ld-lesson .bb-vw-container { display: none !important; }
/* LD's built-in prev/next nav — we have our own nav arrows in hl-ld-content__nav */
.hl-app .learndash_next_prev_link { display: none !important; }

/* --- Course Hero (extends .hl-page-hero for course pages) --- */
.hl-course-hero {
    margin-bottom: 24px;
}
.hl-course-hero .hl-page-hero__title {
    font-size: 22px;
    line-height: 1.3;
}

/* --- LD infobar cleanup (hide duplicate progress on course page) ---
   Our sidebar already shows progress + the hero shows the % badge.
   LD's inline progress bar + "Last activity" text is redundant. */
.hl-ld-course [class*="learndash-shortcode-wrap-ld_infobar"] { display: none !important; }

/* --- Course Content section polish --- */
/* LD section heading ("COURSE CONTENT") */
.hl-ld-course .ld-section-heading {
    padding: 16px 20px;
    background: var(--hl-bg-subtle, #f8f9fa);
    border-bottom: 1px solid var(--hl-border);
}
.hl-ld-course .ld-section-heading h2 {
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--hl-text-secondary) !important;
    margin: 0 !important;
}
/* BB tab wrapper — neutralize its layout, let LD content flow naturally */
.hl-ld-course .bb-ld-tabs {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
/* Hide BB tab navigation (we show course content inline, not in tabs) */
.hl-ld-course .bb-ld-tabs .bb-ld-tabs-navigation { display: none !important; }

/* --- LD Icon Font (kept as fallback — LD CSS also loads it) --- */
@font-face {
    font-family: "ld-icons";
    src: url("../../../sfwd-lms/themes/ld30/assets/fonts/ld-icons.eot?e0vk6b");
    src: url("../../../sfwd-lms/themes/ld30/assets/fonts/ld-icons.eot?e0vk6b#iefix") format("embedded-opentype"),
         url("../../../sfwd-lms/themes/ld30/assets/fonts/ld-icons.ttf?e0vk6b") format("truetype"),
         url("../../../sfwd-lms/themes/ld30/assets/fonts/ld-icons.woff?e0vk6b") format("woff"),
         url("../../../sfwd-lms/themes/ld30/assets/fonts/ld-icons.svg?e0vk6b#ld-icons") format("svg");
    font-weight: normal;
    font-style: normal;
}

/* Base icon class — must use !important per LD convention (browser extensions) */
.hl-app .learndash-wrapper .ld-icon {
    font-family: "ld-icons" !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
}

/* --- LD Icon Glyphs --- */
.hl-app .learndash-wrapper .ld-icon-alert:before        { content: "\e90d"; }
.hl-app .learndash-wrapper .ld-icon-unlocked:before     { content: "\e900"; }
.hl-app .learndash-wrapper .ld-icon-quiz:before         { content: "\e901"; }
.hl-app .learndash-wrapper .ld-icon-materials:before    { content: "\e902"; }
.hl-app .learndash-wrapper .ld-icon-download:before     { content: "\e903"; }
.hl-app .learndash-wrapper .ld-icon-course-outline:before { content: "\e904"; }
.hl-app .learndash-wrapper .ld-icon-content:before      { content: "\e905"; }
.hl-app .learndash-wrapper .ld-icon-complete:before,
.hl-app .learndash-wrapper .ld-icon-checkmark:before    { content: "\e906"; }
.hl-app .learndash-wrapper .ld-icon-clock:before        { content: "\e907"; }
.hl-app .learndash-wrapper .ld-icon-certificate:before  { content: "\e908"; }
.hl-app .learndash-wrapper .ld-icon-calendar:before     { content: "\e909"; }
.hl-app .learndash-wrapper .ld-icon-assignment:before   { content: "\e90a"; }
.hl-app .learndash-wrapper .ld-icon-arrow-up:before     { content: "\e912"; }
.hl-app .learndash-wrapper .ld-icon-arrow-right:before  { content: "\e913"; }
.hl-app .learndash-wrapper .ld-icon-arrow-left:before   { content: "\e914"; }
.hl-app .learndash-wrapper .ld-icon-arrow-down:before   { content: "\e915"; }
.hl-app .learndash-wrapper .ld-icon-login:before        { content: "\e90c"; }
.hl-app .learndash-wrapper .ld-icon-remove:before,
.hl-app .learndash-wrapper .ld-icon-delete:before       { content: "\e90b"; }
.hl-app .learndash-wrapper .ld-icon-comments:before     { content: "\e917"; }
.hl-app .learndash-wrapper .ld-icon-search:before       { content: "\e916"; }

/* --- Content area layout for lesson pages --- */
.hl-ld-lesson .hl-ld-content {
    margin-left: 240px;
    margin-right: 320px;
    padding: 72px 32px 24px;
    min-height: 100vh;
    background: var(--hl-bg);
    box-sizing: border-box;
    overflow-x: hidden;
    max-width: calc(100vw - 240px - 320px);
}
body.hl-sidebar-is-collapsed .hl-ld-lesson .hl-ld-content {
    margin-left: 60px;
    max-width: calc(100vw - 60px - 320px);
}
body.hl-course-outline-is-collapsed .hl-ld-lesson .hl-ld-content {
    margin-right: 0;
    max-width: calc(100vw - 240px);
}
body.hl-sidebar-is-collapsed.hl-course-outline-is-collapsed .hl-ld-lesson .hl-ld-content {
    margin-left: 60px;
    margin-right: 0;
    max-width: calc(100vw - 60px);
}
/* Course page content area — just sidebar offset */
.hl-ld-course .hl-app__content {
    margin-left: 240px;
    padding: 72px 32px 24px;
    min-height: 100vh;
    background: var(--hl-bg);
    overflow-x: hidden;
    max-width: calc(100vw - 240px);
    box-sizing: border-box;
}
body.hl-sidebar-is-collapsed .hl-ld-course .hl-app__content {
    margin-left: 60px;
    max-width: calc(100vw - 60px);
}

/* Prevent LD wrapper itself from overflowing */
.hl-app .learndash-wrapper {
    overflow-x: hidden;
}

/* --- Lesson content header (counter + badge + nav) --- */
.hl-ld-content__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    font-family: var(--hl-font);
}
.hl-ld-content__counter {
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text-secondary);
    letter-spacing: 0.5px;
}
.hl-ld-content__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: var(--hl-radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: var(--hl-status-progress-bg);
    color: var(--hl-status-progress-text);
}
.hl-ld-content__badge--progress {
    background: var(--hl-status-progress-bg, #fef3c7);
    color: var(--hl-status-progress-text, #92400e);
}
.hl-ld-content__badge--complete {
    background: var(--hl-status-complete-bg);
    color: var(--hl-status-complete-text);
}
.hl-ld-content__nav {
    margin-left: auto;
    display: flex;
    gap: 4px;
}
.hl-ld-content__nav-btn {
    width: 36px;
    height: 36px;
    border-radius: var(--hl-radius-xs);
    border: 1px solid var(--hl-border);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--hl-text-secondary);
    background: var(--hl-surface);
    transition: background 0.15s, color 0.15s;
}
.hl-ld-content__nav-btn:hover {
    background: var(--hl-bg);
    color: var(--hl-text);
    text-decoration: none;
}
.hl-ld-content__nav-btn--disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* --- Lesson content body --- */
.hl-ld-content__body {
    background: var(--hl-surface, #fff);
    border: 1px solid var(--hl-border, #e5e7eb);
    border-radius: 12px;
    padding: 32px 40px;
    max-width: 900px;
}
.hl-ld-content__body > *:first-child {
    margin-top: 0;
}

/* --- Progress bar --- */
.hl-app .learndash-wrapper .ld-progress {
    display: flex;
    flex-direction: column;
    margin: 1em 0;
}
.hl-app .learndash-wrapper .ld-progress .ld-progress-heading {
    display: flex;
    justify-content: space-between;
    font-size: 0.75em;
    line-height: 1em;
    font-family: var(--hl-font);
}
.hl-app .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-label {
    text-transform: uppercase;
    font-weight: 800;
    color: var(--hl-text-secondary);
}
.hl-app .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}
.hl-app .learndash-wrapper .ld-progress .ld-progress-heading .ld-progress-stats .ld-progress-percentage {
    text-transform: uppercase;
    font-weight: 800;
    color: var(--hl-interactive, #235af3);
    margin-right: 5px;
}
.hl-app .learndash-wrapper .ld-progress .ld-progress-bar {
    height: 7px;
    background-color: var(--hl-border, #e2e7ed);
    border-radius: 7px;
    margin: 5px 0;
    overflow: hidden;
}
.hl-app .learndash-wrapper .ld-progress .ld-progress-bar .ld-progress-bar-percentage {
    height: 7px;
    background: var(--hl-interactive, #235af3);
    border-radius: 7px;
    transition: width 0.3s ease;
}
.hl-app .learndash-wrapper .ld-progress.ld-progress-inline {
    flex-direction: row-reverse;
    align-items: center;
}
.hl-app .learndash-wrapper .ld-progress.ld-progress-inline .ld-progress-bar {
    flex: 1 auto;
    margin-right: 1em;
}
.hl-app .learndash-wrapper .ld-progress.ld-progress-inline .ld-status {
    margin-left: 1em;
}

/* --- Tabs --- */
.hl-app .learndash-wrapper .ld-tabs {
    margin-bottom: 24px;
    font-family: var(--hl-font);
}
.hl-app .learndash-wrapper .ld-tabs-navigation {
    display: flex;
    border-bottom: 2px solid var(--hl-border);
    gap: 0;
}
.hl-app .learndash-wrapper .ld-tab {
    padding: 12px 20px;
    border: none;
    background: none;
    cursor: pointer;
    font-family: var(--hl-font);
    font-weight: 500;
    color: var(--hl-text-secondary);
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.15s, border-color 0.15s;
}
.hl-app .learndash-wrapper .ld-tab:hover {
    color: var(--hl-text);
}
.hl-app .learndash-wrapper .ld-tab.ld-active,
.hl-app .learndash-wrapper .ld-tab[aria-selected="true"] {
    color: var(--hl-interactive);
    border-bottom-color: var(--hl-interactive);
}
.hl-app .learndash-wrapper .ld-tab-content {
    padding: 20px 0;
}
.hl-app .learndash-wrapper .ld-tab-content:not(.ld-visible) {
    display: none;
}

/* --- Lesson list (course page) --- */
.hl-app .learndash-wrapper .ld-item-list {
    background: var(--hl-surface);
    border-radius: var(--hl-radius-sm);
    border: 1px solid var(--hl-border);
    overflow: hidden;
}
.hl-app .learndash-wrapper .ld-section-heading h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    font-family: var(--hl-font);
    color: var(--hl-text-heading);
}
.hl-app .learndash-wrapper .ld-item-list-item {
    border-bottom: 1px solid var(--hl-border);
}
.hl-app .learndash-wrapper .ld-item-list-item:last-child {
    border-bottom: none;
}
.hl-app .learndash-wrapper .ld-item-list-item-preview {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    transition: background 0.15s;
}
.hl-app .learndash-wrapper .ld-item-list-item-preview:hover {
    background: var(--hl-bg-subtle);
}
.hl-app .learndash-wrapper .ld-item-name {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--hl-text);
    flex: 1;
    transition: color 0.15s;
}
.hl-app .learndash-wrapper .ld-item-name:hover {
    color: var(--hl-interactive);
    text-decoration: none;
}
.hl-app .learndash-wrapper .ld-item-title {
    font-weight: 500;
    font-family: var(--hl-font);
}
.hl-app .learndash-wrapper .ld-item-components {
    font-size: 12px;
    color: var(--hl-text-muted);
}

/* --- Status icons & badges --- */
.hl-app .learndash-wrapper .ld-status {
    border-radius: 12px;
    background-color: var(--hl-border, #e2e7ed);
    text-align: center;
    padding: 5px 12px;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 11px;
    line-height: 1.1;
    color: var(--hl-text, #333);
    display: inline-block;
    margin-bottom: 5px;
    font-family: var(--hl-font);
}
.hl-app .learndash-wrapper .ld-status-icon {
    flex-basis: 26px;
    flex-shrink: 0;
    height: 26px;
    width: 26px;
    border-radius: 100%;
    display: inline-block;
    position: relative;
    text-align: center;
}
.hl-app .learndash-wrapper .ld-status-icon .ld-icon {
    font-size: 1.5em;
}
.hl-app .learndash-wrapper .ld-status-icon .ld-icon:before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
}
.hl-app .learndash-wrapper .ld-status-icon.ld-status-complete .ld-icon {
    font-size: 1em;
}
.hl-app .learndash-wrapper .ld-status-icon.ld-status-complete {
    background-color: var(--hl-accent, #235af3);
    color: #fff;
}
.hl-app .learndash-wrapper .ld-status-icon.ld-quiz-complete {
    color: var(--hl-interactive, #235af3);
}
.hl-app .learndash-wrapper .ld-status-complete {
    background-color: var(--hl-interactive, #235af3);
    color: #fff;
}
.hl-app .learndash-wrapper a.ld-status-complete:link,
.hl-app .learndash-wrapper a.ld-status-complete:visited,
.hl-app .learndash-wrapper a.ld-status-complete:focus {
    color: #fff;
}
.hl-app .learndash-wrapper .ld-status-waiting {
    background-color: #ffd200;
    color: rgba(0, 0, 0, 0.75);
}
.hl-app .learndash-wrapper .ld-status-unlocked {
    background-color: var(--hl-status-progress-bg, #ebf8fd);
    color: var(--hl-interactive, #235af3);
}
.hl-app .learndash-wrapper .ld-status-alert {
    background-color: var(--hl-status-progress-bg, #ebf8fd);
    color: var(--hl-interactive, #235af3);
}
.hl-app .learndash-wrapper .ld-status-incomplete.ld-status-icon {
    border: 4px solid var(--hl-border, #e2e7ed);
    background-color: var(--hl-surface, #fff);
}
.hl-app .learndash-wrapper .ld-status-in-progress {
    border: 4px solid var(--hl-border, #e2e7ed);
    border-left-color: var(--hl-interactive, #235af3);
    border-top-color: var(--hl-interactive, #235af3);
    transform: rotate(-45deg);
    background-color: var(--hl-surface, #fff);
}

/* --- Item icons (quiz/lesson type) --- */
.hl-app .learndash-wrapper .ld-item-icon {
    margin-right: 0.25em;
    flex-shrink: 0;
    font-size: 1.4em;
}
.hl-app .learndash-wrapper .ld-item-icon.quiz-failure {
    color: #ff3c00;
}
.hl-app .learndash-wrapper .ld-item-icon.ld-quiz-complete {
    color: var(--hl-interactive, #235af3);
}
.hl-app .learndash-wrapper .ld-item-icon.ld-quiz-incomplete {
    color: var(--hl-text-secondary, #333);
}

/* --- Expand/collapse buttons --- */
.hl-app .learndash-wrapper .ld-expand-button {
    padding: 8px 16px;
    border-radius: var(--hl-radius-xs);
    border: 1px solid var(--hl-border);
    background: var(--hl-surface);
    cursor: pointer;
    font-family: var(--hl-font);
    font-size: 13px;
    color: var(--hl-text-secondary);
    transition: background 0.15s, color 0.15s;
}
.hl-app .learndash-wrapper .ld-expand-button:hover {
    background: var(--hl-bg);
    color: var(--hl-text);
}
.hl-app .learndash-wrapper .ld-primary-background {
    background: var(--hl-interactive) !important;
    color: #fff;
}

/* --- Table lists (topics/quizzes) --- */
.hl-app .learndash-wrapper .ld-table-list {
    border-radius: var(--hl-radius-sm);
    overflow: hidden;
    border: 1px solid var(--hl-border);
    margin: 16px 0;
}
.hl-app .learndash-wrapper .ld-table-list-header {
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--hl-bg-subtle);
    font-family: var(--hl-font);
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text-secondary);
}
.hl-app .learndash-wrapper .ld-table-list-item {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    border-bottom: 1px solid var(--hl-border);
    transition: background 0.15s;
}
.hl-app .learndash-wrapper .ld-table-list-item:last-child {
    border-bottom: none;
}
.hl-app .learndash-wrapper .ld-table-list-item:hover {
    background: var(--hl-bg-subtle);
}

/* --- Navigation (prev/next) --- */
.hl-app .learndash-wrapper .ld-content-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0;
    margin-top: 24px;
    border-top: 1px solid var(--hl-border);
}
.hl-app .learndash-wrapper .ld-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: var(--hl-radius-xs);
    background: var(--hl-interactive);
    color: #fff;
    text-decoration: none;
    font-family: var(--hl-font);
    font-weight: 500;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}
.hl-app .learndash-wrapper .ld-button:hover {
    background: var(--hl-interactive-dark);
    color: #fff;
    text-decoration: none;
}

/* --- Alerts --- */
.hl-app .learndash-wrapper .ld-alert {
    padding: 16px 20px;
    border-radius: var(--hl-radius-sm);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--hl-font);
    font-size: 14px;
}
.hl-app .learndash-wrapper .ld-alert-success {
    background: var(--hl-status-complete-bg);
    border: 1px solid #a7f3d0;
    color: var(--hl-status-complete-text);
}
.hl-app .learndash-wrapper .ld-alert-warning {
    background: var(--hl-status-paused-bg);
    border: 1px solid #fde68a;
    color: var(--hl-status-paused-text);
}

/* --- Section headings (module dividers) --- */
.hl-app .learndash-wrapper .ld-lesson-section-heading {
    padding: 16px 20px;
    background: var(--hl-bg);
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--hl-text-secondary);
    border-bottom: 1px solid var(--hl-border);
    font-family: var(--hl-font);
}

/* --- Infobar --- */
.hl-app .learndash-wrapper .ld-infobar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--hl-border);
    font-family: var(--hl-font);
}

/* --- Assignment list --- */
.hl-app .learndash-wrapper .ld-assignment-list {
    border-radius: var(--hl-radius-sm);
    overflow: hidden;
    border: 1px solid var(--hl-border);
    margin: 16px 0;
}
.hl-app .learndash-wrapper .ld-assignment-upload {
    padding: 16px 20px;
    background: var(--hl-bg-subtle);
    border-bottom: 1px solid var(--hl-border);
}

/* --- LearnDash typography reset --- */
.hl-app .learndash-wrapper h1,
.hl-app .learndash-wrapper h2,
.hl-app .learndash-wrapper h3,
.hl-app .learndash-wrapper h4 {
    font-family: var(--hl-font);
    color: var(--hl-text-heading);
}
.hl-app .learndash-wrapper p,
.hl-app .learndash-wrapper li,
.hl-app .learndash-wrapper td,
.hl-app .learndash-wrapper th {
    font-family: var(--hl-font);
    color: var(--hl-text);
    line-height: 1.6;
}
.hl-app .learndash-wrapper a {
    color: var(--hl-interactive);
    text-decoration: none;
    transition: color 0.15s;
}
.hl-app .learndash-wrapper a:hover {
    color: var(--hl-interactive-dark);
    text-decoration: underline;
}

/* --- Course outline — scrollable lesson list container --- */
.hl-course-outline__lessons {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

/* --- Topbar z-index on lesson pages (above outline panel) --- */
body.hl-ld-lesson .hl-topbar {
    left: 240px;
    z-index: 1001;
}
body.hl-sidebar-is-collapsed.hl-ld-lesson .hl-topbar {
    left: 60px;
}

/* --- LearnDash responsive --- */
@media (max-width: 1200px) {
    .hl-course-outline {
        width: 280px;
    }
    .hl-ld-lesson .hl-ld-content {
        margin-left: calc(240px + 280px);
        max-width: calc(100vw - 240px - 280px);
    }
    body.hl-sidebar-is-collapsed .hl-ld-lesson .hl-ld-content {
        margin-left: calc(60px + 280px);
        max-width: calc(100vw - 60px - 280px);
    }
    .hl-ld-content__body {
        padding: 24px 28px;
    }
}
@media (max-width: 1024px) {
    .hl-ld-lesson .hl-ld-content {
        margin-left: 0;
        padding: 60px 16px 24px;
        max-width: 100vw;
    }
    body.hl-sidebar-is-collapsed .hl-ld-lesson .hl-ld-content,
    body.hl-course-outline-is-collapsed .hl-ld-lesson .hl-ld-content,
    body.hl-sidebar-is-collapsed.hl-course-outline-is-collapsed .hl-ld-lesson .hl-ld-content {
        margin-left: 0;
        max-width: 100vw;
    }
    .hl-ld-course .hl-app__content,
    body.hl-sidebar-is-collapsed .hl-ld-course .hl-app__content {
        margin-left: 0;
        padding: 60px 16px 24px;
        max-width: 100vw;
    }
    .hl-ld-content__header {
        flex-wrap: wrap;
    }
    .hl-ld-content__nav {
        margin-left: 0;
        width: 100%;
        justify-content: flex-end;
    }
    body.hl-ld-lesson .hl-topbar {
        left: 0;
    }
    body.hl-course-outline-is-collapsed .hl-course-outline__reopen {
        left: 0;
    }
    body.hl-sidebar-is-collapsed.hl-course-outline-is-collapsed .hl-course-outline__reopen {
        left: 0;
    }
    /* Course sidebar stacks below content on smaller screens */
    .hl-course-layout {
        flex-direction: column;
    }
    .hl-course-sidebar {
        width: 100%;
        position: static;
    }
}
@media (max-width: 768px) {
    .hl-ld-content__body {
        padding: 20px 16px;
        border-radius: var(--hl-radius-sm);
    }
    .hl-ld-lesson .hl-ld-content {
        padding: 64px 16px 24px;
    }
    .hl-course-outline {
        z-index: 1050;
    }
    body.hl-course-outline-is-collapsed .hl-course-outline {
        transform: translateX(-100%);
    }
}

/* ========================================
   GUIDED TOURS — Driver.js Overrides
   ======================================== */
.driver-popover-footer button,
.driver-popover-footer .driver-popover-next-btn,
.driver-popover-footer .driver-popover-prev-btn {
    text-shadow: none !important;
}

/* ========================================
   GUIDED TOURS — Topbar & Dropdown
   ======================================== */
.hl-topbar__tour-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.hl-topbar__tour-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: var(--hl-radius-xs);
    color: var(--hl-text-secondary);
    transition: var(--hl-transition);
    display: flex;
    align-items: center;
}
.hl-topbar__tour-btn:hover {
    background: var(--hl-bg);
    color: var(--hl-interactive);
}
.hl-topbar__tour-btn .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
}
.hl-topbar__tour-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    width: 260px;
    background: var(--hl-surface);
    border-radius: var(--hl-radius-sm);
    box-shadow: var(--hl-shadow-lg);
    border: 1px solid rgba(0,0,0,0.08);
    z-index: 1100;
    overflow: hidden;
}
.hl-tour-dropdown__header {
    padding: 12px 16px;
    font-weight: 600;
    font-size: 13px;
    color: var(--hl-text-heading);
    border-bottom: 1px solid var(--hl-bg);
}
.hl-tour-dropdown__list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.hl-tour-dropdown__list li {
    margin: 0;
}
.hl-tour-dropdown__list li button {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 13px;
    color: var(--hl-text);
    transition: var(--hl-transition);
}
.hl-tour-dropdown__list li button:hover {
    background: var(--hl-bg-subtle);
    color: var(--hl-interactive);
}
.hl-tour-dropdown__badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: var(--hl-radius-pill);
    background: var(--hl-interactive-bg);
    color: var(--hl-interactive);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.hl-tour-dropdown__empty {
    padding: 16px;
    text-align: center;
    color: var(--hl-text-muted);
    font-size: 13px;
}

/* Mobile: bottom sheet */
@media (max-width: 768px) {
    .hl-topbar__tour-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        border-radius: var(--hl-radius) var(--hl-radius) 0 0;
        max-height: 60vh;
        overflow-y: auto;
    }
    .hl-tour-dropdown__list li button {
        padding: 14px 16px;
        font-size: 15px;
    }
}

/* =====================================================
   FEATURE TRACKER (.hlft-*)
   ===================================================== */

/* Toolbar */
.hlft-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}
.hlft-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-left: auto;
}
.hlft-filter-select {
    padding: 6px 10px;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    font-size: 13px;
    background: var(--hl-surface);
    color: var(--hl-text);
}
.hlft-search-input {
    padding: 6px 10px;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    font-size: 13px;
    width: 180px;
    background: var(--hl-surface);
    color: var(--hl-text);
}

/* Filter indicator */
.hlft-filter-indicator {
    font-size: 13px;
    color: var(--hl-text-secondary);
    margin-bottom: 16px;
}
.hlft-filter-indicator a {
    color: var(--hl-interactive);
}

/* Table */
.hlft-table-wrap {
    position: relative;
    min-height: 120px;
}
.hlft-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--hl-surface);
    border-radius: var(--hl-radius);
    overflow: hidden;
    box-shadow: var(--hl-shadow);
}
.hlft-table thead th {
    padding: 8px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, var(--hl-primary), var(--hl-primary-light));
    color: rgba(255,255,255,0.9);
    border-bottom: none;
    text-align: left;
    white-space: nowrap;
}
.hlft-table tbody tr {
    cursor: pointer;
    transition: background 0.15s;
}
.hlft-table tbody tr:hover {
    background: var(--hl-bg);
}
.hlft-table tbody td {
    padding: 8px 10px;
    font-size: 13px;
    color: var(--hl-text);
    border-bottom: 1px solid var(--hl-border);
    vertical-align: middle;
}
.hlft-th-type { width: 40px; text-align: center; }
.hlft-th-title { width: auto; }
.hlft-th-priority { width: 90px; white-space: nowrap; }
.hlft-th-submitter { width: 150px; white-space: nowrap; }
.hlft-th-status { width: 120px; white-space: nowrap; }
.hlft-th-date { width: 110px; white-space: nowrap; }
.hlft-td-type { font-size: 18px; text-align: center; }

/* Type dot */
.hlft-type-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.hlft-type-dot--bug { background: var(--hl-error); }
.hlft-type-dot--improvement { background: var(--hl-warning); }
.hlft-type-dot--feature_request { background: var(--hl-accent); }

/* Priority badge */
.hlft-priority-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.hlft-priority-badge--critical { background: rgba(var(--hl-error-rgb, 239,68,68), 0.12); color: var(--hl-error); }
.hlft-priority-badge--high { background: rgba(var(--hl-warning-rgb, 245,158,11), 0.12); color: var(--hl-warning-dark, #b45309); }
.hlft-priority-badge--medium { background: rgba(var(--hl-interactive-rgb, 99,102,241), 0.12); color: var(--hl-interactive); }
.hlft-priority-badge--low { background: rgba(107,114,128, 0.12); color: var(--hl-text-secondary); }

/* Status pill */
.hlft-status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}
.hlft-status-pill--open { background: rgba(var(--hl-interactive-rgb, 99,102,241), 0.12); color: var(--hl-interactive); }
.hlft-status-pill--in_review { background: rgba(var(--hl-warning-rgb, 245,158,11), 0.12); color: var(--hl-warning-dark, #b45309); }
.hlft-status-pill--in_progress { background: rgba(79,70,229, 0.12); color: var(--hl-interactive-dark); }
.hlft-status-pill--resolved { background: rgba(var(--hl-accent-rgb, 46,204,113), 0.12); color: var(--hl-accent-dark); }
.hlft-status-pill--closed { background: rgba(107,114,128, 0.12); color: var(--hl-text-secondary); }
.hlft-status-pill--draft {
    border: 1px dashed var(--hl-text-secondary);
    color: var(--hl-text-secondary);
    background: transparent;
}

/* Type badge (used in detail modal) */
.hlft-type-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.hlft-type-badge--bug { background: rgba(var(--hl-error-rgb, 239,68,68), 0.12); color: var(--hl-error); }
.hlft-type-badge--improvement { background: rgba(var(--hl-warning-rgb, 245,158,11), 0.12); color: var(--hl-warning-dark, #b45309); }
.hlft-type-badge--feature_request { background: rgba(var(--hl-accent-rgb, 46,204,113), 0.12); color: var(--hl-accent-dark); }

/* Avatar */
.hlft-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    vertical-align: middle;
    margin-right: 6px;
}

/* Submitter cell */
.hlft-submitter {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}
.hlft-table .hlft-avatar {
    width: 24px;
    height: 24px;
}

/* Empty / no-results */
.hlft-empty,
.hlft-no-results {
    text-align: center;
    padding: 48px 24px;
    color: var(--hl-text-secondary);
    font-size: 14px;
}
.hlft-no-results a {
    color: var(--hl-interactive);
}

/* Loading / spinner */
.hlft-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.7);
    z-index: 5;
}
.hlft-spin {
    animation: hlft-spin 1s linear infinite;
    font-size: 24px;
    color: var(--hl-interactive);
}
@keyframes hlft-spin {
    100% { transform: rotate(360deg); }
}

/* Modal */
.hlft-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.5);
}
.hlft-modal-box {
    background: var(--hl-surface);
    border-radius: var(--hl-radius);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    max-width: 640px;
    width: 95%;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}
.hlft-modal-box--form {
    max-width: 700px;
    position: relative; /* needed for confirm overlay absolute positioning */
}
.hlft-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.hlft-form-grid .hlft-form-group {
    margin-bottom: 0; /* grid gap handles spacing — prevents doubled gap + margin-bottom */
}
.hlft-form-grid .hlft-form-group--full {
    grid-column: 1 / -1;
}
.hlft-form-grid .hlft-context-user-wrap {
    margin-top: 0; /* was 8px when nested; grid gap now handles it */
}
@media (max-width: 500px) {
    .hlft-form-grid {
        grid-template-columns: 1fr;
    }
}
.hlft-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--hl-border);
    flex-shrink: 0;
}
.hlft-modal-title-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.hlft-modal-title-row h2 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--hl-text-heading);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hlft-modal-close {
    background: none;
    border: none;
    font-size: 22px;
    color: var(--hl-text-secondary);
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    flex-shrink: 0;
}
.hlft-modal-close:hover {
    color: var(--hl-text);
}
.hlft-modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
}
.hlft-modal-loading {
    text-align: center;
    padding: 40px;
}

/* Meta row */
.hlft-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--hl-text-secondary);
}
.hlft-meta-row .hlft-avatar {
    width: 24px;
    height: 24px;
}

/* Description */
.hlft-description {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--hl-text);
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Detail actions */
.hlft-detail-actions {
    margin-bottom: 20px;
}

/* Status section */
.hlft-status-section {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--hl-border);
    margin-bottom: 16px;
}
.hlft-status-section label {
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text-secondary);
    white-space: nowrap;
}
.hlft-status-section select {
    padding: 4px 8px;
    border: 1px solid var(--hl-border);
    border-radius: 8px;
    font-size: 13px;
}

/* Comments */
.hlft-comments-section {
    border-top: 1px solid var(--hl-border);
    padding-top: 16px;
}
.hlft-comments-section h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin: 0 0 12px;
}
.hlft-comment {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}
.hlft-comment__body {
    flex: 1;
}
.hlft-comment__header {
    font-size: 13px;
    margin-bottom: 2px;
}
.hlft-comment__name {
    font-weight: 600;
    color: var(--hl-text-heading);
}
.hlft-comment__time {
    color: var(--hl-text-secondary);
    margin-left: 8px;
}
.hlft-comment__text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--hl-text);
}
.hlft-comments-empty {
    color: var(--hl-text-secondary);
    font-size: 13px;
    font-style: italic;
    margin-bottom: 14px;
}
.hlft-comment-form {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    margin-top: 12px;
}
.hlft-comment-form textarea {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}

/* Form */
.hlft-form-group {
    margin-bottom: 14px;
}
.hlft-form-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin-bottom: 4px;
}
.hlft-form-group label .required {
    color: var(--hl-error);
}
.hlft-form-group input[type="text"],
.hlft-form-group select,
.hlft-form-group textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    font-family: inherit;
    color: var(--hl-text);
    background: var(--hl-surface);
    box-sizing: border-box;
}
.hlft-form-group textarea {
    resize: vertical;
    min-height: 100px;
}
.hlft-form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding-top: 8px;
}

/* ── Attachments ── */
.hlft-attachments {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}
.hlft-attachment-thumb {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid var(--hl-border);
    cursor: pointer;
    transition: transform 0.15s;
}
.hlft-attachment-thumb:hover {
    transform: scale(1.05);
}
.hlft-comment .hlft-attachments {
    margin-top: 6px;
    margin-bottom: 0;
}
.hlft-comment .hlft-attachment-thumb {
    width: 60px;
    height: 60px;
}
/* Upload area */
.hlft-upload-area {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.hlft-upload-hint {
    font-size: 12px;
    color: var(--hl-text-secondary);
}
.hlft-upload-preview {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
    width: 100%;
    padding-top: 8px;
}
.hlft-upload-preview img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--hl-border);
}
.hlft-preview-item {
    position: relative;
    display: inline-block;
}
.hlft-preview-remove {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--hl-error, #d32f2f);
    color: #fff;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.hlft-preview-remove:hover {
    background: #b71c1c;
}
.hlft-attach-icon {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hl-text-secondary);
    padding: 2px;
}
.hlft-attach-icon:hover {
    color: var(--hl-interactive);
}
.hlft-comment-form__input {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.hlft-comment-form__input textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    box-sizing: border-box;
}
.hlft-comment-form__attach {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Lightbox */
.hlft-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100002;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.8);
    cursor: zoom-out;
}
.hlft-lightbox img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}

/* Toast notification */
.hlft-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: var(--hl-primary);
    color: #fff;
    padding: 10px 20px;
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
    z-index: 100001;
    transition: opacity 0.3s;
}

/* ── Department Read-Only Field ── */
.hlft-dept-readonly {
    padding: 8px 10px;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    background: #f5f5f5;
    color: var(--hl-text);
    font-size: 14px;
    cursor: default;
}
.hlft-dept-empty {
    color: var(--hl-text-secondary);
    font-style: italic;
}

/* ── Category Meta Badge (detail modal) ── */
.hlft-meta-category {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: var(--hl-surface);
    border: 1px solid var(--hl-border);
    font-size: 12px;
    color: var(--hl-text-secondary);
}

/* ── Context "Viewing as" (detail modal) ── */
.hlft-meta-context {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    background: #fff3e0;
    border: 1px solid #ffe0b2;
    font-size: 12px;
    color: #e65100;
}
.hlft-meta-context a {
    color: #e65100;
    text-decoration: underline;
}

/* ── Context User Search ── */
.hlft-context-user-wrap {
    margin-top: 8px;
}
.hlft-user-search-wrap {
    position: relative;
}
.hlft-user-search-wrap input[type="text"] {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    font-size: 14px;
    box-sizing: border-box;
}
.hlft-user-search-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--hl-surface);
    border: 1px solid var(--hl-border);
    border-top: none;
    border-radius: 0 0 var(--hl-radius-sm) var(--hl-radius-sm);
    max-height: 200px;
    overflow-y: auto;
    z-index: 100003;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.hlft-user-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
}
.hlft-user-search-item:hover {
    background: var(--hl-bg-hover, #f0f0f0);
}
.hlft-user-search-loading,
.hlft-user-search-empty {
    padding: 10px;
    text-align: center;
    color: var(--hl-text-secondary);
    font-size: 13px;
}

/* ── Context User Chip ── */
.hlft-context-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    background: var(--hl-surface);
    border: 1px solid var(--hl-border);
    font-size: 14px;
    margin-top: 6px;
}
.hlft-context-user-chip .hlft-avatar {
    width: 20px;
    height: 20px;
}
.hlft-chip-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--hl-text-secondary);
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}
.hlft-chip-remove:hover {
    color: var(--hl-error, #d32f2f);
}

/* ── Close Confirmation Dialog ── */
.hlft-confirm-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.93);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    z-index: 10;
}
.hlft-confirm-dialog {
    padding: 24px;
    text-align: center;
    max-width: 340px;
}
.hlft-confirm-dialog p {
    margin: 0 0 16px;
    font-size: 15px;
    color: var(--hl-text);
    font-weight: 500;
}
.hlft-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* =====================================================
   HIDE LD FOCUS MODE ELEMENTS (our template replaces them)
   LD's Focus Mode renders its own header, sidebar, and
   navigation inside the_content(). We hide these because
   our ld-lesson.php template has its own course outline
   panel and lesson header.
   ===================================================== */
.hl-app .ld-focus-header,
.hl-app .ld-focus-sidebar,
.hl-app .ld-focus-sidebar-wrapper,
.hl-app .lms-topic-sidebar-wrapper,
.hl-app .lms-topic-sidebar-data,
.hl-app #ld-focus-sidebar,
.hl-app .ld-focus-masthead,
.hl-app .bb-ld-focus-header,
.hl-app #learndash-page-content .ld-focus-header {
    display: none !important;
}
/* Hide LD's own lesson navigation (we have our own prev/next) */
.hl-ld-lesson .ld-content-actions {
    display: none;
}
/* Remove any LD focus mode body padding/margin */
.hl-app .ld-focus-content {
    padding: 0 !important;
    margin: 0 !important;
}
/* Ensure LD focus main area takes full width (no sidebar offset) */
.hl-app .ld-focus-main {
    margin-left: 0 !important;
    width: 100% !important;
}

/* =====================================================
   AUTH PAGES (Login, Password Reset, Profile Setup)
   ===================================================== */

.hl-auth-page {
    margin: 0;
    padding: 0;
    font-family: var(--hl-font);
    background: linear-gradient(135deg, var(--hl-primary) 0%, var(--hl-primary-light) 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hl-auth-wrapper {
    width: 100%;
    max-width: 480px;
    padding: 24px;
}

/* Profile setup needs wider container for multi-step form */
.hl-auth-wrapper--wide {
    max-width: 680px;
}

.hl-auth-card {
    background: var(--hl-surface);
    border-radius: var(--hl-radius);
    box-shadow: var(--hl-shadow-lg);
    padding: 40px;
    text-align: center;
}

.hl-auth-logo {
    max-width: 180px;
    margin: 0 auto 32px;
}

.hl-auth-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--hl-text-heading);
    margin: 0 0 8px;
}

.hl-auth-subtitle {
    font-size: 14px;
    color: var(--hl-text-secondary);
    margin: 0 0 32px;
}

.hl-auth-form {
    text-align: left;
}

.hl-auth-field {
    margin-bottom: 20px;
}

.hl-auth-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--hl-text);
    margin-bottom: 6px;
}

.hl-auth-field input[type="text"],
.hl-auth-field input[type="email"],
.hl-auth-field input[type="password"],
.hl-auth-field input[type="tel"],
.hl-auth-field input[type="url"] {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--hl-font);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-xs);
    padding: 12px 14px;
    font-size: 15px;
    color: var(--hl-text);
    background: var(--hl-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.hl-auth-field input:focus {
    border-color: var(--hl-interactive);
    box-shadow: 0 0 0 3px var(--hl-interactive-bg);
}

.hl-auth-field--error input {
    border-color: var(--hl-error);
}

.hl-auth-field--error input:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.hl-auth-error {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    border-radius: var(--hl-radius-xs);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--hl-error-dark);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hl-auth-error .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.hl-auth-success {
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: var(--hl-radius-xs);
    padding: 12px 16px;
    margin-bottom: 20px;
    font-size: 14px;
    color: var(--hl-accent-dark);
}

.hl-auth-btn {
    display: block;
    width: 100%;
    padding: 14px;
    background: var(--hl-accent);
    color: #fff;
    border: none;
    border-radius: var(--hl-radius-xs);
    font-size: 16px;
    font-weight: 600;
    font-family: var(--hl-font);
    cursor: pointer;
    transition: background 0.15s ease;
    position: relative;
}

.hl-auth-btn:hover {
    background: var(--hl-accent-dark);
}

.hl-auth-btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.hl-auth-btn--submitting .hl-auth-btn-text {
    visibility: hidden;
}

.hl-auth-btn--submitting::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hl-spin 0.6s linear infinite;
}

.hl-auth-links {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
}

.hl-auth-links a {
    color: var(--hl-secondary);
    text-decoration: none;
}

.hl-auth-links a:hover {
    text-decoration: underline;
}

/* Password strength meter (PI6: reserved for Phase 2 custom reset form) */
.hl-pw-strength {
    margin-top: 8px;
    height: 4px;
    border-radius: 2px;
    background: var(--hl-border);
    overflow: hidden;
}

.hl-pw-strength__bar {
    height: 100%;
    border-radius: 2px;
    transition: width 0.3s ease, background 0.3s ease;
    width: 0;
}

.hl-pw-strength--weak .hl-pw-strength__bar    { width: 25%;  background: var(--hl-error); }
.hl-pw-strength--fair .hl-pw-strength__bar    { width: 50%;  background: var(--hl-warning); }
.hl-pw-strength--good .hl-pw-strength__bar    { width: 75%;  background: #60A5FA; }
.hl-pw-strength--strong .hl-pw-strength__bar  { width: 100%; background: var(--hl-accent); }

.hl-pw-strength__label {
    font-size: 12px;
    margin-top: 4px;
    color: var(--hl-text-secondary);
}

/* Step indicator */
.hl-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 32px;
}

.hl-steps__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: default;
}

.hl-steps__number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--hl-bg);
    color: var(--hl-text-secondary);
    border: 2px solid var(--hl-border);
    transition: all 0.2s ease;
}

.hl-steps__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--hl-text-secondary);
}

.hl-steps__divider {
    width: 32px;
    height: 2px;
    background: var(--hl-border);
}

/* Active step */
.hl-steps__item--active .hl-steps__number {
    background: var(--hl-interactive);
    border-color: var(--hl-interactive);
    color: #fff;
}

.hl-steps__item--active .hl-steps__label {
    color: var(--hl-interactive-dark);
    font-weight: 600;
}

/* Completed step — FI2: font-size:0 hides the number, ::after renders the checkmark */
.hl-steps__item--complete .hl-steps__number {
    background: var(--hl-accent);
    border-color: var(--hl-accent);
    color: #fff;
    font-size: 0;
}

.hl-steps__item--complete .hl-steps__number::after {
    content: '\2713';
    font-size: 14px;
}

/* Step with errors (spec I7) */
.hl-steps__item--error .hl-steps__number {
    background: var(--hl-warning);
    border-color: var(--hl-warning);
    color: #fff;
}

/* Pill checkbox (multi-select) */
.hl-pill-check-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.hl-pill-check {
    display: inline-flex;
    cursor: pointer;
}

.hl-pill-check input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.hl-pill-check__label {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-pill);
    font-size: 13px;
    font-weight: 500;
    color: var(--hl-text);
    background: var(--hl-surface);
    transition: all 0.15s ease;
    user-select: none;
}

.hl-pill-check__label:hover {
    border-color: var(--hl-interactive);
    background: var(--hl-interactive-bg);
}

.hl-pill-check input:checked + .hl-pill-check__label {
    background: var(--hl-interactive-bg);
    border-color: var(--hl-interactive);
    color: var(--hl-interactive-dark);
    font-weight: 600;
}

.hl-pill-check input:focus-visible + .hl-pill-check__label {
    outline: 2px solid var(--hl-interactive);
    outline-offset: 2px;
}

/* Radio Group */
.hl-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.hl-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.hl-radio input[type="radio"] {
    margin-right: 6px;
    accent-color: var(--hl-interactive);
}

.hl-radio__label {
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-text);
}

/* Phone group */
.hl-phone-group {
    display: flex;
    gap: 8px;
}

.hl-phone-cc,
.hl-auth-field .hl-phone-cc {
    width: 130px;
    flex-shrink: 0;
}

.hl-phone-group input[type="tel"] {
    flex: 1;
    min-width: 0;
}

/* Step navigation */
.hl-step-nav {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.hl-step-nav .hl-auth-btn {
    flex: 1;
}

.hl-auth-btn--secondary {
    background: var(--hl-bg);
    color: var(--hl-text);
    border: 1px solid var(--hl-border);
}

.hl-auth-btn--secondary:hover {
    background: var(--hl-bg-hover);
    border-color: var(--hl-border-medium);
}

/* 2-Column Grid for Name Fields */
.hl-field-row--2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Read-only input (email) */
.hl-input--readonly {
    background: var(--hl-bg) !important;
    color: var(--hl-text-secondary) !important;
    cursor: not-allowed;
}

/* Required / Optional indicators */
.hl-required {
    color: var(--hl-error);
    font-weight: 600;
}

.hl-optional {
    color: var(--hl-text-secondary);
    font-weight: 400;
    font-size: 12px;
}

/* Social Media @ Prefix Input */
.hl-input-prefix-group {
    display: flex;
    align-items: stretch;
}

.hl-input-prefix {
    display: flex;
    align-items: center;
    padding: 0 12px;
    background: var(--hl-bg);
    border: 1px solid var(--hl-border);
    border-right: none;
    border-radius: var(--hl-radius-xs) 0 0 var(--hl-radius-xs);
    font-size: 15px;
    font-weight: 600;
    color: var(--hl-text-secondary);
}

.hl-input-prefix-group input {
    flex: 1;
    min-width: 0;
    border-radius: 0 var(--hl-radius-xs) var(--hl-radius-xs) 0 !important;
}

/* URL inputs (LinkedIn, Facebook, Website) */
.hl-auth-field input[type="url"]:focus {
    border-color: var(--hl-interactive);
    box-shadow: 0 0 0 3px var(--hl-interactive-bg);
}

/* Step intro text */
.hl-step-intro {
    font-size: 14px;
    color: var(--hl-text-secondary);
    margin: 0 0 20px;
}

/* Consent box */
.hl-consent-box {
    background: var(--hl-bg-subtle);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-sm);
    padding: 24px;
    margin-bottom: 24px;
    text-align: left;
}

.hl-consent-box h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--hl-text-heading);
    margin: 0 0 12px;
}

.hl-consent-text {
    font-size: 14px;
    line-height: 1.6;
    color: var(--hl-text);
    margin-bottom: 16px;
}

.hl-consent-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    color: var(--hl-text);
}

.hl-consent-check input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

/* Wide card variant for profile setup */
.hl-auth-card--wide {
    max-width: 640px;
    margin: 0 auto;
}

/* Field-level error indicator */
.hl-field-error label {
    color: var(--hl-error);
}

.hl-field-error input,
.hl-field-error select {
    border-color: var(--hl-error);
}

.hl-field-error .hl-pill-check__label {
    border-color: var(--hl-error);
}

/* Location Dropdown */
.hl-auth-field select {
    width: 100%;
    box-sizing: border-box;
    font-family: var(--hl-font);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-xs);
    padding: 12px 14px;
    font-size: 15px;
    color: var(--hl-text);
    background: var(--hl-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7280' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.hl-auth-field select:focus {
    border-color: var(--hl-interactive);
    box-shadow: 0 0 0 3px var(--hl-interactive-bg);
}

/* PI5: Mobile responsive rules */
@media (max-width: 480px) {
    .hl-steps__label { display: none; }
    .hl-step-nav { flex-direction: column; }
    .hl-step-nav .hl-auth-btn { width: 100%; }
    .hl-field-row--2col { grid-template-columns: 1fr; }
}

/* Spin animation for submitting button state */
@keyframes hl-spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}