/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --color-red-50: oklch(97.1% 0.013 17.38);
    --color-red-100: oklch(93.6% 0.032 17.717);
    --color-red-200: oklch(88.5% 0.062 18.334);
    --color-red-300: oklch(80.8% 0.114 19.571);
    --color-red-400: oklch(67.5% 0.191 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-red-700: oklch(50.5% 0.213 27.518);
    --color-red-800: oklch(44.4% 0.177 26.899);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-800: oklch(47% 0.157 37.304);
    --color-yellow-50: oklch(98.7% 0.026 102.212);
    --color-yellow-100: oklch(97.3% 0.071 103.193);
    --color-yellow-200: oklch(94.5% 0.129 101.54);
    --color-yellow-300: oklch(90.5% 0.182 98.111);
    --color-yellow-400: oklch(82.2% 0.189 95.742);
    --color-yellow-500: oklch(79.5% 0.184 86.047);
    --color-yellow-600: oklch(68.1% 0.162 75.834);
    --color-yellow-700: oklch(55.4% 0.135 66.442);
    --color-yellow-800: oklch(47.6% 0.114 61.907);
    --color-yellow-900: oklch(38.5% 0.095 58.423);
    --color-green-50: oklch(98.2% 0.018 155.826);
    --color-green-100: oklch(96.2% 0.044 156.743);
    --color-green-200: oklch(92.5% 0.084 155.995);
    --color-green-300: oklch(87.1% 0.15 154.449);
    --color-green-400: oklch(78.7% 0.195 152.831);
    --color-green-600: oklch(62.7% 0.194 149.214);
    --color-green-700: oklch(52.7% 0.154 150.069);
    --color-green-800: oklch(44.8% 0.119 151.328);
    --color-green-900: oklch(35.2% 0.089 152.423);
    --color-emerald-100: oklch(95% 0.052 163.051);
    --color-emerald-300: oklch(85.8% 0.127 162.726);
    --color-emerald-400: oklch(79.1% 0.155 162.742);
    --color-emerald-500: oklch(72.1% 0.183 162.641);
    --color-emerald-600: oklch(65.5% 0.213 162.741);
    --color-emerald-800: oklch(43.2% 0.095 166.913);
    --color-emerald-900: oklch(36.2% 0.085 167.913);
    --color-cyan-100: oklch(95.6% 0.045 203.388);
    --color-cyan-800: oklch(45% 0.085 224.283);
    --color-sky-100: oklch(93.2% 0.032 228.388);
    --color-sky-300: oklch(82.1% 0.108 230.314);
    --color-sky-400: oklch(74.8% 0.142 230.847);
    --color-sky-500: oklch(67.2% 0.176 231.683);
    --color-sky-600: oklch(58.8% 0.199 232.867);
    --color-blue-100: oklch(93.2% 0.032 255.585);
    --color-blue-400: oklch(71.9% 0.175 259.814);
    --color-blue-600: oklch(55.3% 0.261 264.052);
    --color-blue-800: oklch(42.4% 0.199 265.638);
    --color-blue-900: oklch(35.2% 0.158 266.423);
    --color-indigo-50: oklch(96.2% 0.018 272.314);
    --color-indigo-100: oklch(93% 0.034 272.788);
    --color-indigo-300: oklch(78.5% 0.115 274.713);
    --color-indigo-500: oklch(58.5% 0.233 277.117);
    --color-indigo-600: oklch(51.1% 0.262 276.966);
    --color-indigo-700: oklch(45.7% 0.24 277.023);
    --color-indigo-900: oklch(35.9% 0.144 278.697);
    --color-purple-100: oklch(94.6% 0.033 307.174);
    --color-purple-400: oklch(75.8% 0.188 305.834);
    --color-purple-600: oklch(55.8% 0.288 302.321);
    --color-purple-800: oklch(43.8% 0.218 303.724);
    --color-purple-900: oklch(36.2% 0.175 304.423);
    --color-pink-100: oklch(94.8% 0.028 342.258);
    --color-pink-800: oklch(45.9% 0.187 3.815);
    --color-gray-50: oklch(98.5% 0.002 247.839);
    --color-gray-100: oklch(96.7% 0.003 264.542);
    --color-gray-200: oklch(92.8% 0.006 264.531);
    --color-gray-300: oklch(87.2% 0.01 258.338);
    --color-gray-400: oklch(70.7% 0.022 261.325);
    --color-gray-500: oklch(55.1% 0.027 264.364);
    --color-gray-600: oklch(44.6% 0.03 256.802);
    --color-gray-700: oklch(37.3% 0.034 259.733);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-gray-950: oklch(12% 0.015 264.554);
    --color-slate-50: oklch(98.4% 0.003 272.678);
    --color-slate-100: oklch(96.5% 0.006 272.678);
    --color-slate-200: oklch(93.7% 0.011 263.897);
    --color-slate-300: oklch(88.1% 0.017 263.897);
    --color-slate-400: oklch(69.4% 0.029 263.897);
    --color-slate-500: oklch(54.1% 0.033 263.897);
    --color-slate-600: oklch(44.1% 0.034 263.897);
    --color-slate-700: oklch(36.4% 0.034 263.897);
    --color-slate-800: oklch(28.7% 0.029 263.897);
    --color-slate-900: oklch(19.3% 0.022 263.897);
    --color-slate-950: oklch(10.8% 0.013 263.897);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --container-xs: 20rem;
    --container-md: 28rem;
    --container-lg: 32rem;
    --container-2xl: 42rem;
    --container-3xl: 48rem;
    --container-4xl: 56rem;
    --container-6xl: 72rem;
    --container-7xl: 80rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-xl: 1.25rem;
    --text-xl--line-height: calc(1.75 / 1.25);
    --text-2xl: 1.5rem;
    --text-2xl--line-height: calc(2 / 1.5);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --text-4xl: 2.25rem;
    --text-4xl--line-height: calc(2.5 / 2.25);
    --text-6xl: 3.75rem;
    --text-6xl--line-height: 1;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --tracking-wide: 0.025em;
    --tracking-wider: 0.05em;
    --radius-md: 0.375rem;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --animate-spin: spin 1s linear infinite;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

/* Custom components for consistent styling */
@layer components {
  /* Button Components */
  .btn-primary {
    @apply px-4 py-2 bg-sky-500 hover:bg-sky-600 dark:bg-sky-400 dark:hover:bg-sky-300 text-white dark:text-slate-900 font-medium rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
  }
  
  .btn-secondary {
    @apply px-4 py-2 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 text-slate-700 dark:text-slate-300 font-medium rounded-lg transition-colors;
  }
  
  .btn-success {
    @apply px-4 py-2 bg-emerald-500 hover:bg-emerald-600 dark:bg-emerald-400 dark:hover:bg-emerald-300 text-white dark:text-slate-900 font-medium rounded-lg transition-all duration-200 shadow-md hover:shadow-lg;
  }
  
  .btn-danger {
    @apply px-4 py-2 bg-red-600 hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600 text-white font-medium rounded-lg transition-colors;
  }
  
  .btn-warning {
    @apply px-4 py-2 bg-yellow-500 hover:bg-yellow-600 dark:bg-yellow-400 dark:hover:bg-yellow-300 text-white dark:text-slate-900 font-medium rounded-lg transition-colors;
  }

  .btn-icon {
    @apply inline-flex items-center gap-2;
  }

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

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

  /* Form Components */
  .form-input {
    @apply w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 placeholder-slate-500 dark:placeholder-slate-400 focus:ring-2 focus:ring-sky-500 dark:focus:ring-sky-400 focus:border-sky-500 dark:focus:border-sky-400 transition-colors;
  }

  .form-select {
    @apply w-full px-3 py-2 border border-slate-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-800 text-slate-900 dark:text-slate-100 focus:ring-2 focus:ring-sky-500 dark:focus:ring-sky-400 focus:border-sky-500 dark:focus:border-sky-400 transition-colors;
  }

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

  /* Card Components */
  .card {
    @apply bg-white dark:bg-slate-900 rounded-xl p-6 shadow-sm dark:shadow-lg border border-slate-200 dark:border-slate-700 transition-all duration-200;
  }

  .card-hover {
    @apply hover:-translate-y-1 hover:shadow-lg dark:hover:shadow-xl;
  }

  /* Status Badge Components */
  .badge-success {
    @apply inline-flex px-3 py-1 text-xs font-medium rounded-full bg-emerald-100 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-300;
  }

  .badge-warning {
    @apply inline-flex px-3 py-1 text-xs font-medium rounded-full bg-yellow-100 dark:bg-yellow-900/30 text-yellow-800 dark:text-yellow-300;
  }

  .badge-danger {
    @apply inline-flex px-3 py-1 text-xs font-medium rounded-full bg-red-100 dark:bg-red-900/30 text-red-800 dark:text-red-300;
  }

  .badge-info {
    @apply inline-flex px-3 py-1 text-xs font-medium rounded-full bg-sky-100 dark:bg-sky-900/30 text-sky-800 dark:text-sky-300;
  }

  /* Page Layout Components */
  .page-container {
    @apply p-8 max-w-7xl mx-auto bg-slate-50 dark:bg-slate-950 min-h-screen;
  }

  .page-header {
    @apply flex flex-col sm:flex-row sm:justify-between sm:items-center mb-8 pb-6 border-b border-slate-200 dark:border-slate-700;
  }

  .page-title {
    @apply text-3xl font-semibold text-slate-900 dark:text-slate-100;
  }

  .page-subtitle {
    @apply text-slate-600 dark:text-slate-400;
  }

  /* Modal Components */
  .modal-overlay {
    @apply fixed inset-0 bg-black/50 dark:bg-black/70 flex items-center justify-center z-50 p-4;
  }

  .modal-content {
    @apply bg-white dark:bg-slate-900 rounded-xl shadow-xl border border-slate-200 dark:border-slate-700 max-w-md w-full max-h-[90vh] overflow-y-auto;
  }

  .modal-header {
    @apply flex justify-between items-center p-4 border-b border-slate-200 dark:border-slate-700;
  }

  .modal-title {
    @apply text-lg font-semibold text-slate-900 dark:text-slate-100;
  }

  .modal-body {
    @apply p-4 space-y-4;
  }

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

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

  /* Theme transition for all elements */
  .theme-transition {
    transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
               border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
               color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
               box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Enhanced dark mode support for better contrast */
  [data-theme="dark"] {
    color-scheme: dark;
  }

  [data-theme="dark"] body {
    background-color: var(--color-slate-950);
    color: var(--color-slate-100);
  }

  /* Better scrollbar styling in dark mode */
  [data-theme="dark"] ::-webkit-scrollbar {
    width: 8px;
  }

  [data-theme="dark"] ::-webkit-scrollbar-track {
    background: var(--color-slate-800);
  }

  [data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: var(--color-slate-600);
    border-radius: 4px;
  }

  [data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: var(--color-slate-500);
  }
}

@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

  /* Enhanced color utilities */
  .bg-slate-50 {
    background-color: var(--color-slate-50);
  }
  .bg-slate-100 {
    background-color: var(--color-slate-100);
  }
  .bg-slate-200 {
    background-color: var(--color-slate-200);
  }
  .bg-slate-300 {
    background-color: var(--color-slate-300);
  }
  .bg-slate-400 {
    background-color: var(--color-slate-400);
  }
  .bg-slate-500 {
    background-color: var(--color-slate-500);
  }
  .bg-slate-600 {
    background-color: var(--color-slate-600);
  }
  .bg-slate-700 {
    background-color: var(--color-slate-700);
  }
  .bg-slate-800 {
    background-color: var(--color-slate-800);
  }
  .bg-slate-900 {
    background-color: var(--color-slate-900);
  }
  .bg-slate-950 {
    background-color: var(--color-slate-950);
  }

  .text-slate-100 {
    color: var(--color-slate-100);
  }
  .text-slate-200 {
    color: var(--color-slate-200);
  }
  .text-slate-300 {
    color: var(--color-slate-300);
  }
  .text-slate-400 {
    color: var(--color-slate-400);
  }
  .text-slate-500 {
    color: var(--color-slate-500);
  }
  .text-slate-600 {
    color: var(--color-slate-600);
  }
  .text-slate-700 {
    color: var(--color-slate-700);
  }
  .text-slate-800 {
    color: var(--color-slate-800);
  }
  .text-slate-900 {
    color: var(--color-slate-900);
  }

  .border-slate-200 {
    border-color: var(--color-slate-200);
  }
  .border-slate-300 {
    border-color: var(--color-slate-300);
  }
  .border-slate-600 {
    border-color: var(--color-slate-600);
  }
  .border-slate-700 {
    border-color: var(--color-slate-700);
  }

  /* Sky color utilities */
  .bg-sky-100 {
    background-color: var(--color-sky-100);
  }
  .bg-sky-400 {
    background-color: var(--color-sky-400);
  }
  .bg-sky-500 {
    background-color: var(--color-sky-500);
  }
  .bg-sky-600 {
    background-color: var(--color-sky-600);
  }
  .hover\:bg-sky-600:hover {
    background-color: var(--color-sky-600);
  }

  .text-sky-300 {
    color: var(--color-sky-300);
  }
  .text-sky-400 {
    color: var(--color-sky-400);
  }
  .text-sky-500 {
    color: var(--color-sky-500);
  }
  .text-sky-800 {
    color: var(--color-sky-800);
  }

  .border-sky-300 {
    border-color: var(--color-sky-300);
  }
  .border-sky-500 {
    border-color: var(--color-sky-500);
  }
  .border-sky-600 {
    border-color: var(--color-sky-600);
  }

  /* Emerald color utilities */
  .bg-emerald-100 {
    background-color: var(--color-emerald-100);
  }
  .bg-emerald-200 {
    background-color: color-mix(in oklab, var(--color-emerald-100) 70%, var(--color-emerald-300) 30%);
  }
  .bg-emerald-400 {
    background-color: var(--color-emerald-400);
  }
  .bg-emerald-500 {
    background-color: var(--color-emerald-500);
  }
  .bg-emerald-600 {
    background-color: var(--color-emerald-600);
  }

  .text-emerald-300 {
    color: var(--color-emerald-300);
  }
  .text-emerald-400 {
    color: var(--color-emerald-400);
  }
  .text-emerald-600 {
    color: var(--color-emerald-600);
  }
  .text-emerald-800 {
    color: var(--color-emerald-800);
  }

  /* Yellow color utilities */
  .bg-yellow-100 {
    background-color: var(--color-yellow-100);
  }
  .bg-yellow-200 {
    background-color: var(--color-yellow-200);
  }
  .text-yellow-400 {
    color: var(--color-yellow-400);
  }
  .text-yellow-600 {
    color: var(--color-yellow-600);
  }
  .text-yellow-800 {
    color: var(--color-yellow-800);
  }

  /* Purple color utilities */
  .bg-purple-100 {
    background-color: var(--color-purple-100);
  }
  .bg-purple-200 {
    background-color: color-mix(in oklab, var(--color-purple-100) 60%, var(--color-purple-400) 40%);
  }
  .text-purple-400 {
    color: var(--color-purple-400);
  }
  .text-purple-600 {
    color: var(--color-purple-600);
  }

  /* Blue color utilities */
  .bg-blue-100 {
    background-color: var(--color-blue-100);
  }
  .text-blue-400 {
    color: var(--color-blue-400);
  }
  .text-blue-600 {
    color: var(--color-blue-600);
  }

  /* Green color utilities */
  .bg-green-100 {
    background-color: var(--color-green-100);
  }
  .text-green-400 {
    color: var(--color-green-400);
  }
  .text-green-600 {
    color: var(--color-green-600);
  }

  /* Gradient utilities */
  .from-sky-300 {
    --tw-gradient-from: var(--color-sky-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-sky-400 {
    --tw-gradient-from: var(--color-sky-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-sky-500 {
    --tw-gradient-from: var(--color-sky-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .from-sky-600 {
    --tw-gradient-from: var(--color-sky-600);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  .to-emerald-300 {
    --tw-gradient-to: var(--color-emerald-300);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-emerald-400 {
    --tw-gradient-to: var(--color-emerald-400);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }
  .to-emerald-500 {
    --tw-gradient-to: var(--color-emerald-500);
    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
  }

  /* Dark mode utilities */
  .dark\:bg-slate-700 {
    [data-theme="dark"] & {
      background-color: var(--color-slate-700);
    }
  }
  .dark\:bg-slate-800 {
    [data-theme="dark"] & {
      background-color: var(--color-slate-800);
    }
  }
  .dark\:bg-slate-900 {
    [data-theme="dark"] & {
      background-color: var(--color-slate-900);
    }
  }
  .dark\:bg-slate-950 {
    [data-theme="dark"] & {
      background-color: var(--color-slate-950);
    }
  }

  .dark\:text-slate-100 {
    [data-theme="dark"] & {
      color: var(--color-slate-100);
    }
  }
  .dark\:text-slate-200 {
    [data-theme="dark"] & {
      color: var(--color-slate-200);
    }
  }
  .dark\:text-slate-300 {
    [data-theme="dark"] & {
      color: var(--color-slate-300);
    }
  }
  .dark\:text-slate-400 {
    [data-theme="dark"] & {
      color: var(--color-slate-400);
    }
  }
  .dark\:text-slate-500 {
    [data-theme="dark"] & {
      color: var(--color-slate-500);
    }
  }
  .dark\:text-slate-900 {
    [data-theme="dark"] & {
      color: var(--color-slate-900);
    }
  }

  .dark\:text-sky-300 {
    [data-theme="dark"] & {
      color: var(--color-sky-300);
    }
  }
  .dark\:text-sky-400 {
    [data-theme="dark"] & {
      color: var(--color-sky-400);
    }
  }

  .dark\:bg-sky-300 {
    [data-theme="dark"] & {
      background-color: var(--color-sky-300);
    }
  }
  .dark\:bg-sky-400 {
    [data-theme="dark"] & {
      background-color: var(--color-sky-400);
    }
  }

  .dark\:border-slate-600 {
    [data-theme="dark"] & {
      border-color: var(--color-slate-600);
    }
  }
  .dark\:border-slate-700 {
    [data-theme="dark"] & {
      border-color: var(--color-slate-700);
    }
  }

  .dark\:hover\:bg-slate-700:hover {
    [data-theme="dark"] & {
      background-color: var(--color-slate-700);
    }
  }
  .dark\:hover\:bg-slate-800:hover {
    [data-theme="dark"] & {
      background-color: var(--color-slate-800);
    }
  }
  .dark\:hover\:bg-sky-300:hover {
    [data-theme="dark"] & {
      background-color: var(--color-sky-300);
    }
  }

  .dark\:hover\:text-slate-100:hover {
    [data-theme="dark"] & {
      color: var(--color-slate-100);
    }
  }
  .dark\:hover\:text-slate-200:hover {
    [data-theme="dark"] & {
      color: var(--color-slate-200);
    }
  }
  .dark\:hover\:text-sky-300:hover {
    [data-theme="dark"] & {
      color: var(--color-sky-300);
    }
  }

  .dark\:shadow-lg {
    [data-theme="dark"] & {
      --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.3)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.3));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .dark\:shadow-xl {
    [data-theme="dark"] & {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.3)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.3));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }
  .dark\:hover\:shadow-xl:hover {
    [data-theme="dark"] & {
      --tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, rgb(0 0 0 / 0.3)), 0 8px 10px -6px var(--tw-shadow-color, rgb(0 0 0 / 0.3));
      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
    }
  }

  /* Dark mode color support */
  .dark\:bg-emerald-900\/30 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);
    }
  }

  .dark\:bg-yellow-900\/30 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-yellow-900) 30%, transparent);
    }
  }

  .dark\:bg-purple-900\/30 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-purple-900) 30%, transparent);
    }
  }

  .dark\:bg-blue-900\/30 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-blue-900) 30%, transparent);
    }
  }

  .dark\:bg-green-900\/30 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-green-900) 30%, transparent);
    }
  }

  .dark\:group-hover\:bg-emerald-900\/50 {
    [data-theme="dark"] .group:hover & {
      background-color: color-mix(in oklab, var(--color-emerald-900) 50%, transparent);
    }
  }

  .dark\:group-hover\:bg-yellow-900\/50 {
    [data-theme="dark"] .group:hover & {
      background-color: color-mix(in oklab, var(--color-yellow-900) 50%, transparent);
    }
  }

  .dark\:group-hover\:bg-purple-900\/50 {
    [data-theme="dark"] .group:hover & {
      background-color: color-mix(in oklab, var(--color-purple-900) 50%, transparent);
    }
  }

  .group-hover\:bg-emerald-200 {
    .group:hover & {
      background-color: color-mix(in oklab, var(--color-emerald-100) 70%, var(--color-emerald-300) 30%);
    }
  }

  .group-hover\:bg-yellow-200 {
    .group:hover & {
      background-color: var(--color-yellow-200);
    }
  }

  .group-hover\:bg-purple-200 {
    .group:hover & {
      background-color: color-mix(in oklab, var(--color-purple-100) 60%, var(--color-purple-400) 40%);
    }
  }

  /* Focus ring utilities for better accessibility */
  .focus\:ring-sky-500:focus {
    --tw-ring-color: var(--color-sky-500);
    --tw-ring-opacity: 0.5;
    box-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  }

  .dark\:focus\:ring-sky-400:focus {
    [data-theme="dark"] & {
      --tw-ring-color: var(--color-sky-400);
    }
  }

  .focus\:border-sky-500:focus {
    border-color: var(--color-sky-500);
  }

  .dark\:focus\:border-sky-400:focus {
    [data-theme="dark"] & {
      border-color: var(--color-sky-400);
    }
  }

  /* Enhanced transition utilities */
  .transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
  }

  .duration-200 {
    transition-duration: 200ms;
  }

  .duration-300 {
    transition-duration: 300ms;
  }

  /* Transform utilities */
  .hover\:scale-105:hover {
    --tw-scale-x: 1.05;
    --tw-scale-y: 1.05;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .hover\:-translate-y-1:hover {
    --tw-translate-y: -0.25rem;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  .active\:scale-95:active {
    --tw-scale-x: 0.95;
    --tw-scale-y: 0.95;
    transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
  }

  /* Additional utilities for better spacing */
  .px-3\.5 {
    padding-inline: calc(var(--spacing) * 3.5);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }

  .min-h-\[48px\] {
    min-height: 48px;
  }

  .border-l-4 {
    border-left-style: var(--tw-border-style);
    border-left-width: 4px;
  }

  .backdrop-blur-sm {
    --tw-backdrop-blur: blur(4px);
    -webkit-backdrop-filter: var(--tw-backdrop-blur);
    backdrop-filter: var(--tw-backdrop-blur);
  }

  .bg-white\/80 {
    background-color: color-mix(in oklab, var(--color-white) 80%, transparent);
  }

  .dark\:bg-slate-900\/80 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-slate-900) 80%, transparent);
    }
  }

  .bg-black\/50 {
    background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
  }

  .dark\:bg-black\/70 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
    }
  }

  /* Line clamp utility */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Better disabled state */
  .disabled\:opacity-50:disabled {
    opacity: 0.5;
  }

  .disabled\:cursor-not-allowed:disabled {
    cursor: not-allowed;
  }

  /* Additional color mix utilities for better status backgrounds */
  .bg-emerald-900\/30 {
    background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);
  }

  .bg-yellow-900\/30 {
    background-color: color-mix(in oklab, var(--color-yellow-800) 30%, transparent);
  }

  .bg-red-900\/30 {
    background-color: color-mix(in oklab, var(--color-red-800) 30%, transparent);
  }

  .bg-sky-900\/30 {
    background-color: color-mix(in oklab, var(--color-blue-800) 30%, transparent);
  }

  .dark\:bg-emerald-900\/30 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-emerald-900) 30%, transparent);
    }
  }

  .dark\:bg-yellow-900\/30 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-yellow-800) 30%, transparent);
    }
  }

  .dark\:bg-red-900\/30 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-red-800) 30%, transparent);
    }
  }

  .dark\:bg-sky-900\/30 {
    [data-theme="dark"] & {
      background-color: color-mix(in oklab, var(--color-blue-800) 30%, transparent);
    }
  }
}