@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap");


:root {
  --font-outfit: Outfit, sans-serif;
  
  --breakpoint-2xsm: 375px;
  --breakpoint-xsm: 425px;
  --breakpoint-3xl: 2000px;
  
  --text-title-2xl: 72px;
  --text-title-xl: 60px;
  --text-title-lg: 48px;
  --text-title-md: 36px;
  --text-title-sm: 30px;
  --text-theme-xl: 20px;
  --text-theme-sm: 14px;
  --text-theme-xs: 12px;
  
  --color-brand-25: #f2f7ff;
  --color-brand-50: #ecf3ff;
  --color-brand-100: #dde9ff;
  --color-brand-200: #c2d6ff;
  --color-brand-300: #9cb9ff;
  --color-brand-400: #7592ff;
  --color-brand-500: #465fff;
  --color-brand-600: #3b4de6;
  --color-brand-700: #2f3bcc;
  --color-brand-800: #2530b3;
  --color-brand-900: #1e2699;
  --color-brand-950: #0f1280;
  
  --color-success-25: #f0fdf4;
  --color-success-50: #dcfce7;
  --color-success-100: #bbf7d0;
  --color-success-200: #86efac;
  --color-success-300: #4ade80;
  --color-success-400: #22c55e;
  --color-success-500: #16a34a;
  --color-success-600: #15803d;
  --color-success-700: #166534;
  --color-success-800: #14532d;
  --color-success-900: #14532d;
  
  --color-warning-25: #fffbeb;
  --color-warning-50: #fef3c7;
  --color-warning-100: #fde68a;
  --color-warning-200: #fcd34d;
  --color-warning-300: #fbbf24;
  --color-warning-400: #f59e0b;
  --color-warning-500: #d97706;
  --color-warning-600: #b45309;
  --color-warning-700: #92400e;
  --color-warning-800: #78350f;
  --color-warning-900: #451a03;
  
  --color-error-25: #fef2f2;
  --color-error-50: #fecaca;
  --color-error-100: #fca5a5;
  --color-error-200: #f87171;
  --color-error-300: #ef4444;
  --color-error-400: #dc2626;
  --color-error-500: #b91c1c;
  --color-error-600: #991b1b;
  --color-error-700: #7f1d1d;
  --color-error-800: #7f1d1d;
  --color-error-900: #7f1d1d;
}

body {
  font-family: var(--font-outfit);
}

.text-title-sm { font-size: var(--text-title-sm); line-height: 38px; }
.text-title-md { font-size: var(--text-title-md); line-height: 44px; }
.text-theme-sm { font-size: var(--text-theme-sm); line-height: 20px; }
.text-theme-xs { font-size: var(--text-theme-xs); line-height: 18px; }

.bg-brand-500 { background-color: var(--color-brand-500); }
.bg-brand-600 { background-color: var(--color-brand-600); }
.bg-brand-950 { background-color: var(--color-brand-950); }
.text-brand-500 { color: var(--color-brand-500); }
.text-brand-600 { color: var(--color-brand-600); }
.text-brand-400 { color: var(--color-brand-400); }
.border-brand-300 { border-color: var(--color-brand-300); }
.border-brand-500 { border-color: var(--color-brand-500); }
.border-brand-800 { border-color: var(--color-brand-800); }
.focus\:border-brand-300:focus { border-color: var(--color-brand-300); }
.focus\:border-brand-800:focus { border-color: var(--color-brand-800); }
.focus\:ring-brand-500\/10:focus { box-shadow: 0 0 0 3px rgb(70 95 255 / 0.1); }
.hover\:bg-brand-600:hover { background-color: var(--color-brand-600); }
.hover\:text-brand-600:hover { color: var(--color-brand-600); }

.bg-success-50 { background-color: var(--color-success-50); }
.bg-success-500 { background-color: var(--color-success-500); }
.text-success-600 { color: var(--color-success-600); }
.text-success-500 { color: var(--color-success-500); }
.fill-success-600 { fill: var(--color-success-600); }
.fill-success-500 { fill: var(--color-success-500); }

.bg-warning-50 { background-color: var(--color-warning-50); }
.bg-warning-500 { background-color: var(--color-warning-500); }
.text-warning-600 { color: var(--color-warning-600); }
.text-warning-500 { color: var(--color-warning-500); }
.fill-warning-600 { fill: var(--color-warning-600); }
.fill-warning-500 { fill: var(--color-warning-500); }

.bg-error-50 { background-color: var(--color-error-50); }
.bg-error-500 { background-color: var(--color-error-500); }
.text-error-600 { color: var(--color-error-600); }
.text-error-500 { color: var(--color-error-500); }
.fill-error-600 { fill: var(--color-error-600); }
.fill-error-500 { fill: var(--color-error-500); }

.shadow-theme-xs { box-shadow: 0 1px 2px 0 rgb(16 24 40 / 0.05); }

.size-14 { width: 3.5rem; height: 3.5rem; }

.z-999999 { z-index: 999999; }
.z-99999 { z-index: 99999; }
.z-9999 { z-index: 9999; }
.z-1 { z-index: 1; }

.focus\:outline-hidden:focus { outline: 2px solid transparent; outline-offset: 2px; }
.focus\:ring-3:focus { box-shadow: 0 0 0 3px var(--tw-ring-color); }

.sidebar {
  transition: all 0.3s ease;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}


.menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
}

.menu-item-active {
  background-color: var(--color-brand-500);
  color: white;
}

.menu-item-inactive {
  color: #6b7280;
}

.menu-item-inactive:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.dark .menu-item-inactive {
  color: #9ca3af;
}

.dark .menu-item-inactive:hover {
  background-color: rgba(255, 255, 255, 0.05);
  color: #d1d5db;
}

.menu-item-icon-active {
  fill: white;
}

.menu-item-icon-inactive {
  fill: #6b7280;
}

.menu-item-inactive:hover .menu-item-icon-inactive {
  fill: #374151;
}

.dark .menu-item-icon-inactive {
  fill: #9ca3af;
}

.dark .menu-item-inactive:hover .menu-item-icon-inactive {
  fill: #d1d5db;
}


@media (max-width: 640px) {
  .size-12 { width: 3rem; height: 3rem; }
  
  
  button, .menu-item {
    min-height: 44px;
  }
  
  
  .space-y-4 > * + * {
    margin-top: 1rem;
  }
  
  
  .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
  }
  
  
  input, textarea, select {
    font-size: 16px; 
  }
}


@media (min-width: 641px) and (max-width: 1024px) {
  .sidebar {
    width: 250px;
  }
}