@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --ce-page: #f9fafb;
  --ce-surface: #ffffff;
  --ce-surface-muted: #f9fafb;
  --ce-surface-elevated: #ffffff;
  --ce-text: #111827;
  --ce-text-muted: #6b7280;
  --ce-border: #d1d5db;
  --ce-teal: #0f766e;
  --ce-teal-surface: #f0fdfa;
  --ce-focus: #14b8a6;
  --ce-skeleton: #e5e7eb;
}

html[data-theme="dark"] {
  --ce-page: #172128;
  --ce-surface: #202c34;
  --ce-surface-muted: #1b262e;
  --ce-surface-elevated: #293740;
  --ce-text: #edf2f3;
  --ce-text-muted: #b4c0c5;
  --ce-border: #40515a;
  --ce-teal: #62d3c5;
  --ce-teal-surface: #203a3c;
  --ce-focus: #78ded2;
  --ce-skeleton: #3a4a53;
}

html[data-theme="dark"] body { background-color: var(--ce-page) !important; color: var(--ce-text) !important; }
html[data-theme="dark"] .app-chrome { background-color: var(--ce-surface-muted); border-color: var(--ce-border); }
html[data-theme="dark"] .theme-toggle { background-color: var(--ce-surface-elevated); border-color: var(--ce-border); color: var(--ce-text); }
html[data-theme="dark"] .theme-toggle:hover { background-color: #33444d; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] [class*="bg-white"] { background-color: var(--ce-surface) !important; }
html[data-theme="dark"] [class*="bg-gray-50"],
html[data-theme="dark"] [class*="bg-gray-100"] { background-color: var(--ce-surface-muted) !important; }
html[data-theme="dark"] [class*="bg-gradient-to"] { background-image: none !important; background-color: var(--ce-surface) !important; }
html[data-theme="dark"] [class*="bg-teal-50"] { background-color: var(--ce-teal-surface) !important; }
html[data-theme="dark"] [class*="bg-amber-50"],
html[data-theme="dark"] [class*="bg-orange-50"],
html[data-theme="dark"] [class*="bg-yellow-50"] { background-color: #3a3324 !important; }
html[data-theme="dark"] [class*="bg-green-50"] { background-color: #20392f !important; }
html[data-theme="dark"] [class*="bg-blue-50"] { background-color: #243540 !important; }
html[data-theme="dark"] [class*="border-gray"],
html[data-theme="dark"] [class*="border-teal"],
html[data-theme="dark"] [class*="border-amber"],
html[data-theme="dark"] [class*="border-orange"],
html[data-theme="dark"] [class*="border-green"],
html[data-theme="dark"] [class*="border-blue"] { border-color: var(--ce-border) !important; }
html[data-theme="dark"] :is(.text-gray-900, .text-gray-800, .text-gray-700, .text-gray-600) { color: var(--ce-text) !important; }
html[data-theme="dark"] :is(.text-gray-500, .text-gray-400) { color: var(--ce-text-muted) !important; }
html[data-theme="dark"] :is(.text-teal-700, .text-teal-800) { color: var(--ce-teal) !important; }
html[data-theme="dark"] :is(.text-amber-700, .text-amber-800, .text-orange-700, .text-orange-800, .text-yellow-700, .text-yellow-800) { color: #f2c879 !important; }
html[data-theme="dark"] :is(.text-green-700, .text-green-800) { color: #8bd8a8 !important; }
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { background-color: var(--ce-surface-elevated); color: var(--ce-text); border-color: var(--ce-border); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder { color: #94a3ab; }
html[data-theme="dark"] details { background-color: var(--ce-surface-muted) !important; }
html[data-theme="dark"] button:focus-visible,
html[data-theme="dark"] a:focus-visible,
html[data-theme="dark"] input:focus-visible,
html[data-theme="dark"] textarea:focus-visible,
html[data-theme="dark"] select:focus-visible { outline: 2px solid var(--ce-focus); outline-offset: 2px; }

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

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

.investigation-card {
  animation: fadeIn 0.4s ease-out both;
}

.investigation-card:nth-child(2) {
  animation-delay: 0.08s;
}

.investigation-card:nth-child(3) {
  animation-delay: 0.16s;
}

/* ── CU skeleton overlay during synthesis refresh ─────────────── */

.cu-skeleton-overlay {
  pointer-events: none;
}

.cu-skeleton-lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: auto;
}

.cu-skeleton-line {
  height: 16px;
  border-radius: 8px;
  background-color: var(--ce-skeleton);
  position: relative;
  overflow: hidden;
}

/* Striped shimmer that travels left → right through each bar */
.cu-skeleton-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    105deg,
    transparent 0%,
    transparent 8px,
    rgba(255, 255, 255, 0.45) 8px,
    rgba(255, 255, 255, 0.45) 16px,
    transparent 16px,
    transparent 24px
  );
  animation: cuSkeletonShimmer 1.6s linear infinite;
}

@keyframes cuSkeletonShimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
  [style*="animation:spin"] {
    animation: none !important;
  }

  .investigation-card {
    animation: none;
  }

  .cu-skeleton-line::after {
    animation: none !important;
  }
}