apollo212o/emptrackpro-workforce-wizardry

1 2:root {3  --primary: #4f46e5;4  --primary-light: #6366f1;5  --primary-dark: #4338ca;6  --secondary: #10b981;7  --danger: #ef4444;8  --warning: #f59e0b;9  --info: #3b82f6;10}11 12body {13  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;14  transition: all 0.3s ease;15}16 17/* RTL Support */18[dir="rtl"] {19  text-align: right;20}21 22/* Animations */23@keyframes fadeIn {24  from { opacity: 0; }25  to { opacity: 1; }26}27 28@keyframes slideUp {29  from { transform: translateY(20px); opacity: 0; }30  to { transform: translateY(0); opacity: 1; }31}32 33.fade-in {34  animation: fadeIn 0.3s ease forwards;35}36 37.slide-up {38  animation: slideUp 0.3s ease forwards;39}40 41/* Buttons with ripple effect */42.btn-ripple {43  position: relative;44  overflow: hidden;45}46 47.btn-ripple:after {48  content: "";49  display: block;50  position: absolute;51  width: 100%;52  height: 100%;53  top: 0;54  left: 0;55  pointer-events: none;56  background-image: radial-gradient(circle, #fff 10%, transparent 10.01%);57  background-repeat: no-repeat;58  background-position: 50%;59  transform: scale(10, 10);60  opacity: 0;61  transition: transform .5s, opacity 1s;62}63 64.btn-ripple:active:after {65  transform: scale(0, 0);66  opacity: 0.3;67  transition: 0s;68}69 70/* Floating labels */71.form-group {72  position: relative;73  margin-bottom: 1.5rem;74}75 76.form-control {77  width: 100%;78  padding: 1rem;79  border: 1px solid #d1d5db;80  border-radius: 0.375rem;81  font-size: 1rem;82  transition: all 0.3s ease;83}84 85.form-control:focus {86  outline: none;87  border-color: var(--primary);88  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.2);89}90 91.floating-label {92  position: absolute;93  top: 1rem;94  left: 1rem;95  color: #6b7280;96  transition: all 0.3s ease;97  pointer-events: none;98}99 100.form-control:focus + .floating-label,101.form-control:not(:placeholder-shown) + .floating-label {102  top: -0.5rem;103  left: 0.8rem;104  font-size: 0.75rem;105  background: white;106  padding: 0 0.2rem;107  color: var(--primary);108}109 110/* Password toggle */111.password-toggle {112  position: absolute;113  top: 50%;114  right: 1rem;115  transform: translateY(-50%);116  cursor: pointer;117  color: #6b7280;118}119 120[dir="rtl"] .password-toggle {121  right: auto;122  left: 1rem;123}124 125/* Responsive adjustments */126@media (max-width: 768px) {127  .sidebar {128    transform: translateX(-100%);129    position: fixed;130    z-index: 100;131    width: 280px !important;132  }133  .sidebar.open {134    transform: translateX(0);135  }136  .content {137    margin-left: 0 !important;138  }139}140 141/* Role-based colors */142.bg-hr { background-color: #f5f3ff; }143.bg-monitor { background-color: #eff6ff; }144.bg-employee { background-color: #ecfdf5; }145