/**
 * CampMonitor — Custom CSS
 *
 * RULE: Only put styles here that CANNOT be expressed
 * with Tailwind utility classes or DaisyUI components.
 * Everything else must use Tailwind/DaisyUI in the markup.
 */

/* ═══════════════════════════════════════════════════════════
 * SORTABLE TABLE HEADERS
 * The sort indicator arrow is shown via ::after pseudo-element
 * because Tailwind can't do content generation.
 * The active column itself uses bg-neutral text-neutral-content
 * applied via JS (CM.hlSort).
 * ═══════════════════════════════════════════════════════════ */

 th[data-sort-dir]::after {
    font-size: 0.55rem;
    margin-left: 0.25rem;
  }
  th[data-sort-dir="asc"]::after {
    content: "▲";
  }
  th[data-sort-dir="desc"]::after {
    content: "▼";
  }
  
  /* ═══════════════════════════════════════════════════════════
   * QS DISTRIBUTION BAR
   * A 10-segment horizontal bar where each segment has a
   * specific color for Quality Score 1-10. Applied via
   * data-qs attribute in JS.
   * ═══════════════════════════════════════════════════════════ */
  
  .qs-bar-segment {
    font-weight: 600;
    font-size: 0.6rem;
    line-height: 22px;
    text-align: center;
    color: #fff;
    min-width: 3.5%;
  }
  
  .qs-bar-segment[data-qs="1"]  { background: #991b1b; }
  .qs-bar-segment[data-qs="2"]  { background: #dc2626; }
  .qs-bar-segment[data-qs="3"]  { background: #ef4444; }
  .qs-bar-segment[data-qs="4"]  { background: #f87171; }
  .qs-bar-segment[data-qs="5"]  { background: #fbbf24; }
  .qs-bar-segment[data-qs="6"]  { background: #f59e0b; }
  .qs-bar-segment[data-qs="7"]  { background: #d97706; }
  .qs-bar-segment[data-qs="8"]  { background: #16a34a; }
  .qs-bar-segment[data-qs="9"]  { background: #15803d; }
  .qs-bar-segment[data-qs="10"] { background: #166534; }
  
  /* ═══════════════════════════════════════════════════════════
   * AUDIT PROGRESS PULSE
   * Used on audit buttons while AI analysis is running.
   * ═══════════════════════════════════════════════════════════ */
  
  .pulse-glow {
    animation: cm-pulse 2s ease-in-out infinite;
  }
  
  @keyframes cm-pulse {
    0%, 100% { box-shadow: 0 0 0 0 oklch(var(--p) / 0.3); }
    50%      { box-shadow: 0 0 10px 3px oklch(var(--p) / 0.12); }
  }