/* Admin Component Styles */

/* SlimSelect Styling */
.ss-main {
  @apply w-full;
}

.ss-main .ss-single-selected {
  @apply bg-white border border-zinc-300 rounded-md shadow-sm px-3 py-2 text-sm text-zinc-900 focus:ring-teal-500 focus:border-teal-500;
}

.ss-main .ss-multi-selected {
  @apply bg-white border border-zinc-300 rounded-md shadow-sm min-h-[42px] p-1 text-sm focus:ring-teal-500 focus:border-teal-500;
}

.ss-main .ss-multi-selected .ss-values .ss-value {
  @apply bg-teal-100 text-teal-800 px-2 py-1 rounded-md mr-1 mb-1 text-xs font-medium;
}

.ss-main .ss-multi-selected .ss-values .ss-value .ss-value-delete {
  @apply ml-1 text-teal-600 hover:text-teal-900 cursor-pointer;
}

.ss-main .ss-multi-selected .ss-add {
  @apply p-1 text-zinc-500 placeholder-zinc-400 border-none outline-none bg-transparent text-sm;
}

.ss-content {
  @apply bg-white border border-zinc-300 rounded-md shadow-lg mt-1 z-50;
}

.ss-content .ss-list {
  @apply max-h-60 overflow-y-auto;
}

.ss-content .ss-list .ss-option {
  @apply px-3 py-2 text-sm text-zinc-900 hover:bg-zinc-50 cursor-pointer;
}

.ss-content .ss-list .ss-option.ss-highlighted {
  @apply bg-teal-50 text-teal-900;
}

.ss-content .ss-list .ss-option.ss-selected {
  @apply bg-teal-100 text-teal-900 font-medium;
}

.ss-content .ss-search {
  @apply p-3 border-b border-zinc-200;
}

.ss-content .ss-search input {
  @apply w-full px-3 py-2 border border-zinc-300 rounded-md text-sm placeholder-zinc-400 focus:ring-teal-500 focus:border-teal-500;
}

/* Admin Form Improvements */
.admin-form-section {
  @apply bg-white shadow rounded-lg;
}

.admin-form-section .form-header {
  @apply px-4 py-5 border-b border-zinc-200;
}

.admin-form-section .form-header h3 {
  @apply text-lg leading-6 font-medium text-zinc-900;
}

.admin-form-section .form-header p {
  @apply mt-1 text-sm text-zinc-500;
}

.admin-form-section .form-body {
  @apply px-4 py-5 sm:p-6 space-y-6;
}

/* Enhanced Form Controls */
.form-group {
  @apply space-y-1;
}

.form-label {
  @apply block text-sm font-medium text-zinc-700;
}

.form-input {
  @apply mt-1 block w-full border-zinc-300 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500 sm:text-sm;
}

.form-textarea {
  @apply mt-1 block w-full border-zinc-300 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500 sm:text-sm;
}

.form-select {
  @apply mt-1 block w-full border-zinc-300 rounded-md shadow-sm focus:ring-teal-500 focus:border-teal-500 sm:text-sm;
}

.form-help {
  @apply mt-2 text-sm text-zinc-500;
}

.form-error {
  @apply mt-2 text-sm text-red-600;
}

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

.status-badge.published {
  @apply bg-green-100 text-green-800;
}

.status-badge.draft {
  @apply bg-yellow-100 text-yellow-800;
}

.status-badge.pending {
  @apply bg-orange-100 text-orange-800;
}

.status-badge.approved {
  @apply bg-green-100 text-green-800;
}

/* Action Buttons */
.btn-primary {
  @apply inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-teal-600 hover:bg-teal-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500;
}

.btn-secondary {
  @apply inline-flex items-center px-4 py-2 border border-zinc-300 rounded-md shadow-sm text-sm font-medium text-zinc-700 bg-white hover:bg-zinc-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-500;
}

.btn-danger {
  @apply inline-flex items-center px-4 py-2 border border-red-300 rounded-md shadow-sm text-sm font-medium text-red-700 bg-white hover:bg-red-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500;
}

/* Dark mode support for admin */
@media (prefers-color-scheme: dark) {
  .admin-dark {
    /* Admin interface dark mode overrides */
    @apply bg-zinc-900 text-zinc-100;
  }
}