/*
 * Run of Show theme bridge
 *
 * The page was originally ported from a light-only HTML prototype and still
 * contains inline porcelain/white values. This stylesheet is intentionally
 * scoped to the existing --ros-page root so those inline values can follow
 * Tablio's shared dark-mode tokens without affecting any other workspace.
 */

/* Match the centered Event Workspace command-console width. */
div[style*="--ros-page"] > [class~="max-w-[1480px]"] {
  width: 100%;
  max-width: 1400px !important;
}

.dark div[style*="--ros-page"] {
  --ros-surface: hsl(var(--card));
  --ros-surface-elevated: hsl(var(--popover));
  --ros-surface-muted: hsl(var(--muted) / 0.42);
  --ros-surface-subtle: hsl(var(--muted) / 0.22);
  --ros-border: hsl(var(--border));
  --ros-text: hsl(var(--foreground));
  --ros-text-muted: hsl(var(--muted-foreground));
  --ros-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.28);
  --ros-shadow-card: 0 18px 45px rgb(0 0 0 / 0.24);

  background: hsl(var(--background)) !important;
  color: var(--ros-text);
}

/* Main bounded workspace card and header. */
.dark div[style*="--ros-page"]
  > [class~="max-w-[1480px]"]
  > [class~="rounded-[16px]"] {
  background: var(--ros-surface) !important;
  border-color: var(--ros-border) !important;
  box-shadow: var(--ros-shadow-card) !important;
}

.dark div[style*="--ros-page"]
  > [class~="max-w-[1480px]"]
  > [class~="rounded-[16px]"]
  > header {
  background: linear-gradient(
    180deg,
    hsl(var(--card)),
    hsl(var(--card) / 0.94)
  ) !important;
  border-color: var(--ros-border) !important;
}

.dark div[style*="--ros-page"] h1,
.dark div[style*="--ros-page"] h2,
.dark div[style*="--ros-page"] h3,
.dark div[style*="--ros-page"] strong {
  color: var(--ros-text) !important;
}

.dark div[style*="--ros-page"] header p,
.dark div[style*="--ros-page"] header div[style*="text-transform: uppercase"] {
  color: var(--ros-text-muted) !important;
}

/* Header controls that were pinned to white/ink in the light prototype. */
.dark div[style*="--ros-page"] [data-testid="button-back-to-workspace"],
.dark div[style*="--ros-page"] [data-testid="button-from-template"],
.dark div[style*="--ros-page"] [data-testid="button-create-first"],
.dark div[style*="--ros-page"] [data-testid="button-select-event-empty"],
.dark div[style*="--ros-page"] [data-testid="button-close-drawer"],
.dark div[style*="--ros-page"] [data-testid="button-drawer-delete"] {
  background: var(--ros-surface-elevated) !important;
  border-color: var(--ros-border) !important;
  color: var(--ros-text) !important;
  box-shadow: var(--ros-shadow-sm) !important;
}

.dark div[style*="--ros-page"] [data-testid="button-select-event-layout"] {
  background: var(--ros-surface-elevated) !important;
  color: var(--ros-text) !important;
  border-top-color: var(--ros-border) !important;
  border-right-color: var(--ros-border) !important;
  border-bottom-color: var(--ros-border) !important;
  box-shadow: var(--ros-shadow-sm) !important;
}

/* Summary strip. */
.dark div[style*="--ros-page"] section[aria-label="Run of show summary"] {
  background: var(--ros-surface) !important;
  border-color: var(--ros-border) !important;
  box-shadow: var(--ros-shadow-sm) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show summary"] > div {
  border-color: var(--ros-border) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show summary"] > div:not(:last-child) > div:first-child {
  background: var(--ros-surface-muted) !important;
  border-color: var(--ros-border) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show summary"] > div:last-child > div:first-child {
  border-color: var(--ros-surface) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show summary"] span,
.dark div[style*="--ros-page"] section[aria-label="Run of show summary"] small {
  color: var(--ros-text-muted) !important;
}

/* Compact toolbar. */
.dark div[style*="--ros-page"] section[aria-label="Run of show controls"] > div,
.dark div[style*="--ros-page"] section[aria-label="Run of show controls"] > label,
.dark div[style*="--ros-page"] section[aria-label="Run of show controls"] > select,
.dark div[style*="--ros-page"] section[aria-label="Run of show controls"] > button {
  background: var(--ros-surface-elevated) !important;
  border-color: var(--ros-border) !important;
  color: var(--ros-text) !important;
  box-shadow: var(--ros-shadow-sm) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show controls"] span {
  color: var(--ros-text-muted) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show controls"] input {
  color: var(--ros-text) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show controls"] input::placeholder {
  color: var(--ros-text-muted) !important;
  opacity: 0.82;
}

/* Empty state and timeline shell. */
.dark div[style*="--ros-page"] [class~="dark:bg-card"] {
  background-color: var(--ros-surface) !important;
  border-color: var(--ros-border) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] {
  background: radial-gradient(
      circle at 0% 0%,
      rgb(139 92 246 / 0.08),
      transparent 34%
    ),
    var(--ros-surface) !important;
  border-color: var(--ros-border) !important;
  box-shadow: var(--ros-shadow-sm) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] article {
  background: var(--ros-surface-subtle) !important;
  border-color: var(--ros-border) !important;
  box-shadow: var(--ros-shadow-sm) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] article > div[aria-hidden="true"] {
  border-color: var(--ros-surface) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] article > div:nth-of-type(2) {
  border-color: var(--ros-border) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] article > div:nth-of-type(2) > div:first-child {
  background: rgb(139 92 246 / 0.14) !important;
  border-color: rgb(139 92 246 / 0.28) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] article p,
.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] article > div:nth-of-type(2) span {
  color: var(--ros-text-muted) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] article span[style*="height: 23px"],
.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] article span[style*="height: 26px"] {
  background: var(--ros-surface-muted) !important;
  border-color: var(--ros-border) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] article span[style*="height: 23px"] {
  color: var(--ros-text-muted) !important;
}

.dark div[style*="--ros-page"] section[aria-label="Run of show timeline"] article span[style*="height: 26px"]:has(svg) {
  color: var(--ros-text) !important;
}

.dark div[style*="--ros-page"] div:has(> [data-testid="button-create-first"]) p,
.dark div[style*="--ros-page"] div:has(> [data-testid="button-select-event-empty"]) p {
  color: var(--ros-text-muted) !important;
}

.dark div[style*="--ros-page"] [data-testid^="select-status-"],
.dark div[style*="--ros-page"] [data-testid^="button-edit-"],
.dark div[style*="--ros-page"] [data-testid^="button-more-"] {
  background: var(--ros-surface-elevated) !important;
  border-color: var(--ros-border) !important;
  color: var(--ros-text) !important;
  box-shadow: var(--ros-shadow-sm) !important;
}

.dark div[style*="--ros-page"] [data-testid="button-add-item-bottom"] {
  background: linear-gradient(
    180deg,
    hsl(var(--muted) / 0.34),
    hsl(var(--muted) / 0.2)
  ) !important;
  border-color: hsl(var(--border)) !important;
}

/* Detail drawer follows the same system card/popover tokens. */
.dark [data-testid="detail-drawer"] {
  background: var(--ros-surface-elevated, hsl(var(--popover))) !important;
  border-color: var(--ros-border, hsl(var(--border))) !important;
  color: var(--ros-text, hsl(var(--foreground))) !important;
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.38) !important;
}

.dark [data-testid="detail-drawer"] > div:first-child {
  background: radial-gradient(
      circle at 0% 0%,
      rgb(225 29 72 / 0.11),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      hsl(var(--popover)),
      hsl(var(--popover) / 0.96)
    ) !important;
  border-color: hsl(var(--border)) !important;
}

.dark [data-testid="detail-drawer"] > div:nth-child(2) > section {
  background: hsl(var(--card)) !important;
  border-color: hsl(var(--border)) !important;
  box-shadow: var(--ros-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.28)) !important;
}

.dark [data-testid="detail-drawer"] > div:nth-child(2) > section p,
.dark [data-testid="detail-drawer"] > div:first-child p {
  color: hsl(var(--muted-foreground)) !important;
}

.dark [data-testid="detail-drawer"] > div:nth-child(2) > section > div {
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

.dark [data-testid="detail-drawer"] > div:nth-child(2) > section span {
  color: hsl(var(--foreground)) !important;
}

.dark [data-testid="detail-drawer"] > div:last-child {
  background: hsl(var(--muted) / 0.34) !important;
  border-color: hsl(var(--border)) !important;
}

/* Keep native/shadcn fields aligned with the page when the drawer/editor opens. */
.dark [data-testid="dialog-ros-editor"] {
  background: hsl(var(--popover)) !important;
  border-color: hsl(var(--border)) !important;
  color: hsl(var(--foreground)) !important;
}