/* NeutralAiz Design System - Audit Fixes
   Root fixes for issues found during deep audit
   NO CSS HACKS - Only proper solutions */

@import './design-system-variables.css';

/* =================================
   FIX 1: INTERACTIVE ELEMENT HEIGHTS
   Root cause: Inconsistent height definitions
   Solution: Enforce minimum height globally
   ================================= */

/* Voice button fix - was 36px */
.voice-btn {
  width: var(--min-height-interactive) !; /* Remove this line - using root fix below */
  height: var(--min-height-interactive);
  min-width: var(--min-height-interactive);
  min-height: var(--min-height-interactive);
}

/* Action buttons fix - was 36px */
.action-btn {
  width: var(--min-height-interactive);
  height: var(--min-height-interactive);
  min-width: var(--min-height-interactive);
  min-height: var(--min-height-interactive);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Close button fix - was 32px */
.close-debug,
.close-btn,
button[class*="close"] {
  min-width: var(--min-height-interactive);
  min-height: var(--min-height-interactive);
  width: var(--min-height-interactive);
  height: var(--min-height-interactive);
}

/* Option inputs fix - was 36px */
.option-group input[type="number"],
.option-group select,
.option-group input[type="text"],
input.form-control {
  min-height: var(--min-height-interactive);
}

/* Global interactive element enforcement */
button,
input,
select,
textarea,
[role="button"],
.btn,
.button {
  min-height: var(--min-height-interactive);
}

/* Exception for inline/icon-only buttons */
button.icon-only,
.btn-icon,
.inline-action {
  min-height: auto; /* Allow smaller for true icon buttons */
}

/* =================================
   FIX 2: DISABLED STATES
   Root cause: Missing disabled specifications
   Solution: Comprehensive disabled styling
   ================================= */

/* Disabled inputs */
input:disabled,
select:disabled,
textarea:disabled,
.glass-input:disabled,
.glass-select:disabled {
  background: rgba(20, 20, 30, 0.3);
  border-color: rgba(60, 70, 90, 0.2);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Disabled buttons */
button:disabled,
.btn:disabled,
.glass-button:disabled {
  background: rgba(30, 35, 45, 0.3);
  border-color: rgba(70, 80, 100, 0.2);
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
}

button:disabled:hover,
.btn:disabled:hover,
.glass-button:disabled:hover {
  transform: none;
  box-shadow: none;
  background: rgba(30, 35, 45, 0.3);
  border-color: rgba(70, 80, 100, 0.2);
}

/* Disabled links */
a:disabled,
.nav-link:disabled,
a[aria-disabled="true"] {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  opacity: 0.5;
  pointer-events: none;
}

/* =================================
   FIX 3: FOCUS STATES FOR ACCESSIBILITY
   Root cause: Missing keyboard navigation indicators
   Solution: Proper focus-visible implementation
   ================================= */

/* Remove default outlines */
*:focus {
  outline: none;
}

/* Keyboard-only focus (better accessibility) */
*:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Input focus enhancement */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3),
              0 0 0 4px rgba(37, 99, 235, 0.1);
}

/* Button focus enhancement */
button:focus-visible,
.btn:focus-visible,
.glass-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.4),
              0 0 0 4px rgba(37, 99, 235, 0.2);
}

/* Link focus enhancement */
a:focus-visible,
.nav-link:focus-visible {
  outline: 2px solid var(--color-accent-blue);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

/* =================================
   FIX 4: REMOVE CSS HACKS
   Root cause: Using !important to override specificity
   Solution: Fix specificity properly
   ================================= */

/* Fix for token input width WITHOUT !important */
.token-filter-group .token-input,
.token-filter-group input[type="number"] {
  width: 90px; /* No !important needed with proper specificity */
  flex-shrink: 0;
}

/* Fix for hidden class WITHOUT !important */
.hidden,
[hidden],
[aria-hidden="true"] {
  display: none; /* More specific selectors instead of !important */
}

/* Ensure hidden class works on any element */
.hidden.hidden {
  display: none; /* Double class for higher specificity */
}

/* =================================
   FIX 5: ERROR STATES
   Root cause: Missing error condition styles
   Solution: Comprehensive error styling
   ================================= */

/* Error inputs */
input.error,
.glass-input.error,
input[aria-invalid="true"] {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.4);
  color: var(--color-text-primary);
}

input.error:focus,
.glass-input.error:focus {
  border-color: rgba(239, 68, 68, 0.6);
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.2);
}

/* Error messages */
.error-message,
.field-error,
[role="alert"] {
  color: var(--color-error);
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-xs);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-ui);
}

/* =================================
   FIX 6: LOADING STATES
   Root cause: Missing loading indicators
   Solution: Skeleton screens and loading states
   ================================= */

/* Skeleton loader base */
.skeleton,
.loading-skeleton {
  background: linear-gradient(
    90deg,
    rgba(30, 35, 45, 0.6) 0%,
    rgba(40, 45, 55, 0.8) 50%,
    rgba(30, 35, 45, 0.6) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 2s infinite;
  border-radius: var(--radius-xs);
}

@keyframes skeleton-shimmer {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* Skeleton variants */
.skeleton-text {
  height: var(--font-size-sm);
  margin-bottom: var(--spacing-sm);
}

.skeleton-button {
  height: var(--min-height-interactive);
  width: 120px;
}

.skeleton-card {
  height: 200px;
  margin-bottom: var(--spacing-lg);
}

/* Loading overlay */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 15, 0.8);
  backdrop-filter: blur(var(--blur-sm));
  -webkit-backdrop-filter: blur(var(--blur-sm));
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-overlay);
}

/* =================================
   FIX 7: RESPONSIVE ISSUES
   Root cause: Missing intermediate breakpoints
   Solution: Progressive responsive adjustments
   ================================= */

/* Tablet adjustments */
@media (max-width: 1024px) {
  .main-content {
    padding: var(--spacing-lg);
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .sources-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small tablet */
@media (max-width: 768px) {
  /* Reduce minimum heights on mobile for space */
  button,
  input,
  select {
    min-height: 40px; /* Slightly smaller on mobile but still accessible */
  }
  
  .app-header {
    position: static; /* Don't stick on mobile */
  }
  
  .debug-panel {
    width: 100vw;
  }
}

/* Mobile */
@media (max-width: 640px) {
  /* Stack everything vertically */
  .filters-section,
  .search-box,
  .tab-navigation,
  .file-actions {
    flex-direction: column;
    width: 100%;
  }
  
  .tab-button {
    width: 100%;
  }
  
  /* Full width inputs on mobile */
  .search-input,
  .glass-input,
  .glass-select {
    width: 100%;
  }
}

/* =================================
   FIX 8: MISSING HOVER STATES
   Root cause: Incomplete hover definitions
   Solution: Ensure all interactive elements have hover
   ================================= */

/* Ensure all clickable elements have hover feedback */
[onclick]:not(:disabled):hover,
[role="button"]:not(:disabled):hover,
button:not(:disabled):hover,
a:not(:disabled):hover {
  cursor: pointer;
  transition: all var(--transition-fast);
}

/* Subtle hover lift for all cards */
.glass-card:hover,
.file-item:hover,
.chunk-container:hover,
.source-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* =================================
   FIX 9: PRINT STYLES
   Root cause: Dark theme doesn't print well
   Solution: Print-specific overrides
   ================================= */

@media print {
  body {
    background: rgba(10, 12, 16, 0.95);
    color: black;
  }
  
  .glass,
  .glass-card,
  .glass-panel {
    background: rgba(10, 12, 16, 0.95);
    border: 1px solid #ddd;
  }
  
  .app-header,
  .debug-panel,
  .debug-toggle,
  .nav-menu,
  button {
    display: none;
  }
  
  * {
    box-shadow: none !important; /* OK to use for print */
    text-shadow: none !important;
  }
}

/* =================================
   FIX 10: SCROLLBAR FIREFOX SUPPORT
   Root cause: Webkit-only scrollbar styles
   Solution: Firefox scrollbar-color support
   ================================= */

/* Firefox scrollbar support */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 110, 130, 0.4) rgba(0, 0, 0, 0.2);
}

*:hover {
  scrollbar-color: rgba(120, 130, 150, 0.6) rgba(0, 0, 0, 0.2);
}