/*!
  CUEMS Foundation Layer - Consolidated Design System
  =========================================================================

  MERGED FROM:
  - cuems-design-system.css (65 KB, 2,971 lines) - Production components & mobile optimizations
  - cuems-unified.css (17 KB, 441 lines) - Modern @layer architecture & dark mode

  CREATED: 2025-10-06
  ADR: docs/DECISIONS.md#ADR-002

  DEPRECATES:
  - frontend/static/css/cuems-design-system.css (use foundation/design-system.css instead)
  - frontend/static/css/cuems-unified.css (use foundation/design-system.css instead)

  ARCHITECTURE:
  This file uses CSS Cascade Layers for maintainability and predictable specificity:

  @layer tokens     → Design tokens (colors, spacing, radii, shadows, z-index)
  @layer base       → Reset, base elements, accessibility helpers
  @layer components → Core UI components (buttons, inputs, cards, tabs, tables, alerts)
  @layer modern     → Micro-interactions, effects, dark mode
  @layer mobile     → Mobile breakpoints and responsive utilities
  @layer legacy     → Backward compatibility shims for old class names

  USAGE:
  1. Wrap your app in: <div class="cuems">...</div> (namespace isolation)
  2. Use cu- prefixed components: .cu-btn, .cu-card, .cu-tabs
  3. Legacy classes (.btn-gold, .kpi-card) still work via @layer legacy
  4. Dark mode: add .dark-mode class to .cuems wrapper

  NOTES:
  - Namespaced under .cuems to avoid collisions with Tailwind or global CSS
  - Tokens favor CU Boulder palette: Gold (#CFB87C), accessible gold (#8B6914)
  - All sizes use rem where possible for zoom/accessibility
  - Reduced motion honored globally within .cuems
  - Focus styles use CU accessible gold (#8B6914) for WCAG AA compliance
*/

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

/* =========================================================================
   Layer Declaration
   ========================================================================= */
@layer tokens, base, components, modern, mobile, legacy;

/* =========================================================================
   @layer tokens - Design Tokens & CSS Variables
   ========================================================================= */
@layer tokens {
  :root {
    /* ===== CU Boulder Official Brand Colors ===== */
    --cu-black: #000000;              /* Official CU Black */
    --cu-white: #FFFFFF;              /* White */
    --cu-gold: #CFB87C;               /* Official CU Gold - PRIMARY actions & buttons */
    --cu-gold-dark: #B8A369;          /* Darker gold for hover states */
    --cu-gold-light: #F1EBD9;         /* Light Gold backgrounds */
    --cu-gold-accessible: #8B6914;    /* Darker gold for white text (WCAG AA) */

    /* ===== CU Boulder Neutral Colors ===== */
    --cu-light-gray: #EEEEEE;         /* Light Gray */
    --cu-dark-gray: #424242;          /* Dark Gray */

    /* ===== CU Boulder Links & Buttons ===== */
    --cu-blue: #0277BD;               /* Official CU Blue - links and secondary buttons */
    --cu-dark-blue: #01579B;          /* Dark Blue */
    --cu-medium-blue: #4FC3F7;        /* Medium Blue */
    --cu-light-blue: #E1F5FE;         /* Light Blue backgrounds */

    /* ===== CU Boulder Secondary Colors ===== */
    --cu-light-green: #DCEDC8;        /* Light Green */
    --cu-brick: #AE5A39;              /* Brick */

    /* ===== CU Boulder Application Colors ===== */
    --cu-red: #B71C1C;                /* Red - errors/destructive */
    --cu-green: #2E7D32;              /* Green - success */
    --cu-amber: #FFD740;              /* Amber - warnings */

    /* ===== CU Boulder Notification/Message Colors ===== */
    --cu-light-red: #FFEBEE;          /* Light Red - error backgrounds */
    --cu-yellow: #FFF9C4;             /* Yellow - warning backgrounds */

    /* ===== Semantic Grayscale Palette (from unified) ===== */
    --gray-50:  #F9FAFB;
    --gray-100: #F3F4F6;
    --gray-200: #E5E7EB;
    --gray-300: #D1D5DB;
    --gray-400: #9CA3AF;
    --gray-500: #6B7280;
    --gray-600: #4B5563;
    --gray-700: #374151;
    --gray-800: #1F2937;
    --gray-900: #111827;

    /* ===== Semantic Colors (unified palette) ===== */
    --info:    #1E40AF;               /* indigo-700 */
    --success: #15803D;               /* green-700 */
    --warning: #92400E;               /* amber-800 */
    --danger:  #991B1B;               /* red-800 */

    /* ===== Surface & Text Colors ===== */
    --surface: var(--cu-white);
    --surface-muted: #FCFCFD;
    --bg-light: var(--cu-light-gray);
    --text-primary: var(--cu-black);
    --text-secondary: var(--cu-dark-gray);
    --text: #1a1a1a;
    --text-light: #4a5568;
    --text-lighter: #718096;
    --divider: var(--gray-200);

    /* ===== Legacy Variables for Backward Compatibility ===== */
    --gold: #CFB87C;
    --gold-accessible: #8B6914;
    --gold-5: #CFB87C0D;              /* 5% opacity */
    --gold-10: #CFB87C1A;             /* 10% opacity */
    --gold-20: #CFB87C33;             /* 20% opacity */
    --success-bg: #f0fdf4;
    --warning-bg: #fef3c7;
    --danger-bg: #fef2f2;
    --info-bg: #eff6ff;

    /* ===== Typography Scale ===== */
    --font-sans: 'Roboto', ui-sans-serif, system-ui, -apple-system, Segoe UI, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
    --font-heading: 'Roboto Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --fs-xs: 0.75rem;                 /* 12px */
    --fs-sm: 0.875rem;                /* 14px */
    --fs-base: 1rem;                  /* 16px */
    --fs-lg: 1.125rem;                /* 18px */
    --fs-xl: 1.25rem;                 /* 20px */
    --fs-2xl: 1.5rem;                 /* 24px */
    --fs-3xl: 1.875rem;               /* 30px */

    /* ===== Spacing Scale (4px base) ===== */
    --sp-0: 0;
    --sp-1: 0.25rem;                  /* 4px */
    --sp-2: 0.5rem;                   /* 8px */
    --sp-3: 0.75rem;                  /* 12px */
    --sp-4: 1rem;                     /* 16px */
    --sp-5: 1.25rem;                  /* 20px */
    --sp-6: 1.5rem;                   /* 24px */
    --sp-8: 2rem;                     /* 32px */
    --sp-10: 2.5rem;                  /* 40px */
    --sp-12: 3rem;                    /* 48px */

    /* Legacy spacing variables */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 20px;
    --spacing-lg: 40px;
    --spacing-xl: 80px;

    /* ===== Border Radius ===== */
    --radius-sm: 0.25rem;             /* 4px */
    --radius-md: 0.5rem;              /* 8px */
    --radius-lg: 0.75rem;             /* 12px */
    --radius-xl: 1rem;                /* 16px */
    --radius-2xl: 1.5rem;             /* 24px */
    --radius-pill: 999px;
    --radius-full: 9999px;
    --radius-standard: 3px;           /* CU Boulder standard */

    /* ===== Shadows ===== */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-gold: 0 4px 15px rgba(207, 184, 124, 0.25);

    /* ===== Focus Ring (WCAG AA) ===== */
    --focus-color: var(--cu-gold-accessible);
    --focus-width: 3px;
    --focus-offset: 3px;
    --focus-shadow-blur: 6px;

    /* ===== Transitions & Easing ===== */
    --ease-standard: cubic-bezier(.2,.8,.2,1);
    --ease-enter: cubic-bezier(.34,1.56,.64,1);
    --ease-exit: cubic-bezier(.2,.8,.2,1);
    --dur-fast: .12s;
    --dur: .2s;
    --dur-slow: .4s;

    /* ===== Z-Index Scale ===== */
    --z-base: 0;
    --z-sticky: 30;
    --z-dropdown: 40;
    --z-overlay: 50;
    --z-modal: 60;
    --z-toast: 70;
  }
}

/* =========================================================================
   @layer base - CSS Reset, Base Elements, A11Y
   ========================================================================= */
@layer base {
  /* ===== Box Sizing Reset ===== */
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  /* ===== Namespace Wrapper (from unified) ===== */
  .cuems, .cuems *,
  .cuems *::before,
  .cuems *::after {
    box-sizing: border-box;
  }

  /* ===== Base Styles ===== */
  .cuems {
    color: var(--text-primary);
    background: var(--surface);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  body {
    font-family: var(--font-sans);
    color: var(--cu-text-primary);
    background-color: var(--bg-light);
    line-height: 1.5;
    font-size: 16px;
    font-weight: 400;
  }

  /* ===== Media Elements ===== */
  .cuems img, .cuems video, .cuems canvas, .cuems svg {
    display: block;
    max-width: 100%;
  }

  .cuems button, .cuems input, .cuems select, .cuems textarea {
    font: inherit;
  }

  /* ===== Alpine.js Cloak ===== */
  [x-cloak], .cuems [x-cloak] {
    display: none !important;
  }

  /* ===== Typography ===== */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
    color: var(--cu-text-primary);
  }

  h1 { font-size: 2.5rem; margin-bottom: 16px; }
  h2 { font-size: 2rem; margin-bottom: 40px; }
  h3 { font-size: 1.75rem; margin-bottom: 16px; }
  h4 { font-size: 1.5rem; margin-bottom: 12px; }
  h5 { font-size: 1.25rem; margin-bottom: 12px; }
  h6 { font-size: 1rem; margin-bottom: 12px; }

  p {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 16px;
  }

  /* ===== Links (CU Boulder style) ===== */
  a {
    color: var(--cu-blue);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  a:hover {
    color: var(--cu-dark-blue);
    text-decoration: underline;
  }

  /* ===== Focus Ring (WCAG 2.4.7 - Global Styles) ===== */
  /* Focus-visible for all interactive elements (keyboard navigation) */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [role="button"]:focus-visible,
  [role="link"]:focus-visible,
  [role="menuitem"]:focus-visible,
  [role="tab"]:focus-visible,
  [tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid #8B6914; /* CU Gold Accessible */
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(139, 105, 20, 0.2);
  }

  /* Remove default focus for mouse users (WCAG allows this with :focus-visible) */
  *:focus:not(:focus-visible) {
    outline: none;
  }

  /* Enhanced focus within .cuems namespace */
  .cuems *:focus-visible {
    outline: var(--focus-width) solid var(--focus-color);
    outline-offset: var(--focus-offset);
    box-shadow: 0 0 0 var(--focus-shadow-blur) color-mix(in oklab, var(--focus-color) 22%, transparent);
  }

  /* Form elements get additional visual treatment */
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible {
    border-color: #8B6914;
  }

  /* ===== Minimum Touch Targets (WCAG 2.5.5 Level AAA / 2.5.8 Level AA) ===== */
  /* Utility class for ensuring 44x44px minimum touch target */
  .touch-target,
  .min-touch {
    min-height: 44px;
    min-width: 44px;
  }

  /* Icon-only buttons and controls */
  .btn-icon,
  .icon-btn,
  button.icon-only {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
  }

  /* Badge and pill elements that are interactive */
  .badge.interactive,
  .badge[role="button"],
  .badge[onclick],
  .badge > a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
  }

  /* ===== Screen-Reader Only ===== */
  .sr-only, .cuems .sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* ===== Skip to Main Link (A11Y) ===== */
  .skip-to-main {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    padding: 12px 24px;
    background: var(--cu-gold);
    color: #000;
    text-decoration: none;
    font-weight: 500;
    border-radius: 0 0 8px 0;
  }

  .skip-to-main:focus {
    left: 0;
  }

  /* ===== Reduced Motion (A11Y) ===== */
  @media (prefers-reduced-motion: reduce) {
    *, .cuems * {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* =========================================================================
   @layer components - Core UI Components
   ========================================================================= */
@layer components {

  /* ===== Container ===== */
  .container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
  }

  .max-w-7xl {
    max-width: 1280px;
  }

  .cuems .cu-container {
    width: min(96%, 1200px);
    margin-inline: auto;
  }

  .cuems .cu-container-xl {
    width: min(96%, 1440px);
    margin-inline: auto;
  }

  .dashboard-container {
    min-height: 100vh;
    background-color: var(--bg-light);
    color: var(--cu-text-primary);
  }

  /* ===== Navigation ===== */
  .nav {
    padding: 20px 0;
    border-bottom: 1px solid var(--gray-300);
    background: white;
  }

  .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .logo {
    font-size: 17px;
    font-weight: 500;
    color: var(--text);
    text-decoration: none;
  }

  .logo .gold {
    color: var(--gold-accessible);
  }

  .nav-links {
    display: flex;
    gap: 32px;
    list-style: none;
  }

  .nav-link {
    color: var(--text-light);
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    transition: color 0.2s;
    padding: 4px 8px;
    border-radius: 4px;
  }

  .nav-link:hover {
    color: var(--text);
    background: var(--gray-50);
  }

  .nav-link:focus-visible {
    outline: 2px solid var(--gold-accessible);
    outline-offset: 2px;
  }

  /* ===== Buttons (merged modern + legacy) ===== */
  .btn, .cuems .cu-btn {
    --btn-bg: var(--gray-800);
    --btn-fg: var(--cu-white);
    --btn-bd: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--radius-lg);
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    font-family: var(--font-sans);
    min-height: 44px; /* Touch target size */
    user-select: none;
  }

  .btn:hover, .cuems .cu-btn:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .btn:active, .cuems .cu-btn:active {
    transform: translateY(0);
    box-shadow: var(--shadow-sm);
  }

  .btn:focus, .cuems .cu-btn:focus {
    outline: 2px solid var(--cu-gold);
    outline-offset: 2px;
  }

  .btn:focus-visible, .cuems .cu-btn:focus-visible {
    outline: 2px solid var(--gold-accessible);
    outline-offset: 2px;
  }

  /* Button Variants */
  .btn-primary, .cuems .cu-btn--primary {
    --btn-bg: var(--cu-gold);
    --btn-fg: var(--cu-black);
    --btn-bd: var(--gold-accessible);
  }

  .btn-primary:hover {
    background-color: var(--cu-gold-dark);
    transform: translateY(-2px);
    box-shadow: var(--shadow-gold);
    color: white;
  }

  .cuems .cu-btn--gold {
    --btn-bg: var(--cu-gold);
    --btn-fg: var(--cu-black);
  }

  .btn-secondary, .cuems .cu-btn--outline {
    --btn-bg: transparent;
    --btn-fg: var(--cu-blue);
    --btn-bd: var(--cu-blue);
    background-color: transparent;
    color: var(--cu-blue);
    border: 2px solid var(--cu-blue);
    box-shadow: none;
  }

  .btn-secondary:hover {
    background-color: var(--cu-blue);
    color: var(--cu-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
  }

  .btn-light {
    background: var(--gray-100);
    color: var(--text);
    border: 1px solid var(--gray-300);
  }

  .btn-light:hover {
    background: var(--gray-200);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  }

  .btn-outline {
    border: 2px solid var(--cu-light-gray);
    color: var(--cu-text-primary);
    background: transparent;
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  .btn-outline:hover {
    transform: translateY(-2px);
    background-color: var(--cu-text-primary);
    border-color: var(--cu-text-primary);
    color: var(--cu-white);
  }

  .btn-gold {
    background-color: var(--cu-gold);
    color: var(--cu-black);
    font-weight: 600;
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px rgba(207, 184, 124, 0.15);
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    border: 1px solid var(--gold-accessible);
  }

  .btn-gold:hover {
    transform: translateY(-2px);
    background-color: var(--cu-gold-dark);
    box-shadow: 0 8px 15px rgba(207, 184, 124, 0.25);
    color: white;
  }

  .btn-success, .cuems .cu-btn--success {
    --btn-bg: var(--cu-green);
    --btn-fg: var(--cu-white);
    background-color: var(--cu-green);
    color: var(--cu-white);
  }

  .btn-success:hover {
    background-color: #236B24;
    transform: translateY(-2px);
  }

  .btn-danger, .cuems .cu-btn--danger {
    --btn-bg: var(--cu-red);
    --btn-fg: var(--cu-white);
    background-color: var(--cu-red);
    color: var(--cu-white);
  }

  .btn-danger:hover {
    background-color: #8E1515;
    transform: translateY(-2px);
  }

  .cuems .cu-btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--text-primary);
    --btn-bd: transparent;
    box-shadow: none;
  }

  /* Button Sizes */
  .btn-sm, .cuems .cu-btn--sm {
    padding: 5px 10px;
    font-size: 14px;
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
  }

  .cuems .cu-btn--lg {
    padding: 0.875rem 1.25rem;
    font-size: var(--fs-lg);
  }

  .btn-text {
    color: var(--text-light);
    padding: 8px 12px;
    min-height: 36px;
    background: transparent;
    box-shadow: none;
  }

  .btn-text:hover {
    color: var(--text);
    background: var(--gray-100);
  }

  .btn-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }

  .cuems .cu-btn .cu-btn-icon {
    display: inline-flex;
    width: 1.1em;
    height: 1.1em;
  }

  /* ===== Forms ===== */
  .form-group {
    margin-bottom: 24px;
  }

  .label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 6px;
  }

  .label .required {
    color: var(--danger);
    margin-left: 2px;
  }

  input, select, textarea, .input,
  .cuems .cu-input, .cuems .cu-select, .cuems .cu-textarea {
    width: 100%;
    border: 1px solid var(--cu-light-gray);
    border-radius: var(--radius-standard);
    padding: 8px 12px;
    font-size: 16px;
    transition: all 0.2s ease;
    font-family: var(--font-sans);
    background: white;
    min-height: 44px;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--gray-300);
    background: var(--surface);
    color: var(--text-primary);
    transition: border-color var(--dur), box-shadow var(--dur);
  }

  input:focus, select:focus, textarea:focus, .input:focus,
  .cuems .cu-input:focus, .cuems .cu-select:focus, .cuems .cu-textarea:focus {
    outline: none;
    border-color: var(--cu-gold);
    box-shadow: 0 0 0 3px rgba(207, 184, 124, 0.2);
    box-shadow: 0 0 0 4px color-mix(in oklab, var(--cu-gold) 12%, transparent);
  }

  .input::placeholder, .cuems .cu-input::placeholder, .cuems .cu-textarea::placeholder {
    color: var(--text-lighter);
    color: var(--gray-400);
  }

  .input[aria-invalid="true"], .cuems .cu-input[aria-invalid="true"] {
    border-color: var(--danger);
  }

  textarea.input {
    resize: vertical;
    min-height: 100px;
  }

  select.input {
    cursor: pointer;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%234a5568' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    appearance: none;
  }

  .helper-text {
    font-size: 13px;
    color: var(--text-lighter);
    margin-top: 4px;
  }

  .error-text {
    font-size: 13px;
    color: var(--danger);
    margin-top: 4px;
  }

  /* ===== Cards (merged modern + legacy) ===== */
  .card, .content-card, .cuems .cu-card {
    background: var(--cu-white);
    border: 1px solid var(--cu-light-gray);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.2s;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    padding: var(--sp-5);
  }

  .card:hover, .content-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--gray-400);
  }

  .cuems .cu-card--hover:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    transition: transform var(--dur) var(--ease-enter);
  }

  .card-gold-accent {
    border-top: 4px solid var(--cu-gold);
  }

  .card-icon {
    width: 44px;
    height: 44px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
  }

  .card-icon.gold {
    background: var(--gold-10);
    color: var(--gold-accessible);
    border-color: var(--gold-20);
  }

  .card h3 {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 8px;
    color: var(--text);
  }

  .card p {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.5;
  }

  /* Dashboard Section Styles */
  .dashboard-section {
    background: var(--cu-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    border: 1px solid var(--cu-light-gray);
    transition: all 0.3s ease;
  }

  .dashboard-section:hover {
    box-shadow: var(--shadow-lg);
  }

  .dashboard-section-header {
    font-family: var(--font-heading) !important;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: 700;
    color: #111827;
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
  }

  .dashboard-section-header i {
    margin-right: 0.75rem;
    color: var(--cu-gold);
  }

  /* ===== Dashboard Metric Cards with Gradient Backgrounds ===== */
  .dashboard-metric-card {
    border-radius: 0.75rem;
    padding: 1.5rem;
    border-width: 1px;
    border-style: solid;
    transition: all 0.2s;
  }

  .dashboard-metric-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .dashboard-metric-card.blue {
    background: linear-gradient(to bottom right, #eff6ff, #dbeafe);
    border-color: #bfdbfe;
  }

  .dashboard-metric-card.red {
    background: linear-gradient(to bottom right, #fef2f2, #fee2e2);
    border-color: #fecaca;
  }

  .dashboard-metric-card.green {
    background: linear-gradient(to bottom right, #f0fdf4, #dcfce7);
    border-color: #bbf7d0;
  }

  .dashboard-metric-card.purple {
    background: linear-gradient(to bottom right, #faf5ff, #f3e8ff);
    border-color: #e9d5ff;
  }

  .dashboard-metric-card.amber {
    background: linear-gradient(to bottom right, #fffbeb, #fef3c7);
    border-color: #fde68a;
  }

  /* ===== Stats Cards ===== */
  .stat-card {
    background: var(--cu-white);
    border: 1px solid var(--cu-light-gray);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
  }

  .stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--cu-gold);
    transform: scaleX(0);
    transition: transform 0.3s ease;
  }

  .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
  }

  .stat-card:hover::before {
    transform: scaleX(1);
  }

  .stat-value {
    font-size: 2rem;
    font-weight: bold;
    color: var(--cu-gold-accessible);
    font-family: var(--font-heading);
  }

  .stat-label {
    font-size: 0.875rem;
    color: var(--cu-text-secondary);
    margin-top: var(--spacing-xs);
    font-weight: 500;
  }

  .stat-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: var(--spacing-md);
    transition: all 0.3s ease;
  }

  .stat-icon.gold {
    background-color: var(--cu-gold-light);
    color: var(--cu-gold-accessible);
  }

  .stat-icon.green {
    background-color: var(--cu-light-green);
    color: var(--cu-green);
  }

  .stat-icon.blue {
    background-color: var(--cu-light-blue);
    color: var(--cu-blue);
  }

  .stat-icon.amber {
    background-color: var(--cu-yellow);
    color: #F57C00;
  }

  /* ===== KPI Cards (merged modern + legacy) ===== */
  .kpi-card, .cuems .cu-kpi {
    background: white;
    border: 1px solid var(--cu-light-gray);
    border-radius: var(--radius-lg);
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: grid;
    gap: 0.25rem;
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-xl);
    padding: var(--sp-5);
    box-shadow: var(--shadow-md);
  }

  .kpi-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    opacity: 0;
    transform: scale(0);
    transition: transform 0.6s, opacity 0.3s;
  }

  .kpi-card:hover::before {
    opacity: 1;
    transform: scale(1);
  }

  .kpi-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--gray-400);
  }

  .kpi-card-icon {
    width: 44px;
    height: 44px;
    background: var(--gray-100);
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    font-size: 20px;
  }

  .kpi-card-icon.gold {
    background: var(--gold-10);
    color: var(--gold-accessible);
    border-color: var(--gold-20);
  }

  .kpi-card-value, .cuems .cu-kpi__value {
    font-size: 32px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .kpi-card-label, .cuems .cu-kpi__label {
    font-size: 14px;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
  }

  .kpi-card-change, .cuems .cu-kpi__delta {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 12px;
    font-weight: 500;
    font-size: var(--fs-sm);
    font-weight: 700;
  }

  .kpi-card-change.positive, .cuems .cu-kpi__delta--up {
    color: var(--success);
  }

  .kpi-card-change.negative, .cuems .cu-kpi__delta--down {
    color: var(--danger);
  }

  /* ===== Tabs (merged modern + legacy) ===== */
  .tabs-container, .tab-navigation, .cuems .cu-tabs {
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    padding: 8px;
    margin-bottom: 32px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    position: sticky;
    top: 0;
    z-index: 40;
    display: grid;
    gap: var(--sp-4);
  }

  .tabs, .cuems .cu-tablist {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-300) var(--gray-100);
    gap: 0.5rem;
    overflow: auto;
    padding: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-lg);
    scrollbar-width: thin;
  }

  .tabs::-webkit-scrollbar {
    height: 6px;
  }

  .tabs::-webkit-scrollbar-track {
    background: var(--gray-100);
    border-radius: 3px;
  }

  .tabs::-webkit-scrollbar-thumb {
    background: var(--gray-300);
    border-radius: 3px;
  }

  .tab-button, .cuems .cu-tab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    color: var(--cu-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.3s ease;
    min-height: 40px;
    font-family: var(--font-sans);
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--dur), background var(--dur), transform var(--dur-fast);
  }

  .tab-button:hover, .cuems .cu-tab:hover {
    color: var(--cu-text-primary);
    background-color: var(--cu-gold-light);
    background: var(--gray-100);
    color: var(--text-primary);
  }

  .tab-button:focus-visible, .cuems .cu-tab:focus-visible {
    outline: 2px solid var(--gold-accessible);
    outline-offset: -2px;
  }

  .tab-button[aria-selected="true"],
  .tab-button.active,
  .cuems .cu-tab[aria-selected="true"],
  .cuems .cu-tab[data-state="active"] {
    color: var(--cu-gold-accessible);
    border-bottom-color: var(--cu-gold);
    background-color: transparent;
    font-weight: 600;
    color: var(--cu-gold-accessible);
    background: color-mix(in oklab, var(--cu-gold) 18%, transparent);
  }

  .tab-button[aria-selected="true"]::after,
  .tab-button.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 16px;
    right: 16px;
    height: 2px;
    background: var(--gold-accessible);
    border-radius: 2px;
  }

  .tab-icon {
    font-size: 16px;
    transition: color 0.2s;
  }

  .tab-button[aria-selected="true"] .tab-icon,
  .tab-button.active .tab-icon {
    color: var(--gold-accessible);
  }

  /* Tab icon color variations */
  .tab-button:nth-child(1).active i { color: var(--gold-accessible); }
  .tab-button:nth-child(2).active i { color: var(--info); }
  .tab-button:nth-child(3).active i { color: #6b46c1; }
  .tab-button:nth-child(4).active i { color: var(--warning); }
  .tab-button:nth-child(5).active i { color: var(--success); }
  .tab-button:nth-child(6).active i { color: var(--danger); }
  .tab-button:nth-child(7).active i { color: #4b5563; }
  .tab-button:nth-child(8).active i { color: #be185d; }
  .tab-button:nth-child(9).active i { color: #7c3aed; }

  .tab-panel, .tab-content, .cuems .cu-tabpanel {
    padding: 24px;
    background: white;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    margin-top: 32px;
    border: 1px solid var(--divider);
    border-radius: var(--radius-xl);
    padding: var(--sp-5);
  }

  .tab-panel[hidden] {
    display: none;
  }

  .tab-content-spacing {
    padding-top: 2rem;
  }

  .tab-panel h3 {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 16px;
    color: var(--text);
  }

  .tab-panel p {
    color: var(--text-light);
    line-height: 1.6;
  }

  /* ===== Tables ===== */
  .table-wrapper, .cuems .cu-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--gray-300);
    border-radius: 8px;
    overflow: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--divider);
    background: var(--surface);
  }

  .table, .cuems table.cu-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
  }

  .table caption, .cuems .cu-table caption {
    position: absolute;
    left: -9999px;
    caption-side: bottom;
    padding: 0.5rem;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
  }

  .table th, .cuems .cu-table thead th {
    text-align: left;
    padding: 14px 18px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text);
    background: var(--gray-100);
    border-bottom: 2px solid var(--gray-300);
    text-align: left;
    padding: 0.75rem;
    background: var(--gray-50);
    color: var(--text-secondary);
    border-bottom: 1px solid var(--divider);
    position: sticky;
    top: 0;
    z-index: 1;
  }

  .table td, .cuems .cu-table tbody td {
    padding: 14px 18px;
    font-size: 15px;
    border-bottom: 1px solid var(--gray-200);
    padding: 0.75rem;
    border-bottom: 1px solid var(--gray-100);
  }

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

  .table tr:hover td, .cuems .cu-table tbody tr:hover {
    background: var(--gray-50);
    background: #fffef8; /* subtle warm hover */
  }

  .table tr:focus-within {
    outline: 2px solid var(--gold-accessible);
    outline-offset: -2px;
  }

  /* ===== Alerts (merged modern + legacy) ===== */
  .alert, .cuems .cu-alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-standard);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    border-width: 1px;
    border-style: solid;
    border-left: 4px solid;
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-lg);
    border-left: 4px solid var(--divider);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }

  .alert-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
  }

  .alert-content {
    flex: 1;
  }

  .alert-title, .cuems .cu-alert__title {
    font-weight: 500;
    margin-bottom: 4px;
    font-weight: 700;
  }

  .alert-message, .cuems .cu-alert__desc {
    font-size: 14px;
    line-height: 1.4;
    color: var(--text-secondary);
  }

  .alert-success, .cuems .cu-alert--success {
    background-color: var(--cu-light-green);
    color: var(--cu-green);
    border-color: var(--cu-green);
    border-left-color: var(--success);
  }

  .alert-error, .alert-danger, .cuems .cu-alert--danger {
    background-color: var(--cu-light-red);
    color: var(--cu-red);
    border-color: var(--cu-red);
    border-left-color: var(--danger);
  }

  .alert-warning, .cuems .cu-alert--warning {
    background-color: var(--cu-yellow);
    color: #F57C00;
    border-color: #FFB300;
    border-left-color: var(--warning);
  }

  .alert-info, .cuems .cu-alert--info {
    background-color: var(--cu-light-blue);
    color: var(--cu-blue);
    border-color: var(--cu-blue);
    border-left-color: var(--info);
  }

  /* ===== Badges ===== */
  .badge, .cuems .cu-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-pill);
    font-size: 0.8125rem;
    font-weight: 600;
    background: var(--gray-100);
    color: var(--text-secondary);
    border: 1px solid var(--divider);
  }

  .badge-gold, .cuems .cu-badge--gold {
    background-color: var(--cu-gold-light);
    color: var(--cu-gold-accessible);
    background: color-mix(in oklab, var(--cu-gold) 25%, white);
    color: var(--cu-black);
    border-color: color-mix(in oklab, var(--cu-gold) 50%, white);
  }

  .badge-success, .cuems .cu-badge--success {
    background-color: var(--cu-light-green);
    color: var(--cu-green);
    background: color-mix(in oklab, var(--success) 20%, white);
    color: var(--success);
    border-color: color-mix(in oklab, var(--success) 45%, white);
  }

  .badge-warning {
    background-color: var(--cu-yellow);
    color: #F57C00;
  }

  .badge-danger, .badge-error, .cuems .cu-badge--danger {
    background-color: var(--cu-light-red);
    color: var(--cu-red);
    background: color-mix(in oklab, var(--danger) 20%, white);
    color: var(--danger);
    border-color: color-mix(in oklab, var(--danger) 45%, white);
  }

  .badge-info {
    background-color: var(--cu-light-blue);
    color: var(--cu-blue);
  }

  .badge-neutral, .badge-gray {
    background-color: var(--cu-light-gray);
    color: var(--cu-dark-gray);
  }

  /* ===== Toggle (Accessible) ===== */
  .toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
  }

  .toggle-label {
    font-size: 15px;
    color: var(--text);
    user-select: none;
  }

  .toggle-wrapper {
    position: relative;
    width: 48px;
    height: 26px;
  }

  .toggle-input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--gray-300);
    border-radius: 100px;
    transition: all 0.3s;
  }

  .toggle-slider::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    left: 3px;
    top: 3px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s;
  }

  .toggle-input:checked + .toggle-slider {
    background: var(--gold-accessible);
  }

  .toggle-input:checked + .toggle-slider::before {
    transform: translateX(22px);
  }

  .toggle-input:focus-visible + .toggle-slider {
    outline: 2px solid var(--gold-accessible);
    outline-offset: 2px;
  }

  /* ===== Modals ===== */
  .cuems .cu-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: none;
    z-index: var(--z-modal);
  }

  .cuems .cu-modal-backdrop[data-open="true"] {
    display: block;
  }

  .cuems .cu-modal {
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--sp-6);
    z-index: calc(var(--z-modal) + 1);
  }

  .cuems .cu-modal__panel {
    width: min(96%, 720px);
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-xl);
    padding: var(--sp-6);
  }

  /* ===== Progress Bars ===== */
  .cuems .cu-progress {
    width: 100%;
    height: 0.625rem;
    background: var(--gray-100);
    border-radius: var(--radius-pill);
    overflow: hidden;
    border: 1px solid var(--gray-200);
  }

  .cuems .cu-progress__bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--cu-gold), color-mix(in oklab, var(--cu-gold-accessible) 40%, var(--cu-gold)));
    transition: width var(--dur-slow) var(--ease-standard);
  }

  /* ===== Floating Action Button ===== */
  .cuems .cu-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: var(--z-overlay);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: 50%;
    background: var(--cu-gold);
    color: var(--cu-black);
    box-shadow: var(--shadow-lg);
    border: 1px solid color-mix(in oklab, var(--cu-gold) 50%, white);
    transition: transform var(--dur) var(--ease-enter), box-shadow var(--dur);
  }

  .cuems .cu-fab:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-xl);
  }

  .cuems .cu-fab:active {
    transform: translateY(0);
  }

  /* ===== Time Tracking Specific ===== */
  .time-display {
    font-family: var(--font-heading), 'Courier New', monospace;
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--cu-gold-accessible);
    letter-spacing: 0.1em;
    text-align: center;
    padding: var(--spacing-md);
    background: var(--cu-gold-light);
    border-radius: var(--radius-lg);
    border: 2px solid var(--cu-gold);
  }

  .time-tracking-active {
    animation: pulse 2s infinite;
  }

  .time-tracking-active .time-display {
    border-color: var(--cu-green);
    color: var(--cu-green);
  }

  /* ===== Workflow Cards ===== */
  .workflow-card {
    background: var(--cu-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    border: 1px solid var(--cu-light-gray);
    transition: all 0.3s ease;
  }

  .workflow-card:hover {
    box-shadow: var(--shadow-gold);
    border-color: var(--cu-gold);
  }

  .workflow-card.priority-high {
    border-left: 4px solid var(--cu-red);
    background: linear-gradient(to right, var(--cu-light-red), var(--cu-white));
  }

  .workflow-card.priority-medium {
    border-left: 4px solid var(--cu-amber);
    background: linear-gradient(to right, var(--cu-yellow), var(--cu-white));
  }

  .workflow-card.priority-low {
    border-left: 4px solid var(--cu-green);
    background: linear-gradient(to right, var(--cu-light-green), var(--cu-white));
  }

  .workflow-card.completed {
    opacity: 0.7;
    border-left: 4px solid var(--cu-green);
  }

  /* ===== Loading States ===== */
  .loading-spinner {
    border: 4px solid var(--gray-200);
    border-top: 4px solid var(--cu-gold);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
  }

  .loading-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease-out;
  }

  .loading-spinner-overlay.fade-out {
    opacity: 0;
    pointer-events: none;
  }

  .spinner-container {
    text-align: center;
  }

  .spinner {
    border: 4px solid var(--gray-200);
    border-top: 4px solid var(--gold);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
    margin: 0 auto 20px;
  }

  .loading-text {
    color: var(--text);
    font-size: 18px;
    font-weight: 500;
    margin-top: 16px;
  }

  .skeleton, .skeleton-loader {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s ease-in-out infinite;
    border-radius: 4px;
  }

  /* ===== Certification Cards ===== */
  .cert-card {
    transition: all 0.3s ease;
  }

  .cert-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(207, 184, 124, 0.2);
  }

  /* ===== Timeline ===== */
  .timeline-item {
    position: relative;
    padding-left: 1.5rem;
    border-left: 2px solid var(--cu-gold);
  }

  .timeline-item::before {
    content: '';
    position: absolute;
    left: -5px;
    top: 0.5rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--cu-gold);
  }

  /* ===== Responsive Grid ===== */
  .dashboard-grid {
    display: grid;
    gap: var(--spacing-lg);
    grid-template-columns: 1fr;
  }

  @media (min-width: 768px) {
    .dashboard-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (min-width: 1024px) {
    .dashboard-grid {
      grid-template-columns: repeat(3, 1fr);
    }
  }

  @media (min-width: 1280px) {
    .dashboard-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  /* ===== Status Indicators ===== */
  .status-operational {
    background-color: var(--cu-green);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse 2s infinite;
  }

  /* ===== Carousel Indicators (swipe) ===== */
  .carousel-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
  }

  @media (min-width: 640px) {
    .carousel-indicators {
      display: none;
    }
  }

  .indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e5e7eb;
    transition: background 0.3s;
    cursor: pointer;
  }

  .indicator-dot.active {
    background: var(--cu-gold);
  }

  /* ===== Spreadsheet Components ===== */
  .spreadsheet-container {
    background: white;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
  }

  .controls-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    gap: 1rem;
  }

  .search-input, .filter-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: all 0.2s;
  }

  .search-input:focus, .filter-select:focus {
    outline: none;
    border-color: var(--cu-gold);
    box-shadow: 0 0 0 3px rgba(207, 184, 124, 0.1);
  }

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

  .spreadsheet-table th {
    background-color: #f9fafb;
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--cu-text-primary);
    border-bottom: 1px solid #e5e7eb;
  }

  .spreadsheet-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
  }

  .sort-icon {
    margin-left: 0.5rem;
    opacity: 0.5;
    transition: opacity 0.2s;
  }

  .sort-icon.active {
    opacity: 1;
    color: var(--cu-gold);
  }

  .status-badge {
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
  }

  .status-good {
    background-color: #dcfce7;
    color: #166534;
  }

  .status-needs-service {
    background-color: #fef3c7;
    color: #92400e;
  }

  .status-out-of-service {
    background-color: #fee2e2;
    color: #991b1b;
  }

  /* ===== Dashboard Page Header ===== */
  .dashboard-page-header {
    background: var(--cu-white);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    padding: 1rem;
    border: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
  }

  @media (min-width: 640px) {
    .dashboard-page-header {
      padding: 1.5rem;
    }
  }

  .dashboard-page-title {
    font-family: var(--font-heading) !important;
    font-weight: 700;
    color: var(--cu-text-primary);
    display: flex;
    align-items: center;
    font-size: 1.875rem;
    line-height: 2.25rem;
  }

  .dashboard-page-title-icon {
    margin-right: 0.75rem;
    color: var(--cu-gold);
  }

  @media (min-width: 640px) {
    .dashboard-page-title {
      font-size: 2.25rem;
      line-height: 2.5rem;
    }

    .dashboard-page-title-icon {
      margin-right: 1rem;
    }
  }

  @media (min-width: 768px) {
    .dashboard-page-title {
      font-size: 3rem;
      line-height: 1;
    }
  }

  .dashboard-page-subtitle {
    color: var(--cu-text-secondary);
    margin-top: 0.5rem;
    font-size: 1.125rem;
    line-height: 1.75rem;
  }

  @media (min-width: 640px) {
    .dashboard-page-subtitle {
      font-size: 1.25rem;
      line-height: 1.75rem;
    }
  }

  /* ===== Dashboard Tab Navigation Container ===== */
  .dashboard-tabs-container {
    background: var(--cu-white);
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    padding: 1rem;
    border: 1px solid #e5e7eb;
    margin-bottom: 1.5rem;
    overflow-x: auto;
  }

  @media (min-width: 640px) {
    .dashboard-tabs-container {
      padding: 1rem 1.5rem;
    }
  }

  .dashboard-tabs-wrapper {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  @media (max-width: 640px) {
    .dashboard-tabs-wrapper {
      gap: 0.25rem;
    }
  }

  /* ===== Multiselect Mode Styles (AED Planning Map) ===== */
  .multiselect-active .leaflet-container {
    cursor: crosshair !important;
  }

  .building-marker.selected {
    stroke-width: 4 !important;
    stroke: #7c3aed !important;
    filter: drop-shadow(0 0 4px rgba(124, 58, 237, 0.5));
  }

  .multiselect-actions-bar {
    animation: slide-up 0.3s ease-out;
  }
}

/* =========================================================================
   @layer modern - Micro-interactions, Effects, Dark Mode
   ========================================================================= */
@layer modern {
  /* ===== Micro-interactions ===== */
  .cuems .cu-btn {
    position: relative;
    overflow: hidden;
  }

  .cuems .cu-btn:active {
    transform: scale(0.98);
    transition-duration: var(--dur-fast);
  }

  /* ===== Glass Effect (opt-in) ===== */
  .cuems .cu-glass {
    background: color-mix(in oklab, var(--surface) 70%, transparent);
    backdrop-filter: saturate(1.1) blur(8px);
    -webkit-backdrop-filter: saturate(1.1) blur(8px);
    border: 1px solid color-mix(in oklab, var(--divider) 70%, transparent);
  }

  /* ===== Animations ===== */
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

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

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes pulse {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.8;
      transform: scale(1.02);
    }
  }

  @keyframes cu-pulse-ring {
    0% { transform: scale(0.96); opacity: 0.75; }
    70% { transform: scale(1.15); opacity: 0; }
    100% { opacity: 0; }
  }

  @keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  @keyframes slide-up {
    from {
      transform: translate(-50%, 100%);
      opacity: 0;
    }
    to {
      transform: translate(-50%, 0);
      opacity: 1;
    }
  }

  @keyframes pulse-edit {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 0 15px rgba(255,0,0,0.8);
    }
    50% {
      transform: scale(1.1);
      box-shadow: 0 0 25px rgba(255,0,0,1);
    }
  }

  .animate {
    animation: fadeIn 0.5s ease-out;
  }

  .fade-in {
    animation: fadeIn 0.5s ease-out;
  }

  .fade-in-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.165, 0.84, 0.44, 1), transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
  }

  .is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .fade-in-up.is-visible, .is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* ===== Gradient Text Utilities ===== */
  .gradient-text-gold {
    color: var(--gold-accessible);
    background: linear-gradient(135deg, var(--cu-gold) 0%, var(--cu-gold-dark) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }

  /* REMOVED: This was incorrectly making all text in gradient backgrounds transparent
     If you need gradient TEXT (not background), use .gradient-text-gold class instead
  .bg-gradient-to-r {
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  */

  /* ===== Dark Mode (opt-in: add .dark-mode to .cuems) ===== */
  .cuems.dark-mode {
    --surface: #0B0B0C;
    --surface-muted: #0E0F11;
    --text-primary: #ECEDEE;
    --text-secondary: #A7AAB2;
    --divider: #1E2126;
  }

  .cuems.dark-mode .cu-card,
  .cuems.dark-mode .cu-tabpanel,
  .cuems.dark-mode .cu-modal__panel {
    background: var(--surface-muted);
    border-color: var(--divider);
  }

  .cuems.dark-mode .cu-table thead th {
    background: #0f1115;
  }

  .cuems.dark-mode .cu-badge {
    background: #14161b;
    border-color: #1F232A;
    color: var(--text-secondary);
  }
}

/* =========================================================================
   @layer mobile - Mobile Breakpoints & Responsive Utilities
   ========================================================================= */
@layer mobile {
  /* ===== Leadership Dashboard Button Styles - Unique color themes ===== */

  /* President - Royal Purple Theme */
  .leadership-btn-president {
    background: linear-gradient(135deg, #9333EA, #7E22CE);
    color: #FFFFFF;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(147, 51, 234, 0.3);
  }
  .leadership-btn-president:hover {
    background: linear-gradient(135deg, #7E22CE, #6B21A8);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(147, 51, 234, 0.4);
  }

  /* VP Clinical Operations - Emerald Green Theme */
  .leadership-btn-vp-clinical {
    background: linear-gradient(135deg, #10B981, #059669);
    color: #FFFFFF;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3);
  }
  .leadership-btn-vp-clinical:hover {
    background: linear-gradient(135deg, #059669, #047857);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(16, 185, 129, 0.4);
  }

  /* VP Administration - Rose Pink Theme */
  .leadership-btn-vp-admin {
    background: linear-gradient(135deg, #F43F5E, #E11D48);
    color: #FFFFFF;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(244, 63, 94, 0.3);
  }
  .leadership-btn-vp-admin:hover {
    background: linear-gradient(135deg, #E11D48, #BE123C);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(244, 63, 94, 0.4);
  }

  /* VP Community Education - Sky Blue Theme */
  .leadership-btn-vp-comm-ed {
    background: linear-gradient(135deg, #0EA5E9, #0284C7);
    color: #FFFFFF;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(14, 165, 233, 0.3);
  }
  .leadership-btn-vp-comm-ed:hover {
    background: linear-gradient(135deg, #0284C7, #0369A1);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(14, 165, 233, 0.4);
  }

  /* VP Internal Training - Amber Orange Theme */
  .leadership-btn-vp-training {
    background: linear-gradient(135deg, #F59E0B, #D97706);
    color: #FFFFFF;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
  }
  .leadership-btn-vp-training:hover {
    background: linear-gradient(135deg, #D97706, #B45309);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(245, 158, 11, 0.4);
  }

  /* VP Public Relations - Fuchsia Theme */
  .leadership-btn-vp-pr {
    background: linear-gradient(135deg, #EC4899, #DB2777);
    color: #FFFFFF;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(236, 72, 153, 0.3);
  }
  .leadership-btn-vp-pr:hover {
    background: linear-gradient(135deg, #DB2777, #BE185D);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(236, 72, 153, 0.4);
  }

  /* Chief - Navy Blue Theme with Gold Accent */
  .leadership-btn-chief {
    background: linear-gradient(135deg, #1E40AF, #1E3A8A);
    color: #FFFFFF;
    border: 2px solid #CFB87C;
    box-shadow: 0 4px 6px rgba(30, 64, 175, 0.3);
  }
  .leadership-btn-chief:hover {
    background: linear-gradient(135deg, #1E3A8A, #172554);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(30, 64, 175, 0.4);
  }

  /* Member at Large - Teal Theme */
  .leadership-btn-member-large {
    background: linear-gradient(135deg, #14B8A6, #0F766E);
    color: #FFFFFF;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(20, 184, 166, 0.3);
  }
  .leadership-btn-member-large:hover {
    background: linear-gradient(135deg, #0F766E, #115E59);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(20, 184, 166, 0.4);
  }

  /* Advisor - Deep Purple Theme */
  .leadership-btn-advisor {
    background: linear-gradient(135deg, #7C3AED, #6D28D9);
    color: #FFFFFF;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(124, 58, 237, 0.3);
  }
  .leadership-btn-advisor:hover {
    background: linear-gradient(135deg, #6D28D9, #5B21B6);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(124, 58, 237, 0.4);
  }

  /* Admin - Gold Theme (CU Boulder) */
  .leadership-btn-admin {
    background: linear-gradient(135deg, #CFB87C, #B8A369);
    color: #000000;
    border: 2px solid transparent;
    box-shadow: 0 4px 6px rgba(207, 184, 124, 0.3);
  }
  .leadership-btn-admin:hover {
    background: linear-gradient(135deg, #B8A369, #A08D58);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(207, 184, 124, 0.4);
  }

  /* ===== Tablet Optimizations (max-width: 1024px) ===== */
  @media (max-width: 1024px) {
    .tab-button {
      font-size: 14px;
      padding: 8px 12px;
    }

    .kpi-card {
      padding: 1rem;
    }

    .dashboard-card {
      margin-bottom: 1rem;
    }
  }

  /* ===== Mobile Optimizations (max-width: 768px) ===== */
  @media (max-width: 768px) {
    .container {
      padding: 0 16px;
    }

    /* Improved mobile typography */
    h1 {
      font-size: 28px;
      line-height: 1.2;
      margin-bottom: 12px;
    }

    h2 {
      font-size: 22px;
      margin-bottom: 16px;
    }

    h3 {
      font-size: 18px;
      margin-bottom: 12px;
    }

    /* Better mobile header layout */
    .header, nav {
      padding: 12px 16px;
    }

    /* Mobile-optimized navigation */
    .nav-inner {
      gap: 8px;
    }

    .nav-links {
      display: none;
    }

    /* Improved tab navigation for mobile */
    .tab-navigation {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 8px 0;
      margin: 0 -16px;
      padding-left: 16px;
      padding-right: 16px;
    }

    .tab-navigation::-webkit-scrollbar {
      display: none;
    }

    .tab-button {
      font-size: 13px;
      padding: 10px 12px;
      white-space: nowrap;
      min-width: fit-content;
      flex-shrink: 0;
    }

    .tab-button i {
      margin-right: 4px;
      font-size: 14px;
    }

    .tab-button span {
      display: inline-block;
    }

    /* Better card layout for mobile */
    .kpi-card, .card, .dashboard-card {
      padding: 16px;
      margin-bottom: 12px;
      border-radius: 8px;
    }

    .kpi-card::before {
      display: none;
    }

    .kpi-card-icon {
      width: 36px;
      height: 36px;
      font-size: 18px;
      margin-bottom: 12px;
    }

    /* Grid adjustments */
    .grid-2,
    .grid-3,
    .grid-4 {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    /* Mobile-friendly spacing */
    .section-spacing {
      padding: 16px;
    }

    .max-w-7xl {
      padding: 0 16px;
    }

    /* Flexible layouts */
    .flex:not(.flex-row) {
      flex-direction: column;
      gap: 12px;
    }

    .grid {
      grid-template-columns: 1fr;
      gap: 12px;
    }

    /* Touch-friendly interactive elements */
    button,
    .btn-gold,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    a.btn {
      min-height: 44px;
      font-size: 15px;
      padding: 12px 16px;
      width: 100%;
      justify-content: center;
    }

    /* Better table handling */
    .table-wrapper {
      margin: 0 -16px;
      border-radius: 0;
      border-left: none;
      border-right: none;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    table {
      font-size: 14px;
    }

    /* Content spacing from fixed elements */
    .dashboard-content {
      padding-top: 16px;
    }

    /* Hide desktop-only elements */
    .desktop-only {
      display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only {
      display: block !important;
    }

    /* Dashboard content specific */
    .dashboard-content .flex {
      flex-direction: column;
    }

    .dashboard-content .grid {
      grid-template-columns: 1fr;
    }

    .dashboard-content .space-x-4 > * {
      margin-left: 0;
      margin-bottom: 1rem;
    }

    /* Responsive text sizing */
    .dashboard-content .text-3xl {
      font-size: 1.5rem;
    }

    .dashboard-content .text-2xl {
      font-size: 1.25rem;
    }

    /* Responsive padding */
    .dashboard-content .px-6 {
      padding-left: 1rem;
      padding-right: 1rem;
    }

    /* Prevent iOS text size adjustment */
    html {
      -webkit-text-size-adjust: 100%;
    }

    /* Ensure header stays fixed and on top */
    header[data-js-sticky-header] {
      z-index: 50;
    }

    /* Mobile menu positioning */
    .mobile-menu {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      z-index: 50;
    }

    /* AED Unified Inspection Mobile Styles */
    .bg-green-50 {
      padding: 1rem !important;
      margin: 0.75rem !important;
    }

    .text-4xl {
      font-size: 1.875rem !important;
      line-height: 2.25rem !important;
    }

    .grid.md\:grid-cols-2 {
      grid-template-columns: 1fr !important;
      gap: 0.75rem !important;
    }

    .hover\:border-gray-300,
    .border-gray-200 {
      min-height: 60px;
      padding: 1rem 0.75rem !important;
    }

    input[type="search"],
    input[type="text"].rounded-lg {
      font-size: 16px !important;
      padding: 0.75rem !important;
    }

    .bg-blue-50,
    .bg-white.border {
      padding: 0.75rem 1rem !important;
      font-size: 0.875rem !important;
    }

    .hover\:bg-gray-50 {
      padding: 1rem 0.75rem !important;
      min-height: 70px;
    }

    .w-16.h-16 {
      width: 3rem !important;
      height: 3rem !important;
    }

    .text-base {
      font-size: 0.875rem !important;
    }

    .text-sm {
      font-size: 0.75rem !important;
    }

    .w-8.h-8 {
      width: 2rem !important;
      height: 2rem !important;
    }

    .sticky.top-0 {
      position: fixed !important;
      width: 100% !important;
    }

    .min-h-screen > .sticky + div {
      padding-top: 4rem !important;
    }

    .max-w-4xl {
      padding-left: 0.75rem !important;
      padding-right: 0.75rem !important;
    }

    .shadow-sm {
      box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    }

    .space-x-4 > button {
      margin-right: 0.5rem !important;
    }

    .fixed.inset-0 {
      padding: 1rem !important;
    }

    .animate-pulse {
      margin: 0 auto;
    }

    /* Prevent header wrapping */
    header .container {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    header .flex {
      flex-wrap: nowrap;
    }
  }

  /* ===== Small Mobile Optimizations (max-width: 640px) ===== */
  @media (max-width: 640px) {
    /* Extra small screen optimizations */
    .section-spacing {
      padding: 12px;
    }

    /* Compact typography */
    .font-heading {
      font-size: 1.25rem;
      line-height: 1.3;
    }

    h1 {
      font-size: 24px;
      margin-bottom: 8px;
    }

    h2 {
      font-size: 20px;
      margin-bottom: 12px;
    }

    h3 {
      font-size: 16px;
      margin-bottom: 8px;
    }

    p {
      font-size: 14px;
      line-height: 1.5;
    }

    /* Minimal padding */
    .container,
    .max-w-7xl {
      padding: 0 12px;
    }

    /* Compact cards */
    .kpi-card, .card, .dashboard-card {
      padding: 12px;
      margin-bottom: 8px;
    }

    /* Smaller buttons */
    button,
    .btn-gold,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    a.btn {
      font-size: 14px;
      padding: 10px 12px;
      min-height: 40px;
    }

    /* Compact tab navigation */
    .tab-navigation {
      padding: 6px 0;
      margin: 0 -12px;
      padding-left: 12px;
      padding-right: 12px;
    }

    .tab-button {
      font-size: 12px;
      padding: 8px 10px;
    }

    .tab-button i {
      font-size: 12px;
      margin-right: 2px;
    }

    /* Hide non-essential icons */
    .tab-button i.optional-icon {
      display: none;
    }

    /* Compact header */
    .header, nav {
      padding: 10px 12px;
    }

    /* Ensure content doesn't get cut off */
    body {
      padding-bottom: 80px;
    }

    /* Dashboard content */
    .dashboard-content .section-spacing {
      padding: 0.75rem;
    }

    .dashboard-content h1 {
      font-size: 1.75rem;
    }

    .dashboard-content h2 {
      font-size: 1.5rem;
    }

    .dashboard-content .max-w-7xl {
      padding: 0 0.5rem;
    }

    /* AED Unified Inspection - Small Screens */
    .bg-green-50 {
      padding: 0.75rem !important;
      margin: 0.5rem !important;
      border-radius: 0.5rem !important;
    }

    .text-4xl {
      font-size: 1.5rem !important;
      line-height: 2rem !important;
    }

    .h-16 {
      height: 3.5rem !important;
    }

    .text-xl {
      font-size: 1.125rem !important;
    }

    button.rounded-lg {
      padding: 0.625rem !important;
      font-size: 0.875rem !important;
    }

    .w-16.h-16 {
      width: 2.5rem !important;
      height: 2.5rem !important;
    }

    .text-2xl {
      font-size: 1.25rem !important;
    }

    input[type="search"] {
      width: 100% !important;
      font-size: 16px !important;
      padding: 0.625rem !important;
    }

    .p-6 {
      padding: 0.75rem !important;
    }

    .p-4 {
      padding: 0.5rem !important;
    }

    .hidden.sm\:flex {
      display: none !important;
    }

    .sm\:hidden {
      display: block !important;
      font-size: 0.75rem !important;
    }

    h3.text-base {
      font-size: 0.875rem !important;
    }

    p.text-sm {
      font-size: 0.75rem !important;
      line-height: 1rem !important;
    }

    .space-y-2 > * {
      margin-bottom: 0.25rem !important;
    }

    .mb-6 {
      margin-bottom: 1rem !important;
    }

    .mb-4 {
      margin-bottom: 0.75rem !important;
    }

    .mt-2 {
      margin-top: 0.5rem !important;
    }

    .space-y-6 > * {
      margin-bottom: 1rem !important;
    }

    .py-6 {
      padding-top: 1rem !important;
      padding-bottom: 1rem !important;
    }

    .overflow-y-auto {
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
    }

    /* Remove duplicate body padding */
    body {
      padding-top: 0 !important;
    }

    main {
      margin-top: 0 !important;
    }

    .desktop-header {
      display: none !important;
    }

    /* AED Inspection Form Mobile */
    .aed-inspection-header {
      padding: 0.5rem 0.75rem;
      min-height: auto;
    }

    .aed-inspection-header h1 {
      font-size: 1rem;
      font-weight: 600;
      line-height: 1.2;
    }

    .aed-inspection-progress {
      height: 0.25rem;
      margin-top: 0.25rem;
      background: var(--cu-light-gray);
      border-radius: var(--radius-full);
      overflow: hidden;
    }

    .aed-inspection-progress-bar {
      height: 100%;
      background: var(--cu-green);
      transition: width 0.3s ease;
    }

    .aed-inspection-steps {
      font-size: 0.75rem;
      padding: 0.125rem 0.5rem;
      background: var(--cu-light-gray);
      border-radius: var(--radius-full);
      display: inline-block;
    }

    .aed-inspection-form {
      padding: 0.75rem;
    }

    .aed-inspection-form .form-section {
      padding: 1rem;
      margin-bottom: 0.75rem;
      border-radius: var(--radius-md);
    }

    .aed-inspection-form .grid {
      grid-template-columns: 1fr !important;
      gap: 0.75rem;
    }

    .aed-inspection-form label {
      font-size: 0.875rem;
      margin-bottom: 0.25rem;
    }

    .aed-inspection-form input,
    .aed-inspection-form select,
    .aed-inspection-form textarea {
      font-size: 1rem;
      padding: 0.5rem;
    }

    .aed-inspection-nav {
      padding: 0.75rem;
      position: sticky;
      bottom: 0;
      background: white;
      border-top: 1px solid var(--cu-light-gray);
      z-index: 30;
      margin-left: -0.75rem;
      margin-right: -0.75rem;
      margin-bottom: -0.75rem;
    }

    .aed-inspection-nav button {
      padding: 0.5rem 1rem;
      font-size: 0.875rem;
    }

    .aed-selection-card {
      padding: 1rem;
    }

    .aed-selection-card .icon-wrapper {
      width: 3rem;
      height: 3rem;
      margin-bottom: 0.5rem;
    }

    .aed-selection-card h3 {
      font-size: 0.875rem;
      margin-bottom: 0.25rem;
    }

    .aed-selection-card p {
      font-size: 0.75rem;
      line-height: 1.2;
    }

    .building-list-mobile {
      max-height: 60vh;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }

    .inspection-checklist {
      background: var(--cu-light-gray);
      padding: 0.75rem;
      border-radius: var(--radius-md);
    }

    .inspection-checklist label {
      padding: 0.5rem;
      font-size: 0.875rem;
      display: flex;
      align-items: center;
    }

    .inspection-checklist input[type="checkbox"] {
      margin-right: 0.5rem;
    }

    .photo-upload-area {
      padding: 0.75rem;
      min-height: auto;
      border: 2px dashed var(--cu-light-gray);
      border-radius: var(--radius-md);
    }

    .photo-upload-area label {
      font-size: 0.875rem;
    }

    .aed-notification {
      padding: 0.75rem;
      font-size: 0.875rem;
      margin-bottom: 0.75rem;
    }

    .aed-notification .icon {
      font-size: 1.25rem;
      margin-right: 0.5rem;
    }

    .aed-modal-content {
      margin: 1rem;
      padding: 1rem;
      max-height: 90vh;
      overflow-y: auto;
    }
  }

  /* ===== Mobile-specific utility classes ===== */
  @media (max-width: 768px) {
    .mobile\:flex-col {
      flex-direction: column !important;
    }

    .mobile\:flex-row {
      flex-direction: row !important;
    }

    .mobile\:gap-2 {
      gap: 8px !important;
    }

    .mobile\:gap-3 {
      gap: 12px !important;
    }

    .mobile\:gap-4 {
      gap: 16px !important;
    }

    .mobile\:p-2 {
      padding: 8px !important;
    }

    .mobile\:p-3 {
      padding: 12px !important;
    }

    .mobile\:p-4 {
      padding: 16px !important;
    }

    .mobile\:px-3 {
      padding-left: 12px !important;
      padding-right: 12px !important;
    }

    .mobile\:py-2 {
      padding-top: 8px !important;
      padding-bottom: 8px !important;
    }

    .mobile\:w-full {
      width: 100% !important;
    }

    .mobile\:text-sm {
      font-size: 14px !important;
    }

    .mobile\:text-base {
      font-size: 16px !important;
    }

    .mobile\:text-center {
      text-align: center !important;
    }

    .mobile\:hidden {
      display: none !important;
    }

    .mobile\:block {
      display: block !important;
    }

    .mobile\:inline-block {
      display: inline-block !important;
    }

    .mobile\:overflow-x-auto {
      overflow-x: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    .mobile\:overflow-y-auto {
      overflow-y: auto !important;
      -webkit-overflow-scrolling: touch;
    }

    .hide-mobile {
      display: none !important;
    }

    .show-mobile {
      display: block !important;
    }

    .flex-mobile {
      display: flex !important;
    }
  }

  /* Mobile-first utility classes */
  .mobile-stack {
    display: flex;
    flex-direction: column;
  }

  @media (min-width: 768px) {
    .mobile-stack {
      flex-direction: row;
    }

    .hide-desktop {
      display: none !important;
    }

    .aed-mobile-card {
      padding: 1.5rem;
      margin: 1rem;
    }

    .aed-mobile-id {
      font-size: 2.25rem;
    }
  }

  /* AED Inspection Mobile-Specific Classes */
  .aed-mobile-card {
    background: linear-gradient(135deg, #dcfce7 0%, #f0fdf4 100%);
    border: 2px solid #86efac;
    border-radius: 0.75rem;
    padding: 1rem;
    margin: 0.75rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  }

  .aed-mobile-id {
    font-size: 1.5rem;
    font-weight: bold;
    color: #166534;
    text-align: center;
    margin-bottom: 0.5rem;
  }

  .aed-mobile-button {
    width: 100%;
    padding: 1rem;
    margin-bottom: 0.75rem;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }

  .aed-mobile-button:active {
    transform: scale(0.98);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }

  .aed-building-item {
    display: flex;
    align-items: center;
    padding: 0.875rem;
    margin-bottom: 0.5rem;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    min-height: 60px;
    transition: all 0.15s ease;
  }

  .aed-building-item:active {
    background: #f9fafb;
    border-color: var(--cu-gold);
  }

  .aed-mobile-search {
    width: 100%;
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 0.5rem;
    background: white;
  }

  .aed-mobile-search:focus {
    outline: none;
    border-color: var(--cu-gold);
    box-shadow: 0 0 0 3px rgba(207, 184, 124, 0.1);
  }

  .aed-mobile-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
    background: #f9fafb;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #6b7280;
  }
}

/* =========================================================================
   @layer legacy - Backward Compatibility Shims
   ========================================================================= */
@layer legacy {
  /* Legacy button shims (outside .cuems namespace for backward compat) */
  .btn-gold,
  .cuems .btn-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in oklab, var(--cu-gold) 50%, white);
    background: var(--cu-gold);
    color: var(--cu-black);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-enter), box-shadow var(--dur), background var(--dur);
  }

  .btn-outline,
  .cuems .btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-300);
    background: transparent;
    color: var(--text-primary);
    font-weight: 600;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-enter), box-shadow var(--dur), background var(--dur);
  }

  .btn-gold:hover, .btn-outline:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
  }

  .btn-gold:active, .btn-outline:active {
    transform: translateY(0);
  }

  /* Older KPI/Card names */
  .kpi-card, .cuems .kpi-card {
    display: grid;
    gap: 0.25rem;
    background: var(--surface);
    border: 1px solid var(--divider);
    border-radius: var(--radius-xl);
    padding: var(--sp-5);
    box-shadow: var(--shadow-md);
  }

  /* Older tab button shims */
  .tab-button-modern, .tab-button,
  .cuems .tab-button-modern, .cuems .tab-button {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-weight: 600;
    cursor: pointer;
    transition: color var(--dur), background var(--dur);
  }

  .tab-button-modern.active, .tab-button.active,
  .cuems .tab-button-modern.active, .cuems .tab-button.active {
    color: var(--cu-gold-accessible);
    background: color-mix(in oklab, var(--cu-gold) 18%, transparent);
  }

  /* Alerts (modern alias) */
  .alert-modern, .alert,
  .cuems .alert-modern, .cuems .alert {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 0.875rem;
    border-radius: var(--radius-lg);
    background: var(--surface);
    border-left: 4px solid var(--divider);
    box-shadow: var(--shadow-sm);
  }

  .alert.info, .cuems .alert.info {
    border-left-color: var(--info);
  }

  .alert.success, .cuems .alert.success {
    border-left-color: var(--success);
  }

  .alert.warning, .cuems .alert.warning {
    border-left-color: var(--warning);
  }

  .alert.danger, .cuems .alert.danger {
    border-left-color: var(--danger);
  }
}

/* =========================================================================
   Utility Classes (Non-Layered)
   ========================================================================= */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }
.p-4 { padding: 32px; }

.flex { display: flex; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }

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

/* CU Boulder specific utility classes */
.text-cu-gold {
  color: var(--cu-gold) !important;
}

.text-cu-gold-accessible {
  color: var(--cu-gold-accessible) !important;
}

.bg-cu-gold {
  background-color: var(--cu-gold) !important;
}

.bg-cu-gold-light {
  background-color: var(--cu-gold-light) !important;
}

.bg-cu-light-gray {
  background-color: var(--cu-light-gray) !important;
}

.border-cu-gold {
  border-color: var(--cu-gold) !important;
}

.section-header {
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--text);
}

.section-spacing {
  padding: 2rem;
}

.dashboard-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-2px);
}

.focus\:shadow-cu-gold:focus {
  box-shadow: 0 0 0 3px rgba(207, 184, 124, 0.5);
}

.font-heading {
  font-family: var(--font-heading);
  font-weight: 700;
}

.font-body {
  font-family: var(--font-sans);
  font-weight: 400;
}

.font-condensed {
  font-family: var(--font-heading);
}

.font-regular {
  font-family: var(--font-sans);
}

/* =========================================================================
   Custom Scrollbar (CU Boulder style)
   ========================================================================= */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--cu-light-gray);
}

::-webkit-scrollbar-thumb {
  background: var(--cu-gold);
  border-radius: var(--radius-standard);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cu-gold-dark);
}

/* =========================================================================
   High Contrast Mode (A11Y)
   ========================================================================= */
@media (prefers-contrast: high) {
  :root {
    --gray-300: #000;
    --gray-400: #000;
  }

  .btn,
  .card,
  .input,
  .table-wrapper {
    border-width: 2px;
  }
}

/* =========================================================================
   Print Styles
   ========================================================================= */
@media print {
  .nav, .btn, .toggle, .tabs-container, .no-print {
    display: none !important;
  }

  body {
    font-size: 12pt;
    line-height: 1.5;
  }

  .card, .dashboard-section {
    page-break-inside: avoid;
    box-shadow: none;
    border: 1px solid #ccc;
  }
}

/* =========================================================================
   Sticky Utility (.cuems namespaced)
   ========================================================================= */
.cuems .cu-sticky-top {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--surface);
}

/* =========================================================================
   END OF CONSOLIDATED DESIGN SYSTEM
   ========================================================================= */