/* app/assets/stylesheets/application.tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Reused Components */
@layer components {

  /* Existing button styles... */
  .button-default {
    @apply px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer
  }

  .button-create {
    @apply inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 cursor-pointer;
  }

  .button-base {
    @apply inline-flex items-center px-3 py-2 text-sm font-medium rounded-md
    shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2
    transition-colors duration-200;
  }

  .subtle-button {
    @apply button-base border bg-gray-300 border-gray-300 text-gray-700 bg-white
    hover:bg-gray-200 focus-visible:ring-gray-500 cursor-pointer;
  }
  .subtle-button-active {
    @apply bg-gray-300 border-gray-500;
  }

  .accept-button {
    @apply button-base border border-emerald-300 text-emerald-700 bg-emerald-100
    hover:bg-emerald-200 focus-visible:ring-emerald-500 cursor-pointer;
  }
  .accept-button-active {
    @apply bg-emerald-200 border-emerald-400;
  }

  .cancel-button {
    @apply button-base border border-gray-300 text-gray-700 bg-white
    hover:bg-gray-100 focus-visible:ring-red-500 cursor-pointer;
  }
  .cancel-button-active {
    @apply bg-gray-200 border-gray-400;
  }

  .add-button {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium
    rounded-md text-white bg-green-600 hover:bg-green-700 shadow-sm;
  }

  /* NEW ADMIN DARK THEME COMPONENTS */

  /* Page containers */
  .admin-page {
    @apply min-h-screen bg-slate-900;
  }

  .admin-page-content {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
  }

  /* Headers */
  .admin-page-header {
    @apply mb-8;
  }

  .admin-page-title {
    @apply flex items-center space-x-3 mb-2;
  }

  .admin-page-title-icon {
    @apply w-10 h-10 rounded-lg flex items-center justify-center;
  }

  .admin-page-title-text {
    @apply text-2xl font-bold text-white;
  }

  .admin-page-subtitle {
    @apply text-slate-400 text-sm;
  }

  .admin-back-link {
    @apply inline-flex items-center text-slate-400 hover:text-slate-300 text-sm transition-colors;
  }

  /* Cards */
  .admin-card {
    @apply bg-slate-800 rounded-xl border border-slate-700 shadow-xl;
  }

  .admin-card-header {
    @apply px-6 py-6 border-b border-slate-700;
  }

  .admin-card-title {
    @apply text-lg font-semibold text-white;
  }

  .admin-card-subtitle {
    @apply text-sm text-slate-400 mt-1;
  }

  .admin-card-content {
    @apply p-6;
  }

  /* Forms */
  .admin-form {
    @apply space-y-6;
  }

  .admin-form-grid {
    @apply grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2;
  }

  .admin-form-grid-full {
    @apply grid grid-cols-1 gap-y-6 gap-x-4 sm:grid-cols-2 md:grid-cols-6;
  }

  .admin-form-field {
    @apply sm:col-span-1;
  }

  .admin-form-field-full {
    @apply sm:col-span-2;
  }

  .admin-form-field-wide {
    @apply col-span-2 md:col-span-4;
  }

  .admin-form-field-narrow {
    @apply col-span-1 md:col-span-2;
  }

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

  .admin-form-input {
    @apply block w-full rounded-lg border-slate-600 bg-slate-700 text-white placeholder-slate-400 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors;
  }

  .admin-form-select {
    @apply block w-full rounded-lg border-slate-600 bg-slate-700 text-white shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors;
  }

  .admin-form-textarea {
    @apply block w-full rounded-lg border-slate-600 bg-slate-700 text-white placeholder-slate-400 shadow-sm focus:border-blue-500 focus:ring-blue-500 transition-colors;
  }

  .admin-form-help {
    @apply mt-1 text-xs text-slate-400;
  }

  .admin-form-section-divider {
    @apply border-t border-slate-700 pt-4 w-full;
  }

  .admin-form-section-title {
    @apply text-lg font-medium text-slate-300;
  }

  .admin-form-actions {
    @apply flex items-center justify-end space-x-4 pt-6 border-t border-slate-700;
  }

  /* Error messages */
  .admin-error-card {
    @apply rounded-lg bg-red-900/50 border border-red-500/50 p-4;
  }

  .admin-error-icon {
    @apply h-5 w-5 text-red-400 flex-shrink-0;
  }

  .admin-error-title {
    @apply text-sm font-medium text-red-300;
  }

  .admin-error-list {
    @apply mt-2 text-sm text-red-200 list-disc pl-5 space-y-1;
  }

  /* Buttons - Dark theme versions */
  .admin-button-primary {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors;
  }

  .admin-button-success {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-emerald-600 hover:bg-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-emerald-500 transition-colors;
  }

  .admin-button-secondary {
    @apply inline-flex items-center px-4 py-2 border border-slate-600 text-sm font-medium rounded-lg text-slate-300 bg-slate-700 hover:bg-slate-600 hover:text-white transition-colors;
  }

  .admin-button-danger {
    @apply inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition-colors;
  }

  /* Icons for buttons */
  .admin-button-icon {
    @apply w-4 h-4 mr-2;
  }

  /* Help/info sections */
  .admin-help-section {
    @apply mt-6 bg-blue-900/30 border border-blue-500/30 rounded-lg p-4;
  }

  .admin-help-icon {
    @apply h-5 w-5 text-blue-400 flex-shrink-0;
  }

  .admin-help-title {
    @apply text-sm font-medium text-blue-300;
  }

  .admin-help-content {
    @apply mt-2 text-sm text-blue-200 list-disc list-inside space-y-1;
  }

  /* Info Card Styles (existing, keeping for compatibility) */
  .selection-card {
    @apply rounded-lg transition-colors duration-200 border-2 border-transparent;
  }

  .selection-card-active {
    @apply bg-emerald-800/40 border-emerald-400 shadow-lg shadow-emerald-500/20 !important;
  }

  .selection-card-ignored {
    @apply bg-slate-600/60 opacity-60 border-slate-400 !important;
  }

  .selection-card-ignored .card-info {
    @apply line-through text-slate-400 !important;
  }

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

  .table-scroll-container {
    @apply flex justify-center w-full overflow-x-auto relative max-h-[80vh];
    -webkit-overflow-scrolling: touch;
  }

  .datatable-options {
    @apply flex items-center justify-center gap-4 py-2 mx-auto w-full;
  }

  .dt-search input {
    @apply w-48 h-9 px-3 py-1 text-sm bg-gray-100 rounded-none border-0;
  }

  .dt-buttons {
    @apply flex gap-1 p-0;
  }
}


@layer utilities {
  /* Custom slate color for alternating table rows */
  .bg-slate-750 {
    background-color: rgb(51 65 85 / 0.8); /* Between slate-700 and slate-800 */
  }

  /* Hover states for better team row separation */
  .team-row-separator {
    border-bottom: 2px solid rgb(51 65 85 / 0.5);
  }

  /* Enhanced mobile card styling */
  .mobile-team-card {
    @apply bg-slate-800 border border-slate-700 rounded-lg p-4 mb-3 hover:bg-slate-700/50 transition-all duration-200;
  }

  .mobile-team-card:nth-child(even) {
    @apply bg-slate-750;
  }
}

/*dark theme*/
/* Enhanced Admin Dark Theme Components */
@layer components {
  /* Navigation Components */
  .admin-nav {
    @apply bg-slate-800 shadow-xl border-b border-slate-700;
  }

  .admin-nav-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }

  .admin-nav-content {
    @apply flex justify-between h-16;
  }

  .admin-nav-brand {
    @apply flex items-center px-2 py-2 text-white font-medium hover:text-emerald-300 transition-colors;
  }

  .admin-nav-brand-icon {
    @apply w-8 h-8 bg-emerald-500 rounded-lg flex items-center justify-center mr-3;
  }

  .admin-nav-brand-text {
    @apply text-lg font-bold;
  }

  .admin-nav-items {
    @apply hidden lg:ml-8 lg:flex lg:space-x-1;
  }

  .admin-nav-item {
    @apply inline-flex items-center px-3 py-2 text-sm font-medium rounded-md transition-colors;
  }

  .admin-nav-item-active {
    @apply text-white bg-slate-700;
  }

  .admin-nav-item-inactive {
    @apply text-slate-300 hover:text-white hover:bg-slate-700;
  }

  .admin-nav-divider {
    @apply h-6 w-px bg-slate-600 hidden sm:block;
  }

  .admin-nav-user-menu {
    @apply hidden sm:flex sm:items-center sm:space-x-4;
  }

  .admin-nav-exit-button {
    @apply inline-flex items-center px-3 py-2 border border-slate-600 text-sm font-medium rounded-md text-slate-300 bg-slate-700 hover:bg-slate-600 hover:text-white transition-colors;
  }

  /* Tab Navigation Components */
  .admin-tab-nav {
    @apply bg-slate-800 rounded-lg shadow-md px-4 py-3 mb-6 border border-slate-700;
  }

  .admin-tab-nav-content {
    @apply flex flex-col sm:flex-row sm:items-center justify-between gap-4;
  }

  .admin-tab-nav-items {
    @apply flex flex-wrap items-center gap-2;
  }

  .admin-tab-item {
    @apply px-3 py-2 text-sm font-medium rounded-md transition-colors;
  }

  .admin-tab-item-active {
    @apply text-white bg-slate-700;
  }

  .admin-tab-item-inactive {
    @apply text-slate-300 hover:text-white hover:bg-slate-700;
  }

  .admin-tab-action-button {
    @apply inline-flex items-center px-4 py-2 text-sm font-medium text-white rounded-md bg-emerald-600 hover:bg-emerald-700 shadow-sm transition-colors;
  }

  /* Table Components */
  .admin-table-container {
    @apply bg-slate-800 rounded-xl border border-slate-700 overflow-hidden shadow-xl;
  }

  .admin-table {
    @apply min-w-full divide-y divide-slate-700;
  }

  .admin-table-header {
    @apply bg-slate-700/50;
  }

  .admin-table-header-cell {
    @apply px-6 py-4 text-left text-xs font-medium text-slate-300 uppercase tracking-wider;
  }

  .admin-table-header-cell-center {
    @apply px-6 py-4 text-center text-xs font-medium text-slate-300 uppercase tracking-wider;
  }

  .admin-table-body {
    @apply bg-slate-800 divide-y divide-slate-700;
  }

  .admin-table-row {
    @apply hover:bg-slate-700/50 transition-colors;
  }

  .admin-table-row-even {
    @apply bg-slate-800;
  }

  .admin-table-row-odd {
    @apply bg-slate-750;
  }

  .admin-table-cell {
    @apply px-6 py-4 text-sm text-slate-300;
  }

  .admin-table-cell-center {
    @apply px-6 py-4 text-sm text-slate-300 text-center;
  }

  .admin-table-link {
    @apply text-blue-400 hover:text-blue-300 hover:underline transition-colors;
  }

  /* Modal Components */
  .admin-modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-75 transition-opacity;
  }

  .admin-modal-container {
    @apply flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0;
  }

  .admin-modal-panel {
    @apply inline-block align-bottom bg-slate-800 border border-slate-700 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle;
  }

  .admin-modal-header {
    @apply bg-slate-700/50 px-4 py-3 border-b border-slate-700 flex justify-between items-center;
  }

  .admin-modal-title {
    @apply text-lg font-medium text-white;
  }

  .admin-modal-close {
    @apply bg-slate-700 rounded-md text-slate-400 hover:text-slate-300 focus:outline-none transition-colors;
  }

  .admin-modal-content {
    @apply p-6 bg-slate-800;
  }

  .admin-modal-footer {
    @apply bg-slate-700/50 px-4 py-3 border-t border-slate-700 flex justify-end gap-3;
  }

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

  .admin-status-success {
    @apply bg-emerald-500/20 text-emerald-300;
  }

  .admin-status-warning {
    @apply bg-amber-500/20 text-amber-300;
  }

  .admin-status-error {
    @apply bg-red-500/20 text-red-300;
  }

  .admin-status-info {
    @apply bg-blue-500/20 text-blue-300;
  }

  .admin-status-neutral {
    @apply bg-slate-600 text-slate-300;
  }

  /* Club Pill Component */
  .admin-club-pill {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-md text-xs font-medium;
  }

  .admin-club-pill-default {
    @apply bg-slate-600 text-slate-300;
  }

  /* Alert Components */
  .admin-alert {
    @apply rounded-lg p-4 border;
  }

  .admin-alert-success {
    @apply bg-emerald-900/50 border-emerald-500/50 text-emerald-200;
  }

  .admin-alert-warning {
    @apply bg-yellow-900/50 border-yellow-500/50 text-yellow-200;
  }

  .admin-alert-error {
    @apply bg-red-900/50 border-red-500/50 text-red-200;
  }

  .admin-alert-info {
    @apply bg-blue-900/50 border-blue-500/50 text-blue-200;
  }

  .admin-alert-icon {
    @apply h-5 w-5 flex-shrink-0;
  }

  .admin-alert-icon-success {
    @apply text-emerald-400;
  }

  .admin-alert-icon-warning {
    @apply text-yellow-400;
  }

  .admin-alert-icon-error {
    @apply text-red-400;
  }

  .admin-alert-icon-info {
    @apply text-blue-400;
  }

  .admin-alert-title {
    @apply text-sm font-medium;
  }

  .admin-alert-title-success {
    @apply text-emerald-300;
  }

  .admin-alert-title-warning {
    @apply text-yellow-300;
  }

  .admin-alert-title-error {
    @apply text-red-300;
  }

  .admin-alert-title-info {
    @apply text-blue-300;
  }

  /* Loading and Empty State Components */
  .admin-loading-spinner {
    @apply animate-spin rounded-full border-t-2 border-b-2 border-emerald-500;
  }

  .admin-empty-state {
    @apply text-center py-12;
  }

  .admin-empty-state-icon {
    @apply w-12 h-12 mx-auto mb-4 text-slate-600;
  }

  .admin-empty-state-title {
    @apply text-lg font-medium text-slate-300;
  }

  .admin-empty-state-description {
    @apply text-sm text-slate-500 mt-1;
  }

  /* Layout utility classes specific to admin */
  .admin-container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
  }

  .admin-container-narrow {
    @apply max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8;
  }

  .admin-section-spacing {
    @apply space-y-8;
  }

  .admin-content-spacing {
    @apply space-y-6;
  }

  /* Responsive admin grid */
  .admin-grid {
    @apply grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3;
  }

  .admin-grid-dense {
    @apply grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4;
  }

  /* Admin-specific text styles */
  .admin-text-primary {
    @apply text-white;
  }

  .admin-text-secondary {
    @apply text-slate-300;
  }

  .admin-text-muted {
    @apply text-slate-400;
  }

  .admin-text-accent {
    @apply text-emerald-400;
  }

  .admin-text-link {
    @apply text-blue-400 hover:text-blue-300 transition-colors;
  }

  /* Accordion/Expandable content */
  .admin-expandable-header {
    @apply flex justify-between items-start p-6;
  }

  .admin-expandable-content {
    @apply overflow-hidden max-h-0 transition-all duration-300;
  }

  .admin-expandable-toggle {
    @apply text-sm text-blue-400 hover:text-blue-300 flex items-center focus:outline-none whitespace-nowrap transition-colors;
  }

  .admin-expandable-icon {
    @apply h-5 w-5 ml-1 transition-transform duration-200;
  }

  /* Search and filter components */
  .admin-search-container {
    @apply relative;
  }

  .admin-search-input {
    @apply block w-full pl-10 pr-10 py-2 border border-slate-600 bg-slate-700 text-white placeholder-slate-400 rounded-md leading-5 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm transition-colors;
  }

  .admin-search-icon {
    @apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none;
  }

  .admin-search-loading {
    @apply absolute inset-y-0 right-0 pr-3 flex items-center;
  }

  /*Results Form - no border between intra-element rows*/
  /* Remove border between input row and team info row on mobile */
  tr[data-team-row="true"] {
    @apply border-t-0;
  }

  /* Header component styles for dark theme compatibility */
  .header-title {
    @apply text-gray-900;
  }

  .header-link {
    @apply text-blue-600 hover:text-blue-800 transition-colors;
  }

  .header-action-button {
    @apply inline-flex items-center rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-colors;
  }
}

/* Admin dark theme overrides */
body.admin .header-title {
  @apply text-white;
}

body.admin .header-link {
  @apply text-blue-400 hover:text-blue-300;
}

body.admin .header-action-button {
  @apply bg-emerald-600 hover:bg-emerald-700 focus:ring-emerald-500;
}