@keyframes modal-video{from{opacity:0}to{opacity:1}}@keyframes modal-video-inner{from{transform:translate(0, 100px)}to{transform:translate(0, 0)}}.modal-video{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.5);z-index:1000000;cursor:pointer;opacity:1;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video;transition:opacity .3s ease-out}.modal-video-effect-exit{opacity:0}.modal-video-effect-exit .modal-video-movie-wrap{transform:translate(0, 100px)}.modal-video-body{max-width:960px;width:100%;height:100%;margin:0 auto;padding:0 10px;display:flex;justify-content:center;box-sizing:border-box}.modal-video-inner{display:flex;justify-content:center;align-items:center;width:100%;height:100%}@media(orientation: landscape){.modal-video-inner{padding:10px 60px;box-sizing:border-box}}.modal-video-movie-wrap{width:100%;height:0;position:relative;padding-bottom:56.25%;background-color:#333;animation-timing-function:ease-out;animation-duration:.3s;animation-name:modal-video-inner;transform:translate(0, 0);transition:transform .3s ease-out}.modal-video-movie-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%}.modal-video-close-btn{position:absolute;z-index:2;top:-45px;right:0px;display:inline-block;width:35px;height:35px;overflow:hidden;border:none;background:rgba(0,0,0,0)}@media(orientation: landscape){.modal-video-close-btn{top:0;right:-45px}}.modal-video-close-btn:before{transform:rotate(45deg)}.modal-video-close-btn:after{transform:rotate(-45deg)}.modal-video-close-btn:before,.modal-video-close-btn:after{content:"";position:absolute;height:2px;width:100%;top:50%;left:0;margin-top:-1px;background:#fff;border-radius:5px;margin-top:-6px}
:root{--swiper-theme-color: #007aff}:host{position:relative;display:block;margin-left:auto;margin-right:auto;z-index:1}.swiper{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function, initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-ios .swiper-slide,.swiper-wrapper{transform:translate3d(0px, 0, 0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px;.swiper-slide,.swiper-cube-shadow{transform-style:preserve-3d}}.swiper-css-mode{>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none;&::-webkit-scrollbar{display:none}}>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}&.swiper-horizontal{>.swiper-wrapper{scroll-snap-type:x mandatory}}&.swiper-vertical{>.swiper-wrapper{scroll-snap-type:y mandatory}}&.swiper-free-mode{>.swiper-wrapper{scroll-snap-type:none}>.swiper-wrapper>.swiper-slide{scroll-snap-align:none}}&.swiper-centered{>.swiper-wrapper::before{content:"";flex-shrink:0;order:9999}>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}}&.swiper-centered.swiper-horizontal{>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}}&.swiper-centered.swiper-vertical{>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}}}.swiper-3d{.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom,.swiper-slide-shadow,.swiper-slide-shadow-left,.swiper-slide-shadow-right,.swiper-slide-shadow-top,.swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-slide-shadow{background:rgba(0, 0, 0, 0.15)}.swiper-slide-shadow-left{background-image:linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-slide-shadow-right{background-image:linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-slide-shadow-top{background-image:linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}.swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))}}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color, var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper:not(.swiper-watch-progress),.swiper-watch-progress .swiper-slide-visible{.swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}}.swiper-lazy-preloader-white{--swiper-preloader-color: #fff}.swiper-lazy-preloader-black{--swiper-preloader-color: #000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.portal-brand{color:#e80000}.btn-portal-primary{background-color:#e80000;border-color:#e80000}.btn-portal-primary:hover{background-color:#c00;border-color:#c00}.auth-page{position:relative;min-height:100vh;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);display:flex;align-items:center;justify-content:center;padding:2rem 1rem;overflow:hidden}.auth-page::before{content:"";position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.4) 0%, transparent 50%),radial-gradient(circle at 80% 20%, rgba(118, 75, 162, 0.4) 0%, transparent 50%),radial-gradient(circle at 40% 40%, rgba(99, 102, 241, 0.3) 0%, transparent 50%);z-index:0}.auth-content{position:relative;z-index:1;width:100%;max-width:420px;margin:0 auto}.auth-container{background:rgba(255,255,255,.95);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2);border-radius:24px;box-shadow:0 25px 50px rgba(0,0,0,.15),0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.6);overflow:hidden;animation:authFadeInScale .8s cubic-bezier(0.16, 1, 0.3, 1);position:relative}@keyframes authFadeInScale{0%{opacity:0;transform:scale(0.9) translateY(20px)}100%{opacity:1;transform:scale(1) translateY(0)}}.auth-header{padding:2rem 2rem 1rem;text-align:center;background:linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);border-bottom:1px solid rgba(102,126,234,.1)}.auth-header .logo-link{text-decoration:none;color:inherit}.auth-header .logo-container{display:flex;align-items:center;justify-content:center;gap:.75rem}.auth-header .logo-icon{width:48px;height:48px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.5rem;box-shadow:0 8px 32px rgba(102,126,234,.3)}.auth-header .logo-text{display:flex;flex-direction:column;align-items:flex-start}.auth-header .brand-name{font-size:1.5rem;font-weight:700;color:#1a202c;line-height:1}.auth-header .brand-subtitle{font-size:.75rem;color:#667eea;font-weight:600;text-transform:uppercase;letter-spacing:.1em}.auth-main{padding:1.5rem 2rem 2rem}.auth-welcome{text-align:center;margin-bottom:2rem}.auth-welcome .welcome-title{font-size:1.875rem;font-weight:700;color:#1a202c;margin-bottom:.5rem;line-height:1.2}.auth-welcome .welcome-subtitle{font-size:.9rem;color:#4a5568;line-height:1.5;margin:0}.auth-card{background:rgba(255,255,255,.8);border-radius:16px;border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);box-shadow:0 8px 32px rgba(0,0,0,.1)}.auth-form{padding:1.5rem}.auth-form .form-group{margin-bottom:1.25rem}.auth-form .form-label{display:flex;align-items:center;margin-bottom:.5rem;color:#2d3748;font-weight:600;font-size:.875rem}.auth-form .form-label i{color:#667eea;font-size:.875rem}.auth-form .input-wrapper{position:relative}.auth-form .form-control{width:100%;padding:.875rem 1rem;padding-right:2.5rem;border:2px solid #e2e8f0;border-radius:12px;font-size:1rem;background:rgba(255,255,255,.9);transition:all .2s cubic-bezier(0.4, 0, 0.2, 1);color:#1a202c;font-weight:400;box-shadow:0 2px 4px rgba(0,0,0,.05)}.auth-form .form-control::-moz-placeholder{color:#a0aec0;font-weight:400}.auth-form .form-control::placeholder{color:#a0aec0;font-weight:400}.auth-form .form-control:focus{outline:none;border-color:#667eea;background:rgba(255,255,255,.95);box-shadow:0 0 0 3px rgba(102,126,234,.1),0 2px 4px rgba(0,0,0,.05);transform:translateY(-1px)}.auth-form .form-control.is-invalid{border-color:#e53e3e;background:rgba(254,242,242,.8)}.auth-form .form-control.is-invalid:focus{box-shadow:0 0 0 3px rgba(229,62,62,.1),0 2px 4px rgba(0,0,0,.05)}.auth-form .input-icon{position:absolute;right:1rem;top:50%;transform:translateY(-50%);color:#a0aec0;pointer-events:none}.btn-auth{width:100%;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border:none;color:#fff;font-weight:600;font-size:1rem;padding:1rem;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 8px 25px rgba(102,126,234,.3);margin-bottom:1rem;position:relative;overflow:hidden}.btn-auth:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 40px rgba(102,126,234,.4)}.btn-auth:active{transform:translateY(-1px)}.btn-auth:disabled{opacity:.6;cursor:not-allowed;transform:none}.btn-auth .btn-content{display:flex;align-items:center;justify-content:center;gap:.5rem;position:relative;z-index:1}.btn-auth-secondary{display:inline-flex;align-items:center;justify-content:center;width:100%;background:linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);border:2px solid #cbd5e1;color:#475569;font-weight:600;font-size:1rem;padding:1rem;border-radius:12px;cursor:pointer;transition:all .3s cubic-bezier(0.4, 0, 0.2, 1);box-shadow:0 8px 25px rgba(148,163,184,.15);text-decoration:none;position:relative;overflow:hidden}.btn-auth-secondary:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(148,163,184,.25);background:linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);border-color:#94a3b8;color:#334155;text-decoration:none}.btn-auth-secondary:active{transform:translateY(-1px)}.auth-loading-spinner{width:20px;height:20px;border:2px solid rgba(255,255,255,.3);border-top:2px solid #fff;border-radius:50%;animation:authSpin 1s linear infinite}@keyframes authSpin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.auth-alert-success,.auth-alert-error{padding:1rem;border-radius:12px;margin-bottom:1.5rem;display:flex;align-items:center;gap:.5rem;font-size:.875rem;font-weight:500;border:1px solid}.auth-alert-success{background:rgba(72,187,120,.1);color:#22543d;border-color:rgba(72,187,120,.2)}.auth-alert-error{background:rgba(229,62,62,.1);color:#742a2a;border-color:rgba(229,62,62,.2)}.auth-error-message{margin-top:.5rem;color:#e53e3e;font-size:.875rem;display:flex;align-items:center;gap:.375rem;font-weight:500}.auth-divider{position:relative;text-align:center;margin:1.5rem 0}.auth-divider::before{content:"";position:absolute;top:50%;left:0;right:0;height:1px;background:#e2e8f0}.auth-divider .divider-text{background:rgba(255,255,255,.95);padding:0 1rem;color:#718096;font-size:.875rem;font-weight:500;position:relative;z-index:1}@media(max-width: 480px){.auth-page{padding:1rem .5rem}.auth-container{border-radius:16px;margin:0}.auth-header{padding:1.5rem 1.5rem 1rem}.auth-header .logo-container{flex-direction:column;gap:.5rem}.auth-header .logo-text{align-items:center;text-align:center}.auth-main{padding:1rem 1.5rem 1.5rem}.auth-form{padding:1rem}.auth-welcome .welcome-title{font-size:1.5rem}.auth-welcome .welcome-subtitle{font-size:.85rem}.auth-form .form-control{padding:.75rem;padding-right:2.25rem}.btn-auth{padding:.875rem}}[data-tooltip]{position:relative;cursor:help}[data-tooltip]::before,[data-tooltip]::after{position:absolute;opacity:0;pointer-events:none;transition:opacity 150ms ease;z-index:1000}[data-tooltip]::before{content:attr(data-tooltip);background:#0f172a;color:#fff;padding:.5rem .75rem;border-radius:.5rem;font-size:.813rem;white-space:nowrap;bottom:100%;left:50%;transform:translateX(-50%) translateY(-4px);margin-bottom:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1)}[data-tooltip]::after{content:"";border:6px solid rgba(0,0,0,0);border-top-color:#0f172a;bottom:100%;left:50%;transform:translateX(-50%) translateY(2px)}[data-tooltip]:hover::before,[data-tooltip]:hover::after{opacity:1}
/* ========================================================
   STAFFACTORY EMPLOYEE PORTAL - GLOBAL CSS VARIABLES
   Modern, Professional, Executive-Level Design System
======================================================== */

/* Inter font is now loaded globally in src/app/layout.tsx - no duplicate import needed */

/* ========== GLOBAL VARIABLES ========== */
:root {
  /* Base Colors - Professional Palette */
  --gray-50: #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e2e8f0;
  --gray-300: #cbd5e1;
  --gray-400: #94a3b8;
  --gray-500: #64748b;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1e293b;
  --gray-900: #0f172a;

  /* Role-Based Primary Colors - Enhanced */
  --admin-primary: #dc2626;
  --admin-primary-hover: #991b1b;
  --admin-primary-light: #fecaca;
  --admin-primary-lighter: #fef2f2;
  --admin-gradient: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  --admin-gradient-soft: linear-gradient(135deg, rgba(220, 38, 38, 0.1) 0%, rgba(153, 27, 27, 0.05) 100%);

  --manager-primary: #2563eb;
  --manager-primary-hover: #1d4ed8;
  --manager-primary-light: #bfdbfe;
  --manager-primary-lighter: #eff6ff;
  --manager-gradient: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  --manager-gradient-soft: linear-gradient(135deg, rgba(37, 99, 235, 0.1) 0%, rgba(29, 78, 216, 0.05) 100%);

  --recruiter-primary: #059669;
  --recruiter-primary-hover: #047857;
  --recruiter-primary-light: #a7f3d0;
  --recruiter-primary-lighter: #ecfdf5;
  --recruiter-gradient: linear-gradient(135deg, #059669 0%, #047857 100%);
  --recruiter-gradient-soft: linear-gradient(135deg, rgba(5, 150, 105, 0.1) 0%, rgba(4, 120, 87, 0.05) 100%);

  /* Status Colors - Enhanced */
  --success: #10b981;
  --success-hover: #059669;
  --success-light: #d1fae5;
  --success-lighter: #ecfdf5;

  --warning: #f59e0b;
  --warning-hover: #d97706;
  --warning-light: #fef3c7;
  --warning-lighter: #fffbeb;

  --error: #ef4444;
  --error-hover: #dc2626;
  --error-light: #fee2e2;
  --error-lighter: #fef2f2;

  --info: #3b82f6;
  --info-hover: #2563eb;
  --info-light: #dbeafe;
  --info-lighter: #eff6ff;

  /* Semantic Color Gradients */
  --success-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --warning-gradient: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --error-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  --info-gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);

  /* Shadows - Modern Depth */
  --shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
  --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);

  /* Border Radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  --radius-full: 9999px;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* Typography */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;

  /* Typography Scale - Modular Scale (1.250) */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;     /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg: 1.125rem;     /* 18px */
  --font-size-xl: 1.25rem;      /* 20px */
  --font-size-2xl: 1.5rem;      /* 24px */
  --font-size-3xl: 1.875rem;    /* 30px */
  --font-size-4xl: 2.25rem;     /* 36px */
  --font-size-5xl: 3rem;        /* 48px */
  --font-size-6xl: 3.75rem;     /* 60px */

  /* Line Heights */
  --line-height-none: 1;
  --line-height-tight: 1.25;
  --line-height-snug: 1.375;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.625;
  --line-height-loose: 2;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow: 350ms ease;
  --transition-bounce: 250ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Global base styles for employee portal */
* {
  box-sizing: border-box;
}

body {
  font-family: var(--font-family);
  color: var(--gray-900);
  line-height: 1.6;
}

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ========== FOCUS STYLES ========== */
*:focus {
  outline: 2px solid var(--info);
  outline-offset: 2px;
}

/* ========== TYPOGRAPHY UTILITIES ========== */
.text-xs { font-size: var(--font-size-xs); line-height: var(--line-height-normal); }
.text-sm { font-size: var(--font-size-sm); line-height: var(--line-height-normal); }
.text-base { font-size: var(--font-size-base); line-height: var(--line-height-normal); }
.text-lg { font-size: var(--font-size-lg); line-height: var(--line-height-normal); }
.text-xl { font-size: var(--font-size-xl); line-height: var(--line-height-tight); }
.text-2xl { font-size: var(--font-size-2xl); line-height: var(--line-height-tight); }
.text-3xl { font-size: var(--font-size-3xl); line-height: var(--line-height-tight); }
.text-4xl { font-size: var(--font-size-4xl); line-height: var(--line-height-tight); }

.font-light { font-weight: var(--font-weight-light); }
.font-normal { font-weight: var(--font-weight-normal); }
.font-medium { font-weight: var(--font-weight-medium); }
.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }
.font-extrabold { font-weight: var(--font-weight-extrabold); }

.leading-none { line-height: var(--line-height-none); }
.leading-tight { line-height: var(--line-height-tight); }
.leading-snug { line-height: var(--line-height-snug); }
.leading-normal { line-height: var(--line-height-normal); }
.leading-relaxed { line-height: var(--line-height-relaxed); }

/* Semantic Typography */
.heading-display {
  font-size: var(--font-size-4xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.025em;
}

.heading-1 {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.025em;
}

.heading-2 {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-tight);
  letter-spacing: -0.025em;
}

.heading-3 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.heading-4 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
}

.body-large {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-relaxed);
}

.body-base {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.body-small {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  line-height: var(--line-height-normal);
}

.caption {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-normal);
}

/* ========== COLOR UTILITIES ========== */
/* Text Colors */
.text-gray-50 { color: var(--gray-50); }
.text-gray-100 { color: var(--gray-100); }
.text-gray-200 { color: var(--gray-200); }
.text-gray-300 { color: var(--gray-300); }
.text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); }
.text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); }
.text-gray-800 { color: var(--gray-800); }
.text-gray-900 { color: var(--gray-900); }

.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-error { color: var(--error); }
.text-info { color: var(--info); }

.text-admin { color: var(--admin-primary); }
.text-manager { color: var(--manager-primary); }
.text-recruiter { color: var(--recruiter-primary); }

/* Background Colors */
.bg-gray-50 { background-color: var(--gray-50); }
.bg-gray-100 { background-color: var(--gray-100); }
.bg-gray-200 { background-color: var(--gray-200); }
.bg-white { background-color: white; }

.bg-success { background-color: var(--success); }
.bg-success-light { background-color: var(--success-light); }
.bg-warning { background-color: var(--warning); }
.bg-warning-light { background-color: var(--warning-light); }
.bg-error { background-color: var(--error); }
.bg-error-light { background-color: var(--error-light); }
.bg-info { background-color: var(--info); }
.bg-info-light { background-color: var(--info-light); }

/* Gradient Backgrounds */
.bg-admin-gradient { background: var(--admin-gradient); }
.bg-manager-gradient { background: var(--manager-gradient); }
.bg-recruiter-gradient { background: var(--recruiter-gradient); }
.bg-success-gradient { background: var(--success-gradient); }
.bg-warning-gradient { background: var(--warning-gradient); }
.bg-error-gradient { background: var(--error-gradient); }
.bg-info-gradient { background: var(--info-gradient); }

/* Soft Gradient Backgrounds */
.bg-admin-gradient-soft { background: var(--admin-gradient-soft); }
.bg-manager-gradient-soft { background: var(--manager-gradient-soft); }
.bg-recruiter-gradient-soft { background: var(--recruiter-gradient-soft); }

/* ========== LOADING SKELETON STYLES ========== */
.skeleton-loading {
  background-color: var(--gray-200);
  border-radius: var(--radius-sm);
  display: block;
  position: relative;
  overflow: hidden;
}

.skeleton-pulse {
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton-wave {
  background: linear-gradient(
    90deg,
    var(--gray-200) 0%,
    var(--gray-300) 50%,
    var(--gray-200) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-wave 1.5s ease-in-out infinite;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton-pulse,
  .skeleton-wave {
    animation: none;
  }
}

/* ========== FOCUS VISIBLE IMPROVEMENTS ========== */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--info);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ========== IMPROVED TOUCH TARGETS ========== */
@media (pointer: coarse) {
  button,
  a,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }
}