/*
 * Dashboard Utilities
 * Complements Pico CSS v2 by adding project-specific utility classes.
 * Uses Pico's CSS variables for theme compatibility.
 */

/* === Layout Utilities === */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.scrollable-y {
  /* Increased height to accommodate more compact rows */
  max-height: 400px;
  overflow-y: auto;
}

/* === Text Alignment === */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

/* === Text Colors === */
.text-muted { color: var(--pico-muted-color); }
.text-error { color: var(--pico-del-color); }
.text-primary { color: var(--pico-primary); }

/* === Spacing === */
/* Using rem units for consistency with Pico */
.p-1 { padding: 0.5rem; }
.p-2 { padding: 1rem; }
.p-4 { padding: 2rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }

.m-0 { margin: 0; }
.p-0 { padding: 0; }

/* === Component Styles === */

/* --- Codes Display --- */
.codes-display {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  padding: 1.5rem;
}

.codes-count {
  font-size: 2rem;
  font-weight: bold;
  margin: 0;
  line-height: 1.2;
}

/* --- HTMX Loading States --- */
/* HTMX's intended pattern - using opacity for smooth transitions */
.htmx-indicator {
  opacity: 0;
  transition: opacity 200ms ease-in-out;
}

/* HTMX adds htmx-request class directly to the indicator */
.htmx-indicator.htmx-request {
  opacity: 1;
}

/* --- Result Overlay Pattern (shared by Codes and Code Search) --- */
/* Wrapper for positioning context */
.codes-result-wrapper,
.code-search-wrapper {
  position: relative;
  min-height: 100px; /* Maintain minimum height to prevent layout shift */
}

/* Loading overlay - covers the entire result area */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9); /* Semi-transparent white overlay - increased opacity for better visibility */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  pointer-events: none; /* Allow clicks through when hidden */
}

/* When indicator is active, enable pointer events */
.loading-overlay.htmx-request {
  pointer-events: auto;
}

/* Container for loading spinner/text */
.loading-spinner-container {
  text-align: center;
  padding: 1rem;
}

/* Fade and blur the content underneath during loading */
#codes-result-content.htmx-request,
#code-search-content.htmx-request {
  opacity: 0.4;
  filter: blur(1px);
  transition: opacity 200ms ease-in-out, filter 200ms ease-in-out;
}

/* --- Compact Table for Production History --- */
/* Use more specific selectors to override Pico's defaults */
.compact-table th,
.compact-table td {
  /* Drastically reduce vertical padding */
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  
  /* Keep horizontal padding for readability */
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  
  /* Crucial: reduce line-height to tighten vertical space */
  line-height: 1.2;
  
  /* Ensure buttons and text align nicely */
  vertical-align: middle;
}

/* Update compact-button to remove vertical margins */
.compact-button {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  /* Remove default margin Pico adds to buttons */
  margin-block: 0;
}

.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--pico-muted-color);
}

/* Table column widths */
.col-60 { width: 60%; }
.col-40 { width: 40%; }

/* --- Success Message Styling --- */
.success-message {
  padding: 1.5rem;
  background-color: var(--pico-color-green-50);
  border: 2px solid var(--pico-color-green-550);
  border-radius: 0.5rem;
  text-align: center;
  margin: 1rem 0;
}

.success-message strong {
  color: var(--pico-color-green-650);
  font-size: 1.25rem;
  display: block;
  margin-bottom: 0.5rem;
}

.success-message p {
  color: var(--pico-color-green-600);
  margin: 0;
  font-size: 1rem;
}

/* === Utility Classes === */
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }

.font-mono { font-family: monospace; }
.font-size-sm { font-size: 0.875rem; }

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }

/* === Pagination Styles === */
/* Container for page info */
.pagination-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--pico-muted-color);
  font-size: 0.9rem;
}

/* Loading spinner animation */
.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--pico-border-color);
  border-top: 2px solid var(--pico-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Disabled button state during HTMX request */
.htmx-request button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* === Dark Theme Support === */
/* These styles automatically work with Pico's dark theme */
[data-theme="dark"] .text-muted {
  color: var(--pico-muted-color);
}

[data-theme="dark"] .text-error {
  color: var(--pico-del-color);
}