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

@layer base {
      .view { @apply hidden; }
      .view.active { @apply block; }
      .config-panel { @apply hidden; }
      .config-panel.active { @apply block; }
      .troubleshoot-panel { @apply hidden; }
      .troubleshoot-panel.active { @apply block; }
      .secondary-panel { @apply hidden; }
      .secondary-panel.active { @apply block; }
      .is-hidden { @apply hidden; }
    }

    @layer components {
      .nav-link { @apply transition; }
      .nav-link.active { @apply bg-mint-500 text-white; }
      .brand-rad { font-weight: 900; }
      .brand-rest { font-weight: 500; }

      .card { @apply rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900; }
      .btn { @apply inline-flex items-center gap-2 rounded-xl bg-mint-500 px-3 py-2 text-sm font-semibold text-white hover:bg-mint-600; }
      .btn[disabled], .btn:disabled { @apply opacity-50; }
      .btn-secondary { @apply bg-zinc-800 text-zinc-100 hover:bg-zinc-700 dark:bg-zinc-800 dark:text-zinc-100 dark:hover:bg-zinc-700; }
      .btn-danger { @apply bg-rose-600 text-white hover:bg-rose-700; }
      .btn-success { @apply bg-emerald-600 text-white hover:bg-emerald-700; }
      .btn-fail { @apply bg-rose-600 text-white hover:bg-rose-700; }
      .btn-small { @apply rounded-lg px-2 py-1 text-xs min-w-[96px] justify-center; }
      .btn-row { @apply flex flex-wrap items-center gap-2; }

      .note { @apply text-xs text-zinc-500 dark:text-zinc-400; }
      .note.success { @apply text-emerald-700 dark:text-emerald-300; }
      .note.error { @apply text-rose-700 dark:text-rose-300; }
      .note.warning { @apply text-amber-700 dark:text-amber-300; }

      .chart-change { @apply text-xs text-zinc-500 dark:text-zinc-400; }
      .chart-change.positive { @apply text-emerald-700 dark:text-emerald-300; }
      .chart-change.negative { @apply text-rose-700 dark:text-rose-300; }
      .chart-change.neutral { @apply text-zinc-500 dark:text-zinc-400; }

      .grid-two { @apply grid gap-4 md:grid-cols-2; }
      .grid-three { @apply grid gap-4 md:grid-cols-3; }
      .list-with-aside { @apply grid gap-4 lg:grid-cols-[minmax(0,1fr)_260px]; }
      .list-with-preview-wide { @apply grid gap-4 lg:grid-cols-[minmax(0,420px)_minmax(0,1fr)]; }
      .list-with-actions { @apply grid gap-4 lg:grid-cols-[max-content_minmax(0,1fr)_220px]; }
      .stacked-list { @apply grid gap-4; }

      .content-wrapper { @apply space-y-6; }

      .table { @apply w-full min-w-full text-sm; border-spacing: 0 4px; border-collapse: separate; }
      .table thead { @apply bg-zinc-50 text-xs font-semibold text-zinc-600 dark:bg-zinc-950/30 dark:text-zinc-300; }
      .table tbody tr { @apply bg-white dark:bg-zinc-900; }
      .table tbody tr:nth-child(even) { @apply bg-zinc-50/40 dark:bg-zinc-800/30; }
      .table tbody tr[data-action="open"] { @apply cursor-pointer; }
      .table-clickable tbody tr { @apply cursor-pointer; }
      .table tbody tr[data-action="preview"] { @apply cursor-pointer; }
      .table td[data-action="copy"] { @apply cursor-copy text-zinc-700 dark:text-zinc-200; }
      .table td[data-action="copy"]:hover { @apply underline; }
      .table th { @apply px-4 py-3 text-left; }
      .table td { @apply px-4 py-3 align-top; }
      .table tbody tr:hover { @apply bg-zinc-50 dark:bg-zinc-800/40; }
      .table tbody tr.row-selected { @apply bg-emerald-500/10 text-emerald-900 dark:text-emerald-100; }
      .table-compact th { @apply px-3 py-2 text-xs; }
      .table-compact td { @apply px-3 py-2 text-xs; }
      .table-scroll { @apply overflow-x-auto rounded-2xl border border-zinc-200 dark:border-zinc-800; }
      .files-preview { @apply mt-3 rounded-2xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-950/30; }
      .file-uid { @apply text-xs text-zinc-500 dark:text-zinc-400 break-all; }
      .file-size { @apply text-right whitespace-nowrap; }
      .raw-log-view.modal-wrap { white-space: pre-wrap; word-break: break-word; overflow-x: hidden; }

      .filters-panel { @apply mt-4 rounded-2xl border border-zinc-200 bg-zinc-50 p-4 dark:border-zinc-800 dark:bg-zinc-950/30; }
      .filter-count { @apply text-xs text-zinc-500 dark:text-zinc-400; }
      .filter-status { @apply text-xs text-zinc-500 dark:text-zinc-400; }
      .filters-grid { @apply grid gap-3 md:grid-cols-2 lg:grid-cols-4; }
      .filter-group { @apply flex flex-col gap-2; }
      .filter-group label { @apply flex items-center gap-2 text-xs font-semibold text-zinc-600 dark:text-zinc-300; }
      .filter-group input { @apply w-full rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm outline-none focus:ring-2 focus:ring-mint-500/30 dark:border-zinc-800 dark:bg-zinc-900; }
      .filter-group select { @apply self-start w-auto rounded-xl border border-zinc-800 bg-zinc-900 px-3 py-2 text-sm text-zinc-200 outline-none focus:ring-2 focus:ring-mint-500/30; }
      .filters-actions { @apply mt-4 flex flex-wrap items-center justify-between gap-3; }

      .chip { @apply inline-flex items-center rounded-2xl border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200; }
      .chip.success { @apply border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800/60 dark:bg-emerald-900/20 dark:text-emerald-200; }
      .chip.info { @apply border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800/60 dark:bg-sky-900/20 dark:text-sky-200; }
      .chip.warning { @apply border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800/60 dark:bg-amber-900/20 dark:text-amber-200; }
      .chip.danger { @apply border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-800/60 dark:bg-rose-900/20 dark:text-rose-200; }
      .google-badge { @apply inline-flex h-5 w-5 items-center justify-center rounded-full border border-zinc-200 bg-white text-[10px] font-bold text-blue-600 dark:border-zinc-700 dark:bg-zinc-900; }
      .inline-chip { @apply inline-flex items-center rounded-full border border-zinc-200 bg-white px-2 py-0.5 text-[11px] font-semibold text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200; }
      .inline-chip-success { @apply border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800/60 dark:bg-emerald-900/20 dark:text-emerald-200; }
      .inline-chip-warning { @apply border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800/60 dark:bg-amber-900/20 dark:text-amber-amber-200; }
      .inline-chip-error { @apply border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-800/60 dark:bg-rose-900/20 dark:text-rose-200; }

      .connection-status { @apply inline-flex items-center justify-center rounded-2xl border border-zinc-200 bg-white p-2 text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200; }

      .form-row { @apply flex flex-col gap-2; }
      .form-label { @apply text-xs font-semibold text-zinc-600 dark:text-zinc-300; }
      .form-help { @apply text-xs text-zinc-400 dark:text-zinc-500; }
      .form-control { @apply inline-flex items-center rounded-xl border border-zinc-200 bg-white px-3 py-2 text-sm dark:border-zinc-800 dark:bg-zinc-900; }
      .form-control input,
      .form-control textarea { @apply w-full bg-transparent outline-none placeholder:text-zinc-400; }
      .form-control select { @apply w-auto appearance-none bg-transparent outline-none border-0 shadow-none; }
      .control-short { @apply max-w-[160px] w-full; }
      .control-medium { @apply max-w-[260px] w-full; }
      .control-wide { @apply w-full; }
      .control-fit { @apply w-fit self-start; }
      .pill-group { @apply inline-flex w-fit self-start items-center rounded-full border border-zinc-200 bg-white p-1 dark:border-zinc-800 dark:bg-zinc-900; }
      .pill { @apply whitespace-nowrap rounded-full px-3 py-1 text-xs font-semibold text-zinc-600 transition hover:text-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100; }
      .pill.active { @apply bg-mint-500 text-white shadow-sm; }
      .pill-group .pill + .pill { @apply ml-1; }
      .pill-set { @apply inline-flex w-fit flex-wrap items-center gap-2 self-start; }
      .pill-toggle { @apply inline-flex items-center rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-semibold text-zinc-600 transition hover:border-mint-500/60 hover:text-zinc-900 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-300 dark:hover:text-zinc-100; }
      .pill-toggle.active { @apply border-mint-500 bg-mint-500 text-white shadow-sm; }

      .config-shell { @apply grid gap-4 lg:grid-cols-[220px_1fr] items-start; }
      .config-nav { @apply flex flex-col gap-2 rounded-2xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-950/30; }
      .config-nav-item { @apply flex items-center gap-2 w-full rounded-xl px-3 py-2 text-left text-sm font-semibold text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800/60; }
      .config-nav-item.active { @apply bg-mint-500 text-white; }
      .nav-section-title { @apply px-2 pt-2 text-xs font-semibold tracking-wide text-zinc-500 uppercase; }
      .config-panel { @apply rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900; }
      .config-grid { @apply grid gap-3 sm:grid-cols-2 md:grid-cols-3; }
      .config-span-2 { @apply sm:col-span-2 md:col-span-2; }
      .config-span-3 { @apply sm:col-span-2 md:col-span-3; }
      .config-panels { @apply min-w-0; }
      .secondary-nav-item { @apply flex items-center gap-2 w-full rounded-xl px-3 py-2 text-left text-sm font-semibold text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800/60; }
      .secondary-nav-item.active { @apply bg-mint-500 text-white; }
      .secondary-panel { @apply rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900; }
      .secondary-panels { @apply min-w-0; }
      .troubleshoot-nav-item { @apply flex items-center gap-2 w-full rounded-xl px-3 py-2 text-left text-sm font-semibold text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-zinc-800/60; }
      .troubleshoot-nav-item.active { @apply bg-mint-500 text-white; }
      .troubleshoot-panel { @apply rounded-2xl border border-zinc-200 bg-white p-5 shadow-sm dark:border-zinc-800 dark:bg-zinc-900; }
      .troubleshoot-panels { @apply min-w-0; }
      .config-panel h3 { @apply flex items-center gap-2 mb-4; }
      .config-panel h3 + .note { @apply -mt-2 mb-4; }
      .card h2, .card h3 { @apply flex items-center gap-2; }
      .actions-panel { @apply rounded-2xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-950/30; }
      .view-shell { @apply rounded-2xl bg-white p-5 shadow-sm dark:bg-zinc-900; }

      .metric { @apply rounded-2xl border border-zinc-200 bg-zinc-50 p-3 text-sm dark:border-zinc-800 dark:bg-zinc-950/30; }
      .metric.compact { @apply w-fit; }
      .metric .label { @apply text-xs font-semibold text-zinc-500 dark:text-zinc-400; }
      .metric .value { @apply mt-1 text-lg font-semibold text-zinc-900 dark:text-zinc-100; }

      /* Modality Overrides */
      .modality-overrides-list { @apply space-y-2; }
      .modality-override-row {
        @apply flex flex-wrap items-center gap-2 rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-950/30;
      }
      .modality-override-row input {
        @apply h-8 rounded-lg border border-zinc-300 bg-white px-2 text-sm dark:border-zinc-700 dark:bg-zinc-800;
      }
      .modality-override-row input.modality-code {
        @apply w-16 font-mono uppercase;
      }
      .modality-override-row input.modality-value {
        @apply w-20;
      }
      .modality-override-row label {
        @apply text-xs text-zinc-500 dark:text-zinc-400;
      }
      .modality-override-field {
        @apply flex flex-col gap-1;
      }
      .modality-override-row .btn-icon {
        @apply ml-auto;
      }

      /* RadFuzion Network */
      .control-center-list { @apply space-y-2; }
      .control-center-row {
        @apply flex flex-wrap items-center gap-2 rounded-xl border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-800 dark:bg-zinc-950/30;
      }
      .control-center-row input {
        @apply h-8 rounded-lg border border-zinc-300 bg-white px-2 text-sm dark:border-zinc-700 dark:bg-zinc-800;
      }
      .control-center-row input.control-center-name { @apply w-40; }
      .control-center-row input.control-center-url { @apply w-64; }
      .control-center-row input.control-center-token { @apply w-44 font-mono; }
      .control-center-row label { @apply text-xs text-zinc-500 dark:text-zinc-400; }
      .control-center-field { @apply flex flex-col gap-1; }
      .control-center-row .btn-icon { @apply ml-auto; }
      .control-center-grid { @apply grid gap-4; }
      .control-center-meta { @apply flex flex-wrap items-center gap-2 text-xs text-zinc-500 dark:text-zinc-400; }
      .control-center-card { @apply rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900; }
      .control-center-table { @apply min-w-[1200px]; }
      .control-center-node { @apply flex flex-col gap-1; }
      .control-center-node .node-name { @apply font-semibold; }
      .control-center-node .node-meta { @apply text-xs text-zinc-500 dark:text-zinc-400; }
      .control-center-status { @apply flex flex-col gap-1; }
      .control-center-status .status-line { @apply flex items-center gap-2; }
      .control-center-status .status-meta { @apply text-[11px] text-zinc-500 dark:text-zinc-400; }
      .control-center-status .status-error { @apply text-[11px] text-rose-600 dark:text-rose-300; }
      .control-center-actions { @apply flex flex-wrap gap-2; }

      .progress-track { @apply h-2 w-full rounded-full bg-zinc-100 dark:bg-zinc-800; }
      .progress-fill { @apply h-2 rounded-full bg-mint-500; }

      /* Row progress - entire row fills with color based on status */
      .row-progress {
        position: relative;
        background: linear-gradient(to right,
          var(--row-progress-color, transparent) var(--row-progress, 0%),
          transparent var(--row-progress, 0%));
        transition: background 0.5s ease-out;
      }

      /* Pulsing animation for receiving status */
      @keyframes pulse-receiving {
        0%, 100% { background-color: rgba(56, 189, 248, 0.12); }
        50% { background-color: rgba(56, 189, 248, 0.28); }
      }
      .row-progress.status-receiving {
        --row-progress-color: transparent;
        animation: pulse-receiving 1.5s ease-in-out infinite;
      }

      .row-progress.status-forwarding { --row-progress-color: rgba(52, 211, 153, 0.28); }
      .row-progress.status-complete { --row-progress-color: rgba(52, 211, 153, 0.22); }
      .row-progress.status-waiting { --row-progress-color: rgba(251, 146, 60, 0.25); }
      .row-progress.status-failed { --row-progress-color: rgba(248, 113, 113, 0.25); }
      @media (prefers-color-scheme: dark) {
        @keyframes pulse-receiving-dark {
          0%, 100% { background-color: rgba(56, 189, 248, 0.10); }
          50% { background-color: rgba(56, 189, 248, 0.25); }
        }
        .row-progress.status-receiving { animation-name: pulse-receiving-dark; }
        .row-progress.status-forwarding { --row-progress-color: rgba(52, 211, 153, 0.25); }
        .row-progress.status-complete { --row-progress-color: rgba(52, 211, 153, 0.18); }
        .row-progress.status-waiting { --row-progress-color: rgba(251, 146, 60, 0.22); }
        .row-progress.status-failed { --row-progress-color: rgba(248, 113, 113, 0.22); }
      }
      html.dark .row-progress.status-receiving { animation-name: pulse-receiving-dark; }
      html.dark .row-progress.status-forwarding { --row-progress-color: rgba(52, 211, 153, 0.25); }
      html.dark .row-progress.status-complete { --row-progress-color: rgba(52, 211, 153, 0.18); }
      html.dark .row-progress.status-waiting { --row-progress-color: rgba(251, 146, 60, 0.22); }
      html.dark .row-progress.status-failed { --row-progress-color: rgba(248, 113, 113, 0.22); }

      .mobile-cards { @apply grid gap-3; }
      .mobile-card { @apply rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900; }
      .mobile-card.merged { @apply border-amber-200 bg-amber-50/60 dark:border-amber-800/60 dark:bg-amber-900/20; }
      .merged { @apply border-amber-200 bg-amber-50/60 dark:border-amber-800/60 dark:bg-amber-900/20; }
      .mobile-card-header { @apply flex items-center justify-between gap-2; }
      .mobile-card-accession { @apply text-sm font-semibold; }
      .mobile-card-body { @apply mt-2 grid gap-2; }
      .mobile-card-label { @apply text-xs text-zinc-500 dark:text-zinc-400; }
      .mobile-card-value { @apply text-sm font-semibold text-zinc-900 dark:text-zinc-100; }
      .mobile-card-actions { @apply mt-2 flex flex-wrap gap-2; }
      .mobile-card-field { @apply flex items-center justify-between; }

      .pagination-wrapper { @apply flex flex-wrap items-center justify-between gap-2; }
      .pagination-controls { @apply flex items-center gap-2; }
      .pagination-info { @apply text-xs text-zinc-500 dark:text-zinc-400; }
      .page-btn { @apply rounded-xl border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800; }
      .page-btn.active { @apply border-mint-500/40 bg-mint-500/10 text-mint-800 dark:text-mint-200; }
      .page-btn-disabled { @apply opacity-50 pointer-events-none; }
      .pagination-buttons { @apply flex flex-wrap items-center gap-1; }

      .rule-card { @apply rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900; }
      .rule-condition-row { @apply flex flex-wrap items-center gap-2; }
      .rule-tag { @apply w-fit rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs whitespace-nowrap dark:border-zinc-800 dark:bg-zinc-900; }
      .rule-operator { @apply w-fit rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs whitespace-nowrap dark:border-zinc-800 dark:bg-zinc-900; }
      .rule-value { @apply rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs dark:border-zinc-800 dark:bg-zinc-900; }
      .rule-value-wrapper { @apply inline-flex; }
      .rule-remove { @apply btn btn-secondary btn-small; }
      .rule-destination { @apply h-4 w-4 accent-mint-500; }

      .status-chip { @apply inline-flex items-center rounded-full border border-zinc-200 bg-white px-2 py-0.5 text-[11px] font-semibold text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200; }
      .status-chip.success { @apply border-emerald-200 bg-emerald-50 text-emerald-700 dark:border-emerald-800/60 dark:bg-emerald-900/20 dark:text-emerald-200; }
      .status-chip.info { @apply border-sky-200 bg-sky-50 text-sky-700 dark:border-sky-800/60 dark:bg-sky-900/20 dark:text-sky-200; }
      .status-chip.warning { @apply border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800/60 dark:bg-amber-900/20 dark:text-amber-200; }
      .status-chip.error { @apply border-rose-200 bg-rose-50 text-rose-700 dark:border-rose-800/60 dark:bg-rose-900/20 dark:text-rose-200; }
      .toggle-pill { @apply inline-flex items-center gap-2 rounded-full border border-zinc-200 bg-zinc-50 px-3 py-1 text-xs font-semibold text-zinc-700 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200; }
      .toggle-pill input { @apply h-4 w-4 accent-mint-500; }

      .copyable { @apply flex items-center justify-between gap-2 rounded-xl border border-zinc-200 bg-zinc-50 px-3 py-2 text-xs dark:border-zinc-800 dark:bg-zinc-950/30; }
      .copy-btn { @apply rounded-lg border border-zinc-200 bg-white px-2 py-1 text-[11px] font-semibold text-zinc-600 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800; }

      .empty-state { @apply rounded-2xl border border-dashed border-zinc-200 bg-zinc-50 p-6 text-center text-sm text-zinc-500 dark:border-zinc-800 dark:bg-zinc-950/30 dark:text-zinc-400; }

      .defaults-item { @apply rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900; }
      .defaults-item summary { @apply flex items-center justify-between cursor-pointer text-sm font-semibold text-zinc-700 dark:text-zinc-200; }
      .defaults-item summary::-webkit-details-marker { display: none; }
      .defaults-item[open] summary { @apply text-mint-700 dark:text-mint-200; }

      .method-chip { @apply inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-semibold uppercase tracking-wide; }
      .method-get { @apply bg-emerald-50 text-emerald-700 dark:bg-emerald-500/10 dark:text-emerald-200; }
      .method-post { @apply bg-sky-50 text-sky-700 dark:bg-sky-500/10 dark:text-sky-200; }
      .method-put { @apply bg-amber-50 text-amber-700 dark:bg-amber-500/10 dark:text-amber-200; }
      .method-delete { @apply bg-rose-50 text-rose-700 dark:bg-rose-500/10 dark:text-rose-200; }
      .method-hub { @apply bg-violet-50 text-violet-700 dark:bg-violet-500/10 dark:text-violet-200; }
      .api-path { @apply font-mono text-xs sm:text-sm text-zinc-800 dark:text-zinc-100; }
      .api-section-title { @apply text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400; }
      .api-detail-grid { @apply mt-3 grid gap-3 lg:grid-cols-3; }
      .api-kv { @apply rounded-xl border border-zinc-200 bg-zinc-50 p-3 text-xs text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950/30 dark:text-zinc-300; }
      .api-label { @apply text-[11px] font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400; }
      .api-field { @apply flex flex-wrap items-baseline gap-2 text-xs text-zinc-600 dark:text-zinc-300; }
      .api-field code { @apply text-[11px] text-zinc-900 dark:text-zinc-100; }
      .api-callout { @apply rounded-2xl border border-zinc-200 bg-zinc-50 p-4 text-xs text-zinc-600 dark:border-zinc-800 dark:bg-zinc-950/30 dark:text-zinc-300; }

      .timeline-track { @apply relative mt-3 space-y-4; }
      .timeline-item { @apply relative pl-11; }
      .timeline-line { @apply absolute left-3 top-10 bottom-0 w-px bg-zinc-200 dark:bg-zinc-800; }
      .timeline-item:last-child .timeline-line { @apply hidden; }
      .timeline-icon { @apply absolute left-0 top-2.5 flex h-7 w-7 items-center justify-center rounded-full border border-zinc-200 bg-white text-zinc-600 shadow-sm dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-300; }
      .timeline-icon .material-symbols-outlined { font-size: 16px; }
      .timeline-content { @apply rounded-2xl border border-zinc-200 bg-zinc-50 p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-950/40; }
      .timeline-header { @apply flex items-center gap-2 text-sm font-semibold text-zinc-700 dark:text-zinc-200; }
      .timeline-header .material-symbols-outlined { font-size: 18px; }
      .timeline-title-row { @apply flex flex-wrap items-center justify-between gap-2; }
      .timeline-title { @apply text-sm font-semibold text-zinc-800 dark:text-zinc-100; }
      .timeline-time { @apply text-xs text-zinc-500 dark:text-zinc-400; }
      .timeline-description { @apply mt-1 text-xs text-zinc-500 dark:text-zinc-400; }
      .timeline-item.completed .timeline-icon { @apply bg-mint-500 text-white border-mint-500; }
      .timeline-item.completed .timeline-line { @apply bg-mint-200 dark:bg-mint-800/70; }
      .timeline-item.active .timeline-icon { @apply bg-amber-500 text-white border-amber-500 ring-4 ring-amber-500/20; }
      .timeline-item.active .timeline-content { @apply border-amber-200 bg-amber-50/50 dark:border-amber-800/60 dark:bg-amber-900/20; }
      .timeline-item.failed .timeline-icon { @apply bg-rose-500 text-white border-rose-500; }
      .timeline-item.failed .timeline-line { @apply bg-rose-200 dark:bg-rose-800/70; }
      .timeline-item.failed .timeline-content { @apply border-rose-200 bg-rose-50/50 dark:border-rose-800/60 dark:bg-rose-900/20; }
      .status-timeline { @apply mt-4; }

      .series-card { @apply rounded-2xl border border-zinc-200 bg-white p-4 shadow-sm dark:border-zinc-800 dark:bg-zinc-900; }
      .series-header { @apply flex items-center justify-between gap-2; }
      .series-title { @apply text-sm font-semibold; }
      .instance-list { @apply mt-3 space-y-2; }
      .instance-row { @apply rounded-xl border border-zinc-200 bg-zinc-50 p-3 text-xs dark:border-zinc-800 dark:bg-zinc-950/30; }
      .tag-table { @apply w-full text-xs; }
      .row-merged { @apply bg-amber-50/50 dark:bg-amber-900/20; }
      .event-row-failed { @apply bg-rose-50/70 dark:bg-rose-900/20; }
      .event-row-complete { @apply bg-emerald-50/70 dark:bg-emerald-900/20; }
      .event-row-received { @apply bg-sky-50/70 dark:bg-sky-900/20; }

      .query-select { @apply h-4 w-4 accent-mint-500; }
      .config-form { @apply space-y-4; }
      .dense-grid { @apply grid gap-3 md:grid-cols-2 lg:grid-cols-3; }
      .sortable { @apply cursor-pointer select-none; }
      .sort-icon { @apply text-zinc-400; }
      .sort-order { @apply text-[10px] text-zinc-400; }
      .sortable.sorted { @apply text-mint-700 dark:text-mint-200; }
      .progress-label { @apply text-xs text-zinc-500 dark:text-zinc-400; }

      .modal { @apply fixed inset-0 z-50 hidden items-center justify-center bg-zinc-950/40 backdrop-blur-sm p-4; }
      .modal.open { @apply flex; }
      .modal-card { @apply w-full max-w-3xl max-h-[calc(100vh-2rem)] overflow-y-auto rounded-2xl border border-zinc-200 bg-white p-5 shadow-soft dark:border-zinc-800 dark:bg-zinc-900; }
      .modal-close { @apply rounded-xl border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-700 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800; }

    .toast-container { @apply flex w-full max-w-[520px] flex-col items-stretch; }
      .toast { @apply flex items-start gap-2 rounded-2xl border border-zinc-200 bg-white px-3 py-2 text-sm shadow-soft transition dark:border-zinc-800 dark:bg-zinc-900; }
      .toast .toast-icon { @apply mt-0.5 text-lg; }
      .toast-content { @apply min-w-0 flex-1; }
      .toast .toast-title { @apply text-sm font-semibold; }
      .toast .toast-message { @apply text-xs text-zinc-500 dark:text-zinc-400; }
      .toast-message { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
      .toast .toast-close { @apply ml-2 rounded-lg border border-zinc-200 bg-white px-2 py-1 text-xs font-semibold text-zinc-600 hover:bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-900 dark:text-zinc-200 dark:hover:bg-zinc-800; }
      .toast.success { @apply border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-800/60 dark:bg-emerald-900/20 dark:text-emerald-200; }
      .toast.error { @apply border-rose-200 bg-rose-50 text-rose-800 dark:border-rose-800/60 dark:bg-rose-900/20 dark:text-rose-200; }
      .toast.warning { @apply border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-800/60 dark:bg-amber-900/20 dark:text-amber-200; }
      .toast.info { @apply border-sky-200 bg-sky-50 text-sky-800 dark:border-sky-800/60 dark:bg-sky-900/20 dark:text-sky-200; }
    .toast.removing { @apply opacity-0 translate-y-2; }
    .toast-slot { position: relative; }
    .toast-slot .toast-container {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
      .raw-log-view { @apply mt-4 max-h-[55vh] overflow-auto rounded-2xl border border-zinc-200 bg-zinc-950 p-4 font-mono text-xs leading-5 text-zinc-100 dark:border-zinc-800; white-space: pre-wrap; word-break: break-word; }
      .rule-destinations-scroll { @apply max-h-64 overflow-y-auto pr-2; }

      .context-menu { @apply absolute z-[70] hidden min-w-[180px] rounded-xl border border-zinc-200 bg-white p-2 text-sm shadow-soft dark:border-zinc-800 dark:bg-zinc-900; }
      .context-menu-item { @apply flex cursor-pointer items-center gap-2 rounded-lg px-2 py-2 text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800; }
      .context-menu-divider { @apply my-1 border-t border-zinc-200 dark:border-zinc-800; }
      .context-menu-danger { @apply text-rose-600 dark:text-rose-300; }

      .dropdown-menu { @apply absolute right-0 top-full z-50 mt-2 w-56 rounded-2xl border border-zinc-200 bg-white p-2 shadow-soft dark:border-zinc-800 dark:bg-zinc-900; }
      .dropdown-item { @apply flex w-full items-center gap-2 rounded-xl px-3 py-2 text-sm font-semibold text-zinc-700 hover:bg-zinc-100 dark:text-zinc-200 dark:hover:bg-zinc-800; }

      /* Selectable items - replaces checkboxes with click-to-select */
      .selectable-pill { @apply inline-flex cursor-pointer items-center gap-2 rounded-xl border border-zinc-200 bg-white px-3 py-2 text-xs font-semibold text-zinc-600 transition-all hover:border-zinc-300 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-300 dark:hover:border-zinc-600; }
      .selectable-pill.selected { @apply border-mint-500 bg-mint-500/10 text-mint-700 dark:border-mint-500 dark:bg-mint-500/15 dark:text-mint-300; }
      .selectable-pill .check-icon { @apply hidden text-mint-500; }
      .selectable-pill.selected .check-icon { @apply inline; }

      /* Config toggle - two-option pill group for boolean settings */
      .config-toggle { @apply inline-flex w-fit self-start items-center rounded-xl border border-zinc-200 bg-white p-1 dark:border-zinc-700 dark:bg-zinc-800; }
      .config-toggle-option { @apply cursor-pointer whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-semibold text-zinc-500 transition hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-200; }
      .config-toggle-option.active { @apply bg-mint-500 text-white shadow-sm; }

      .selectable-row { @apply cursor-pointer transition-colors; }
      .selectable-row:hover { @apply bg-zinc-50 dark:bg-zinc-800/40; }
      .selectable-row.selected { @apply bg-emerald-500/25 dark:bg-emerald-500/30; }
      .selectable-row.selected:hover { @apply bg-emerald-500/35 dark:bg-emerald-500/40; }
      .row-select-indicator { @apply h-2 w-2 rounded-full bg-zinc-300 dark:bg-zinc-600; }
      .selectable-row.selected .row-select-indicator { @apply bg-emerald-500; }
    }