/* Basecoat Native Theme Implementation */
/* Remove custom CSS variables and let Basecoat handle theming */

/* Only add essential custom properties for learning interface */
:root {
  --color-original: #6B7280;
  --color-translation: #1F2937;
}

.dark {
  --color-original: #9CA3AF;
  --color-translation: #F9FAFB;
}

html:not(.dark) .hidden.dark\:block {
  display: none !important;
}

html:not(.dark) .block.dark\:hidden {
  display: block !important;
}

html.dark .block.dark\:hidden {
  display: none !important;
}

html.dark .hidden.dark\:block {
  display: block !important;
}

/* Minimal additional styling - let Basecoat handle the rest */
body {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

/* Ensure intermediate list overlay uses opaque themed background */
#intermediateWordList {
  background-color: var(--background) !important;
}

/* Dialog centering - ensure dialogs are properly centered */
dialog {
  margin: 0;
  padding: 0;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  border: none;
}

dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Fix button visibility in dialogs */
.btn-outline {
  border: 1px solid var(--border);
  background-color: var(--background);
  color: var(--foreground);
  opacity: 1 !important;
}

.btn-outline:hover {
  background-color: var(--accent);
  color: var(--accent-foreground);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-primary {
  background-color: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

.btn-primary:hover {
  background-color: var(--primary);
  opacity: 0.9;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Fix learning mode dialog buttons */
button.bg-primary {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

button.bg-primary:hover {
  background-color: var(--primary) !important;
  opacity: 0.9 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

button.bg-secondary {
  background-color: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
}

button.bg-secondary:hover {
  background-color: var(--secondary) !important;
  opacity: 0.8 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

button.bg-muted {
  background-color: var(--muted) !important;
  color: var(--muted-foreground) !important;
}

button.bg-muted:hover {
  background-color: var(--muted) !important;
  opacity: 0.8 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Upload area hover states */
.upload-area:hover {
  border-color: var(--primary) !important;
  border-opacity: 0.5 !important;
}

/* Table header dark mode styles */
.dark thead th,
.dark thead tr {
  background-color: #1f2937 !important;
  color: #f9fafb !important;
}

.dark thead {
  background-color: #1f2937 !important;
  border-bottom: 2px solid #374151 !important;
}

/* Word input styles - show borders only on focus */
.word-input:focus {
  border-color: var(--input) !important;
  background-color: var(--background) !important;
  outline: none;
}

.word-input:hover {
  background-color: var(--muted);
}