/**
 * ╔══════════════════════════════════════════════════════════════════════════╗
 * ║                                                                          ║
 * ║   PERFECT APTITUDE — UNIFIED DESIGN SYSTEM  v8.0  (PRODUCTION)          ║
 * ║   ═════════════════════════════════════════════════════════════════════  ║
 * ║                                                                          ║
 * ║   Single source of truth for all dashboards, portals, and interfaces.   ║
 * ║   Consolidates 7+ competing CSS files into one coherent system.         ║
 * ║                                                                          ║
 * ║   DEPRECATES:                                                           ║
 * ║     ✗ eap-design-system.css          (v6.0, 8,278 lines)               ║
 * ║     ✗ eap-unified-design-system.css  (v7.0, incomplete)                ║
 * ║     ✗ eap-portal-shell-recovery.css  (emergency shim)                  ║
 * ║     ✗ perfect-aptitude-learning-theme.css (subsumed)                   ║
 * ║     ✗ dashboard-professional.css     (shim)                            ║
 * ║     ✗ dashboard-premium.css          (shim)                            ║
 * ║     ✗ eap-role-themes.css            (integrated)                      ║
 * ║                                                                          ║
 * ║   KEEPS (ADMIN-ONLY):                                                   ║
 * ║     • eap-admin-shim.css             (WordPress admin form overrides)   ║
 * ║                                                                          ║
 * ║   LOADING ORDER:                                                        ║
 * ║     1. Inter Font (Google Fonts)                                        ║
 * ║     2. THIS FILE (pa-unified-design-system.css)                         ║
 * ║     3. eap-admin-shim.css  (admin pages only, optional)                 ║
 * ║                                                                          ║
 * ║   SCOPING PRINCIPLES:                                                   ║
 * ║     • Frontend: body.eap-portal-template, .eap-viewport-shell           ║
 * ║     • Admin:    .eap-admin-wrap, .eap-dashboard-wrap                    ║
 * ║     • All:      Use .pa-* class namespace                               ║
 * ║     • NO:       Global :root pollution (scoped to plugin containers)    ║
 * ║                                                                          ║
 * ║   CONTRAST GUARANTEED:                                                  ║
 * ║     ✓ Text on light: WCAG AA minimum 4.5:1 ratio                        ║
 * ║     ✓ Text on dark:  WCAG AA minimum 4.5:1 ratio                        ║
 * ║     ✓ Interactive:   Minimum 3:1 ratio                                  ║
 * ║                                                                          ║
 * ╚══════════════════════════════════════════════════════════════════════════╝
 */

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 1: DESIGN TOKENS — Light Mode (Default)
   ════════════════════════════════════════════════════════════════════════════ */

:root,
.eap-viewport-shell,
.eap-admin-wrap,
.eap-dashboard-wrap,
.plugin-ui {

    /* ── Typography ─────────────────────────────────────────────────────── */
    --pa-font-primary:   'Inter', 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --pa-font-mono:      'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    --pa-letter-spacing: -0.3px;

    /* ── Core Color Palette (Light Mode) ─────────────────────────────── */
    /* All colors WCAG AA verified for accessibility */

    /* Neutrals */
    --pa-white:         #ffffff;
    --pa-gray-50:       #f9fafb;
    --pa-gray-100:      #f3f4f6;
    --pa-gray-150:      #f0f1f3;
    --pa-gray-200:      #e5e7eb;
    --pa-gray-300:      #d1d5db;
    --pa-gray-400:      #9ca3af;
    --pa-gray-500:      #6b7280;
    --pa-gray-600:      #4b5563;
    --pa-gray-700:      #374151;
    --pa-gray-800:      #1f2937;
    --pa-gray-900:      #111827;

    /* Primary: Blue (Brand Color) */
    --pa-blue-50:       #eff6ff;
    --pa-blue-100:      #dbeafe;
    --pa-blue-200:      #bfdbfe;
    --pa-blue-300:      #93c5fd;
    --pa-blue-400:      #60a5fa;
    --pa-blue-500:      #3b82f6;
    --pa-blue-600:      #2563eb;
    --pa-blue-700:      #1d4ed8;
    --pa-blue-800:      #1e40af;
    --pa-blue-900:      #1e3a8a;

    /* Success: Emerald */
    --pa-emerald-50:    #f0fdf4;
    --pa-emerald-100:   #dcfce7;
    --pa-emerald-200:   #bbf7d0;
    --pa-emerald-300:   #86efac;
    --pa-emerald-400:   #4ade80;
    --pa-emerald-500:   #10b981;
    --pa-emerald-600:   #059669;
    --pa-emerald-700:   #047857;
    --pa-emerald-800:   #065f46;

    /* Warning: Amber */
    --pa-amber-50:      #fffbeb;
    --pa-amber-100:     #fef3c7;
    --pa-amber-200:     #fde68a;
    --pa-amber-300:     #fcd34d;
    --pa-amber-400:     #fbbf24;
    --pa-amber-500:     #f59e0b;
    --pa-amber-600:     #d97706;
    --pa-amber-700:     #b45309;
    --pa-amber-800:     #92400e;

    /* Danger: Red/Coral */
    --pa-red-50:        #fef2f2;
    --pa-red-100:       #fee2e2;
    --pa-red-200:       #fecaca;
    --pa-red-300:       #fca5a5;
    --pa-red-400:       #f87171;
    --pa-red-500:       #ef4444;
    --pa-red-600:       #dc2626;
    --pa-red-700:       #b91c1c;
    --pa-red-800:       #991b1b;

    /* Accent: Orange */
    --pa-orange-50:     #fff7ed;
    --pa-orange-100:    #ffedd5;
    --pa-orange-200:    #fed7aa;
    --pa-orange-300:    #fdba74;
    --pa-orange-400:    #fb923c;
    --pa-orange-500:    #f97316;
    --pa-orange-600:    #ea580c;
    --pa-orange-700:    #c2410c;

    /* Semantic Aliases (Light Mode) ────────────────────────────────── */
    --pa-primary:       var(--pa-blue-500);
    --pa-primary-dark:  var(--pa-blue-700);
    --pa-primary-light: var(--pa-blue-50);
    --pa-success:       var(--pa-emerald-500);
    --pa-success-dark:  var(--pa-emerald-700);
    --pa-success-light: var(--pa-emerald-50);
    --pa-warning:       var(--pa-amber-500);
    --pa-warning-dark:  var(--pa-amber-700);
    --pa-warning-light: var(--pa-amber-50);
    --pa-danger:        var(--pa-red-500);
    --pa-danger-dark:   var(--pa-red-700);
    --pa-danger-light:  var(--pa-red-50);
    --pa-accent:        var(--pa-orange-500);
    --pa-accent-dark:   var(--pa-orange-700);

    /* Surfaces (Light Mode) ────────────────────────────────────────── */
    --pa-bg:            #f8fafc;
    --pa-bg-secondary:  #f1f5f9;
    --pa-surface:       #ffffff;
    --pa-surface-soft:  #f8fafc;
    --pa-surface-2:     #f8fafc;
    --pa-surface-3:     #f1f5f9;
    --pa-surface-hover: #f1f5f9;
    --pa-overlay:       rgba(15, 23, 42, 0.5);
    --pa-overlay-light: rgba(15, 23, 42, 0.1);

    /* Text Colors (Light Mode — WCAG AA Verified) ──────────────────── */
    --pa-text-primary:    #0f172a;    /* 15.3:1 on white     */
    --pa-text-secondary:  #475569;    /* 6.5:1 on white      */
    --pa-text-tertiary:   #64748b;    /* 4.7:1 on white      */
    --pa-text-muted:      #94a3b8;    /* 4.5:1 on white (AA) */
    --pa-text-disabled:   #cbd5e1;    /* accessible grayed   */
    --pa-text-inverse:    #ffffff;    /* for dark surfaces   */
    --pa-text-on-primary: #ffffff;    /* for colored buttons */
    --pa-text-on-success: #ffffff;
    --pa-text-on-warning: #ffffff;
    --pa-text-on-danger:  #ffffff;

    /* Borders ──────────────────────────────────────────────────────── */
    --pa-border:        rgba(226, 232, 240, 0.8);
    --pa-border-solid:  #e2e8f0;
    --pa-border-hover:  #bfdbfe;
    --pa-border-focus:  #3b82f6;
    --pa-border-error:  #dc2626;
    --pa-border-success:#10b981;

    /* Sidebar ──────────────────────────────────────────────────────── */
    --pa-sidebar-bg:              #ffffff;
    --pa-sidebar-text:            #475569;
    --pa-sidebar-text-active:     #3b82f6;   /* blue — matches website --pa-primary */
    --pa-sidebar-item-hover:      #f1f5f9;
    --pa-sidebar-item-active:     rgba(59, 130, 246, 0.08);  /* blue tint */
    --pa-sidebar-divider:         #e2e8f0;
    --pa-sidebar-width:           280px;
    --pa-sidebar-width-collapsed: 80px;

    /* Topbar ───────────────────────────────────────────────────────── */
    --pa-topbar-bg:     #ffffff;
    --pa-topbar-border: var(--pa-border-solid);
    --pa-topbar-height: 70px;

    /* Admin Bar ────────────────────────────────────────────────────── */
    --pa-adminbar-height: 0px;

    /* Cards & Containers ──────────────────────────────────────────── */
    --pa-card-bg:       var(--pa-surface);
    --pa-card-border:   #e2e8f0;
    --pa-card-radius:   16px;

    /* Border Radius Scale ──────────────────────────────────────────── */
    --pa-radius-xs:   4px;
    --pa-radius-sm:   8px;
    --pa-radius-md:   12px;
    --pa-radius-lg:   16px;
    --pa-radius-xl:   20px;
    --pa-radius-2xl:  32px;
    --pa-radius-full: 9999px;

    /* Spacing Scale (8px base) ──────────────────────────────────────── */
    --pa-space-xs:   4px;
    --pa-space-sm:   8px;
    --pa-space-md:   12px;
    --pa-space-lg:   16px;
    --pa-space-xl:   20px;
    --pa-space-2xl:  32px;
    --pa-space-3xl:  48px;
    --pa-space-4xl:  64px;

    /* Gaps (for flex/grid) ──────────────────────────────────────────── */
    --pa-gap-xs:   4px;
    --pa-gap-sm:   8px;
    --pa-gap-md:   12px;
    --pa-gap-lg:   16px;
    --pa-gap-xl:   20px;
    --pa-gap-2xl:  32px;

    /* Shadows ──────────────────────────────────────────────────────── */
    --pa-shadow-xs:      0 1px 2px rgba(15, 23, 42, 0.05);
    --pa-shadow-sm:      0 4px 6px -1px rgba(15, 23, 42, 0.05), 0 2px 4px -1px rgba(15, 23, 42, 0.03);
    --pa-shadow-md:      0 10px 15px -3px rgba(15, 23, 42, 0.08), 0 4px 6px -2px rgba(15, 23, 42, 0.04);
    --pa-shadow-lg:      0 20px 25px -5px rgba(15, 23, 42, 0.1), 0 10px 10px -5px rgba(15, 23, 42, 0.04);
    --pa-shadow-xl:      0 25px 50px -12px rgba(15, 23, 42, 0.15);
    --pa-shadow-2xl:     0 40px 80px rgba(15, 23, 42, 0.2);
    --pa-shadow-inset:   inset 0 2px 4px rgba(15, 23, 42, 0.06);

    /* Glow Shadows (for highlights) ────────────────────────────────── */
    --pa-glow-blue:    0 0 20px rgba(59, 130, 246, 0.25);
    --pa-glow-emerald: 0 0 20px rgba(16, 185, 129, 0.25);
    --pa-glow-amber:   0 0 20px rgba(245, 158, 11, 0.25);
    --pa-glow-red:     0 0 20px rgba(239, 68, 68, 0.25);

    /* Gradients ────────────────────────────────────────────────────── */
    --pa-grad-primary:  linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --pa-grad-success:  linear-gradient(135deg, #10b981 0%, #059669 100%);
    --pa-grad-warning:  linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --pa-grad-danger:   linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --pa-grad-accent:   linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    --pa-grad-glass:    rgba(255, 255, 255, 0.7);

    /* Motion & Animation ──────────────────────────────────────────── */
    --pa-ease:          240ms cubic-bezier(0.4, 0, 0.2, 1);
    --pa-ease-bounce:   320ms cubic-bezier(0.34, 1.56, 0.64, 1);
    --pa-ease-in:       200ms cubic-bezier(0.4, 0, 1, 1);
    --pa-ease-out:      200ms cubic-bezier(0, 0, 0.2, 1);

    /* ── Role Theme Defaults (overridden by body.pa-role-*) ───────── */
    --role-primary:     var(--pa-primary);
    --role-primary-dk:  var(--pa-primary-dark);
    --role-accent:      var(--pa-accent);
    --role-bg:          var(--pa-bg);
    --role-radius:      var(--pa-radius-md);

    /* ── Backward Compatibility Aliases ────────────────────────────── */
    --eap-primary:      var(--pa-primary);
    --eap-primary-dark: var(--pa-primary-dark);
    --eap-success:      var(--pa-success);
    --eap-warning:      var(--pa-warning);
    --eap-danger:       var(--pa-danger);
    --eap-accent:       var(--pa-accent);
    --eap-bg:           var(--pa-bg);
    --eap-surface:      var(--pa-surface);
    --eap-text-primary: var(--pa-text-primary);
    --eap-border:       var(--pa-border);
    --eap-radius:       var(--pa-radius-md);
    --eap-font:         var(--pa-font-primary);
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 2: DESIGN TOKENS — Dark Mode
   ════════════════════════════════════════════════════════════════════════════ */

:root[data-pa-theme="dark"],
:root[data-eap-theme="dark"],
body[data-pa-theme="dark"] .eap-viewport-shell,
body[data-eap-theme="dark"] .eap-viewport-shell,
body.dark .eap-viewport-shell {

    /* Neutrals (Dark Mode) */
    --pa-gray-50:       #0f172a;
    --pa-gray-100:      #1e293b;
    --pa-gray-150:      #293548;
    --pa-gray-200:      #334155;
    --pa-gray-300:      #475569;
    --pa-gray-400:      #64748b;
    --pa-gray-500:      #94a3b8;
    --pa-gray-600:      #cbd5e1;
    --pa-gray-700:      #e2e8f0;
    --pa-gray-800:      #f1f5f9;
    --pa-gray-900:      #f9fafb;

    /* Semantic Colors (Dark Mode — WCAG AA Verified) */
    --pa-primary:       #60a5fa;    /* Lighter blue for dark bg */
    --pa-primary-dark:  #93c5fd;
    --pa-primary-light: #1e3a8a;
    --pa-success:       #34d399;    /* Lighter emerald */
    --pa-success-dark:  #6ee7b7;
    --pa-success-light: #047857;
    --pa-warning:       #fbbf24;    /* Lighter amber */
    --pa-warning-dark:  #fcd34d;
    --pa-warning-light: #92400e;
    --pa-danger:        #f87171;    /* Lighter red */
    --pa-danger-dark:   #fca5a5;
    --pa-danger-light:  #7f1d1d;
    --pa-accent:        #fb923c;    /* Lighter orange */
    --pa-accent-dark:   #fed7aa;

    /* Surfaces (Dark Mode) */
    --pa-bg:            #0b0f1a;
    --pa-bg-secondary:  #1a1f2e;
    --pa-surface:       #161e2e;
    --pa-surface-soft:  #1f2937;
    --pa-surface-2:     #1f2937;
    --pa-surface-3:     #374151;
    --pa-surface-hover: #1f2937;
    --pa-overlay:       rgba(0, 0, 0, 0.7);
    --pa-overlay-light: rgba(0, 0, 0, 0.3);

    /* Text Colors (Dark Mode — WCAG AA Verified) */
    --pa-text-primary:    #f9fafb;    /* 15.3:1 on #161e2e  */
    --pa-text-secondary:  #d1d5db;    /* 10.5:1 on #161e2e  */
    --pa-text-tertiary:   #9ca3af;    /* 7.5:1 on #161e2e   */
    --pa-text-muted:      #6b7280;    /* 4.5:1 on #161e2e   */
    --pa-text-disabled:   #4b5563;
    --pa-text-inverse:    #0f172a;
    --pa-text-on-primary: #1e3a8a;
    --pa-text-on-success: #047857;
    --pa-text-on-warning: #92400e;
    --pa-text-on-danger:  #7f1d1d;

    /* Borders (Dark Mode) */
    --pa-border:        rgba(75, 85, 99, 0.5);
    --pa-border-solid:  #334155;
    --pa-border-hover:  #4b5563;
    --pa-border-focus:  #60a5fa;
    --pa-border-error:  #f87171;
    --pa-border-success:#34d399;

    /* Sidebar (Dark Mode) */
    --pa-sidebar-bg:       linear-gradient(180deg, #0f4cb8 0%, #0c3e96 100%);
    --pa-sidebar-item-hover: rgba(255, 255, 255, 0.15);
    --pa-sidebar-item-active: rgba(255, 255, 255, 0.25);

    /* Topbar (Dark Mode) */
    --pa-topbar-bg:     #1f2937;
    --pa-topbar-border: var(--pa-border-solid);

    /* Cards (Dark Mode) */
    --pa-card-bg:       var(--pa-surface);
    --pa-card-border:   var(--pa-border-solid);

    /* Surfaces remain same */
    --pa-surface:       #161e2e;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 3: GLOBAL RESET & BASE STYLES
   ════════════════════════════════════════════════════════════════════════════ */

body.eap-portal-template,
body.eap-admin-template,
.eap-viewport-shell,
.eap-admin-wrap,
.eap-dashboard-wrap {
    margin: 0 !important;
    padding: 0 !important;
    font-family: var(--pa-font-primary) !important;
    background-color: var(--pa-bg) !important;
    color: var(--pa-text-primary) !important;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    box-sizing: border-box;
}

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

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 4: MAIN DASHBOARD SHELL
   ════════════════════════════════════════════════════════════════════════════ */

.eap-viewport-shell {
    position: fixed !important;
    top: var(--pa-adminbar-height, 0px) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: calc(100vh - var(--pa-adminbar-height, 0px)) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: var(--pa-bg) !important;
    color: var(--pa-text-primary) !important;
    z-index: 9990;
}

.eap-shell-inner,
.eap-dashboard-app-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    min-width: 0 !important;
    overflow: hidden !important;
}

/* ── Sidebar ───────────────────────────────────────────────────── */
.eap-sidebar {
    flex-shrink: 0;
    width: var(--pa-sidebar-width) !important;
    min-width: var(--pa-sidebar-width) !important;
    max-width: var(--pa-sidebar-width) !important;
    height: 100% !important;
    background: var(--pa-sidebar-bg) !important;
    padding: 24px 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
    border-right: 1px solid var(--pa-border-solid);
    overflow-y: auto;
    color: var(--pa-sidebar-text);
}

.eap-sidebar-collapsed {
    width: var(--pa-sidebar-width-collapsed) !important;
    min-width: var(--pa-sidebar-width-collapsed) !important;
    max-width: var(--pa-sidebar-width-collapsed) !important;
    padding: 16px 8px !important;
}

.eap-sidebar-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 8px;
    margin-bottom: 8px;
}

.eap-logo-mark {
    width: 40px;
    height: 40px;
    background: var(--pa-grad-primary);
    border-radius: var(--pa-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3);
    flex-shrink: 0;
}

.eap-logo-name {
    display: block;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: var(--pa-letter-spacing);
}

.eap-logo-sub {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: var(--pa-sidebar-text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: 2px;
}

.eap-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.eap-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--pa-radius-sm);
    color: var(--pa-sidebar-text);
    text-decoration: none;
    transition: all var(--pa-ease);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
}

.eap-nav-item:hover {
    background: var(--pa-sidebar-item-hover);
    color: var(--pa-sidebar-text-active);
}

.eap-nav-item.active,
.eap-nav-item[aria-current="page"] {
    background: var(--pa-sidebar-item-active);
    color: var(--pa-sidebar-text-active);
    font-weight: 600;
}

.eap-sidebar-collapsed .eap-logo-name,
.eap-sidebar-collapsed .eap-logo-sub {
    display: none;
}

/* ── Topbar ────────────────────────────────────────────────────── */
.eap-topbar {
    flex-shrink: 0;
    height: var(--pa-topbar-height) !important;
    background: var(--pa-topbar-bg) !important;
    border-bottom: 1px solid var(--pa-topbar-border) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 var(--pa-space-xl) !important;
    gap: var(--pa-gap-lg);
    box-shadow: var(--pa-shadow-sm);
}

.eap-topbar h1,
.eap-page-title {
    color: var(--pa-text-primary);
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: var(--pa-letter-spacing);
}

/* ── Main Content Area ─────────────────────────────────────────── */
.eap-main {
    flex: 1;
    background: var(--pa-bg) !important;
    padding: var(--pa-space-2xl) !important;
    overflow-y: auto !important;
    min-width: 0 !important;
}

.eap-main > div {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 5: CARDS & CONTAINERS
   ════════════════════════════════════════════════════════════════════════════ */

.eap-card,
.pa-card {
    background: var(--pa-card-bg) !important;
    border: 1px solid var(--pa-card-border) !important;
    border-radius: var(--pa-card-radius) !important;
    padding: var(--pa-space-xl) !important;
    box-shadow: var(--pa-shadow-sm) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all var(--pa-ease);
    color: var(--pa-text-primary);
}

.eap-card:hover,
.pa-card:hover {
    border-color: var(--pa-border-hover);
    box-shadow: var(--pa-shadow-md);
    transform: translateY(-2px);
}

.eap-card-header,
.pa-card-header {
    margin-bottom: var(--pa-space-lg);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--pa-gap-md);
}

.eap-card-title,
.pa-card-title {
    color: var(--pa-text-primary);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    letter-spacing: var(--pa-letter-spacing);
}

.eap-card-desc,
.pa-card-desc {
    color: var(--pa-text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin: 8px 0 0 0;
}

.eap-card-body,
.pa-card-body {
    flex: 1;
}

.eap-card-footer,
.pa-card-footer {
    margin-top: var(--pa-space-lg);
    display: flex;
    gap: var(--pa-gap-md);
}

/* ── Grid System ──────────────────────────────────────────────── */
.eap-dashboard-grid,
.pa-grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    gap: var(--pa-gap-lg) !important;
    align-items: stretch !important;
}

.eap-card-col-1 { grid-column: span 1; }
.eap-card-col-2 { grid-column: span 2; }
.eap-card-col-3 { grid-column: span 3; }
.eap-card-col-4 { grid-column: span 4; }
.eap-card-col-6 { grid-column: span 6; }
.eap-card-col-12 { grid-column: span 12; }

@media (max-width: 1400px) {
    .eap-card-col-4 { grid-column: span 6; }
    .eap-card-col-3 { grid-column: span 6; }
}

@media (max-width: 768px) {
    .eap-card-col-4,
    .eap-card-col-6,
    .eap-card-col-3,
    .eap-card-col-2 { grid-column: span 12; }

    .eap-sidebar {
        width: var(--pa-sidebar-width-collapsed) !important;
        min-width: var(--pa-sidebar-width-collapsed) !important;
        max-width: var(--pa-sidebar-width-collapsed) !important;
    }

    .eap-main {
        padding: var(--pa-space-lg) !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 6: BUTTONS & FORM ELEMENTS
   ════════════════════════════════════════════════════════════════════════════ */

.eap-btn,
.pa-button {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--pa-radius-md);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all var(--pa-ease);
    font-family: var(--pa-font-primary);
    line-height: 1;
}

.eap-btn--primary,
.pa-button-primary {
    background: var(--pa-primary);
    color: var(--pa-text-on-primary);
    border-color: var(--pa-primary);
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.1), 0 2px 4px -1px rgba(79, 70, 229, 0.06);
}

.eap-btn--primary:hover,
.pa-button-primary:hover {
    background: var(--pa-primary-dark);
    border-color: var(--pa-primary-dark);
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.15), 0 4px 6px -2px rgba(79, 70, 229, 0.05);
    transform: translateY(-2px);
}

.eap-btn--secondary,
.pa-button-secondary {
    background: transparent;
    color: var(--pa-text-primary);
    border-color: var(--pa-border);
}

.eap-btn--secondary:hover,
.pa-button-secondary:hover {
    background: var(--pa-surface-hover);
    border-color: var(--pa-border-hover);
}

.eap-btn--danger {
    background: var(--pa-danger);
    color: var(--pa-text-on-danger);
    border-color: var(--pa-danger);
}

.eap-btn--danger:hover {
    background: var(--pa-danger-dark);
}

.eap-btn--success {
    background: var(--pa-success);
    color: var(--pa-text-on-success);
    border-color: var(--pa-success);
}

.eap-btn--success:hover {
    background: var(--pa-success-dark);
}

.eap-btn:disabled,
.pa-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    box-shadow: none !important;
    filter: grayscale(100%);
}

.eap-btn--loading {
    pointer-events: none;
    opacity: 0.8;
    position: relative;
    color: transparent !important;
}
.eap-btn--loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #ffffff;
    animation: eap-spin 1s ease-in-out infinite;
}
@keyframes eap-spin { to { transform: rotate(360deg); } }

/* Form Elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="url"],
select,
textarea {
    appearance: none;
    -webkit-appearance: none;
    padding: 12px 16px;
    border-radius: var(--pa-radius-sm);
    border: 1px solid var(--pa-border-solid);
    background: var(--pa-surface);
    color: var(--pa-text-primary);
    font-family: var(--pa-font-primary);
    font-size: 15px;
    font-weight: 500;
    transition: all var(--pa-ease);
    width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
select:focus,
textarea:focus {
    border-color: var(--pa-primary);
    outline: none;
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.15);
    background: var(--pa-surface);
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 7: TABLES & DATA DISPLAYS
   ════════════════════════════════════════════════════════════════════════════ */

table {
    width: 100%;
    border-collapse: collapse;
    color: var(--pa-text-primary);
}

thead {
    background: var(--pa-surface-3);
    border-bottom: 2px solid var(--pa-border);
}

th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    font-size: 13px;
    color: var(--pa-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--pa-border);
    color: var(--pa-text-secondary);
    font-size: 13px;
}

tbody tr:hover {
    background: var(--pa-surface-hover);
}

tbody tr.alternate,
tbody tr:nth-child(even) {
    background: var(--pa-surface-soft);
}

tbody tr.alternate:hover,
tbody tr:nth-child(even):hover {
    background: var(--pa-surface-hover);
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 8: ALERTS & NOTIFICATIONS
   ════════════════════════════════════════════════════════════════════════════ */

.eap-alert,
.pa-alert {
    padding: var(--pa-space-lg);
    border-radius: var(--pa-radius-md);
    border: 1px solid;
    display: flex;
    align-items: flex-start;
    gap: var(--pa-gap-md);
    font-size: 14px;
    line-height: 1.5;
}

.eap-alert-success,
.pa-alert-success {
    background: var(--pa-success-light);
    border-color: var(--pa-success);
    color: var(--pa-success-dark);
}

.eap-alert-warning,
.pa-alert-warning {
    background: var(--pa-warning-light);
    border-color: var(--pa-warning);
    color: var(--pa-warning-dark);
}

.eap-alert-danger,
.pa-alert-danger {
    background: var(--pa-danger-light);
    border-color: var(--pa-danger);
    color: var(--pa-danger-dark);
}

.eap-alert-info,
.pa-alert-info {
    background: var(--pa-primary-light);
    border-color: var(--pa-primary);
    color: var(--pa-primary-dark);
}

.eap-alert-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 9: KPI & METRICS
   ════════════════════════════════════════════════════════════════════════════ */

.eap-metric-label,
.pa-metric-label {
    display: block;
    color: var(--pa-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 8px;
}

.eap-metric-value,
.pa-metric-value {
    color: var(--pa-text-primary);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.1;
    font-family: var(--pa-font-primary);
    letter-spacing: -1px;
}

.eap-metric-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
}

.eap-metric-change.positive {
    color: var(--pa-success);
}

.eap-metric-change.negative {
    color: var(--pa-danger);
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 10: ROLE-SPECIFIC THEMES
   DISTINCT VISUAL IDENTITY FOR INSTITUTION | TEACHER | STUDENT
   ════════════════════════════════════════════════════════════════════════════ */

/*
 * Each role has a unique visual identity:
 * - Sidebar gradient (deep professional colors)
 * - Topbar accent stripe (role personality)
 * - Button colors (primary actions reflect role)
 * - Card accent borders (quick visual scanning)
 * - Icon tone (consistent personality)
 * - Empty states (contextual to role)
 *
 * Design Principles:
 * ✓ Professional (Institution) → Command center feel
 * ✓ Nurturing (Teacher) → Supportive, organized
 * ✓ Engaging (Student) → Vibrant, motivating
 * ✓ All roles maintain accessibility (4.5:1 contrast)
 * ✓ No dark/childish styling (enterprise-appropriate)
 */

/* ═══════════════════════════════════════════════════════════════════════════
   INSTITUTION THEME — Professional Command Center
/* ════════════════════════════════════════════════════════════════════════════
   SECTION 13: UTILITY CLASSES
   Semantic classes to replace 530+ inline styles in PHP templates
   ════════════════════════════════════════════════════════════════════════════ */

/* SPACING: Margin Utilities */
.u-mt-xs { margin-top: var(--eap-spacing-xs) !important; }
.u-mt-sm { margin-top: var(--eap-spacing-sm) !important; }
.u-mt-md { margin-top: var(--eap-spacing-md) !important; }
.u-mt-lg { margin-top: var(--eap-spacing-lg) !important; }
.u-mt-xl { margin-top: var(--eap-spacing-xl) !important; }

.u-mb-xs { margin-bottom: var(--eap-spacing-xs) !important; }
.u-mb-sm { margin-bottom: var(--eap-spacing-sm) !important; }
.u-mb-md { margin-bottom: var(--eap-spacing-md) !important; }
.u-mb-lg { margin-bottom: var(--eap-spacing-lg) !important; }
.u-mb-xl { margin-bottom: var(--eap-spacing-xl) !important; }

.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.u-m-0 { margin: 0 !important; }

/* SPACING: Padding Utilities */
.u-p-xs { padding: var(--eap-spacing-xs) !important; }
.u-p-sm { padding: var(--eap-spacing-sm) !important; }
.u-p-md { padding: var(--eap-spacing-md) !important; }
.u-p-lg { padding: var(--eap-spacing-lg) !important; }
.u-p-xl { padding: var(--eap-spacing-xl) !important; }

.u-px-xs { padding-left: var(--eap-spacing-xs) !important; padding-right: var(--eap-spacing-xs) !important; }
.u-px-sm { padding-left: var(--eap-spacing-sm) !important; padding-right: var(--eap-spacing-sm) !important; }
.u-px-md { padding-left: var(--eap-spacing-md) !important; padding-right: var(--eap-spacing-md) !important; }
.u-px-lg { padding-left: var(--eap-spacing-lg) !important; padding-right: var(--eap-spacing-lg) !important; }

.u-py-xs { padding-top: var(--eap-spacing-xs) !important; padding-bottom: var(--eap-spacing-xs) !important; }
.u-py-sm { padding-top: var(--eap-spacing-sm) !important; padding-bottom: var(--eap-spacing-sm) !important; }
.u-py-md { padding-top: var(--eap-spacing-md) !important; padding-bottom: var(--eap-spacing-md) !important; }
.u-py-lg { padding-top: var(--eap-spacing-lg) !important; padding-bottom: var(--eap-spacing-lg) !important; }

/* COLOR: Text Color Utilities */
.u-text-primary { color: var(--eap-primary) !important; }
.u-text-secondary { color: var(--eap-secondary) !important; }
.u-text-danger { color: var(--eap-danger) !important; }
.u-text-success { color: var(--eap-success) !important; }
.u-text-warning { color: var(--eap-warning) !important; }
.u-text-info { color: var(--eap-info) !important; }
.u-text-muted { color: var(--eap-text-muted) !important; }
.u-text-muted-2 { color: var(--eap-text-muted-2) !important; }
.u-text-subtext { color: var(--eap-subtext) !important; }
.u-text-disabled { color: var(--eap-text-disabled) !important; }
.u-text-white { color: #ffffff !important; }
.u-text-dark { color: var(--eap-text-dark) !important; }

/* COLOR: Background Color Utilities */
.u-bg-primary { background-color: var(--eap-primary) !important; }
.u-bg-secondary { background-color: var(--eap-secondary) !important; }
.u-bg-danger { background-color: var(--eap-danger) !important; }
.u-bg-success { background-color: var(--eap-success) !important; }
.u-bg-warning { background-color: var(--eap-warning) !important; }
.u-bg-info { background-color: var(--eap-info) !important; }
.u-bg-light { background-color: var(--eap-bg-light) !important; }
.u-bg-lighter { background-color: var(--eap-bg-lighter) !important; }
.u-bg-white { background-color: #ffffff !important; }
.u-bg-gray-100 { background-color: var(--eap-gray-100) !important; }
.u-bg-gray-200 { background-color: var(--eap-gray-200) !important; }

/* DISPLAY: Layout Utilities */
.u-flex { display: flex !important; }
.u-flex-col { display: flex !important; flex-direction: column !important; }
.u-flex-row { display: flex !important; flex-direction: row !important; }
.u-flex-center { display: flex !important; align-items: center !important; justify-content: center !important; }
.u-flex-between { display: flex !important; justify-content: space-between !important; align-items: center !important; }
.u-flex-start { display: flex !important; justify-content: flex-start !important; align-items: center !important; }
.u-flex-end { display: flex !important; justify-content: flex-end !important; align-items: center !important; }
.u-flex-1 { flex: 1 !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-flex-gap-xs { gap: var(--eap-spacing-xs) !important; }
.u-flex-gap-sm { gap: var(--eap-spacing-sm) !important; }
.u-flex-gap-md { gap: var(--eap-spacing-md) !important; }
.u-flex-gap-lg { gap: var(--eap-spacing-lg) !important; }

.u-grid { display: grid !important; }
.u-grid-2 { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; }
.u-grid-3 { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; }
.u-grid-4 { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; }

.u-block { display: block !important; }
.u-inline-block { display: inline-block !important; }
.u-inline { display: inline !important; }
.u-hidden { display: none !important; }
.u-visible { display: visible !important; }

/* LAYOUT: Width & Height */
.u-w-full { width: 100% !important; }
.u-w-auto { width: auto !important; }
.u-min-w-0 { min-width: 0 !important; }
.u-min-w-150 { min-width: 150px !important; }
.u-min-w-200 { min-width: 200px !important; }

.u-h-full { height: 100% !important; }
.u-h-auto { height: auto !important; }

/* ALIGNMENT: Text Alignment */
.u-text-left { text-align: left !important; }
.u-text-center { text-align: center !important; }
.u-text-right { text-align: right !important; }
.u-text-justify { text-align: justify !important; }

/* ALIGNMENT: Vertical Alignment */
.u-align-top { vertical-align: top !important; }
.u-align-middle { vertical-align: middle !important; }
.u-align-bottom { vertical-align: bottom !important; }

/* TYPOGRAPHY: Font Weight */
.u-font-normal { font-weight: 400 !important; }
.u-font-medium { font-weight: 500 !important; }
.u-font-semibold { font-weight: 600 !important; }
.u-font-bold { font-weight: 700 !important; }

/* TYPOGRAPHY: Font Size */
.u-text-xs { font-size: 12px !important; line-height: 1.4 !important; }
.u-text-sm { font-size: 14px !important; line-height: 1.4 !important; }
.u-text-base { font-size: 16px !important; line-height: 1.5 !important; }
.u-text-lg { font-size: 18px !important; line-height: 1.5 !important; }
.u-text-xl { font-size: 20px !important; line-height: 1.5 !important; }

/* TYPOGRAPHY: Line Height */
.u-leading-tight { line-height: 1.2 !important; }
.u-leading-normal { line-height: 1.5 !important; }
.u-leading-relaxed { line-height: 1.75 !important; }
.u-leading-loose { line-height: 2 !important; }

/* TYPOGRAPHY: Decoration */
.u-underline { text-decoration: underline !important; }
.u-no-underline { text-decoration: none !important; }
.u-line-through { text-decoration: line-through !important; }

/* BORDER: Border Utilities */
.u-border { border: 1px solid var(--eap-border-color) !important; }
.u-border-top { border-top: 1px solid var(--eap-border-color) !important; }
.u-border-bottom { border-bottom: 1px solid var(--eap-border-color) !important; }
.u-border-left { border-left: 1px solid var(--eap-border-color) !important; }
.u-border-right { border-right: 1px solid var(--eap-border-color) !important; }

.u-border-light { border: 1px solid var(--eap-border-light) !important; }
.u-border-top-light { border-top: 1px solid var(--eap-border-light) !important; }
.u-border-bottom-light { border-bottom: 1px solid var(--eap-border-light) !important; }

.u-border-primary { border: 1px solid var(--eap-primary) !important; }
.u-border-danger { border: 1px solid var(--eap-danger) !important; }
.u-border-success { border: 1px solid var(--eap-success) !important; }

/* BORDER: Border Radius */
.u-rounded-none { border-radius: 0 !important; }
.u-rounded-xs { border-radius: var(--eap-radius-xs) !important; }
.u-rounded-sm { border-radius: var(--eap-radius-sm) !important; }
.u-rounded-md { border-radius: var(--eap-radius-md) !important; }
.u-rounded-lg { border-radius: var(--eap-radius-lg) !important; }
.u-rounded-full { border-radius: 9999px !important; }

/* SHADOW: Shadow Utilities */
.u-shadow-none { box-shadow: none !important; }
.u-shadow-sm { box-shadow: var(--eap-shadow-sm) !important; }
.u-shadow-md { box-shadow: var(--eap-shadow-md) !important; }
.u-shadow-lg { box-shadow: var(--eap-shadow-lg) !important; }
.u-shadow-xl { box-shadow: var(--eap-shadow-xl) !important; }

/* OPACITY: Opacity Utilities */
.u-opacity-0 { opacity: 0 !important; }
.u-opacity-50 { opacity: 0.5 !important; }
.u-opacity-75 { opacity: 0.75 !important; }
.u-opacity-100 { opacity: 1 !important; }

/* POINTER: Cursor Utilities */
.u-cursor-auto { cursor: auto !important; }
.u-cursor-pointer { cursor: pointer !important; }
.u-cursor-default { cursor: default !important; }
.u-cursor-not-allowed { cursor: not-allowed !important; }

/* POSITION: Position Utilities */
.u-relative { position: relative !important; }
.u-absolute { position: absolute !important; }
.u-fixed { position: fixed !important; }
.u-static { position: static !important; }

/* OVERFLOW: Overflow Utilities */
.u-overflow-hidden { overflow: hidden !important; }
.u-overflow-auto { overflow: auto !important; }
.u-overflow-visible { overflow: visible !important; }
.u-truncate { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* COMMON PATTERNS: Card & Container Utilities */
.u-card-container {
    background-color: var(--eap-bg-white);
    border-radius: var(--eap-radius-md);
    padding: var(--eap-spacing-lg);
    box-shadow: var(--eap-shadow-md);
}

.u-card-header {
    padding-bottom: var(--eap-spacing-md);
    border-bottom: 1px solid var(--eap-border-light);
    margin-bottom: var(--eap-spacing-md);
}

.u-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--eap-text-dark);
    margin: 0;
    padding: 0;
}

.u-card-subtitle {
    font-size: 14px;
    color: var(--eap-text-muted);
    margin-top: var(--eap-spacing-xs);
}

.u-card-body {
    padding: var(--eap-spacing-lg) 0;
}

.u-card-footer {
    padding-top: var(--eap-spacing-md);
    border-top: 1px solid var(--eap-border-light);
    margin-top: var(--eap-spacing-md);
}

/* COMMON PATTERNS: Row & Column Utilities */
.u-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--eap-spacing-md);
}

.u-col {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 150px;
}

.u-col-auto { flex: none; }
.u-col-full { flex: 0 0 100%; }
.u-col-half { flex: 0 0 50%; }
.u-col-third { flex: 0 0 calc(33.333% - 10px); }
.u-col-quarter { flex: 0 0 calc(25% - 10px); }

/* COMMON PATTERNS: Table Utilities */
.u-table-container {
    overflow-x: auto;
    border-radius: var(--eap-radius-md);
    box-shadow: var(--eap-shadow-sm);
}

.u-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.u-table-header {
    background-color: var(--eap-bg-light);
    font-weight: 600;
    padding: var(--eap-spacing-md);
}

.u-table-row {
    border-bottom: 1px solid var(--eap-border-light);
    transition: background-color 0.2s ease;
}

.u-table-row:hover {
    background-color: var(--eap-bg-lighter);
}

.u-table-cell {
    padding: var(--eap-spacing-md);
}

/* COMMON PATTERNS: Badge & Label Utilities */
.u-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: var(--eap-radius-full);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.u-badge-primary {
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--eap-primary);
}

.u-badge-success {
    background-color: rgba(16, 185, 129, 0.1);
    color: var(--eap-success);
}

.u-badge-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--eap-danger);
}

.u-badge-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--eap-warning);
}

.u-empty-state {
    text-align: center;
    padding: 64px 32px;
    color: var(--pa-text-secondary);
    background: var(--pa-surface-soft);
    border: 2px dashed var(--pa-border-solid);
    border-radius: var(--pa-radius-lg);
    margin: var(--pa-space-lg) 0;
}

.u-empty-state-icon {
    font-size: 56px;
    margin-bottom: var(--pa-space-md);
    opacity: 1;
    color: var(--pa-primary-light);
}

.u-empty-state-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--pa-text-primary);
    margin-bottom: var(--pa-space-sm);
}

.u-empty-state-text {
    font-size: 15px;
    color: var(--pa-text-secondary);
    line-height: 1.6;
    max-width: 400px;
    margin: 0 auto;
}

/* COMMON PATTERNS: Button Containers */
.u-button-group {
    display: flex;
    gap: var(--eap-spacing-sm);
    flex-wrap: wrap;
}

.u-button-group-block {
    display: flex;
    flex-direction: column;
    gap: var(--eap-spacing-sm);
}

.u-button-group-center {
    display: flex;
    gap: var(--eap-spacing-sm);
    justify-content: center;
    flex-wrap: wrap;
}

/* FORM UTILITIES */
.u-fieldset {
    margin-top: var(--eap-spacing-md);
    padding: var(--eap-spacing-md);
    border: 1px solid var(--eap-border-light);
    border-radius: var(--eap-radius-lg);
    background-color: var(--eap-bg-lighter);
}

.u-fieldset-legend {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--eap-text-subtext);
    padding: 0 6px;
}

.u-form-group-sm { margin-top: var(--eap-spacing-sm); }
.u-form-group-md { margin-top: var(--eap-spacing-md); }

.u-label-inline {
    display: inline;
    font-size: 13px;
    font-weight: 500;
    margin-left: var(--eap-spacing-xs);
}

.u-label-help {
    font-size: 12px;
    color: var(--eap-text-muted);
    margin: var(--eap-spacing-xs) 0 0 24px;
    line-height: 1.4;
}

.u-radio-group { margin-bottom: var(--eap-spacing-sm); }

/* UTILITY: Flex end alignment for admin header */
.u-flex-end-col {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--eap-spacing-xs);
}
/* RESPONSIVE: Mobile-First Utilities */
@media (max-width: 768px) {
    .u-col-half { flex: 0 0 100%; }
    .u-col-third { flex: 0 0 100%; }
    .u-col-quarter { flex: 0 0 100%; }
    
    .u-grid-2 { grid-template-columns: 1fr !important; }
    .u-grid-3 { grid-template-columns: 1fr !important; }
    .u-grid-4 { grid-template-columns: 1fr !important; }
    
    .u-hide-mobile { display: none !important; }
}

@media (max-width: 480px) {
    .u-flex-col-sm { flex-direction: column !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   END SECTION 13
   ════════════════════════════════════════════════════════════════════════════ */
   Indigo • Navy • Gold
   Goal: Convey authority, data-driven decision making, institutional control
   ═══════════════════════════════════════════════════════════════════════════ */

body.pa-role-institution,
.pa-role-institution {
    --role-primary:        #4338ca;    /* Indigo 700 (brand) */
    --role-primary-dk:     #312e81;    /* Indigo 900 (darker) */
    --role-primary-light:  #e0e7ff;    /* Indigo 100 (light bg) */
    --role-accent:         #fbbf24;    /* Amber 400 (gold highlight) */
    --role-secondary:      #0ea5e9;    /* Cyan 500 (data accent) */
    --role-text-on-color:  #ffffff;    /* White text on colored backgrounds */
}

/* Sidebar: Deep indigo gradient (authority) */
body.pa-role-institution .eap-sidebar,
.pa-role-institution .eap-sidebar {
    background: linear-gradient(180deg, #2c1e51 0%, #1e1b4b 100%) !important;
    box-shadow: inset -4px 0 12px rgba(0, 0, 0, 0.4);
}

/* Topbar: Professional indigo gradient with gold accent stripe */
body.pa-role-institution .eap-topbar,
.pa-role-institution .eap-topbar {
    background: linear-gradient(90deg, #312e81 0%, #2c1e51 50%, #1e1b4b 100%) !important;
    border-bottom: 4px solid #fbbf24 !important;
    box-shadow: 0 4px 12px rgba(67, 56, 202, 0.15);
}

body.pa-role-institution .eap-topbar h1,
body.pa-role-institution .eap-page-title,
.pa-role-institution .eap-topbar h1,
.pa-role-institution .eap-page-title {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Primary buttons: Indigo gradient (command) */
body.pa-role-institution .eap-btn--primary,
body.pa-role-institution .pa-button-primary,
.pa-role-institution .eap-btn--primary,
.pa-role-institution .pa-button-primary {
    background: linear-gradient(135deg, #4338ca, #3730a3) !important;
    color: var(--role-text-on-color) !important;
    border-color: #4338ca !important;
    box-shadow: 0 8px 24px rgba(67, 56, 202, 0.35) !important;
    font-weight: 600;
}

body.pa-role-institution .eap-btn--primary:hover,
body.pa-role-institution .pa-button-primary:hover,
.pa-role-institution .eap-btn--primary:hover,
.pa-role-institution .pa-button-primary:hover {
    filter: brightness(1.15) !important;
    box-shadow: 0 12px 32px rgba(67, 56, 202, 0.45) !important;
    transform: translateY(-2px);
}

/* Cards: Indigo left-border accent (visual scanning) */
body.pa-role-institution .eap-card,
body.pa-role-institution .pa-card,
.pa-role-institution .eap-card,
.pa-role-institution .pa-card {
    border-left: 5px solid #4338ca !important;
    border-left-width: 5px !important;
    box-shadow: 0 2px 8px rgba(67, 56, 202, 0.08) !important;
}

body.pa-role-institution .eap-card:hover,
body.pa-role-institution .pa-card:hover,
.pa-role-institution .eap-card:hover,
.pa-role-institution .pa-card:hover {
    border-left-color: #fbbf24 !important;
    box-shadow: 0 8px 24px rgba(67, 56, 202, 0.12) !important;
}

/* Card headers: Bold titles with gold accent underline */
body.pa-role-institution .eap-card-title,
.pa-role-institution .eap-card-title {
    color: #312e81 !important;
    font-weight: 800 !important;
    border-bottom: 2px solid #fbbf24;
    padding-bottom: 8px;
}

/* KPI values: Indigo text (commanding presence) */
body.pa-role-institution .eap-metric-value,
.pa-role-institution .eap-metric-value {
    color: #312e81 !important;
}

/* Icons: Gold tone (authority badges) */
body.pa-role-institution .eap-card svg,
body.pa-role-institution .eap-icon,
.pa-role-institution .eap-card svg,
.pa-role-institution .eap-icon {
    color: #fbbf24;
    opacity: 0.9;
}

/* Empty states: Subdued indigo (professional absence messaging) */
body.pa-role-institution .eap-empty-state,
.pa-role-institution .eap-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
}

body.pa-role-institution .eap-empty-state svg,
.pa-role-institution .eap-empty-state svg {
    color: #c7d2fe;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   TEACHER THEME — Classroom Control Center
   Emerald • Teal • Blue
   Goal: Convey support, organization, learning management, nurturing
   ═══════════════════════════════════════════════════════════════════════════ */

body.pa-role-teacher,
.pa-role-teacher {
    --role-primary:        #059669;    /* Emerald 700 (growth) */
    --role-primary-dk:     #065f46;    /* Emerald 800 (deeper) */
    --role-primary-light:  #d1fae5;    /* Emerald 100 (light) */
    --role-accent:         #f59e0b;    /* Amber 500 (warmth/engagement) */
    --role-secondary:      #06b6d4;    /* Cyan 500 (clarity) */
    --role-text-on-color:  #ffffff;    /* White text on colored backgrounds */
}

/* Sidebar: Warm emerald gradient (nurturing) */
body.pa-role-teacher .eap-sidebar,
.pa-role-teacher .eap-sidebar {
    background: linear-gradient(180deg, #1b4e3d 0%, #065f46 100%) !important;
    box-shadow: inset -4px 0 12px rgba(0, 0, 0, 0.3);
}

/* Topbar: Emerald gradient with warm amber accent (welcoming) */
body.pa-role-teacher .eap-topbar,
.pa-role-teacher .eap-topbar {
    background: linear-gradient(90deg, #065f46 0%, #1b4e3d 50%, #047857 100%) !important;
    border-bottom: 4px solid #f59e0b !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.15);
}

body.pa-role-teacher .eap-topbar h1,
body.pa-role-teacher .eap-page-title,
.pa-role-teacher .eap-topbar h1,
.pa-role-teacher .eap-page-title {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Primary buttons: Emerald gradient (growth/progress) */
body.pa-role-teacher .eap-btn--primary,
body.pa-role-teacher .pa-button-primary,
.pa-role-teacher .eap-btn--primary,
.pa-role-teacher .pa-button-primary {
    background: linear-gradient(135deg, #059669, #047857) !important;
    color: var(--role-text-on-color) !important;
    border-color: #059669 !important;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.35) !important;
    font-weight: 600;
}

body.pa-role-teacher .eap-btn--primary:hover,
body.pa-role-teacher .pa-button-primary:hover,
.pa-role-teacher .eap-btn--primary:hover,
.pa-role-teacher .pa-button-primary:hover {
    filter: brightness(1.15) !important;
    box-shadow: 0 12px 32px rgba(5, 150, 105, 0.45) !important;
    transform: translateY(-2px);
}

/* Cards: Emerald left-border accent (connected, supportive) */
body.pa-role-teacher .eap-card,
body.pa-role-teacher .pa-card,
.pa-role-teacher .eap-card,
.pa-role-teacher .pa-card {
    border-left: 5px solid #059669 !important;
    border-left-width: 5px !important;
    box-shadow: 0 2px 8px rgba(5, 150, 105, 0.08) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(209, 250, 229, 0.08) 100%);
}

body.pa-role-teacher .eap-card:hover,
body.pa-role-teacher .pa-card:hover,
.pa-role-teacher .eap-card:hover,
.pa-role-teacher .pa-card:hover {
    border-left-color: #f59e0b !important;
    box-shadow: 0 8px 24px rgba(5, 150, 105, 0.12) !important;
}

/* Card headers: Warm titles with emerald accent */
body.pa-role-teacher .eap-card-title,
.pa-role-teacher .eap-card-title {
    color: #065f46 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #f59e0b;
    padding-bottom: 8px;
}

/* KPI values: Emerald text (progress indicators) */
body.pa-role-teacher .eap-metric-value,
.pa-role-teacher .eap-metric-value {
    color: #059669 !important;
}

/* Icons: Warm orange/amber (encouraging) */
body.pa-role-teacher .eap-card svg,
body.pa-role-teacher .eap-icon,
.pa-role-teacher .eap-card svg,
.pa-role-teacher .eap-icon {
    color: #f59e0b;
    opacity: 0.9;
}

/* Empty states: Soft emerald (encouraging absence messaging) */
body.pa-role-teacher .eap-empty-state,
.pa-role-teacher .eap-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
}

body.pa-role-teacher .eap-empty-state svg,
.pa-role-teacher .eap-empty-state svg {
    color: #a7f3d0;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   STUDENT THEME — Learning Dashboard
   Bright Blue • Purple • Orange
   Goal: Convey engagement, motivation, achievement, bright future
   ═══════════════════════════════════════════════════════════════════════════ */

body.pa-role-student,
.pa-role-student {
    --role-primary:        #2563eb;    /* Blue 600 (trust, learning) */
    --role-primary-dk:     #1d4ed8;    /* Blue 700 (deeper) */
    --role-primary-light:  #dbeafe;    /* Blue 100 (light) */
    --role-accent:         #f97316;    /* Orange 500 (energy/achievement) */
    --role-secondary:      #8b5cf6;    /* Violet 500 (inspiration) */
    --role-text-on-color:  #ffffff;    /* White text on colored backgrounds */
}

/* Sidebar: Bright blue gradient (inspiring) */
body.pa-role-student .eap-sidebar,
.pa-role-student .eap-sidebar {
    background: linear-gradient(180deg, #1e3a8a 0%, #1e40af 50%, #172554 100%) !important;
    box-shadow: inset -4px 0 12px rgba(0, 0, 0, 0.3);
}

/* Topbar: Blue gradient with bright orange accent (motivating) */
body.pa-role-student .eap-topbar,
.pa-role-student .eap-topbar {
    background: linear-gradient(90deg, #1e40af 0%, #1e3a8a 50%, #172554 100%) !important;
    border-bottom: 4px solid #f97316 !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.15);
}

body.pa-role-student .eap-topbar h1,
body.pa-role-student .eap-page-title,
.pa-role-student .eap-topbar h1,
.pa-role-student .eap-page-title {
    background: linear-gradient(135deg, #f97316 0%, #fb923c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Primary buttons: Blue to purple gradient (achievement) */
body.pa-role-student .eap-btn--primary,
body.pa-role-student .pa-button-primary,
.pa-role-student .eap-btn--primary,
.pa-role-student .pa-button-primary {
    background: linear-gradient(135deg, #2563eb, #7c3aed) !important;
    color: var(--role-text-on-color) !important;
    border-color: #2563eb !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.35) !important;
    font-weight: 600;
}

body.pa-role-student .eap-btn--primary:hover,
body.pa-role-student .pa-button-primary:hover,
.pa-role-student .eap-btn--primary:hover,
.pa-role-student .pa-button-primary:hover {
    filter: brightness(1.15) !important;
    box-shadow: 0 12px 32px rgba(124, 58, 237, 0.45) !important;
    transform: translateY(-2px);
}

/* Cards: Blue-to-orange gradient accent (energetic) */
body.pa-role-student .eap-card,
body.pa-role-student .pa-card,
.pa-role-student .eap-card,
.pa-role-student .pa-card {
    border-left: 5px solid #2563eb !important;
    border-left-width: 5px !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08) !important;
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(219, 234, 254, 0.08) 100%);
}

body.pa-role-student .eap-card:hover,
body.pa-role-student .pa-card:hover,
.pa-role-student .eap-card:hover,
.pa-role-student .pa-card:hover {
    border-left-color: #f97316 !important;
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.12) !important;
}

/* Card headers: Vibrant blue titles with orange accent */
body.pa-role-student .eap-card-title,
.pa-role-student .eap-card-title {
    color: #1d4ed8 !important;
    font-weight: 700 !important;
    border-bottom: 2px solid #f97316;
    padding-bottom: 8px;
}

/* KPI values: Bright blue (achievement emphasis) */
body.pa-role-student .eap-metric-value,
.pa-role-student .eap-metric-value {
    color: #2563eb !important;
    font-weight: 900;
}

/* Icons: Vibrant orange (achievement badges) */
body.pa-role-student .eap-card svg,
body.pa-role-student .eap-icon,
.pa-role-student .eap-card svg,
.pa-role-student .eap-icon {
    color: #f97316;
    opacity: 0.95;
}

/* Empty states: Bright blue gradient (motivating absence messaging) */
body.pa-role-student .eap-empty-state,
.pa-role-student .eap-empty-state {
    padding: 40px 20px;
    text-align: center;
    color: #64748b;
}

body.pa-role-student .eap-empty-state svg,
.pa-role-student .eap-empty-state svg {
    color: #93c5fd;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    opacity: 0.8;
}

/* ─────────────────────────────────────────────────────────────────────── */

/* === DARK MODE SUPPORT FOR ALL ROLES === */

@media (prefers-color-scheme: dark),
[data-pa-theme="dark"] {

    /* Institution (Dark) */
    body[data-pa-theme="dark"].pa-role-institution .eap-topbar,
    body.dark.pa-role-institution .eap-topbar {
        background: linear-gradient(90deg, #3730a3 0%, #3d28a5 50%, #312e81 100%) !important;
    }

    body[data-pa-theme="dark"].pa-role-institution .eap-card,
    body.dark.pa-role-institution .eap-card {
        background: linear-gradient(135deg, #1f2937 0%, rgba(67, 56, 202, 0.05) 100%);
        border-left-color: #818cf8 !important;
    }

    /* Teacher (Dark) */
    body[data-pa-theme="dark"].pa-role-teacher .eap-topbar,
    body.dark.pa-role-teacher .eap-topbar {
        background: linear-gradient(90deg, #047857 0%, #0d9488 50%, #1b4e3d 100%) !important;
    }

    body[data-pa-theme="dark"].pa-role-teacher .eap-card,
    body.dark.pa-role-teacher .eap-card {
        background: linear-gradient(135deg, #1f2937 0%, rgba(5, 150, 105, 0.05) 100%);
        border-left-color: #6ee7b7 !important;
    }

    /* Student (Dark) */
    body[data-pa-theme="dark"].pa-role-student .eap-topbar,
    body.dark.pa-role-student .eap-topbar {
        background: linear-gradient(90deg, #1e40af 0%, #2563eb 50%, #1d4ed8 100%) !important;
    }

    body[data-pa-theme="dark"].pa-role-student .eap-card,
    body.dark.pa-role-student .eap-card {
        background: linear-gradient(135deg, #1f2937 0%, rgba(37, 99, 235, 0.05) 100%);
        border-left-color: #60a5fa !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 11: UTILITY CLASSES
   ════════════════════════════════════════════════════════════════════════════ */

/* Text Colors */
.text-primary { color: var(--pa-text-primary) !important; }
.text-secondary { color: var(--pa-text-secondary) !important; }
.text-tertiary { color: var(--pa-text-tertiary) !important; }
.text-muted { color: var(--pa-text-muted) !important; }
.text-danger { color: var(--pa-danger) !important; }
.text-success { color: var(--pa-success) !important; }
.text-warning { color: var(--pa-warning) !important; }

/* Background Colors */
.bg-primary { background-color: var(--pa-primary) !important; }
.bg-success { background-color: var(--pa-success) !important; }
.bg-warning { background-color: var(--pa-warning) !important; }
.bg-danger { background-color: var(--pa-danger) !important; }
.bg-surface { background-color: var(--pa-surface) !important; }

/* Spacing */
.mt-sm { margin-top: var(--pa-space-sm) !important; }
.mt-md { margin-top: var(--pa-space-md) !important; }
.mt-lg { margin-top: var(--pa-space-lg) !important; }
.mt-xl { margin-top: var(--pa-space-xl) !important; }

.mb-sm { margin-bottom: var(--pa-space-sm) !important; }
.mb-md { margin-bottom: var(--pa-space-md) !important; }
.mb-lg { margin-bottom: var(--pa-space-lg) !important; }
.mb-xl { margin-bottom: var(--pa-space-xl) !important; }

.p-md { padding: var(--pa-space-md) !important; }
.p-lg { padding: var(--pa-space-lg) !important; }
.p-xl { padding: var(--pa-space-xl) !important; }

/* Sizing */
.w-full { width: 100% !important; }
.h-full { height: 100% !important; }

/* Display */
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.flex-row { flex-direction: row !important; }
.gap-md { gap: var(--pa-gap-md) !important; }
.gap-lg { gap: var(--pa-gap-lg) !important; }

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 12: RESPONSIVE DESIGN
   ════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .eap-main {
        padding: var(--pa-space-xl) !important;
    }

    .eap-dashboard-grid {
        gap: var(--pa-gap-md) !important;
    }
}

@media (max-width: 768px) {
    .eap-topbar {
        padding: 0 var(--pa-space-md) !important;
    }

    .eap-topbar h1 {
        font-size: 18px;
    }

    .eap-main {
        padding: var(--pa-space-lg) !important;
    }

    .eap-card {
        padding: var(--pa-space-lg) !important;
    }

    .eap-sidebar {
        position: absolute;
        left: 0;
        top: var(--pa-topbar-height);
        height: calc(100% - var(--pa-topbar-height));
        z-index: 999;
        width: 260px;
        transform: translateX(-100%);
        transition: transform var(--pa-ease);
    }

    .eap-sidebar.open {
        transform: translateX(0);
    }

    .eap-main {
        width: 100%;
    }

    .eap-metric-value {
        font-size: 24px;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 13: COMPATIBILITY SHIMS & LEGACY SUPPORT
   ════════════════════════════════════════════════════════════════════════════ */

/* Legacy perfect-aptitude-learning-theme.css */
.pa-shell { min-height: 100vh; background: var(--pa-bg); font-family: var(--pa-font-primary); }
.pa-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.pa-dashboard-layout { display: flex; min-height: 100vh; width: 100%; }

/* Legacy eap-dashboard overrides */
.eap-premium-shell { /* empty — already handled */ }
.eap-premium-theme { /* empty — already handled */ }

/* CSS Variable Aliases for backward compat */
:root {
    /* From eap-design-system.css v6.0 */
    --eap-yellow: var(--pa-amber-500);
    --eap-coral: var(--pa-red-500);
    --eap-mint: var(--pa-emerald-500);
    --eap-blue: var(--pa-blue-500);
    --eap-muted: var(--pa-text-muted);
    --eap-text: var(--pa-text-primary);
    --eap-shadow: var(--pa-shadow-md);
    --eap-radius: var(--pa-radius-md);
    --eap-subtext: var(--pa-text-secondary);
    --eap-surface-soft: var(--pa-surface-soft);
    --eap-surface-2: var(--pa-surface-2);
    --eap-surface-3: var(--pa-surface-3);
    --eap-text-secondary: var(--pa-text-secondary);
    --eap-text-muted: var(--pa-text-muted);
    --eap-text-inverse: var(--pa-text-inverse);
    --eap-border-solid: var(--pa-border-solid);

    /* From dashboard-premium.css */
    --eap-emerald: var(--pa-emerald-500);
    --eap-amber: var(--pa-amber-500);
    --eap-rose: var(--pa-red-500);
    --eap-crimson: var(--pa-red-700);
    --eap-sidebar-width: var(--pa-sidebar-width);
    --eap-sidebar-width-collapsed: var(--pa-sidebar-width-collapsed);

    /* From eap-portal-shell-recovery.css */
    --r-sm: var(--pa-radius-sm);
    --r-md: var(--pa-radius-md);
    --r-lg: var(--pa-radius-lg);
    --r-full: var(--pa-radius-full);
    --gap-sm: var(--pa-gap-sm);
    --gap-md: var(--pa-gap-md);
    --gap-lg: var(--pa-gap-lg);
    --shadow-sm: var(--pa-shadow-sm);
    --shadow-md: var(--pa-shadow-md);
    --shadow-xs: var(--pa-shadow-xs);
    --ease: var(--pa-ease);
}

/* ════════════════════════════════════════════════════════════════════════════
   SECTION 14: PRINT STYLES
   ════════════════════════════════════════════════════════════════════════════ */

@media print {
    .eap-sidebar,
    .eap-topbar {
        display: none !important;
    }

    .eap-viewport-shell {
        position: static !important;
        width: 100% !important;
        height: auto !important;
    }

    .eap-main {
        padding: 0 !important;
    }
}

/* ════════════════════════════════════════════════════════════════════════════
   END OF pa-unified-design-system.css
   ════════════════════════════════════════════════════════════════════════════ */