/**
 * ThrillWiki Component Styles
 * Enhanced CSS matching shadcn/ui design system from React frontend
 */

/* CSS Variables for Design System */
:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --card: 0 0% 100%;
  --card-foreground: 222.2 84% 4.9%;
  --popover: 0 0% 100%;
  --popover-foreground: 222.2 84% 4.9%;
  --primary: 262.1 83.3% 57.8%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96%;
  --secondary-foreground: 222.2 84% 4.9%;
  --muted: 210 40% 96%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96%;
  --accent-foreground: 222.2 84% 4.9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 210 40% 98%;
  --border: 214.3 31.8% 91.4%;
  --input: 214.3 31.8% 91.4%;
  --ring: 262.1 83.3% 57.8%;
  --radius: 0.5rem;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --card: 222.2 84% 4.9%;
  --card-foreground: 210 40% 98%;
  --popover: 222.2 84% 4.9%;
  --popover-foreground: 210 40% 98%;
  --primary: 262.1 83.3% 57.8%;
  --primary-foreground: 210 40% 98%;
  --secondary: 217.2 32.6% 17.5%;
  --secondary-foreground: 210 40% 98%;
  --muted: 217.2 32.6% 17.5%;
  --muted-foreground: 215 20.2% 65.1%;
  --accent: 217.2 32.6% 17.5%;
  --accent-foreground: 210 40% 98%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 210 40% 98%;
  --border: 217.2 32.6% 17.5%;
  --input: 217.2 32.6% 17.5%;
  --ring: 262.1 83.3% 57.8%;
}

/* Base Styles */
* {
  border-color: hsl(var(--border));
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
}

/* Component Classes */
.bg-background { background-color: hsl(var(--background)); }
.bg-foreground { background-color: hsl(var(--foreground)); }
.bg-card { background-color: hsl(var(--card)); }
.bg-card-foreground { background-color: hsl(var(--card-foreground)); }
.bg-popover { background-color: hsl(var(--popover)); }
.bg-popover-foreground { background-color: hsl(var(--popover-foreground)); }
.bg-primary { background-color: hsl(var(--primary)); }
.bg-primary-foreground { background-color: hsl(var(--primary-foreground)); }
.bg-secondary { background-color: hsl(var(--secondary)); }
.bg-secondary-foreground { background-color: hsl(var(--secondary-foreground)); }
.bg-muted { background-color: hsl(var(--muted)); }
.bg-muted-foreground { background-color: hsl(var(--muted-foreground)); }
.bg-accent { background-color: hsl(var(--accent)); }
.bg-accent-foreground { background-color: hsl(var(--accent-foreground)); }
.bg-destructive { background-color: hsl(var(--destructive)); }
.bg-destructive-foreground { background-color: hsl(var(--destructive-foreground)); }

.text-background { color: hsl(var(--background)); }
.text-foreground { color: hsl(var(--foreground)); }
.text-card { color: hsl(var(--card)); }
.text-card-foreground { color: hsl(var(--card-foreground)); }
.text-popover { color: hsl(var(--popover)); }
.text-popover-foreground { color: hsl(var(--popover-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-primary-foreground { color: hsl(var(--primary-foreground)); }
.text-secondary { color: hsl(var(--secondary)); }
.text-secondary-foreground { color: hsl(var(--secondary-foreground)); }
.text-muted { color: hsl(var(--muted)); }
.text-muted-foreground { color: hsl(var(--muted-foreground)); }
.text-accent { color: hsl(var(--accent)); }
.text-accent-foreground { color: hsl(var(--accent-foreground)); }
.text-destructive { color: hsl(var(--destructive)); }
.text-destructive-foreground { color: hsl(var(--destructive-foreground)); }

.border-background { border-color: hsl(var(--background)); }
.border-foreground { border-color: hsl(var(--foreground)); }
.border-card { border-color: hsl(var(--card)); }
.border-card-foreground { border-color: hsl(var(--card-foreground)); }
.border-popover { border-color: hsl(var(--popover)); }
.border-popover-foreground { border-color: hsl(var(--popover-foreground)); }
.border-primary { border-color: hsl(var(--primary)); }
.border-primary-foreground { border-color: hsl(var(--primary-foreground)); }
.border-secondary { border-color: hsl(var(--secondary)); }
.border-secondary-foreground { border-color: hsl(var(--secondary-foreground)); }
.border-muted { border-color: hsl(var(--muted)); }
.border-muted-foreground { border-color: hsl(var(--muted-foreground)); }
.border-accent { border-color: hsl(var(--accent)); }
.border-accent-foreground { border-color: hsl(var(--accent-foreground)); }
.border-destructive { border-color: hsl(var(--destructive)); }
.border-destructive-foreground { border-color: hsl(var(--destructive-foreground)); }
.border-input { border-color: hsl(var(--input)); }

.ring-background { --tw-ring-color: hsl(var(--background)); }
.ring-foreground { --tw-ring-color: hsl(var(--foreground)); }
.ring-card { --tw-ring-color: hsl(var(--card)); }
.ring-card-foreground { --tw-ring-color: hsl(var(--card-foreground)); }
.ring-popover { --tw-ring-color: hsl(var(--popover)); }
.ring-popover-foreground { --tw-ring-color: hsl(var(--popover-foreground)); }
.ring-primary { --tw-ring-color: hsl(var(--primary)); }
.ring-primary-foreground { --tw-ring-color: hsl(var(--primary-foreground)); }
.ring-secondary { --tw-ring-color: hsl(var(--secondary)); }
.ring-secondary-foreground { --tw-ring-color: hsl(var(--secondary-foreground)); }
.ring-muted { --tw-ring-color: hsl(var(--muted)); }
.ring-muted-foreground { --tw-ring-color: hsl(var(--muted-foreground)); }
.ring-accent { --tw-ring-color: hsl(var(--accent)); }
.ring-accent-foreground { --tw-ring-color: hsl(var(--accent-foreground)); }
.ring-destructive { --tw-ring-color: hsl(var(--destructive)); }
.ring-destructive-foreground { --tw-ring-color: hsl(var(--destructive-foreground)); }
.ring-ring { --tw-ring-color: hsl(var(--ring)); }

.ring-offset-background { --tw-ring-offset-color: hsl(var(--background)); }

/* Enhanced Button Styles */
.btn {
  @apply inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50;
}

.btn-default {
  @apply bg-primary text-primary-foreground hover:bg-primary/90;
}

.btn-destructive {
  @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
}

.btn-outline {
  @apply border border-input bg-background hover:bg-accent hover:text-accent-foreground;
}

.btn-secondary {
  @apply bg-secondary text-secondary-foreground hover:bg-secondary/80;
}

.btn-ghost {
  @apply hover:bg-accent hover:text-accent-foreground;
}

.btn-link {
  @apply text-primary underline-offset-4 hover:underline;
}

.btn-sm {
  @apply h-9 rounded-md px-3;
}

.btn-lg {
  @apply h-11 rounded-md px-8;
}

.btn-icon {
  @apply h-10 w-10;
}

/* Enhanced Card Styles */
.card {
  @apply rounded-lg border bg-card text-card-foreground shadow-sm;
}

.card-header {
  @apply flex flex-col space-y-1.5 p-6;
}

.card-title {
  @apply text-2xl font-semibold leading-none tracking-tight;
}

.card-description {
  @apply text-sm text-muted-foreground;
}

.card-content {
  @apply p-6 pt-0;
}

.card-footer {
  @apply flex items-center p-6 pt-0;
}

/* Enhanced Input Styles */
.input {
  @apply flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

/* Enhanced Form Styles */
.form-group {
  @apply space-y-2;
}

.form-label {
  @apply text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70;
}

.form-error {
  @apply text-sm font-medium text-destructive;
}

.form-description {
  @apply text-sm text-muted-foreground;
}

/* Enhanced Navigation Styles */
.nav-link {
  @apply flex items-center gap-2 px-3 py-2 text-sm font-medium rounded-md hover:bg-accent hover:text-accent-foreground transition-colors;
}

.nav-link.active {
  @apply bg-accent text-accent-foreground;
}

/* Enhanced Dropdown Styles */
.dropdown-content {
  @apply z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md;
}

.dropdown-item {
  @apply relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
}

/* Browse Menu Specific Styles - Using plain CSS to fix @apply errors */
.browse-dropdown {
  position: absolute;
  left: 0;
  margin-top: 0.5rem;
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 50;
  width: 600px !important;
  min-width: 600px !important;
}

.browse-dropdown .browse-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem !important;
}

.browse-dropdown .browse-item {
  display: flex;
  align-items: flex-start;
  border-radius: 0.5rem;
  transition: background-color 0.2s;
  padding: 1rem !important;
  gap: 0.75rem !important;
  min-height: 4rem;
  text-decoration: none;
}

.browse-dropdown .browse-item:hover {
  background-color: hsl(var(--accent));
}

.browse-dropdown .browse-icon {
  color: hsl(var(--muted-foreground));
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0 !important;
  margin-top: 0.25rem !important;
}

.browse-dropdown .browse-item:hover .browse-icon {
  color: hsl(var(--foreground));
}

.browse-dropdown .browse-text {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  overflow: hidden;
}

.browse-dropdown .browse-title {
  font-weight: 600;
  font-size: 0.875rem;
  margin-bottom: 0.375rem !important;
  line-height: 1.25 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  color: hsl(var(--foreground));
}

.browse-dropdown .browse-description {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  line-height: 1.4 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

.dropdown-separator {
  @apply -mx-1 my-1 h-px bg-muted;
}

/* Enhanced Modal Styles */
.modal-overlay {
  @apply fixed inset-0 z-50 bg-background/80 backdrop-blur-sm;
}

.modal-content {
  @apply fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 sm:rounded-lg;
}

.modal-header {
  @apply flex flex-col space-y-1.5 text-center sm:text-left;
}

.modal-title {
  @apply text-lg font-semibold leading-none tracking-tight;
}

.modal-description {
  @apply text-sm text-muted-foreground;
}

.modal-footer {
  @apply flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2;
}

/* Enhanced Alert Styles */
.alert {
  @apply relative w-full rounded-lg border p-4;
}

.alert-default {
  @apply bg-background text-foreground;
}

.alert-destructive {
  @apply border-destructive/50 text-destructive dark:border-destructive;
}

.alert-title {
  @apply mb-1 font-medium leading-none tracking-tight;
}

.alert-description {
  @apply text-sm opacity-90;
}

/* Enhanced Badge Styles */
.badge {
  @apply inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
}

.badge-default {
  @apply border-transparent bg-primary text-primary-foreground hover:bg-primary/80;
}

.badge-secondary {
  @apply border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80;
}

.badge-destructive {
  @apply border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80;
}

.badge-outline {
  @apply text-foreground;
}

/* Enhanced Table Styles */
.table {
  @apply w-full caption-bottom text-sm;
}

.table-header {
  @apply border-b;
}

.table-body {
  @apply divide-y;
}

.table-row {
  @apply border-b transition-colors hover:bg-muted/50;
}

.table-head {
  @apply h-12 px-4 text-left align-middle font-medium text-muted-foreground;
}

.table-cell {
  @apply p-4 align-middle;
}

/* Enhanced Skeleton Styles */
.skeleton {
  @apply animate-pulse rounded-md bg-muted;
}

/* Enhanced Separator Styles */
.separator {
  @apply shrink-0 bg-border;
}

.separator-horizontal {
  @apply h-[1px] w-full;
}

.separator-vertical {
  @apply h-full w-[1px];
}

/* Enhanced Avatar Styles */
.avatar {
  @apply relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full;
}

.avatar-image {
  @apply aspect-square h-full w-full object-cover;
}

.avatar-fallback {
  @apply flex h-full w-full items-center justify-center rounded-full bg-muted;
}

/* Enhanced Progress Styles */
.progress {
  @apply relative h-4 w-full overflow-hidden rounded-full bg-secondary;
}

.progress-indicator {
  @apply h-full w-full flex-1 bg-primary transition-all;
}

/* Enhanced Scroll Area Styles */
.scroll-area {
  @apply relative overflow-hidden;
}

.scroll-viewport {
  @apply h-full w-full rounded-[inherit];
}

.scroll-bar {
  @apply flex touch-none select-none transition-colors;
}

.scroll-thumb {
  @apply relative flex-1 rounded-full bg-border;
}

/* Enhanced Tabs Styles */
.tabs-list {
  @apply inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground;
}

.tabs-trigger {
  @apply inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm;
}

.tabs-content {
  @apply mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2;
}

/* Enhanced Tooltip Styles */
.tooltip-content {
  @apply z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95;
}

/* Enhanced Switch Styles */
.switch {
  @apply peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input;
}

.switch-thumb {
  @apply pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0;
}

/* Enhanced Checkbox Styles */
.checkbox {
  @apply peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground;
}

/* Enhanced Radio Styles */
.radio {
  @apply aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

/* Enhanced Select Styles */
.select-trigger {
  @apply flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50;
}

.select-content {
  @apply relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md;
}

.select-item {
  @apply relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50;
}

/* Utility Classes */
.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;
}

/* Animation Classes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes slideIn {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}

@keyframes slideOut {
  from { transform: translateX(0); }
  to { transform: translateX(100%); }
}

@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@keyframes scaleOut {
  from { transform: scale(1); opacity: 1; }
  to { transform: scale(0.95); opacity: 0; }
}

.animate-fade-in {
  animation: fadeIn 0.2s ease-out;
}

.animate-fade-out {
  animation: fadeOut 0.2s ease-out;
}

.animate-slide-in {
  animation: slideIn 0.3s ease-out;
}

.animate-slide-out {
  animation: slideOut 0.3s ease-out;
}

.animate-scale-in {
  animation: scaleIn 0.2s ease-out;
}

.animate-scale-out {
  animation: scaleOut 0.2s ease-out;
}

/* Responsive Design Helpers */
@media (max-width: 640px) {
  .modal-content {
    @apply w-[95vw] max-w-none;
  }
  
  .dropdown-content {
    @apply w-screen max-w-none;
  }
}

/* Dark Mode Specific Adjustments */
.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
}

.dark .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

/* Focus Visible Improvements */
.focus-visible\:ring-2:focus-visible {
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .border {
    border-width: 2px;
  }
  
  .btn {
    border-width: 2px;
  }
  
  .input {
    border-width: 2px;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .transition-colors,
  .transition-all,
  .transition-transform {
    transition: none;
  }
  
  .animate-fade-in,
  .animate-fade-out,
  .animate-slide-in,
  .animate-slide-out,
  .animate-scale-in,
  .animate-scale-out {
    animation: none;
  }
}