:root {
  --color-primary: #0074F7;
  --color-secondary: #00D766;
  --color-accent-dark: #1F4890;
  --color-accent-cyan: #00A9AA;
  --color-success: #00D766;
  --color-warning: #0074F7;
  --dark-bg: #040C24;
  --font-family: Inter;
  --border-radius: 12px;
  --sidebar-width: 280px;
  --primary-color: #3b82f6;
  --secondary-color: #6b7280;
  --accent-color: #10b981;
  --success-color: #059669;
  --warning-color: #d97706;
  --error-color: #dc2626;
  --info-color: #0284c7;
  --background-color: #f8fafc;
  --surface-color: #ffffff;
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --border-color: #e5e7eb;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --notification-bg: #ffffff;
  --notification-border: #e5e7eb;
  --notification-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

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

.text-primary {
  color: var(--color-primary) !important;
}

.btn-primary {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
}

.btn-primary:hover {
  background-color: color-mix(in srgb, var(--color-primary) 90%, black) !important;
  border-color: color-mix(in srgb, var(--color-primary) 90%, black) !important;
}

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

.text-secondary {
  color: var(--color-secondary) !important;
}

.btn-secondary {
  background-color: var(--color-secondary) !important;
  border-color: var(--color-secondary) !important;
}

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

.text-success {
  color: var(--color-success) !important;
}

.btn-success {
  background-color: var(--color-success) !important;
  border-color: var(--color-success) !important;
}

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

.text-warning {
  color: var(--color-warning) !important;
}

.btn-warning {
  background-color: var(--color-warning) !important;
  border-color: var(--color-warning) !important;
}

body {
  font-family: var(--font-family), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.rounded,
.btn,
.card,
.form-control,
.form-select,
.modal-content,
.dropdown-menu {
  backdrop-filter: blur(10px);
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 );
  overflow: hidden;
  border-radius: var(--border-radius) !important;
}

.sidebar {
  width: var(--sidebar-width) !important;
  background: linear-gradient(135deg, var(--surface-color) 0%, var(--background-color) 100%);
  border-right: 1px solid var(--border-color);
  box-shadow: 2px 0 10px var(--shadow-color);
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  margin: 4px 12px;
  border-radius: var(--border-radius-sm);
  color: var(--text-secondary);
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 500;
}

.sidebar-nav-item:hover {
  background: var(--background-color);
  color: var(--primary-color);
  transform: translateX(4px);
}

.sidebar-nav-item.active {
  background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
  color: white;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.sidebar-nav-icon {
  width: 20px;
  height: 20px;
  margin-right: 12px;
  flex-shrink: 0;
}

.main-content {
  margin-left: var(--sidebar-width) !important;
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0 !important;
  }
}

.gradient-bg {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)) !important;
}

.gradient-card {
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--color-primary) 10%, white), 
    color-mix(in srgb, var(--color-secondary) 10%, white)
  ) !important;
}

.glass-effect {
  backdrop-filter: blur(10px) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out forwards;
  opacity: 1;
}

.animate-slide-up {
  animation: slideUp 0.3s ease-out forwards;
  opacity: 1;
}

.animate-fade-in-up {
  animation: fadeInUp 0.3s ease-out forwards;
  opacity: 1;
}

.animate-slide-in-left {
  animation: slideInLeft 0.3s ease-out forwards;
  opacity: 1;
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.notification-dropdown {
  @apply absolute right-0 mt-2 w-80 bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700 z-50;
  background: var(--notification-bg);
  border: 1px solid var(--notification-border);
  box-shadow: var(--notification-shadow);
  border-radius: var(--border-radius);
  max-height: 400px;
  overflow-y: auto;
}

.notification-item {
  @apply p-4 border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.2s ease;
}

.notification-item:hover {
  background-color: var(--background-color);
}

.notification-item:last-child {
  border-bottom: none;
}

.notification-badge {
  @apply absolute -top-1 -right-1 bg-red-500 text-white text-xs rounded-full w-5 h-5 flex items-center justify-center;
  background: var(--error-color);
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -8px;
  right: -8px;
}

.notification-icon {
  @apply w-6 h-6 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors;
  width: 20px;
  height: 20px;
  color: var(--secondary-color);
  transition: color 0.2s ease;
}

.notification-icon:hover {
  color: var(--primary-color);
}

.btn {
  @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-lg transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
}

.btn-primary {
  @apply bg-indigo-600 text-white hover:bg-indigo-700 focus:ring-indigo-500;
}

.btn-secondary {
  @apply bg-gray-600 text-white hover:bg-gray-700 focus:ring-gray-500;
}

.btn-success {
  @apply bg-green-600 text-white hover:bg-green-700 focus:ring-green-500;
}

.btn-danger {
  @apply bg-red-600 text-white hover:bg-red-700 focus:ring-red-500;
}

.btn-warning {
  @apply bg-yellow-600 text-white hover:bg-yellow-700 focus:ring-yellow-500;
}

.btn-info {
  @apply bg-blue-600 text-white hover:bg-blue-700 focus:ring-blue-500;
}

.btn-outline {
  @apply border-2 bg-transparent;
}

.btn-outline-primary {
  @apply border-indigo-600 text-indigo-600 hover:bg-indigo-600 hover:text-white focus:ring-indigo-500;
}

.btn-sm {
  @apply px-3 py-1.5 text-xs;
}

.btn-lg {
  @apply px-6 py-3 text-base;
}

.card {
  @apply bg-white dark:bg-gray-800 rounded-xl shadow-lg border border-gray-200 dark:border-gray-700;
}

.card-header {
  @apply p-6 border-b border-gray-200 dark:border-gray-700;
}

.card-body {
  @apply p-6;
}

.card-footer {
  @apply p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50;
}

.form-input {
  @apply w-full px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg bg-white dark:bg-gray-700 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition-colors;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2;
}

.form-error {
  @apply text-sm text-red-600 dark:text-red-400 mt-1;
}

.form-help {
  @apply text-sm text-gray-500 dark:text-gray-400 mt-1;
}

.badge {
  @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.badge-primary {
  @apply bg-indigo-100 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-300;
}

.badge-secondary {
  @apply bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-300;
}

.badge-success {
  @apply bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-300;
}

.badge-danger {
  @apply bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300;
}

.badge-warning {
  @apply bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300;
}

.badge-info {
  @apply bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-300;
}

.alert {
  @apply p-4 rounded-lg border;
}

.alert-primary {
  @apply bg-indigo-50 dark:bg-indigo-900/20 border-indigo-200 dark:border-indigo-800 text-indigo-800 dark:text-indigo-300;
}

.alert-success {
  @apply bg-green-50 dark:bg-green-900/20 border-green-200 dark:border-green-800 text-green-800 dark:text-green-300;
}

.alert-danger {
  @apply bg-red-50 dark:bg-red-900/20 border-red-200 dark:border-red-800 text-red-800 dark:text-red-300;
}

.alert-warning {
  @apply bg-yellow-50 dark:bg-yellow-900/20 border-yellow-200 dark:border-yellow-800 text-yellow-800 dark:text-yellow-300;
}

.alert-info {
  @apply bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800 text-blue-800 dark:text-blue-300;
}

.modal-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 z-50 flex items-center justify-center p-4;
}

.modal-content {
  @apply bg-white dark:bg-gray-800 rounded-2xl shadow-2xl max-w-md w-full max-h-screen overflow-y-auto;
}

.modal-header {
  @apply p-6 border-b border-gray-200 dark:border-gray-700;
}

.modal-body {
  @apply p-6;
}

.modal-footer {
  @apply p-6 border-t border-gray-200 dark:border-gray-700 flex justify-end space-x-3;
}

.dropdown {
  @apply relative inline-block;
}

.dropdown-menu {
  @apply absolute right-0 mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50;
}

.dropdown-item {
  @apply block px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors;
}

.dropdown-divider {
  @apply border-t border-gray-200 dark:border-gray-700 my-1;
}

.table {
  @apply w-full divide-y divide-gray-200 dark:divide-gray-700;
}

.table-header {
  @apply bg-gray-50 dark:bg-gray-700;
}

.table-header th {
  @apply px-6 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider;
}

.table-body {
  @apply bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700;
}

.table-row {
  @apply hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors;
}

.table-cell {
  @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 dark:text-white;
}

.progress {
  @apply w-full bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden;
}

.progress-bar {
  @apply h-2 bg-indigo-600 transition-all duration-300 ease-in-out;
}

.progress-bar-success {
  @apply bg-green-600;
}

.progress-bar-warning {
  @apply bg-yellow-600;
}

.progress-bar-danger {
  @apply bg-red-600;
}

.spinner {
  @apply animate-spin rounded-full border-2 border-gray-300 border-t-indigo-600;
}

.spinner-sm {
  @apply w-4 h-4;
}

.spinner-md {
  @apply w-6 h-6;
}

.spinner-lg {
  @apply w-8 h-8;
}

.tooltip {
  @apply absolute z-50 px-2 py-1 text-xs text-white bg-gray-900 rounded shadow-lg;
}

.fade-in {
  @apply opacity-0 animate-fade-in;
}

.slide-in-right {
  @apply transform translate-x-full animate-slide-in-right;
}

.slide-in-left {
  @apply transform -translate-x-full animate-slide-in-left;
}

.slide-in-up {
  @apply transform translate-y-full animate-slide-in-up;
}

.slide-in-down {
  @apply transform -translate-y-full animate-slide-in-down;
}

@keyframes fade-in {
  to {
    opacity: 1;
  }
}

@keyframes slide-in-right {
  to {
    transform: translateX(0);
  }
}

@keyframes slide-in-left {
  to {
    transform: translateX(0);
  }
}

@keyframes slide-in-up {
  to {
    transform: translateY(0);
  }
}

@keyframes slide-in-down {
  to {
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.3s ease-out forwards;
}

.animate-slide-in-right {
  animation: slide-in-right 0.3s ease-out forwards;
}

.animate-slide-in-left {
  animation: slide-in-left 0.3s ease-out forwards;
}

.animate-slide-in-up {
  animation: slide-in-up 0.3s ease-out forwards;
}

.animate-slide-in-down {
  animation: slide-in-down 0.3s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

[data-bs-theme="dark"], .dark {
  --color-primary: #0074F7;
  --color-secondary: #00D766;
  --color-accent-dark: #1F4890;
  --color-accent-cyan: #00A9AA;
  --color-success: #00D766;
  --color-warning: #0074F7;
  --dark-bg: #040C24;
  --dark-surface: #0A1628;
  --dark-border: #1A2332;
  background-color: var(--dark-bg) !important;
}

@media (max-width: 768px) {
  .main-content {
    margin-left: 0 !important;
    padding: 0.5rem !important;
  }
  
  .sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    z-index: 1000;
    transition: left 0.3s ease;
    height: 100vh;
    overflow-y: auto;
  }
  
  .sidebar.open {
    left: 0;
  }
  
  .card {
    margin-bottom: 1rem;
  }
  
  .btn {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .table-responsive {
    font-size: 0.875rem;
  }
  
  .modal-dialog {
    margin: 0.5rem;
  }
}

@media (max-width: 576px) {
  .container-fluid {
    padding: 0.25rem;
  }
  
  .card-body {
    padding: 1rem;
  }
  
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.25rem; }
  h3 { font-size: 1.125rem; }
}

.bg-accent-dark {
  background-color: var(--color-accent-dark) !important;
}

.bg-accent-cyan {
  background-color: var(--color-accent-cyan) !important;
}

.text-accent-dark {
  color: var(--color-accent-dark) !important;
}

.text-accent-cyan {
  color: var(--color-accent-cyan) !important;
}

.btn-accent-dark {
  background-color: var(--color-accent-dark) !important;
  border-color: var(--color-accent-dark) !important;
  color: white !important;
}

.btn-accent-cyan {
  background-color: var(--color-accent-cyan) !important;
  border-color: var(--color-accent-cyan) !important;
  color: white !important;
}

.dark {
  --primary-color: #3387F7;
  --secondary-color: #66CFD5;
  --success-color: #10B981;
  --warning-color: #F59E0B;
  --sidebar-width: 280px;
  --dark-bg: #040C24;
  --dark-surface: #0A1628;
  --dark-border: #1A2332;
}

[data-bs-theme="dark"] .glass-effect {
  background: rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

[data-bs-theme="dark"] .gradient-card {
  background: linear-gradient(135deg, 
    color-mix(in srgb, var(--color-primary) 15%, black), 
    color-mix(in srgb, var(--color-secondary) 15%, black)
  ) !important;
}