@tailwind base;
@tailwind components;
@tailwind utilities;

/* Základní proměnné */
:root {
  --background-primary: #1A1A2E;
  --background-secondary: #2D2D3A;
  --background-tertiary: #3D3D4A;
  --accent-primary: #7B22CE;
  --accent-secondary: #A855F7;
  --text-primary: #E5E5E9;
  --text-secondary: #9ca3af;
  --border-color: rgba(123, 34, 206, 0.2);
}

@layer base {
  body {
    @apply min-h-screen;
    background-color: var(--background-primary);
    color: var(--text-primary);
    background-image: linear-gradient(135deg, var(--background-primary) 0%, var(--background-secondary) 100%);
  }

  /* Formulářové prvky */
  select,
  input[type="date"],
  input[type="time"],
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="password"],
  input[type="tel"],
  textarea {
    @apply bg-[#3D3D4A] border-2 border-purple-500/20 text-white rounded-lg p-2;
  }

  select:focus,
  input:focus,
  textarea:focus {
    @apply outline-none border-purple-500/60 ring-1 ring-purple-500/30;
  }

  select:hover,
  input:hover,
  textarea:hover {
    @apply border-purple-500/50;
  }

  select option {
    @apply bg-[#3D3D4A] text-white;
  }

  ::placeholder {
    @apply text-white/50;
  }

  input[type="checkbox"],
  input[type="radio"] {
    @apply accent-purple-500;
  }
}

@layer components {
  .card {
    @apply bg-[#2D2D3A] backdrop-blur-lg border border-purple-500/20 rounded-xl p-6 shadow-lg transition-all;
  }

  .card:hover {
    @apply border-purple-500/40 shadow-xl transform -translate-y-1;
  }

  .btn {
    @apply bg-gradient-to-r from-purple-700 to-purple-500 text-white px-6 py-2 rounded-lg 
           transition-all hover:shadow-lg hover:-translate-y-0.5 focus:outline-none focus:ring-2 
           focus:ring-purple-500/50;
  }

  .status-badge {
    @apply px-4 py-2 rounded-lg font-medium bg-purple-500/20 text-white;
  }

  .text-gradient {
    @apply bg-gradient-to-r from-purple-700 to-purple-500 bg-clip-text text-transparent;
  }
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-secondary);
}

::-webkit-scrollbar-thumb {
  background: rgba(123, 34, 206, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(123, 34, 206, 0.7);
}

/* Přepsání Tailwind výchozích tříd */
.bg-white {
  @apply bg-[#2D2D3A] !important;
}

.bg-gray-50 {
  @apply bg-[#2D2D3A] !important;
}

.text-gray-700 {
  @apply text-white !important;
}

.border-gray-300 {
  @apply border-purple-500/30 !important;
}

/* Tabulky */
table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

th {
  background: var(--background-secondary);
  color: var(--text-primary);
  padding: 1rem;
  text-align: left;
  border-bottom: 2px solid var(--border-color);
}

td {
  padding: 1rem;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-primary);
}

tr:hover td {
  background: rgba(123, 34, 206, 0.05);
}

/* Utility třídy */
.bg-gradient {
  background: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
}

/* Dark mode optimalizace */
@media (prefers-color-scheme: dark) {
  :root {
    --background-primary: #1A1A2E;
    --background-secondary: #2D2D3A;
    --text-primary: #E5E5E9;
  }
}