/* ── Shared Badge System ────────────────────────────────
   Used by: AG Grid (link-grid.js), Web Archive (web_archive.erb),
            and any future view needing status/source badges.
   Colors use OKLCH color space for perceptual uniformity.
   ────────────────────────────────────────────────────── */

/* ── Status Badges (HTTP status codes) ─────────────────── */
.status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 0.3rem;
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-decoration: none !important;
    transition: filter 0.12s ease;
}

.status-badge:hover {
    filter: brightness(1.15);
    text-decoration: none !important;
}

.status-badge--pending {
    background: var(--color-base-100);
    color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, var(--color-base-300));
}

.status-badge--2xx {
    background: color-mix(in oklch, var(--color-success) 25%, var(--color-base-300));
    color: var(--color-success);
    border: 1px solid color-mix(in oklch, var(--color-success) 45%, var(--color-base-300));
}

.status-badge--3xx {
    background: color-mix(in oklch, var(--color-info) 25%, var(--color-base-300));
    color: var(--color-info);
    border: 1px solid color-mix(in oklch, var(--color-info) 45%, var(--color-base-300));
}

.status-badge--4xx {
    background: color-mix(in oklch, var(--color-warning) 25%, var(--color-base-300));
    color: var(--color-warning);
    border: 1px solid color-mix(in oklch, var(--color-warning) 45%, var(--color-base-300));
}

.status-badge--5xx {
    background: color-mix(in oklch, var(--color-error) 25%, var(--color-base-300));
    color: var(--color-error);
    border: 1px solid color-mix(in oklch, var(--color-error) 45%, var(--color-base-300));
}

.status-badge--unknown {
    background: var(--color-base-100);
    color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, var(--color-base-300));
}

/* ── Source Badges (Discover Type) ─────────────────────── */
.source-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.12rem 0.5rem;
    border-radius: 9999px;
    letter-spacing: 0.01em;
    line-height: 1.4;
}

/* Chart-aligned colors (see CLAUDE.md edge colors) */
.source-badge--referenced {
    background: color-mix(in oklch, var(--color-success) 25%, var(--color-base-300));
    color: var(--color-success);
    border: 1px solid color-mix(in oklch, var(--color-success) 45%, var(--color-base-300));
}

.source-badge--linked {
    background: color-mix(in oklch, var(--color-info) 25%, var(--color-base-300));
    color: var(--color-info);
    border: 1px solid color-mix(in oklch, var(--color-info) 45%, var(--color-base-300));
}

.source-badge--extracted {
    background: var(--color-base-100);
    color: color-mix(in oklch, var(--color-base-content) 65%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-base-content) 12%, var(--color-base-300));
}

.source-badge--deep-extracted {
    background: color-mix(in oklch, var(--color-secondary) 25%, var(--color-base-300));
    color: var(--color-secondary);
    border: 1px solid color-mix(in oklch, var(--color-secondary) 45%, var(--color-base-300));
}

.source-badge--scan-discovered {
    background: color-mix(in oklch, var(--color-warning) 25%, var(--color-base-300));
    color: var(--color-warning);
    border: 1px solid color-mix(in oklch, var(--color-warning) 45%, var(--color-base-300));
}

/* ── Source Badge Size Variants ───────────────────────── */
.source-badge--xs {
    font-size: 0.58rem;
    padding: 0.06rem 0.35rem;
}

/* ── Doc Type Icons ────────────────────────────────────── */
.doctype-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

.doctype-icon {
    display: inline-flex;
    align-items: center;
    opacity: 0.8;
    transition: opacity 0.12s ease;
}

.doctype-icon:hover {
    opacity: 1;
}

/* ── Action Badges (Vuln / Scan indicators) ──────────── */
.action-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.6rem;
    font-weight: 700;
    padding: 0.08rem 0.35rem;
    border-radius: 0.25rem;
    letter-spacing: 0.03em;
    line-height: 1.3;
    margin-right: 0.25rem;
    vertical-align: middle;
}

.action-badge--vuln {
    background: color-mix(in oklch, var(--color-error) 25%, var(--color-base-300));
    color: var(--color-error);
    border: 1px solid color-mix(in oklch, var(--color-error) 45%, var(--color-base-300));
}

.action-badge--scan {
    background: color-mix(in oklch, var(--color-warning) 25%, var(--color-base-300));
    color: var(--color-warning);
    border: 1px solid color-mix(in oklch, var(--color-warning) 45%, var(--color-base-300));
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ── URL Column Parts ──────────────────────────────────── */
.url-link {
    text-decoration: none !important;
    color: inherit !important;
}

.url-link:hover {
    text-decoration: underline !important;
    text-decoration-color: var(--color-info) !important;
}

.url-link:visited .url-host,
.url-link:visited .url-path {
    color: color-mix(in oklch, var(--color-base-content) 55%, transparent);
}

.url-link:visited .url-proto {
    color: color-mix(in oklch, var(--color-base-content) 45%, transparent);
}

/* 3-layer URL hierarchy: proto dim -> host info-blue -> path brightest (most readable) */
.url-proto {
    color: color-mix(in oklch, var(--color-base-content) 40%, transparent);
}

.url-host {
    color: var(--color-info);
}

.url-path {
    color: var(--color-base-content);
}

/* ═══════════════════════════════════════════════════════════════════════
   Phase 2a — Visual atoms (run-state pill + attr pill)
   Spec: docs/superpowers/specs/2026-06-03-phase2a-visual-atoms-design.md
   ═══════════════════════════════════════════════════════════════════════ */

/* Target/scan operational-state pill (Bolt StatusBadge port).
   Use via run_state_html(state, label:, compact:) view helper. */
.run-state {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  white-space: nowrap;
  vertical-align: middle;
}

.run-state__dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background: currentColor;
  flex-shrink: 0;
}

/* Phase 5 refactor — colors are bound to semantic --color-status-*-{bg,text}
   tokens (theme-aware) instead of color-mix on DaisyUI primaries. Token names
   originate in lib/view_helpers.rb RUN_STATE_CONFIG, defined in
   public/css/daisyui-themes.css. */
.run-state--running {
  color: var(--color-status-running-text);
  background: var(--color-status-running-bg);
}

.run-state--scheduled {
  color: var(--color-status-scheduled-text);
  background: var(--color-status-scheduled-bg);
}

.run-state--paused {
  color: var(--color-status-paused-text);
  background: var(--color-status-paused-bg);
  opacity: 0.85;
}

.run-state--completed {
  color: var(--color-status-completed-text);
  background: var(--color-status-completed-bg);
}

.run-state--ended-early {
  color: var(--color-status-ended-early-text);
  background: var(--color-status-completed-bg);
}

.run-state--stopped {
  color: var(--color-status-stopped-text);
  background: var(--color-status-stopped-bg);
}

.run-state--failed {
  color: var(--color-status-failed-text);
  background: var(--color-status-failed-bg);
}

/* Fallback for unknown / untrusted state values (run_state_html whitelist). */
.run-state--unknown {
  color: var(--color-text-muted);
  background: var(--color-status-stopped-bg);
  opacity: 0.6;
}

/* Pulse modifier on the dot — applied by helper when RUN_STATE_CONFIG[s][:pulse]
   is true. State-specific (currently only :running) instead of selector-bound. */
.run-state__dot--pulse {
  animation: badge-pulse 1.6s ease-in-out infinite;
}

/* Hairline divider — section separator. Pair with Tailwind's
   border-t / border-b / border-r / border. */
.divider-hairline {
  border-color: var(--color-border);
}

/* Chip token override — composed on DaisyUI .badge.
   Usage: <span class="badge badge-sm ud-chip">…</span>
   Phase 5 chip tokens give slate-700 outline + slate-400 text;
   pill radius matches Bolt AttrPill (DaisyUI .badge default is 8px). */
.ud-chip {
  background: var(--color-chip-bg);
  color: var(--color-chip-text);
  border-color: var(--color-chip-border);
  border-radius: 9999px;
}

/* SVG icon sizing inside .ud-chip — matches the prior .attr-pill__icon
   visual weight (10px) so icon scale stays consistent across migrations. */
.ud-chip svg {
  width: 0.625rem;
  height: 0.625rem;
  color: var(--color-chip-icon);
}

/* Card running-state shimmer overlay. Pure CSS — apply alongside any .card.
   Hover-lift and selected states are intentionally NOT custom classes;
   compose them with Tailwind utilities at the call site. */
.card-running {
  position: relative;
  overflow: hidden;
}
.card-running::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    105deg,
    transparent 40%,
    color-mix(in oklch, var(--color-primary) 4%, transparent) 50%,
    transparent 60%
  );
  animation: shimmer-sweep 3.5s ease-in-out infinite;
}

@keyframes shimmer-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* Brand-orange CTA — primary action button (Bolt header parity).
   Composed on top of DaisyUI's .btn so sizing utilities (btn-sm/xs) still apply.
   Color resolves to --color-primary (#FF402C in both ud-evening + ud-day). */
.btn-cta {
  background: var(--color-primary);
  color: var(--color-primary-content);
  border: 1px solid color-mix(in oklch, var(--color-primary) 50%, transparent);
  font-weight: 600;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 2px 8px color-mix(in oklch, var(--color-primary) 38%, transparent),
    0 1px 2px rgba(0,0,0,0.20);
  transition: filter 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
}
.btn-cta:hover {
  background: var(--color-primary);
  color: var(--color-primary-content);
  filter: brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.18) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset,
    0 4px 16px color-mix(in oklch, var(--color-primary) 48%, transparent),
    0 1px 3px rgba(0,0,0,0.24);
}
.btn-cta:active {
  transform: scale(0.98);
}

/* Input/select surface shell — slate input bg/border that reads as a layer
   above the substrate. Bound to Phase 5 --color-input-* tokens so theme
   switching is automatic. */
.ud-input {
  background: var(--color-input-bg);
  border-color: var(--color-input-border);
}

/* Card surface — bound to Phase 5 card tokens. */
.ud-card {
  background: var(--color-card-bg);
  border: 1px solid var(--color-card-border);
  border-radius: 16px;
  box-shadow: var(--color-card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.ud-card:hover {
  border-color: var(--color-card-hover-border);
  box-shadow: var(--color-card-hover-shadow);
  transform: translateY(-2px);
}

/* Logo placeholder — Bolt CompanyLogo: canvas bg + border token + soft
   shadow. Used for the project initials tile inside .ud-card. */
.ud-card-logo {
  background: var(--color-canvas);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Dashboard widget shell — Bolt DashboardPage "Widget" container. Distinct
   from .ud-card (project cards): static info panel, no hover-lift, tighter
   12px radius. Bound to --color-widget (a layer above the substrate). Border
   is intentional even though Bolt omits it: in ud-day both widget and page bg
   are near-white (#FFFFFF vs #F8FAFC), so a hairline is required for definition.
   Shares --color-card-shadow (no separate --color-widget-shadow token exists). */
.ud-widget {
  display: flex;
  flex-direction: column;
  background: var(--color-widget);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--color-card-shadow);
  overflow: hidden;
}

/* Widget header — title row with optional action zone on the right.
   Matches Bolt: px-5 py-4, bottom hairline, 18px/700 primary-text title. */
.ud-widget__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
}
.ud-widget__title {
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  /* Migrated views express the high-contrast tier via base-content (full
     opacity), not --color-text-primary — keep headings single-toned app-wide. */
  color: var(--color-base-content);
}

/* Dashboard data table — compact, hairline rows, substrate header. Composed on
   DaisyUI .table so table-xs sizing still applies; drop-in for widget bodies.
   Replaces the old per-card `table-zebra bg-base-100/80 backdrop-blur` + colored
   header idiom with a single token-bound look. */
.ud-table thead th {
  background: var(--color-substrate);
  color: color-mix(in oklch, var(--color-base-content) 50%, transparent);
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ud-table td,
.ud-table th { border-color: var(--color-border); }
.ud-table tbody tr.cursor-pointer:hover,
.ud-table tbody tr[onclick]:hover {
  background: color-mix(in oklch, var(--color-base-content) 4%, transparent);
}

/* Progress track — explicit slate so the unfilled portion of <progress>
   doesn't inherit DaisyUI progress-success/-primary tint. Value bar still
   picks color from the progress-success/-primary utility on the element.
   Element+class specificity beats DaisyUI's class-only rule — no !important. */
progress.ud-progress-track,
progress.ud-progress-track::-webkit-progress-bar {
  background-color: var(--color-progress-track);
  border-radius: 9999px;
}

/* Tailwind browser CDN (tailwindcss-browser.js) bakes its own default
   --font-mono onto :root and ignores the override in ud-tailwind.css's
   @theme block — verified empirically via getComputedStyle. So var(--font-mono)
   resolves to ui-monospace, not JetBrains Mono. Hardcode the stack here to
   route .font-mono through our self-hosted fonts.css declarations.
   (--font-sans escapes the same fate only because fonts.css sets html/body
   font-family and the cascade carries it.) */
.font-mono {
  font-family: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
}