/**
 * HKLII AI-Enhanced Search
 * Frontend CSS for styling the search interface
 */

: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 59% 65%;
  --primary-foreground: 210 40% 98%;
  --secondary: 210 40% 96.1%;
  --secondary-foreground: 222.2 47.4% 11.2%;
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --accent: 210 40% 96.1%;
  --accent-foreground: 222.2 47.4% 11.2%;
  --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 59% 65%;
  --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 59% 65%;
  --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 59% 65%;
}

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

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

.hidden {
  display: none;
}


/* Progress item animation */
.progress-item {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Relevance highlighting classes */
.relevance-high {
  background-color: rgba(34, 197, 94, 0.1);
  border-left: 4px solid rgb(34, 197, 94);
}

.relevance-medium {
  background-color: rgba(234, 179, 8, 0.1);
  border-left: 4px solid rgb(234, 179, 8);
}

.relevance-low {
  background-color: rgba(239, 68, 68, 0.1);
  border-left: 4px solid rgb(239, 68, 68);
}


/* Screen reader only class */
.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;
}

/* Case toolbar styles */
.case-toolbar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.75rem;
  background-color: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 0.5rem;
  flex-wrap: wrap;
}

.dark .case-toolbar {
  background-color: #1e293b;
  border-color: #334155;
}

.case-toolbar button {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #d1d5db;
  border-radius: 0.375rem;
  background-color: white;
  color: #374151;
  cursor: pointer;
  transition: all 0.2s ease;
}

.case-toolbar button:hover {
  background-color: #f3f4f6;
  border-color: #9ca3af;
}

.dark .case-toolbar button {
  background-color: #374151;
  color: #f9fafb;
  border-color: #4b5563;
}

.dark .case-toolbar button:hover {
  background-color: #4b5563;
  border-color: #6b7280;
}

/* Collapsed block styles */
.collapsed-block {
  margin: 0.5rem 0;
}

.collapsed-stub {
  padding: 0.75rem;
  background-color: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  color: #64748b;
}

.dark .collapsed-stub {
  background-color: #1e293b;
  border-color: #334155;
  color: #94a3b8;
}

.toggle-collapsed {
  background: none;
  border: none;
  color: #3b82f6;
  cursor: pointer;
  text-decoration: underline;
  font-size: inherit;
  padding: 0;
  margin-left: 0.25rem;
}

.toggle-collapsed:hover {
  color: #1d4ed8;
}

.dark .toggle-collapsed {
  color: #60a5fa;
}

.dark .toggle-collapsed:hover {
  color: #93c5fd;
}

.collapsed-content {
  margin-top: 0.5rem;
}

/* Flash animation for navigation */
.flash {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 0.25rem;
  animation: flashAnimation 0.6s ease-out;
}

@keyframes flashAnimation {
  0% { outline-color: #3b82f6; }
  50% { outline-color: #60a5fa; }
  100% { outline-color: transparent; }
}

/* Prevent iOS Safari auto-zoom on focused controls by ensuring 16px font on mobile */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]),
  textarea {
    font-size: 16px !important;
  }
}