/* ==========================================================================
   Castnews Index — shadcn/ui primitives (plain CSS mirror)
   Source of truth: castnews-index/src/components/ui/*.tsx
   ----------------------------------------------------------------------------
   The production app composes shadcn components via Tailwind utility classes.
   These specimens use plain HTML, so we replicate each component's SHAPE and
   STATE here, keyed on the same `data-slot` attributes Tailwind emits. This
   means markup in specimens mirrors what developers write in the codebase:

       <button data-slot="button" data-variant="default" data-size="default">…

   Depends on colors_and_type.css for tokens.
   ========================================================================== */

/* ---------- BUTTON (src/components/ui/button.tsx) ---------- */
/* Variants: default | outline | secondary | ghost | destructive | link
   Sizes:    default(h-8) | xs(h-6) | sm(h-7) | lg(h-9) | icon(32) | icon-xs | icon-sm | icon-lg */

[data-slot="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
  height: 32px; padding: 0 10px;
  border: 1px solid transparent;
  background-clip: padding-box;
  border-radius: var(--radius-lg);
  font: 500 14px/1 var(--font-sans);
  white-space: nowrap;
  transition: background-color 150ms var(--ease-standard),
              color 150ms var(--ease-standard),
              box-shadow 150ms var(--ease-standard),
              transform 80ms var(--ease-standard);
  cursor: pointer;
  user-select: none;
  outline: none;
}
[data-slot="button"]:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
[data-slot="button"][aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
}
[data-slot="button"][disabled],
[data-slot="button"][aria-disabled="true"] {
  pointer-events: none;
  opacity: 0.5;
}
[data-slot="button"]:not([aria-haspopup]):active { transform: translateY(1px); }
[data-slot="button"] svg {
  width: 16px; height: 16px;
  flex-shrink: 0;
  pointer-events: none;
}

/* Sizes */
[data-slot="button"][data-size="xs"]  { height: 24px; padding: 0 8px;  font-size: 12px; border-radius: 10px; gap: 4px; }
[data-slot="button"][data-size="xs"] svg  { width: 12px; height: 12px; }
[data-slot="button"][data-size="sm"]  { height: 28px; padding: 0 10px; font-size: 12.8px; border-radius: 12px; gap: 4px; }
[data-slot="button"][data-size="sm"] svg  { width: 14px; height: 14px; }
[data-slot="button"][data-size="lg"]  { height: 36px; padding: 0 10px; }
[data-slot="button"][data-size="icon"]     { width: 32px; padding: 0; }
[data-slot="button"][data-size="icon-xs"]  { width: 24px; height: 24px; padding: 0; border-radius: 10px; }
[data-slot="button"][data-size="icon-xs"] svg { width: 12px; height: 12px; }
[data-slot="button"][data-size="icon-sm"]  { width: 28px; height: 28px; padding: 0; border-radius: 12px; }
[data-slot="button"][data-size="icon-lg"]  { width: 36px; height: 36px; padding: 0; }

/* Variants */
[data-slot="button"][data-variant="default"] {
  background: var(--primary);
  color: var(--primary-foreground);
}
[data-slot="button"][data-variant="default"]:hover {
  background: color-mix(in srgb, var(--primary) 85%, black);
}
[data-slot="button"][data-variant="outline"] {
  background: var(--background);
  border-color: var(--border);
  color: var(--foreground);
}
[data-slot="button"][data-variant="outline"]:hover,
[data-slot="button"][data-variant="outline"][aria-expanded="true"] {
  background: var(--muted);
}
[data-slot="button"][data-variant="secondary"] {
  background: var(--secondary);
  color: var(--secondary-foreground);
}
[data-slot="button"][data-variant="secondary"]:hover {
  background: color-mix(in srgb, var(--secondary) 80%, black 0%);
  filter: brightness(0.97);
}
[data-slot="button"][data-variant="ghost"] {
  background: transparent;
  color: var(--foreground);
}
[data-slot="button"][data-variant="ghost"]:hover,
[data-slot="button"][data-variant="ghost"][aria-expanded="true"] {
  background: var(--muted);
}
[data-slot="button"][data-variant="destructive"] {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
[data-slot="button"][data-variant="destructive"]:hover {
  background: color-mix(in srgb, var(--destructive) 20%, transparent);
}
[data-slot="button"][data-variant="destructive"]:focus-visible {
  border-color: color-mix(in srgb, var(--destructive) 40%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
}
[data-slot="button"][data-variant="link"] {
  background: transparent;
  color: var(--primary);
  padding: 0;
  height: auto;
  border-radius: 0;
  text-underline-offset: 4px;
}
[data-slot="button"][data-variant="link"]:hover { text-decoration: underline; }

/* ---------- BADGE (src/components/ui/badge.tsx) ---------- */
/* Variants: default | secondary | destructive | outline | ghost | link */

[data-slot="badge"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 20px;
  width: fit-content;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 9999px;
  font: 500 12px/1 var(--font-sans);
  white-space: nowrap;
  transition: background-color 120ms var(--ease-standard), color 120ms;
  overflow: hidden;
}
[data-slot="badge"] > svg { width: 12px !important; height: 12px !important; }
[data-slot="badge"][data-variant="default"] {
  background: var(--primary); color: var(--primary-foreground);
}
[data-slot="badge"][data-variant="secondary"] {
  background: var(--secondary); color: var(--secondary-foreground);
}
[data-slot="badge"][data-variant="destructive"] {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
  color: var(--destructive);
}
[data-slot="badge"][data-variant="outline"] {
  border-color: var(--border); color: var(--foreground);
}
[data-slot="badge"][data-variant="ghost"] { color: var(--muted-foreground); }
[data-slot="badge"][data-variant="ghost"]:hover { background: var(--muted); color: var(--foreground); }
[data-slot="badge"][data-variant="link"] { color: var(--primary); text-underline-offset: 4px; }
[data-slot="badge"][data-variant="link"]:hover { text-decoration: underline; }

/* ---------- CARD (src/components/ui/card.tsx) ---------- */
/* Size: default | sm */

[data-slot="card"] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--card);
  color: var(--foreground);
  padding: 16px 0; /* py-4 — px is on header/content */
  font-size: 14px;
  box-shadow: inset 0 0 0 1px var(--card-ring-color);
}
[data-slot="card"][data-size="sm"] { gap: 12px; padding: 12px 0; }
[data-slot="card-header"] {
  display: grid;
  grid-auto-rows: min-content;
  align-items: start;
  gap: 4px;
  padding: 0 16px;
}
[data-slot="card"][data-size="sm"] [data-slot="card-header"] { padding: 0 12px; }
[data-slot="card-header"]:has([data-slot="card-action"]) {
  grid-template-columns: 1fr auto;
}
[data-slot="card-title"] {
  font: 500 16px/1.35 var(--font-sans);
}
[data-slot="card"][data-size="sm"] [data-slot="card-title"] { font-size: 14px; }
[data-slot="card-description"] {
  font-size: 14px; line-height: 1.45;
  color: var(--muted-foreground);
}
[data-slot="card-action"] {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  justify-self: end;
}
[data-slot="card-content"] {
  padding: 0 16px;
}
[data-slot="card"][data-size="sm"] [data-slot="card-content"] { padding: 0 12px; }
[data-slot="card-footer"] {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--border);
  background: color-mix(in srgb, var(--muted) 50%, transparent);
  padding: 16px;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
[data-slot="card"][data-size="sm"] [data-slot="card-footer"] { padding: 12px; }
/* Cards that hold a footer get no bottom padding (footer bleeds to edge) */
[data-slot="card"]:has([data-slot="card-footer"]) { padding-bottom: 0; }
/* Cards with a leading image get no top padding so the image touches the edge */
[data-slot="card"]:has(> img:first-child) { padding-top: 0; }

/* ---------- TABS (src/components/ui/tabs.tsx) ---------- */
/* Variants: default (pill on muted) | line (underline) */

[data-slot="tabs"] {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
[data-slot="tabs-list"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: fit-content;
  height: 32px;
  padding: 3px;
  border-radius: var(--radius-lg);
  background: var(--muted);
  color: var(--muted-foreground);
}
[data-slot="tabs-list"][data-variant="line"] {
  background: transparent;
  padding: 0;
  gap: 4px;
  border-radius: 0;
  border-bottom: 1px solid var(--border);
  height: auto;
}
[data-slot="tabs-trigger"] {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: calc(100% - 1px);
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  background: transparent;
  color: color-mix(in srgb, var(--foreground) 60%, transparent);
  font: 500 14px/1 var(--font-sans);
  cursor: pointer;
  transition: all 150ms var(--ease-standard);
  white-space: nowrap;
}
[data-slot="tabs-trigger"]:hover { color: var(--foreground); }
[data-slot="tabs-trigger"][data-active="true"] {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}
[data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"] {
  padding: 8px 12px;
  border-radius: 0;
}
[data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"][data-active="true"] {
  background: transparent;
  box-shadow: none;
}
[data-slot="tabs-list"][data-variant="line"] [data-slot="tabs-trigger"][data-active="true"]::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--foreground);
}
[data-slot="tabs-panel"] { outline: none; }

/* ---------- INPUT (src/components/ui/input.tsx) ---------- */

[data-slot="input"] {
  display: block;
  height: 32px;
  width: 100%;
  min-width: 0;
  padding: 4px 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-lg);
  background: transparent;
  color: var(--foreground);
  font: 400 14px/1 var(--font-sans);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
}
[data-slot="input"]::placeholder { color: var(--muted-foreground); }
[data-slot="input"]:focus-visible {
  border-color: var(--ring);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 50%, transparent);
}
[data-slot="input"][aria-invalid="true"] {
  border-color: var(--destructive);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--destructive) 20%, transparent);
}
[data-slot="input"][disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; }

/* ---------- LABEL (src/components/ui/label.tsx) ---------- */
[data-slot="label"] {
  display: inline-flex; align-items: center; gap: 4px;
  font: 500 14px/1 var(--font-sans);
  color: var(--foreground);
}

/* ---------- TABLE (src/components/ui/table.tsx) ---------- */

[data-slot="table-container"] { position: relative; width: 100%; overflow-x: auto; }
[data-slot="table"] { width: 100%; caption-side: bottom; font-size: 14px; border-collapse: collapse; }
[data-slot="table-header"] tr { border-bottom: 1px solid var(--border); }
[data-slot="table-body"] tr:last-child { border-bottom: 0; }
[data-slot="table-footer"] { border-top: 1px solid var(--border); background: color-mix(in srgb, var(--muted) 50%, transparent); font-weight: 500; }
[data-slot="table-row"] { border-bottom: 1px solid var(--border); transition: background 120ms; }
[data-slot="table-row"]:hover, [data-slot="table-row"][data-state="selected"] {
  background: color-mix(in srgb, var(--muted) 50%, transparent);
}
[data-slot="table-head"] {
  height: 40px; padding: 0 8px;
  text-align: left; vertical-align: middle;
  font: 500 14px/1 var(--font-sans);
  color: var(--foreground);
  white-space: nowrap;
}
[data-slot="table-cell"] {
  padding: 8px; vertical-align: middle;
  white-space: nowrap;
}
[data-slot="table-caption"] {
  margin-top: 16px;
  font-size: 14px; color: var(--muted-foreground);
}

/* ---------- SEPARATOR (src/components/ui/separator.tsx) ---------- */
[data-slot="separator"] {
  background: var(--border);
  flex-shrink: 0;
}
[data-slot="separator"][data-orientation="horizontal"] { height: 1px; width: 100%; }
[data-slot="separator"][data-orientation="vertical"]   { width: 1px; height: 100%; }

/* ---------- SKELETON (src/components/ui/skeleton.tsx) ---------- */
[data-slot="skeleton"] {
  display: block;
  background: var(--muted);
  border-radius: var(--radius-md);
  animation: cn-pulse 1.6s var(--ease-standard) infinite;
}
@keyframes cn-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* ---------- DIALOG / SHEET surfaces ---------- */

[data-slot="dialog-overlay"],
[data-slot="sheet-overlay"] {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
[data-slot="dialog-content"] {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 50;
  display: grid; gap: 16px;
  width: calc(100% - 32px);
  max-width: 384px;
  padding: 16px;
  border-radius: var(--radius-xl);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: inset 0 0 0 1px var(--card-ring-color), var(--shadow-lg);
  font-size: 14px;
}
[data-slot="dialog-title"]       { font: 500 16px/1 var(--font-sans); color: var(--foreground); }
[data-slot="dialog-description"] { font-size: 14px; color: var(--muted-foreground); }
[data-slot="dialog-header"]      { display: flex; flex-direction: column; gap: 8px; }
[data-slot="dialog-footer"] {
  margin: 0 -16px -16px;
  padding: 16px;
  display: flex; justify-content: flex-end; gap: 8px;
  border-top: 1px solid var(--border);
  background: var(--accent);
  color: var(--accent-foreground);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* Sheet */
[data-slot="sheet-content"] {
  position: fixed; z-index: 50;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--popover); color: var(--popover-foreground);
  box-shadow: var(--shadow-lg);
  transition: transform 200ms var(--ease-standard), opacity 200ms;
}
[data-slot="sheet-content"][data-side="right"]  { top: 0; right: 0; height: 100%; width: 75%; max-width: 384px; border-left: 1px solid var(--border); }
[data-slot="sheet-content"][data-side="left"]   { top: 0; left: 0;  height: 100%; width: 75%; max-width: 384px; border-right: 1px solid var(--border); }
[data-slot="sheet-content"][data-side="top"]    { top: 0; left: 0; right: 0; border-bottom: 1px solid var(--border); }
[data-slot="sheet-content"][data-side="bottom"] { bottom: 0; left: 0; right: 0; border-top: 1px solid var(--border); }
[data-slot="sheet-header"] { display: flex; flex-direction: column; gap: 2px; padding: 16px; }
[data-slot="sheet-footer"] { margin-top: auto; display: flex; flex-direction: column; gap: 8px; padding: 16px; }
[data-slot="sheet-title"] { font: 500 16px/1 var(--font-sans); color: var(--foreground); }
[data-slot="sheet-description"] { font-size: 14px; color: var(--muted-foreground); }

/* ---------- DROPDOWN MENU (src/components/ui/dropdown-menu.tsx) ---------- */
[data-slot="dropdown-menu-content"],
[data-slot="dropdown-menu-sub-content"] {
  z-index: 50;
  min-width: 128px;
  padding: 4px;
  border-radius: var(--radius-lg);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow: inset 0 0 0 1px var(--card-ring-color), var(--shadow-md);
  overflow: hidden;
}
[data-slot="dropdown-menu-label"] {
  display: block;
  padding: 4px 6px;
  font: 500 12px/1.3 var(--font-sans);
  color: var(--muted-foreground);
}
[data-slot="dropdown-menu-separator"] {
  height: 1px;
  margin: 4px -4px;
  background: var(--border);
}
[data-slot="dropdown-menu-item"] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  color: var(--foreground);
  cursor: default;
  user-select: none;
  outline: none;
}
[data-slot="dropdown-menu-item"]:hover,
[data-slot="dropdown-menu-item"][data-highlighted] {
  background: var(--accent);
  color: var(--accent-foreground);
}
[data-slot="dropdown-menu-item"][data-variant="destructive"] {
  color: var(--destructive);
}
[data-slot="dropdown-menu-item"][data-variant="destructive"]:hover {
  background: color-mix(in srgb, var(--destructive) 10%, transparent);
}
[data-slot="dropdown-menu-shortcut"] {
  margin-left: auto;
  font-size: 12px; letter-spacing: 0.1em;
  color: var(--muted-foreground);
}

/* ---------- TOOLTIP (src/components/ui/tooltip.tsx, inferred from base-ui) ---------- */
[data-slot="tooltip-content"] {
  z-index: 50;
  padding: 6px 10px;
  border-radius: var(--radius-md);
  background: var(--foreground);
  color: var(--background);
  font: 500 12px/1.3 var(--font-sans);
  box-shadow: var(--shadow-md);
  max-width: 240px;
}

/* ---------- ALERT (src/components/ui/alert.tsx) ---------- */
[data-slot="alert"] {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 10px;
  align-items: start;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px var(--card-ring-color);
  background: var(--card);
  font-size: 14px;
}
[data-slot="alert"][data-variant="destructive"] {
  color: var(--destructive);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--destructive) 40%, transparent);
  background: color-mix(in srgb, var(--destructive) 5%, var(--card));
}
[data-slot="alert-title"] { font: 500 14px/1.3 var(--font-sans); }
[data-slot="alert-description"] { color: var(--muted-foreground); grid-column: 2; }
[data-slot="alert"][data-variant="destructive"] [data-slot="alert-description"] {
  color: color-mix(in srgb, var(--destructive) 80%, black);
}

/* ---------- AVATAR (src/components/ui/avatar.tsx) ---------- */
[data-slot="avatar"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9999px;
  background: var(--muted);
  color: var(--foreground);
  font: 600 12px/1 var(--font-sans);
  overflow: hidden;
  flex-shrink: 0;
}
[data-slot="avatar"] img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- BREADCRUMB (src/components/ui/breadcrumb.tsx) ---------- */
[data-slot="breadcrumb"] { font-size: 14px; color: var(--muted-foreground); }
[data-slot="breadcrumb-list"] {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  list-style: none; padding: 0; margin: 0;
}
[data-slot="breadcrumb-link"] {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 120ms;
}
[data-slot="breadcrumb-link"]:hover { color: var(--foreground); }
[data-slot="breadcrumb-page"] { color: var(--foreground); font-weight: 500; }
[data-slot="breadcrumb-separator"] { color: var(--muted-foreground); display: inline-flex; }
[data-slot="breadcrumb-separator"] svg { width: 14px; height: 14px; }

/* ---------- RANGE helpers used by specimens ---------- */
.cn-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}