/**
 * Component Library
 * Reusable component classes built on design tokens
 * Provides consistent UI patterns across the application
 */

/* ================================
 * Brand Logo
 * ================================ */

/*
 * AI Orb — smooth continuous animation via GPU-composited transforms.
 * Icon: blurred radial blobs rotated as a single layer (perfectly smooth).
 * Text: seamless tiling gradient with constant-rate position slide.
 * No @property keyframes = no stepping/pulsing artifacts.
 */

/* Icon blob layer: continuous rotation (single GPU-composited value) */
@keyframes blob-rotate {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(360deg) scale(1); }
}

/* Subtle breathing layered on top of rotation */
@keyframes blob-breathe {
  0%, 100% { filter: saturate(1.1); }
  50%      { filter: saturate(1.25); }
}

/* Text gradient: constant-rate linear slide */
@keyframes gradient-slide {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

/* Glow pulse on hover */
@keyframes orb-glow {
  0%, 100% { box-shadow: 0 0 6px 2px oklch(0.60 0.14 175 / 0.3); }
  50%      { box-shadow: 0 0 14px 4px oklch(0.65 0.16 195 / 0.45); }
}

.hiroi-logo-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  background: oklch(0.52 0.14 175);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/*
 * Flat color wheel: conic gradient rotated continuously.
 * No radial halos or blur — clean, balanced, solid fill.
 */
.hiroi-logo-icon::before {
  content: "";
  position: absolute;
  inset: -60%;
  border-radius: 50%;
  background: conic-gradient(
    oklch(0.62 0.16 175),
    oklch(0.68 0.14 195),
    oklch(0.72 0.12 220),
    oklch(0.70 0.10 160),
    oklch(0.65 0.14 140),
    oklch(0.62 0.16 175)
  );
  animation: blob-rotate 20s linear infinite;
  pointer-events: none;
}

/* SVG icon sits above the blob layer */
.hiroi-logo-icon svg {
  position: relative;
  z-index: 1;
}

/* Hover: faster spin + glow */
.hiroi-logo-icon:hover,
.group:hover .hiroi-logo-icon {
  transform: scale(1.08);
  animation: orb-glow 2s ease-in-out infinite;
}
.hiroi-logo-icon:hover::before,
.group:hover .hiroi-logo-icon::before {
  animation:
    blob-rotate 6s linear infinite,
    blob-breathe 3s ease-in-out infinite;
}

.hiroi-logo-text {
  font-family: var(--f-ui);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.06em;
  /*
   * Static gradient — no continuous animation.
   * background-clip:text + animation causes browsers to intermittently
   * drop the composited text paint layer, making it disappear.
   * Animate only on hover where the brief flicker is acceptable.
   */
  color: #0d9488;
  background: linear-gradient(
    90deg,
    oklch(0.62 0.16 175),
    oklch(0.68 0.14 195),
    oklch(0.72 0.12 220),
    oklch(0.70 0.10 160),
    oklch(0.65 0.14 140),
    oklch(0.62 0.16 175)
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transform: translateZ(0);
}

/* Hover: animate the gradient slide */
.hiroi-logo-text:hover,
.group:hover .hiroi-logo-text {
  animation: gradient-slide 3s linear infinite;
}

/* ================================
 * Buttons
 * ================================ */

/* Base button styles */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 6px 14px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.25rem;
  letter-spacing: -0.006em;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  height: var(--button-height-md);
}

.btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  transition: outline-color var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Button variants */
.btn-primary {
  /* primary-hover (#0f766e) gives 5:1 with white text — AA-safe.
     primary (#0d9488) is too bright for white text on it. */
  background-color: var(--color-primary-hover);
  color: var(--color-text-inverse);
}

.btn-primary:hover:not(:disabled) {
  background-color: var(--color-primary-active);
}

.btn-primary:active:not(:disabled) {
  background-color: var(--color-primary-active);
  filter: brightness(0.92);
  transform: scale(0.98);
}

.btn-secondary {
  background-color: var(--color-surface);
  color: var(--color-text-primary);
  border-color: var(--color-border);
}

.btn-secondary:hover:not(:disabled) {
  background-color: var(--color-surface-hover);
  border-color: var(--color-border-hover);
}

.btn-secondary:active:not(:disabled) {
  background-color: var(--color-background-secondary);
  transform: scale(0.98);
}

.btn-tertiary {
  background-color: transparent;
  color: var(--color-text-secondary);
}

.btn-tertiary:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.btn-tertiary:active:not(:disabled) {
  background-color: var(--color-background-tertiary);
  transform: scale(0.98);
}

.btn-danger {
  /* dc2626 has 4.83:1 with white — AA-safe. #ef4444 is only 3.76.
     Force white text in both themes; --color-text-inverse flips to near-black
     in dark mode which only yields 4.02:1 on #dc2626. */
  background-color: var(--color-error-hover, #dc2626);
  color: #ffffff;
}

.btn-danger:hover:not(:disabled) {
  background-color: var(--color-error-active, #b91c1c);
  color: #ffffff;
}

.btn-danger:active:not(:disabled) {
  background-color: var(--color-error-active, #b91c1c);
  color: #ffffff;
  filter: brightness(0.92);
  transform: scale(0.98);
}

.btn-ghost {
  background-color: transparent;
  color: var(--color-text-secondary);
  border: 1px solid transparent;
}

.btn-ghost:hover:not(:disabled) {
  background-color: var(--color-background-secondary);
  color: var(--color-text-primary);
}

.btn-ghost:active:not(:disabled) {
  background-color: var(--color-background-tertiary);
  transform: scale(0.98);
}

/* Button sizes */
.btn-sm {
  padding: 0 12px;
  font-size: var(--font-size-xs);
  height: var(--button-height-sm);
  gap: 6px;
}

.btn-md {
  padding: 0 14px;
  font-size: var(--font-size-sm);
  height: var(--button-height-md);
  gap: 8px;
}

.btn-lg {
  padding: 0 20px;
  font-size: var(--font-size-base);
  height: var(--button-height-lg);
  gap: 8px;
}

/* Button modifiers */
.btn-icon-only {
  padding: 6px;
  aspect-ratio: 1;
}

/* ================================
 * Cards
 * ================================ */

.card {
  position: relative;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  /* 1px inner top highlight — precision edge, catches light like real material */
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.55);
}

/* Faint top-to-bottom sheen on the surface — adds depth without color */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.04) 0%, rgb(255 255 255 / 0) 30%);
  border-radius: inherit;
}

[data-theme="dark"] .card {
  box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05);
}

[data-theme="dark"] .card::before {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.025) 0%, rgb(255 255 255 / 0) 28%);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .card {
    box-shadow: inset 0 1px 0 0 rgb(255 255 255 / 0.05);
  }
  :root:not([data-theme="light"]) .card::before {
    background: linear-gradient(180deg, rgb(255 255 255 / 0.025) 0%, rgb(255 255 255 / 0) 28%);
  }
}

.card > * { position: relative; }

/* Card sections */
.card-body {
  padding: var(--space-6);
}

/* ================================
 * Form Elements
 * ================================ */

/* Input fields */
.input,
.textarea,
.select {
  width: 100%;
  padding: 6px 12px;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
  color: var(--color-text-primary);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.04);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  height: var(--input-height-md);
}

.input:hover,
.textarea:hover,
.select:hover {
  border-color: var(--color-border-hover);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--focus-ring-shadow), inset 0 1px 2px rgb(0 0 0 / 0.04);
  transition: outline-color var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  background-color: var(--color-background-tertiary);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-tertiary);
}

/* Input with prefix icon (search, etc.) */
.input-icon-left {
  padding-left: 2.25rem; /* 36px — clears a 14-16px icon at left-3 */
}

.input-icon-left-sm {
  padding-left: 1.75rem; /* 28px — clears a 14px icon at left-2.5 */
}

/* Textarea */
.textarea {
  resize: vertical;
  min-height: 120px;
}

/* Checkbox and Radio */
.checkbox,
.radio {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
}

.checkbox input[type="checkbox"],
.radio input[type="radio"] {
  margin-top: 2px;
  width: 1rem;
  height: 1rem;
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* ================================
 * Badges
 * ================================ */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-wide);
  line-height: 1.2;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.badge-neutral {
  background-color: var(--color-background-tertiary);
  color: var(--color-text-secondary);
}

/* Badge sizes */
.badge-sm {
  padding: 2px 6px;
  font-size: 10px;
}

/* Department tags */
.dept-tag {
  background: rgba(99,102,241,0.1);
  color: #4338ca; /* indigo-700: ~7:1 on tinted bg AA */
  transition: background-color 0.15s;
}
.dept-tag:hover {
  background: rgba(99,102,241,0.18);
}
[data-theme="dark"] .dept-tag { color: #a5b4fc; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .dept-tag { color: #a5b4fc; }
}

/* ================================
 * Alerts
 * ================================ */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background-color: var(--color-surface);
}

/* Compact inline error banner — used for form errors and small status callouts.
   For larger structured banners with title + body, use .alert.alert-error. */
.error-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-error-bg);
  border: 1px solid var(--color-error-border);
  color: var(--color-error-text);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-normal);
}

.error-banner svg {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  margin-top: 1px;
  color: var(--color-error);
}

/* Prevent space-y utilities from adding margin to fixed modal containers */
[class*="space-y"] > .fixed[style*="z-index"] {
  margin-top: 0 !important;
}

/* ================================
 * Loading States
 * ================================ */

.spinner {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: spin 0.75s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ================================
 * Utility Classes
 * ================================ */

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: var(--radius-full); }

/* ================================
 * Breadcrumb Navigation
 * ================================ */

.breadcrumb {
  display: block;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.breadcrumb-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  line-height: 1.25rem;
}

.breadcrumb-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb-link:focus {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.breadcrumb-separator {
  color: var(--color-text-disabled);
  user-select: none;
  font-weight: 300;
  font-size: 0.75em;
}

.breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
}

/* Dark mode: remove inner shadow from inputs (rely on borders) */
[data-theme="dark"] .input,
[data-theme="dark"] .textarea,
[data-theme="dark"] .select {
  box-shadow: none;
}

[data-theme="dark"] .input:focus,
[data-theme="dark"] .textarea:focus,
[data-theme="dark"] .select:focus {
  box-shadow: var(--focus-ring-shadow);
}

/* ================================
 * Global Focus-Visible Styles
 * Consistent focus indicators across all interactive elements
 * ================================ */

:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-xs);
}

/* Ensure buttons and links get focus ring */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
}

/* Inputs get a subtle ring instead of outline */
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: var(--focus-ring-shadow);
}

/* ================================
 * Theme Toggle Icons
 * Works with [data-theme] attribute
 * ================================ */

.theme-icon-sun { display: none; }
.theme-icon-moon { display: block; }

[data-theme="dark"] .theme-icon-sun { display: block; }
[data-theme="dark"] .theme-icon-moon { display: none; }