/* ═══════════════════════════════════════════════════════════════
   Pulse — Design System
   Style : Premium SaaS Modern (Linear/Notion/Vercel)
   Font  : Inter (Google Fonts)
   Theme : Light + Dark mode via data-theme attribute
   ═══════════════════════════════════════════════════════════════ */

/* ── Light Mode Tokens (default) ──────────────────────────────── */
:root {
    /* Backgrounds */
    --bg-primary:       #FFFFFF;
    --bg-secondary:     #F8F9FB;
    --bg-tertiary:      #F1F3F6;
    --bg-elevated:      #FFFFFF;
    --bg-overlay:       rgba(0, 0, 0, 0.5);
    --bg-sidebar:       #FAFBFC;
    --bg-topbar:        #FFFFFF;
    --bg-input:         #FFFFFF;
    --bg-hover:         #F3F4F8;
    --bg-active:        #EEF0F6;
    --bg-selected:      #F0F4FF;

    /* Text */
    --text-primary:     #111827;
    --text-secondary:   #4B5563;
    --text-tertiary:    #6B7280;
    --text-muted:       #9CA3AF;
    --text-inverse:     #FFFFFF;
    --text-link:        #1D4ED8;  /* Was #2563EB, now darker for WCAG AA compliance */
    --text-link-hover:  #1E40AF;

    /* Borders */
    --border-primary:   #E5E7EB;
    --border-secondary: #F3F4F6;
    --border-focus:     #2563EB;
    --border-error:     #EF4444;
    --border-success:   #22C55E;

    /* Accent / Brand */
    --accent-primary:       #2563EB;
    --accent-primary-hover: #1D4ED8;
    --accent-primary-light: #EFF6FF;
    --accent-primary-muted: #DBEAFE;
    --accent-secondary:     #7C3AED;

    /* Semantic colors */
    --color-success:        #22C55E;
    --color-success-light:  #F0FDF4;
    --color-success-border: #BBF7D0;
    --color-warning:        #F59E0B;
    --color-warning-light:  #FFFBEB;
    --color-warning-border: #FDE68A;
    --color-error:          #EF4444;
    --color-error-light:    #FEF2F2;
    --color-error-border:   #FECACA;
    --color-info:           #3B82F6;
    --color-info-light:     #EFF6FF;
    --color-info-border:    #BFDBFE;

    /* Badge palette */
    --badge-blue-bg:     #EFF6FF;    --badge-blue-text:     #1D4ED8;
    --badge-green-bg:    #F0FDF4;    --badge-green-text:    #15803D;
    --badge-red-bg:      #FEF2F2;    --badge-red-text:      #DC2626;
    --badge-orange-bg:   #FFF7ED;    --badge-orange-text:   #C2410C;
    --badge-purple-bg:   #F5F3FF;    --badge-purple-text:   #7C3AED;
    --badge-gray-bg:     #F3F4F6;    --badge-gray-text:     #4B5563;
    --badge-cyan-bg:     #ECFEFF;    --badge-cyan-text:     #0E7490;

    /* Typography */
    --font-family:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;
    --text-xs:      0.6875rem;
    --text-sm:      0.8125rem;
    --text-base:    0.875rem;
    --text-md:      1rem;
    --text-lg:      1.125rem;
    --text-xl:      1.25rem;
    --text-2xl:     1.5rem;
    --text-3xl:     1.875rem;
    --font-normal:    400;
    --font-medium:    500;
    --font-semibold:  600;
    --font-bold:      700;
    --leading-tight:   1.25;
    --leading-snug:    1.375;
    --leading-normal:  1.5;
    --leading-relaxed: 1.625;
    --tracking-tight:   -0.011em;
    --tracking-normal:   0;
    --tracking-wide:     0.025em;
    --tracking-wider:    0.05em;
    --tracking-widest:   0.1em;

    /* Spacing (8px grid) */
    --space-0:    0;
    --space-0-5:  2px;
    --space-1:    4px;
    --space-1-5:  6px;
    --space-2:    8px;
    --space-2-5:  10px;
    --space-3:    12px;
    --space-4:    16px;
    --space-5:    20px;
    --space-6:    24px;
    --space-8:    32px;
    --space-10:   40px;
    --space-12:   48px;
    --space-16:   64px;
    --space-20:   80px;

    /* Shadows */
    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
    --accent-ring: rgba(37, 99, 235, 0.15);
    --shadow-focus: 0 0 0 3px var(--accent-ring);
    --shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);

    /* Border radius */
    --radius-xs:    4px;
    --radius-sm:    6px;
    --radius-md:    8px;
    --radius-lg:    12px;
    --radius-xl:    16px;
    --radius-2xl:   20px;
    --radius-full:  9999px;

    /* Transitions */
    --transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base:   200ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow:   300ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Legacy compat (for org themeConfig) */
    --btn-primary-bg:     var(--accent-primary);
    --btn-primary-shadow: var(--shadow-sm);
}

/* ── Dark Mode Tokens ─────────────────────────────────────────── */
[data-theme="dark"] {
    --bg-primary:       #0F1117;
    --bg-secondary:     #161922;
    --bg-tertiary:      #1C1F2E;
    --bg-elevated:      #1C1F2E;
    --bg-overlay:       rgba(0, 0, 0, 0.7);
    --bg-sidebar:       #0F1117;
    --bg-topbar:        #161922;
    --bg-input:         #1C1F2E;
    --bg-hover:         #232636;
    --bg-active:        #2A2D42;
    --bg-selected:      #1E2A4A;

    --text-primary:     #F1F3F9;
    --text-secondary:   #A1A7B8;
    --text-tertiary:    #6B7280;
    --text-muted:       #4B5563;
    --text-inverse:     #111827;
    --text-link:        #60A5FA;
    --text-link-hover:  #93BBFD;

    --border-primary:   #2A2D42;
    --border-secondary: #1F2237;
    --border-focus:     #3B82F6;
    --border-error:     #DC2626;
    --border-success:   #16A34A;

    --accent-primary:       #3B82F6;
    --accent-primary-hover: #60A5FA;
    --accent-primary-light: #1E2A4A;
    --accent-primary-muted: #1E3A5F;
    --accent-secondary:     #8B5CF6;

    --color-success-light:  #052E16;
    --color-success-border: #166534;
    --color-warning-light:  #451A03;
    --color-warning-border: #92400E;
    --color-error-light:    #450A0A;
    --color-error-border:   #991B1B;
    --color-info-light:     #172554;
    --color-info-border:    #1E40AF;

    --badge-blue-bg:     #1E2A4A;    --badge-blue-text:     #93C5FD;
    --badge-green-bg:    #14291E;    --badge-green-text:    #86EFAC;
    --badge-red-bg:      #2D1519;    --badge-red-text:      #FCA5A5;
    --badge-orange-bg:   #2D1F0B;    --badge-orange-text:   #FDBA74;
    --badge-purple-bg:   #231B3C;    --badge-purple-text:   #C4B5FD;
    --badge-gray-bg:     #1F2237;    --badge-gray-text:     #9CA3AF;
    --badge-cyan-bg:     #083344;    --badge-cyan-text:     #67E8F9;

    --shadow-xs:    0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.35), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
    --shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
    --shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.15);
    --accent-ring: rgba(96, 165, 250, 0.25);
    --shadow-focus: 0 0 0 3px var(--accent-ring);
}

/* ── Theme transition ─────────────────────────────────────────── */
html[data-theme-transitioning] *,
html[data-theme-transitioning] *::before,
html[data-theme-transitioning] *::after {
    transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease, box-shadow 200ms ease !important;
}

/* ── Reset & Base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: var(--font-family);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--text-primary);
    background: var(--bg-secondary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
}

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--text-link-hover); }
a:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ── Icon base ────────────────────────────────────────────────── */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    color: currentColor;
}

/* ── Animations ───────────────────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes slideIn {
    from { opacity: 0; transform: translateX(24px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(24px); }
}
@keyframes modalIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Utility classes ──────────────────────────────────────────── */

/* Typography — size */
.text-xs      { font-size: var(--text-xs); }
.text-sm      { font-size: var(--text-sm); }
.text-base    { font-size: var(--text-base); }
.text-md      { font-size: var(--text-md); }
.text-lg      { font-size: var(--text-lg); }
.text-xl      { font-size: var(--text-xl); }
.text-2xl     { font-size: var(--text-2xl); }
.text-3xl     { font-size: var(--text-3xl); }

/* Typography — color */
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-muted     { color: var(--text-muted); }
.text-inverse   { color: var(--text-inverse); }
.text-link      { color: var(--text-link); }
.text-success   { color: var(--color-success); }
.text-error     { color: var(--color-error); }
.text-warning   { color: var(--color-warning); }
.text-info      { color: var(--color-info); }
.text-accent    { color: var(--accent-primary); }
.text-accent-secondary { color: var(--accent-secondary); }

/* Typography — weight / style */
.font-normal    { font-weight: var(--font-normal); }
.font-medium    { font-weight: var(--font-medium); }
.font-semibold  { font-weight: var(--font-semibold); }
.font-bold      { font-weight: var(--font-bold); }
.font-mono      { font-family: var(--font-mono); }
.uppercase      { text-transform: uppercase; }
.capitalize     { text-transform: capitalize; }
.no-underline   { text-decoration: none; }
.underline      { text-decoration: underline; }
.text-center    { text-align: center; }
.text-right     { text-align: right; }
.text-left      { text-align: left; }
.tracking-tight   { letter-spacing: var(--tracking-tight); }
.tracking-normal  { letter-spacing: var(--tracking-normal); }
.tracking-wide    { letter-spacing: var(--tracking-wide); }
.tracking-wider   { letter-spacing: var(--tracking-wider); }
.tracking-widest  { letter-spacing: var(--tracking-widest); }
.leading-tight    { line-height: var(--leading-tight); }
.leading-snug     { line-height: var(--leading-snug); }
.leading-normal   { line-height: var(--leading-normal); }
.leading-relaxed  { line-height: var(--leading-relaxed); }
.truncate       { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line-clamp-2   { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3   { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.whitespace-nowrap { white-space: nowrap; }
.break-all      { word-break: break-all; }

/* Layout — display */
.block        { display: block; }
.inline-block { display: inline-block; }
.inline-flex  { display: inline-flex; }
.hidden       { display: none; }
.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.grid         { display: grid; }
.items-center { align-items: center; }
.items-start  { align-items: flex-start; }
.items-end    { align-items: flex-end; }
.self-center  { align-self: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }

/* Sizing */
.w-full       { width: 100%; }
.h-full       { height: 100%; }
.min-w-0      { min-width: 0; }
.max-w-sm     { max-width: 400px; }
.max-w-md     { max-width: 640px; }
.max-w-lg     { max-width: 720px; }
.max-w-xl     { max-width: 900px; }
.min-h-screen { min-height: 100vh; }

/* Spacing — margin */
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mr-1  { margin-right: var(--space-1); }
.mr-2  { margin-right: var(--space-2); }
.mr-3  { margin-right: var(--space-3); }
.ml-1  { margin-left: var(--space-1); }
.ml-2  { margin-left: var(--space-2); }
.ml-auto { margin-left: auto; }
.mx-auto { margin-left: auto; margin-right: auto; }

/* Spacing — padding */
.p-0   { padding: 0; }
.p-1   { padding: var(--space-1); }
.p-2   { padding: var(--space-2); }
.p-3   { padding: var(--space-3); }
.p-4   { padding: var(--space-4); }
.p-5   { padding: var(--space-5); }
.p-6   { padding: var(--space-6); }
.p-8   { padding: var(--space-8); }
.px-2  { padding-left: var(--space-2); padding-right: var(--space-2); }
.px-3  { padding-left: var(--space-3); padding-right: var(--space-3); }
.px-4  { padding-left: var(--space-4); padding-right: var(--space-4); }
.px-5  { padding-left: var(--space-5); padding-right: var(--space-5); }
.px-6  { padding-left: var(--space-6); padding-right: var(--space-6); }
.py-2  { padding-top: var(--space-2); padding-bottom: var(--space-2); }
.py-3  { padding-top: var(--space-3); padding-bottom: var(--space-3); }
.py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4); }
.py-5  { padding-top: var(--space-5); padding-bottom: var(--space-5); }
.py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6); }
.pt-2  { padding-top: var(--space-2); }
.pt-4  { padding-top: var(--space-4); }
.pb-2  { padding-bottom: var(--space-2); }
.pb-4  { padding-bottom: var(--space-4); }

/* Spacing — gap */
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }

/* Borders */
.border        { border: 1px solid var(--border-primary); }
.border-b      { border-bottom: 1px solid var(--border-secondary); }
.border-t      { border-top: 1px solid var(--border-secondary); }
.border-none   { border: none; }
.rounded-xs    { border-radius: var(--radius-xs); }
.rounded-sm    { border-radius: var(--radius-sm); }
.rounded-md    { border-radius: var(--radius-md); }
.rounded-lg    { border-radius: var(--radius-lg); }
.rounded-xl    { border-radius: var(--radius-xl); }
.rounded-full  { border-radius: var(--radius-full); }

/* Shadows */
.shadow-xs  { box-shadow: var(--shadow-xs); }
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-xl  { box-shadow: var(--shadow-xl); }

/* Backgrounds */
.bg-primary   { background: var(--bg-primary); }
.bg-secondary { background: var(--bg-secondary); }
.bg-tertiary  { background: var(--bg-tertiary); }
.bg-elevated  { background: var(--bg-elevated); }

/* Visibility / Interaction */
.cursor-pointer  { cursor: pointer; }
.cursor-default  { cursor: default; }
.pointer-events-none { pointer-events: none; }
.select-none     { user-select: none; }
.overflow-hidden { overflow: hidden; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.relative   { position: relative; }
.absolute   { position: absolute; }
.sticky     { position: sticky; }
.inset-0    { inset: 0; }
.opacity-50 { opacity: 0.5; }
.opacity-70 { opacity: 0.7; }
.sr-only    { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── Shared Components ───────────────────────────────────────── */

/* Avatar */
.avatar {
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full); flex-shrink: 0;
    font-weight: var(--font-bold); color: var(--text-inverse);
    background: var(--accent-primary);
    text-transform: uppercase;
}
.avatar-xs  { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm  { width: 32px; height: 32px; font-size: var(--text-xs); }
.avatar-md  { width: 40px; height: 40px; font-size: var(--text-md); }
.avatar-lg  { width: 48px; height: 48px; font-size: var(--text-lg); }
.avatar-xl  { width: 72px; height: 72px; font-size: 28px; }
.avatar-2xl { width: 96px; height: 96px; font-size: 36px; }

/* Avatar with photo (img version — explicit dimensions, not 100%) */
img.sidebar-avatar {
    display: block;
    width: 28px; height: 28px; border-radius: var(--radius-full);
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--bg-sidebar);
}
img.sp-avatar {
    display: block;
    width: 28px; height: 28px; border-radius: var(--radius-full);
    object-fit: cover;
}

/* Photo upload component */
.photo-upload-area {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4);
}
.photo-upload-preview {
    width: 80px; height: 80px; border-radius: var(--radius-full);
    object-fit: cover; border: 3px solid var(--border-primary);
    flex-shrink: 0;
}
.photo-upload-preview-initials {
    width: 80px; height: 80px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: var(--text-inverse);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: var(--font-bold);
    flex-shrink: 0;
}
.photo-upload-controls {
    display: flex; flex-direction: column;
}

/* Mobility tags */
.mobility-tag {
    display: inline-block; padding: 2px 9px;
    background: var(--color-success-light);
    color: var(--badge-green-text);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
}

/* Empty State */
.empty-state {
    text-align: center; padding: var(--space-8) var(--space-4);
    color: var(--text-muted); font-size: var(--text-sm);
}
.empty-state-icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--radius-full);
    background: var(--bg-tertiary); color: var(--text-muted);
    margin: 0 auto var(--space-3);
}
.empty-state-title {
    font-size: var(--text-md); font-weight: var(--font-semibold);
    color: var(--text-secondary); margin-bottom: var(--space-1);
}

/* Info Row */
.info-row {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-secondary);
    font-size: var(--text-sm);
}
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-label {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    color: var(--text-muted); width: 130px; flex-shrink: 0;
}
.info-value { color: var(--text-secondary); flex: 1; min-width: 0; }
.info-value strong { color: var(--text-primary); font-weight: var(--font-semibold); }

/* Stat Box */
.stat-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-3); margin-bottom: var(--space-4);
}
.stat-grid--3 { grid-template-columns: repeat(3, 1fr); }
.stat-grid--4 { grid-template-columns: repeat(4, 1fr); }
.stat-box {
    background: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
    text-align: center;
}
.stat-value { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary); }
.stat-label { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-0-5); }

/* Section Title */
.section-title {
    font-size: var(--text-md); font-weight: var(--font-bold);
    color: var(--text-primary); display: flex; align-items: center;
    gap: var(--space-2); margin-bottom: var(--space-4);
}
.section-title .icon { color: var(--text-muted); }

/* Progress Bar */
.progress-bar-wrap {
    background: var(--bg-tertiary); border-radius: var(--radius-xs);
    height: 6px; overflow: hidden;
}
.progress-bar-fill {
    height: 100%; border-radius: var(--radius-xs);
    background: var(--color-success);
    transition: width var(--transition-slow);
}
.progress-bar-fill--blue   { background: var(--color-info); }
.progress-bar-fill--orange { background: var(--color-warning); }
.progress-bar-fill--red    { background: var(--color-error); }
.progress-bar-fill--purple { background: var(--accent-secondary); }
.progress-bar-fill--accent { background: var(--accent-primary); }

/* Modal */
.modal-backdrop {
    position: fixed; inset: 0; background: var(--bg-overlay);
    z-index: 999; display: flex; align-items: center; justify-content: center;
    animation: fadeInUp var(--transition-base) ease;
}
.modal-content {
    background: var(--bg-elevated); border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
    padding: var(--space-6); width: 100%; max-width: 480px;
    animation: modalIn var(--transition-base) ease;
}
.modal-header {
    font-size: var(--text-lg); font-weight: var(--font-bold);
    color: var(--text-primary); margin-bottom: var(--space-4);
    display: flex; align-items: center; justify-content: space-between;
}
.modal-close {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: var(--space-1);
    border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.modal-body { margin-bottom: var(--space-5); }
.modal-footer { display: flex; gap: var(--space-3); justify-content: flex-end; }

/* Page Header */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-6); flex-wrap: wrap; gap: var(--space-3);
}
.page-title {
    font-size: var(--text-2xl); font-weight: var(--font-bold);
    color: var(--text-primary); letter-spacing: var(--tracking-tight);
}
.page-subtitle {
    font-size: var(--text-sm); color: var(--text-muted); margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════
   Layout: Admin / Coach (Sidebar + Topbar + Main)
   ═══════════════════════════════════════════════════════════════ */

/* ── Sidebar (collapsible — 64px → 240px on hover) ───────────── */
.sidebar {
    position: fixed; top: 0; left: 0;
    width: 64px; height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    display: flex; flex-direction: column; z-index: 100;
    transition: width 0.25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.sidebar:hover { width: 240px; }
/* Helper: hide text labels when sidebar is collapsed */
.sidebar .sidebar-label {
    opacity: 0; white-space: nowrap;
    transition: opacity 0.15s ease;
    overflow: hidden;
}
.sidebar:hover .sidebar-label { opacity: 1; }
.sidebar-logo {
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-lg); font-weight: 800; color: var(--text-primary);
    border-bottom: 1px solid var(--border-secondary);
    letter-spacing: -0.3px;
    display: flex; align-items: center; gap: var(--space-3);
    white-space: nowrap; min-height: 56px;
}
.sidebar-logo-icon {
    width: 28px; height: 28px; border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
}
.sidebar-logo span {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sidebar-nav {
    flex: 1; padding: var(--space-2); overflow-y: auto; overflow-x: hidden;
    mask-image: linear-gradient(to bottom, transparent 0px, black 8px, black calc(100% - 8px), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0px, black 8px, black calc(100% - 8px), transparent 100%);
}
.sidebar-nav a {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary); text-decoration: none;
    font-size: var(--text-sm); font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    position: relative; white-space: nowrap;
}
.sidebar-nav a:hover {
    background: var(--bg-hover); color: var(--text-primary);
    transform: translateX(2px);
}
.sidebar-nav a:hover .nav-icon { color: var(--accent-primary); }
.sidebar-nav a.active {
    background: var(--bg-selected); color: var(--accent-primary);
    font-weight: var(--font-semibold);
}
.sidebar-nav a.active::before {
    content: ''; position: absolute; left: 0; top: 20%; height: 60%;
    width: 3px; border-radius: 2px;
    background: var(--accent-primary);
    animation: sidebarAccent var(--transition-spring) both;
}
@keyframes sidebarAccent {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}
.sidebar-nav .nav-icon {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: inherit;
}
.sidebar-section {
    padding: var(--space-4) var(--space-3) var(--space-1);
    font-size: var(--text-xs); text-transform: uppercase;
    letter-spacing: var(--tracking-widest); color: var(--text-muted);
    font-weight: var(--font-semibold);
    white-space: nowrap; overflow: hidden;
    opacity: 0; height: 0; padding: 0; margin: 0;
    transition: opacity 0.15s ease, height 0.2s ease, padding 0.2s ease;
}
.sidebar:hover .sidebar-section {
    opacity: 1; height: auto;
    padding: var(--space-4) var(--space-3) var(--space-1);
    display: flex; align-items: center; gap: var(--space-2);
}
.sidebar:hover .sidebar-section::before {
    content: ''; flex: 1; height: 1px;
    background: var(--border-secondary);
}
.sidebar:hover .sidebar-section:first-child { padding-top: var(--space-2); }
.sidebar:hover .sidebar-section:first-child::before { display: none; }
.sidebar-footer {
    margin: var(--space-2) var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-radius: var(--radius-lg);
    display: flex; align-items: center; gap: var(--space-3);
    transition: background var(--transition-fast);
    cursor: default;
    overflow: hidden; min-height: 44px;
}
.sidebar-footer:hover { background: var(--bg-hover); }
.sidebar-avatar {
    width: 28px; height: 28px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: var(--font-bold);
    flex-shrink: 0;
    position: relative;
    box-shadow: 0 0 0 2px var(--bg-sidebar);
}
.sidebar-avatar::after {
    content: ''; position: absolute; bottom: -1px; right: -1px;
    width: 8px; height: 8px; border-radius: var(--radius-full);
    background: var(--color-success);
    border: 2px solid var(--bg-secondary);
}
.sidebar-user-info {
    flex: 1; min-width: 0;
    opacity: 0; overflow: hidden;
    transition: opacity 0.15s ease;
}
.sidebar:hover .sidebar-user-info { opacity: 1; }
.sidebar-user-name {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sidebar-user-role { font-size: var(--text-xs); color: var(--text-muted); }
.sidebar-logout-btn {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: var(--radius-md);
    color: var(--text-muted); background: none; border: none; cursor: pointer;
    transition: all var(--transition-fast); text-decoration: none;
    opacity: 0; flex-shrink: 0;
    transition: opacity 0.15s ease, background var(--transition-fast), color var(--transition-fast);
}
.sidebar:hover .sidebar-logout-btn { opacity: 1; }
.sidebar-logout-btn:hover { background: var(--color-error-light); color: var(--color-error); }
.nav-badge {
    margin-left: auto; min-width: 18px; height: 18px;
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0 var(--space-1-5); border-radius: var(--radius-full);
    background: var(--color-error); color: var(--text-inverse);
    font-size: 10px; font-weight: var(--font-bold);
}
/* When collapsed, position badge on the icon */
.sidebar:not(:hover) .nav-badge {
    position: absolute; right: 2px; top: 2px;
    margin-left: 0; min-width: 14px; height: 14px; font-size: 9px;
    padding: 0 2px;
}

/* ── Main wrapper / Topbar ────────────────────────────────────── */
.main-wrapper { margin-left: 64px; min-height: 100vh; position: relative; z-index: 1; transition: margin-left 0.25s cubic-bezier(.4,0,.2,1); }
.topbar {
    background: color-mix(in srgb, var(--bg-topbar) 85%, transparent);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-primary);
    padding: 0 var(--space-6);
    height: 56px;
    display: flex; align-items: center;
    justify-content: space-between;
    position: sticky; top: 0; z-index: 50;
}
.topbar-title { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-primary); }
.topbar-actions { display: flex; align-items: center; gap: var(--space-3); }
.topbar-org {
    font-size: var(--text-sm); color: var(--text-muted);
    padding-right: var(--space-3);
    border-right: 1px solid var(--border-secondary);
}
.topbar-user { font-size: var(--text-sm); color: var(--text-secondary); }
.topbar-campus-form {
    display: flex; align-items: center; gap: var(--space-1-5);
    color: var(--text-muted);
}
.topbar-campus-select {
    font-size: var(--text-sm); color: var(--text-secondary);
    background: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md); padding: 4px 8px;
    cursor: pointer; outline: none;
    max-width: 220px;
}
.topbar-campus-select:hover { border-color: var(--border-primary); }
.topbar-campus-select:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(99,102,241,0.15); }
.topbar-campus-label {
    display: flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-sm); color: var(--text-muted);
}
.theme-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: none; border: 1px solid var(--border-secondary);
    cursor: pointer; color: var(--text-tertiary);
    transition: all var(--transition-fast);
}
.theme-toggle-btn:hover {
    background: var(--bg-hover); color: var(--text-primary);
    border-color: var(--border-primary);
}
.main-content {
    padding: var(--space-6);
    animation: fadeInUp 200ms ease-out both;
}

/* ── Flash messages / Alerts ──────────────────────────────────── */
.flash-success, .alert-success {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-success-border);
    background: var(--color-success-light);
    color: var(--badge-green-text);
    margin-bottom: var(--space-4); font-size: var(--text-sm);
}
.flash-error, .alert-error {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-error-border);
    background: var(--color-error-light);
    color: var(--badge-red-text);
    margin-bottom: var(--space-4); font-size: var(--text-sm);
}
.flash-warning, .alert-warning {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-warning-border);
    background: var(--color-warning-light);
    color: var(--badge-orange-text);
    margin-bottom: var(--space-4); font-size: var(--text-sm);
}
.flash-info, .alert-info {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-info-border);
    background: var(--color-info-light);
    color: var(--badge-blue-text);
    margin-bottom: var(--space-4); font-size: var(--text-sm);
}

/* ── Cards ────────────────────────────────────────────────────── */
.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-6); margin-bottom: var(--space-5);
    transition: box-shadow var(--transition-fast);
}
.card:hover { box-shadow: var(--shadow-sm); }
.card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: var(--space-4); margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
}
.card-title {
    font-size: var(--text-md); font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: flex; align-items: center; gap: var(--space-2);
}

/* ── Buttons ──────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: var(--space-2); padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm); font-weight: var(--font-medium);
    line-height: var(--leading-tight);
    border-radius: var(--radius-md);
    border: 1px solid transparent; cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none; white-space: nowrap;
    font-family: var(--font-family);
}
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-danger:focus-visible,
.btn-ghost:focus-visible,
.btn-sm:focus-visible,
.btn-lg:focus-visible,
.btn-icon:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}
.btn:active { transform: scale(0.98); }
.btn-primary {
    background: var(--accent-primary); color: var(--text-inverse);
    border-color: var(--accent-primary);
}
.btn-primary:hover {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    color: var(--text-inverse);
}
.btn-secondary {
    background: transparent; color: var(--text-secondary);
    border-color: var(--border-primary);
}
.btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-danger {
    background: var(--color-error); color: var(--text-inverse);
    border-color: var(--color-error);
}
.btn-danger:hover {
    background: var(--color-error-border); border-color: var(--color-error-border);
}
.btn-ghost {
    background: transparent; color: var(--text-secondary);
    border-color: transparent;
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); }
.btn-sm {
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs); border-radius: var(--radius-sm);
}
.btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-md);
}
.btn-icon {
    width: 36px; height: 36px; padding: 0;
    border-radius: var(--radius-md);
}
.btn:disabled,
.btn[disabled],
.sp-btn:disabled,
.sp-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ── Tables ───────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left; padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
    border-bottom: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}
td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm); color: var(--text-secondary);
    border-bottom: 1px solid var(--border-secondary);
}
tr:hover td { background: var(--bg-hover); }
tr:last-child td { border-bottom: none; }

/* ── Badges ───────────────────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-0-5) var(--space-2); border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    line-height: var(--leading-snug);
}
.badge-blue   { background: var(--badge-blue-bg);   color: var(--badge-blue-text); }
.badge-green  { background: var(--badge-green-bg);  color: var(--badge-green-text); }
.badge-red    { background: var(--badge-red-bg);     color: var(--badge-red-text); }
.badge-orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.badge-purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
.badge-gray   { background: var(--badge-gray-bg);   color: var(--badge-gray-text); }
.badge-cyan   { background: var(--badge-cyan-bg);   color: var(--badge-cyan-text); }
.badge-amber  { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.badge-indigo { background: var(--badge-purple-bg); color: var(--badge-purple-text); }

/* ── Forms ────────────────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }
.form-label {
    display: block; font-size: var(--text-sm);
    font-weight: var(--font-medium); color: var(--text-secondary);
    margin-bottom: var(--space-1-5);
}
.form-label--caps {
    font-size: var(--text-xs); font-weight: var(--font-bold);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
}
.form-input, .form-select, .form-textarea {
    width: 100%; max-width: 480px; padding: var(--space-2-5) var(--space-3);
    font-size: var(--text-base); color: var(--text-primary);
    background: var(--bg-input);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-family: var(--font-family);
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none; border-color: var(--border-focus);
    box-shadow: var(--shadow-focus);
}
.form-input:disabled, .form-select:disabled, .form-textarea:disabled {
    background: var(--bg-tertiary); color: var(--text-muted); cursor: not-allowed;
}
.form-input::placeholder { color: var(--text-muted); }
.form-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.form-error { font-size: var(--text-xs); color: var(--color-error); margin-top: var(--space-1); }
.form-label.required::after {
    content: " *";
    color: var(--color-error);
    font-weight: var(--font-semibold);
}
.form-input:invalid:not(:placeholder-shown),
.form-select:invalid:not(:placeholder-shown),
.form-textarea:invalid:not(:placeholder-shown) {
    border-color: var(--border-error);
}
.form-input:invalid:not(:placeholder-shown):focus,
.form-select:invalid:not(:placeholder-shown):focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.form-textarea { min-height: 100px; resize: vertical; max-width: 100%; }

/* ── Anti-FOUC: hide body until CSS loaded ────────────────────── */
body:not(.css-loaded) {
    opacity: 0;
}
body.css-loaded {
    opacity: 1;
    transition: opacity 0.15s ease-in;
}

/* ── Toast notification system ───────────────────────────────── */
@keyframes toastSlideIn  { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastSlideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }

.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9990;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    pointer-events: none;
    max-width: 420px;
    width: 100%;
}
.toast-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border-primary, #e5e7eb);
    background: var(--bg-elevated, #fff);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,.1));
    font-family: var(--font-family, 'Inter', sans-serif);
    font-size: var(--text-sm, 14px);
    color: var(--text-primary, #111);
    pointer-events: auto;
    opacity: 0;
    transform: translateX(100%);
}
.toast-item.toast-visible {
    animation: toastSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.toast-item.toast-leaving {
    animation: toastSlideOut 0.3s ease-in forwards;
}

/* Type-specific left border + icon color */
.toast-success {
    border-left: 4px solid var(--color-success, #22c55e);
}
.toast-success .toast-icon { color: var(--color-success, #22c55e); }

.toast-error {
    border-left: 4px solid var(--color-error, #ef4444);
}
.toast-error .toast-icon { color: var(--color-error, #ef4444); }

.toast-warning {
    border-left: 4px solid var(--color-warning, #f59e0b);
}
.toast-warning .toast-icon { color: var(--color-warning, #f59e0b); }

.toast-info {
    border-left: 4px solid var(--color-info, #3b82f6);
}
.toast-info .toast-icon { color: var(--color-info, #3b82f6); }

.toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-top: 1px;
}
.toast-message {
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}
.toast-dismiss {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: var(--space-2, 8px);
    color: var(--text-muted, #9ca3af);
    font-size: 18px;
    line-height: 1;
    transition: color 0.15s;
}
.toast-dismiss:hover {
    color: var(--text-primary, #111);
}

@media (max-width: 480px) {
    .toast-container {
        top: auto;
        bottom: 12px;
        right: 12px;
        left: 12px;
        max-width: none;
    }
}

/* ── Export dropdown ──────────────────────────────────────────── */
.export-btn-wrap { position: relative; display: inline-block; }
.export-dropdown {
    display: none; position: absolute; right: 0; top: 100%; margin-top: var(--space-1);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    z-index: 100; min-width: 150px; overflow: hidden;
}
.export-btn-wrap.open .export-dropdown { display: block; }
.export-dropdown button, .export-dropdown a {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; padding: var(--space-2) var(--space-4); text-align: left;
    background: none; border: none; font-size: var(--text-sm);
    color: var(--text-primary); cursor: pointer; text-decoration: none;
    font-family: var(--font-family);
    transition: background var(--transition-fast);
}
.export-dropdown button:hover, .export-dropdown a:hover { background: var(--bg-hover); }

/* ── Responsive (Admin layout) ────────────────────────────────── */
/* Collapse admin sidebar off-screen on mobile; slide in when .open */
@media (max-width: 768px) {
    .sidebar { width: 0; transform: translateX(-100%); transition: transform var(--transition-slow), width var(--transition-slow); }
    .sidebar.open { width: 240px; transform: translateX(0); }
    .sidebar:hover { width: 240px; }
    .main-wrapper { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   Layout: Student Portal (sp-* prefix)
   ═══════════════════════════════════════════════════════════════ */

/* ── Student Portal Sidebar (collapsible — 64px → 240px on hover) ── */
.sp-sidebar {
    position: fixed; top: 0; left: 0;
    width: 64px; height: 100vh;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-secondary);
    color: var(--text-secondary);
    display: flex; flex-direction: column; z-index: 100;
    transition: width 0.25s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.sp-sidebar:hover { width: 240px; }
/* Helper: hide text labels when sidebar is collapsed */
.sp-sidebar .sp-label {
    opacity: 0; white-space: nowrap;
    transition: opacity 0.15s ease;
    overflow: hidden;
}
.sp-sidebar:hover .sp-label { opacity: 1; }
.sp-logo {
    padding: var(--space-4) var(--space-4);
    font-size: var(--text-lg); font-weight: 800; color: var(--text-primary);
    border-bottom: 1px solid var(--border-secondary);
    letter-spacing: -0.2px;
    display: flex; align-items: center; gap: var(--space-3);
    white-space: nowrap; min-height: 56px;
}
.sidebar-logo-icon { flex-shrink: 0; }
.sp-logo span {
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sp-logo small {
    display: none; font-size: var(--text-xs); font-weight: var(--font-medium);
    color: var(--text-muted); margin-top: var(--space-0-5);
    letter-spacing: var(--tracking-wider); text-transform: uppercase;
}
.sp-sidebar:hover .sp-logo small { display: block; }
.sp-user-badge {
    margin: var(--space-2) var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-hover);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-secondary);
    display: flex; align-items: center; gap: var(--space-3);
    min-height: 48px; overflow: hidden;
}
.sp-avatar {
    width: 28px; height: 28px; border-radius: var(--radius-full);
    background: var(--accent-primary); color: var(--text-inverse);
    display: flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: var(--font-bold);
    flex-shrink: 0;
}
.sp-user-badge-info {
    overflow: hidden;
    opacity: 0; transition: opacity 0.15s ease;
}
.sp-sidebar:hover .sp-user-badge-info { opacity: 1; }
.sp-user-badge strong {
    display: block; color: var(--text-primary);
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-user-badge span { font-size: var(--text-xs); color: var(--text-muted); }
.sp-nav { flex: 1; padding: var(--space-2) var(--space-2); overflow-y: auto; overflow-x: hidden; }
.sp-nav a {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    color: var(--text-secondary); text-decoration: none;
    font-size: var(--text-sm); font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
    white-space: nowrap; position: relative;
}
.sp-nav a:hover { background: var(--bg-hover); color: var(--text-primary); }
.sp-nav a.active {
    background: var(--bg-selected); color: var(--accent-primary);
    font-weight: var(--font-semibold);
}
.sp-nav .nav-icon {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.sp-nav-section {
    padding: var(--space-3) var(--space-3) var(--space-1);
    font-size: var(--text-xs); text-transform: uppercase;
    letter-spacing: var(--tracking-widest); color: var(--text-muted);
    font-weight: var(--font-semibold);
    white-space: nowrap; overflow: hidden;
    opacity: 0; height: 0; padding: 0; margin: 0;
    transition: opacity 0.15s ease, height 0.2s ease, padding 0.2s ease;
}
.sp-sidebar:hover .sp-nav-section {
    opacity: 1; height: auto;
    padding: var(--space-3) var(--space-3) var(--space-1);
}
.sp-notif-badge {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    background: var(--color-error); color: var(--text-inverse);
    font-size: 10px; font-weight: var(--font-bold);
    min-width: 18px; height: 18px; border-radius: var(--radius-full);
    display: none; align-items: center; justify-content: center;
    padding: 0 var(--space-1);
}
/* When collapsed, position badge on the icon */
.sp-sidebar:not(:hover) .sp-notif-badge {
    right: -2px; top: 2px; transform: none;
    min-width: 14px; height: 14px; font-size: 9px;
}
.sp-footer {
    padding: var(--space-3) var(--space-3);
    border-top: 1px solid var(--border-secondary);
}
.sp-footer a {
    display: flex; align-items: center; gap: var(--space-2);
    color: var(--color-error); text-decoration: none;
    font-size: var(--text-sm); padding: var(--space-2) var(--space-1);
    transition: opacity var(--transition-fast);
    white-space: nowrap;
}
.sp-footer a:hover { opacity: 0.8; }
.sp-nav-danger { color: var(--color-error) !important; }
.sp-nav-danger:hover { background: color-mix(in srgb, var(--color-error) 8%, transparent) !important; }

/* ── Student Portal Main / Topbar ─────────────────────────────── */
.sp-main { margin-left: 64px; min-height: 100vh; position: relative; z-index: 1; transition: margin-left 0.25s cubic-bezier(.4,0,.2,1); }
.sp-topbar {
    background: var(--bg-topbar);
    border-bottom: 1px solid var(--border-primary);
    padding: 0 var(--space-6); height: 56px;
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 50;
}
.sp-topbar-title { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-primary); }
.sp-topbar-meta { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.sp-content {
    padding: var(--space-6);
    animation: fadeInUp 200ms ease-out both;
}

/* ── Student Portal Cards / Buttons / Badges ──────────────────── */
.sp-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-6);
    transition: box-shadow var(--transition-fast);
}
.sp-card:hover { box-shadow: var(--shadow-sm); }
.sp-card-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: var(--space-4); margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
}
.sp-card-title {
    font-size: var(--text-md); font-weight: var(--font-semibold);
    color: var(--text-primary);
    display: flex; align-items: center; gap: var(--space-2);
}
.sp-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md); font-size: var(--text-sm);
    font-weight: var(--font-medium); text-decoration: none;
    border: 1px solid transparent; cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}
.sp-btn:focus-visible,
.sp-btn-primary:focus-visible,
.sp-btn-secondary:focus-visible,
.sp-btn-sm:focus-visible {
    box-shadow: var(--shadow-focus);
    outline: none;
}
.sp-btn:active { transform: scale(0.98); }
.sp-btn-primary {
    background: var(--accent-primary); color: var(--text-inverse);
    border-color: var(--accent-primary);
}
.sp-btn-primary:hover {
    background: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
    color: var(--text-inverse);
}
.sp-btn-secondary {
    background: transparent; color: var(--text-secondary);
    border-color: var(--border-primary);
}
.sp-btn-secondary:hover { background: var(--bg-hover); color: var(--text-primary); }
.sp-btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); border-radius: var(--radius-sm); }
.sp-btn-lg {
    padding: var(--space-3) var(--space-6);
    font-size: var(--text-base);
}
.sp-badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 2px var(--space-2); border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.sp-badge-blue   { background: var(--badge-blue-bg);   color: var(--badge-blue-text); }
.sp-badge-green  { background: var(--badge-green-bg);  color: var(--badge-green-text); }
.sp-badge-red    { background: var(--badge-red-bg);     color: var(--badge-red-text); }
.sp-badge-orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.sp-badge-gray   { background: var(--badge-gray-bg);   color: var(--badge-gray-text); }
.sp-badge-purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
.sp-badge-cyan { background: var(--badge-cyan-bg); color: var(--badge-cyan-text); }
.sp-badge-amber { background: var(--badge-orange-bg); color: var(--badge-orange-text); }

/* ── Responsive (Student Portal) ──────────────────────────────── */
/* Collapse student-portal sidebar off-screen on mobile; slide in when .open */
@media (max-width: 768px) {
    .sp-sidebar { width: 0; transform: translateX(-100%); transition: transform var(--transition-slow), width var(--transition-slow); }
    .sp-sidebar.open { width: 240px; transform: translateX(0); }
    .sp-sidebar:hover { width: 240px; }
    .sp-main { margin-left: 0; }
}

/* ── Skeleton loading ─────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-hover) 50%, var(--bg-tertiary) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: var(--radius-sm);
}

/* ==========================================================================
   SHARED COMPONENTS (deduplicated from templates)
   ========================================================================== */

/* ── KPI Grid & Cards ────────────────────────────────────────── */
.kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
@media (max-width: 900px) { .kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .kpi-grid { grid-template-columns: 1fr; } }

.kpi-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    position: relative;
    animation: fadeInUp 400ms ease-out both;
}
.kpi-card:nth-child(1) { animation-delay: 0ms; }
.kpi-card:nth-child(2) { animation-delay: 50ms; }
.kpi-card:nth-child(3) { animation-delay: 100ms; }
.kpi-card:nth-child(4) { animation-delay: 150ms; }
.kpi-card:nth-child(5) { animation-delay: 200ms; }
.kpi-card:nth-child(6) { animation-delay: 250ms; }
.kpi-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

/* KPI card colored top borders */
.kpi-card-blue   { border-top: 3px solid var(--accent-primary); }
.kpi-card-green  { border-top: 3px solid var(--color-success); }
.kpi-card-purple { border-top: 3px solid var(--accent-secondary); }
.kpi-card-red    { border-top: 3px solid var(--color-error); }
.kpi-card-amber  { border-top: 3px solid var(--color-warning); }
.kpi-card-cyan   { border-top: 3px solid var(--badge-cyan-text); }
.kpi-card-orange { border-top: 3px solid var(--badge-orange-text); }

.kpi-icon {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--text-secondary);
}
.kpi-icon-blue   { background: var(--badge-blue-bg);   color: var(--badge-blue-text); }
.kpi-icon-green  { background: var(--badge-green-bg);  color: var(--badge-green-text); }
.kpi-icon-purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
.kpi-icon-red    { background: var(--badge-red-bg);    color: var(--badge-red-text); }
.kpi-icon-amber  { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.kpi-icon-cyan   { background: var(--badge-cyan-bg);   color: var(--badge-cyan-text); }
.kpi-icon-orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }

.kpi-label {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    color: var(--text-muted); margin-bottom: var(--space-1);
}
.kpi-value {
    font-size: var(--text-2xl); font-weight: var(--font-bold);
    line-height: 1; color: var(--text-primary);
}
.kpi-value-green  { color: var(--color-success); }
.kpi-value-purple { color: var(--accent-secondary); }
.kpi-value-red    { color: var(--color-error); }
.kpi-value-amber  { color: var(--color-warning); }
.kpi-value-cyan   { color: var(--badge-cyan-text); }
.kpi-sub {
    font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-0-5);
}

/* ── Coaching Notes ──────────────────────────────────────────── */
.note-item {
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-secondary);
}
.note-item:last-child { border-bottom: none; }
.note-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-1-5);
}
.note-author {
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--text-primary);
}
.note-date {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.note-content {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: var(--leading-relaxed);
}

/* ── Kanban Board ────────────────────────────────────────────── */
.kanban-wrapper { overflow-x: auto; padding-bottom: 12px; }
.kanban-board {
    display: flex;
    gap: var(--space-4);
    align-items: flex-start;
    min-height: 200px;
    padding: var(--space-1) var(--space-0-5) var(--space-3);
}
.kanban-column {
    flex: 0 0 260px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    transition: box-shadow var(--transition-fast);
}
.kanban-column--drag-over {
    box-shadow: 0 0 0 2px var(--accent-primary);
    background: var(--accent-primary-light);
}
.kanban-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-secondary);
}
.kanban-col-dot { width: 10px; height: 10px; border-radius: var(--radius-full); flex-shrink: 0; }
.kanban-col-title { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--text-primary); }
.kanban-col-count {
    font-size: var(--text-xs); font-weight: var(--font-bold);
    background: var(--bg-tertiary); color: var(--text-tertiary);
    border-radius: var(--radius-full); padding: 1px 7px;
}
.kanban-col-actions { display: flex; gap: var(--space-1); }
.kanban-icon-btn {
    background: none; border: none; cursor: pointer; font-size: var(--text-sm);
    padding: 3px 5px; border-radius: var(--radius-xs); opacity: 0.5;
    transition: opacity var(--transition-fast), background var(--transition-fast);
    color: var(--text-secondary);
}
.kanban-icon-btn:hover { opacity: 1; background: var(--bg-hover); }
.kanban-icon-btn--danger:hover { background: var(--color-error-light); color: var(--color-error); }
.kanban-card-list { display: flex; flex-direction: column; gap: var(--space-2); min-height: 40px; }
.kanban-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
    padding: var(--space-2) var(--space-3);
    cursor: grab;
    font-size: var(--text-sm);
}
.kanban-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.kanban-card--dragging { opacity: .5; transform: scale(.97); cursor: grabbing; }
.kanban-card-title { font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-1); }
.kanban-card-sub { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 3px; }
.kanban-card-date { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }
.kanban-card-date--overdue { color: var(--color-error); font-weight: var(--font-semibold); }
.kanban-card-desc { font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); line-height: var(--leading-relaxed); }
.kanban-card-actions {
    display: none; gap: var(--space-1); margin-top: var(--space-1-5);
    padding-top: var(--space-1-5); border-top: 1px solid var(--border-secondary);
}
.kanban-card:hover .kanban-card-actions { display: flex; }
.kanban-badge {
    display: inline-block; font-size: 10px; font-weight: var(--font-semibold);
    padding: 1px 6px; border-radius: var(--radius-full); margin-top: var(--space-1);
}
.kanban-badge--to_process { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.kanban-badge--interview_scheduled { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
.kanban-badge--interview_passed { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
.kanban-badge--rejected { background: var(--badge-red-bg); color: var(--badge-red-text); }
.kanban-badge--accepted { background: var(--badge-green-bg); color: var(--badge-green-text); }
.kanban-add-card-btn {
    width: 100%; margin-top: var(--space-2); background: none;
    border: 1px dashed var(--border-primary); border-radius: var(--radius-md);
    padding: 7px; font-size: var(--text-xs); color: var(--text-muted);
    cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast);
    font-family: var(--font-family);
}
.kanban-add-card-btn:hover { background: var(--bg-hover); color: var(--text-secondary); }
.kanban-add-col { flex: 0 0 200px; }
.kanban-add-col-btn {
    width: 100%; padding: var(--space-3); background: none;
    border: 2px dashed var(--border-primary); border-radius: var(--radius-lg);
    font-size: var(--text-sm); color: var(--text-muted); cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    min-height: 80px; font-family: var(--font-family);
}
.kanban-add-col-btn:hover {
    background: var(--bg-hover); color: var(--text-secondary);
    border-color: var(--text-muted);
}

/* ── Kanban Modal ────────────────────────────────────────────── */
.kanban-modal-overlay {
    position: fixed; inset: 0; background: var(--bg-overlay);
    display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.kanban-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 0; width: 440px; max-width: 95vw;
}
.kanban-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
}
.kanban-modal-header h3 {
    font-size: var(--text-md); font-weight: var(--font-bold);
    color: var(--text-primary); margin: 0;
}
.kanban-modal-close {
    background: none; border: none; font-size: var(--text-lg); cursor: pointer;
    color: var(--text-muted); padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.kanban-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.kanban-modal-body { padding: var(--space-5); }
.kanban-modal-footer {
    display: flex; gap: var(--space-2); justify-content: flex-end;
    padding: var(--space-4) var(--space-5) var(--space-5);
    border-top: 1px solid var(--border-secondary);
}
.kanban-form-field { display: flex; flex-direction: column; gap: var(--space-1-5); margin-bottom: var(--space-4); }
.kanban-form-field label {
    font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-secondary);
}
.kanban-form-field input,
.kanban-form-field textarea,
.kanban-form-field select {
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    padding: var(--space-2-5) var(--space-3); font-size: var(--text-sm);
    color: var(--text-primary); background: var(--bg-input);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    font-family: var(--font-family);
}
.kanban-form-field input:focus,
.kanban-form-field textarea:focus,
.kanban-form-field select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-focus);
}

/* ── Dashboard Components ────────────────────────────────────── */
.section-badge {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    padding: 2px var(--space-2);
    border-radius: var(--radius-full);
    background: var(--badge-red-bg); color: var(--badge-red-text);
}

.alert-item {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-left: 3px solid var(--border-primary);
    margin-bottom: var(--space-2);
    transition: all var(--transition-fast);
    animation: fadeInUp 300ms ease-out both;
}
.alert-item:nth-child(1)  { animation-delay: 0ms; }
.alert-item:nth-child(2)  { animation-delay: 30ms; }
.alert-item:nth-child(3)  { animation-delay: 60ms; }
.alert-item:nth-child(4)  { animation-delay: 90ms; }
.alert-item:nth-child(5)  { animation-delay: 120ms; }
.alert-item:nth-child(6)  { animation-delay: 150ms; }
.alert-item:nth-child(7)  { animation-delay: 180ms; }
.alert-item:nth-child(8)  { animation-delay: 210ms; }
.alert-item:nth-child(9)  { animation-delay: 240ms; }
.alert-item:nth-child(10) { animation-delay: 270ms; }
.alert-item:hover {
    background: var(--bg-hover);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}
.alert-item:last-child { margin-bottom: 0; }

/* Alert severity borders */
.alert-item-high   { border-left-color: var(--color-error); }
.alert-item-medium { border-left-color: var(--color-warning); }
.alert-item-low    { border-left-color: var(--accent-primary); }
.alert-item-drop   { border-left-color: var(--accent-secondary); }
.alert-item-none   { border-left-color: var(--border-primary); }

.alert-avatar {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-sm); font-weight: var(--font-bold);
    color: #fff; flex-shrink: 0;
}
.alert-name {
    font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary);
}
.alert-meta {
    font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px;
    display: flex; align-items: center; gap: var(--space-1);
}
.alert-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1); }
.alert-tag {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    padding: 2px var(--space-2); border-radius: var(--radius-full);
}
.tag-high   { background: var(--badge-red-bg);    color: var(--badge-red-text); }
.tag-medium { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.tag-low    { background: var(--badge-blue-bg);   color: var(--badge-blue-text); }
.tag-drop   { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
.tag-amber  { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.tag-red    { background: var(--badge-red-bg);    color: var(--badge-red-text); }

/* ── Action Grid ─────────────────────────────────────────────── */
.action-grid {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3); margin-top: var(--space-6);
}
@media (max-width: 700px) { .action-grid { grid-template-columns: 1fr; } }

.action-card {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    text-decoration: none;
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-base);
    position: relative;
    animation: fadeInUp 400ms ease-out both;
}
.action-card:nth-child(1) { animation-delay: 200ms; }
.action-card:nth-child(2) { animation-delay: 250ms; }
.action-card:nth-child(3) { animation-delay: 300ms; }
.action-card:nth-child(4) { animation-delay: 350ms; }
.action-card:hover {
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}
.action-card::after {
    content: '→'; position: absolute; right: var(--space-5);
    font-size: var(--text-lg); color: var(--text-muted);
    opacity: 0; transform: translateX(-4px);
    transition: all var(--transition-fast);
}
.action-card:hover::after {
    opacity: 1; transform: translateX(0);
}
.action-card-icon {
    width: 48px; height: 48px; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.action-card-title {
    font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary);
}
.action-card-sub {
    font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px;
}

/* ── Two-col & Summary Panel ─────────────────────────────────── */
.two-col { display: grid; grid-template-columns: 1fr 320px; gap: var(--space-5); align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.summary-panel {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.summary-header {
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-secondary);
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
}
.summary-header h3 {
    font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-primary);
    display: flex; align-items: center; gap: var(--space-2);
}
.summary-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-secondary);
    transition: background var(--transition-fast);
}
.summary-row:hover { background: var(--bg-hover); }
.summary-row:last-child { border-bottom: none; }
.summary-row-label {
    font-size: var(--text-sm); color: var(--text-secondary);
    display: flex; align-items: center; gap: var(--space-2);
}
.summary-row-value {
    font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-primary);
}
.dot {
    width: 10px; height: 10px; border-radius: var(--radius-full); display: inline-block;
}
.dot-green  { background: var(--color-success); box-shadow: 0 0 0 3px var(--badge-green-bg); }
.dot-blue   { background: var(--accent-primary); box-shadow: 0 0 0 3px var(--badge-blue-bg); }
.dot-red    { background: var(--color-error);   box-shadow: 0 0 0 3px var(--badge-red-bg); }
.dot-amber  { background: var(--color-warning); box-shadow: 0 0 0 3px var(--badge-orange-bg); }
.dot-purple { background: var(--accent-secondary); box-shadow: 0 0 0 3px var(--badge-purple-bg); }

/* ── Org Selector ────────────────────────────────────────────── */
.org-selector {
    background: var(--color-info-light);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
}
.org-selector-label {
    font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--badge-blue-text);
    display: flex; align-items: center; gap: var(--space-2);
}
.org-selector select {
    padding: var(--space-1-5) var(--space-2);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
    font-size: var(--text-sm); color: var(--text-primary);
    background: var(--bg-elevated); cursor: pointer;
    font-family: var(--font-family);
}
.org-selector-hint {
    font-size: var(--text-xs); color: var(--text-muted);
}

/* ── Page Header ─────────────────────────────────────────────── */
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-6);
}
.page-header-greeting {
    font-size: var(--text-md); color: var(--text-tertiary); margin-bottom: var(--space-1);
    display: flex; align-items: center; gap: var(--space-2);
}
.page-header-greeting strong { color: var(--text-primary); }
.page-header-greeting .icon {
    color: var(--color-warning);
}
.page-header h1 {
    font-size: var(--text-xl); font-weight: var(--font-bold);
    color: var(--text-primary); margin: 0;
    display: flex; align-items: center; gap: var(--space-2);
}
.page-header-actions {
    display: flex; gap: var(--space-2);
}

/* ── Placement Rate ──────────────────────────────────────────── */
.placement-rate-value {
    font-size: var(--text-3xl); font-weight: var(--font-bold);
    color: var(--color-success); line-height: 1;
    animation: fadeInUp 500ms ease-out 100ms both;
}
.placement-rate-unit {
    font-size: var(--text-lg); color: var(--color-success); font-weight: var(--font-bold);
}
.placement-rate-sub {
    font-size: var(--text-xs); color: var(--text-muted);
}

/* Dashboard page-level staggered animations */
.kpi-grid    { animation: fadeInUp 400ms ease-out both; }
.two-col     { animation: fadeInUp 400ms ease-out 100ms both; }
.action-grid { animation: fadeInUp 400ms ease-out 200ms both; }

/* ==========================================================================
   PAGE-SPECIFIC STYLES
   ========================================================================== */

/* ── Student Show ────────────────────────────────────────────── */
.student-actions {
    display: flex;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
.student-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
}
@media (max-width: 900px) {
    .student-grid { grid-template-columns: 1fr; }
}

.profile-table td {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    border-bottom: 1px solid var(--border-secondary);
}
.profile-table tr:last-child td { border-bottom: none; }
.profile-table td:first-child {
    color: var(--text-muted);
    width: 140px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
}
.profile-table td:last-child {
    color: var(--text-primary);
}

.coach-avatar {
    width: 32px; height: 32px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--font-bold);
    color: var(--text-inverse); flex-shrink: 0;
}
.coach-info-wrap {
    display: flex; align-items: center; gap: var(--space-3);
}
.coach-name {
    font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--text-primary);
}
.coach-role {
    font-size: var(--text-xs); color: var(--text-muted);
}
.links-list {
    display: flex; flex-direction: column; gap: var(--space-2);
}
.link-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
}
.skills-wrap {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
}
.empty-text {
    color: var(--text-muted); font-size: var(--text-sm);
}

/* ── Student Documents List ─────────────────────────────────── */
.doc-list {
    display: flex; flex-direction: column;
}
.doc-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-secondary);
    transition: background var(--transition-fast);
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: var(--bg-hover); margin: 0 calc(-1 * var(--space-4)); padding-left: var(--space-4); padding-right: var(--space-4); border-radius: var(--radius-md); }

.doc-row-icon {
    width: 40px; height: 40px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; flex-shrink: 0;
    background: var(--bg-tertiary);
}

.doc-row-info { flex: 1; min-width: 0; }
.doc-row-name {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-row-meta {
    font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px;
}

.doc-row-actions {
    display: flex; gap: var(--space-2); flex-shrink: 0;
}

/* ── Document Viewer Modal ──────────────────────────────────── */
.doc-viewer {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    width: 90vw; max-width: 960px;
    height: 85vh;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    animation: modalIn 200ms ease-out both;
}
.doc-viewer-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-primary);
    background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary));
    flex-shrink: 0;
}
.doc-viewer-title {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    flex: 1; min-width: 0;
}
.doc-viewer-body {
    flex: 1; display: flex; align-items: center; justify-content: center;
    overflow: auto; padding: var(--space-4);
    background: var(--bg-primary);
}
.doc-viewer-iframe {
    width: 100%; height: 100%; border: none; border-radius: var(--radius-md);
}
.doc-viewer-img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
}

@media (max-width: 600px) {
    .doc-viewer { width: 98vw; height: 90vh; border-radius: var(--radius-lg); }
    .doc-row-actions { flex-direction: column; }
}

/* ── Coach Profile Show ──────────────────────────────────────── */
.cp-grid {
    display: grid;
    grid-template-columns: 340px 1fr;
    gap: var(--space-6);
    align-items: start;
}
@media (max-width: 900px) {
    .cp-grid { grid-template-columns: 1fr; }
}

.cp-avatar {
    width: 72px; height: 72px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; font-weight: 700;
    color: var(--text-inverse); flex-shrink: 0;
    box-shadow: var(--shadow-md);
}
.cp-profile-header {
    display: flex; align-items: center; gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.cp-profile-name {
    font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-primary);
}
.cp-profile-badges {
    display: flex; align-items: center; gap: var(--space-1); margin-top: var(--space-1);
}

.cp-info-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-secondary);
    font-size: var(--text-sm); color: var(--text-secondary);
}
.cp-info-row:last-child { border-bottom: none; }
.cp-info-icon {
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); flex-shrink: 0;
}
.cp-info-label {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    color: var(--text-muted); width: 110px; flex-shrink: 0;
}
.cp-info-value { color: var(--text-primary); }
.cp-info-value a { color: var(--text-link); text-decoration: none; transition: color var(--transition-fast); }
.cp-info-value a:hover { color: var(--text-link-hover); }

/* Calendar Status */
.cp-calendar-box {
    display: flex; align-items: flex-start; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-secondary);
    background: var(--bg-secondary);
}
.cp-calendar-box--success { border-color: var(--color-success-border); background: var(--color-success-light); }
.cp-calendar-box--warning { border-color: var(--color-warning-border); background: var(--color-warning-light); }
.cp-calendar-icon {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-tertiary); color: var(--text-muted); flex-shrink: 0;
}
.cp-calendar-box--success .cp-calendar-icon { background: var(--color-success-light); color: var(--badge-green-text); }
.cp-calendar-box--warning .cp-calendar-icon { background: var(--color-warning-light); color: var(--badge-orange-text); }
.cp-calendar-title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-1); }
.cp-calendar-box--success .cp-calendar-title { color: var(--badge-green-text); }
.cp-calendar-detail { font-size: var(--text-sm); color: var(--text-secondary); }
.cp-calendar-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* Student Rows */
.cp-student-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3);
    border-bottom: 1px solid var(--border-secondary);
    border-radius: var(--radius-md); margin-bottom: var(--space-1);
    transition: background var(--transition-fast);
}
.cp-student-row:last-child { border-bottom: none; margin-bottom: 0; }
.cp-student-row:hover { background: var(--bg-hover); }
.cp-student-avatar {
    width: 36px; height: 36px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--font-bold);
    color: var(--text-secondary); flex-shrink: 0;
}
.cp-student-name { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--text-primary); }
.cp-student-meta {
    font-size: var(--text-xs); color: var(--text-muted);
    display: flex; align-items: center; gap: var(--space-1); margin-top: 2px;
}
.cp-student-status-active { color: var(--badge-green-text); font-weight: var(--font-medium); }
.cp-student-status-search { color: var(--text-muted); }
.cp-empty { text-align: center; padding: var(--space-8); color: var(--text-muted); font-size: var(--text-sm); }
.cp-empty-icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border-radius: var(--radius-full);
    background: var(--bg-tertiary); color: var(--text-muted);
    margin: 0 auto var(--space-3);
}

/* Tip Card */
.cp-tip-card { background: var(--color-success-light); border-color: var(--color-success-border); }
.cp-tip-title {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--badge-green-text); margin-bottom: var(--space-3);
    display: flex; align-items: center; gap: var(--space-2);
}
.cp-tip-list {
    font-size: var(--text-sm); color: var(--text-secondary);
    padding-left: var(--space-5); line-height: var(--leading-relaxed);
}
.cp-tip-list li { margin-bottom: var(--space-1); }
.cp-tip-footer { margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); }

/* Admin Banner */
.cp-admin-banner {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-5); margin-bottom: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-info-border);
    background: var(--color-info-light);
    font-size: var(--text-sm); color: var(--badge-blue-text);
}
.cp-admin-banner-icon {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--badge-blue-text);
}

/* ── Student Index ───────────────────────────────────────────── */
.share-bar {
    position: fixed;
    bottom: var(--space-6); left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    box-shadow: var(--shadow-xl);
    border-radius: var(--radius-xl);
    color: var(--text-primary);
    padding: var(--space-3) var(--space-5);
    display: flex; align-items: center; gap: var(--space-3);
    z-index: 200;
    transition: transform var(--transition-spring);
    font-size: var(--text-sm); white-space: nowrap;
}
.share-bar.visible { transform: translateX(-50%) translateY(0); }
.share-bar-label {
    display: flex; align-items: center; gap: var(--space-2);
    color: var(--text-secondary); font-weight: var(--font-medium);
}
.share-bar-count {
    background: var(--accent-primary); color: var(--text-inverse);
    font-weight: var(--font-bold); font-size: var(--text-xs);
    padding: 2px var(--space-2); border-radius: var(--radius-full);
    min-width: 22px; text-align: center;
}
.share-bar-btn {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--accent-primary); color: var(--text-inverse);
    border: none; border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    cursor: pointer; transition: background var(--transition-fast);
    font-family: var(--font-family);
}
.share-bar-btn:hover { background: var(--accent-primary-hover); }
.share-bar-cancel {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; color: var(--text-muted);
    cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm);
    transition: color var(--transition-fast), background var(--transition-fast);
}
.share-bar-cancel:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Share bar dropdowns (bulk actions) */
.share-bar-dropdown { position: relative; }
.share-bar-dropdown-menu {
    position: absolute; bottom: 100%; left: 0;
    min-width: 200px; background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    display: none; z-index: 100;
    max-height: 240px; overflow-y: auto;
    margin-bottom: var(--space-2);
}
.share-bar-dropdown.open .share-bar-dropdown-menu { display: block; }
.share-bar-dropdown-item {
    display: flex; align-items: center; gap: var(--space-2);
    width: 100%; padding: var(--space-2) var(--space-3);
    border: none; background: none; cursor: pointer;
    font-size: var(--text-sm); color: var(--text-primary);
    text-align: left; font-family: var(--font-family);
    transition: background var(--transition-fast);
}
.share-bar-dropdown-item:hover { background: var(--bg-hover); }

.student-cb { width: 16px; height: 16px; accent-color: var(--accent-primary); cursor: pointer; }
tr.row-selected td { background: var(--bg-selected) !important; }

.student-info-name { font-weight: var(--font-semibold); color: var(--text-primary); }
.student-info-email { font-size: var(--text-xs); color: var(--text-tertiary); }

.coach-cell { display: flex; align-items: center; gap: var(--space-2); }
.coach-calendar-icon { color: var(--text-muted); display: inline-flex; }
.coach-unassigned {
    display: flex; align-items: center; gap: var(--space-1);
    color: var(--color-error); font-size: var(--text-sm);
}

.empty-state-desc { font-size: var(--text-sm); color: var(--text-tertiary); }

/* ── Student Filters ─────────────────────────────────────────── */
.student-filters {
    overflow: hidden;
    transition: max-height 0.3s ease, padding-bottom 0.3s ease,
                margin-bottom 0.3s ease, opacity 0.25s ease,
                border-color 0.3s ease;
    max-height: 500px;
    opacity: 1;
    padding-bottom: var(--space-4);
    margin-bottom: var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
}
.student-filters.collapsed {
    max-height: 0;
    opacity: 0;
    padding-bottom: 0;
    margin-bottom: 0;
    border-bottom-color: transparent;
    pointer-events: none;
}
.student-filters-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--space-3);
    align-items: end;
}
.student-filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.student-filter-search {
    grid-column: span 2;
}
/* Stack student filter fields into a single column on mobile */
@media (max-width: 768px) {
    .student-filters-form {
        grid-template-columns: 1fr;
    }
    .student-filter-search {
        grid-column: span 1;
    }
}
.student-filter-label {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
}
.form-input--sm, .form-select--sm {
    padding: var(--space-2) var(--space-2-5);
    font-size: var(--text-sm);
    border-radius: var(--radius-md);
    max-width: 280px;
}
.student-filter-actions {
    display: flex;
    align-items: end;
    gap: var(--space-2);
    padding-bottom: 1px;
}
.filter-active-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-error);
    margin-left: var(--space-1);
    flex-shrink: 0;
}
.student-filters-active-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--badge-blue-bg);
    color: var(--badge-blue-text);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
}
.student-filters-clear-link {
    margin-left: auto;
    font-size: var(--text-xs);
    color: var(--badge-blue-text);
    text-decoration: underline;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
}
.student-filters-clear-link:hover {
    opacity: 1;
}

/* Share Modal */
.share-modal-overlay {
    position: fixed; inset: 0;
    background: var(--bg-overlay);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; pointer-events: none;
    transition: opacity var(--transition-base);
}
.share-modal-overlay.open { opacity: 1; pointer-events: all; }
.share-modal {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    padding: 0; width: 480px; max-width: 95vw;
    transform: scale(0.95); transition: transform var(--transition-base);
}
.share-modal-overlay.open .share-modal { transform: scale(1); }
.share-modal-header {
    padding: var(--space-5) var(--space-6) var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
    display: flex; align-items: center; justify-content: space-between;
}
.share-modal-header h2 {
    font-size: var(--text-lg); font-weight: var(--font-bold);
    color: var(--text-primary); margin: 0;
    display: flex; align-items: center; gap: var(--space-2);
}
.share-modal-close {
    display: inline-flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: var(--space-1); border-radius: var(--radius-sm);
    transition: background var(--transition-fast), color var(--transition-fast);
}
.share-modal-close:hover { background: var(--bg-hover); color: var(--text-primary); }
.share-modal-body { padding: var(--space-5) var(--space-6); }
.share-modal-field {
    display: flex; flex-direction: column; gap: var(--space-1-5); margin-bottom: var(--space-4);
}
.share-modal-preview {
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs); color: var(--text-tertiary);
    margin-bottom: var(--space-4);
}
.share-modal-preview strong { color: var(--text-secondary); }
.share-modal-hint {
    display: flex; align-items: flex-start; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1);
}
.share-modal-hint .icon { flex-shrink: 0; margin-top: 1px; }
.share-modal-footer {
    padding: var(--space-4) var(--space-6) var(--space-5);
    border-top: 1px solid var(--border-secondary);
    display: flex; gap: var(--space-3); justify-content: flex-end;
}
.actions-cell {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2);
}

/* ── Mail Compose Modal (Communication Interne étape 3/4) ────── */
/* Modale plus large que share-modal standard (textarea + preview + pills). */
.mail-compose-modal { width: 720px; max-width: 95vw; max-height: 90vh; display: flex; flex-direction: column; }
.mail-compose-body { overflow-y: auto; flex: 1 1 auto; }

.mail-compose-count {
    display: inline-block; margin-left: var(--space-2);
    background: var(--accent-primary-light); color: var(--accent-primary);
    border-radius: var(--radius-full);
    padding: 1px var(--space-2);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
}

.mail-compose-recipients {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    padding: var(--space-2);
    background: var(--bg-secondary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    min-height: 44px;
    max-height: 180px; overflow-y: auto;
}

.mail-compose-pill {
    display: inline-flex; align-items: center; gap: var(--space-1);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
    font-size: var(--text-xs); color: var(--text-primary);
    max-width: 100%;
}
.mail-compose-pill-name { font-weight: var(--font-semibold); }
.mail-compose-pill-email { color: var(--text-tertiary); font-weight: var(--font-normal); }
.mail-compose-pill-no-email { color: var(--color-warning, #B45309); font-style: italic; }
.mail-compose-pill-warning { border-color: var(--color-warning, #F59E0B); }
.mail-compose-pill-remove {
    display: inline-flex; align-items: center; justify-content: center;
    width: 20px; height: 20px; margin-left: var(--space-1);
    background: transparent; border: none; border-radius: var(--radius-full);
    color: var(--text-muted); cursor: pointer;
    font-size: 16px; line-height: 1;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.mail-compose-pill-remove:hover {
    background: var(--color-error-bg, #FEE2E2);
    color: var(--color-error, #DC2626);
}

.mail-compose-no-recipients {
    display: flex; align-items: center; gap: var(--space-2);
    margin-top: var(--space-2);
    color: var(--color-warning, #B45309); font-size: var(--text-xs);
}

.mail-compose-textarea {
    font-family: var(--font-mono, 'SF Mono', Menlo, Consolas, monospace);
    font-size: var(--text-sm); line-height: 1.5;
    min-height: 200px; resize: vertical;
}

.mail-compose-preview-wrap {
    margin-top: var(--space-3); margin-bottom: var(--space-3);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
}
.mail-compose-preview-header {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-secondary);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-size: var(--text-xs); color: var(--text-tertiary); font-weight: var(--font-semibold);
}
.mail-compose-preview {
    padding: var(--space-4); color: var(--text-primary);
    font-size: var(--text-sm); line-height: 1.6;
    max-height: 240px; overflow-y: auto;
}
.mail-compose-preview p { margin: 0 0 var(--space-2) 0; }
.mail-compose-preview a { color: var(--accent-primary); text-decoration: underline; }
.mail-compose-preview ul, .mail-compose-preview ol { padding-left: var(--space-5); }

.mail-compose-global-error {
    margin-top: var(--space-3); padding: var(--space-3) var(--space-4);
    background: var(--color-error-bg, #FEE2E2);
    border: 1px solid var(--color-error, #DC2626);
    border-radius: var(--radius-md);
    color: var(--color-error, #DC2626); font-size: var(--text-sm);
}

.form-error {
    margin-top: var(--space-1);
    color: var(--color-error, #DC2626); font-size: var(--text-xs);
}

/* ── Student Edit ────────────────────────────────────────────── */
.coach-select-wrap { position: relative; }
.coach-select-wrap::after {
    content: ''; position: absolute; right: var(--space-3); top: 50%;
    transform: translateY(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent; border-right: 5px solid transparent;
    border-top: 5px solid var(--text-muted); pointer-events: none;
}
.coach-select {
    appearance: none; -webkit-appearance: none;
    cursor: pointer; background: var(--bg-input);
}
.coach-badge {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    background: var(--accent-primary-light);
    border: 1px solid var(--accent-primary-muted);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-xs); color: var(--accent-primary);
    margin-top: var(--space-2);
}
.coach-badge-none {
    background: var(--bg-tertiary);
    border-color: var(--border-primary); color: var(--text-muted);
}
.self-assign-box {
    background: var(--color-success-light);
    border: 1.5px solid var(--color-success-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
}
.self-assign-label {
    display: flex; align-items: center; gap: var(--space-3);
    cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary);
}

/* ── Coach Profile Edit ──────────────────────────────────────── */
.profile-container { max-width: 720px; margin: 0 auto; }

.admin-banner {
    display: flex; gap: var(--space-3); align-items: center;
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-warning-border);
    background: var(--color-warning-light);
    color: var(--badge-orange-text); font-size: var(--text-sm);
}
.admin-banner .icon { flex-shrink: 0; }

/* Google Calendar */
.gcal-connect-box {
    background: var(--color-info-light);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-lg);
    padding: var(--space-5); margin-bottom: var(--space-5);
}
.gcal-connect-box .gcal-title {
    font-size: var(--text-md); font-weight: var(--font-bold);
    color: var(--badge-blue-text); margin-bottom: var(--space-2);
    display: flex; align-items: center; gap: var(--space-2);
}
.gcal-connect-box .gcal-description {
    font-size: var(--text-sm); color: var(--text-secondary);
    margin: 0 0 var(--space-4) 0; line-height: var(--leading-relaxed);
}
.gcal-success-box {
    background: var(--color-success-light);
    border: 1px solid var(--color-success-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5); margin-bottom: var(--space-5);
    display: flex; align-items: center; gap: var(--space-3);
}
.gcal-success-box .gcal-success-icon { color: var(--color-success); flex-shrink: 0; }
.gcal-success-box .gcal-success-title { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--badge-green-text); }
.gcal-success-box .gcal-success-subtitle { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-0-5); }

.fallback-summary {
    cursor: pointer; font-size: var(--text-sm); color: var(--text-muted);
    padding: var(--space-2) 0; user-select: none;
    display: flex; align-items: center; gap: var(--space-1-5);
}
.fallback-summary:hover { color: var(--text-secondary); }
.fallback-content { margin-top: var(--space-3); }

.calendar-preview {
    display: none;
    background: var(--color-info-light);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.calendar-preview-title {
    font-weight: var(--font-bold); color: var(--badge-blue-text);
    margin-bottom: var(--space-1-5);
    display: flex; align-items: center; gap: var(--space-1-5);
}
.calendar-preview a { color: var(--text-link); word-break: break-all; font-size: var(--text-xs); }

/* Help boxes */
.help-box {
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm); margin-bottom: var(--space-3);
}
.help-box-success {
    background: var(--color-success-light);
    border: 1px solid var(--color-success-border);
    color: var(--badge-green-text);
}
.help-box-neutral {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    color: var(--text-secondary);
}
.help-box strong { display: flex; align-items: center; gap: var(--space-1-5); }
.help-box ol, .help-box ul { margin-top: var(--space-2); padding-left: var(--space-4); line-height: 1.9; }
.help-box a { color: inherit; text-decoration: underline; }
.help-box code {
    font-family: var(--font-mono); font-size: var(--text-xs);
    background: var(--bg-tertiary); padding: 1px var(--space-1); border-radius: var(--radius-xs);
}

/* Calendar selector */
.gcal-selector-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3);
}
.gcal-selector-label {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-secondary); margin-bottom: var(--space-3);
    display: flex; align-items: center; gap: var(--space-2);
}
.gcal-selector-loading {
    color: var(--text-muted); font-size: var(--text-sm);
    display: flex; align-items: center; gap: var(--space-2);
}
.gcal-select {
    width: 100%; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    font-size: var(--text-base); color: var(--text-primary);
    background: var(--bg-input); margin-bottom: var(--space-3);
    font-family: var(--font-family);
    transition: border-color var(--transition-fast);
}
.gcal-select:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }

.disconnect-btn {
    background: none; border: none; color: var(--color-error);
    font-size: var(--text-xs); cursor: pointer; text-decoration: underline;
    padding: 0; font-family: var(--font-family);
    transition: opacity var(--transition-fast);
}
.disconnect-btn:hover { opacity: 0.8; }

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 540px) { .info-grid { grid-template-columns: 1fr; } }

.gcal-active-detail { flex: 1; }
.gcal-active-detail .active-name { font-size: var(--text-base); font-weight: var(--font-bold); color: var(--badge-green-text); }
.gcal-active-detail .active-calendar-name { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-0-5); }
.gcal-active-detail .active-hint { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-0-5); }

.actions-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-1); }
.form-actions { display: flex; gap: var(--space-3); margin-bottom: var(--space-8); }

/* ── Analytics ───────────────────────────────────────────────── */
.a-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4); margin-bottom: var(--space-6);
}
@media (max-width: 1100px) { .a-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .a-kpi-grid { grid-template-columns: 1fr; } }

.a-kpi {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-fast);
    padding: var(--space-5);
    display: flex; flex-direction: column; gap: var(--space-1);
}
.a-kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.a-kpi-header { display: flex; justify-content: space-between; align-items: center; }
.a-kpi-label {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
}
.a-kpi-icon {
    width: 36px; height: 36px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.a-kpi-icon--green  { background: var(--badge-green-bg);  color: var(--badge-green-text); }
.a-kpi-icon--blue   { background: var(--badge-blue-bg);   color: var(--badge-blue-text); }
.a-kpi-icon--purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
.a-kpi-icon--orange { background: var(--badge-orange-bg); color: var(--badge-orange-text); }

.a-kpi-value {
    font-size: var(--text-3xl); font-weight: var(--font-bold);
    line-height: 1.1; color: var(--text-primary);
}
.a-kpi-value--green  { color: var(--color-success); }
.a-kpi-value--blue   { color: var(--color-info); }
.a-kpi-value--purple { color: var(--accent-secondary); }
.a-kpi-value--orange { color: var(--color-warning); }
.a-kpi-sub { font-size: var(--text-xs); color: var(--text-muted); }
.a-kpi-bar {
    background: var(--bg-tertiary); border-radius: var(--radius-xs);
    height: 4px; margin-top: var(--space-1-5); overflow: hidden;
}
.a-kpi-bar-fill { height: 100%; border-radius: var(--radius-xs); }

.a-charts-2col {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-4); margin-bottom: var(--space-4);
}
@media (max-width: 900px) { .a-charts-2col { grid-template-columns: 1fr; } }

.a-chart-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-fast);
    padding: var(--space-5);
}
.a-chart-card:hover { box-shadow: var(--shadow-sm); }
.a-chart-title {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary); margin-bottom: var(--space-4);
    display: flex; align-items: center; gap: var(--space-2);
}
.a-chart-title .icon { color: var(--text-muted); }
.a-chart-wrap { position: relative; height: 220px; }

.a-bottom {
    display: grid; grid-template-columns: 1fr 320px;
    gap: var(--space-4); margin-bottom: var(--space-4);
}
@media (max-width: 900px) { .a-bottom { grid-template-columns: 1fr; } }

.a-chart-wrap-md { position: relative; height: 200px; }

.a-stat-table { border-collapse: collapse; width: 100%; }
.a-stat-table tr { border-bottom: 1px solid var(--border-secondary); }
.a-stat-table tr:last-child { border-bottom: none; }
.a-stat-table td { padding: var(--space-2) var(--space-1); font-size: var(--text-sm); }
.a-stat-label { color: var(--text-secondary); display: flex; align-items: center; gap: var(--space-2); }
.a-stat-value { font-weight: var(--font-bold); color: var(--text-primary); text-align: right; }
.a-dot {
    width: 8px; height: 8px; border-radius: var(--radius-full);
    display: inline-block; flex-shrink: 0;
}

.a-topbar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-6);
}
.a-topbar-left { display: flex; flex-direction: column; gap: var(--space-0-5); }
.a-topbar-sub { font-size: var(--text-xs); color: var(--text-muted); }

.a-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    height: 220px; color: var(--text-muted); font-size: var(--text-sm); gap: var(--space-2);
}
.a-empty .icon { color: var(--text-muted); opacity: 0.5; }

.a-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }
.a-legend-item {
    display: flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); color: var(--text-secondary);
}

.a-org-selector {
    background: var(--color-info-light);
    border: 1px solid var(--color-info-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-5); margin-bottom: var(--space-5);
    display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.a-org-selector-label {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--accent-primary);
    display: flex; align-items: center; gap: var(--space-2);
}
.a-org-selector-hint { font-size: var(--text-xs); color: var(--text-tertiary); }

/* ── Analytics — Compact variant ──────────────────────────────── */
.a-kpi--compact { padding: var(--space-3); }
.a-kpi--compact .a-kpi-value { font-size: var(--text-2xl); }
.a-kpi--compact .a-kpi-icon { width: 32px; height: 32px; }

/* ── Analytics — Hero charts (above the fold) ─────────────────── */
.a-charts-hero {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-4); margin-bottom: var(--space-4);
}
@media (max-width: 900px) { .a-charts-hero { grid-template-columns: 1fr; } }

.a-chart-card--compact { padding: var(--space-3); }
.a-chart-card--compact .a-chart-title { margin-bottom: var(--space-2); font-size: var(--text-xs); }

.a-chart-wrap--hero { position: relative; height: 180px; }
.a-chart-wrap--detail { position: relative; height: 200px; }

.a-empty--sm { height: 180px; font-size: var(--text-xs); }

/* ── Analytics — Collapsible sections (<details>) ─────────────── */
.a-details {
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    background: var(--bg-elevated);
    margin-bottom: var(--space-3);
    box-shadow: var(--shadow-xs);
    overflow: hidden;
}
.a-details-summary {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    cursor: pointer;
    user-select: none;
    list-style: none;
    transition: background var(--transition-fast);
}
.a-details-summary::-webkit-details-marker { display: none; }
.a-details-summary::marker { display: none; content: ''; }
.a-details-summary:hover { background: var(--bg-hover); }
.a-details-title {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary);
}
.a-details-title .icon { color: var(--text-muted); }
.a-chevron {
    display: flex; align-items: center;
    color: var(--text-muted);
    transition: transform var(--transition-base);
}
.a-details[open] .a-chevron { transform: rotate(180deg); }
.a-details-body { padding: var(--space-3) var(--space-4) var(--space-4); }
.a-details-body .a-charts-2col { margin-bottom: 0; }
.a-details-body .a-bottom { margin-bottom: 0; }

/* ── Analytics — Performance Coaching section ────────────────── */
.a-coaching-perf {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
    margin-bottom: var(--space-6);
}
.a-coaching-perf-title {
    font-size: var(--text-sm); font-weight: var(--font-bold);
    color: var(--text-primary);
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.a-coaching-perf-title .icon { color: var(--accent-primary); }
.a-coaching-perf-grid {
    display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: var(--space-4);
}
@media (max-width: 1100px) { .a-coaching-perf-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .a-coaching-perf-grid { grid-template-columns: 1fr; } }

.a-kpi--highlight {
    background: linear-gradient(135deg, var(--accent-primary-bg, rgba(37, 99, 235, 0.06)), var(--bg-elevated));
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-1);
}
.a-kpi--highlight:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.a-kpi-icon--accent { background: var(--badge-blue-bg); color: var(--accent-primary); }
.a-kpi-value--accent {
    font-size: var(--text-4xl); font-weight: var(--font-bold);
    line-height: 1; color: var(--accent-primary);
}
.a-kpi-sub--muted { color: var(--text-tertiary); font-size: 10px; }

/* ── Placement Editable Card ─────────────────────────────────── */
.card-header-actions {
    display: flex; align-items: center; gap: var(--space-2);
}
.btn-icon {
    width: 32px; height: 32px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-primary);
    background: var(--bg-elevated);
    color: var(--text-muted); cursor: pointer;
    transition: all var(--transition-fast);
}
.btn-icon:hover {
    background: var(--bg-hover); color: var(--accent-primary);
    border-color: var(--accent-primary);
}

.placement-edit-tabs {
    display: flex; gap: 0; border-bottom: 1px solid var(--border-primary);
    padding: 0 var(--space-4);
}
.placement-tab {
    padding: var(--space-2-5) var(--space-4);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    color: var(--text-muted); background: none; border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer; display: flex; align-items: center; gap: var(--space-1-5);
    transition: all var(--transition-fast);
}
.placement-tab:hover { color: var(--text-primary); }
.placement-tab.active {
    color: var(--accent-primary);
    border-bottom-color: var(--accent-primary);
}

.placement-form { padding: var(--space-4); }
.placement-form-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}
@media (max-width: 600px) { .placement-form-grid { grid-template-columns: 1fr; } }

.placement-form-actions {
    display: flex; justify-content: flex-end;
    gap: var(--space-2); margin-top: var(--space-4);
    padding-top: var(--space-3); border-top: 1px solid var(--border-secondary);
}

.placement-close-info {
    display: flex; align-items: flex-start; gap: var(--space-2);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
    background: var(--color-info-light, rgba(59, 130, 246, 0.06));
    border: 1px solid var(--color-info-border, rgba(59, 130, 246, 0.2));
    border-radius: var(--radius-md);
    font-size: var(--text-xs); color: var(--text-secondary);
    line-height: 1.5;
}
.placement-close-info .icon { color: var(--accent-primary); flex-shrink: 0; margin-top: 1px; }

.placement-empty-action { padding: var(--space-3) var(--space-4); }

/* Active placement card */
.pl-active-card { padding: var(--space-4); }
.pl-active-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-3);
}
.pl-company-name { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-primary); }
.pl-active-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
}
@media (max-width: 600px) { .pl-active-grid { grid-template-columns: 1fr; } }
.pl-detail { display: flex; flex-direction: column; gap: 2px; padding: var(--space-1-5) 0; }
.pl-detail-label {
    font-size: 11px; font-weight: var(--font-semibold);
    color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em;
    display: flex; align-items: center; gap: var(--space-1);
}
.pl-detail-label .icon { opacity: 0.6; }
.pl-detail-value { font-size: var(--text-sm); color: var(--text-primary); }
.pl-active-actions {
    display: flex; gap: var(--space-2); margin-top: var(--space-4);
    padding-top: var(--space-3); border-top: 1px solid var(--border-secondary);
}

/* Empty state */
.pl-empty {
    padding: var(--space-6) var(--space-4);
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2);
}
.pl-empty-icon { color: var(--text-muted); opacity: 0.4; }
.pl-empty-text { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--font-semibold); }
.pl-empty-legacy { font-size: var(--text-xs); color: var(--text-tertiary); }
.pl-add-wrap { padding: 0 var(--space-4) var(--space-4); }

/* History toggle */
.placement-history { border-top: 1px solid var(--border-secondary); }
.placement-history-toggle {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    color: var(--text-muted); cursor: pointer; user-select: none; list-style: none;
}
.placement-history-toggle::-webkit-details-marker { display: none; }
.placement-history-toggle::marker { display: none; content: ''; }
.placement-history-toggle:hover { color: var(--text-primary); background: var(--bg-hover); }

/* Timeline */
.pl-timeline { padding: 0 var(--space-4) var(--space-4) var(--space-6); position: relative; }
.pl-timeline::before {
    content: ''; position: absolute; left: 26px; top: 0; bottom: var(--space-4);
    width: 2px; background: var(--border-primary);
}
.pl-timeline-item {
    position: relative; padding: var(--space-2) 0 var(--space-3) var(--space-5);
}
.pl-timeline-dot {
    position: absolute; left: -8px; top: 10px;
    width: 10px; height: 10px; border-radius: var(--radius-full);
    background: var(--bg-elevated); border: 2px solid var(--text-muted);
}
.pl-timeline-header {
    display: flex; align-items: center; justify-content: space-between;
    font-size: var(--text-sm);
}
.pl-timeline-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.pl-timeline-reason {
    font-size: var(--text-xs); color: var(--text-secondary); margin-top: var(--space-1);
    display: flex; align-items: center; gap: var(--space-1); font-style: italic;
}
.pl-timeline-tutor {
    font-size: var(--text-xs); color: var(--text-tertiary); margin-top: 2px;
    display: flex; align-items: center; gap: var(--space-1);
}

/* Modal overlay — sits above everything including impersonation bar */
.pl-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex; align-items: center; justify-content: center;
    padding: var(--space-4);
}

/* Close modal */
.pl-close-modal {
    background: var(--bg-elevated); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl); width: 100%; max-width: 480px;
    overflow: hidden;
}
.pl-close-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-primary);
}
.pl-close-modal-title {
    font-size: var(--text-sm); font-weight: var(--font-bold);
    display: flex; align-items: center; gap: var(--space-2);
}
.pl-close-modal-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); }
.pl-close-modal-footer {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--border-primary);
    background: var(--bg-secondary);
}

/* ── Coaching Note Form (student show page) ──────────────────── */
.note-form {
    border-bottom: 1px solid var(--border-primary);
    padding: var(--space-4);
}
.note-form-body { display: flex; flex-direction: column; gap: var(--space-3); }
.note-textarea {
    width: 100%; resize: vertical;
    min-height: 80px; padding: var(--space-3);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    transition: border-color var(--transition-fast);
}
.note-textarea:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-bg, rgba(37, 99, 235, 0.1));
}
.note-form-tags {
    display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center;
}
.tag-checkbox {
    display: inline-flex; align-items: center; cursor: pointer;
}
.tag-checkbox input { display: none; }
.tag-checkbox-label {
    font-size: var(--text-xs); padding: var(--space-1) var(--space-2);
    border: 1px solid var(--border-primary); border-radius: var(--radius-full);
    color: var(--text-secondary); transition: all var(--transition-fast);
    user-select: none;
}
.tag-checkbox input:checked + .tag-checkbox-label {
    background: var(--badge-blue-bg); color: var(--accent-primary);
    border-color: var(--accent-primary);
}
.tag-checkbox-label:hover {
    background: var(--bg-hover);
}
.note-form-footer {
    display: flex; align-items: center; justify-content: space-between;
}
.note-form-hint {
    font-size: var(--text-xs); color: var(--text-tertiary); font-style: italic;
}
.note-title {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
}
.note-tags {
    display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-1);
}
.note-empty { padding: var(--space-4); }

/* ── Notifications ───────────────────────────────────────────── */
.notif-page {
    display: grid; grid-template-columns: 260px 1fr;
    gap: var(--space-5); align-items: start;
}
@media (max-width: 900px) {
    .notif-page { grid-template-columns: 1fr; }
    .notif-sidebar { display: none; }
}

.notif-sidebar {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-5);
    position: sticky; top: var(--space-5);
}
.notif-sidebar-title {
    font-size: var(--text-xs); font-weight: var(--font-bold);
    text-transform: uppercase; letter-spacing: var(--tracking-widest);
    color: var(--text-muted); margin-bottom: var(--space-3);
}
.filter-btn {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md); border: none;
    background: transparent; cursor: pointer;
    font-size: var(--text-sm); font-family: var(--font-family);
    color: var(--text-secondary); text-align: left;
    transition: all var(--transition-fast); margin-bottom: var(--space-1);
}
.filter-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.filter-btn.active { background: var(--bg-selected); color: var(--accent-primary); font-weight: var(--font-semibold); }
.filter-btn-label { display: flex; align-items: center; gap: var(--space-2); }
.filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 22px; padding: 0 var(--space-1-5);
    border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--font-bold);
    background: var(--badge-blue-bg); color: var(--badge-blue-text);
}
.filter-count.unread { background: var(--badge-red-bg); color: var(--badge-red-text); }
.filter-divider { height: 1px; background: var(--border-secondary); margin: var(--space-3) 0; }

.notif-main { display: flex; flex-direction: column; gap: var(--space-4); }

.notif-header {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4) var(--space-6);
    display: flex; align-items: center; justify-content: space-between;
}
.notif-header-left { display: flex; align-items: center; gap: var(--space-3); }
.notif-header-title { font-size: var(--text-md); font-weight: var(--font-bold); color: var(--text-primary); }
.notif-badge-unread {
    display: inline-flex; align-items: center; gap: var(--space-1);
    background: var(--badge-red-bg); color: var(--badge-red-text);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--font-bold);
}
.notif-all-read {
    font-size: var(--text-sm); color: var(--color-success); font-weight: var(--font-semibold);
    display: inline-flex; align-items: center; gap: var(--space-1);
}
.notif-header-actions { display: flex; gap: var(--space-2); }

.notif-list { display: flex; flex-direction: column; gap: var(--space-1-5); }
.notif-item {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    display: flex; align-items: flex-start; gap: var(--space-4);
    transition: all var(--transition-fast); position: relative;
}
.notif-item.unread { background: var(--bg-selected); border-left: 3px solid var(--accent-primary); }
.notif-item:hover { box-shadow: var(--shadow-sm); }

.notif-type-icon {
    width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-full);
    display: flex; align-items: center; justify-content: center;
}
.notif-type-icon.coaching_note_added { background: var(--color-info-light); color: var(--color-info); }
.notif-type-icon.job_lead_status_changed { background: var(--color-warning-light); color: var(--color-warning); }
.notif-type-icon.placement_success { background: var(--color-success-light); color: var(--color-success); }
.notif-type-icon.high_risk_alert { background: var(--color-error-light); color: var(--color-error); }
.notif-type-icon.profile_shared { background: var(--badge-green-bg); color: var(--badge-green-text); }
.notif-type-icon.default { background: var(--bg-tertiary); color: var(--text-tertiary); }

.notif-body { flex: 1; min-width: 0; }
.notif-message { font-size: var(--text-base); color: var(--text-primary); line-height: var(--leading-normal); font-weight: var(--font-normal, 400); }
.notif-item.unread .notif-message { font-weight: var(--font-semibold); }
.notif-meta { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-1-5); flex-wrap: wrap; }
.notif-date { font-size: var(--text-xs); color: var(--text-muted); display: inline-flex; align-items: center; gap: var(--space-1); }
.notif-type-tag { font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 2px var(--space-2); border-radius: var(--radius-full); }
.notif-type-tag.coaching_note_added { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
.notif-type-tag.job_lead_status_changed { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.notif-type-tag.placement_success { background: var(--badge-green-bg); color: var(--badge-green-text); }
.notif-type-tag.high_risk_alert { background: var(--badge-red-bg); color: var(--badge-red-text); }
.notif-type-tag.profile_shared { background: var(--badge-green-bg); color: var(--badge-green-text); }
.notif-type-tag.default { background: var(--badge-gray-bg); color: var(--badge-gray-text); }
.notif-read-date { font-size: var(--text-xs); color: var(--text-muted); }

.notif-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.btn-mark-read {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary); background: var(--bg-elevated);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    font-family: var(--font-family); color: var(--text-secondary);
    cursor: pointer; transition: all var(--transition-fast);
}
.btn-mark-read:hover {
    background: var(--color-success-light); border-color: var(--color-success-border);
    color: var(--badge-green-text);
}

.notif-group-title {
    font-size: var(--text-xs); font-weight: var(--font-bold);
    text-transform: uppercase; letter-spacing: var(--tracking-widest);
    color: var(--text-muted); margin-bottom: var(--space-2); padding: 0 var(--space-1);
}

.notif-empty {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-16) var(--space-10); text-align: center;
}
.notif-empty-icon {
    width: 56px; height: 56px; margin: 0 auto var(--space-4);
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full); background: var(--bg-tertiary); color: var(--text-muted);
}
.notif-empty-title { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-primary); margin-bottom: var(--space-2); }
.notif-empty-sub { font-size: var(--text-base); color: var(--text-muted); }

/* ── Share Coach Index ───────────────────────────────────────── */
.share-page-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: var(--space-5);
}
.share-page-count { font-size: var(--text-sm); color: var(--text-muted); font-weight: var(--font-medium); }

.share-grid { display: flex; flex-direction: column; gap: var(--space-3); }

.share-row {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    padding: var(--space-4) var(--space-5);
    display: flex; align-items: center; gap: var(--space-4);
    transition: box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.share-row:hover { box-shadow: var(--shadow-sm); border-color: var(--border-focus); }
.share-row--inactive { opacity: 0.55; }

.share-avatar {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--accent-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; color: var(--text-inverse);
}
.share-info { flex: 1; min-width: 0; }
.share-title {
    font-weight: var(--font-semibold); font-size: var(--text-base);
    color: var(--text-primary); margin-bottom: 2px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    display: flex; align-items: center; gap: var(--space-2);
}
.share-meta {
    font-size: var(--text-xs); color: var(--text-muted);
    display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-1);
}
.share-meta-item { display: inline-flex; align-items: center; gap: var(--space-1); }
.share-meta-item .icon { color: var(--text-muted); }

.share-stats { display: flex; gap: var(--space-4); align-items: center; flex-shrink: 0; }
.share-stat {
    text-align: center;
    background: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); min-width: 80px;
}
.share-stat-val { font-size: var(--text-xl); font-weight: var(--font-bold); color: var(--text-primary); line-height: 1; }
.share-stat-val--accent { color: var(--accent-primary); }
.share-stat-val--muted { font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--font-medium); }
.share-stat-lbl {
    font-size: 10px; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    margin-top: var(--space-0-5);
}
.share-actions { display: flex; gap: var(--space-1-5); flex-shrink: 0; flex-wrap: wrap; }

.share-empty { text-align: center; padding: var(--space-16) var(--space-10); }
.share-empty-icon { color: var(--text-muted); margin-bottom: var(--space-4); }
.share-empty-title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-secondary); margin-bottom: var(--space-2); }
.share-empty-sub {
    font-size: var(--text-sm); color: var(--text-muted);
    max-width: 400px; margin: 0 auto; line-height: var(--leading-relaxed);
}
@media (max-width: 1024px) {
    .share-row { flex-wrap: wrap; }
    .share-stats { width: 100%; justify-content: flex-start; }
    .share-actions { width: 100%; }
}

/* ── Share Coach Show ────────────────────────────────────────── */
.detail-grid {
    display: grid; grid-template-columns: 360px 1fr;
    gap: var(--space-6); align-items: start;
}
@media (max-width: 900px) { .detail-grid { grid-template-columns: 1fr; } }
.detail-sidebar { display: flex; flex-direction: column; gap: var(--space-5); }

.action-bar {
    display: flex; align-items: center; gap: var(--space-3);
    margin-bottom: var(--space-6); flex-wrap: wrap;
}

.info-row {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--border-secondary); font-size: var(--text-sm);
}
.info-row:last-child { border-bottom: none; padding-bottom: 0; }
.info-label {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    color: var(--text-muted); width: 140px; flex-shrink: 0; padding-top: 1px;
}
.info-label .icon { color: var(--text-muted); }
.info-value { color: var(--text-secondary); flex: 1; }
.info-value strong { color: var(--text-primary); font-weight: var(--font-semibold); }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-bottom: var(--space-4); }
.stat-box {
    background: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-lg); padding: var(--space-5) var(--space-4); text-align: center;
}
.stat-box-val { font-size: var(--text-3xl); font-weight: var(--font-bold); color: var(--text-primary); line-height: 1; }
.stat-box-val--accent { color: var(--accent-primary); }
.stat-box-lbl { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); }
.stat-box-lbl small { color: var(--text-muted); }
.stat-box-date { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-secondary); }
.stat-box-time { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }

.tracking-status {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--text-sm);
}
.tracking-status--pending { background: var(--bg-secondary); color: var(--text-muted); border: 1px solid var(--border-secondary); }
.tracking-status--viewed { background: var(--color-success-light); color: var(--badge-green-text); border: 1px solid var(--color-success-border); }

/* ── View history timeline ─────────────────────────────────────── */
.view-history {
    padding: var(--space-4);
    border-top: 1px solid var(--border-secondary);
}
.view-history-title {
    font-size: 12px; font-weight: 600; color: var(--text-secondary);
    display: flex; align-items: center; gap: var(--space-1-5);
    margin-bottom: var(--space-3);
}
.view-history-list {
    display: flex; flex-direction: column; gap: 0;
    max-height: 260px; overflow-y: auto;
}
.view-history-item {
    display: flex; align-items: flex-start; gap: var(--space-2-5);
    padding: var(--space-2) 0;
    position: relative;
}
.view-history-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 5px; top: 22px; bottom: -2px;
    width: 1px;
    background: var(--border-secondary);
}
.view-history-dot {
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--border-secondary);
    flex-shrink: 0;
    margin-top: 3px;
    position: relative;
    z-index: 1;
}
.view-history-dot--latest {
    background: var(--accent-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}
.view-history-content { flex: 1; min-width: 0; }
.view-history-date {
    font-size: 13px; font-weight: 500; color: var(--text-primary);
}
.view-history-meta {
    font-size: 11px; color: var(--text-muted);
    display: flex; align-items: center; gap: var(--space-1);
    margin-top: 1px;
}

.link-box {
    background: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
    display: flex; align-items: center; gap: var(--space-3);
}
.link-url { flex: 1; font-size: var(--text-xs); color: var(--accent-primary); word-break: break-all; font-family: var(--font-mono); }
.link-actions { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-3); }

.student-list { display: flex; flex-direction: column; gap: var(--space-1); }
.student-card {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-secondary); border-radius: var(--radius-md);
    background: var(--bg-elevated);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.student-card:hover { border-color: var(--border-primary); box-shadow: var(--shadow-sm); }
.student-avatar {
    width: 38px; height: 38px; border-radius: var(--radius-full);
    background: var(--accent-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--font-bold);
    color: var(--text-inverse); flex-shrink: 0;
}
.student-info { flex: 1; min-width: 0; }
.student-name { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--text-primary); }
.student-meta {
    font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px;
    display: flex; align-items: center; gap: var(--space-1-5); flex-wrap: wrap;
}
.student-meta .separator { color: var(--border-primary); }

/* ── Share Coach Edit ────────────────────────────────────────── */
.edit-back-bar {
    display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-6);
}
.edit-grid {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-5); align-items: start;
}
/* Stack edit-form grid into a single column on mobile */
@media (max-width: 768px) { .edit-grid { grid-template-columns: 1fr; } }

.edit-form-group { display: flex; flex-direction: column; gap: var(--space-4); }
.edit-field-label {
    display: block; font-size: var(--text-xs); font-weight: var(--font-semibold);
    color: var(--text-secondary); text-transform: uppercase;
    letter-spacing: var(--tracking-wider); margin-bottom: var(--space-1-5);
}
.edit-field-input {
    width: 100%; max-width: 480px; padding: var(--space-2-5) var(--space-3);
    font-size: var(--text-base); font-family: var(--font-family);
    color: var(--text-primary); background: var(--bg-input);
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}
.edit-field-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.edit-field-input::placeholder { color: var(--text-muted); }

.edit-warning {
    display: flex; align-items: flex-start; gap: var(--space-3);
    background: var(--color-warning-light);
    border: 1px solid var(--color-warning-border);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm); color: var(--badge-orange-text); line-height: var(--leading-normal);
}
.edit-warning-icon { flex-shrink: 0; margin-top: 1px; color: var(--color-warning); }

.select-counter {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    background: var(--accent-primary-light); color: var(--accent-primary);
    font-weight: var(--font-bold); padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full); font-size: var(--text-xs);
}
.student-search-wrap { position: relative; margin-bottom: var(--space-3); }
.student-search-icon {
    position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.student-search-input {
    width: 100%; padding: var(--space-2-5) var(--space-3) var(--space-2-5) var(--space-10);
    font-size: var(--text-sm); font-family: var(--font-family);
    color: var(--text-primary); background: var(--bg-input);
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    box-sizing: border-box;
}
.student-search-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.student-search-input::placeholder { color: var(--text-muted); }

.student-select-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    cursor: pointer; background: var(--bg-primary);
    border: 1px solid var(--border-secondary);
    transition: all var(--transition-fast);
}
.student-select-row:hover { background: var(--bg-hover); border-color: var(--border-primary); }
.student-select-row.selected { background: var(--accent-primary-light); border-color: var(--accent-primary-muted); }
.student-select-row input[type="checkbox"] {
    width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--accent-primary); cursor: pointer;
}
.student-avatar-sm {
    width: 32px; height: 32px; border-radius: var(--radius-full);
    background: var(--accent-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--font-bold);
    color: var(--text-inverse); flex-shrink: 0;
}
.student-empty { text-align: center; padding: var(--space-6); color: var(--text-muted); font-size: var(--text-sm); }
.edit-actions {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--space-3); margin-top: var(--space-6);
}

/* ── Super Admin: Organization Index ─────────────────────────── */
.badge-purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
.org-page-header { display: flex; align-items: center; gap: var(--space-3); color: var(--text-primary); }
.org-page-header-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: var(--accent-primary-light); color: var(--accent-primary);
}
.org-count { font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--text-muted); margin-left: var(--space-2); }
.org-empty { text-align: center; padding: var(--space-8) var(--space-4); color: var(--text-muted); font-size: var(--text-sm); }
.org-empty-icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--radius-full);
    background: var(--bg-tertiary); color: var(--text-muted);
    margin: 0 auto var(--space-3);
}
.org-name-cell { display: flex; align-items: center; gap: var(--space-2); }
.org-slug {
    font-family: var(--font-mono); font-size: var(--text-xs);
    padding: 2px var(--space-2); background: var(--bg-tertiary);
    border-radius: var(--radius-sm); color: var(--text-tertiary);
}
.org-user-count { font-weight: var(--font-semibold); color: var(--text-primary); }
.org-user-label { color: var(--text-muted); font-size: var(--text-xs); margin-left: var(--space-1); }
.org-date { color: var(--text-muted); font-size: var(--text-xs); }
.org-actions { display: flex; align-items: center; gap: var(--space-1-5); justify-content: flex-end; flex-wrap: wrap; }
.org-row-inactive { opacity: 0.55; }
.th-actions { text-align: right; }

/* ── Super Admin: Organization Show ──────────────────────────── */
.org-info-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--space-5); margin-bottom: var(--space-2);
}
.org-info-item { display: flex; flex-direction: column; gap: var(--space-1); }
.org-info-item-label {
    display: block; font-size: var(--text-xs); text-transform: uppercase;
    letter-spacing: var(--tracking-widest); color: var(--text-muted); font-weight: var(--font-semibold);
}
.org-info-item-value { font-size: var(--text-base); font-weight: var(--font-medium); color: var(--text-primary); }
.org-info-slug {
    display: inline-block; background: var(--bg-secondary);
    padding: 2px var(--space-2); border-radius: var(--radius-sm);
    font-family: var(--font-mono); font-size: var(--text-sm);
    color: var(--text-secondary); border: 1px solid var(--border-secondary);
}
.org-header-actions { display: flex; gap: var(--space-2); align-items: center; }
.org-protected-label {
    font-size: var(--text-xs); color: var(--text-muted); font-style: italic;
    display: flex; align-items: center; gap: var(--space-1);
}
.org-users-empty { text-align: center; padding: var(--space-10) var(--space-6); color: var(--text-muted); }
.org-users-empty-icon {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; margin: 0 auto var(--space-4);
    border-radius: var(--radius-full); background: var(--bg-secondary); color: var(--text-muted);
}
.org-users-empty-title { font-weight: var(--font-semibold); color: var(--text-secondary); margin-bottom: var(--space-1); }
.org-users-empty-desc { font-size: var(--text-sm); color: var(--text-muted); }
.org-user-row-inactive { opacity: 0.55; }
.org-table-actions { display: flex; gap: var(--space-1-5); flex-wrap: wrap; justify-content: flex-end; }
.org-logo-link {
    display: inline-flex; align-items: center; gap: var(--space-1);
    color: var(--text-link); font-size: var(--text-sm); font-weight: var(--font-medium);
    text-decoration: none; transition: color var(--transition-fast);
}
.org-logo-link:hover { color: var(--text-link-hover); }
.org-breadcrumb { margin-bottom: var(--space-5); }

/* ── Super Admin: Organization Edit ──────────────────────────── */
.edit-back-link { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.edit-card { max-width: 680px; }
.edit-card .card-header { padding-bottom: var(--space-4); margin-bottom: 0; }
.edit-card-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: var(--badge-blue-bg); color: var(--badge-blue-text); flex-shrink: 0;
}
.edit-form { display: grid; gap: var(--space-5); padding-top: var(--space-5); }
.edit-form-label {
    display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-secondary);
}
.edit-form-label .required-mark { color: var(--color-error); }
.edit-form-label .label-hint { font-weight: var(--font-normal); color: var(--text-muted); font-size: var(--text-xs); margin-left: var(--space-1-5); }
.edit-form-input {
    width: 100%; max-width: 480px; padding: var(--space-2-5) var(--space-3);
    background: var(--bg-input); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); font-size: var(--text-sm);
    color: var(--text-primary); font-family: var(--font-family);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.edit-form-input:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--shadow-focus); }
.edit-form-input::placeholder { color: var(--text-muted); }
.edit-form-input--mono { font-family: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', monospace; }
.edit-form-hint {
    display: flex; align-items: center; gap: var(--space-1-5);
    font-size: var(--text-xs); color: var(--text-muted);
}
.edit-form-hint--warning { color: var(--badge-orange-text); }
.edit-form-hint a { color: var(--accent-primary); text-decoration: none; }
.edit-form-hint a:hover { text-decoration: underline; }
.edit-checkbox-label {
    display: inline-flex; align-items: center; gap: var(--space-3);
    cursor: pointer; font-size: var(--text-sm); color: var(--text-primary); user-select: none;
    padding: var(--space-3); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); background: var(--bg-input);
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.edit-checkbox-label:hover { border-color: var(--border-focus); background: var(--bg-hover); }
.edit-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-primary); flex-shrink: 0; }
.edit-checkbox-text strong { font-weight: var(--font-semibold); }
.edit-checkbox-text span { color: var(--text-muted); }

/* Scraping config form extras */
.edit-form-separator {
    border: none; border-top: 2px solid var(--border-primary);
    margin: var(--space-6) 0 var(--space-4);
}
.edit-form-section-title {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-base); font-weight: var(--font-semibold);
    color: var(--text-primary); margin: 0 0 var(--space-4);
}
.edit-form-section-title .icon { color: var(--accent-primary); }
.edit-checkbox-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-2);
}
.edit-checkbox-grid--platforms { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.edit-checkbox-label--inline {
    padding: var(--space-2) var(--space-3); font-size: var(--text-xs);
}
.edit-checkbox-label--inline .offer-platform-badge {
    font-size: 10px; padding: 2px 6px; border-radius: var(--radius-sm);
    font-weight: var(--font-semibold); display: inline-block;
    line-height: 1.4; white-space: nowrap;
}

/* ── Super Admin: User Edit ──────────────────────────────────── */
.edit-user-back { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.edit-user-card { max-width: 680px; }
.edit-user-card .card-header { gap: var(--space-3); }
.edit-user-card .card-title .icon { color: var(--accent-primary); }
.user-info-bar {
    display: flex; flex-wrap: wrap; gap: var(--space-5);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md); margin-bottom: var(--space-6);
}
.user-info-item { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-tertiary); }
.user-info-item .icon { color: var(--text-muted); flex-shrink: 0; }
.user-info-label { font-weight: var(--font-semibold); color: var(--text-primary); }
.user-info-empty { color: var(--text-muted); font-style: italic; }
.edit-user-form-grid { display: grid; gap: var(--space-5); }
.edit-user-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.edit-user-field label {
    display: block; font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-secondary); margin-bottom: var(--space-1-5);
}
.edit-user-field .field-required { color: var(--color-error); }
.edit-user-field .field-optional { font-weight: var(--font-normal); color: var(--text-muted); font-size: var(--text-xs); margin-left: var(--space-1-5); }
.edit-user-checkbox {
    display: inline-flex; align-items: center; gap: var(--space-3);
    cursor: pointer; font-size: var(--text-sm); user-select: none;
}
.edit-user-checkbox input[type="checkbox"] { width: 18px; height: 18px; cursor: pointer; accent-color: var(--accent-primary); flex-shrink: 0; }
.edit-user-checkbox strong { font-weight: var(--font-semibold); color: var(--text-primary); }
.edit-user-checkbox span { color: var(--text-secondary); }
.edit-user-blocked-banner {
    display: flex; align-items: center; gap: var(--space-3);
    margin-top: var(--space-2); padding: var(--space-3) var(--space-4);
    background: var(--color-error-light); border: 1px solid var(--color-error-border);
    border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--badge-red-text);
}
.edit-user-blocked-banner .icon { flex-shrink: 0; color: var(--color-error); }
.edit-user-actions {
    display: flex; align-items: center; gap: var(--space-3);
    padding-top: var(--space-5); border-top: 1px solid var(--border-secondary);
}
.edit-user-actions .btn { gap: var(--space-2); }
@media (max-width: 600px) {
    .edit-user-row { grid-template-columns: 1fr; }
    .user-info-bar { flex-direction: column; gap: var(--space-3); }
}

/* ── Super Admin: User New ───────────────────────────────────── */
.sa-user-new-back { display: inline-flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-5); }
.sa-user-new-back .icon { transition: transform var(--transition-fast); }
.sa-user-new-back:hover .icon { transform: translateX(-2px); }
.sa-user-new-container { max-width: 680px; }
.sa-user-new-header-icon {
    display: flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-md);
    background: var(--accent-primary-light); color: var(--accent-primary); flex-shrink: 0;
}
.sa-user-new-form-grid { display: grid; gap: var(--space-5); }
.sa-user-new-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
@media (max-width: 480px) { .sa-user-new-row { grid-template-columns: 1fr; } }
.sa-user-new-field-icon {
    position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
    display: flex; align-items: center; transition: color var(--transition-fast);
}
.sa-user-new-input-wrap { position: relative; }
.sa-user-new-input-wrap .form-input,
.sa-user-new-input-wrap .form-select { padding-left: var(--space-10); }
.sa-user-new-input-wrap:focus-within .sa-user-new-field-icon { color: var(--accent-primary); }
.sa-user-new-checkbox-wrap {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4); background: var(--bg-secondary);
    border: 1px solid var(--border-secondary); border-radius: var(--radius-md);
    cursor: pointer; transition: border-color var(--transition-fast), background var(--transition-fast);
}
.sa-user-new-checkbox-wrap:hover { border-color: var(--border-primary); background: var(--bg-tertiary); }
.sa-user-new-checkbox-wrap input[type="checkbox"] {
    width: 18px; height: 18px; margin-top: 1px; cursor: pointer;
    accent-color: var(--accent-primary); flex-shrink: 0;
}
.sa-user-new-checkbox-label {
    font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); user-select: none;
}
.sa-user-new-checkbox-label strong { color: var(--text-primary); font-weight: var(--font-semibold); }
.sa-user-new-actions {
    display: flex; align-items: center; gap: var(--space-3);
    padding-top: var(--space-5); border-top: 1px solid var(--border-secondary);
}
.sa-user-new-required { color: var(--color-error); font-weight: var(--font-medium); }

/* ==========================================================================
   STUDENT PORTAL PAGES
   ========================================================================== */

/* ── Student Portal: Dashboard ───────────────────────────────── */
/* KPI override for portal (auto-fit grid + colored top border) */
.kpi-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
}
.kpi-card.kpi-blue::before    { background: var(--color-info); }
.kpi-card.kpi-green::before   { background: var(--color-success); }
.kpi-card.kpi-orange::before  { background: var(--color-warning); }
.kpi-card.kpi-red::before     { background: var(--color-error); }
.kpi-card.kpi-purple::before  { background: var(--accent-secondary); }
.kpi-card.kpi-gray::before    { background: var(--text-muted); }

.sp-two-col {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-5); margin-bottom: var(--space-6);
}
@media (max-width: 900px) { .sp-two-col { grid-template-columns: 1fr; } }

.sp-three-col {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-5); margin-bottom: var(--space-6);
}
@media (max-width: 1100px) { .sp-three-col { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .sp-three-col { grid-template-columns: 1fr; } }

/* Coach + Agenda block (dark themed — uses scoped custom properties) */
.coach-agenda-block {
    --cab-bg: #1E293B;
    --cab-text: #F1F3F9;
    --cab-text-muted: rgba(255,255,255,0.5);
    --cab-text-secondary: rgba(255,255,255,0.65);
    --cab-text-link: rgba(255,255,255,0.75);
    --cab-border: rgba(255,255,255,0.06);
    --cab-border-light: rgba(255,255,255,0.12);
    --cab-overlay: rgba(255,255,255,0.15);
    --cab-overlay-hover: rgba(255,255,255,0.2);
    --cab-success-muted: rgba(34,197,94,0.15);
    --cab-success-border: rgba(34,197,94,0.35);
    --cab-success-text: #bbf7d0;
    --cab-link-accent: #93c5fd;

    background: var(--cab-bg);
    border-radius: var(--radius-lg);
    padding: var(--space-5) var(--space-6);
    color: var(--cab-text);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--cab-border);
}
.coach-header-compact {
    display: flex; align-items: center; gap: var(--space-3);
    flex-wrap: wrap; margin-bottom: var(--space-4);
}
.coach-section-label {
    font-size: var(--text-xs); font-weight: var(--font-bold);
    letter-spacing: 1px; text-transform: uppercase;
    color: var(--cab-text-muted); margin-bottom: var(--space-3);
}
.coach-info-compact { flex: 1; min-width: 0; }
.coach-email-link {
    font-size: var(--text-sm); color: rgba(255,255,255,0.75);
    text-decoration: none; display: flex; align-items: center; gap: var(--space-1);
}
.coach-email-link:hover { color: var(--cab-text); }
.coach-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; margin-left: auto; }
.coach-btn-calendar {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--color-success); color: var(--text-inverse);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm); font-weight: var(--font-bold);
    text-decoration: none; border: none; cursor: pointer;
    transition: background var(--transition-fast); white-space: nowrap;
}
.coach-btn-calendar:hover { background: var(--color-success-border); }
.coach-btn-disabled {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.45);
    padding: var(--space-2) var(--space-4); border-radius: var(--radius-md);
    font-size: var(--text-sm); font-weight: var(--font-semibold); cursor: not-allowed;
}
.coach-no-coach {
    background: rgba(255,255,255,0.05);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: var(--radius-lg); padding: var(--space-5);
    text-align: center; color: rgba(255,255,255,0.6); font-size: var(--text-sm);
}
.coach-agenda-divider { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 0 0 var(--space-4) 0; }

.agenda-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) var(--space-3);
    background: rgba(0,0,0,0.3);
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font-size: var(--text-xs); color: rgba(255,255,255,0.75);
}
.agenda-bar a { color: var(--cab-link-accent); text-decoration: none; font-size: var(--text-xs); }
.agenda-bar a:hover { text-decoration: underline; }
.agenda-iframe-wrap { border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
.agenda-iframe { width: 100%; height: 620px; border: none; display: block; background: var(--bg-primary); }

/* RDV Modal */
.rdv-backdrop {
    display: none; position: fixed; inset: 0;
    background: var(--bg-overlay); z-index: 1000;
    align-items: center; justify-content: center;
}
.rdv-backdrop.open { display: flex; }
.rdv-modal {
    background: var(--bg-elevated); border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
    padding: var(--space-8) var(--space-6); max-width: 460px; width: 92%;
    animation: modalIn .2s ease-out;
}
@keyframes modalIn { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }
.rdv-title {
    font-size: var(--text-lg); font-weight: var(--font-bold);
    color: var(--text-primary); margin-bottom: var(--space-1);
    display: flex; align-items: center; gap: var(--space-2);
}
.rdv-sub { font-size: var(--text-sm); color: var(--text-tertiary); margin-bottom: var(--space-5); line-height: var(--leading-normal); }
.rdv-label {
    display: block; font-size: var(--text-xs); font-weight: var(--font-semibold);
    color: var(--text-tertiary); margin-bottom: var(--space-1);
    text-transform: uppercase; letter-spacing: 0.4px;
}
.rdv-input {
    width: 100%; padding: var(--space-2) var(--space-3);
    border: 1.5px solid var(--border-primary); border-radius: var(--radius-md);
    font-size: var(--text-sm); color: var(--text-primary);
    background: var(--bg-input); margin-bottom: var(--space-3);
    box-sizing: border-box; font-family: var(--font-family);
}
.rdv-input:focus { outline: none; border-color: var(--accent-primary); box-shadow: var(--shadow-focus); }
.rdv-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.rdv-btn-ok {
    flex: 1; padding: var(--space-3);
    background: var(--color-success); color: var(--text-inverse);
    border: none; border-radius: var(--radius-md);
    font-size: var(--text-sm); font-weight: var(--font-bold);
    cursor: pointer; transition: background var(--transition-fast);
    font-family: var(--font-family);
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
}
.rdv-btn-ok:hover { background: var(--color-success-border); }
.rdv-btn-no {
    padding: var(--space-3) var(--space-5);
    background: var(--bg-tertiary); color: var(--text-secondary);
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    font-size: var(--text-sm); cursor: pointer; font-family: var(--font-family);
    transition: background var(--transition-fast);
}
.rdv-btn-no:hover { background: var(--bg-hover); }

.rdv-planned-badge {
    display: flex; align-items: center; gap: var(--space-2);
    background: rgba(34,197,94,0.15); border: 1px solid rgba(34,197,94,0.35);
    border-radius: var(--radius-md); padding: var(--space-2) var(--space-3);
    font-size: var(--text-sm); color: var(--cab-success-text); margin-top: var(--space-2);
}

/* Alerts */
.sp-alert {
    border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5);
    display: flex; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-5);
}
.sp-alert.warning { background: var(--color-warning-light); border: 1px solid var(--color-warning-border); border-left: 4px solid var(--color-warning); }
.sp-alert.danger { background: var(--color-error-light); border: 1px solid var(--color-error-border); border-left: 4px solid var(--color-error); }
.sp-alert.info { background: var(--color-info-light); border: 1px solid var(--color-info-border); border-left: 4px solid var(--color-info); }
.sp-alert-icon { flex-shrink: 0; color: inherit; }
.sp-alert-body { flex: 1; }
.sp-alert-title { font-weight: var(--font-bold); font-size: var(--text-sm); margin-bottom: var(--space-1); }
.sp-alert.warning .sp-alert-title { color: var(--badge-orange-text); }
.sp-alert.danger .sp-alert-title { color: var(--badge-red-text); }
.sp-alert.info .sp-alert-title { color: var(--badge-blue-text); }
.sp-alert-text { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--leading-normal); }

/* Placement compact card */
.placement-compact {
    background: var(--bg-elevated); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-xs);
    transition: box-shadow var(--transition-fast);
    padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3);
}
.placement-compact:hover { box-shadow: var(--shadow-sm); }
.placement-compact-header { display: flex; align-items: center; justify-content: space-between; }
.placement-compact-title {
    font-size: var(--text-sm); font-weight: var(--font-bold);
    display: flex; align-items: center; gap: var(--space-2); color: var(--text-primary);
}
.placement-company { font-size: var(--text-lg); font-weight: var(--font-bold); color: var(--text-primary); }
.placement-dates { font-size: var(--text-xs); color: var(--text-tertiary); }
.progress-bar-track { height: 8px; background: var(--bg-tertiary); border-radius: var(--radius-full); overflow: hidden; }
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-info), var(--color-success));
    border-radius: var(--radius-full); transition: width 0.6s ease;
}
.progress-labels { display: flex; justify-content: space-between; margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-muted); }
.no-placement { text-align: center; padding: var(--space-3) 0; color: var(--text-muted); font-size: var(--text-sm); }

/* Coaching notes */
.coaching-list { display: flex; flex-direction: column; gap: var(--space-2); }
.coaching-item {
    background: var(--bg-secondary); border-radius: var(--radius-md);
    border: 1px solid var(--border-secondary); border-left: 3px solid var(--accent-primary);
    transition: background var(--transition-fast);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm); color: var(--text-secondary);
}
.coaching-item:hover { background: var(--bg-hover); }
.coaching-meta {
    font-size: var(--text-xs); color: var(--text-muted); margin-bottom: var(--space-1-5);
    display: flex; align-items: center; gap: var(--space-2);
}
.coaching-content { color: var(--text-primary); line-height: var(--leading-relaxed); }
.coaching-tags { display: flex; gap: var(--space-1-5); margin-top: var(--space-2); flex-wrap: wrap; }
.coaching-tag {
    background: var(--badge-blue-bg); color: var(--badge-blue-text);
    border-radius: var(--radius-full); padding: 2px var(--space-2);
    font-size: var(--text-xs); font-weight: var(--font-medium);
}

/* Job leads */
.leads-list { display: flex; flex-direction: column; gap: var(--space-2); }
.lead-item {
    display: flex; align-items: flex-start; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md); transition: background var(--transition-fast); gap: var(--space-3);
}
.lead-item:hover { background: var(--bg-hover); }
.lead-item.lead-shared { background: var(--color-success-light); border-color: var(--color-success-border); }
.lead-left { flex: 1; min-width: 0; }
.lead-company { font-weight: var(--font-semibold); font-size: var(--text-sm); color: var(--text-primary); }
.lead-date { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.lead-status { font-size: var(--text-xs); font-weight: var(--font-semibold); border-radius: var(--radius-full); padding: 3px var(--space-2); }
.lead-shared-badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    background: var(--color-success-light); color: var(--badge-green-text);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    padding: 2px var(--space-2); border-radius: var(--radius-full);
    margin-top: var(--space-1); border: 1px solid var(--color-success-border);
}
.lead-notes {
    font-size: var(--text-xs); color: var(--text-tertiary); margin-top: var(--space-1); font-style: italic;
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.lead-right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1-5); flex-shrink: 0; }

/* Empty state portal */
.sp-empty { text-align: center; padding: var(--space-8) 0; color: var(--text-muted); font-size: var(--text-sm); }
.sp-empty-icon { margin-bottom: var(--space-2); color: var(--text-muted); }

/* Profile info rows */
.profile-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-secondary); }
.profile-row:last-child { border-bottom: none; }
.profile-row-label { color: var(--text-tertiary); font-size: var(--text-sm); display: flex; align-items: center; gap: var(--space-1-5); }
.profile-row-value { font-weight: var(--font-medium); font-size: var(--text-sm); color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; max-width: 60%; }

/* Document form */
.doc-label { display: block; font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-tertiary); margin-bottom: var(--space-1-5); }
.doc-select {
    width: 100%; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    font-size: var(--text-sm); background: var(--bg-input); color: var(--text-primary); font-family: var(--font-family);
}
.doc-select:focus { outline: none; border-color: var(--accent-primary); box-shadow: var(--shadow-focus); }
.doc-file-input {
    width: 100%; padding: var(--space-2);
    border: 1px dashed var(--border-primary); border-radius: var(--radius-md);
    font-size: var(--text-sm); background: var(--bg-secondary); cursor: pointer; color: var(--text-secondary);
}
.doc-existing-link {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--accent-primary-light); border-radius: var(--radius-md);
    font-size: var(--text-sm); color: var(--accent-primary); text-decoration: none;
    transition: background var(--transition-fast);
}
.doc-existing-link:hover { background: var(--accent-primary-muted); }

.skill-tag {
    background: var(--badge-blue-bg); color: var(--badge-blue-text);
    border-radius: var(--radius-full); padding: 3px var(--space-3);
    font-size: var(--text-xs); font-weight: var(--font-medium);
}
.section-label {
    font-size: var(--text-xs); font-weight: var(--font-bold);
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-muted); margin-bottom: var(--space-2);
}

.slot-selected { background: var(--cab-success-muted) !important; border-color: var(--color-success) !important; }

.picker-nav-btn {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--radius-sm); color: var(--cab-text);
    padding: var(--space-1-5) var(--space-3); cursor: pointer;
    font-size: var(--text-md); line-height: 1; transition: background var(--transition-fast);
}
.picker-nav-btn:hover { background: var(--cab-overlay-hover); }
.picker-cancel-btn {
    background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
    border-radius: var(--radius-md); color: var(--cab-text);
    padding: var(--space-2) var(--space-4); cursor: pointer;
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    transition: background var(--transition-fast);
}
.picker-cancel-btn:hover { background: var(--cab-overlay-hover); }

/* ── Student Portal: Edit Profile ────────────────────────────── */
.edit-profile-container { max-width: 700px; margin: 0 auto; }
.edit-profile-container .sp-card { margin-bottom: var(--space-5); }

.form-field { margin-bottom: var(--space-5); }
.form-field:last-child { margin-bottom: 0; }

.skills-preview { display: flex; flex-wrap: wrap; gap: var(--space-1-5); margin-top: var(--space-3); min-height: 28px; }

/* ── Student Portal: Notifications ───────────────────────────── */
/* Note: Most notif-* classes are shared. Portal-specific additions below: */
.badge-unread {
    display: inline-flex; align-items: center; gap: var(--space-1);
    background: var(--badge-red-bg); color: var(--badge-red-text);
    padding: var(--space-1) var(--space-2); border-radius: var(--radius-full);
    font-size: var(--text-xs); font-weight: var(--font-bold);
}
.badge-ok {
    display: inline-flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-sm); color: var(--color-success); font-weight: var(--font-semibold);
}
.btn-mark-all {
    display: inline-flex; align-items: center; gap: var(--space-1-5);
    padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    font-family: var(--font-family);
    border: 1px solid var(--border-primary); background: var(--bg-elevated);
    color: var(--text-secondary); cursor: pointer; transition: all var(--transition-fast);
}
.btn-mark-all:hover {
    background: var(--color-success-light); border-color: var(--color-success-border);
    color: var(--badge-green-text);
}
.notif-group-label {
    font-size: var(--text-xs); font-weight: var(--font-bold);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    color: var(--text-muted); margin-bottom: var(--space-2); padding: 0 var(--space-1);
}

.notif-icon {
    width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
}
.notif-icon.profile_shared { background: var(--badge-green-bg); color: var(--badge-green-text); }
.notif-icon.coaching_note_added { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
.notif-icon.job_lead_status_changed { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.notif-icon.placement_success { background: var(--color-success-light); color: var(--color-success); }
.notif-icon.high_risk_alert { background: var(--badge-red-bg); color: var(--badge-red-text); }
.notif-icon.default { background: var(--bg-tertiary); color: var(--text-muted); }

.type-tag { font-size: var(--text-xs); font-weight: var(--font-semibold); padding: 2px var(--space-2); border-radius: var(--radius-full); }
.type-tag.profile_shared { background: var(--badge-green-bg); color: var(--badge-green-text); }
.type-tag.coaching_note_added { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
.type-tag.job_lead_status_changed { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.type-tag.placement_success { background: var(--color-success-light); color: var(--badge-green-text); }
.type-tag.high_risk_alert { background: var(--badge-red-bg); color: var(--badge-red-text); }
.type-tag.default { background: var(--badge-gray-bg); color: var(--badge-gray-text); }

.btn-read {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary); background: var(--bg-elevated);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    font-family: var(--font-family); color: var(--text-secondary);
    cursor: pointer; transition: all var(--transition-fast);
}
.btn-read:hover {
    background: var(--color-success-light); border-color: var(--color-success-border);
    color: var(--badge-green-text);
}

/* Share card in notifications */
.share-card {
    margin-top: var(--space-2);
    background: var(--color-success-light); border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
    display: flex; align-items: flex-start; gap: var(--space-3);
}
.share-card-icon { flex-shrink: 0; color: var(--badge-green-text); display: flex; align-items: center; }
.share-card-body { flex: 1; }
.share-card-title { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--badge-green-text); margin-bottom: 1px; }
.share-card-sub { font-size: var(--text-xs); color: var(--badge-green-text); }
.notif-read-at { font-size: var(--text-xs); color: var(--text-muted); }

/* ====================================================================
   PHASE 7 — Utility classes & named classes (replacing inline styles)
   ==================================================================== */

/* ── Display utilities ─────────────────────────────── */
.d-inline { display: inline; }
.d-none   { display: none; }
.overflow-visible { overflow: visible; }
.resize-vertical { resize: vertical; }
.whitespace-pre-wrap { white-space: pre-wrap; }
.object-cover { object-fit: cover; }

/* ── Profile avatar (large, used in student show & portal dashboard) */
.profile-avatar-lg {
    width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
}
.profile-avatar-lg-placeholder {
    width: 80px; height: 80px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.75rem; font-weight: 600;
}
.profile-avatar-md {
    width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
    margin-bottom: var(--space-2);
}
.profile-avatar-md-placeholder {
    width: 72px; height: 72px; border-radius: 50%;
    background: var(--primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; font-weight: 600; margin-bottom: var(--space-2);
}

/* ── Profile header (student show & portal sidebar) */
.profile-header {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4); border-bottom: 1px solid var(--border-color);
}
.profile-name { font-weight: 600; font-size: 1.15rem; }
.profile-title { color: var(--text-muted); font-size: 0.9rem; margin-top: var(--space-1); }
.profile-section {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-color);
}
.profile-section-border-top {
    border-top: 1px solid var(--border-color);
    padding-top: var(--space-3); margin-top: var(--space-3);
}
.section-label-sm {
    font-size: 0.8rem; font-weight: 600;
    color: var(--text-muted); margin-bottom: var(--space-1);
}
.section-label-sm-mb2 {
    font-size: 0.8rem; font-weight: 600;
    color: var(--text-muted); margin-bottom: var(--space-2);
}

/* ── Doc viewer / delete modal helpers */
.doc-viewer-sm { max-width: 480px; }
.doc-delete-actions {
    display: flex; gap: var(--space-3); justify-content: flex-end;
}
.doc-irreversible { color: var(--text-muted); font-size: 0.875rem; }

/* ── Avatar in table rows */
.avatar-inline {
    border-radius: 50%; object-fit: cover;
    vertical-align: middle; margin-right: 6px;
}

/* ── Support ticket semantic classes */
.ticket-header {
    display: flex; justify-content: space-between; align-items: flex-start;
}
.ticket-meta-id { font-size: var(--text-xs); color: var(--text-muted); }
.ticket-body {
    padding: var(--space-4); border-top: 1px solid var(--border-primary);
}
.ticket-description { white-space: pre-wrap; color: var(--text-secondary); }
.ticket-attachments {
    padding: 0 var(--space-4) var(--space-4);
    border-top: 1px solid var(--border-secondary);
}
.ticket-attachments-title {
    font-size: var(--text-sm); font-weight: 600;
    margin: var(--space-3) 0 var(--space-2);
}
.ticket-empty-messages {
    padding: var(--space-6); text-align: center; color: var(--text-muted);
}
.ticket-message-content { white-space: pre-wrap; }
.ticket-reply-footer {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: var(--space-2);
}
.ticket-reply-footer-end {
    display: flex; justify-content: flex-end; margin-top: var(--space-2);
}
.ticket-internal-label {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--text-secondary); cursor: pointer;
}
.ticket-form-inline { margin: 0; }
.ticket-form-flex {
    margin: 0; display: flex; gap: var(--space-1); align-items: center;
}
.ticket-form-ml-auto { margin: 0; margin-left: auto; }
.ticket-link { font-weight: 500; color: var(--text-link); }
.ticket-cell-sm { font-size: var(--text-sm); }
.ticket-cell-muted { color: var(--text-muted); font-size: var(--text-sm); }

/* ── Support new ticket form */
.ticket-form-body {
    padding: var(--space-4); display: flex; flex-direction: column;
    gap: var(--space-4);
}
.ticket-form-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4);
}
.ticket-form-footer {
    display: flex; justify-content: flex-end; gap: var(--space-2);
    padding-top: var(--space-2); border-top: 1px solid var(--border-primary);
}
.ticket-form-hint {
    margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-muted);
}
.text-required { color: var(--color-error); }
.text-optional { color: var(--text-muted); font-weight: 400; }

/* ── Super admin support index layout */
.sa-support-grid {
    display: grid; grid-template-columns: 2fr 1fr;
    gap: var(--space-4); margin-bottom: var(--space-6);
}
.sa-ticket-summary {
    margin-top: var(--space-1); font-size: var(--text-sm);
    color: var(--text-secondary);
}

/* ── Coach profile calendar link */
.calendar-link { color: #3b82f6; }

/* ── Coaching calendar embed */
.coaching-calendar-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-3); font-size: 12px; color: var(--text-muted);
}
.coaching-calendar-link {
    color: var(--accent-primary); text-decoration: none; font-weight: 600;
}
.coaching-calendar-frame {
    border-radius: var(--radius-md); overflow: hidden;
    border: 1px solid var(--border-primary);
}
.coaching-calendar-iframe {
    width: 100%; height: 500px; border: none; display: block;
}
.coaching-since {
    color: var(--text-muted); font-size: 11px;
}

/* ── Coach edit (share page) */
.coach-edit-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.coach-edit-label {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; background: var(--bg-subtle);
    border: 1px solid var(--border-color, #e5e7eb); border-radius: 8px;
    cursor: pointer; font-size: 13px; font-weight: 500;
    transition: background 0.15s;
}
.coach-edit-hint {
    font-size: 13px; color: var(--text-secondary); margin-bottom: 8px;
}
.coach-edit-accent { accent-color: var(--accent-color, #2563eb); }
.coach-show-hint {
    font-size: 12px; color: var(--text-secondary);
    padding: 0 var(--space-4); margin-bottom: var(--space-2);
}
.coach-show-actions { padding: 0 var(--space-4) var(--space-4); }

/* ── Share view banner */
.share-view-banner {
    background: #F59E0B; color: #000; text-align: center;
    padding: 8px 16px; font-size: 13px; font-weight: 600;
}

/* ── Coach profile calendar select form */
.cp-calendar-select-form { margin-top: 12px; }
.cp-calendar-select-label { font-size: 13px; font-weight: 600; color: #334155; }
.cp-calendar-select-optional { color: #94a3b8; font-weight: 400; }
.cp-calendar-select-input {
    flex: 1; padding: 8px 12px; border: 1.5px solid #e2e8f0;
    border-radius: 8px; font-size: 13px; color: #1e293b; background: #fff;
}
.cp-calendar-select-hint { font-size: 12px; color: #94a3b8; margin: 0; }

/* ── Import page helpers */
.import-table-line-col { width: 80px; }

/* ── Inline muted text variants */
.text-muted-xs { font-size: 0.75rem; margin-left: 4px; }
.ml-1-px { margin-left: 4px; }
.file-input-sm { font-size: 0.8rem; }

/* ── Photo upload row */
.photo-upload-row {
    margin-top: var(--space-2); display: flex; align-items: center;
    gap: var(--space-2);
}

/* ── Personality test hint */
.personality-hint { color: var(--text-muted); font-size: 0.875rem; }

/* ── Badge color text helpers (from KPI cards) */
.text-badge-purple { color: var(--badge-purple-text); }
.text-badge-green { color: var(--badge-green-text); }

/* ── Share preview names */
.share-preview-names {
    margin-top: var(--space-1-5); color: var(--text-secondary);
}

/* ── Badge spacing in tag lists */
.badge-spaced { margin: 2px; }

/* ── Two-column grid variant for achievements */
.sp-two-col { grid-template-columns: 1fr 1fr; margin-top: var(--space-4); }

/* ── Ticket filter active bar (inherits display:none from JS) */
.ticket-active-bar {
    padding: var(--space-2) var(--space-4);
    background: var(--bg-tertiary);
    font-size: var(--text-sm); color: var(--text-secondary);
}

/* ── Profile sidebar widget (portal dashboard) */
.profile-widget-center {
    display: flex; flex-direction: column; align-items: center;
    padding: var(--space-4) 0 var(--space-2);
}
.profile-presentation {
    margin: 0; font-size: 0.9rem; line-height: 1.5; color: var(--text-primary);
}

/* ── Login page ────────────────────────────────────── */
.login-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--bg-secondary); padding: var(--space-5);
}
.login-wrap { width: 100%; max-width: 400px; }
.login-card {
    background: var(--bg-elevated); border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
    padding: var(--space-10) var(--space-8);
}
.login-logo { text-align: center; margin-bottom: var(--space-8); }
.login-logo-text {
    font-size: var(--text-2xl); font-weight: 800; color: var(--text-primary);
    letter-spacing: -0.5px;
}
.login-logo-accent { color: var(--accent-primary); }
.login-logo-sub { color: var(--text-muted); margin-top: var(--space-2); font-size: var(--text-sm); }
.login-error {
    display: flex; align-items: flex-start; gap: var(--space-2);
    background: var(--color-error-light); border: 1px solid var(--color-error-border);
    color: var(--badge-red-text); padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); margin-bottom: var(--space-5); font-size: var(--text-sm);
}
.login-field { margin-bottom: var(--space-4); }
.login-field-last { margin-bottom: var(--space-6); }
.login-forgot-link {
    display: block; text-align: right;
    font-size: var(--text-xs); color: var(--text-link);
    margin-top: var(--space-1); margin-bottom: var(--space-2);
}
.login-forgot-link:hover { color: var(--text-link-hover); }
.login-success-msg {
    display: flex; align-items: flex-start; gap: var(--space-2);
    background: var(--color-success-light); border: 1px solid var(--color-success-border);
    color: var(--color-success); padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md); margin-bottom: var(--space-5); font-size: var(--text-sm);
}
.login-test-hint {
    margin-top: var(--space-6); padding: var(--space-3) var(--space-4);
    background: var(--bg-tertiary); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--text-muted);
    text-align: center;
}
.login-test-hint strong { color: var(--text-tertiary); }
.login-theme-wrap { text-align: center; margin-top: var(--space-4); }
.login-theme-btn {
    background: none; border: 1px solid var(--border-secondary); border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3); font-size: var(--text-xs); color: var(--text-muted);
    cursor: pointer; font-family: inherit;
}

/* ── Super Admin: new org form ─────────────────────── */
.sa-org-new-back { margin-bottom: var(--space-5); }
.sa-org-new-grid { display: grid; gap: var(--space-5); }
.sa-org-new-required { color: var(--color-error); }
.sa-org-new-optional {
    font-weight: var(--font-normal); color: var(--text-muted);
    font-size: var(--text-xs); margin-left: var(--space-1-5);
}
.sa-org-new-checkbox-wrap {
    display: inline-flex; align-items: center; gap: var(--space-3);
    cursor: pointer; font-size: var(--text-sm); user-select: none; color: var(--text-secondary);
}
.sa-org-new-checkbox {
    width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent-primary);
}
.sa-org-new-actions {
    display: flex; gap: var(--space-3); padding-top: var(--space-4);
    border-top: 1px solid var(--border-secondary);
}

/* ── Dashboard: action card icon color variants ────── */
.action-card-icon-blue   { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
.action-card-icon-purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
.action-card-icon-green  { background: var(--badge-green-bg); color: var(--badge-green-text); }
.action-card-icon-cyan   { background: var(--badge-cyan-bg); color: var(--badge-cyan-text); }
.action-card-icon-red    { background: var(--badge-red-bg); color: var(--badge-red-text); }

/* ── Dashboard: summary row value color variants ───── */
.summary-row-value-success { color: var(--color-success); }
.summary-row-value-accent  { color: var(--accent-secondary); }
.summary-row-value-error   { color: var(--color-error); }
.summary-row-value-warning { color: var(--color-warning); }

/* ── Dashboard: placement rate visual card ─────────── */
.placement-visual-inner { padding: var(--space-5); }
.placement-visual-top { display: flex; align-items: baseline; gap: var(--space-1); margin-bottom: var(--space-2); }
.progress-bar-wrap-lg { height: 10px; margin-bottom: var(--space-2); }

/* ── Dashboard & Analytics: org selector inline form ── */
.org-selector-form { margin: 0; display: flex; align-items: center; gap: var(--space-2); }

/* ── Analytics: topbar & data line ─────────────────── */
.a-topbar-right { display: flex; gap: var(--space-3); align-items: center; }
.a-topbar-data { font-size: var(--text-sm); color: var(--text-muted); }
.a-topbar-data strong { color: var(--text-primary); }
.a-org-select { width: auto; padding: var(--space-1-5) var(--space-3); font-size: var(--text-sm); }

/* ── Analytics: colored dots ───────────────────────── */
.a-dot-blue     { background: #3b82f6; }
.a-dot-green    { background: #22c55e; }
.a-dot-indigo   { background: #6366f1; }
.a-dot-teal     { background: #0891b2; }
.a-dot-sky      { background: #0284c7; }
.a-dot-purple   { background: #7c3aed; }
.a-dot-red      { background: #ef4444; }
.a-dot-amber    { background: #f59e0b; }
.a-dot-cyan     { background: #06b6d4; }
.a-dot-violet   { background: #8b5cf6; }
.a-dot-emerald  { background: #10b981; }

/* ── Analytics: stat value color variants ──────────── */
.a-stat-value-success { color: var(--color-success); }
.a-stat-value-error   { color: var(--color-error); }
.a-stat-value-warning { color: var(--color-warning); }

/* ── Analytics: chart fixed height ─────────────────── */
.a-chart-wrap-h180 { height: 180px; }

/* ── Student show: kanban, notes, profile table ────── */
.card-mt0 { margin-top: 0; }
.card-mt0-ov { margin-top: 0; overflow: visible; }
.kanban-hint { font-size: var(--text-xs); color: var(--text-muted); }
.kanban-loading { padding: var(--space-5); color: var(--text-muted); font-size: var(--text-sm); }
.kanban-loading-flex {
    padding: var(--space-5); color: var(--text-muted); font-size: var(--text-sm);
    display: flex; align-items: center; gap: var(--space-2);
}
.profile-td-top { vertical-align: top; padding-top: var(--space-4); }
.th-checkbox { width: 36px; }

/* ── Student edit: self-assign messages ─────────────── */
.self-assign-msg-green {
    display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--badge-green-text);
}
.self-assign-msg-orange {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-sm); color: var(--badge-orange-text);
}
.self-assign-msg-neutral {
    margin-bottom: var(--space-3); font-size: var(--text-sm); color: var(--text-secondary);
}
.edit-form-actions { display: flex; gap: var(--space-3); margin-bottom: var(--space-8); }
.max-w-form { max-width: 640px; }

/* ── Coach profile show: layout helpers ────────────── */
.cp-edit-btn-wrap { margin-top: var(--space-5); }
.cp-edit-btn { width: 100%; justify-content: center; }
.cp-calendar-hint-row {
    margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-muted);
    display: flex; align-items: center; gap: var(--space-2);
}
.cp-calendar-link {
    font-size: var(--text-xs); color: var(--text-link);
    text-decoration: none; word-break: break-all;
}
.cp-no-agenda-title {
    font-weight: var(--font-semibold); color: var(--text-secondary);
    margin-bottom: var(--space-1-5);
}
.cp-no-agenda-desc { margin-bottom: var(--space-4); }
.cp-tip-code {
    font-family: var(--font-mono); font-size: var(--text-xs);
    background: var(--bg-tertiary); padding: 1px var(--space-1);
    border-radius: var(--radius-xs);
}

/* ── Coach profile edit: form fields ───────────────── */
.cpe-textarea-mono { font-family: var(--font-mono); font-size: var(--text-sm); resize: vertical; }
.cpe-gcal-error { display: none; color: var(--color-error); font-size: var(--text-sm); }

/* ── Share coach show: description value ───────────── */
.info-value-desc { color: var(--text-tertiary); font-size: var(--text-sm); }
.detail-header-badges { display: flex; gap: var(--space-2); }

/* ── Super Admin org show: table cells ─────────────── */
.sa-user-email-cell {
    display: inline-flex; align-items: center; gap: var(--space-1);
    color: var(--text-tertiary); font-size: var(--text-sm);
}
.sa-user-never { color: var(--text-muted); font-size: var(--text-sm); }

/* ── Super Admin Dashboard: org name cell ────────────── */
.sa-org-name-cell { display: flex; align-items: center; gap: var(--space-2); }

/* ── Super Admin Dashboard: rate cell ────────────────── */
.sa-rate-cell { display: flex; flex-direction: column; gap: var(--space-1); min-width: 60px; }
.sa-rate-value { font-weight: var(--font-bold); font-size: var(--text-sm); }
.sa-rate-good { color: var(--color-green-600, #16a34a); }
.sa-rate-mid { color: var(--color-amber-600, #d97706); }
.sa-rate-low { color: var(--color-red-600, #dc2626); }
.progress-bar-wrap-sm { height: 4px; }

/* ── Super Admin Dashboard: activity timeline ────────── */
.sa-activity-timeline { display: flex; flex-direction: column; gap: 0; }
.sa-activity-item {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.06));
    transition: background 0.15s ease;
}
.sa-activity-item:last-child { border-bottom: none; }
.sa-activity-item:hover { background: var(--bg-hover, rgba(0,0,0,0.02)); }

.sa-activity-icon {
    flex-shrink: 0; width: 28px; height: 28px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
}
.sa-activity-icon-blue { background: rgba(59,130,246,0.1); color: #3b82f6; }
.sa-activity-icon-green { background: rgba(34,197,94,0.1); color: #22c55e; }
.sa-activity-icon-purple { background: rgba(139,92,246,0.1); color: #8b5cf6; }
.sa-activity-icon-amber { background: rgba(245,158,11,0.1); color: #f59e0b; }
.sa-activity-icon-gray { background: rgba(107,114,128,0.1); color: #6b7280; }

.sa-activity-content { flex: 1; min-width: 0; }
.sa-activity-desc {
    font-size: var(--text-sm); color: var(--text-primary);
    line-height: 1.4; margin-bottom: 2px;
}
.sa-activity-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
    font-size: var(--text-xs); color: var(--text-tertiary);
}
.sa-activity-user, .sa-activity-org, .sa-activity-date {
    display: inline-flex; align-items: center; gap: 3px;
}
.sa-activity-sep { color: var(--text-muted); }

/* ── SP Dashboard: coach-agenda inline elements (legacy — kept for compatibility) ── */
.cab-info-row { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-3); }
.cab-info-chip {
    padding: var(--space-2) var(--space-3); background: rgba(255,255,255,0.06);
    border-radius: var(--radius-md); font-size: var(--text-xs); color: rgba(255,255,255,0.7);
}
.cab-info-chip strong { color: #fff; }
.cab-info-chip-warn { color: #fbbf24; }
.rdv-badge-title { font-weight: var(--font-bold); font-size: var(--text-xs); }
.rdv-badge-sub { font-size: var(--text-xs); color: rgba(255,255,255,0.75); }

/* ── SP Dashboard: appointment picker (legacy — kept for compatibility) ── */
.picker-section-label {
    font-size: var(--text-xs); font-weight: var(--font-bold); letter-spacing: 1px;
    text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: var(--space-2);
}
.picker-nav-row { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.picker-current-date {
    font-weight: var(--font-bold); color: #fff; font-size: var(--text-sm);
    flex: 1; text-align: center;
}
.picker-slots-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 52px; }
.picker-confirm-zone {
    display: none; background: rgba(255,255,255,0.08); border-radius: var(--radius-lg);
    padding: var(--space-4); margin-top: var(--space-3);
}
.picker-confirm-title { font-size: var(--text-sm); font-weight: var(--font-bold); color: #fff; margin-bottom: var(--space-2); }
.picker-confirm-label { color: #86efac; }
.picker-note-input {
    width: 100%; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    border: none; font-size: var(--text-sm); color: var(--text-primary);
    margin-bottom: var(--space-2); box-sizing: border-box; resize: vertical;
    font-family: var(--font-family);
}
.picker-confirm-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.picker-feedback { display: none; margin-top: var(--space-3); }

/* ══════════════════════════════════════════════════════════════
   Coaching page — 3-column layout
   ══════════════════════════════════════════════════════════════ */
.coaching-layout-3col {
    display: grid;
    grid-template-columns: 260px minmax(0, 33.33%) 1fr;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
    align-items: start;
}
@media (max-width: 1200px) {
    /* Tablette : coach + agenda empilés, sessions dessous */
    .coaching-layout-3col {
        grid-template-columns: 260px 1fr;
    }
    .coaching-col--sessions {
        grid-column: 1 / -1;
    }
}
@media (max-width: 768px) {
    /* Mobile : tout empilé */
    .coaching-layout-3col {
        grid-template-columns: 1fr;
    }
    .coaching-col--sessions {
        grid-column: auto;
    }
}
.coaching-col { min-width: 0; overflow: hidden; }

/* Coach profile card */
.coaching-coach-profile {
    display: flex; flex-direction: column; align-items: center;
    padding: var(--space-5) var(--space-4) var(--space-3);
    text-align: center;
}
.coaching-coach-avatar {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--accent-primary); color: var(--text-inverse);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 700; letter-spacing: -0.5px;
    margin-bottom: var(--space-2); overflow: hidden;
    border: 3px solid var(--border-primary);
}
.coaching-coach-avatar img {
    width: 100%; height: 100%; object-fit: cover;
}
.coaching-coach-name {
    font-size: 15px; font-weight: var(--font-bold); color: var(--text-primary);
    margin-bottom: 2px;
}
.coaching-coach-role {
    font-size: 11px; color: var(--text-muted); font-weight: var(--font-semibold);
    text-transform: uppercase; letter-spacing: 0.5px;
    margin-bottom: var(--space-2);
}
.coaching-coach-email {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; color: var(--accent-primary); text-decoration: none;
    font-weight: 500; margin-bottom: var(--space-3);
    word-break: break-all;
}
.coaching-coach-email:hover { text-decoration: underline; }
.coaching-coach-actions {
    width: 100%; padding: 0 var(--space-2);
}

/* Coach meta info */
.coaching-coach-meta {
    border-top: 1px solid var(--border-primary);
    padding: var(--space-3) var(--space-4);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.coaching-coach-meta .coaching-meta-item {
    display: flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--text-secondary);
}
.coaching-coach-meta .coaching-meta-item strong { color: var(--text-primary); }
.coaching-meta-item--success { color: var(--color-success) !important; }

/* ── Mini calendar ─────────────────────────────────────────── */
.coaching-mini-cal {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--border-primary);
}
.mcal-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: var(--space-2);
}
.mcal-month-label {
    font-size: 13px; font-weight: var(--font-bold);
    color: var(--text-primary);
}
.mcal-nav-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: var(--radius-sm);
    border: 1px solid var(--border-primary); background: var(--bg-primary);
    color: var(--text-secondary); cursor: pointer; font-size: 16px;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    line-height: 1;
}
.mcal-nav-btn:hover {
    background: var(--bg-hover); border-color: var(--accent-primary);
    color: var(--accent-primary);
}
.mcal-grid {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: 1px;
}
.mcal-days-row { margin-bottom: 2px; }
.mcal-day-name {
    text-align: center; font-size: 10px; font-weight: 600;
    color: var(--text-muted); text-transform: uppercase;
    padding: 2px 0;
}
.mcal-cell {
    display: flex; align-items: center; justify-content: center;
    height: 28px; border-radius: var(--radius-sm);
    font-size: 12px; font-weight: 500; color: var(--text-primary);
    background: transparent; border: 1.5px solid transparent;
    cursor: pointer; transition: all 0.12s ease;
    padding: 0; font-family: var(--font-family);
}
.mcal-cell--empty { visibility: hidden; }
.mcal-cell--past {
    color: var(--text-muted); opacity: 0.35; cursor: default;
}
.mcal-cell--today {
    font-weight: 700; background: var(--bg-hover);
    border-radius: var(--radius-sm);
}
.mcal-cell--selected {
    background: var(--accent-primary) !important;
    color: var(--text-inverse) !important;
    border-color: var(--accent-primary) !important;
    font-weight: 700; opacity: 1;
}
.mcal-cell--available:not(.mcal-cell--selected) {
    font-weight: 700;
}
.mcal-cell:not(.mcal-cell--past):not(.mcal-cell--selected):hover {
    background: var(--accent-bg, #eff6ff);
}

/* Picker wrap — light themed */
.coaching-picker-wrap {
    padding: var(--space-4);
    overflow: hidden;
}
.coaching-picker-selected-date {
    display: flex; align-items: center; gap: 6px;
    margin-bottom: var(--space-3);
    font-weight: var(--font-bold); font-size: 13px;
    color: var(--text-primary);
}
.coaching-picker-selected-date svg { color: var(--accent-primary); flex-shrink: 0; }
.coaching-picker-date-label {
    font-weight: var(--font-bold); font-size: 13px;
    color: var(--text-primary);
}
.coaching-picker-slots {
    display: flex; flex-wrap: wrap; gap: var(--space-2);
    min-height: 44px;
}
.coaching-picker-loading {
    color: var(--text-muted); font-size: 13px;
    display: flex; align-items: center; gap: 6px;
}
.coaching-picker-empty {
    color: var(--text-muted); font-size: 13px; font-style: italic;
}
.coaching-picker-error {
    color: var(--color-danger); font-size: 13px;
}

/* Slot buttons — light theme */
.coaching-picker-slots .slot-btn {
    padding: 6px 12px; border-radius: var(--radius-md);
    font-size: 12px; font-weight: 600; font-family: var(--font-family);
    border: 1px solid var(--border-primary); cursor: pointer;
    transition: all 0.12s ease; white-space: nowrap;
    background: var(--bg-primary); color: var(--text-primary);
}
.coaching-picker-slots .slot-btn:hover:not(:disabled) {
    border-color: var(--accent-primary); color: var(--accent-primary);
    background: var(--accent-bg, #eff6ff);
}
.coaching-picker-slots .slot-btn.slot-selected {
    background: var(--color-success) !important; color: var(--text-inverse) !important;
    border-color: var(--color-success) !important;
}
.coaching-picker-slots .slot-btn:disabled {
    background: var(--bg-hover); color: var(--text-muted);
    border-color: var(--border-primary); cursor: not-allowed;
    text-decoration: line-through; opacity: 0.5;
}
.coaching-picker-slots .slot-btn:disabled .slot-busy-label {
    text-decoration: none; font-weight: 400; opacity: 0.7;
    font-size: 10px;
}

/* Confirmation zone — light theme */
.coaching-picker-confirm {
    background: var(--bg-hover); border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg); padding: var(--space-3);
    margin-top: var(--space-3);
}
.coaching-picker-confirm-title {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px; font-weight: 600; color: var(--text-primary);
    margin-bottom: var(--space-2);
}
.coaching-picker-confirm-title strong { color: var(--color-success); }
.coaching-picker-confirm-actions {
    display: flex; gap: var(--space-2); margin-top: var(--space-2);
}

/* Feedback zone — light theme */
.coaching-picker-feedback-success {
    background: var(--color-success-bg); border: 1px solid var(--color-success-border);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
    font-size: 13px; color: var(--color-success); line-height: 1.5;
    margin-top: var(--space-3);
}
.coaching-picker-feedback-error {
    background: var(--color-danger-bg); border: 1px solid var(--color-danger-border);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
    font-size: 13px; color: var(--color-danger); line-height: 1.5;
    margin-top: var(--space-3);
}

/* ── SP Dashboard: no coach state ──────────────────── */
.coach-no-coach-icon { margin-bottom: var(--space-2); }
.coach-no-coach-sub { font-size: var(--text-xs); }

/* ── SP Dashboard: KPI value small variant ─────────── */
.sp-kpi-value-sm { font-size: var(--text-sm); font-weight: var(--font-bold); }

/* ── SP Dashboard: coaching notes more link ────────── */
.coaching-more { text-align: center; margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-muted); }
.coaching-meta-item { display: inline-flex; align-items: center; gap: var(--space-1); }

/* ── SP Dashboard: profile section ─────────────────── */
.sp-profile-info { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--text-sm); }
.profile-link { color: var(--accent-primary); font-size: var(--text-sm); display: inline-flex; align-items: center; gap: var(--space-1); }
.profile-not-set { color: var(--text-muted); font-style: italic; font-size: var(--text-sm); }
.sp-skills-section { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-secondary); }
.sp-skills-tags { display: flex; flex-wrap: wrap; gap: var(--space-1-5); }

/* ── SP Dashboard: placement card ──────────────────── */
.placement-progress-header {
    display: flex; justify-content: space-between; font-size: var(--text-xs);
    color: var(--text-tertiary); margin-bottom: var(--space-1);
}
.no-placement-icon { margin-bottom: var(--space-2); }
.no-placement-title { font-weight: var(--font-semibold); color: var(--text-secondary); margin-bottom: var(--space-1); }

/* ── SP Dashboard: documents card ──────────────────── */
.doc-form-field { margin-bottom: var(--space-3); }
.doc-upload-btn { width: 100%; justify-content: center; }
.doc-formats-hint {
    margin-top: var(--space-3); padding: var(--space-2); background: var(--bg-secondary);
    border-radius: var(--radius-md); font-size: var(--text-xs); color: var(--text-muted);
    text-align: center;
}
.doc-existing-section {
    margin-top: var(--space-4); padding-top: var(--space-4);
    border-top: 1px solid var(--border-secondary);
}
.doc-existing-list { display: flex; flex-direction: column; gap: var(--space-2); }
.doc-link-arrow { margin-left: auto; }

/* ── Share coach index: empty btn wrap ─────────────── */
.share-empty-btn { margin-top: var(--space-5); }

/* (toast-close-btn replaced by .toast-dismiss in toast system above) */

/* ── Job Offers page ──────────────────────────────── */
.offer-title {
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
}
.offer-desc {
    font-size: 12px;
    color: var(--text-muted);
    margin-top: 2px;
    line-height: 1.4;
}
.offer-company {
    font-weight: 500;
    color: var(--text-secondary);
}
.offer-location {
    font-size: 13px;
    color: var(--text-muted);
}
.offer-platforms {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.offer-platform-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
    transition: opacity .15s;
}
.offer-platform-badge:hover {
    opacity: 0.8;
    text-decoration: none;
}

/* Platform tag — dark-mode safe color via custom property */
.platform-tag {
    background-color: color-mix(in srgb, var(--platform-color) 12%, transparent);
    color: var(--platform-color);
    border: 1px solid color-mix(in srgb, var(--platform-color) 25%, transparent);
}

/* Apply dropdown (postuler pour un etudiant) */
.offer-apply-wrap {
    position: relative;
    display: inline-block;
}
.offer-apply-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    z-index: 50;
    min-width: 200px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 0;
}
.offer-apply-wrap.open .offer-apply-dropdown {
    display: block;
}
.offer-apply-student {
    display: block;
    width: 100%;
    padding: 6px 12px;
    text-align: left;
    font-size: 13px;
    color: var(--text-primary);
    background: none;
    border: none;
    cursor: pointer;
    transition: background .15s;
}
.offer-apply-student:hover {
    background: var(--bg-secondary);
}

/* ── Misc spacing helpers ──────────────────────────── */
.badge-ml { margin-left: var(--space-2); }
.card-mb4 { margin-bottom: var(--space-4); }
.a-legend-mt3 { margin-top: var(--space-3); }
.text-2xs { font-size: 10px; }

/* ── CSV Import ──────────────────────────────────────── */
.import-instructions {
    padding: var(--space-4);
    font-size: 14px;
    line-height: 1.7;
    color: var(--text-secondary);
}
.import-instructions ol {
    margin: var(--space-2) 0 var(--space-4) var(--space-4);
    padding: 0;
}
.import-instructions ol li {
    margin-bottom: var(--space-1);
}
.import-format-hints {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}
.import-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
    background: var(--bg-secondary);
    padding: 4px 10px;
    border-radius: var(--radius-md);
}
.csv-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    border: 2px dashed var(--border-primary);
    border-radius: var(--radius-lg);
    background: var(--bg-secondary);
    cursor: pointer;
    transition: border-color .2s, background .2s;
    text-align: center;
}
.csv-drop-zone:hover,
.csv-drop-zone--active {
    border-color: var(--accent-primary);
    background: var(--bg-selected);
}
.csv-drop-zone--selected {
    border-color: var(--border-success);
    border-style: solid;
    background: var(--bg-secondary);
}
.csv-drop-zone-icon {
    color: var(--text-muted);
}
.csv-drop-zone-text {
    font-size: 14px;
    color: var(--text-secondary);
}
.csv-drop-zone-link {
    color: var(--accent-primary);
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
}
.csv-drop-zone-hint {
    font-size: 12px;
    color: var(--text-muted);
}
.csv-drop-zone-filename {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-top: var(--space-1);
}
.import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.import-error-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    margin-top: var(--space-3);
}
.import-error-table th {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-primary);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-tertiary);
}
.import-error-table td {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--border-secondary);
    vertical-align: top;
}
.import-error-list {
    margin: 0;
    padding: 0 0 0 var(--space-3);
    color: var(--text-secondary);
}
.import-error-list li {
    margin-bottom: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   Gamification — Badges, XP, Niveaux, Classement
   ═══════════════════════════════════════════════════════════════ */

/* ── Player Card ───────────────────────────────────────────── */
.pc {
    position: relative;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
    overflow: hidden;
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
    border-left: 4px solid var(--accent-primary);
    box-shadow: var(--shadow-xs);
}
.pc:hover { box-shadow: var(--shadow-sm); }
.pc-bg-glow {
    position: absolute;
    top: -40%; left: -20%;
    width: 60%; height: 180%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--accent-primary) 6%, transparent) 0%, transparent 70%);
    pointer-events: none;
}
.pc-inner {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-6);
    align-items: center;
    z-index: 1;
}

/* Badge de niveau */
.pc-badge-col { text-align: center; }
.pc-level-badge {
    width: 140px; height: 140px;
    display: flex; align-items: center; justify-content: center;
    filter: drop-shadow(0 4px 20px var(--accent-ring));
    transition: transform 0.3s ease;
}
.pc-level-badge img {
    width: 100%; height: 100%;
    object-fit: contain;
}
.pc-level-badge--animate {
    animation: levelBadgeEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.pc-level-badge:hover {
    transform: scale(1.08) rotate(-3deg);
}
.pc-level-label {
    margin-top: var(--space-2);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--text-muted);
    font-weight: 600;
}

/* Infos joueur */
.pc-info-col {}
.pc-rank-title {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}
.pc-power {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent-primary);
    margin-top: 2px;
}
.pc-stats {
    display: flex;
    gap: var(--space-5);
    margin-top: var(--space-4);
}
.pc-stat { text-align: center; }
.pc-stat-value {
    display: block;
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-primary);
}
.pc-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    font-weight: 500;
}

/* Barre XP dans la carte */
.pc-xp-section { margin-top: var(--space-4); }
.pc-xp-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}
.pc-xp-track {
    width: 100%;
    height: 6px;
    background: var(--bg-tertiary);
    border-radius: 3px;
    overflow: hidden;
}
.pc-xp-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 3px;
    transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 8px var(--accent-ring);
}
.pc-xp-detail {
    text-align: center;
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 4px;
}

/* Prochaines actions */
.pc-actions-col {
    min-width: 200px;
    max-width: 240px;
}
.pc-actions-title {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
}
.pc-actions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pc-action-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 0;
    border-bottom: 1px solid var(--border-secondary);
    font-size: 0.76rem;
    color: var(--text-secondary);
}
.pc-action-item:last-child { border-bottom: none; }
.pc-action-icon {
    flex-shrink: 0;
    color: var(--text-muted);
}
.pc-action-label { flex: 1; min-width: 0; }
.pc-action-xp {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--accent-primary);
    font-size: 0.72rem;
}
.pc-next-level {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-secondary);
    font-size: 0.76rem;
    color: var(--text-muted);
}
.pc-next-level img {
    filter: drop-shadow(0 1px 4px var(--accent-ring));
}
.pc-next-level strong {
    color: var(--accent-secondary);
}

/* ── Level Collection Grid ─────────────────────────────────── */
.lc-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-3);
}
.lc-card {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-3) var(--space-2);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.lc-card--unlocked:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.1);
}
.lc-card--locked {
    opacity: 0.4;
    filter: grayscale(0.7) brightness(0.95);
}
.lc-card--locked:hover { opacity: 0.55; filter: grayscale(0.4); }
.lc-card--current {
    border-color: #6366f1;
    box-shadow: 0 0 0 2px rgba(99,102,241,0.2), 0 4px 16px rgba(99,102,241,0.1);
}
.lc-current-tag {
    position: absolute;
    top: -1px; right: -1px;
    background: linear-gradient(135deg, #6366f1, #a78bfa);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 0 var(--radius-lg) 0 var(--radius-md);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.lc-badge-img {
    width: 72px; height: 72px;
    margin: 0 auto var(--space-2);
    display: flex; align-items: center; justify-content: center;
}
.lc-badge-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
.lc-card--unlocked:hover .lc-badge-img img {
    transform: scale(1.1) rotate(3deg);
}
.lc-level-num {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.lc-level-name {
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--text-primary);
    margin: 2px 0;
}
.lc-power {
    font-size: 0.72rem;
    color: #6366f1;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center; gap: 3px;
}
.lc-xp-req {
    font-size: 0.68rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}

/* ── Dashboard Widget ──────────────────────────────────────── */
.gam-widget {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
    animation: fadeIn 0.4s ease;
}
.gam-widget-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
.gam-widget-level-img {
    width: 52px; height: 52px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.15));
}
.gam-widget-level-img img { width: 100%; height: 100%; object-fit: contain; }
.gam-widget-info { white-space: nowrap; }
.gam-widget-title { font-weight: 700; font-size: 1rem; color: var(--text-primary); }
.gam-widget-xp { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
.gam-widget-center { flex: 1; min-width: 0; }
.gam-widget-progress-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
    text-align: center;
}
.gam-widget-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    flex-shrink: 0;
}
.gam-widget-badges {
    display: flex;
    gap: var(--space-1);
}
.gam-widget-badge {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.2s ease;
}
.gam-widget-badge:hover {
    transform: scale(1.15);
}
.gam-widget-badge img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.15));
}
.gam-widget-link {
    font-size: 0.8rem;
    color: var(--accent-primary);
    text-decoration: none;
    font-weight: 500;
    display: flex; align-items: center; gap: 4px;
}
.gam-widget-link:hover { text-decoration: underline; }

/* ── Level Circle ──────────────────────────────────────────── */
.gam-level-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary));
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.gam-level-circle--lg {
    width: 72px; height: 72px;
}
.gam-level-number {
    color: #fff;
    font-weight: 800;
    font-size: 1.25rem;
}
.gam-level-circle--lg .gam-level-number {
    font-size: 1.75rem;
}

/* ── XP Bar ────────────────────────────────────────────────── */
.gam-xp-bar-track {
    width: 100%;
    height: 8px;
    background: var(--bg-tertiary);
    border-radius: 4px;
    overflow: hidden;
}
.gam-xp-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary));
    border-radius: 4px;
    transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Achievements Page Header ──────────────────────────────── */
.gam-header {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-6);
    margin-bottom: var(--space-6);
}
.gam-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}
.gam-level-display {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}
.gam-level-info {}
.gam-level-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}
.gam-xp-total {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: var(--space-1);
}
.gam-badges-counter { text-align: right; }
.gam-badges-count {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-primary);
}
.gam-badges-count span {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-muted);
}
.gam-badges-label {
    font-size: 0.8rem;
    color: var(--text-muted);
}
.gam-xp-bar-container { margin-top: var(--space-2); }
.gam-xp-bar-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-bottom: var(--space-2);
}
.gam-xp-bar-detail {
    font-size: 0.8rem;
    color: var(--text-muted);
    text-align: center;
    margin-top: var(--space-2);
}

/* ── Sections ──────────────────────────────────────────────── */
.gam-section { margin-bottom: var(--space-6); }
.gam-section-title {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-4);
}

/* ── Badge Category ────────────────────────────────────────── */
.gam-category { margin-bottom: var(--space-5); }
.gam-category-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.gam-category-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-secondary);
}

/* ── Badge Grid ────────────────────────────────────────────── */
.gam-badge-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: var(--space-4);
}
.gam-badge-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-3) var(--space-3);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;
}
.gam-badge-card--earned {
    animation: badgePop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.gam-badge-card--earned:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
.gam-badge-card--locked {
    opacity: 0.5;
    filter: grayscale(0.8) brightness(0.95);
}
.gam-badge-card--locked:hover {
    opacity: 0.65;
    filter: grayscale(0.5) brightness(1);
}
/* Earned border glow per category */
.gam-badge-card--earned.gam-badge-card--blue   { border-color: var(--badge-blue-text);   box-shadow: 0 0 0 1px var(--badge-blue-bg); }
.gam-badge-card--earned.gam-badge-card--green  { border-color: var(--badge-green-text);  box-shadow: 0 0 0 1px var(--badge-green-bg); }
.gam-badge-card--earned.gam-badge-card--purple { border-color: var(--badge-purple-text); box-shadow: 0 0 0 1px var(--badge-purple-bg); }
.gam-badge-card--earned.gam-badge-card--orange { border-color: var(--badge-orange-text); box-shadow: 0 0 0 1px var(--badge-orange-bg); }
.gam-badge-card--earned.gam-badge-card--cyan   { border-color: var(--badge-cyan-text);   box-shadow: 0 0 0 1px var(--badge-cyan-bg); }
.gam-badge-card--earned:hover.gam-badge-card--blue   { box-shadow: 0 8px 24px rgba(37,99,235,0.15); }
.gam-badge-card--earned:hover.gam-badge-card--green  { box-shadow: 0 8px 24px rgba(34,197,94,0.15); }
.gam-badge-card--earned:hover.gam-badge-card--purple { box-shadow: 0 8px 24px rgba(124,58,237,0.15); }
.gam-badge-card--earned:hover.gam-badge-card--orange { box-shadow: 0 8px 24px rgba(234,88,12,0.15); }
.gam-badge-card--earned:hover.gam-badge-card--cyan   { box-shadow: 0 8px 24px rgba(14,116,144,0.15); }

/* Badge image container */
.gam-badge-img {
    width: 96px; height: 96px;
    margin: 0 auto var(--space-3);
    display: flex; align-items: center; justify-content: center;
    position: relative;
}
.gam-badge-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.15));
}
.gam-badge-card--earned:hover .gam-badge-img img {
    transform: scale(1.12) rotate(2deg);
}
.gam-badge-card--locked .gam-badge-img img {
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.08));
}
.gam-badge-name {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--text-primary);
    margin-bottom: 2px;
    letter-spacing: 0.01em;
}
.gam-badge-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    line-height: 1.45;
    min-height: 2.9em;
}
.gam-badge-date {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    margin-top: var(--space-2);
    font-style: italic;
}
.gam-badge-reward {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-top: var(--space-2);
    background: var(--accent-primary-light);
    padding: 2px 8px;
    border-radius: 10px;
}

/* ── Leaderboard ───────────────────────────────────────────── */
.gam-rank-current {
    padding: var(--space-3) var(--space-4);
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    font-size: 0.9rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border-primary);
}
.gam-leaderboard {}
.gam-leaderboard-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
}
.gam-leaderboard-row:last-child { border-bottom: none; }
.gam-leaderboard-row--current {
    background: var(--accent-primary-light);
}
.gam-leaderboard-rank {
    width: 32px;
    text-align: center;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    flex-shrink: 0;
}
.gam-rank-medal {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 800;
    color: #fff;
}
.gam-rank-1 { background: linear-gradient(135deg, #F59E0B, #D97706); }
.gam-rank-2 { background: linear-gradient(135deg, #9CA3AF, #6B7280); }
.gam-rank-3 { background: linear-gradient(135deg, #CD7F32, #A0522D); }
.gam-leaderboard-user {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1;
    min-width: 0;
}
.gam-leaderboard-initials {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--bg-tertiary);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.gam-leaderboard-meta {}
.gam-leaderboard-level {
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.gam-leaderboard-xp {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-primary);
    white-space: nowrap;
}

/* ── XP History Log ────────────────────────────────────────── */
.gam-xp-log {}
.gam-xp-log-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
    font-size: 0.85rem;
}
.gam-xp-log-entry:last-child { border-bottom: none; }
.gam-xp-log-action {
    color: var(--text-secondary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gam-xp-log-right {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-shrink: 0;
}
.gam-xp-log-xp {
    font-weight: 700;
    color: var(--color-success);
    white-space: nowrap;
}
.gam-xp-log-date {
    font-size: 0.75rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ── Animations ────────────────────────────────────────────── */
@keyframes badgePop {
    0%   { transform: scale(0.7); opacity: 0; }
    50%  { transform: scale(1.06); }
    70%  { transform: scale(0.97); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes levelBadgeEntrance {
    0%   { transform: scale(0) rotate(-30deg); opacity: 0; filter: drop-shadow(0 0 0 transparent); }
    50%  { transform: scale(1.15) rotate(5deg); opacity: 1; filter: drop-shadow(0 0 30px rgba(99,102,241,0.6)); }
    70%  { transform: scale(0.95) rotate(-2deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; filter: drop-shadow(0 4px 20px rgba(99,102,241,0.35)); }
}
/* Subtle shine on earned badge image on hover */
.gam-badge-card--earned::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 55%, transparent 60%);
    background-size: 200% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.gam-badge-card--earned:hover::after {
    opacity: 1;
    animation: shimmer 1.2s ease-in-out;
}

/* ══════════════════════════════════════════════════════════════
   SUPPORT TICKETING
   ══════════════════════════════════════════════════════════════ */

/* ── Ticket Actions Bar (super admin) ─────────────────────── */
.ticket-actions-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

/* ── Ticket Info Grid ─────────────────────────────────────── */
.ticket-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-1);
    padding: var(--space-4);
    border-top: 1px solid var(--border-primary);
}
.ticket-info-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) 0;
}
.ticket-info-item .info-label {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    color: var(--text-muted);
}
.ticket-info-item .info-value {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-primary);
}

/* ── Ticket Conversation ──────────────────────────────────── */
.ticket-conversation {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.ticket-message {
    display: flex;
    gap: var(--space-3);
    padding: var(--space-4);
    border-top: 1px solid var(--border-secondary);
    transition: background var(--transition-fast);
}
.ticket-message:hover {
    background: var(--bg-tertiary);
}
.ticket-message-system {
    background: var(--bg-tertiary);
    padding: var(--space-2) var(--space-4);
    gap: var(--space-2);
    align-items: center;
}
.ticket-message-system .ticket-message-content {
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-style: italic;
}
.ticket-message-system .ticket-message-meta {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}
.ticket-message-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    font-weight: var(--font-bold);
    flex-shrink: 0;
    text-transform: uppercase;
}
.ticket-message-content {
    flex: 1;
    min-width: 0;
}
.ticket-message-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}
.ticket-message-meta strong {
    color: var(--text-secondary);
    font-weight: var(--font-semibold);
}

/* ── Ticket Reply Form ────────────────────────────────────── */
.ticket-reply-form {
    padding: var(--space-4);
    border-top: 1px solid var(--border-primary);
    background: var(--bg-tertiary);
}

/* ── Ticket Attachments ───────────────────────────────────── */
.ticket-attachments {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.ticket-attachment-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-link);
    text-decoration: none;
    transition: background var(--transition-fast), border-color var(--transition-fast);
    width: fit-content;
}
.ticket-attachment-item:hover {
    background: var(--bg-elevated);
    border-color: var(--accent-primary);
}

/* ── FAQ Suggestions ──────────────────────────────────────── */
.faq-suggestion {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-secondary);
}
.faq-suggestion:first-child {
    border-top: none;
}
.faq-count {
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
}

/* ── Filter Dot ───────────────────────────────────────────── */
.filter-dot {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--accent-primary);
}

/* ── Ticket responsive ────────────────────────────────────── */
/* Stack ticket action buttons vertically on mobile */
@media (max-width: 768px) {
    .ticket-actions-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .ticket-actions-bar form {
        margin-left: 0 !important;
    }
    .ticket-info-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 480px) {
    .ticket-info-grid {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════
   ROADMAP
   ══════════════════════════════════════════════════════════════ */

/* ── Vote bar sur les cartes ──────────────────────────────── */
.roadmap-vote-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-secondary);
}
.roadmap-vote-btn {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: 2px 8px;
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    border: 1px solid var(--border-primary);
    background: var(--bg-primary);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-family: var(--font-family);
}
.roadmap-vote-btn:hover { background: var(--bg-hover); }
.roadmap-vote-btn--active-up {
    background: var(--badge-green-bg);
    color: var(--badge-green-text);
    border-color: var(--badge-green-text);
}
.roadmap-vote-btn--active-down {
    background: var(--badge-red-bg);
    color: var(--badge-red-text);
    border-color: var(--badge-red-text);
}
.roadmap-vote-count {
    font-size: var(--text-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* ── Panel suggestions ────────────────────────────────────── */
.roadmap-suggestions-panel {
    border-bottom: 1px solid var(--border-primary);
    padding: var(--space-4);
    background: var(--bg-secondary);
    max-height: 320px;
    overflow-y: auto;
}
.roadmap-suggestion-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}
.roadmap-suggestion-card:last-child { margin-bottom: 0; }
.roadmap-suggestion-info { flex: 1; min-width: 0; }
.roadmap-suggestion-title {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}
.roadmap-suggestion-meta {
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.roadmap-suggestion-actions {
    display: flex;
    gap: var(--space-2);
    flex-shrink: 0;
}

/* ── Carte auteur + delivered ─────────────────────────────── */
.roadmap-card-author {
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    margin-top: var(--space-1);
}
.roadmap-card--delivered { opacity: 0.75; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .pc-inner { grid-template-columns: auto 1fr; }
    .pc-actions-col { grid-column: 1 / -1; max-width: 100%; }
    .pc-actions-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-4); }
    .lc-grid { grid-template-columns: repeat(5, 1fr); }
}
/* Stack gamification widgets and collapse life-cycle grid on mobile */
@media (max-width: 768px) {
    .gam-widget {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }
    .gam-widget-right { align-items: center; flex-direction: row; justify-content: space-between; }
    .gam-badge-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
    .gam-badge-img { width: 80px; height: 80px; }
    .pc-inner { grid-template-columns: 1fr; text-align: center; }
    .pc-badge-col { order: -1; }
    .pc-level-badge { width: 120px; height: 120px; margin: 0 auto; }
    .pc-stats { justify-content: center; }
    .pc-actions-col { max-width: 100%; }
    .pc-actions-list { grid-template-columns: 1fr; }
    .lc-grid { grid-template-columns: repeat(3, 1fr); }
    .lc-badge-img { width: 56px; height: 56px; }
}
@media (max-width: 480px) {
    .lc-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Personality Test ─────────────────────────────────────── */

/* Intro */
.personality-intro {
    text-align: center;
    padding: var(--space-6) var(--space-4);
}
.personality-intro-icon {
    color: var(--accent-primary);
    margin-bottom: var(--space-3);
}
.personality-intro h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-3);
}
.personality-intro p {
    color: var(--text-secondary);
    max-width: 560px;
    margin: 0 auto var(--space-4);
    line-height: 1.6;
}
.personality-info-list {
    list-style: none;
    padding: 0;
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    justify-content: center;
    margin-bottom: var(--space-4);
    font-size: 0.9rem;
}
.personality-info-list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Progress */
.personality-progress {
    padding: var(--space-4) var(--space-4) 0;
}
.personality-progress-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--space-2);
}
.personality-progress-track {
    height: 6px;
    border-radius: 3px;
    background: var(--bg-elevated);
    overflow: hidden;
}
.personality-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--accent-primary);
    transition: width 0.3s ease;
}

/* Steps */
.personality-step {
    padding: var(--space-4);
}
.personality-step-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

/* Questions */
/* ── Likert Legend (top of form) ──────────────────────────── */
.likert-legend {
    display: flex; align-items: center; justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    color: var(--text-muted);
}
.likert-legend-end { white-space: nowrap; }
.likert-legend-dots {
    display: flex; gap: var(--space-2);
}
.likert-legend-dot {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--bg-tertiary);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    color: var(--text-muted);
}

/* ── Compact Question Row ────────────────────────────────── */
.pq-row {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
    transition: background 0.15s;
}
.pq-row:last-child { border-bottom: none; }
.pq-row:hover { background: var(--bg-hover); }
.pq-row.pq-answered { background: color-mix(in srgb, var(--accent-primary) 3%, transparent); }

.pq-text {
    flex: 1; min-width: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--text-primary);
}
.pq-num {
    font-weight: var(--font-bold);
    color: var(--accent-primary);
    margin-right: var(--space-1);
}

/* ── Dot Choices (1-5) ───────────────────────────────────── */
.pq-choices {
    display: flex; gap: var(--space-2);
    flex-shrink: 0;
}
.pq-choice {
    cursor: pointer; position: relative;
}
.pq-radio {
    position: absolute; opacity: 0; width: 0; height: 0;
}
.pq-dot {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 2px solid var(--border-primary);
    background: var(--bg-primary);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--text-muted);
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    user-select: none;
}
.pq-dot:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    transform: scale(1.1);
}
.pq-radio:checked + .pq-dot {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
    transform: scale(1.15);
    box-shadow: 0 0 0 4px var(--accent-ring);
}
.pq-radio:focus-visible + .pq-dot {
    box-shadow: var(--shadow-focus);
}

/* Color gradient for dot values: 1=red-ish, 3=neutral, 5=green-ish */
.pq-radio[value="1"]:checked + .pq-dot { background: var(--badge-red-text); border-color: var(--badge-red-text); }
.pq-radio[value="2"]:checked + .pq-dot { background: var(--badge-orange-text); border-color: var(--badge-orange-text); }
.pq-radio[value="3"]:checked + .pq-dot { background: var(--text-muted); border-color: var(--text-muted); }
.pq-radio[value="4"]:checked + .pq-dot { background: var(--accent-primary); border-color: var(--accent-primary); }
.pq-radio[value="5"]:checked + .pq-dot { background: var(--color-success); border-color: var(--color-success); }

/* Error state */
.pq-row.pq-error { background: var(--badge-red-bg); }
.pq-row.pq-error .pq-dot { border-color: var(--color-error); }

/* ── Legacy compat (keep old class names working) ────────── */
.personality-question {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-3);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.personality-question:hover {
    border-color: var(--border-primary);
}
.personality-question--error {
    border-color: var(--badge-red-bg) !important;
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.15);
}
.personality-question-text {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: var(--space-3);
}
.personality-question-number {
    font-weight: 600;
    color: var(--accent-primary);
    margin-right: var(--space-1);
}

/* Likert scale (legacy) */
.personality-likert {
    display: flex;
    gap: var(--space-2);
    justify-content: center;
}
.personality-likert-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-1);
    cursor: pointer;
    flex: 1;
    max-width: 120px;
}
.personality-likert-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}
.personality-likert-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.3;
}

/* Navigation */
.personality-nav {
    display: flex;
    justify-content: space-between;
    padding: var(--space-4);
    border-top: 1px solid var(--border-color);
}

/* Results */
.personality-results {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: var(--space-6);
    padding: var(--space-4);
    align-items: start;
}
.personality-chart-container {
    position: relative;
    max-width: 300px;
}
.personality-interpretations {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.personality-trait-card {
    padding: var(--space-3);
    background: var(--bg-elevated);
    border-radius: var(--radius);
}
.personality-trait-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-2);
}
.personality-trait-label {
    font-weight: 600;
    font-size: 0.9rem;
}
.personality-trait-score {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--accent-primary);
}
.personality-trait-bar-track {
    height: 6px;
    border-radius: 3px;
    background: var(--border-color);
    overflow: hidden;
    margin-bottom: var(--space-2);
}
.personality-trait-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.6s ease;
}
.personality-trait-bar-fill[data-level="low"] { background: #ef4444; }
.personality-trait-bar-fill[data-level="mid"] { background: #f59e0b; }
.personality-trait-bar-fill[data-level="high"] { background: #22c55e; }
.personality-trait-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Dashboard widget */
.personality-dashboard-widget {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
    align-items: center;
}
.personality-dashboard-chart {
    max-width: 220px;
}
.personality-dashboard-traits {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.personality-dashboard-trait-head {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    margin-bottom: var(--space-1);
}
.personality-dashboard-trait-head strong {
    color: var(--accent-primary);
}

/* CTA (call to action if no test yet) */
.personality-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) !important;
    gap: var(--space-4);
}
.personality-cta-content {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.personality-cta-icon {
    color: var(--accent-primary);
    flex-shrink: 0;
}
.personality-cta-title {
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: var(--space-1);
}
.personality-cta-text {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* Toast */
.personality-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--badge-red-text, #991b1b);
    color: #fff;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    font-size: 0.875rem;
    opacity: 0;
    transition: opacity 0.3s, transform 0.3s;
    z-index: 9999;
    box-shadow: var(--shadow-lg);
}
.personality-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* Responsive — stack personality test results and shrink charts on mobile */
@media (max-width: 768px) {
    .personality-results {
        grid-template-columns: 1fr;
    }
    .personality-chart-container {
        max-width: 260px;
        margin: 0 auto;
    }
    .personality-dashboard-widget {
        grid-template-columns: 1fr;
    }
    .personality-dashboard-chart {
        max-width: 200px;
        margin: 0 auto;
    }
    .personality-likert {
        flex-wrap: wrap;
    }
    /* Compact test responsive */
    .pq-row {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }
    .pq-choices { align-self: center; }
    .pq-dot { width: 40px; height: 40px; font-size: var(--text-sm); }
    .likert-legend { display: none; }
    .personality-cta {
        flex-direction: column;
        text-align: center;
    }
    .personality-cta-content {
        flex-direction: column;
    }
}

/* ── Profile Completion Card ────────────────────────────────── */
.sp-completion-card {
    border-left: 4px solid var(--accent-primary);
    margin-bottom: var(--space-6);
    padding: var(--space-5);
}
.sp-completion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-4);
}
.sp-completion-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 var(--space-1) 0;
}
.sp-completion-badge {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sp-completion-card .progress-bar-wrap {
    margin-bottom: var(--space-4);
}
.sp-completion-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}
.sp-completion-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}
.sp-completion-item:hover {
    background: var(--bg-hover);
    color: var(--accent-primary);
}
.sp-completion-icon {
    display: flex;
    align-items: center;
    color: var(--text-muted);
}
.sp-completion-item:hover .sp-completion-icon {
    color: var(--accent-primary);
}
.sp-completion-arrow {
    margin-left: auto;
    color: var(--text-muted);
    font-size: 1rem;
}
.sp-completion-item:hover .sp-completion-arrow {
    color: var(--accent-primary);
}

@media (max-width: 640px) {
    .sp-completion-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .sp-completion-badge {
        align-self: flex-end;
    }
}

/* ── Spotlight Search ──────────────────────────────── */
.spotlight-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 20vh;
}
.spotlight-modal {
    width: 100%; max-width: 580px;
    background: var(--bg-elevated); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl); overflow: hidden;
    border: 1px solid var(--border-primary);
}
.spotlight-input-wrap {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-4); border-bottom: 1px solid var(--border-secondary);
}
.spotlight-search-icon { color: var(--text-muted); flex-shrink: 0; }
.spotlight-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: var(--text-lg); color: var(--text-primary);
    font-family: var(--font-family);
}
.spotlight-input::placeholder { color: var(--text-muted); }
.spotlight-kbd {
    padding: 2px 8px; border-radius: var(--radius-xs);
    background: var(--bg-tertiary); color: var(--text-muted);
    font-size: var(--text-xs); font-family: var(--font-mono);
    border: 1px solid var(--border-primary);
}
.spotlight-results { max-height: 400px; overflow-y: auto; }
.spotlight-category {
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}
.spotlight-result {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    text-decoration: none; color: var(--text-primary);
    transition: background var(--transition-fast);
}
.spotlight-result:hover, .spotlight-selected {
    background: var(--bg-hover);
}
.spotlight-avatar {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-primary); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    flex-shrink: 0;
}
.spotlight-icon { font-size: 20px; width: 32px; text-align: center; flex-shrink: 0; }
.spotlight-result-text { display: flex; flex-direction: column; min-width: 0; }
.spotlight-result-name { font-weight: var(--font-medium); }
.spotlight-result-meta { font-size: var(--text-sm); color: var(--text-muted); }
.spotlight-empty {
    padding: var(--space-8) var(--space-4);
    text-align: center; color: var(--text-muted);
}
.spotlight-trigger {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    background: var(--bg-primary); color: var(--text-muted);
    cursor: pointer; font-size: var(--text-sm);
    transition: all var(--transition-fast);
}
.spotlight-trigger:hover { border-color: var(--border-focus); color: var(--text-secondary); }
.spotlight-trigger kbd {
    font-size: var(--text-xs); color: var(--text-muted);
    font-family: var(--font-mono);
}

/* ═══════════════════════════════════════════════════════════════
   Onboarding Wizard (Student First-Login)
   ═══════════════════════════════════════════════════════════════ */

.sp-onboarding-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-overlay);
    padding: 1rem;
}

.sp-onboarding-card {
    background: var(--bg-elevated);
    border-radius: 16px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 560px;
    padding: 2.5rem;
    animation: onboarding-slide-up 0.4s ease-out;
}

@keyframes onboarding-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Progress indicator ──────────────────────────────────────── */

.sp-onboarding-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 2rem;
}

.sp-onboarding-step {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    border: 2px solid var(--border-primary);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.sp-onboarding-step.active {
    background: var(--accent-primary);
    color: var(--text-inverse);
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 4px var(--accent-primary-muted);
}

.sp-onboarding-step.completed {
    background: var(--color-success);
    color: var(--text-inverse);
    border-color: var(--color-success);
}

.sp-onboarding-line {
    width: 48px;
    height: 2px;
    background: var(--border-primary);
    flex-shrink: 0;
}

/* ── Content ─────────────────────────────────────────────────── */

.sp-onboarding-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.sp-onboarding-content > p {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* ── Photo upload zone ───────────────────────────────────────── */

.sp-onboarding-photo-upload {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.sp-onboarding-photo-zone {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    border: 2px dashed var(--border-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
    background: var(--bg-secondary);
}

.sp-onboarding-photo-zone:hover {
    border-color: var(--accent-primary);
    background: var(--accent-primary-light);
}

.sp-onboarding-avatar-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.sp-onboarding-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.sp-onboarding-photo-preview {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

/* ── Actions bar ─────────────────────────────────────────────── */

.sp-onboarding-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-secondary);
}

/* ── CTA card (personality test) ─────────────────────────────── */

.sp-onboarding-cta-card {
    background: var(--accent-primary-light);
    border: 1px solid var(--accent-primary-muted);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    margin-bottom: 1rem;
}

.sp-onboarding-cta-card svg {
    color: var(--accent-primary);
    margin-bottom: 0.75rem;
}

.sp-onboarding-cta-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.sp-onboarding-cta-card p {
    color: var(--text-secondary);
    font-size: 0.875rem;
}

/* ── Form elements inside onboarding ─────────────────────────── */

.sp-onboarding-content .form-label {
    display: block;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

.sp-onboarding-content .form-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    font-size: 0.9375rem;
    background: var(--bg-input);
    color: var(--text-primary);
    transition: border-color 0.2s;
}

.sp-onboarding-content .form-input:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-primary-muted);
}

.sp-onboarding-content .form-hint {
    font-size: 0.8125rem;
    color: var(--text-muted);
    margin-top: 0.375rem;
}

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

@media (max-width: 640px) {
    .sp-onboarding-card {
        padding: 1.5rem;
        max-width: 100%;
    }
    .sp-onboarding-photo-zone {
        width: 120px;
        height: 120px;
    }
    .sp-onboarding-actions {
        flex-direction: column;
    }
    .sp-onboarding-actions .sp-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ── Placement Speed Banner (Dashboard) ────────────── */
.placement-speed-banner {
    display: flex; align-items: center; gap: var(--space-5);
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-6);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(37, 99, 235, 0.02));
    border: 2px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}
.placement-speed-icon {
    width: 52px; height: 52px; border-radius: var(--radius-lg);
    background: var(--badge-blue-bg); color: var(--accent-primary);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.placement-speed-content { flex: 1; }
.placement-speed-label {
    font-size: var(--text-xs); font-weight: var(--font-bold);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    color: var(--accent-primary); margin-bottom: var(--space-1);
}
.placement-speed-desc {
    font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5;
}
.placement-speed-meta { color: var(--text-tertiary); font-size: var(--text-xs); }
.placement-speed-value { text-align: center; flex-shrink: 0; }
.placement-speed-number {
    font-size: var(--text-4xl); font-weight: var(--font-bold);
    color: var(--accent-primary); line-height: 1;
    display: block;
}
.placement-speed-unit {
    font-size: var(--text-xs); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
@media (max-width: 600px) {
    .placement-speed-banner { flex-direction: column; text-align: center; padding: var(--space-4); }
    .placement-speed-value { margin-top: var(--space-2); }
}

/* ── Coaching Dashboard ─────────────────────────────── */
.cd-kpi-grid {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4); margin-bottom: var(--space-6);
}
@media (max-width: 1100px) { .cd-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .cd-kpi-grid { grid-template-columns: 1fr; } }

.cd-kpi {
    display: flex; align-items: flex-start; gap: var(--space-4);
    padding: var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: all var(--transition-fast);
    border-top: 3px solid transparent;
}
.cd-kpi:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.cd-kpi--blue   { border-top-color: var(--accent-primary); }
.cd-kpi--purple { border-top-color: var(--accent-secondary); }
.cd-kpi--accent { border-top-color: var(--color-info); }
.cd-kpi--green  { border-top-color: var(--color-success); }

.cd-kpi-icon {
    width: 48px; height: 48px; border-radius: var(--radius-lg);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.cd-kpi--blue .cd-kpi-icon   { background: var(--badge-blue-bg);   color: var(--badge-blue-text); }
.cd-kpi--purple .cd-kpi-icon { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
.cd-kpi--accent .cd-kpi-icon { background: var(--badge-cyan-bg);   color: var(--badge-cyan-text); }
.cd-kpi--green .cd-kpi-icon  { background: var(--badge-green-bg);  color: var(--badge-green-text); }

.cd-kpi-body { flex: 1; }
.cd-kpi-label {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    color: var(--text-muted); margin-bottom: var(--space-1);
}
.cd-kpi-value {
    font-size: var(--text-3xl); font-weight: var(--font-bold);
    line-height: 1; color: var(--text-primary); margin-bottom: var(--space-1);
}
.cd-kpi--blue .cd-kpi-value   { color: var(--accent-primary); }
.cd-kpi--purple .cd-kpi-value { color: var(--accent-secondary); }
.cd-kpi--accent .cd-kpi-value { color: var(--color-info); }
.cd-kpi--green .cd-kpi-value  { color: var(--color-success); }

.cd-kpi-sub { font-size: var(--text-xs); color: var(--text-muted); }

/* Alert list */
.cd-alert-list { display: flex; flex-direction: column; }
.cd-alert-item {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--border-secondary);
    transition: background var(--transition-fast);
}
.cd-alert-item:last-child { border-bottom: none; }
.cd-alert-item:hover { background: var(--bg-hover); }
.cd-alert-item--warning { border-left: 3px solid var(--color-warning); }
.cd-alert-item--critical { border-left: 3px solid var(--color-error); }

.cd-alert-avatar {
    width: 40px; height: 40px; border-radius: var(--radius-full);
    background: var(--badge-blue-bg); color: var(--badge-blue-text);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--font-bold);
    flex-shrink: 0;
}
.cd-alert-item--critical .cd-alert-avatar {
    background: var(--badge-red-bg); color: var(--badge-red-text);
}
.cd-alert-info { flex: 1; min-width: 0; }
.cd-alert-name { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }
.cd-alert-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.cd-alert-days { flex-shrink: 0; }

/* Recap section */
.cd-recap {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: var(--space-4); margin-top: var(--space-4);
}
@media (max-width: 900px) { .cd-recap { grid-template-columns: 1fr; } }

.cd-recap-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-xs);
}
.cd-recap-title {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary); margin-bottom: var(--space-4);
    display: flex; align-items: center; gap: var(--space-2);
}
.cd-recap-title .icon { color: var(--text-muted); }
.cd-recap-progress-wrap { display: flex; flex-direction: column; gap: var(--space-2); }
.cd-recap-progress-bar {
    height: 10px; background: var(--bg-tertiary);
    border-radius: var(--radius-full); overflow: hidden;
}
.cd-recap-progress-fill {
    height: 100%; background: var(--color-success);
    border-radius: var(--radius-full); transition: width 300ms ease;
}
.cd-recap-progress-label { font-size: var(--text-sm); color: var(--text-secondary); }
.cd-recap-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.section-badge--red {
    background: var(--badge-red-bg); color: var(--badge-red-text);
    font-size: 11px; font-weight: var(--font-bold);
    padding: 2px 8px; border-radius: var(--radius-full);
}

/* ── Insights Prescriptifs ──────────────────────────── */
.insights-section { margin-bottom: var(--space-6); }
.insights-grid { display: flex; flex-direction: column; gap: var(--space-3); }
.insight-card {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    border-left: 4px solid transparent;
    transition: all var(--transition-fast);
}
.insight-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.insight-card-error { border-left-color: var(--color-error); }
.insight-card-warning { border-left-color: var(--color-warning); }
.insight-card-info { border-left-color: var(--color-info); }
.insight-card-success { border-left-color: var(--color-success); }
.insight-icon {
    width: 44px; height: 44px; border-radius: var(--radius-md);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.insight-card-error .insight-icon { background: var(--badge-red-bg); color: var(--badge-red-text); }
.insight-card-warning .insight-icon { background: var(--badge-orange-bg); color: var(--badge-orange-text); }
.insight-card-info .insight-icon { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
.insight-card-success .insight-icon { background: var(--badge-green-bg); color: var(--badge-green-text); }
.insight-content { flex: 1; min-width: 0; }
.insight-title { font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-1); }
.insight-desc { font-size: var(--text-sm); color: var(--text-secondary); }

@media (max-width: 768px) {
    .insight-card { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════════════════════
   MICRO-ANIMATIONS — Subtle, performant, user-friendly
   ══════════════════════════════════════════════════════════════ */

/* ── Respect reduced motion preference ────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Entrance Animations ─────────────────────────────────── */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

/* ── Attention Animations ────────────────────────────────── */
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    70% { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}
@keyframes gentle-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}
@keyframes glow-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.2); }
    50% { box-shadow: 0 0 16px 4px rgba(37, 99, 235, 0.15); }
}

/* ── Celebration Animations ──────────────────────────────── */
@keyframes confetti-fall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(720deg); opacity: 0; }
}
@keyframes badge-reveal {
    0% { transform: scale(0) rotate(-180deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(10deg); opacity: 1; }
    70% { transform: scale(0.9) rotate(-5deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes star-burst {
    0% { transform: scale(0); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.8; }
    100% { transform: scale(2); opacity: 0; }
}
@keyframes counter-up {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Loading Animation ───────────────────────────────────── */
@keyframes logo-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.08); opacity: 1; }
}
@keyframes logo-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes progress-indeterminate {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

/* ── Utility Classes for Animations ──────────────────────── */
.anim-fade-in-up { animation: fadeInUp 0.4s ease-out both; }
.anim-fade-in-down { animation: fadeInDown 0.4s ease-out both; }
.anim-fade-in-scale { animation: fadeInScale 0.3s ease-out both; }
.anim-slide-in-left { animation: slideInLeft 0.4s ease-out both; }
.anim-slide-in-right { animation: slideInRight 0.4s ease-out both; }
.anim-pulse-ring { animation: pulse-ring 2s ease-out infinite; }
.anim-gentle-shake { animation: gentle-shake 0.5s ease-out; }
.anim-glow-pulse { animation: glow-pulse 2s ease-in-out infinite; }

/* Stagger delays for lists */
.anim-stagger > :nth-child(1) { animation-delay: 0ms; }
.anim-stagger > :nth-child(2) { animation-delay: 60ms; }
.anim-stagger > :nth-child(3) { animation-delay: 120ms; }
.anim-stagger > :nth-child(4) { animation-delay: 180ms; }
.anim-stagger > :nth-child(5) { animation-delay: 240ms; }
.anim-stagger > :nth-child(6) { animation-delay: 300ms; }
.anim-stagger > :nth-child(7) { animation-delay: 360ms; }
.anim-stagger > :nth-child(8) { animation-delay: 420ms; }

/* ── Page Loading Screen ─────────────────────────────────── */
.page-loader {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--bg-primary);
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.page-loader.loaded {
    opacity: 0; visibility: hidden; pointer-events: none;
}
.page-loader-logo {
    width: 48px; height: 48px;
    border: 3px solid var(--border-secondary);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: logo-rotate 0.8s linear infinite;
}
.page-loader-text {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    color: var(--text-muted);
    font-weight: var(--font-medium);
    animation: logo-pulse 1.5s ease-in-out infinite;
}
.page-loader-bar {
    width: 120px; height: 3px;
    background: var(--bg-tertiary);
    border-radius: 2px;
    overflow: hidden;
    margin-top: var(--space-3);
}
.page-loader-bar-fill {
    width: 30%; height: 100%;
    background: var(--accent-primary);
    border-radius: 2px;
    animation: progress-indeterminate 1.2s ease-in-out infinite;
}

/* ── Alert Drop Risk & Insight Error Animations ──────────── */
.alert-item-drop {
    animation: pulse-ring 2.5s ease-out infinite;
    border-left: 3px solid var(--color-error);
}
.insight-card-error {
    animation: glow-pulse 3s ease-in-out infinite;
}

/* ── Confetti ────────────────────────────────────────────── */
.confetti-container {
    position: fixed; inset: 0; z-index: 10000;
    pointer-events: none; overflow: hidden;
}
.confetti-piece {
    position: absolute; top: -10px;
    width: 10px; height: 10px;
    animation: confetti-fall linear forwards;
}
.confetti-square { border-radius: 2px; }
.confetti-circle { border-radius: 50%; }
.confetti-triangle {
    width: 0; height: 0; background: none !important;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid var(--accent-primary);
}

/* ── Celebration Overlay (placement success) ─────────────── */
.celebration-overlay {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    animation: fadeInScale 0.3s ease-out both;
}
.celebration-overlay.celebration-exit {
    animation: fadeOutScale 0.3s ease-in both;
}
@keyframes fadeOutScale {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.95); }
}
.celebration-content {
    text-align: center; padding: var(--space-8);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    animation: fadeInUp 0.5s ease-out 0.1s both;
    max-width: 400px;
}
.celebration-icon {
    width: 80px; height: 80px; margin: 0 auto var(--space-4);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    animation: badge-reveal 0.6s ease-out 0.2s both;
}
.celebration-icon-success {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
}
.celebration-title {
    font-size: var(--text-xl); font-weight: var(--font-bold);
    color: var(--text-primary); margin-bottom: var(--space-2);
}
.celebration-subtitle {
    font-size: var(--text-sm); color: var(--text-muted);
}

/* ── Star Burst ──────────────────────────────────────────── */
.star-burst-container {
    position: fixed; z-index: 10000; pointer-events: none;
    width: 0; height: 0;
}
.star-burst-particle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    animation: star-particle 0.8s ease-out forwards;
}
@keyframes star-particle {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(calc(cos(var(--angle)) * 40px), calc(sin(var(--angle)) * 40px)) scale(0); opacity: 0; }
}

/* ── Badge Unlock Overlay ────────────────────────────────── */
.badge-unlock-overlay {
    position: fixed; inset: 0; z-index: 10001;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(6px);
    animation: fadeInScale 0.3s ease-out both;
}
.badge-unlock-overlay.badge-unlock-exit {
    animation: fadeOutScale 0.3s ease-in both;
}
.badge-unlock-card {
    position: relative; text-align: center;
    padding: var(--space-8) var(--space-10);
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    max-width: 360px; width: 90%;
    overflow: hidden;
}
.badge-unlock-glow {
    position: absolute; inset: -50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--accent-primary) 10%, transparent) 0%, transparent 70%);
    animation: logo-pulse 2s ease-in-out infinite;
}
.badge-unlock-sparkles {
    position: absolute; inset: 0;
    pointer-events: none;
}
.badge-unlock-sparkle {
    position: absolute;
    width: 4px; height: 4px;
    border-radius: 50%;
    background: var(--color-warning);
    top: 50%; left: 50%;
    animation: sparkle-fly 1s ease-out calc(var(--i) * 0.08s) both;
}
@keyframes sparkle-fly {
    0% { transform: translate(0, 0) scale(1); opacity: 1; }
    100% {
        transform: translate(
            calc(cos(calc(var(--i) * 30deg)) * 80px),
            calc(sin(calc(var(--i) * 30deg)) * 80px)
        ) scale(0);
        opacity: 0;
    }
}
.badge-unlock-label {
    position: relative; z-index: 1;
    font-size: var(--text-xs); font-weight: var(--font-bold);
    text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--accent-primary);
    margin-bottom: var(--space-4);
    animation: fadeInDown 0.4s ease-out 0.2s both;
}
.badge-unlock-image {
    position: relative; z-index: 1;
    width: 120px; height: 120px;
    margin: 0 auto var(--space-4);
    animation: badge-reveal 0.7s ease-out 0.3s both;
}
.badge-unlock-image img {
    width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 4px 12px var(--accent-ring));
}
.badge-unlock-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--accent-primary) 10%, transparent);
    border-radius: 50%; color: var(--accent-primary);
}
.badge-unlock-name {
    position: relative; z-index: 1;
    font-size: var(--text-xl); font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--space-1);
    animation: fadeInUp 0.4s ease-out 0.5s both;
}
.badge-unlock-desc {
    position: relative; z-index: 1;
    font-size: var(--text-sm); color: var(--text-muted);
    margin-bottom: var(--space-3);
    animation: fadeInUp 0.4s ease-out 0.6s both;
}
.badge-unlock-xp {
    position: relative; z-index: 1;
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: color-mix(in srgb, var(--color-success) 12%, transparent);
    color: var(--color-success);
    font-weight: var(--font-bold); font-size: var(--text-sm);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    animation: fadeInUp 0.4s ease-out 0.7s both;
}
.badge-unlock-btn {
    position: relative; z-index: 1;
    animation: fadeInUp 0.4s ease-out 0.8s both;
}

/* ── Profile Completion Celebration ──────────────────────── */
.sp-completion-complete {
    text-align: center; padding: var(--space-4);
}
.sp-completion-complete-icon {
    width: 48px; height: 48px; margin: 0 auto var(--space-2);
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success); border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xl); font-weight: var(--font-bold);
    animation: badge-reveal 0.6s ease-out both;
}
.sp-completion-complete-text {
    font-weight: var(--font-semibold); color: var(--color-success);
    animation: fadeInUp 0.4s ease-out 0.3s both;
}

/* ── Status Bar (replaces completion card when profile is 100%) ── */
.sp-status-bar {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--space-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
}
.sp-status-item {
    display: flex; align-items: center; gap: var(--space-2);
    white-space: nowrap;
}
.sp-status-icon {
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.sp-status-icon-success { background: var(--badge-green-bg); color: var(--badge-green-text); }
.sp-status-icon-info { background: var(--badge-blue-bg); color: var(--badge-blue-text); }
.sp-status-icon-accent { background: color-mix(in srgb, var(--accent-primary) 12%, transparent); color: var(--accent-primary); }
.sp-status-icon-purple { background: var(--badge-purple-bg); color: var(--badge-purple-text); }
.sp-status-text {
    font-size: var(--text-sm); font-weight: var(--font-medium);
    color: var(--text-primary);
}
.sp-status-divider {
    width: 1px; height: 20px;
    background: var(--border-secondary);
    flex-shrink: 0;
}
.sp-status-actions {
    margin-left: auto;
    display: flex; gap: var(--space-2);
}
@media (max-width: 768px) {
    .sp-status-bar { flex-direction: column; align-items: flex-start; }
    .sp-status-divider { display: none; }
    .sp-status-actions { margin-left: 0; margin-top: var(--space-2); }
}

/* ══════════════════════════════════════════════════════════════
   SPLASH SCREEN — Post-login animated transition
   The bolt strikes from above, impacts the center, sends
   shockwaves + electric arcs, then the brand fades in.
   ══════════════════════════════════════════════════════════════ */

.splash {
    position: fixed; inset: 0; z-index: 99999;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--bg-primary);
    overflow: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.splash-exit {
    opacity: 0;
    transform: scale(1.05);
}

/* ── Full-screen flash on impact ─────────────────────────── */
.splash-flash {
    position: absolute; inset: 0;
    background: #FBBF24;
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    animation: splash-flash-bang 0.6s ease-out 0.35s both;
}
@keyframes splash-flash-bang {
    0%   { opacity: 0; }
    15%  { opacity: 0.6; }
    30%  { opacity: 0; }
    45%  { opacity: 0.2; }
    100% { opacity: 0; }
}

/* ── Electric arcs radiating from center ─────────────────── */
.splash-arcs {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 0; height: 0;
    z-index: 5;
    pointer-events: none;
}
.splash-arc {
    position: absolute;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom, #FBBF24, transparent);
    opacity: 0;
    transform-origin: top center;
    border-radius: 1px;
}
.splash-arc-1 { animation: splash-arc-shoot 0.5s ease-out 0.4s both; transform: rotate(0deg); }
.splash-arc-2 { animation: splash-arc-shoot 0.4s ease-out 0.45s both; transform: rotate(60deg); }
.splash-arc-3 { animation: splash-arc-shoot 0.5s ease-out 0.42s both; transform: rotate(130deg); }
.splash-arc-4 { animation: splash-arc-shoot 0.45s ease-out 0.38s both; transform: rotate(200deg); }
.splash-arc-5 { animation: splash-arc-shoot 0.5s ease-out 0.48s both; transform: rotate(270deg); }
.splash-arc-6 { animation: splash-arc-shoot 0.4s ease-out 0.44s both; transform: rotate(320deg); }
@keyframes splash-arc-shoot {
    0%   { height: 0; opacity: 1; }
    40%  { height: 120px; opacity: 0.8; }
    100% { height: 200px; opacity: 0; }
}

/* ── Shockwave rings from impact point ───────────────────── */
.splash-shockwave {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 2px solid #FBBF24;
    opacity: 0;
    pointer-events: none;
    z-index: 4;
}
.splash-shockwave-1 {
    animation: splash-shockwave-expand 1s ease-out 0.4s both;
}
.splash-shockwave-2 {
    animation: splash-shockwave-expand 1.2s ease-out 0.55s both;
}
@keyframes splash-shockwave-expand {
    0%   { width: 10px; height: 10px; opacity: 0.7; border-width: 3px; }
    100% { width: 500px; height: 500px; opacity: 0; border-width: 1px; }
}

/* ── Center content ──────────────────────────────────────── */
.splash-center {
    position: relative; z-index: 20;
    display: flex; flex-direction: column;
    align-items: center;
}

/* ── The Bolt — strikes from above ───────────────────────── */
.splash-bolt-wrapper {
    width: 80px; height: 100px;
    margin-bottom: var(--space-4);
    animation: splash-bolt-strike 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.splash-bolt {
    width: 100%; height: 100%;
    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.6))
            drop-shadow(0 0 40px rgba(251, 191, 36, 0.3))
            drop-shadow(0 0 80px rgba(217, 119, 6, 0.15));
}
.splash-bolt-shape {
    opacity: 0;
    animation: splash-bolt-fill 0.3s ease-out 0.35s forwards;
}
.splash-bolt-highlight {
    opacity: 0;
    animation: splash-bolt-fill 0.3s ease-out 0.45s forwards;
}
@keyframes splash-bolt-strike {
    0%   { transform: translateY(-120vh) scale(0.6) rotate(-8deg); opacity: 0; }
    60%  { transform: translateY(8px) scale(1.1) rotate(2deg); opacity: 1; }
    80%  { transform: translateY(-4px) scale(0.97) rotate(-1deg); }
    100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
@keyframes splash-bolt-fill {
    0%   { opacity: 0; }
    100% { opacity: 1; }
}

/* Continuous energy glow after landing */
.splash-bolt {
    animation: splash-bolt-energy 2s ease-in-out 1.2s infinite alternate;
}
@keyframes splash-bolt-energy {
    0%   { filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.5))
                   drop-shadow(0 0 24px rgba(251, 191, 36, 0.25)); }
    100% { filter: drop-shadow(0 0 24px rgba(251, 191, 36, 0.7))
                   drop-shadow(0 0 60px rgba(217, 119, 6, 0.4))
                   drop-shadow(0 4px 80px rgba(217, 119, 6, 0.15)); }
}

/* ── Brand text ──────────────────────────────────────────── */
.splash-brand {
    display: flex; align-items: baseline;
    animation: fadeInUp 0.5s ease-out 0.9s both;
}
.splash-brand-text {
    font-family: 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 900;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}
.splash-brand-dot {
    font-size: 3rem;
    font-weight: 900;
    color: #FBBF24;
    animation: splash-dot-pulse 1.2s ease-in-out 1.4s infinite alternate;
}
@keyframes splash-dot-pulse {
    0%   { opacity: 0.4; transform: scale(1); }
    100% { opacity: 1; transform: scale(1.3); }
}

/* ── Tagline ─────────────────────────────────────────────── */
.splash-tagline {
    font-family: 'Inter', sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    color: var(--text-muted);
    margin-top: var(--space-2);
    letter-spacing: 0.04em;
    animation: fadeInUp 0.5s ease-out 1.2s both;
}

/* ── Bottom loading bar ──────────────────────────────────── */
.splash-loader {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: var(--border-secondary);
    z-index: 20;
}
.splash-loader-bar {
    height: 100%;
    background: linear-gradient(90deg, #D97706, #FBBF24, #FDE68A, #FBBF24, #D97706);
    background-size: 200% 100%;
    border-radius: 0 2px 2px 0;
    animation: splash-loader-fill 3.5s cubic-bezier(0.4, 0, 0.2, 1) forwards,
               splash-loader-shimmer 1s linear infinite;
}
@keyframes splash-loader-fill {
    0%   { width: 0%; }
    15%  { width: 40%; }
    50%  { width: 70%; }
    85%  { width: 92%; }
    100% { width: 100%; }
}
@keyframes splash-loader-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Placement Timeline ──────────────────────────────── */
.timeline { position: relative; padding-left: var(--space-8); }
.timeline::before {
    content: ''; position: absolute; left: 15px; top: 0; bottom: 0;
    width: 2px; background: var(--border-primary);
}
.timeline-item {
    position: relative; margin-bottom: var(--space-5);
    padding-left: var(--space-4);
}
.timeline-dot {
    position: absolute; left: calc(-1 * var(--space-8) - 1px);
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--bg-elevated); border: 2px solid var(--border-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--text-xs); font-weight: var(--font-bold);
    color: var(--text-muted); z-index: 1;
}
.timeline-item-green .timeline-dot { border-color: var(--color-success); color: var(--color-success); background: var(--badge-green-bg); }
.timeline-item-blue .timeline-dot { border-color: var(--accent-primary); color: var(--accent-primary); background: var(--badge-blue-bg); }
.timeline-item-orange .timeline-dot { border-color: var(--color-warning); color: var(--color-warning); background: var(--badge-orange-bg); }
.timeline-item-red .timeline-dot { border-color: var(--color-error); color: var(--color-error); background: var(--badge-red-bg); }
.timeline-item-gray .timeline-dot { border-color: var(--border-primary); color: var(--text-muted); }
.timeline-content {
    background: var(--bg-elevated); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.timeline-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-1); }
.timeline-label { font-weight: var(--font-semibold); color: var(--text-primary); }
.timeline-dates { font-size: var(--text-sm); color: var(--text-muted); }
.timeline-scheduled { font-size: var(--text-sm); color: var(--accent-primary); font-weight: var(--font-medium); margin-top: var(--space-1); }
.timeline-actions { margin-top: var(--space-2); }

/* ── DataTable Filters & Search ─────────────────────── */
.dt-filters {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-primary);
    flex-wrap: wrap;
}
.dt-search {
    position: relative; display: flex; align-items: center;
}
.dt-search-icon {
    position: absolute; left: 10px; color: var(--text-muted); pointer-events: none;
}
.dt-search input {
    padding: 7px 10px 7px 32px; border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    font-size: var(--text-sm); background: var(--bg-primary); color: var(--text-primary);
    width: 240px; transition: border-color var(--transition-fast);
}
.dt-search input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 15%, transparent); }
.dt-filter-select {
    padding: 7px 28px 7px 10px; border: 1px solid var(--border-primary); border-radius: var(--radius-md);
    font-size: var(--text-sm); background: var(--bg-primary); color: var(--text-primary);
    appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center; cursor: pointer;
    transition: border-color var(--transition-fast);
}
.dt-filter-select:focus { outline: none; border-color: var(--accent); }
.dt-filter-dot {
    width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
    position: absolute; top: 4px; right: 4px; display: none;
}
.dt-filter-dot.active { display: block; }
.dt-count-badge {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--badge-blue-bg); color: var(--badge-blue-text);
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    padding: 2px 8px; border-radius: 10px; margin-left: var(--space-2);
}
.dt-empty {
    text-align: center; padding: var(--space-8); color: var(--text-muted); font-size: var(--text-sm);
}
.dt-empty .icon { margin-bottom: var(--space-2); opacity: .4; }

/* ── Monitoring Kanban ───────────────────────────────── */
.monitoring-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4);
}
.monitoring-col {
    background: var(--bg-secondary); border-radius: var(--radius-lg);
    padding: var(--space-3);
}
.monitoring-col-header {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-secondary); margin-bottom: var(--space-3);
    display: flex; align-items: center; gap: var(--space-2);
}
.monitoring-col-count {
    background: var(--bg-tertiary); border-radius: var(--radius-full);
    padding: 2px 8px; font-size: var(--text-xs);
}
.monitoring-card {
    background: var(--bg-elevated); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); padding: var(--space-3);
    margin-bottom: var(--space-2); transition: all var(--transition-fast);
}
.monitoring-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.monitoring-card-name { font-weight: var(--font-semibold); font-size: var(--text-sm); }
.monitoring-card-meta { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* ── Public pages (no sidebar) ───────────────────────── */
.public-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--bg-secondary); padding: var(--space-4);
}
.public-card {
    width: 100%; max-width: 560px;
    background: var(--bg-elevated); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.public-card-header {
    padding: var(--space-5); border-bottom: 1px solid var(--border-secondary);
    text-align: center;
}
.public-card-body { padding: var(--space-5); }
.public-card-footer {
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-secondary);
    display: flex; justify-content: flex-end; gap: var(--space-2);
}

/* Consent checkbox */
.consent-checkbox {
    padding: var(--space-3); margin-bottom: var(--space-4);
    background: var(--bg-secondary); border-radius: var(--radius-md);
    font-size: var(--text-sm);
}
.consent-checkbox label {
    display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer;
}
.consent-checkbox input[type="checkbox"] { margin-top: 3px; }
.consent-checkbox a { color: var(--accent-primary); text-decoration: underline; }

/* Deadline warning */
.public-deadline-warning {
    padding: var(--space-3) var(--space-4);
    background: var(--badge-orange-bg);
    color: var(--badge-orange-text);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

/* Progress bar */
.public-progress {
    display: flex; justify-content: center; gap: var(--space-1);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-secondary);
}
.public-progress-step {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--text-xs); color: var(--text-muted);
    font-weight: var(--font-medium);
}
.public-progress-step.active { color: var(--accent-primary); font-weight: var(--font-semibold); }
.public-progress-step.done { color: var(--color-success); }
.public-progress-dot {
    width: 24px; height: 24px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--border-primary);
    font-size: var(--text-xs); font-weight: var(--font-bold);
}
.public-progress-step.active .public-progress-dot {
    background: var(--accent-primary); border-color: var(--accent-primary); color: white;
}
.public-progress-step.done .public-progress-dot {
    background: var(--color-success); border-color: var(--color-success); color: white;
}
.public-progress-line {
    width: 40px; height: 2px; background: var(--border-primary); margin: 0 var(--space-1);
}
.public-progress-step.done + .public-progress-line { background: var(--color-success); }

/* OTP Input */
.otp-input {
    display: flex; justify-content: center; gap: var(--space-2); margin: var(--space-4) 0;
}
.otp-digit {
    width: 48px; height: 56px; text-align: center;
    font-size: var(--text-2xl); font-weight: var(--font-bold);
    border: 2px solid var(--border-primary); border-radius: var(--radius-md);
    background: var(--bg-primary); color: var(--text-primary);
    transition: border-color var(--transition-fast);
}
.otp-digit:focus { border-color: var(--accent-primary); box-shadow: var(--shadow-focus); outline: none; }

/* Progress dots for placement list */
.progress-dots { display: flex; gap: 4px; }
.progress-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--bg-tertiary);
}
.progress-dot-green { background: var(--color-success); }
.progress-dot-blue { background: var(--accent-primary); }
.progress-dot-orange { background: var(--color-warning); }
.progress-dot-red { background: var(--color-error); }
.progress-dot-gray { background: var(--border-primary); }

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

/* ── Breadcrumbs ─────────────────────────────────────────── */
.breadcrumbs {
    display: flex; align-items: center; gap: var(--space-1);
    font-size: var(--text-sm); color: var(--text-muted);
    margin-bottom: var(--space-4);
}
.breadcrumbs a {
    color: var(--text-muted); text-decoration: none;
    transition: color var(--transition-fast);
}
.breadcrumbs a:hover { color: var(--text-link); }
.breadcrumbs-sep { margin: 0 var(--space-1); }
.breadcrumbs-current { color: var(--text-primary); font-weight: var(--font-medium); }

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .splash-flash { animation: none; }
    .splash-arc { animation: none; }
    .splash-shockwave { animation: none; }
    .splash-bolt-wrapper { animation: none; opacity: 1; transform: none; }
    .splash-bolt-shape, .splash-bolt-highlight { animation: none; opacity: 1; }
    .splash-bolt { animation: none; filter: drop-shadow(0 0 12px rgba(251, 191, 36, 0.5)); }
    .splash-brand, .splash-tagline { animation: none; opacity: 1; }
    .splash-brand-dot { animation: none; opacity: 1; }
    .splash-loader-bar { animation: none; width: 100%; }
}


/* ═══════════════════════════════════════════════════════════════
   Chatbot Widget — Floating CODA Assistant
   ═══════════════════════════════════════════════════════════════ */

/* ── FAB (Floating Action Button) ─────────────────────────────── */
.chatbot-wrapper {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.chatbot-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--accent-primary, #2563EB);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.35), 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.chatbot-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 28px rgba(37, 99, 235, 0.45), 0 3px 12px rgba(0, 0, 0, 0.15);
}

.chatbot-fab:active {
    transform: scale(0.96);
}

.chatbot-fab-icon,
.chatbot-fab-close {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.chatbot-fab-close {
    opacity: 0;
    transform: rotate(-90deg);
}

.chatbot-panel--open ~ .chatbot-fab .chatbot-fab-icon {
    opacity: 0;
    transform: rotate(90deg);
}

.chatbot-panel--open ~ .chatbot-fab .chatbot-fab-close {
    opacity: 1;
    transform: rotate(0);
}

.chatbot-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--status-error, #EF4444);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bg-primary, #fff);
}

/* ── Panel ─────────────────────────────────────────────────────── */
.chatbot-panel {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 400px;
    max-height: 600px;
    background: var(--bg-primary, #fff);
    border-radius: 16px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.15), 0 4px 16px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-primary, #E5E7EB);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.96);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}

.chatbot-panel--open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* ── Header ────────────────────────────────────────────────────── */
.chatbot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--accent-primary, #2563EB);
    color: #fff;
    flex-shrink: 0;
}

.chatbot-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.chatbot-header-avatar {
    font-size: 28px;
    line-height: 1;
}

.chatbot-header-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
}

.chatbot-header-subtitle {
    font-size: 12px;
    opacity: 0.85;
    margin-top: 1px;
}

.chatbot-header-close {
    background: rgba(255, 255, 255, 0.15);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.chatbot-header-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ── Messages area ─────────────────────────────────────────────── */
.chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 300px;
    max-height: 380px;
    scroll-behavior: smooth;
}

.chatbot-messages::-webkit-scrollbar {
    width: 5px;
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: var(--border-secondary, #D1D5DB);
    border-radius: 99px;
}

/* ── Messages ──────────────────────────────────────────────────── */
.chatbot-msg {
    display: flex;
    gap: 8px;
    max-width: 92%;
    animation: chatbot-fadeIn 0.25s ease;
}

.chatbot-msg--user {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.chatbot-msg--assistant {
    align-self: flex-start;
}

.chatbot-msg-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    background: var(--bg-tertiary, #F1F3F6);
}

.chatbot-msg-bubble {
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--text-primary, #111827);
}

.chatbot-msg--assistant .chatbot-msg-bubble {
    background: var(--bg-secondary, #F8F9FB);
    border: 1px solid var(--border-primary, #E5E7EB);
    border-bottom-left-radius: 4px;
}

.chatbot-msg--user .chatbot-msg-bubble {
    background: var(--accent-primary, #2563EB);
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chatbot-msg--user .chatbot-msg-avatar {
    background: var(--accent-primary-subtle, #DBEAFE);
}

.chatbot-msg-content ul {
    margin: 6px 0;
    padding-left: 18px;
}

.chatbot-msg-content li {
    margin: 3px 0;
}

.chatbot-msg-content a {
    color: var(--text-link, #1D4ED8);
    text-decoration: underline;
}

.chatbot-msg--user .chatbot-msg-content a {
    color: #DBEAFE;
}

.chatbot-msg-content strong {
    font-weight: 600;
}

/* ── Typing indicator ──────────────────────────────────────────── */
.chatbot-typing {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px 8px;
}

.chatbot-typing-dots {
    display: flex;
    gap: 4px;
    padding: 10px 14px;
    background: var(--bg-secondary, #F8F9FB);
    border: 1px solid var(--border-primary, #E5E7EB);
    border-radius: 14px;
    border-bottom-left-radius: 4px;
}

.chatbot-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--text-muted, #9CA3AF);
    animation: chatbot-bounce 1.4s infinite ease-in-out;
}

.chatbot-typing-dots span:nth-child(2) { animation-delay: 0.16s; }
.chatbot-typing-dots span:nth-child(3) { animation-delay: 0.32s; }

/* ── Quick questions ───────────────────────────────────────────── */
.chatbot-quick-questions {
    margin-top: 8px;
}

.chatbot-quick-label {
    font-size: 12px;
    color: var(--text-tertiary, #6B7280);
    margin-bottom: 8px;
    font-weight: 500;
}

.chatbot-quick-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    margin-bottom: 6px;
    border: 1px solid var(--border-primary, #E5E7EB);
    border-radius: 10px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #111827);
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.chatbot-quick-btn:hover {
    background: var(--bg-hover, #F3F4F8);
    border-color: var(--accent-primary, #2563EB);
}

/* ── Input area ────────────────────────────────────────────────── */
.chatbot-input-area {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--border-primary, #E5E7EB);
    background: var(--bg-primary, #fff);
    flex-shrink: 0;
}

.chatbot-input {
    flex: 1;
    border: 1px solid var(--border-primary, #E5E7EB);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.4;
    resize: none;
    background: var(--bg-input, #fff);
    color: var(--text-primary, #111827);
    outline: none;
    transition: border-color 0.15s;
    max-height: 80px;
}

.chatbot-input:focus {
    border-color: var(--accent-primary, #2563EB);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.chatbot-input::placeholder {
    color: var(--text-muted, #9CA3AF);
}

.chatbot-send-btn {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--accent-primary, #2563EB);
    color: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s, opacity 0.15s;
}

.chatbot-send-btn:hover {
    background: var(--accent-primary-hover, #1D4ED8);
}

.chatbot-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ── Footer ────────────────────────────────────────────────────── */
.chatbot-footer {
    text-align: center;
    padding: 8px 16px;
    font-size: 10.5px;
    color: var(--text-muted, #9CA3AF);
    border-top: 1px solid var(--border-primary, #E5E7EB);
    background: var(--bg-secondary, #F8F9FB);
    flex-shrink: 0;
}

/* ── Animations ────────────────────────────────────────────────── */
@keyframes chatbot-fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes chatbot-bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .chatbot-wrapper {
        bottom: 16px;
        right: 16px;
    }

    .chatbot-panel {
        width: calc(100vw - 32px);
        max-height: calc(100vh - 120px);
        right: -8px;
    }
}

/* ── Dark mode ─────────────────────────────────────────────────── */
[data-theme="dark"] .chatbot-panel {
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .chatbot-fab {
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ── Reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .chatbot-panel { transition: none; }
    .chatbot-msg { animation: none; }
    .chatbot-typing-dots span { animation: none; opacity: 1; }
    .chatbot-fab { transition: none; }
}
/* ═══════════════════════════════════════════════════════════════
   KPI Dashboard — Spreadsheet-style annual tracking
   ═══════════════════════════════════════════════════════════════ */
.kpi-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--space-4); margin-bottom: var(--space-4); flex-wrap: wrap;
}
.kpi-page-header h1 { font-size: var(--text-xl); font-weight: var(--font-bold); margin: 0; }
.page-header-greeting {
    font-size: var(--text-xs); color: var(--text-muted);
    display: flex; align-items: center; gap: var(--space-1); margin-bottom: var(--space-1);
}
.page-header-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.kpi-campus-form { display: flex; align-items: center; gap: var(--space-2); }
.kpi-campus-select { font-size: var(--text-sm); padding: var(--space-1) var(--space-3); border-radius: var(--radius-sm); }

/* Table container */
.kpi-table-card { padding: 0; overflow: hidden; }
.kpi-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kpi-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); white-space: nowrap; }

/* Header */
.kpi-thead-row { background: var(--bg-secondary); }
.kpi-th {
    padding: var(--space-2) var(--space-2); font-weight: var(--font-semibold);
    color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider);
    text-align: center; border-bottom: 1px solid var(--border-primary);
    position: sticky; top: 0; background: var(--bg-secondary); z-index: 2;
}
.kpi-th-label { text-align: left; min-width: 200px; position: sticky; left: 0; z-index: 3; background: var(--bg-secondary); }
.kpi-th-label-inner { display: flex; align-items: center; gap: var(--space-2); }
.kpi-th-month { min-width: 68px; }
.kpi-th-current { background: var(--accent-primary-light); color: var(--accent-primary); }
.kpi-current-dot {
    display: inline-block; width: 6px; height: 6px; border-radius: var(--radius-full);
    background: var(--accent-primary); margin-left: var(--space-1); vertical-align: middle;
}
.kpi-th-total { min-width: 80px; font-weight: var(--font-bold); }
.kpi-th-trend { min-width: 80px; }
.kpi-th-actions { min-width: 70px; }

/* Body rows */
.kpi-row { transition: background var(--transition-fast); }
.kpi-row:hover { background: var(--bg-hover); }
.kpi-td {
    padding: var(--space-2); border-bottom: 1px solid var(--border-secondary);
    text-align: center; vertical-align: middle;
}
.kpi-td-label {
    text-align: left; position: sticky; left: 0;
    background: var(--bg-elevated); z-index: 1;
}
.kpi-row:hover .kpi-td-label { background: var(--bg-hover); }
.kpi-td-current { background: var(--accent-primary-light); }
.kpi-td-child { padding-left: var(--space-3); }
.kpi-td-total { font-weight: var(--font-bold); background: var(--bg-secondary); }
.kpi-td-actions { text-align: right; }

/* Label cell */
.kpi-label-cell { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; }
.kpi-label-child { padding-left: var(--space-4); }
.kpi-child-indent { width: 16px; border-left: 2px solid var(--border-primary); height: 16px; margin-left: var(--space-2); }
.kpi-row-name { font-weight: var(--font-medium); color: var(--text-primary); }
.kpi-row-group-name { font-weight: var(--font-bold); color: var(--text-primary); }

/* Values */
.kpi-val { font-variant-numeric: tabular-nums; color: var(--text-primary); }
.kpi-val-group { font-weight: var(--font-bold); color: var(--accent-primary); }
.kpi-val-total { font-weight: var(--font-bold); }
.kpi-null { color: var(--text-muted); opacity: 0.5; }

/* Input cells */
.kpi-input {
    width: 60px; padding: var(--space-1); text-align: center;
    font-size: var(--text-xs); font-variant-numeric: tabular-nums;
    border: 1px solid var(--border-secondary); border-radius: var(--radius-xs);
    background: var(--bg-input); color: var(--text-primary);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.kpi-input:focus { border-color: var(--border-focus); box-shadow: var(--shadow-focus); outline: none; }
.kpi-input::placeholder { color: var(--text-muted); }

/* Trends */
.kpi-trend {
    display: inline-flex; align-items: center; gap: 2px;
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    padding: 2px var(--space-1-5); border-radius: var(--radius-xs);
}
.kpi-trend-up { color: var(--color-success); background: var(--color-success-light); }
.kpi-trend-down { color: var(--color-error); background: var(--color-error-light); }
.kpi-trend-na { color: var(--text-muted); font-size: var(--text-xs); }

/* Actions */
.kpi-actions { display: flex; gap: var(--space-1); justify-content: flex-end; position: relative; }
.btn-icon-danger { color: var(--color-error); }
.btn-icon-danger:hover { background: var(--color-error-light); }

/* Actions dropdown */
.kpi-more-btn { color: var(--text-muted); opacity: 0.4; transition: opacity var(--transition-fast); }
.kpi-row:hover .kpi-more-btn { opacity: 1; }
.kpi-actions-dropdown {
    display: none; position: absolute; right: 0; top: 100%; z-index: 10;
    background: var(--bg-elevated); border: 1px solid var(--border-primary);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    min-width: 160px; padding: var(--space-1) 0;
}
.kpi-actions.open .kpi-actions-dropdown { display: block; }
.kpi-actions-dropdown button {
    display: flex; align-items: center; gap: var(--space-2); width: 100%;
    padding: var(--space-2) var(--space-3); border: none; background: none;
    font-size: var(--text-xs); color: var(--text-primary); cursor: pointer;
    text-align: left; font-family: var(--font-family);
    transition: background var(--transition-fast);
}
.kpi-actions-dropdown button:hover { background: var(--bg-hover); }
.kpi-action-danger { color: var(--color-error) !important; }
.kpi-action-danger:hover { background: var(--color-error-light) !important; }

/* Toggle button (groups) */
.kpi-toggle-btn {
    display: flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border: none; background: none;
    cursor: pointer; color: var(--text-muted); border-radius: var(--radius-xs);
    transition: all var(--transition-fast);
}
.kpi-toggle-btn:hover { background: var(--bg-active); color: var(--text-primary); }
.kpi-row-group .kpi-toggle-btn .icon { transition: transform var(--transition-base); }

/* Group row styling */
.kpi-row-group { background: var(--bg-secondary); }
.kpi-row-group:hover { background: var(--bg-tertiary); }
.kpi-row-group .kpi-td-label { background: var(--bg-secondary); }
.kpi-row-group:hover .kpi-td-label { background: var(--bg-tertiary); }

/* Checkbox */
.kpi-checkbox-wrap { display: flex; align-items: center; cursor: pointer; }
.kpi-checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.kpi-checkbox-ui {
    width: 16px; height: 16px; border: 1.5px solid var(--border-primary);
    border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast); flex-shrink: 0;
}
.kpi-checkbox:checked + .kpi-checkbox-ui {
    background: var(--accent-primary); border-color: var(--accent-primary);
}
.kpi-checkbox:checked + .kpi-checkbox-ui::after {
    content: ''; display: block; width: 4px; height: 8px;
    border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.kpi-checkbox:focus + .kpi-checkbox-ui { box-shadow: var(--shadow-focus); }

/* Badge type */
.kpi-badge-type { font-size: 9px; padding: 1px 6px; margin-left: var(--space-1); }

/* Group bar */
.kpi-group-bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-2) var(--space-4);
    background: var(--accent-primary-light); border: 1px solid var(--accent-primary-muted);
    border-radius: var(--radius-md); margin-bottom: var(--space-3);
}
.kpi-group-bar-info { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--accent-primary); font-weight: var(--font-medium); }
.kpi-group-bar-actions { display: flex; gap: var(--space-2); }

/* Empty state */
.kpi-empty-state {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: var(--space-16) var(--space-5); text-align: center;
}
.kpi-empty-icon { color: var(--text-muted); opacity: 0.4; margin-bottom: var(--space-4); }
.kpi-empty-title { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--text-primary); margin-bottom: var(--space-2); }
.kpi-empty-sub { font-size: var(--text-sm); color: var(--text-muted); max-width: 320px; }

/* Table footer */
.kpi-table-footer {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border-secondary);
}
.kpi-table-hint { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: var(--space-2); }

/* Modal overlay — KPI modals (add/edit row, group) */
.modal-overlay {
    position: fixed; inset: 0; z-index: 1000;
    background: rgba(0,0,0,0.4); opacity: 0;
    pointer-events: none; transition: opacity var(--transition-base);
    display: flex; align-items: center; justify-content: center;
}
.modal-overlay--visible { opacity: 1; pointer-events: auto; }
.modal-overlay--visible .modal-dialog {
    transform: translateY(0); opacity: 1;
}
.modal-dialog {
    background: var(--bg-elevated); border: 1px solid var(--border-primary);
    border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
    padding: var(--space-6); width: 100%; max-width: 480px;
    transform: translateY(12px); opacity: 0;
    transition: transform var(--transition-base), opacity var(--transition-base);
}
.modal-dialog-lg { max-width: 600px; }
.modal-dialog-sm { max-width: 400px; }
.modal-header-title { display: flex; align-items: center; gap: var(--space-2); }
.modal-header-icon { color: var(--accent-primary); display: flex; align-items: center; }

/* Modal — KPI type selector */
.kpi-type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.kpi-type-card {
    cursor: pointer; border: 1.5px solid var(--border-primary);
    border-radius: var(--radius-md); transition: all var(--transition-fast);
    position: relative;
}
.kpi-type-card:hover { border-color: var(--accent-primary-muted); }
.kpi-type-card input[type="radio"] { position: absolute; opacity: 0; }
.kpi-type-card input[type="radio"]:checked ~ .kpi-type-card-body {
    border-color: var(--accent-primary); background: var(--accent-primary-light);
}
.kpi-type-card input[type="radio"]:checked + .kpi-type-card-body,
.kpi-type-card:has(input:checked) { border-color: var(--accent-primary); background: var(--accent-primary-light); }
.kpi-type-card-body { padding: var(--space-4); text-align: center; border-radius: var(--radius-md); }
.kpi-type-card-icon { margin-bottom: var(--space-2); color: var(--accent-primary); }
.kpi-type-card-label { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-primary); }
.kpi-type-card-sub { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-1); }

/* Query config section */
.kpi-query-section {
    background: var(--bg-secondary); border: 1px solid var(--border-secondary);
    border-radius: var(--radius-md); padding: var(--space-4); margin-top: var(--space-3);
}
.kpi-query-section-header {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2);
    margin-bottom: var(--space-4);
}
.kpi-query-row { display: flex; gap: var(--space-3); }
.kpi-filters-section { margin-top: var(--space-4); }
.kpi-filters-label {
    font-size: var(--text-xs); font-weight: var(--font-semibold); color: var(--text-muted);
    text-transform: uppercase; letter-spacing: var(--tracking-wider);
    display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2);
}
.kpi-filters-list { display: flex; flex-direction: column; gap: var(--space-2); }
.kpi-preview-section { margin-top: var(--space-4); padding-top: var(--space-3); border-top: 1px solid var(--border-secondary); }
.kpi-preview-btn { width: 100%; justify-content: center; }
.kpi-preview-result {
    display: flex; align-items: center; justify-content: center; gap: var(--space-3);
    padding: var(--space-3); margin-top: var(--space-2);
    background: var(--bg-elevated); border-radius: var(--radius-sm);
}
.kpi-preview-label { font-size: var(--text-sm); color: var(--text-muted); }
.kpi-preview-number { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--accent-primary); font-variant-numeric: tabular-nums; }

/* Info panel slide-over */
.kpi-info-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0,0,0,0.3); opacity: 0;
    pointer-events: none; transition: opacity var(--transition-base);
}
.kpi-info-overlay--visible { opacity: 1; pointer-events: auto; }
.kpi-info-panel {
    position: absolute; right: 0; top: 0; bottom: 0; width: 420px; max-width: 90vw;
    background: var(--bg-elevated); box-shadow: var(--shadow-xl);
    transform: translateX(100%); transition: transform var(--transition-slow);
    display: flex; flex-direction: column; overflow: hidden;
}
.kpi-info-overlay--visible .kpi-info-panel { transform: translateX(0); }
.kpi-info-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-primary);
}
.kpi-info-header h3 {
    font-size: var(--text-md); font-weight: var(--font-semibold);
    display: flex; align-items: center; gap: var(--space-2); margin: 0;
}
.kpi-info-body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.kpi-info-section { margin-bottom: var(--space-6); }
.kpi-info-section h4 {
    font-size: var(--text-sm); font-weight: var(--font-semibold);
    color: var(--text-primary); display: flex; align-items: center;
    gap: var(--space-2); margin: 0 0 var(--space-3) 0;
}
.kpi-info-section h4 .icon { color: var(--accent-primary); }
.kpi-info-dl { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-1) var(--space-3); }
.kpi-info-dl dt {
    font-size: var(--text-xs); font-weight: var(--font-semibold);
    color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wider);
}
.kpi-info-dl dd { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.kpi-info-section--highlight {
    background: var(--accent-primary-light); border: 1px solid var(--accent-primary-muted);
    border-radius: var(--radius-md); padding: var(--space-4);
}
.kpi-info-section--highlight p {
    font-size: var(--text-sm); color: var(--text-secondary);
    margin: 0 0 var(--space-2) 0; line-height: var(--leading-relaxed);
}
.kpi-info-section--highlight p:last-child { margin-bottom: 0; }

/* Responsive */
@media (max-width: 768px) {
    .kpi-page-header { flex-direction: column; }
    .kpi-type-grid { grid-template-columns: 1fr; }
    .kpi-query-row { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
   Onboarding Checklist — Coach welcome banner
   ═══════════════════════════════════════════════════════════════ */
.onboarding-card {
    background: var(--bg-elevated);
    border: 1px solid var(--accent-primary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-6);
    margin-bottom: var(--space-5);
}
.onboarding-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}
.onboarding-header-left {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}
.onboarding-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--accent-primary-light);
    color: var(--accent-primary);
    flex-shrink: 0;
}
.onboarding-title {
    font-size: var(--text-md);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    margin-bottom: var(--space-1);
}
.onboarding-progress-text {
    font-size: var(--text-sm);
    color: var(--text-tertiary);
}
.onboarding-dismiss-form {
    flex-shrink: 0;
}
.onboarding-progress-bar-wrap {
    height: 4px;
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-4);
}
.onboarding-progress-bar-fill {
    height: 100%;
    background: var(--accent-primary);
    border-radius: var(--radius-full);
    transition: width var(--transition-slow);
}
.onboarding-steps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--space-2);
}
.onboarding-step {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    transition: background var(--transition-fast), color var(--transition-fast);
    border: 1px solid var(--border-secondary);
}
.onboarding-step:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.onboarding-step-done {
    color: var(--text-muted);
}
.onboarding-step-done:hover {
    color: var(--text-secondary);
}
.onboarding-step-icon {
    color: var(--text-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
.onboarding-step-icon-done {
    color: var(--color-success);
}
.onboarding-step-label {
    flex: 1;
    min-width: 0;
}
.onboarding-step-done .onboarding-step-label {
    text-decoration: line-through;
}
.onboarding-step-arrow {
    color: var(--text-muted);
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
@media (max-width: 640px) {
    .onboarding-steps {
        grid-template-columns: 1fr;
    }
    .onboarding-header {
        flex-direction: column;
        gap: var(--space-3);
    }
}

/* ========================================================================== */
/*  COACHING STATS                                                             */
/* ========================================================================== */

/* Filters bar */
.coaching-stats-filters {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    flex-wrap: wrap;
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
}
.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
}
.filter-label {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.filter-tabs {
    display: flex;
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.filter-tab {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    background: var(--bg-primary);
    border: none;
    border-right: 1px solid var(--border-primary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
}
.filter-tab:last-child { border-right: none; }
.filter-tab:hover { background: var(--bg-tertiary); color: var(--text-primary); }
.filter-tab-active {
    background: var(--accent-primary);
    color: #fff;
}
.filter-tab-active:hover { background: var(--accent-primary); color: #fff; }
.filter-select {
    min-width: 200px;
    font-size: var(--text-sm);
}

/* 4-column KPI grid */
.kpi-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Stats tables */
.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.stats-table thead th {
    padding: var(--space-2-5) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--border-primary);
    text-align: left;
}
.stats-table tbody td {
    padding: var(--space-2-5) var(--space-3);
    border-bottom: 1px solid var(--border-secondary);
    vertical-align: middle;
}
.stats-table tbody tr:last-child td { border-bottom: none; }
.stats-table tbody tr:hover { background: var(--bg-secondary); }
.text-right { text-align: right; }
.text-xs { font-size: var(--text-xs); }
.text-muted { color: var(--text-secondary); }
.text-danger { color: var(--error); font-weight: 600; }
.text-warning { color: var(--warning); font-weight: 600; }

/* Coach cell with avatar */
.coach-cell {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.coach-cell-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--accent-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    flex-shrink: 0;
}

/* Activity rate badges */
.rate-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    font-weight: 700;
}
.rate-badge-green { background: rgba(16,185,129,0.12); color: #059669; }
.rate-badge-blue { background: rgba(59,130,246,0.12); color: #2563eb; }
.rate-badge-amber { background: rgba(245,158,11,0.12); color: #d97706; }
.rate-badge-red { background: rgba(239,68,68,0.12); color: #dc2626; }

/* Progress bar small variant */
.progress-bar-wrap-sm { height: 6px; }

/* Alerts table */
.alerts-table-wrap { overflow-x: auto; }
.stats-table-alerts tbody td { padding: var(--space-2) var(--space-3); }
.alert-row-high { border-left: 3px solid var(--error); }
.alert-row-medium { border-left: 3px solid var(--warning); }
.alert-row-low { border-left: 3px solid var(--info, #3b82f6); }
.alert-row-none { border-left: 3px solid var(--success); }

.alert-reasons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}
.alert-reason-pill {
    display: inline-block;
    padding: 2px 8px;
    font-size: var(--text-xs);
    color: var(--text-secondary);
    background: var(--bg-tertiary);
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.section-badge-red {
    background: rgba(239,68,68,0.12);
    color: #dc2626;
}

/* Responsive */
@media (max-width: 1024px) {
    .kpi-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .kpi-grid-4 { grid-template-columns: 1fr; }
    .coaching-stats-filters { flex-direction: column; align-items: stretch; }
    .filter-select { min-width: 100%; }
    .alerts-table-wrap { margin: 0 calc(-1 * var(--space-3)); }
}

/* ========================================================================== */
/*  SOFT SKILLS                                                                */
/* ========================================================================== */

/* KPI Grid */
.ss-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.ss-kpi-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-lg);
}
.ss-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ss-kpi-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text-primary);
}
.ss-kpi-value small {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
}
.ss-kpi-label {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin-top: var(--space-0-5, 2px);
}

/* Layout: radar + scores side by side */
.ss-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-5);
}

/* Radar card */
.ss-radar-card canvas {
    max-height: 380px;
}
.ss-radar-legend {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-secondary, var(--border-primary));
}
.ss-legend-item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5, 6px);
    font-size: var(--text-sm);
    color: var(--text-secondary);
}
.ss-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Scores table */
.ss-scores-table {
    font-size: var(--text-sm);
}
.ss-skill-icon {
    font-size: 1.1rem;
    margin-right: var(--space-1);
}
.ss-category-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    margin-left: var(--space-1);
    vertical-align: middle;
}
.ss-cat-interpersonal { background: rgba(37,99,235,0.1); color: #2563EB; }
.ss-cat-intrapersonal { background: rgba(124,58,237,0.1); color: #7C3AED; }
.ss-cat-cognitive { background: rgba(245,158,11,0.1); color: #D97706; }
.ss-cat-leadership { background: rgba(16,185,129,0.1); color: #059669; }

/* Score pills */
.ss-score-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.85rem;
}
.ss-score-1 { background: #FEE2E2; color: #DC2626; }
.ss-score-2 { background: #FEF3C7; color: #D97706; }
.ss-score-3 { background: #FEF9C3; color: #CA8A04; }
.ss-score-4 { background: #DCFCE7; color: #16A34A; }
.ss-score-5 { background: #D1FAE5; color: #059669; }

/* Delta & Progression */
.ss-delta {
    font-weight: 600;
    font-size: var(--text-sm);
}
.ss-delta-pos { color: #059669; }
.ss-delta-neg { color: #DC2626; }
.ss-delta-zero { color: var(--text-secondary); }

.ss-progression {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: var(--text-sm);
    font-weight: 600;
}
.ss-prog-up { color: #059669; }
.ss-prog-down { color: #DC2626; }
.ss-prog-stable { color: var(--text-secondary); }

/* Modal */
.ss-modal {
    border: none;
    border-radius: var(--radius-xl, 16px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    padding: 0;
    max-width: 500px;
    width: 90%;
}
.ss-modal::backdrop {
    background: rgba(0,0,0,0.5);
}
.ss-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--border-primary);
}
.ss-modal-header h3 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1.1rem;
    font-weight: 600;
}
.ss-modal-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    padding: var(--space-1);
    border-radius: var(--radius-sm);
}
.ss-modal-close:hover { background: var(--bg-tertiary); }
.ss-modal-body { padding: var(--space-5); }
.ss-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-top: 1px solid var(--border-primary);
}

/* Assess layout */
.ss-assess-layout {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: var(--space-5);
    align-items: start;
}
.ss-assess-preview-card {
    position: sticky;
    top: var(--space-4);
}

/* Category group */
.ss-category-group {
    margin-bottom: var(--space-4);
}
.ss-category-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--border-secondary, var(--border-primary));
}

/* Skill row in assess form */
.ss-skill-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-secondary, #f3f4f6);
}
.ss-skill-info {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ss-skill-name {
    font-weight: 500;
    font-size: var(--text-sm);
}

/* Slider */
.ss-slider-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.ss-score-labels {
    display: flex;
    gap: var(--space-2);
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.ss-slider {
    width: 140px;
    accent-color: var(--accent-primary, #2563EB);
}
.ss-score-display {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-tertiary, #f3f4f6);
}
.ss-score-display.ss-score-active {
    background: var(--accent-primary, #2563EB);
    color: #fff;
}

/* Comment toggle */
.ss-comment-toggle .btn { padding: 0.3rem 0.4rem; }
.ss-comment-field {
    grid-column: 1 / -1;
    padding-left: var(--space-6, 24px);
}

/* Assessor type selector */
.ss-assessor-types {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.ss-assessor-type-option {
    cursor: pointer;
}
.ss-assessor-type-option input {
    display: none;
}
.ss-assessor-type-option span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    border: 2px solid var(--border-primary);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: all 0.15s ease;
}
.ss-assessor-type-option input:checked + span {
    border-color: var(--accent-primary, #2563EB);
    background: rgba(37,99,235,0.08);
    color: var(--accent-primary, #2563EB);
}
.ss-assessor-type-option:hover span {
    border-color: var(--accent-primary, #2563EB);
}

/* Student portal self-assessment */
.ss-self-category {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    padding-bottom: var(--space-1);
    border-bottom: 1px solid var(--border-secondary, var(--border-primary));
}
.ss-self-category:first-of-type { margin-top: 0; }

.ss-self-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--border-secondary, #f3f4f6);
}
.ss-self-row:last-child { border-bottom: none; }
.ss-self-row .ss-skill-name { flex: 1; }

.ss-star-group {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.ss-star-btn {
    cursor: pointer;
    width: 32px;
    height: 32px;
    border: 2px solid var(--border-primary);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text-secondary);
    background: var(--bg-primary);
    transition: all 0.15s ease;
}
.ss-star-btn:hover {
    border-color: var(--accent-primary, #2563EB);
    color: var(--accent-primary, #2563EB);
}
.ss-star-btn.active {
    background: var(--accent-primary, #2563EB);
    border-color: var(--accent-primary, #2563EB);
    color: #fff;
}

/* Responsive */
@media (max-width: 1024px) {
    .ss-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .ss-layout { grid-template-columns: 1fr; }
    .ss-assess-layout { grid-template-columns: 1fr; }
    .ss-assess-preview-card { position: static; }
}
@media (max-width: 640px) {
    .ss-kpi-grid { grid-template-columns: 1fr; }
    .ss-skill-row { grid-template-columns: 1fr; }
    .ss-slider-group { justify-content: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════
   KPI v2 — Dashboard UI (Phase 3)
   12 groupements natifs + onglets campus + vue comparative
   ═══════════════════════════════════════════════════════════════ */

/* ── Onglets campus ───────────────────────────────────────────── */
.kpi-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 0 0 16px 0;
    margin: 0 0 16px 0;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
}
.kpi-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px 8px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-decoration: none;
    border: 1px solid transparent;
    transition: background-color 120ms ease, color 120ms ease;
}
.kpi-tab:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.kpi-tab-active {
    background: var(--bg-elevated);
    color: var(--text-primary);
    border-color: var(--border-color, #E5E7EB);
    border-bottom-color: transparent;
    box-shadow: 0 -1px 0 var(--accent-primary) inset;
}
.kpi-tab-sub {
    color: var(--text-muted);
    font-weight: 400;
}

/* ── Section titles ──────────────────────────────────────────── */
.kpi-native-section,
.kpi-unified-section,
.kpi-custom-section-header {
    margin-bottom: 24px;
}
.kpi-native-section-header,
.kpi-unified-section-header,
.kpi-custom-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 0 12px 0;
    flex-wrap: wrap;
}

/* ── Séparateur discret entre officiels et rows personnalisés ── */
.kpi-row-divider {
    background: transparent;
    pointer-events: none;
}
.kpi-row-divider:hover { background: transparent; }
.kpi-row-divider-cell {
    padding: 0;
    height: 8px;
    border-bottom: 1px dashed var(--border-secondary);
    background: var(--bg-primary);
}
.kpi-row-custom .kpi-td-label { /* hook dédié si ajustement nécessaire */ }
.kpi-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-primary);
}
.kpi-section-sub {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0;
}
.kpi-section-badges {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* ── Groupement row (native v2) ──────────────────────────────── */
.kpi-row-native {
    cursor: pointer;
    background: var(--bg-secondary);
}
.kpi-row-native:hover {
    background: var(--bg-hover);
}
.kpi-row-native.is-open {
    background: var(--bg-selected);
}
.kpi-row-matrix {
    background: var(--bg-primary);
    font-size: 12.5px;
    color: var(--text-secondary);
}
.kpi-matrix-class {
    display: inline-block;
    min-width: 28px;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-tertiary);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 11px;
    text-align: center;
}
.kpi-matrix-sep {
    color: var(--text-muted);
    padding: 0 2px;
}
.kpi-matrix-track {
    color: var(--text-secondary);
}

/* ── Cellule future (vide, grisée) ──────────────────────────── */
.kpi-td-future {
    background: var(--bg-secondary);
    opacity: 0.7;
}

/* ── Toggle button (rotation flèche) ─────────────────────────── */
.kpi-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 4px;
    color: var(--text-secondary);
    transition: transform 160ms ease, background-color 120ms ease;
}
.kpi-toggle-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.kpi-toggle-btn.is-open {
    transform: rotate(90deg);
}

/* ── Live dot (point bleu pulsant mois courant) ──────────────── */
.kpi-live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-primary);
    margin-left: 4px;
    animation: kpiLivePulse 2s ease-in-out infinite;
}
@keyframes kpiLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.8); }
}

/* ── Compare view (côte à côte) ──────────────────────────────── */
.kpi-compare-card {
    margin-bottom: 16px;
    padding: 0;
    overflow: hidden;
}
.kpi-compare-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color, #E5E7EB);
    cursor: pointer;
    user-select: none;
}
.kpi-compare-header:hover {
    background: var(--bg-hover);
}
.kpi-compare-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}
.kpi-compare-header-right {
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: var(--text-secondary);
    font-size: 12px;
}
.kpi-compare-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}
.kpi-compare-total-label {
    color: var(--text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.kpi-compare-total-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}
.kpi-compare-body {
    /* Animation propre au toggle inline style (display) */
}
.kpi-row-compare-total {
    background: var(--bg-selected);
    font-weight: 600;
}
.kpi-row-compare-total .kpi-td {
    border-top: 2px solid var(--accent-primary);
}

/* Responsive */
@media (max-width: 768px) {
    .kpi-compare-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .kpi-native-section-header,
    .kpi-unified-section-header,
    .kpi-custom-section-header {
        flex-direction: column;
        align-items: flex-start;
    }
}