/* ============================================================
   @bubbleye-ai/copilot-ui — bundled stylesheet

   Every class in this file is prefixed with `copilot-` so a
   consumer's global stylesheet can't accidentally collide. Import
   ONCE in your app root:

       import "@bubbleye-ai/copilot-ui/styles.css";

   ============================================================ */

/* ---- StandardSpinner ----------------------------------------- */
.copilot-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e3f2fd;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: copilot-spin 1s linear infinite;
  box-sizing: border-box;
}

.copilot-spinner-block {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: #007bff;
}

.copilot-spinner-block span {
  font-size: 0.9rem;
  font-weight: 500;
}

@keyframes copilot-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- TargetBadge --------------------------------------------- */
.copilot-target-badge {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #ced4da;
  background: #f8f9fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex: 0 0 auto;
}

/* ---- StatusToggle -------------------------------------------- */
.permission-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}

.permission-toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #d1d5db;
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.permission-toggle input:checked + .toggle-slider { background-color: #10b981; }
.permission-toggle input:checked + .toggle-slider:before { transform: translateX(20px); }
.permission-toggle input:disabled + .toggle-slider { opacity: 0.5; cursor: not-allowed; }

/* Compact variant — used by panel status cells so the toggle doesn't
   dominate the row. Same colours/behaviour, ~30% smaller. */
.permission-toggle.permission-toggle--sm { width: 30px; height: 16px; }
.permission-toggle--sm .toggle-slider { border-radius: 16px; }
.permission-toggle--sm .toggle-slider:before {
  height: 12px; width: 12px; left: 2px; bottom: 2px;
}
.permission-toggle--sm input:checked + .toggle-slider:before {
  transform: translateX(14px);
}

.bubbleye-tag-cloud-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  user-select: none;
}

.bubbleye-tag-cloud-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
  transition:
    transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.22s ease,
    opacity 0.2s ease;
}

.bubbleye-tag-cloud-item:hover {
  transform: scale(1.1);
  filter: brightness(1.3) drop-shadow(0 0 10px rgba(15, 23, 42, 0.15));
  z-index: 999;
}

.bubbleye-tag-cloud-item-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  line-height: 1;
}

.bubbleye-tag-cloud-tooltip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-bottom: 8px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  background: rgba(15, 23, 42, 0.98);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.35);
  color: #cbd5e1;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  line-height: 1.45;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  white-space: pre;
  z-index: 1000;
}

.bubbleye-tag-cloud-item:hover .bubbleye-tag-cloud-tooltip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ── CalendarTimestamp (mini calendar chip) ──────────────────────────
 * Blue spine with the month reading upward; day digits on white; soft
 * shadow. Theme via:
 *   --copilot-cal-accent  spine background   (default #0d6efd)
 *   --copilot-cal-day     day digit color    (default #1e40af)
 */
.cal-ts {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 5px;
  white-space: nowrap;
}
/* The time is PLAIN text: several copilots carry a legacy global
 * `time { }` chip rule (gray background, 600 weight) that this <time>
 * element would inherit - neutralize it here so the iconic form always
 * renders the time at standard size/weight with no background. */
time.cal-ts-time {
  background: none;
  padding: 0;
  border-radius: 0;
  font-weight: 400;
  font-size: inherit;
  color: inherit;
}
.cal-chip {
  display: inline-flex;
  align-items: stretch;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(16, 44, 84, 0.18);
  flex: none;
}
.cal-chip-mon {
  writing-mode: vertical-rl;
  transform: rotate(180deg); /* month reads upward */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 11px;
  background: var(--copilot-cal-accent, #0d6efd);
  color: #fff;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.cal-chip-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 15px;
  padding: 0 4px;
  background: #fff;
  color: var(--copilot-cal-day, #1e40af);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
/*
 * meta-port.css
 * Ported from MetaAssetManager/ProductionMetaUploader/presentation/web/src/App.css
 * Subset: global base, progress-header, header-logo, header-flow, flow-cta,
 *         flow-landing, user-menu, panel-buttons, progress-step, .btn, .app
 * Adapted for Google Creative Copilot (slice-2).
 */

/* ─── Base ─────────────────────────────────────────────────────────────── */

body {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  background: #f8f9fa;
}

body.admin {
  background: #c9ccd0;
}

/* Admin-only content (raw/diagnostic error strings, admin controls) is
   hidden from standard users entirely and revealed only for admins, who
   get the `admin` body class from useCurrentUser. Scoping the hide to
   `body:not(.admin)` leaves the element's natural/author display intact
   for admins (no display:revert guesswork). Fails closed: until
   /api/auth/me resolves, body has no `admin` class so nothing leaks. */
body:not(.admin) .admin-only {
  display: none !important;
}

.admin-only:not(.user-management-flow .admin-only) {
  border: dashed 2px fuchsia !important;
  background: #ffccff !important;
  color: purple !important;
}

/* Demo mode (presentation/recording) hides the loud admin-only raw-error
   boxes so an admin can screen-share a clean UI. Keyed off the `demo`
   body class set by DemoModeContext; orthogonal to the `admin` class. */
body.demo .admin-only {
  display: none !important;
}

p { margin:0; }

.admin-route-shell {
  max-width: calc(100vw - 50px);
  margin: 0 auto;
  padding: 24px;
}

.admin-route-shell__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.admin-route-shell__title {
  margin: 0;
  color: #495057;
  font-size: 28px;
  font-weight: 700;
}

.admin-route-shell__subtitle {
  margin: 8px 0 0;
  color: #6c757d;
  font-size: 13px;
}

.admin-route-shell__nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-route-shell__nav-link {
  color: #495057;
  text-decoration: none;
  border: 1px solid #dee2e6;
  border-radius: 999px;
  padding: 8px 14px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
}

.admin-route-shell__nav-link.active {
  background: #e7f1ff;
  border-color: #9ec5fe;
  color: #0d6efd;
}

.section-container {
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 8px;
  padding: 18px;
}

.user-management-content {
}

.table-container {
  overflow: auto;
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.user-management-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.user-management-table th {
  background: #f9fafb;
  padding: 12px 8px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.user-management-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}

.user-management-table tbody tr:hover {
  background: #f9fafb;
}

.user-cell {
  min-width: 120px;
}

.user-cell .user-id {
  font-size: 11px;
  color: #6b7280;
  font-family: monospace;
  margin-top: 4px;
}

/* ─── App shell ─────────────────────────────────────────────────────────── */

.app {
  height: calc(100vh - 58px);
  padding-top: 58px; /* Space for fixed header */
  display: flex;
  flex-direction: column;
}

/* ─── Progress / App Header ─────────────────────────────────────────────── */

.progress-header {
  background: white;
  border-bottom: 1px solid #e9ecef;
  padding: 8px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 60px;
  z-index: 20;
  position: fixed;
  top: 0;
  width: 100%;
  box-sizing: border-box;
}

/* ─── View-as (support delegation) banner ───────────────────────────────── */

.view-as-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 38px;
  z-index: 30; /* above .progress-header (20) */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 16px;
  background: #7c3aed; /* violet — distinct from any normal app chrome */
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
.view-as-bar__text {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.view-as-bar__by {
  opacity: 0.85;
}
.view-as-bar__stop {
  flex: none;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  border-radius: 6px;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.view-as-bar__stop:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* When delegated, drop the header + page content by the 38px banner height. */
body.view-as-active .progress-header {
  top: 38px;
}
body.view-as-active .app {
  padding-top: 96px; /* 58 + 38 */
  height: calc(100vh - 96px);
}

.admin .progress-header {
  background-color: #333;
  border-bottom-color: #444;
}

.admin .progress-header img {
  filter: brightness(0) invert(1);
}

/* Temporary brand swap — keep the wordmark legible against the dark
   admin header background. Revert when the legacy logo comes back. */
.admin .header-wordmark { color: #ffffff !important; }

#header-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: 24px;
  position: relative;
}

.header-logo-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #212529;
}

.header-logo-image {
  height: 42px;
  width: auto;
  display: block;
}

.header-logo-subtitle {
  color: #6c757d;
  font-size: 14px;
}

.maintenance-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: #007bff;
}

.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e3f2fd;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.maintenance-spinner span {
  font-size: 0.9rem;
  font-weight: 500;
}

.header-logo-badge {
  color: #007bff;
  font-size: 11px;
  font-weight: 500;
  background: #e7f3ff;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid #b3d9ff;
}

.header-logo-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.header-flow-toggle {
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.header-flow-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 160px;
  white-space: nowrap;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 40;
}

.header-flow-menu-item {
  width: 100%;
  justify-content: flex-start;
  background: transparent;
  border: none;
  color: #212529;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 13px;
}

.header-flow-menu-item:hover {
  background: #f1f3f5;
}

/* ─── Progress Steps ─────────────────────────────────────────────────────── */

#progress-steps {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.progress-step {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.progress-step.completed {
  background: #d4edda;
  color: #155724;
}

.progress-step.active {
  background: #007bff;
  color: white;
}

.progress-step.pending {
  background: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
}

.progress-step:hover:not(.pending) {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-step-spacer {
  width: 18px;
  height: 1px;
  background: #dee2e6;
  margin: 0 6px;
}

.progress-step.clickable {
  cursor: pointer;
}

.progress-step.blocked {
  cursor: not-allowed;
}

.progress-step-active-dot {
  width: 8px;
  height: 8px;
  background: currentColor;
  border-radius: 50%;
}

/* ─── Panel Buttons (right side of header) ───────────────────────────────── */

.panel-buttons {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-right: 60px;
}

.panel-button {
  position: relative;
  align-items: center;
  display: flex;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  cursor: pointer;
  width: 44px;
  height: 36px;
  transition: width 0.25s ease-out, filter 0.35s ease;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
  background-color: white;
  justify-content: center;
}

.panel-button.hasCrown {
  width: 55px;
}

.panel-button.hasCrown .fa-crown {
  margin-left: 3px;
}

.panel-button .fa-solid,
.user-menu .fa-solid {
  color: #666;
}

.panel-button:hover,
.panel-button:focus-visible {
  width: 120px;
  gap: 5px;
  justify-content: flex-start;
  filter: brightness(90%) contrast(105%);
}

.panel-button.hasCrown:hover,
.panel-button.hasCrown:focus-visible {
  width: 135px;
}

.panel-button span:not(.panel-button-count) {
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  width: 0;
  overflow: hidden;
}

.panel-button-count {
  line-height: 22px;
  position: absolute;
  top: -6px;
  right: -6px;
  background-color: #2c6cd5;
  color: #fff;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid white;
  opacity: 0.9;
  text-align: center;
}

.panel-button:hover span:not(.panel-button-count),
.panel-button:focus-visible span:not(.panel-button-count) {
  opacity: 1;
  transform: translateX(0);
  width: auto;
}

/* ─── User Menu ─────────────────────────────────────────────────────────── */

.user-menu {
  position: absolute;
  right: 20px;
  display: inline-flex;
  align-items: center;
}

.user-menu .icon-button {
  width: 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.user-menu .icon-button.btn-sm {
  width: 40px;
  height: 40px;
}

.user-menu .icon-button div {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.user-menu-dropdown {
  position: absolute;
  top: 50px;
  right: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  min-width: 200px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 8px;
  z-index: 20;
}

.user-menu-dropdown .btn {
  display: flex;
  width: 100%;
  gap: 8px;
  margin-top: 6px;
  text-align: left;
}

.user-menu-username {
  color: #374151;
  padding: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid #f1f3f5;
  word-break: break-word;
}

.user-menu-identity-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.user-menu-tenant-name {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
}

.admin-badge {
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 700;
  border-radius: 8px;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.user-menu-logout {
  width: 100%;
}

.user-menu-section { border-top:1px solid #e2e8f0; margin-top:4px; padding-top:4px; }
.user-menu-section-label { font-size:10.5px; font-weight:800; letter-spacing:.5px; color:#94a3b8;
  text-transform:uppercase; padding:8px 14px 4px; }
.user-menu-hint { font-size:11px; color:#94a3b8; padding:2px 14px 8px; }

.user-menu-account-row {
  display: flex;
  align-items: stretch;
  width: 100%;
  border-left: solid 4px transparent;
  border-radius: 0;
}

.user-menu-account-row.active {
  background: #e0f0ff;
  border-left: solid 4px #007bff;
  border-radius: 0;
}

.user-menu-account-switch {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: transparent;
  text-align: left;
  cursor: pointer;
  padding: 8px 8px 8px 10px;
  font-family: inherit;
  font-size: 13px;
  color: #212529;
}

.user-menu-account-switch[aria-current="true"] {
  cursor: default;
}

.user-menu-account-row.active .user-menu-account-name {
  font-weight: 700;
}

.user-menu-provider-line {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 11px;
  color: #64748b;
}

.user-menu-provider-status {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

.user-menu-provider-status.ok i {
  color: #16a34a;
}

.user-menu-provider-status.missing i {
  color: #dc2626;
}

.user-menu-provider-dot {
  color: #94a3b8;
}

.user-menu-account-settings {
  flex: 0 0 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: #64748b;
  cursor: pointer;
  padding: 0;
}

.user-menu-account-settings:hover {
  background: #e2e8f0;
  color: #1a73e8;
}

.avatar-upload-container {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
}

.avatar-preview {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  border: 1px solid #dee2e6;
  background: #f8f9fa center/cover no-repeat;
  flex: 0 0 auto;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.35s ease;
}

.btn:hover {
  filter: brightness(90%) contrast(105%);
}

.btn-sm {
  padding: 4px 6px !important;
  font-size: unset;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.btn-secondary:hover:not(:disabled) {
  background: #545b62;
}

.btn-outline {
  border: solid 1px #ccc;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn.btn-round {
  border-radius: 50%;
}

/* Segmented button group — joins adjacent .btn into one control
   (e.g. "+ Local Files" + "N recently uploaded"). */
.btn-group {
  display: inline-flex;
  align-items: stretch;
}
.btn-group > .btn {
  border-radius: 0;
}
.btn-group > .btn:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.btn-group > .btn:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.btn-group > .btn:not(:first-child) {
  margin-left: -1px;
}
.btn-group > .btn:hover:not(:disabled) {
  position: relative;
  z-index: 1;
}

/* ─── Flow Canvas ────────────────────────────────────────────────────────── */

.flow-canvas {
  flex: 1;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding: 24px;
  gap: 24px;
  /* Allow programmatic scroll without CSS override */
  -webkit-overflow-scrolling: touch;
}

/* Workflow Mode Toggle */
.workflow-mode-toggle-container {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  background: #14161a;
  border: 1px solid #2b3038;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  z-index: 1050;
}

.workflow-mode-toggle {
  border: none;
  background: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font: inherit;
  padding: 8px 20px;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  color: #e6f6ff;
  height: 36px;
}

.workflow-mode-toggle:hover {
  background: rgba(255,255,255,0.06);
}

.workflow-mode-label {
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s ease, font-weight 0.2s ease;
  white-space: nowrap;
  color: #bfe7ff;
}

.workflow-mode-label.active {
  font-weight: 600;
  color: #7dd3fc;
}

.workflow-mode-switch-track {
  width: 40px;
  height: 20px;
  border-radius: 999px;
  background: #2b3038;
  border: 1px solid #3a414c;
  position: relative;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.workflow-mode-switch-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #f8fafc;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

/* Automated mode active state */
.workFlow-mode .workflow-mode-switch-track {
  background: #0f2a2d;
  border-color: #1e3a3f;
}

.workFlow-mode .workflow-mode-switch-thumb {
  background: #22d3ee;
  transform: translateX(20px);
}

body.workFlow-mode #root {
  --workflow-border-angle: 0deg;
  box-sizing: border-box;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

@property --workflow-border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body.workFlow-mode #root::before {
  animation: workflow-mode-border-angle 8s linear infinite;
  background: conic-gradient(
    from var(--workflow-border-angle),
    red,
    #ff7f00,
    #ff0,
    #0f0,
    #00f,
    indigo,
    #9400d3,
    red
  );
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
}

body.workFlow-mode .app {
  background: #c9ccd0;
  position: relative;
  z-index: 1;
}

body.workFlow-mode .app.flow-create {
  background: #f8f9fa;
  border-radius: 15px;
  box-shadow: inset 1px 1px 10px 10px #ccc;
  height: calc(100vh - 74px);
  margin: 8px;
}

body.workFlow-mode .app.flow-create .progress-header {
  top: 7px;
  width: calc(100% - 16px);
  border-radius: 15px 15px 0 0;
}

@keyframes workflow-mode-border-angle {
  from {
    --workflow-border-angle: 0deg;
  }
  to {
    --workflow-border-angle: 360deg;
  }
}

.workflow-mode-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #22d3ee;
  border: 2px solid #14161a;
  animation: pulse 2s infinite;
}

.workflows-panel-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px 12px;
}

.workflows-table th,
.workflows-table td {
  vertical-align: top;
}

.workflow-expand-button {
  align-items: center;
  background: transparent;
  border: 0;
  color: #888;
  cursor: pointer;
  display: inline-flex;
  height: 24px;
  justify-content: center;
  padding: 0;
  width: 24px;
}

.muted-small {
  color: #6c757d;
  font-size: 11px;
  line-height: 1.35;
}

.workflow-type-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  white-space: nowrap;
}

.workflow-type-badge--upload {
  background: #2c7be5;
  color: #fff;
}

.workflow-status-pill {
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  background: #f8fafc;
  color: #475569;
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
}

.workflow-status-pill--active {
  border-color: #86efac;
  background: #dcfce7;
  color: #166534;
}

.workflow-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workflow-runs-table {
  display: grid;
  gap: 8px;
}

.workflow-detail {
  display: grid;
  gap: 14px;
}

.workflow-detail-section {
  display: grid;
  gap: 8px;
}

.workflow-detail-section-header {
  align-items: center;
  display: flex;
  gap: 8px;
  justify-content: space-between;
}

.workflow-detail-section-header h4 {
  font-size: 13px;
  margin: 0;
}

.workflow-detail-header-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.workflow-config-list {
  margin: 0;
  padding-left: 18px;
}

.workflow-config-list li {
  font-size: 12px;
  line-height: 1.55;
}

.workflow-config-form {
  align-items: end;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.workflow-config-form label,
.workflow-file-type-field {
  color: #555;
  display: grid;
  font-size: 12px;
  gap: 4px;
}

.workflow-inline-field {
  align-items: center;
  display: flex;
  gap: 6px;
}

.workflow-inline-field input {
  max-width: 90px;
}

.workflow-file-type-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workflow-config-folder-item {
  align-items: center;
  display: flex;
  gap: 6px;
}

.workflow-aspect-ratio-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.workflow-aspect-ratio-badge {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 12px;
  font-weight: 700;
  gap: 6px;
  line-height: 1.2;
  padding: 6px 10px;
}

.workflow-aspect-ratio-badge:hover {
  border-color: #60a5fa;
  color: #1d4ed8;
}

.workflow-aspect-ratio-badge--active {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
}

.workflow-checkbox-field {
  align-items: center;
  display: flex !important;
  gap: 6px !important;
}

.workflow-config-actions {
  align-items: center;
  display: flex;
  gap: 8px;
}

.workflow-past-runs table {
  margin-top: 0;
}

.workflows-panel .table-row-selected {
  background: rgba(40, 167, 69, 0.1);
}

.workflow-editor-card {
  border-top: 1px solid rgba(15, 23, 42, 0.12);
  display: grid;
  gap: 10px;
  margin: 0 16px 16px;
  padding-top: 12px;
}

.workflow-files-rules {
  display: grid;
  gap: 16px;
}

.workflow-files-rules__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.workflow-files-rules__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.workflow-files-inline-filters {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, auto);
}

.workflow-files-inline-filter-field {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: max-content minmax(120px, 1fr) max-content;
  min-width: 0;
}

.workflow-files-inline-filter-field:first-child {
  grid-template-columns: max-content minmax(180px, 1fr);
}

.workflow-files-inline-filter-field > span:first-child {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.workflow-files-rules .form-field {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.workflow-files-rules .form-field > span {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.workflow-files-rules__types {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.workflow-file-type-chip {
  align-items: center;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  color: #334155;
  cursor: pointer;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 8px;
  padding: 8px 13px;
}

.workflow-file-type-chip:hover {
  border-color: #60a5fa;
  color: #1d4ed8;
}

.workflow-file-type-chip--selected {
  background: #eff6ff;
  border-color: #2563eb;
  color: #1d4ed8;
}

.workflow-files-summary,
.workflow-preview-card {
  align-items: flex-start;
  border-radius: 8px;
  color: #475569;
  display: flex;
  gap: 10px;
  padding: 10px 12px;
}

.workflow-files-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.workflow-preview-card {
  background: #fffbe6;
  border: 1px solid #f1c40f;
  display: flex;
  font-size: 12px;
  line-height: 1.45;
  flex-direction: column;
}

.upload-recap-summary {
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
  margin: 10px 0;
}

.workflow-preview-file-list {
  display: grid;
  gap: 4px;
  list-style: none;
  margin: 2px 0 0;
  padding: 0;
}

.workflow-preview-section {
  display: grid;
  gap: 4px;
  margin-top: 8px;
}

.workflow-preview-section-title {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.workflow-preview-file-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 16px minmax(0, 1fr);
  min-width: 0;
}

.workflow-preview-file-row > i {
  color: #334155;
  font-size: 13px;
  justify-self: center;
}

.workflow-preview-file-name {
  min-width: 0;
}

/* Long, space-less filenames must wrap, not push a horizontal scrollbar
   into the recap columns (which only scroll vertically). */
.workflow-preview-file-list file {
  word-break: break-all;
}

.workflow-preview-file-reason {
  grid-column: 2;
  min-width: 0;
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.workflow-preview-file-row--selectable {
  grid-template-columns: 16px 16px minmax(0, 1fr);
}

.workflow-preview-file-reason--error {
  color: #c92a2a;
}

.workflow-preview-file-row--dropped {
  opacity: 0.62;
}

/* ─── Upload-only recap: two full-height, independently-scrolling columns ── */
/* !important overrides the broad `.step-body > *:not(.data-table)` rule that
   forces flex-shrink:0 on step children — the columns must fill the body. */
.upload-recap-columns {
  display: flex;
  gap: 16px;
  flex: 1 1 auto !important;
  min-height: 0;
}

.upload-recap-col {
  flex: 1 1 0;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.upload-recap-col-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
  border-radius: 8px 8px 0 0;
  font-size: 13px;
  font-weight: 700;
  color: #334155;
}

.upload-recap-col-header > i {
  color: #5f6368;
}

.upload-recap-col-count {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: #5f6368;
  font-weight: 600;
}

.upload-recap-col-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 14px;
}

/* One light-yellow card per skip reason, stacked vertically. */
.upload-recap-skip-group {
  margin-bottom: 10px;
}

.upload-recap-skip-group:last-child {
  margin-bottom: 0;
}

.upload-recap-skip-group > .workflow-preview-file-reason {
  font-weight: 700;
  margin-bottom: 2px;
}

.upload-button-icon {
  margin-right: 6px;
}

.workflow-simulation-modal {
  max-width: 520px;
  width: min(520px, calc(100vw - 32px));
}

.workflow-simulation-file-list {
  display: grid;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.workflow-simulation-file-row {
  align-items: center;
  display: grid;
  gap: 8px;
  grid-template-columns: 18px minmax(0, 1fr);
}

.workflow-simulation-file-row > i {
  color: #334155;
  font-size: 14px;
  justify-self: center;
}

.workflow-trigger-rules {
  display: grid;
  gap: 16px;
}

.workflow-trigger-form {
  align-items: start;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.workflow-trigger-name-field {
  grid-column: 1 / -1;
}

.workflow-trigger-schedule-row {
  align-items: end;
  display: grid;
  gap: 14px;
  grid-column: 1 / -1;
  grid-template-columns: minmax(160px, 220px) minmax(190px, 1fr);
}

.workflow-trigger-schedule-row .form-field,
.workflow-trigger-name-field {
  display: grid;
  gap: 6px;
}

.workflow-trigger-schedule-row .form-field > span,
.workflow-trigger-name-field > span {
  color: #334155;
  font-size: 12px;
  font-weight: 700;
}

.workflow-trigger-checkboxes {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  grid-column: 1 / -1;
}

.workflow-checkbox-row {
  align-items: center;
  color: #334155;
  display: inline-flex;
  font-size: 13px;
  font-weight: 700;
  gap: 7px;
}

@media (max-width: 900px) {
  .workflow-files-inline-filters,
  .workflow-files-rules__grid,
  .workflow-files-rules__grid--three {
    grid-template-columns: 1fr;
  }

  .workflow-files-inline-filter-field,
  .workflow-files-inline-filter-field:first-child {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .workflow-trigger-form,
  .workflow-trigger-schedule-row {
    grid-template-columns: 1fr;
  }
}

.flow-canvas::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.flow-canvas::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 10px;
}

.flow-canvas::-webkit-scrollbar-thumb:hover {
  background: #333;
}

/* ─── Step Column (infinite-canvas column wrapper) ───────────────────────── */

/*
 * Each revealed step occupies its own column in the horizontal canvas.
 * The inner .wizard-step card fills the column completely.
 * Matches Meta's .step-column pattern from FlowCanvas / StepColumn.tsx.
 */
.step-column {
  min-width: 1100px;
  max-width: 1100px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  min-height: 200px;
  max-height: calc(100vh - 130px);
  opacity: 0.7;
  transition: opacity 0.3s ease;
  scroll-snap-align: center;
  overflow: hidden;
}

.step-column.active {
  opacity: 1 !important;
  box-shadow: 0 4px 16px rgba(0, 123, 255, 0.2);
  border: 2px solid #007bff;
}

.flow-canvas .step-column:not(.active) {
  opacity: .5 !important;
  transform: scale(0.9);
}

.flow-monitor .step-column {
  max-height: calc(100vh - 80px);
}

.step-column.completed {
}

/* (`.wizard-step` middle container removed — step components now emit
 *  .step-header / .step-body / .step-footer as direct children of
 *  .step-column, matching MetaAssetManager's StepColumn structure.)
 */

/* ─── Flow Landing (Home page) ───────────────────────────────────────────── */

.flow-landing {
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.flow-landing-inner {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

/* ─── Flow CTA Buttons (round home buttons) ──────────────────────────────── */

.flow-cta {
  width: 220px;
  height: 220px;
  border-radius: 999px;
  border: 2px solid #dee2e6;
  background: #ffffff;
  color: #212529;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  font-family: inherit;
  font-size: inherit;
  box-sizing: border-box;
}

.flow-cta:hover:not(:disabled) {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
  border-color: #007bff;
}

.flow-cta:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.flow-cta-title {
  font-size: 20px;
  font-weight: 700;
}

.flow-cta-desc {
  color: #6c757d;
  line-height: 1.4;
  font-size: 12px;
}

/* Badge shown on disabled CTA */
.flow-cta-badge {
  display: inline-block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 600;
  color: #6c757d;
  background: #f1f3f5;
  border: 1px solid #dee2e6;
  border-radius: 999px;
  padding: 2px 8px;
  letter-spacing: 0.03em;
}

/* ─── App root wrapper ───────────────────────────────────────────────────── */

#root > * {
  /* Ensure the outermost app element accounts for the fixed header */
}

/* ─── Global base reset for all form elements ────────────────────────────── */

button, input, select, textarea {
  font-family: 'Manrope', sans-serif;
}

/* ─── Form controls ─────────────────────────────────────────────────────── */

.form-group {
  margin-bottom: 16px;
}

.form-sm {
  padding: 4px 6px !important;
  font-size: unset;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 500;
  font-size: 14px;
  color: #495057;
}

.form-control {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: white;
  /* Include padding+border in the width so `width:100%` inputs (e.g. the stacked
     Notifications fields) don't overflow their container. */
  box-sizing: border-box;
}

/* Native <select> — swap the OS-default arrow for a consistent 12px chevron so
   it matches the custom TargetSelect dropdown (same size, colour, position)
   across the app instead of each browser rendering its own. */
select.form-control {
  appearance: none;
  -webkit-appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%236c757d'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 9px;
  padding-right: 30px;
}

/* `.form-sm`'s `padding: … !important` beats the rule above, leaving no
   room for the chevron — compact selects rendered with no arrow at all. */
select.form-control.form-sm {
  padding-right: 30px !important;
}

.form-control:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

/* ─── Setup wizard layout ───────────────────────────────────────────────── */

.setup-flow {
  width: 75vw;
  min-width: 680px;
  max-width: 1200px;
  margin: 24px auto;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.setup-header {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "title button dashboard"
    "tagline tagline tagline";
  align-items: center;
  gap: 8px 16px;
  margin-bottom: 16px;
}
.setup-header h1 { grid-area: title; margin: 0; }
.setup-header p  { grid-area: tagline; margin: 0; }

.setup-close-button {
  grid-area: dashboard;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* ─── <time> chip — Meta port ─────────────────────────────────────────── */
/* formatTimestamp() wraps the UTC label in <time dateTime=ISO>; this rule
 * gives that wrapper Meta's monospace-ish chip appearance so dates pop
 * out of surrounding text consistently across surfaces. */
time {
  background-color: #e9ecef;
  color: #495057;
  padding: 2px 4px;
  border-radius: 4px;
  font-size: inherit;
  font-weight: 600;
}

/* ─── Target badge (3-letter product chip) — Meta port ─────────────────── */
/* Same dimensions + typography as Meta's .target-badge so the JobsPanel
 * column lines up identically. The colour is set inline by TargetBadge
 * via stringToHslColor on the target's stable id-or-name key. */
.target-badge {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: 1px solid #ced4da;
  background: #f8f9fa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.setup-layout {
  display: grid;
  min-height: 400px;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}

.setup-nav {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  border: 1px solid #e9ecef;
  border-radius: 10px;
  background: #f8f9fa;
}

.setup-nav-link {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #495057;
  padding: 9px 10px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}

.setup-nav-link:hover {
  background: #eef2f6;
}

.setup-nav-link.active {
  border-left: solid 4px #0d6efd;
  color: #0d6efd;
  border-radius: unset;
  font-weight: 600;
  transform: translateX(-12px);
  width: 100%;
  /*background: #e7f1fb;*/
}

/* Per-step status icon at the start of each setup-nav link.
   Direct port of unityCreativeCopilot App.css §setup-nav. Driven by
   completion booleans computed in SetupFlow.tsx + a spinner when
   the relevant API call is in flight. */
.setup-nav-icon {
  width: 12px;
  font-size: 9px;
  margin-right: 6px;
}

.setup-nav-icon.complete {
  color: #198754;
}

.setup-nav-icon.incomplete {
  color: #6c757d;
}

.setup-content {
  min-width: 0;
}

.setup-step {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 20px;
  background: #fdfdfd;
}

.setup-step.complete {
  border-color: #28a745;
}

.setup-step-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.setup-step-header h2 {
  margin: 0;
  font-size: 18px;
}

.setup-step p {
  /* The description owns its own bottom gap so following content doesn't have
     to add ad-hoc margin-top (which was inconsistent step-to-step). */
  margin: 0 0 12px 0;
  color: #6c757d;
  font-size: 14px;
}

/* Readonly field row: value + Edit button, left-aligned with a gap so the
   Edit sits just after the value (the base rule was missing, so they had no
   gap; some instances already inline justify-content/gap assuming flex). */
.setup-field-readonly {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

/* Label owns a small gap below it, so it doesn't sit flush on the field
   value / input beneath. */
.setup-field-label {
  margin-bottom: 6px;
}

/* Existing-mappings table: scroll horizontally rather than break the layout,
   and act as a query container so the row actions can collapse to icon-only
   when the area is narrow. */
.setup-mappings-scroll {
  overflow-x: auto;
  container-type: inline-size;
}
@container (max-width: 560px) {
  .mapping-action-label {
    display: none;
  }
}

/* Step 2 app picker: the trigger is capped by its (fixed-width) column and
   truncates long app names, but the open dropdown grows to show them in full
   (same treatment as the side-panel Target/User filters). */
.setup-app-select .target-select-box__menu {
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: 360px;
}

.setup-substep {
  border-radius: 10px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.03);
}

.setup-substep:not(:last-child) {
  margin-bottom: 20px;
}

.setup-step-header h3 {
  margin: 0;
  font-size: 16px;
}

.setup-substep .setup-step-header h3 {
  flex: 1;
}

.setup-extraction-target-grid {
  display: grid;
  grid-template-columns: minmax(260px, 0.95fr) minmax(0, 1.35fr);
  gap: 16px;
  align-items: start;
  margin-top: 10px;
}

.setup-extraction-panel {
  border: 1px solid #e9ecef;
  border-radius: 10px;
  padding: 14px;
  background: #fff;
  min-width: 0;
}

/* Per-target summary tile flips to a green border once the target
   has at least one saved rule (Step4FilenameProcessingSummary). */
.setup-extraction-panel.complete {
  border-color: #28a745;
}

.setup-extraction-status {
  margin-top: 4px;
  color: #6c757d;
  font-size: 13px;
}

.setup-extraction-status-error {
  color: #dc3545;
}

.setup-extraction-summary-loading {
  margin-top: 4px;
  color: #6c757d;
  font-size: 13px;
}

.setup-extraction-summary-line {
  color: #495057;
  font-size: 13px;
  line-height: 1.5;
}

.setup-extraction-summary-line + .setup-extraction-summary-line {
  margin-top: 4px;
}

.setup-extraction-summary-actions {
  margin-top: 10px;
  display: flex;
  align-items: end;
  gap: 10px;
  flex-wrap: wrap;
}

.setup-extraction-summary-error {
  margin-top: 12px;
}

.setup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.setup-actions-spread {
  justify-content: space-between;
}

/* Step nav footer (Skip / Continue / Finish) — lives OUTSIDE the .setup-step
   card and is right-aligned. */
.setup-step-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  margin-top: 12px;
}

@media (max-width: 900px) {
  .setup-extraction-target-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .setup-substep {
    padding: 16px;
  }
}

.setup-badge {
  padding: 4px 10px;
  border-radius: 999px;
  background: #f1f3f5;
  font-weight: 600;
  color: #495057;
}

.setup-badge.success {
  background: #d4edda;
  color: #155724;
}

.setup-muted {
  color: #6c757d;
  /*font-size: 13px;*/
  /*margin-top: 8px;*/
}

.setup-error {
  color: #c92a2a;
  margin-top: 8px;
  font-size: 13px;
}

/* Step 3 "How shall we group files into creative sets?" chips —
   verbatim port of google's `.agu-grouping-chip` palette. AppLovin's
   wizard uses `csu-` prefix; visuals must match google's. */
.csu-grouping-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.csu-grouping-chip {
  border: 1px solid #d0d7de;
  background: white;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
  color: #212529;
}
.csu-grouping-chip:hover { border-color: #1a73e8; }
.csu-grouping-chip.is-selected {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1a73e8;
  font-weight: 600;
}
.csu-grouping-chip--language.is-selected {
  background: #e9ecef;
  border-color: #6c757d;
  color: #495057;
}
.csu-grouping-chip--language.is-selected .csu-grouping-check {
  background: #6c757d;
  border-color: #6c757d;
}
.csu-grouping-chip--category.is-selected {
  background: #faf0fc;
  border-color: #c026d3;
  color: #c026d3;
}
.csu-grouping-chip--category.is-selected .csu-grouping-check {
  background: #c026d3;
  border-color: #c026d3;
}
.csu-grouping-chip--concept.is-selected {
  background: #fffbe6;
  border-color: #f1c40f;
  color: #b8860b;
}
.csu-grouping-chip--concept.is-selected .csu-grouping-check {
  background: #d4a90c;
  border-color: #d4a90c;
}
.csu-grouping-chip[disabled],
.csu-grouping-chip.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.csu-grouping-chip[disabled]:hover,
.csu-grouping-chip.is-disabled:hover {
  border-color: #d0d7de;
}
.csu-grouping-check {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #d0d7de;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
}
.csu-grouping-chip.is-selected .csu-grouping-check {
  border-color: #1a73e8;
  background: #1a73e8;
  color: white;
}

.reuse-kind-button-group {
  display: inline-flex;
  align-items: center;
  margin: 0 6px;
  vertical-align: middle;
}

.reuse-kind-button {
  border: 1px solid #c9d4e5;
  border-left: 0;
  background: #fff;
  color: #344054;
  padding: 4px 11px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.reuse-kind-button:first-child {
  border-left: 1px solid #c9d4e5;
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
}

.reuse-kind-button:last-child {
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
}

.reuse-kind-button:hover {
  background: #eef5ff;
}

.reuse-kind-button.is-selected {
  background: #1565c0;
  border-color: #1565c0;
  color: #fff;
}

.setup-inline {
  display: flex;
  gap: 8px;
  flex: 1;
  min-width: 280px;
}

.setup-inline input {
  flex: 1;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #ced4da;
  font-size: 13px;
}

.setup-table {
  margin-top: 12px;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-grid {
  display: grid;
  gap: 12px;
  align-items: center;
}

.setup-table-header {
  font-weight: 600;
  color: #3d3d3d;
  /* Own the gap BELOW (to the table), not above — a section header groups
     with the table under it. (Was margin-top:16, which pushed it down from
     the content above and left it stuck to the table below.) */
  margin-bottom: 12px;
}

/* ─── Create-flow step layout ────────────────────────────────────────────── */

.step-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
  border-radius: 10px 10px 0 0;
  flex-shrink: 0;
  /* Sticky to match Meta — keeps the title pinned at the top of the
     step-column when the column itself happens to scroll vertically
     (rare in our horizontal-canvas layout, but matches one-to-one). */
  position: sticky;
  top: 0;
  z-index: 10;
  /* Clicking the header navigates to that step (StepColumn intercepts
     the click — see CreatePage.tsx#handleClick). The cursor cue is
     set on the *non-active* step only; the active step doesn't need
     it (you're already there). */
  cursor: pointer;
}
/* Status pill in the header — absolute-positioned in the top-right
   corner so it doesn't push the title or description. */
.step-status {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
.step-status.completed { background: #d4edda; color: #155724; }
.step-status.active    { background: #cce5ff; color: #0066cc; }
.step-status.pending   { background: #f1f3f5; color: #6c757d; }
/* Universal body-inner wrapper — every step body now contains
   <flex-col-min-h0> > <step-body-inner> > content, matching Meta. */
.step-body-inner,
.modal-inner {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
}
.step-body-inner.scrollable,
.scrollable {
  overflow-y: auto;
}
.step-column.active > .step-header {
  cursor: default;
}
.step-column:not(.active) .step-header:hover {
  background: #eef0f3;
}

.step-title {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  margin: 0 0 4px 0;
}

.step-description {
  font-size: 14px;
  color: #6c757d;
  margin: 0;
}

.step-body {
  flex: 1 1 auto;
  padding: 20px 24px;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.step-footer {
  flex-shrink: 0;
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  border-radius: 0 0 10px 10px;
  padding: 14px 24px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ─── Section label inside step ──────────────────────────────────────────── */

.step-section-label {
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #495057;
  margin-bottom: 6px;
}

/* ─── Data table (SelectedFilesTable etc.) ───────────────────────────────── */

.data-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
}

.step-body .data-table {
  width: 100%;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 0 !important;
}

.data-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f8f9fa;
}

.step-body .data-table tbody {
}

.step-body > *:not(.data-table):not(.monitor-overview-step) {
  flex-shrink: 0;
  margin-bottom: 16px;
}

.step-body > *:last-child:not(.data-table) {
  margin-bottom: 0;
}

.step-body > .form-group,
.step-body > .error-panel {
  flex-shrink: 0;
}

.text-assets-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
}

@media (max-width: 900px) {
  .text-assets-grid {
    grid-template-columns: 1fr;
  }
}

.data-table th {
  background: #f8f9fa;
  padding: 6px 8px;
  text-align: left;
  font-weight: 600;
  color: #495057;
  border-bottom: 2px solid #dee2e6;
  white-space: nowrap;
  vertical-align: top;
}

.data-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #dee2e6;
  line-height: 1.3;
  color: #212529;
}

.data-table-wrap {
  border: 1px solid #dee2e6;
  border-radius: 6px;
  overflow: hidden;
}

/* Inside a flex .step-body, the wrap + inner table-wrapper take all
 * remaining vertical space and only the table BODY scrolls — keeps
 * the wizard's filter row + footer pinned. Mirrors Meta's pattern
 * (.step-body .data-table { flex:1; min-height:0; overflow-y:auto }). */
.step-body .data-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.step-body .data-table-wrap .table-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Step bodies that host a data table as their main content (e.g.
 * Step 2 Campaigns) suppress their own scroll so ONLY the inner
 * .table-wrapper scrolls. Without this the outer body and the inner
 * wrapper compete: the body grows past the viewport, the inner
 * wrapper's flex bound never bites, and the user scrolls the toolbar
 * out of view. Other steps (Step 3 text, Step 4 review) keep the
 * default body-scroll because they have no table to host. */
.step-body.step-body--table-host {
  overflow: hidden;
}

/* Inactive entities (PAUSED / REMOVED campaigns, ad groups, etc.).
 * Verbatim from Meta's App.css — used in the campaign-selection
 * table to mute paused/removed rows without hiding them. */
.off {
  /*color: #999;*/
  opacity: 0.5;
}
/*tr.off td {
  opacity: 0.3;
}*/

/* Test campaigns in the Step-2 selection table: gray diagonal-stripe
 * background + a floating "plug" badge next to the checkbox so they
 * stand out as throwaway test containers. */
.data-table tr.test td {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(108, 117, 125, 0.10),
    rgba(108, 117, 125, 0.10) 6px,
    transparent 6px,
    transparent 12px
  );
}
.test-campaign-icon {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 9px;
  color: #6c757d;
  pointer-events: none;
}

/* Advanced Filters (Headless Multi-Select) */
.advanced-filters {
  border-radius: 8px;
  background: #fff;
  margin-bottom: 12px;
}

.advanced-filters-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.advanced-filters-title {
  font-weight: 600;
  color: #343a40;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.advanced-filters-count {
  background: #e9ecef;
  color: #495057;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
}

.advanced-filters-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.advanced-filters-toggle,
.advanced-filters-clear {
  border: 1px solid #ced4da;
  background: #f8f9fa;
  color: #495057;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}

.advanced-filters-toggle:hover,
.advanced-filters-clear:hover {
  background: #e9ecef;
}

.advanced-filters-bar {
  display: flex;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 10px;
}

.advanced-filter {
  flex: auto;
  border-radius: 8px;
  padding: 0;
  background: #fdfdff;
  position: relative;
}

.advanced-filter-top {
  display: flex;
  align-items: center;
}

.advanced-filter-label {
  flex: 1;
  font-weight: 600;
  color: #495057;
  margin-bottom: 6px;
}

.advanced-filter-controls {
  display: flex;
  align-items: center;
}

.advanced-filter-mode {
  display: inline-flex;
  border: 1px solid #ced4da;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 3px;
}

.advanced-filter-clear {
  border: 1px solid #ced4da;
  background: #f8f9fa;
  color: #6c757d;
  padding: 4px 6px;
  border-radius: 50%;
  font-size: 11px;
  cursor: pointer;
  margin-left: 6px;
}

.advanced-filter-clear:hover {
  background: #e9ecef;
  color: #343a40;
}

.advanced-filter-mode-btn {
  padding: 4px 8px;
  font-size: 11px;
  border: none;
  background: #f8f9fa;
  color: #6c757d;
  cursor: pointer;
}

.advanced-filter-include-btn::after,
.advanced-filter-exclude-btn::after {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  display: inline-block;
}

.advanced-filter-include-btn::after {
  content: "\f067";
}

.advanced-filter-exclude-btn::after {
  content: "\f068";
}

.advanced-filter-mode-btn.active {
  color: #fff;
}

.advanced-filter-include-btn.active {
  background: #999;
}

.advanced-filter-exclude-btn.active {
  background: #dc3545;
}

.advanced-filter-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  background: #fff;
  color: #495057;
  cursor: pointer;
}

.advanced-filter-panel {
  margin-top: 8px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  background: #fff;
  padding: 8px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  position: absolute;
  left: 0;
  right: 0;
  z-index: 11;
}

.advanced-filter-search {
  box-sizing: border-box;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  margin-bottom: 8px;
}

.advanced-filter-options {
  max-height: 160px;
  overflow-y: auto;
  display: grid;
  gap: 3px;
}

.advanced-filter-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9em;
  color: #495057;
}

.advanced-filter-empty {
  color: #6c757d;
  text-align: center;
  padding: 8px 0;
}

.advanced-filters-result {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.advanced-filters-quick-search {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  min-width: 220px;
  cursor: text;
}

.advanced-filters-quick-search.is-tokenized {
  flex-wrap: wrap;
  height: auto;
  min-height: 30px;
}

.advanced-filters-quick-search-input {
  flex: 1 1 90px;
  width: 100%;
  height: 30px;
  border: 0;
  outline: none;
  padding: 0;
  font: inherit;
  background: transparent;
}

.advanced-filters-quick-search.is-tokenized .advanced-filters-quick-search-input {
  width: auto;
  min-width: 90px;
  padding: 2px 0;
}

.advanced-filters-quick-search-token {
  padding: 1px 6px;
  border-radius: 999px;
  background: #eef2ff;
  color: #334155;
  font-size: 11px;
}

.advanced-filters-quick-search-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  color: #6c757d;
  font-size: 12px;
  flex: 0 0 auto;
}

/* ─── Auth health banner ─────────────────────────────────────────────────── */

.auth-health-banner {
  background: #fff3cd;
  border-bottom: 1px solid #ffc107;
  padding: 10px 24px;
  font-size: 13px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-health-banner-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ─── Jobs panel (Meta-ported, yellow background, resizable) ─────────────── */

/* Panel shell. The root <section> uses `.side-panel.jobs-panel` so it
   participates in the parent `.panels` flex container (declared in
   queues-panel.css). The Jobs panel only needs to add the yellow
   background that Meta uses to distinguish it from the Queues panel. */
.jobs-panel {
  background: #FAF3E0;             /* Meta's exact yellow: #FAF3E0 */
  min-width: 320px;
}

/* (Legacy `.jp-drag-handle` kept for any callers still using it; the
   root resize handle now uses `.side-panel-drag-handle` which is
   defined in queues-panel.css and shared by both panels.) */
.jp-drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 1002;
  transition: background-color ease 0.2s;
}
.jp-drag-handle:hover {
  background: inherit;
  filter: brightness(0.8);
}

/* Header — matches Meta's .side-panel-header */
.jp-header {
  padding: 10px 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

/* Title — matches Meta's .side-panel-title */
.jp-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #495057;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tabs — matches Meta's .side-panel-tabs */
.jp-tabs {
  display: flex;
  border-bottom: 1px solid #999;
  gap: 2px;
  padding: 0 16px;
  flex-shrink: 0;
}

.jp-tab {
  flex: 1;
  padding: 12px 10px;
  border: none;
  background: transparent;
  color: #6c757d;
  font-weight: 500;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-bottom: 3px solid transparent;
  transition: color 0.15s, border-bottom-color 0.15s;
}

.jp-tab--active {
  color: #998800;
  border-bottom-color: #ccbb00;
  font-weight: 600;
}

/* Body — matches Meta's .side-panel-body */
.jp-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.jp-body-inner {
  padding: 16px;
}

/* Empty state */
.jp-empty {
  color: #6c757d;
  font-style: italic;
  font-size: 13px;
  margin: 0;
}

/* Footer — matches Meta's panel footer */
.jp-footer {
  padding: 12px 16px;
  border-top: 1px solid #e9ecef;
  background: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
  font-size: 12px;
  color: #6c757d;
  text-align: center;
}

/* Job card */
.jp-card {
  border: 1px solid #e5d9a0;
  border-radius: 6px;
  padding: 0;
  margin-bottom: 10px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.65);
  overflow: hidden;
}

.jp-card-summary {
  cursor: pointer;
  display: flex;
  gap: 8px;
  align-items: center;
  padding: 8px 12px;
  list-style: none;
  user-select: none;
}
.jp-card-summary::-webkit-details-marker { display: none; }

.jp-card-id {
  font-size: 11px;
  color: #888;
  font-family: monospace;
}

.jp-card-title {
  flex: 1;
  font-weight: 500;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jp-card-time {
  font-size: 12px;
  color: #777;
  white-space: nowrap;
}

/* Card body (shown when <details> open) */
.jp-card-body {
  border-top: 1px solid #e5d9a0;
  padding: 8px 12px;
}

/* Status bar inside card */
.jp-card-status-bar {
  display: flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 8px;
}

.jp-card-no-steps {
  color: #777;
  font-size: 12px;
  margin: 0;
}

/* Steps list */
.jp-steps-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ─── Generic step circles + File Transfer Progress (Meta port) ─────────── */
/* Faithful port of Meta Creative Copilot's job-detail Progress section.
 * Source: ProductionMetaUploader/presentation/web/src/components/ui/
 *         JobsPanel.tsx + App.css. Class names preserved verbatim so
 *         future ports can copy markup unchanged. */

.job-step-indicator {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

ul.upload-progress {
  margin: 5px 0;
  padding: 0;
  font-size: 0.9em;
  list-style: none;
}

ul.upload-progress li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.upload-progress-label {
  flex: 1;
  min-width: 0;
  word-break: break-all;
}

.upload-progress-label.skipped {
  text-decoration: line-through;
}

.upload-progress-meta {
  display: block;
  margin-top: 2px;
  font-size: 0.85em;
  color: #6c757d;
}

.upload-progress-bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-end;
}

.upload-progress-bar {
  display: inline-block;
  width: 70px;
  height: 7px;
  background: #e0e0e0;
  border-radius: 5px;
  overflow: hidden;
}

.upload-progress-reused-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70px;
  min-height: 16px;
  border: 1px solid #badbcc;
  border-radius: 4px;
  background: #d1e7dd;
  color: #0f5132;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
}

.upload-progress-fill {
  display: block;
  height: 100%;
  background: #0d6efd;
}

.download-progress-fill {
  background: lightblue;
}

/* Single step row */
.jp-step-row {
  display: flex;
  gap: 8px;
  font-size: 12px;
  padding: 2px 0;
  align-items: flex-start;
}

.jp-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-top: 3px;
  flex-shrink: 0;
}

.green-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgb(40, 167, 69);
  display: inline-block;
}

.red-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgb(220, 53, 69);
  display: inline-block;
}

.yellow-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgb(255, 193, 7);
  display: inline-block;
}

.gray-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: rgb(108, 117, 125);
  display: inline-block;
}

.monitoring-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgb(220, 53, 69);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

.jp-step-name {
  flex: 1;
  font-family: monospace;
}

.jp-step-status {
  font-weight: 600;
}

.jp-step-detail {
  color: #777;
}

/* Result details */
.jp-result-details {
  margin-top: 8px;
  border-top: 1px solid #e5d9a0;
  padding-top: 6px;
}

.jp-result-summary {
  cursor: pointer;
  font-size: 11px;
  color: #6c757d;
  list-style: none;
  user-select: none;
}
.jp-result-summary::-webkit-details-marker { display: none; }

.jp-result-pre {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 8px;
  max-height: 200px;
  overflow-y: auto;
}

/* ─── Job card type label (mirrors Meta's .side-panel-job-card type area) ── */

.jp-card-type {
  font-size: 11px;
  color: #6c757d;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

/* ─── Job detail pane (expanded card body) ───────────────────────────────── */

/* Loading / error states */
.jp-detail-loading,
.jp-detail-error {
  padding: 8px 0;
  font-size: 12px;
  color: #6c757d;
}
.jp-detail-error { color: #dc3545; }

/* Body wrapper */
/* The ONE place section spacing is decided. Sections used to stack three
   mechanisms — this gap, a margin-bottom on every section, and an inline
   marginTop on three of them — so neighbours sat 21px or 33px apart with
   nothing saying which, and the last section left dead space below the
   list. `gap` cannot double up and cannot trail, so the others are gone.
   Top padding matches the sections' own 12px so the outer frame and the
   cards inside it share one rhythm. */
.jp-detail-body {
  padding: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.job-detail-section {
  padding: 12px 16px;
  border-radius: 6px;
  background: rgba(255,255,255,0.5);
}

.job-detail-section label {
  display: block;
  margin-bottom: 10px;
  padding: 5px 10px;
  background: #eee;
  text-transform: uppercase;
}

/* Section heading (e.g. "Progress") */
.jp-detail-section-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
  margin-top: 4px;
}

/* Single key-value row — mirrors Meta's detail rows */
.jp-detail-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
}
.jp-detail-label {
  flex-shrink: 0;
  width: 100px;
  font-weight: 600;
  color: #495057;
}
.jp-detail-value {
  flex: 1;
  color: #212529;
}
.jp-detail-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #e9ecef;
  color: #495057;
  font-size: 10px;
  font-weight: 600;
  text-transform: capitalize;
}
.jp-detail-code {
  font-family: monospace;
  font-size: 11px;
  background: #f0f0f0;
  border-radius: 3px;
  padding: 1px 5px;
  color: #495057;
}

/* Files list */
.jp-detail-row--files { align-items: flex-start; }
.jp-detail-file-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.jp-detail-file-chip {
  display: inline-flex;
  align-items: center;
  background: #e8f4f8;
  border: 1px solid #b8dde9;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  color: #0d6986;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jp-detail-file-chip--more {
  background: #f0f0f0;
  border-color: #ccc;
  color: #6c757d;
}

/* The "+X more" chip is a <button> (it expands/collapses the full
   file list); inherit the chip typography and read as clickable. */
button.jp-detail-file-chip--more {
  cursor: pointer;
  font-family: inherit;
}

button.jp-detail-file-chip--more:hover {
  background: #e2e2e2;
  color: #495057;
}

/* Destinations list */
.jp-detail-row--dests { align-items: flex-start; }
.jp-detail-dest-list {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.jp-detail-dest {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: rgba(255,255,255,0.5);
  border: 1px solid #e5d9a0;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 11px;
}
.jp-detail-dest-campaign {
  font-weight: 600;
  color: #344054;
}
.jp-detail-dest-adgroup {
  color: #6c757d;
  padding-left: 4px;
}

/* ─── Setup / Loading ────────────────────────────────────────────────────── */

.setup-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f8f9fa;
  color: #495057;
  font-size: 14px;
}

/* ─── Tooltip ────────────────────────────────────────────────────────────── */

.tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  pointer-events: none;
}

.tooltip-tip {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-bottom-color: #333;
}

/* Hover-revealed help tooltip: same dark chip as .tooltip but wraps to a
   readable paragraph and only appears on hover/focus of the trigger. */
.help-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.help-tip .tooltip {
  display: none;
  white-space: normal;
  width: max-content;
  max-width: 260px;
  text-align: left;
  line-height: 1.45;
  z-index: 30;
}
.help-tip:hover .tooltip,
.help-tip:focus-within .tooltip {
  display: block;
}

/* ─── Concept Extraction / Naming Convention (Step 4) ──────────────────────── */
/* Ported from MetaAssetManager concept-extraction.css */

.concept-instructions {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #495057;
}

/* Examples grid — two columns (images | videos) */
.concept-examples-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 12px;
}

@media (max-width: 680px) {
  .concept-examples-grid {
    grid-template-columns: 1fr;
  }
}

/* Playables is the 3rd category in a 2-column grid — span it full width so it
   sits on its own row cleanly instead of orphaning next to an empty cell.
   Scoped to the token grid (.concept-examples) so the algo grids are untouched. */
.concept-examples > .concept-examples-grid > .concept-column:nth-child(3) {
  grid-column: 1 / -1;
}

.concept-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* Let the grid track shrink below its content so long, unbreakable preview
     filenames don't force the column (and the whole section) to overflow. */
  min-width: 0;
}

/* Long candidate-preview filenames must wrap inside the card, not overflow it. */
.concept-candidate-preview {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.concept-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 6px;
  margin-bottom: 4px;
}

.concept-column-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #212529;
}

.concept-clear-restart-button {
  background: transparent;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 11px;
  color: #6c757d;
  cursor: pointer;
}
.concept-clear-restart-button:hover {
  background: #f1f3f5;
  border-color: #adb5bd;
}

/* Token rows */
.concept-token-row {
  border: 1px solid #e9ecef;
  border-radius: 6px;
  padding: 8px 68px 8px 10px;
  background: #fff;
  position: relative;
}
.concept-token-row.saved   { border-color: #28a745; }
.concept-token-row.unsaved { border-color: #ffc107; }

.concept-tokens {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* Individual token chips */
.concept-token {
  padding: 3px 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-family: monospace;
  color: #212529;
  transition: background 0.1s, border-color 0.1s;
}
.concept-token:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}
/* CONCEPT selection — gold */
.concept-token.selected {
  background: #ffd700;
  border-color: #c8a200;
  color: #212529;
  font-weight: 600;
}
/* CATEGORY selection — fuchsia/violet */
.concept-token.selected-category {
  background: #e040fb;
  border-color: #ab00d6;
  color: #fff;
  font-weight: 600;
}

.concept-extension {
  font-size: 11px;
  color: #adb5bd;
  font-family: monospace;
  margin-left: 2px;
}

.concept-filename-full {
  margin-top: 4px;
  font-size: 11px;
  color: #6c757d;
  font-family: monospace;
  word-break: break-all;
}

/* Saved / unsaved badges */
.concept-status-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 10px;
  margin-left: 4px;
}
.concept-status-badge.saved   { background: #d4edda; color: #155724; }
.concept-status-badge.unsaved { background: #fff3cd; color: #856404; }

/* Skip button */
.concept-skip-button {
  position: absolute;
  top: 8px;
  right: 8px;
  background: transparent;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 10px;
  cursor: pointer;
  color: #6c757d;
}
.concept-skip-button:hover { background: #f1f3f5; }

/* Action bar below the examples grid */
.concept-examples-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Progress summary */

.concept-help {
  color: #6c757d;
  font-size: 12px;
}

/* "Generated patterns" phase — a distinct, always-present block that separates
   the labelling grids (identify) from the pattern-picking step. Shows a
   placeholder before rules exist, the algo cards after. */
.concept-patterns-section {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background: #fbfcfd;
}
.concept-patterns-section > h4 {
  margin: 0 0 4px;
  font-size: 15px;
  color: #212529;
}
/* Candidate algo cards */
.concept-candidates,
.category-candidates {
  margin-top: 16px;
}

.concept-candidate,
.category-candidate {
  border: 1px solid #ced4da;
  border-radius: 8px;
  padding: 12px;
  background: #fff;
  margin-bottom: 8px;
}
.concept-candidate.active  { border-color: #f1c40f; background: #fffbea; }
.category-candidate.active { border-color: #c026d3; background: #fdf4ff; }

.concept-candidate-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.concept-candidate-stats {
  font-size: 11px;
  color: #6c757d;
}

.concept-candidate-preview h5 {
  margin: 0 0 4px;
  font-size: 12px;
  color: #495057;
}

.concept-preview-examples {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.concept-preview-example {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.concept-preview-filename {
  font-family: monospace;
  color: #6c757d;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.concept-preview-arrow { color: #adb5bd; }

.concept-preview-concept  { color: goldenrod; font-weight: 600; }
.concept-preview-category { color: #c026d3; font-weight: 600; }

.concept-candidate-active {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  color: #198754;
  font-weight: 600;
}

/* Accent helpers (ported from Meta) */
.concept-accent {
  /* darkgoldenrod (~4.9:1 on white) — plain goldenrod (#DAA520, ~2.9:1) fails
     WCAG AA for this small accent text. The filled chips are unaffected. */
  color: #b8860b !important;
}

.category-accent {
  color: #c026d3 !important;
}

.btn-concept-accent {
  color: #1f1f1f;
  background-color: gold;
  border-color: #f1c40f;
}

.btn-concept-accent:hover,
.btn-concept-accent:focus {
  color: #1f1f1f;
  background-color: #f3c401;
  border-color: #e0b400;
}

.btn-category-accent {
  color: #fff;
  background-color: #d946ef;
  border-color: #c026d3;
}

.btn-category-accent:hover,
.btn-category-accent:focus {
  color: #fff;
  background-color: #c026d3;
  border-color: #a21caf;
}

.btn-algo-selected,
.btn-algo-selected:disabled {
  opacity: 1;
  box-shadow: inset 0 0 0 2px rgba(31, 31, 31, 0.18);
}

/* Static legal footer (in index.html) — visible only to anonymous
   visitors / OAuth verification crawlers. Once the user is signed
   in, useCurrentUser adds `authed` to <body> and we hide it. */
body.authed #legal-footer { display: none; }

/* ---- AGU Step 4 — grouping chips + plan-preview table ---- */
.agu-grouping-chips {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.agu-grouping-chip {
  border: 1px solid #d0d7de;
  background: white;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: inherit;
  color: #212529;
}
.agu-grouping-chip:hover { border-color: #1a73e8; }
.agu-grouping-chip.is-selected {
  background: #e8f0fe;
  border-color: #1a73e8;
  color: #1a73e8;
  font-weight: 600;
}
/* Per-kind accent on the grouping chips when selected — matches the
   badge palette so it reads as the same "language / category /
   concept" thread across the entire step. The unselected chip stays
   neutral; only the .is-selected variant takes the kind colour. */
.agu-grouping-chip--language.is-selected {
  background: #e9ecef;
  border-color: #6c757d;
  color: #495057;
}
.agu-grouping-chip--language.is-selected .agu-grouping-check {
  background: #6c757d;
  border-color: #6c757d;
}
.agu-grouping-chip--category.is-selected {
  background: #faf0fc;
  border-color: #c026d3;
  color: #c026d3;
}
.agu-grouping-chip--category.is-selected .agu-grouping-check {
  background: #c026d3;
  border-color: #c026d3;
}
.agu-grouping-chip--concept.is-selected {
  background: #fffbe6;
  border-color: #f1c40f;
  color: #b8860b;
}
.agu-grouping-chip--concept.is-selected .agu-grouping-check {
  background: #d4a90c;
  border-color: #d4a90c;
}
.agu-grouping-chip[disabled],
.agu-grouping-chip.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.agu-grouping-chip[disabled]:hover,
.agu-grouping-chip.is-disabled:hover {
  border-color: #d0d7de;
}
.agu-grouping-check {
  width: 14px; height: 14px; border-radius: 50%;
  border: 1.5px solid #d0d7de;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 9px;
}
.agu-grouping-chip.is-selected .agu-grouping-check {
  border-color: #1a73e8;
  background: #1a73e8;
  color: white;
}
/* AGU Step 4 layout — pin the chip row + section headings; only the
   table wraps scroll. The step-body normally has overflow:auto, but
   we override it for this step so the wrap's flex-grow + min-height:0
   actually constrains height instead of letting content push siblings
   (and the footer) off-screen. */
.step-body.agu-step-review {
  overflow: hidden;
}
.agu-preview-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  border: 1px solid #eef0f3;
  border-radius: 6px;
  margin-top: 6px;
}
/* Unfilled ("These files won't be used…") wrap doesn't claim equal
   priority — capped at ~30% of the viewport and scrolls internally
   if it overflows. */
.agu-preview-table-wrap--unfilled {
  flex: 0 1 auto;
  max-height: 30vh;
}
.agu-preview-unfilled-heading {
  margin-top: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #6c757d;
  text-transform: uppercase;
}
.agu-preview-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  /* Auto-fit: each column shrinks/grows around its actual content
     without artificial minimums. */
  table-layout: auto;
}
.agu-preview-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f8f9fa;
}
.agu-preview-table th,
.agu-preview-table td {
  text-align: left;
  padding: 8px 10px;
  /* Thinner / lighter row separator. */
  border-bottom: 1px solid #f1f3f5;
  vertical-align: top;
  /* No min-width — columns fit their content. */
  min-width: 0;
}
/* Per-campaign tree block inside an Ad-groups cell. */
.tree {
  margin-bottom: 20px;
}
.tree:last-child {
  margin-bottom: 0;
}
/* The boundary between buckets is heavier than the boundary between
   sub-rows of the same bucket so the eye can scan one bucket at a
   time. The class is added to the LAST sub-row of every bucket. */
.agu-preview-table tr.agu-bucket-last-row > td {
  border-bottom: 2px solid #adb5bd;
}
.agu-preview-table th {
  background: #f8f9fa;
  font-size: 11px; font-weight: 700;
  color: #6c757d; text-transform: uppercase; letter-spacing: .4px;
}
.agu-count-badge {
  display: inline-block; background: #eef2ff; color: #4338ca;
  font-size: 11px; font-weight: 700;
  padding: 2px 6px; border-radius: 10px;
  margin-left: 6px;
}
.agu-bucket-chip {
  display: inline-block;
  font-size: 9px; font-weight: 700; letter-spacing: .5px;
  background: #eef2ff; color: #4338ca;
  border-radius: 3px; padding: 1px 5px;
  margin-right: 4px;
  text-transform: uppercase;
}
.agu-bucket-chip--warn {
  background: #fee; color: #c92a2a;
}
.agu-preview-dest {
  margin-bottom: 6px;
}
.agu-preview-dest-name {
  color: #212529;
  font-weight: 500;
}
.agu-attr-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.agu-attr-badge {
  font-family: inherit;
  font-size: 10px; font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #d0d7de;
  background: white;
  cursor: pointer;
  color: #495057;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .3px;
}
.agu-attr-badge:hover {
  border-color: #1a73e8;
  color: #1a73e8;
}
/* Per-kind accent palette. Every state (empty / inferred / manual)
   stays in the kind's colour family — language=gray,
   category=fucsia, concept=gold — so a "No Lang" badge still reads
   as a language signal at a glance instead of a generic red error. */

/* Language — gray */
.agu-attr-badge--language.agu-attr-badge--empty {
  background: #f8f9fa; border-color: #dee2e6; color: #6c757d;
  font-weight: 500;
}
/*.agu-attr-badge--language.agu-attr-badge--inferred {
  background: #f1f3f5; border-color: #ced4da; color: #495057;
}*/
.agu-attr-badge--language {
  background: #6c757d; border-color: #495057; color: white;
}

/* Category — fucsia (.category-accent) */
.agu-attr-badge--category.agu-attr-badge--empty {
  background: #fdf4fe; border-color: #f0d4f7; color: #c026d3;
  font-weight: 500;
}
/*.agu-attr-badge--category.agu-attr-badge--inferred {
  background: #faf0fc; border-color: #e9b6f3; color: #c026d3;
}*/
.agu-attr-badge--category {
  background: #d946ef; border-color: #c026d3; color: white;
}

/* Concept — gold (.concept-accent) */
.agu-attr-badge--concept.agu-attr-badge--empty {
  background: #fffdf2; border-color: #f8e58c; color: #b8860b;
  font-weight: 500;
}
/*.agu-attr-badge--concept.agu-attr-badge--inferred {
  background: #fffbe6; border-color: #f1c40f; color: #b8860b;
}*/
.agu-attr-badge--concept {
  background: #f1c40f; border-color: #d4a90c; color: #1f1f1f;
}
/* Read-only variant used to annotate files in the preview matrix —
   non-clickable; visual style matches the inferred (light) accent. */
.agu-attr-badge--readonly {
  cursor: default;
  opacity: 0.95;
}
.agu-attr-badge--readonly:hover {
  border-color: inherit;
  color: inherit;
}
.agu-preview-file {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 2px;
}
.agu-preview-file-name {
  color: #495057;
}
.agu-attr-badges--file {
  display: inline-flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 0;
}
.agu-preview-campaign {
  color: #495057;
  font-size: 12px;
  vertical-align: top;
  /* No width constraint — the column auto-sizes to its widest entry. */
}

/* Tree layout for the Ad-groups column (variant A): each campaign
   becomes a parent line, its ad groups are indented children
   connected by a dashed L-shape. Same shape used in the picker
   mockup the user approved. */
.agu-tree-campaign {
  font-weight: 600;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 4px;
}
.agu-tree-campaign + .agu-tree-campaign,
.agu-tree-children + .agu-tree-campaign {
  margin-top: 8px;
}
.agu-tree-children {
  padding-left: 14px;
  position: relative;
  margin-top: 2px;
}
.agu-tree-children::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 8px;
  left: 6px;
  border-left: 1.5px dashed #adb5bd;
}
.agu-tree-ag {
  position: relative;
  padding-left: 14px;
  margin: 3px 0;
}
.agu-tree-ag::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 0;
  width: 12px;
  border-top: 1.5px dashed #adb5bd;
}
.agu-attr-input {
  font-family: inherit;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #1a73e8;
  background: white;
  color: #212529;
  outline: none;
}
.agu-attr-input:focus {
  box-shadow: 0 0 0 2px rgba(26,115,232,0.2);
}
.agu-preview-files div {
  color: #495057;
  margin-bottom: 2px;
}
.agu-preview-files i {
  color: #6c757d; margin-right: 4px; font-size: 10px;
}

/* ---- Auth gate (interim Login screen) ---- */
.auth-gate {
  height: calc(100vh - 160px);
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.auth-gate-card {
  width: min(720px, 100%);
  background: white;
  border-radius: 12px;
  padding: 32px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.auth-gate-logo {
  width: min(400px, 100%);
  height: auto;
  display: block;
  margin: 0 auto 8px;
}
.auth-gate-card h1 {
  margin: 0;
  font-size: 22px;
}
.auth-gate-card p {
  margin: 0;
  color: #6c757d;
}
.auth-gate-toggle {
  display: inline-flex;
  align-self: center;
  padding: 4px;
  background: linear-gradient(180deg, #eef4ff 0%, #e2ebfb 100%);
  border: 1px solid #d4e0f8;
  border-radius: 999px;
  gap: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.auth-gate-toggle-option {
  border: none;
  background: transparent;
  color: #5f6c80;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease;
}
.auth-gate-toggle-option:hover {
  color: #1f2a3d;
}
.auth-gate-toggle-option.active {
  background: linear-gradient(135deg, #1a73e8 0%, #4f8df5 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(26, 115, 232, 0.28);
}
.auth-gate-toggle-option:focus-visible {
  outline: 2px solid #8ab4f8;
  outline-offset: 2px;
}
.auth-gate-card label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: #495057;
}
.auth-gate-card input,
.auth-gate-card textarea {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ced4da;
  font-size: 13px;
}
.auth-gate-error {
  color: #c92a2a;
}

/* ─── Drive Files Modal (ported from Meta FilesStepBodies.tsx / App.css) ───── */

/* Modal backdrop */
.modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal shell */
.modal {
  background-color: white;
  border-radius: 8px;
  width: 90vw;
  min-width: 760px;
  max-width: 1100px;
  max-height: 90vh;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 5px;
  display: flex;
  flex-direction: column;
}

/* Drive files modal — wider than the default modal (Gap 5) */
.modal.source-files-modal {
  width: 90vw;
  min-width: 1000px;
  max-width: 2000px;
}

/* Source files table — ported from Meta's shared .data-table treatment,
   with the modal-specific wrapping/centering rules scoped locally so
   no inline th/td styles are needed. */
.source-files-table-wrap {
  flex: 1;
  overflow-y: auto;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

.source-files-table td {
  vertical-align: middle;
  word-break: break-all;
  max-width: none;
}

.source-files-table td {
  white-space: normal;
}

.source-files-table__sortable {
  cursor: pointer;
  user-select: none;
}

.source-files-table__cell {
  color: #212529;
}

.source-files-table__updated-timestamp {
  font-size: 0;
}

/* Updated column renders the CalendarTimestamp chip now - no bespoke
 * <time> sizing (the 14px rule fought the chip's plain-text time). */

.source-files-table__checkbox-col,
.source-files-table__checkbox-cell,
.source-files-table__center-col {
  text-align: center;
}

.source-files-table__checkbox-col,
.source-files-table__tight-col {
  width: 1%;
}

.source-files-table__checkbox-cell {
  position: relative;
}

.source-files-table__thumb-col,
.source-files-table__thumb-cell {
  width: 52px;
  padding: 2px 4px;
}

.source-files-table__name {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.source-files-table__spacer {
  padding: 0;
  border: 0;
}

.modal-header {
  padding: 10px 20px;
  border-bottom: 1px solid #dee2e6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
}

.modal-inner {
  flex: 1;
  min-height: 250px;
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal-footer {
  padding: 10px 20px;
  border-top: 1px solid #dee2e6;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* Files load parameters bar */
.files-load-parameters {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  margin-bottom: 16px;
  padding: 12px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
}

/* Alert boxes */
.alert {
  padding: 16px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 16px;
}

.alert-info {
  border-color: #90caf9;
  background-color: #e3f2fd;
  color: #1565c0;
}

.alert-error {
  background-color: #fff3cd;
  border: 1px solid #ffeaa7;
  color: #856404;
}

/* Selection checkbox */
.selection-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #007bff;
}

/* File type badges */
.td-file-type-image {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #e3f2fd;
  color: #1565c0;
  font-size: 11px;
  font-weight: 600;
}

.td-file-type-video {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #fce4ec;
  color: #880e4f;
  font-size: 11px;
  font-weight: 600;
}

.td-file-type-other {
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #f3e5f5;
  color: #4a148c;
  font-size: 11px;
  font-weight: 600;
}

/* Folder path sub-label */
.file-folder {
  color: #999;
  margin-top: 2px;
  font-style: italic;
  font-size: 0.9em;
}

/* File name cell */
.td-name-text {
  font-weight: 500;
  word-break: break-all;
}

/* Concept cell */
.td-concept-wrap {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline flex helper */
.inline-flex-center {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Table row selected */
.table-row-selected {
  background-color: #e8f4ff;
}

/* QueuesPanel: cell for the per-row "drop_reason" text on the
   Dropped items table. The reason can be very long (it names every
   rejected file + AppLovin's reason); break it freely instead of
   ellipsising so admins see the full text inline. */
.dropped-item-reason {
  color: #dc3545;
  word-break: break-all;
}

.dropped-item-row,
.dropped-item-row button,
.dropped-item-row file,
.dropped-item-row set {
  text-decoration: line-through;
}

/* DriveFilesModal: AppLovin-rejected file rows are struck through
   so the user can scan a long table and skip them at a glance.
   The red-X icon on the checkbox cell already carries the
   per-file reason tooltip. */
tr.rejected {
  text-decoration: line-through;
  color: #999;
}

/* Badge superimposed on the checkbox cell of the DriveFilesModal
   row (red X for AppLovin-rejected files, future variants can
   reuse the base class). Vertical positioning relies on the
   containing <td>'s vertical-align: middle. */
.drive-row-status-icon {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 15px;
  background: #fff;
  border-radius: 50%;
  padding: 1px 3px;
  cursor: help;
  pointer-events: auto;
}
.drive-row-status-icon--rejected,
.drive-row-status-icon--blocked {
  color: #dc3545;
}
.drive-row-status-icon--in-review {
  color: #b7791f;
}

.source-used-axon-logo {
  align-items: center;
  background: #eef0f2;
  border: 1px solid #c9ced4;
  border-radius: 4px;
  color: #6c757d;
  display: inline-flex;
  filter: grayscale(1);
  font-size: 8px;
  font-weight: 800;
  height: 20px;
  justify-content: center;
  letter-spacing: -0.4px;
  line-height: 1;
  margin-right: 6px;
  opacity: 0.58;
  vertical-align: middle;
  width: 20px;
}

/* Outline-primary button variant (used by refetch / load-more) */
.btn-outline-primary {
  border: 1px solid #007bff;
  background: transparent;
  color: #007bff;
}

.btn-outline-primary:hover:not(:disabled) {
  background: #007bff;
  color: white;
}

/* Was used by 3 components but never defined, so they rendered borderless. */
.btn-outline-secondary {
  border: 1px solid #6c757d;
  background: transparent;
  color: #6c757d;
}

.btn-outline-secondary:hover:not(:disabled) {
  background: #6c757d;
  color: white;
}

/* Placement orientation icons */
.placement-icon {
  display: inline-block;
  box-sizing: border-box;
  border: 2px solid currentColor;
  border-radius: 3px;
  vertical-align: middle;
  flex: 0 0 auto;
}

.placement-icon.portrait  { width: 8px; height: 14px; color: #5c7cfa; }
.placement-icon.landscape { width: 14px; height: 6px; color: #20c997; }
.placement-icon.square    { width: 10px; height: 10px; color: #fd7e14; }

/* col_filetype: hidden on small viewports (matches Meta) */
.col_filetype { display: none; }

/* Selected-files table border wrapper */
.selected-files-table-border {
  display: flex;
  flex-direction: column;
  min-height: 0;
  border: solid 3px #007bff;
  padding: 20px;
  border-radius: 8px;
}

/* Table wrapper */
.table-wrapper {
  overflow-y: auto;
  min-height: 125px;
}

.filter-container {
  padding: 12px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-bottom: none;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.filter-search-container {
  min-width: 200px;
  flex: 1 1 240px;
}

.filter-select-container {
  min-width: 160px;
}

.target-multi-select {
  position: relative;
  min-width: min(520px, 100%);
  max-width: min(760px, 100%);
}

.target-multi-select__control {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 3px 7px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.03);
  cursor: pointer;
}

.target-multi-select__control.is-open {
  border-color: #2f80ed;
  box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.14);
}

.target-multi-select__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 260px;
  min-height: 24px;
  padding: 2px 5px 2px 7px;
  border: 1px solid #bcd4f6;
  border-radius: 4px;
  background: #eef5ff;
  color: #343a40;
}

.target-multi-select__badge-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-multi-select__badge button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #5c6f82;
  cursor: pointer;
}

.target-multi-select__badge button:hover:not(:disabled) {
  background: rgba(47, 128, 237, 0.14);
  color: #1f5fbf;
}

.target-multi-select__badge button:disabled {
  cursor: default;
  opacity: 0.38;
}

.target-multi-select__input {
  flex: 1 1 140px;
  min-width: 120px;
  border: 0;
  outline: 0;
  padding: 4px 2px;
  background: transparent;
  color: #343a40;
}

.target-multi-select__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.target-multi-select__option {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 7px 8px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: #343a40;
  text-align: left;
  cursor: pointer;
}

.target-multi-select__option:hover,
.target-multi-select__option:focus {
  background: #f1f6ff;
  outline: 0;
}

.target-multi-select__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.target-multi-select__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-multi-select__empty {
  padding: 8px;
  color: #6c757d;
  font-size: 13px;
}

.filter-input,
.filter-select {
  width: 100%;
  padding: 4px 8px;
  border: 1px solid #ced4da;
  border-radius: 3px;
}

.filter-clear-button {
  padding: 4px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
}

.filter-clear-button:hover {
  background: #f1f3f5;
}

.campaigns-campaign-row {
  background: #f8f9fa;
  font-weight: 600;
  border-bottom: 1px solid #dee2e6;
}

.campaigns-adset-row {
  border-bottom: 1px solid #dee2e6;
}

.campaign-expand-button {
  border: none;
  background: none;
  cursor: pointer;
  color: #007bff;
}

.campaign-name {
  font-weight: 500;
  word-break: break-all;
  white-space: normal;
  line-height: 1.4;
}

.td-status-active {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  background: #d4edda;
  color: #155724;
  white-space: nowrap;
  text-align: center;
}

.td-status-inactive {
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  background: #f8d7da;
  color: #721c24;
  white-space: nowrap;
  text-align: center;
}

.td-text-content {
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
}

.td-text-content-empty {
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
  color: #6c757d;
  font-style: italic;
}

.empty-state-center {
  text-align: center;
  padding: 40px;
  color: #6c757d;
}

.empty-state-center-error {
  text-align: center;
  padding: 40px;
  color: #dc3545;
}

/* ─── Filter toolbar (Step 2 campaigns) ─────────────────────────────────── */
.filter-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid #e9ecef;
  border-bottom: 0;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  background: #f8f9fa;
}
.filter-controls > * {
  order: 1;
}
.filter-controls > input.setup-input {
  order: 2;
  flex: 1 1 100%;
  min-width: 0 !important;
}
.filter-controls-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.filter-info {
  font-size: 12px;
  color: #6c757d;
}
.filter-refresh-button {
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  color: #495057;
}
.filter-refresh-button:hover { background: #fffbe5; }
.filter-refresh-button:disabled { opacity: 0.5; cursor: not-allowed; }

.filter-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #495057;
}
.filter-toggle-right { margin-left: auto; }
.filter-toggle-label {
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
.filter-toggle-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 18px;
}
.filter-toggle-switch input { opacity: 0; width: 0; height: 0; }
.filter-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #ced4da;
  border-radius: 999px;
  transition: background-color 0.2s ease;
}
.filter-toggle-slider::before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 2px;
  top: 2px;
  background-color: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.filter-toggle-switch input:checked + .filter-toggle-slider { background-color: #007bff; }
.filter-toggle-switch input:checked + .filter-toggle-slider::before { transform: translateX(18px); }

.status-toggle {
  border: 0;
  background: transparent;
  padding: 2px;
  cursor: pointer;
  line-height: 1;
}
.status-toggle:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}
.status-toggle__track {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #cfd7df;
  box-shadow: inset 0 0 0 1px rgba(33, 37, 41, 0.08);
  transition: background 160ms ease;
}
.status-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.22);
  transition: transform 160ms ease;
}
.status-toggle.is-active .status-toggle__track { background: #28a745; }
.status-toggle.is-active .status-toggle__thumb { transform: translateX(16px); }
.status-toggle:focus-visible {
  outline: 2px solid #80bdff;
  outline-offset: 2px;
  border-radius: 999px;
}

/* Sort indicators on data-table headers */
.data-table th.is-sortable {
  cursor: pointer;
  user-select: none;
}
.data-table th .sort-icon {
  margin-left: 4px;
  color: #adb5bd;
  font-size: 10px;
}
.data-table th.is-sortable:hover { background: #f1eccc; }
.data-table tbody tr.is-checked { background: #f0f8ff; }
.data-table tbody tr.adgroup-row td { background: #fafafa; }

/* ─── Name Template Editor (ported from Meta NameTemplateEditor.tsx / App.css) ── */

/* Two-column layout: textarea left, macro badges right */
.name-template-layout {
  display: flex;
  gap: 16px;
  align-items: stretch;
  flex-wrap: wrap;
}

.name-template-input-column {
  flex: 1 1 0;
  min-width: 0;
}

.name-template-macros-column {
  flex: 1 1 0;
  min-width: 0;
  margin-top: 0;
}

.name-template-macro-badges {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* WYSIWYG: transparent textarea over a coloured highlight div */
.name-template-wysiwyg {
  position: relative;
  display: flex;
}

.name-template-wysiwyg .form-control {
  position: relative;
  flex: 1;
  background: transparent;
  z-index: 2;
}

.name-template-wysiwyg textarea.form-control {
  min-height: 60px;
  resize: vertical;
  white-space: pre-wrap;
  font-family: monospace;
  font-size: 13px;
}

/* Highlight layer — sits behind the textarea, renders macro spans */
.name-template-highlight {
  position: absolute;
  inset: 0;
  font-family: monospace;
  color: transparent;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: hidden;
  padding: 8px 13px;
  font-size: 13px;
  z-index: 3;
}

/* Macro token highlight colour */
.name-template-highlight span {
  color: #ff9933;
  background: rgba(255, 220, 150, 0.4);
}

/* Macro insertion badge buttons */
.btn-badge {
  padding: 5px;
  border: solid 1px #999;
  background: #eee;
  line-height: 1;
  color: #333;
}
.btn-badge:hover {
  background: #ddd;
  border-color: #ff9933;
}

/* Accent variants for {concept} and {category} badges — Meta style
   (presentation/web/src/App.css:5210 in MetaAssetManager). Font
   colour only; the surrounding .btn-badge gray fill stays put so
   the badges blend with the form chrome instead of standing out
   as solid colour blocks. .concept-accent / .category-accent at
   lines 2265 / 2269 already define the goldenrod / magenta font
   colours used here — no per-element override needed. */

/* Utility helpers (absent from google-copilot meta-port.css before this patch) */
.help-text {
  color: #6c757d;
  margin-top: 4px;
  font-size: 11px;
}

.help-box {
  font-size: 11px;
  color: #6c757d;
  padding: 8px;
  background-color: #f8f9fa;
  border-radius: 4px;
  border: 1px solid #dee2e6;
}

.text-error {
  color: #dc3545;
}

/* ─── Jobs panel — cell layout ── */
/* ROW POLICY: one row = one line. Every cell nowrap; Target (unbounded
   length) and Username ellipsize with a tooltip and absorb the slack. */
.jp-td-caret {
  width: 22px;
  cursor: pointer;
  color: #888;
  text-align: center;
}
/* Queue item public ref (ITM1-...). Values match the inline QUE1-/ROT1-
   refs in the same panel so the three levels read as one family. */
.queue-item-waiting {
  /* Marks a pending item the rotation is stepping over (#293). Sits next to
     .queue-item-ref in the same cell, so it borrows its type scale and only
     adds the badge shape — without a rule of its own the element rendered as
     bare unstyled text and read as a stray word rather than a signal. */
  display: inline-block;
  padding: 1px 6px;
  border-radius: 9px;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
  vertical-align: middle;
  color: #8a6d1f;
  background: #fff4d6;
  border: 1px solid #f0dca6;
}
.queue-item-ref {
  display: inline-block;
  margin-right: 6px;
  font-size: 11px;
  font-family: monospace;
  color: #6c757d;
  white-space: nowrap;
  vertical-align: middle;
}
.jp-td-username {
  font-size: 12px;
  color: #555;
  /* min == max: a FIXED width, not "up to". The table is table-layout:auto, so
     the Origin column (Marta C4) took width out of here — the cell rendered at
     90px, leaving 36px for the name after avatar+gap, and "pvl-misha" (54px)
     wrapped onto two lines.

     120, not the original 130: the jobs table sits in a fixed 880px panel with
     no slack, so those 10px are what keeps .jp-td-jobtype off a second line
     ("Create CS" needs ~87px and had 79px at 130). Measured on the live page
     across 130/120/112/108 — 120 is the smallest change that puts BOTH the
     username and Job Type on one line at zero overflow. Longer usernames
     ellipsize, as they already did. */
  min-width: 100px;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.jp-username-with-avatar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* The ellipsis lives on the td, but a flex item won't shrink below its
     content without this pair — that is why the column kept resizing. */
  min-width: 0;
  max-width: 100%;
}

.jp-username-with-avatar > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Origin (Marta C4): shrink-to-fit. `width: 1%` on an auto-layout table asks
   for the narrowest column that still fits its content, so the chip takes
   exactly what it needs and no more — the remaining width stays with Target
   and Job Type, which is where a long value actually needs it. */
.jp-td-origin {
  width: 1%;
  white-space: nowrap;
}
.jp-td-target {
  font-weight: 500;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jp-td-target .jp-td-target-id {
  font-size: 10px;
  color: #888;
  margin-left: 4px;
}
.jp-td-jobtype {
  white-space: nowrap;
  font-size: 12px;
  color: #444;
  /* .jobs-panel td sets word-break:break-all, which exists to stop long
     space-less values (ids, filenames) pushing a horizontal scrollbar. Job
     types are short labels WITH spaces, so break-all just made them break
     mid-word — "Upload O / nly", "Update C / S". Break at the space instead;
     overflow-wrap:anywhere keeps the original protection for the hypothetical
     unbreakable token. Scoped to this cell so the blanket rule stands. */
  word-break: normal;
  overflow-wrap: anywhere;
}
.jp-td-jobtype i {
  color: #6c757d;
  margin-right: 5px;
}
/* Metadata. 11px + #666 puts "when" below the username and job type, which
   are what you actually scan a log for, without going so small it stops being
   comfortably readable. Deliberately not 10px: that size belongs to an
   annotation sitting inside another cell (.jp-td-target-id), and this is a
   column of its own. Both were tried on the running page at 10 and 11. */
.jp-td-created {
  font-size: 11px;
  color: #666;
  white-space: nowrap;
}
/* Shrink-to-fit, same as .jp-td-origin. Without a width the auto-layout table
   hands this column slack it has no use for — the cell is an icon, and only
   the optional "Archived" badge ever needs more. The freed width goes to
   Target and Job Type, where long values actually need it. */
.jp-td-status {
  width: 1%;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}
/* Center the status content as one group both axes. A block flex that fills
   the cell (height:100%) centres the icon (a baseline-positioned glyph) and
   the optional "Archived" badge via align-items/justify-content — robust
   regardless of the row height or the cell's text-align/vertical-align. */
.jp-status-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.jp-td-actions {
  text-align: right;
  white-space: nowrap;
}
.jp-action-btn {
  font-size: 11px;
  padding: 3px 8px;
  margin-left: 4px;
  border: 1px solid #c9b96a;
  background: #fff;
  border-radius: 4px;
  cursor: pointer;
  color: #444;
}
.jp-action-btn:hover { background: #fffbe5; }
.jp-action-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.jp-action-btn--danger {
  border-color: #dc3545;
  color: #b02a37;
}
.jp-action-btn--danger:hover {
  background: #fff5f5;
}
.jp-action-btn.is-primary {
  background: #2c6cd5;
  color: #fff;
  border-color: #2c6cd5;
}
.jp-action-btn.is-primary:hover { background: #1d57b8; }

.job-payloads-modal {
  max-width: min(1280px, 96vw);
  width: 96vw;
}

.job-payloads-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px;
  padding: 14px;
  overflow: hidden;
}

.job-payloads-section {
  min-width: 0;
}

.job-payloads-section h4 {
  margin: 0 0 6px;
  font-size: 12px;
  color: #343a40;
}

.job-payloads-section .jp-result-pre {
  max-height: 68vh;
}

.job-payloads-loading,
.job-payloads-error {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px;
  color: #495057;
  font-size: 13px;
}

.job-payloads-error {
  color: #b02a37;
}

@media (max-width: 900px) {
  .job-payloads-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.jp-detail-row-tr td {
  background: rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid #e5d9a0;
  padding: 0 10px 10px 32px;
}

.jp-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 500;
}

.jp-status-badge-partial {
  background: #fff3cd;
  color: #856404;
}

.jp-status-badge-default {
  background: #f8f9fa;
  color: #6c757d;
}

.jp-status-with-warning {
  display: inline-flex;
  line-height: 1;
  position: relative;
}

.jp-status-warning-overlay {
  bottom: -4px;
  color: #dc3545;
  font-size: 10px;
  position: absolute;
  right: -6px;
}

/* Step plan row (used in expanded detail) — pending/running/done/failed dots */
.jp-step-row.is-pending .jp-step-dot { background: #d0d0d0; }
.jp-step-row.is-running .jp-step-dot { background: #ff9800; }
.jp-step-row.is-running .jp-step-name::after {
  content: " ";
  display: inline-block;
  margin-left: 6px;
  border: 2px solid #ff9800;
  border-top-color: transparent;
  border-radius: 50%;
  width: 9px;
  height: 9px;
  animation: jp-spin 0.7s linear infinite;
  vertical-align: -1px;
}
.jp-step-row.is-succeeded .jp-step-dot { background: #28a745; }
.jp-step-row.is-failed .jp-step-dot { background: #dc3545; }
@keyframes jp-spin { to { transform: rotate(360deg); } }

/* ─── Maintenance / deployment overlay (mirrors Meta) ────────────────────── */
.maintenance-overlay {
  position: fixed;
  inset: 0;
  background: rgba(33, 37, 41, 0.85);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.maintenance-content {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  padding: 36px 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
}

.maintenance-icon {
  font-size: 3rem;
  color: #007bff;
  margin-bottom: 14px;
}

.maintenance-content h2 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  color: #212529;
}

.maintenance-content p {
  margin: 0 0 20px;
  color: #495057;
  line-height: 1.55;
  font-size: 14px;
}

/* .maintenance-spinner + .spinner are already defined in the header section */

/* ─── merged from queues-panel.css ─── */
/*
 * Queues panel chrome — port of MetaAssetManager's panel CSS rules.
 *
 * The DOM hierarchy in our QueuesPanel mirrors Meta's:
 *   .side-panel.queues-panel
 *     ├─ .side-panel-drag-handle
 *     ├─ .side-panel-header > .side-panel-title + .side-panel-close-button
 *     ├─ .side-panel-filters > .side-panel-filters-col×N
 *     ├─ .side-panel-tabs
 *     └─ .side-panel-body > .side-panel-body-inner > .data-table-wrap
 *           └─ .table-wrapper > table.data-table > tbody > .queue-item
 *                                                           └─ .queue-detail
 *
 * Class names + property values are taken verbatim from the
 * MetaAssetManager App.css so any visual deviation comes only from
 * the surrounding shell (header, fonts, button base styles), which we
 * already inherit from the global stylesheet.
 */

/* ─── Multi-panel parent (.panels) — direct port of Meta's pattern.
 * Anchored to the right edge under the AppHeader, flex `row-reverse`
 * so the most-recently-rendered panel (JobsPanel) ends up on the
 * right and QueuesPanel slots in to its left. `pointer-events: none`
 * lets clicks pass through the empty area between/around panels so
 * the user can interact with the page underneath; each panel
 * re-enables pointer-events for itself. */
.panels {
  position: fixed;
  top: 60px;                       /* clears the fixed AppHeader */
  right: 0;
  bottom: 0;
  z-index: 15;
  display: flex;
  flex-direction: row-reverse;
  pointer-events: none;
}

/* ─── Side-panel chrome ─────────────────────────────────────────── */
.side-panel {
  position: relative;
  width: 750px;
  min-width: 600px;
  /* Sits below the 60px AppHeader inside the .panels flex container. */
  height: calc(100vh - 60px);
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.15);
  background: white;
  overflow-y: auto;
  pointer-events: auto;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
}

/* When more than one panel is open, narrow each so they fit
 * side-by-side without overflowing — same rule Meta uses. */
.side-panel:not(:only-child) {
  max-width: 40vw;
}

.side-panel-drag-handle {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 1002;
  transition: background-color ease 0.2s;
}

.side-panel-drag-handle:hover {
  background: inherit;
  filter: brightness(0.8);
}

.side-panel-header {
  padding: 10px 20px;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.side-panel-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

.side-panel-close-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 4px;
  color: #6c757d;
  font-size: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: all 0.2s ease;
}

.side-panel-close-button:hover {
  background-color: rgba(0, 0, 0, 0.1);
  color: #495057;
}

.side-panel-filters {
  padding: 10px 16px;
  border-bottom: 1px solid rgb(226, 230, 234);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.side-panel-filters-col {
  flex: 1;
  min-width: 140px;
}

.side-panel-filters-col .form-control {
  width: 100%;
  box-sizing: border-box;
}

.side-panel-filters label {
  display: block;
  font-size: 11px;
  color: #6c757d;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}

.jobs-panel-filters {
  align-items: flex-start;
}

.jobs-panel-filters .jobs-filter-col {
  /* Flexible columns that FILL the whole filter bar (no leftover gap on the
     right when wide) and shrink gracefully on a narrow panel — replacing the
     fixed widths that left empty space when wide and wrapped awkwardly when
     narrow. flex-basis 0 + per-column flex-grow shares the row by weight. */
  flex: 1 1 0;
  min-width: 120px;
}

.jobs-filter-col--user {
  flex-grow: 1;
}

.jobs-filter-col--type {
  flex-grow: 1.5;
}

.jobs-filter-col--status {
  flex-grow: 1.5;
}

/* Target filter column: pinned to 140px (min = max) so it stays compact and
   leaves room for the other filters. Long app names truncate in the trigger
   and are fully readable in the open dropdown (which expands to content). */
.jobs-filter-col--target,
.side-panel-filters-col--target {
  flex: 0 0 140px;
  min-width: 140px;
  max-width: 140px;
}
/* Beat the container-scoped `.jobs-panel-filters .jobs-filter-col`
   min-width:120px so the 140px floor actually holds in the jobs panel. */
.jobs-panel-filters .jobs-filter-col--target { min-width: 140px; }

/* User filter column: pinned to 150px (min = max). It was capped at 100px
   when the avatars came out, which left the trigger truncating almost
   every real name — the expanding dropdown made that survivable rather
   than good. 150px shows most names outright. min-width is set here too
   and the selector is scoped under .side-panel-filters so it outranks the
   panel's base `.jobs-panel-filters .jobs-filter-col { min-width: 120px }`. */
.side-panel-filters .side-panel-filters-col--user {
  flex: 0 0 150px;
  min-width: 150px;
  max-width: 150px;
}

/* In the side-panel filter bars (Jobs/Queues/Workflows), the User AND Target
   pickers grow their open dropdown past the (narrow/capped) trigger so long
   "name (email)" rows and long app names stay readable — floored at the
   trigger width, capped so it can't run away. Pickers elsewhere (setup /
   monitor forms) keep their trigger-width menu. */
.side-panel-filters .target-select-box__menu {
  right: auto;
  min-width: 100%;
  width: max-content;
  max-width: 340px;
}

/* A <button> does not inherit font, so this trigger renders at the UA default
   13.33px while the inputs beside it are 12px — visible only once a value is
   picked, since the label inherits from here. */
.side-panel-filters .target-select-box__button {
  font: inherit;
}

/* The placeholder shares __meta's chip rule (0.8em ≈ 9.6px). In a filter bar
   it is the default state, so match the 12px controls beside it. Scoped: the
   setup/monitor forms keep the chip treatment. */
.side-panel-filters .target-select-box__placeholder {
  font-size: 12px;
}

/* Match the compact native filters (form-sm) in the bar: the custom trigger
   defaults to a taller 38px min-height + form-control padding, which made the
   User/Target pickers stand ~10px taller than the Search/Status controls next
   to them. Shrink them to the same ~28px box. */
.side-panel-filters .target-select-box__button {
  min-height: 0;
  padding: 5px 6px;
}

/* Queues bar only. Its native <select>/<input> sat shorter than the User
   picker beside them — padding cannot line those up, since a button, a
   select and an input each have their own intrinsic line box. 28px is the
   height the jobs bar's controls already settle at, so both bars match.

   Deliberately NOT applied to `.side-panel-filters` at large: the jobs bar
   is tuned control-by-control (its TokenMultiSelect pins its own 28px),
   and a shared box there disturbed the chevrons. */
.queues-panel-filters .target-select-box__button,
.queues-panel-filters .form-control {
  box-sizing: border-box;
  min-height: 28px;
}

/* The select's arrow gap is deliberately NOT handled here: #236 already
   swaps the OS-default arrow for a consistent 12px chevron on every
   `select.form-control` (with padding-right: 30px). Adding a second
   treatment would give the queues bar two competing chevrons. */

.jobs-filter-col--search {
  flex-grow: 1.5;
}

.jobs-filter-type-select {
  width: 100%;
  min-width: 0;
}

/* Scheduled-job status cell: reuse the shared cal-chip but shrunk + muted so
   the scheduled date sits quietly next to the calendar icon. */
.jp-sched-status .cal-chip {
  zoom: 0.8;
  filter: grayscale(1);
  opacity: 0.7;
}

/* The inner CalendarTimestamp renders its own `title` (a UTC timestamp), so
   hovering the date chip showed a DIFFERENT tooltip than hovering the icon.
   Make the chip transparent to the pointer so the whole cell is one hover
   target — the parent .jp-sched-status "Scheduled for …" title covers both
   the icon and the date. */
.jp-sched-status .cal-ts {
  pointer-events: none;
}

.side-panel-tabs {
  display: flex;
  border-bottom: 1px solid #999;
  gap: 2px;
  padding: 0 16px;
}

.side-panel-tab {
  padding: 8px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #495057;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.side-panel-tab.is-active {
  color: #1565c0;
  border-bottom-color: #1565c0;
  font-weight: 600;
}

.side-panel-body {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.side-panel-body-inner {
  padding: 16px;
}

.side-panel-footer {
  flex-shrink: 0;
  border-top: 1px solid #e9ecef;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  color: #495057;
}

.side-panel-footer .footer-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.side-panel-footer .footer-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.side-panel table {
  font-size: 12px;
}

/* ─── Panel-kind backgrounds (verbatim from Meta) ───────────────── */
.side-panel.jobs-panel    { background: #FAF3E0; }
.side-panel.queues-panel  { background: #d4e3e0; }
.side-panel.workflows-panel { background: #d9e6ee; }

/* ─── Per-queue row + expandable detail ─────────────────────────── */
.side-panel tr.expanded,
.side-panel tr.expanded:hover,
.side-panel tr.details-row {
  background: rgba(255, 255, 255, 0.7);
}

.side-panel tr.expanded td {
  border-bottom: none;
}

.side-panel .data-table td {
  /* Center row cells vertically so the Status pill/badge (and the single-line
     User/Type/Target cells) line up on the row's mid-line. The nested
     details-row table below keeps its own alignment. */
  vertical-align: middle;
}

.side-panel .data-table .details-row table thead {
  background: rgba(0, 0, 0, 0.05);
  color: #155724;
}

.side-panel .data-table .details-row table td {
  border-bottom: dotted 1px #fff;
}

.queues-panel td.cell-adset {
  font-weight: bold;
}

.queues-panel .adset-parent-campaign {
  color: #999;
  margin-top: 2px;
  font-style: italic;
  font-size: .9em;
  font-weight: normal;
  word-break: break-all;
}

.queues-panel td,
.jobs-panel td {
  word-break: break-all;
}

/* The rule above keeps long ids/filenames inside narrow list cells, but
   it INHERITS into the expanded detail pane, where the content is prose
   (humanized error text, skip reasons). break-all splits on any character,
   so "…once it appears approved…" rendered as "…appears a / pproved…".
   overflow-wrap: anywhere keeps the no-horizontal-scroll guarantee for
   unbreakable tokens while wrapping prose on word boundaries. Cells that
   genuinely need break-all set it on themselves and are unaffected. */
.queues-panel tr.details-row > td,
.jobs-panel tr.details-row > td {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* ─── Queue detail card (per rotation, per pending block) ───────── */
.queue-detail {
  border-radius: 6px;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.7);
}

.rotation-asset-card-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.rotation-asset-card-grid > * {
  min-width: 0;
}

.rotation-asset-card-grid > :first-child {
  flex: 0 0 30%;
}

.rotation-asset-card-grid > :last-child {
  flex: 0 0 70%;
  min-width: 0;
}

.rotation-asset-card-right {
  border-left: 1px solid #dee2e6;
  padding-left: 12px;
}

.rotation-asset-row {
  border-top: 1px dotted #dee2e6;
  padding-top: 6px;
}

.rotation-asset-row:first-child {
  border-top: none;
  padding-top: 0;
}

@media (max-width: 900px) {
  .rotation-asset-card-grid {
    flex-direction: column;
    gap: 10px;
  }

  .rotation-asset-card-right {
    border-left: none;
    border-top: 1px solid #dee2e6;
    padding-left: 0;
    padding-top: 10px;
  }
}

.queue-detail.ongoing    { background-color: #ffffcc; }
.queue-past-rotations .queue-detail { background-color: rgba(0, 0, 0, 0.03); }
.queue-detail.done       { border-color: #28a745; background-color: #28a7450d; }
.queue-detail.failed     { border-color: #cc0000; background-color: #ffefef; }
.queue-detail.processing { border-color: gold; background-color: #ffffef; }

.queue-item .queue-detail {
  border-radius: 0 0 4px 4px;
}

.queue-card {
  border-radius: 8px;
  padding: 15px;
  margin: 10px;
  background-color: rgba(255, 255, 255, 0.3);
}

/* ─── Schedule-day chip (verbatim) ──────────────────────────────── */
.btn-schedule-selected {
  background-color: #1565c0 !important;
  color: white !important;
  border-color: #1565c0 !important;
}

/* Pill geometry for the rotation-day chips. Was 6 inline style props
   duplicated in QueueDefaultsModal; both pickers use this now.
   `--compact` keeps the shape but tightens it for the dense queue editor. */
.btn-schedule-day {
  padding: 6px 10px !important;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
}

.btn-schedule-day--compact {
  padding: 3px 9px !important;
  font-size: 11px;
}

/* ─── Performance-snapshot list ─────────────────────────────────── */
.queue-perf-list {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 0;
  display: grid;
  gap: 4px;
}
.queue-perf-list li {
  font-size: 12px;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.queue-perf-list li .perf-value {
  font-weight: 600;
}
.queue-perf-list li.is-paused .perf-value { color: #cc0000; }
.queue-perf-list li.is-best   .perf-value { color: #28a745; }

/* ─── No-eligible banner (yellow) ───────────────────────────────── */
.queue-no-eligible-banner {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  padding: 10px;
  border-radius: 4px;
  color: #78350f;
  font-size: 12px;
  margin: 8px 0;
}

/* ─── Text Assets Tabs (ported from MetaAssetManager) ───────────── */
.text-assets-tabs {
  display: flex;
  border-bottom: 1px solid #dee2e6;
  background: #f8f9fa;
}

.text-assets-tab {
  padding: 10px 20px;
  border: none;
  border-top: 2px solid transparent;
  background: transparent;
  color: #6c757d;
  cursor: pointer;
  font-weight: normal;
  font-size: 14px;
  position: relative;
  border-bottom: 1px solid transparent;
  margin-bottom: -1px;
  transition: all 0.2s ease;
}

.text-assets-tab:hover:not(.active) {
  background: #e9ecef;
  color: #495057;
}

.text-assets-tab.active {
  background: #ffffff;
  color: #007bff;
  border-top-color: #007bff;
  border-bottom-color: #ffffff;
  font-weight: 600;
}

.manual-text-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.manual-text-grid {
  display: flex;
  gap: 24px;
}

.manual-text-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.manual-text-title {
  font-size: 13px;
  font-weight: 600;
  color: #495057;
}

.manual-text-input {
  padding: 8px 10px;
  border: 1px solid #ced4da;
  border-radius: 6px;
  font-size: 13px;
  width: 100%;
}

.manual-text-input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0,123,255,0.15);
}

.manual-text-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.manual-text-actions {
  display: flex;
  justify-content: flex-start;
}

/* ─── Spend / performance progress bar ──────────────────────────── */
.spend-progress-bar {
  display: inline-block;
  width: 40px;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

.spend-progress-fill {
  display: block;
  height: 100%;
  background: #198754;
}

/* Loading state for performance cells: three blinking dots. A dash in
 * a perf column reads as "no data / bug" while the metrics query is
 * still in flight - the dots say "coming". */
.perf-loading-dots span {
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 1px;
  border-radius: 50%;
  background: #adb5bd;
  animation: perf-dot-blink 1.2s infinite;
}
.perf-loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.perf-loading-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes perf-dot-blink {
  0%, 80%, 100% { opacity: 0.25; }
  40% { opacity: 1; }
}

/* ─── Column selector dropdown ──────────────────────────────────── */
.column-selector {
  position: relative;
}

.column-selector-panel {
  position: absolute;
  right: 0;
  top: 110%;
  background: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  padding: 8px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  z-index: 15;
  min-width: 180px;
}

.column-selector-option {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  cursor: pointer;
}

/* ─── User management table (ported verbatim from MetaAssetManager) ── */
.table-container {
  overflow: auto;
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.user-management-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.user-management-table th {
  background: #f9fafb;
  padding: 12px 8px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 10;
}

.user-management-table td {
  padding: 12px 8px;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: top;
}

.user-management-table tbody tr:hover { background: #f9fafb; }

.user-cell { min-width: 120px; }
.user-cell strong { display: block; color: #1f2937; margin-bottom: 2px; }
.user-cell .user-id {
  font-size: 11px; color: #6b7280; font-family: monospace;
}

.folders-cell { min-width: 200px; max-width: 250px; }
.folders-list { max-height: 100px; overflow-y: auto; }
.folder-item {
  margin-bottom: 4px;
  padding: 4px 6px;
  background: #f3f4f6;
  border-radius: 4px;
}
.folder-name { display: block; font-weight: 500; color: #374151; }
.folder-id {
  display: block; font-size: 10px; color: #6b7280; font-family: monospace;
}
.no-folders { color: #9ca3af; font-style: italic; }

.workflows-cell { text-align: center; }
.active-count { font-weight: 600; color: #059669; }
.inactive-count { color: #6b7280; }
.total-count { color: #6b7280; margin-left: 4px; }

.jobs-cell { min-width: 180px; }
.jobs-history { position: relative; }
.total-jobs { font-weight: 600; font-size: 16px; color: #1f2937; }
.monthly-breakdown { margin-top: 8px; }
.mini-table { width: 100%; font-size: 11px; border-collapse: collapse; }
.mini-table th,
.mini-table td {
  padding: 2px 4px;
  text-align: left;
  border-bottom: 1px solid #f3f4f6;
}
.mini-table th { font-weight: 500; color: #6b7280; background: #f9fafb; }

.last-access-cell { min-width: 110px; }
.access-date { font-weight: 500; color: #374151; }
.access-time { font-size: 11px; color: #6b7280; }
.never-accessed { color: #9ca3af; font-style: italic; }

.permission-cell { text-align: center; padding: 12px; }

.unknown-permission {
  color: #9ca3af;
  font-style: italic;
  font-size: 12px;
}

.section-container {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
}

.target-select,
.target-select-box {
  position: relative;
  /* Block-level flex that FILLS its parent (width:100%) instead of the
     old inline-flex, which shrink-wrapped to its content — narrow on the
     placeholder, then ballooning (and overflowing its column) once a
     target was picked. Now the trigger always fills the column and the
     label truncates, so the width is stable whether or not a value is
     selected. flex:1 still lets it grow to fill a flex-row parent. */
  display: flex;
  width: 100%;
  flex: 1;
  min-width: 0;
}

.target-select-box__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 38px;
  text-align: left;
  background: #fff;
}

.target-select-box__menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #d7dce2;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}

.target-select-box__option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  outline: 0;
  box-shadow: none;
  appearance: none;
  border-radius: 8px;
  background: transparent;
  color: #212529;
  text-align: left;
  cursor: pointer;
}

.target-select-box__option:hover:not(:disabled),
.target-select-box__option.is-selected {
  background: #eef6ff;
}

.target-select-box__option:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.target-select-box__value {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  width: 100%;
}

.target-select-box__label {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.target-select-box__meta,
.target-select-box__placeholder {
  background: #ddd;
  color: #5c6773;
  font-size: 0.8em;
  padding: 1px 6px;
  border-radius: 999px;
}

.target-select-box__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.8em;
  padding: 1px 6px;
  border-radius: 999px;
  background: #ddd;
  color: #5c6773;
  font-size: 0.8em;
  font-weight: 600;
  line-height: 1.4;
}

/* ─── Step 5 Triggers — inline config boxes (green=queue, blue=scheduled) ── */
.trigger-config-box {
  margin-top: 16px;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid #d0d7de;
}
.trigger-config-box--blue {
  background: #f5faff;
  border-color: #2c7be5;
}
.trigger-config-box--green {
  background: #f4fbf6;
  border-color: #2ea44f;
  border-radius: 12px 0 12px 12px;
}
.trigger-config-box__title {
  font-weight: 700;
  margin-bottom: 10px;
}
.trigger-config-box__row {
  display: flex;
  gap: 12px;
  align-items: end;
}
.trigger-config-field { flex: 1; }
.trigger-config-field--time { max-width: 170px; }
.trigger-config-box__help {
  margin-top: 8px;
  font-size: 12px;
}
.queue-defaults-inline {}
.queue-defaults-inline__metrics-row {
  margin-top: 14px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.queue-defaults-inline__metrics-field {
  flex: 1 1 160px;
  min-width: 160px;
}

/* ─── <campaign> badge — prepended to every campaign name display ────────── */
campaign {
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
  color: #555;
}
campaign::before {
  content: '\f0a1'; /* fa-bullhorn */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.85em;
}

/* ─── <file> — wraps every rendered filename in monospace ──────────────────
   Use exclusively for actual filenames (e.g. video.mp4, banner.png), never
   for paths or labels. Custom element declared in
   `presentation/web/src/types/jsx-custom.d.ts`. */
file {
  font-family: monospace;
}

/* ─── <set> badge — prepended to every AppLovin creative-set name display ── */
set {
  font-size: 0.7em;
  text-transform: uppercase;
  color: #fff;
  background: #6366f1;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: monospace;
  margin-right: 4px;
  vertical-align: middle;
  letter-spacing: 0.5px;
}
set::after {
  content: 'set';
}

/* ─── <asset> badge — prepended to every Media Library asset name ────────── */
asset {
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
  color: #555;
}
asset::before {
  content: '\f15b'; /* fa-file */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 0.85em;
  margin-right: 3px;
}

/* ─────────────────────────────────────────────────────────────────
 * Workflows feature-upgrade popup. Direct port of MetaAssetManager
 * App.css `.feature-upgrade-*` rules. Used by FeatureUpgradePopup
 * (the placeholder Workflows upsell shown by the header button).
 * ───────────────────────────────────────────────────────────────── */
.feature-upgrade-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.feature-upgrade-modal {
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 16px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
  max-width: 600px;
  width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  animation: slideUp 0.4s ease;
}

.feature-upgrade-header {
  position: relative;
  padding: 32px 40px 24px;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.feature-icon {
  position: relative;
  display: inline-block;
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.9;
}

.upgrade-crown {
  position: absolute;
  top: -8px;
  right: -8px;
  font-size: 16px;
  color: gold;
  text-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
  animation: crownGlow 2s infinite alternate;
}

.feature-upgrade-header h2 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.feature-upgrade-header .close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.feature-upgrade-header .close-button:hover {
  background: rgba(255, 255, 255, 0.3);
}

.feature-upgrade-content {
  flex: 1;
  overflow: auto;
  padding: 24px 40px 40px;
}

.feature-paragraph {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 20px;
  opacity: 0.95;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.feature-paragraph:last-of-type {
  margin-bottom: 32px;
}

.feature-cta {
  text-align: center;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.cta-text {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #fef3cd;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.upgrade-button {
  background: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
  color: #1a1a1a;
  border: none;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.upgrade-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
  background: linear-gradient(135deg, #ffed4e 0%, #ffc947 100%);
}

.upgrade-button i {
  opacity: 0.8;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px) scale(0.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes crownGlow {
  from { opacity: 0.8; transform: scale(1); }
  to   { opacity: 1;   transform: scale(1.1); }
}

/* Platform badges: green Android robot, blue-gray Apple. Applied
   globally so every Android/iOS marker across the SPA picks up the
   same colour without each component having to re-style. */
.fa-android { color: #37b24d; }
.fa-apple   { color: #8e8e93; }

/* --- Step 5 Triggers cards (ported verbatim from Google Creative
   Copilot). Purple = "now", blue = "scheduled", green = "queue".
   Selected blue/green cards lift translateY(18px) and drop their
   bottom border so they merge into the config panel that drops below
   them. Locked cards (no queue_access) dim + show a gold crown. --- */
.trigger-card-row {
  display: flex;
  gap: 12px;
}

.trigger-card {
  flex: 1;
  text-align: left;
  border: 1px solid #d0d7de;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  background: #fff;
  box-shadow: none;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.trigger-card:hover {
  transform: translateY(-1px);
}

.trigger-card__title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.trigger-card__blurb {
  font-size: 13px;
  color: #555;
  line-height: 1.45;
}

.trigger-card--purple {
  background: #faf6ff;
  border-color: #e3d6f5;
}

.trigger-card--purple.is-selected {
  border-color: #7948c5;
  box-shadow: 0 0 0 2px rgba(121, 72, 197, 0.18);
}

.trigger-card--blue {
  background: #f5faff;
  border-color: #d0e3ff;
}

.trigger-card--blue.is-selected {
  border-color: #2c7be5;
  box-shadow: none;
  transform: translateY(18px);
  border-bottom: none;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.trigger-card--green {
  background: #f4fbf6;
  border-color: #cdebd6;
}

.trigger-card--green.is-selected {
  border-color: #2ea44f;
  box-shadow: none;
  transform: translateY(18px);
  border-bottom: none;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.trigger-card--locked {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Neutralize the base .trigger-card:hover lift (translateY(-1px)) so a
   locked card doesn't feel interactive. */
.trigger-card--locked:hover {
  transform: none;
}

.trigger-card__crown {
  margin-left: 6px;
  color: gold;
  font-size: 0.85em;
}

.agc-preview-card-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.agc-preview-card {
  border: 1px solid #d9dee6;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.agc-preview-card.is-blocked {
  border-color: #ffd8a8;
}

.agc-preview-card-summary {
  width: 100%;
  list-style: none;
  cursor: pointer;
  padding: 10px 16px;
  border: 0;
  background: #fff;
  text-align: left;
}

.agc-preview-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.agc-preview-card-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #212529;
}

.agc-preview-card-title span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.agc-preview-card-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #495057;
}

.agc-preview-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.agc-preview-card-chip--error {
  color: #c92a2a;
  background: #fff5f5;
  border-color: #ffc9c9;
}

.agc-preview-card-chip--reused {
  color: #d9480f;
  background: #fff4e6;
  border-color: #ffd8a8;
}

.agc-preview-card-body {
  display: grid;
  gap: 14px;
  padding: 12px 16px 16px;
  border-top: 1px solid #edf0f2;
}

.agc-preview-card-section {
  display: grid;
  gap: 6px;
}

.agc-preview-card-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0;
}

.agc-preview-card-section-title--error {
  color: #c92a2a;
}

.agc-preview-card-list {
  margin: 0;
  padding-left: 18px;
  color: #212529;
  font-size: 13px;
}

.agc-preview-card-list li + li {
  margin-top: 4px;
}

.agc-preview-card-list--plain {
  display: grid;
  gap: 4px;
  padding-left: 0;
  list-style: none;
}

.agc-preview-card-list--plain li {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 5px 8px;
  border: 1px solid #e9ecef;
  border-radius: 6px;
  background: #f8f9fa;
}

.agc-preview-card-list--plain file {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.agc-preview-card-source-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #e7f5ff;
  color: #1864ab;
}

.agc-preview-card-reused-row {
  background: #fff8f0 !important;
  border-color: #ffe8cc !important;
  font-style: italic;
}

.agc-preview-card-source-chip--reused {
  background: #fff4e6;
  color: #d9480f;
}

/* Step 0 view-type picker (Monitor / Workflow) — vertical card stack. */
.mvt-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.wt-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.wt-card {
  position: relative;
  border: 2px solid transparent;
  border-radius: 10px;
  padding: 14px 16px;
  text-align: left;
  cursor: pointer;
  background: #fff;
  transition: transform 80ms ease, border-color 120ms ease, box-shadow 120ms ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  font-family: inherit;
  width: 100%;
}

.wt-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.wt-card--disabled,
.wt-card--disabled:hover {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* When any card is selected, dim the other (non-selected) cards. */
.wt-cards:has(.wt-card--selected) .wt-card:not(.wt-card--selected),
.mvt-cards:has(.wt-card--selected) .wt-card:not(.wt-card--selected) {
  opacity: 0.7;
}

.wt-cards:has(.wt-card--selected) .wt-card--disabled {
  opacity: 0.55;
}

.wt-card__icon {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
  font-size: 18px;
}

.wt-card--blue   .wt-card__icon { color: #2c7be5; }
.wt-card--green  .wt-card__icon { color: #2ea44f; }
.wt-card--purple .wt-card__icon { color: #7948c5; }
.wt-card--orange .wt-card__icon { color: #f97316; }

.wt-card__title {
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 4px;
}

/* Premium-locked Monitor view-type card (Impact Analysis without access). */
.wt-card__crown {
  margin-left: 6px;
  color: #f59f00;
  font-size: 0.85em;
}
.wt-card--premium .wt-card__icon {
  opacity: 0.85;
}

.wt-card__desc {
  font-size: 12px;
  color: #555;
  line-height: 1.4;
}

.wt-card--blue   { border-color: #d0e3ff; background: #f5faff; }
.wt-card--green  { border-color: #cdebd6; background: #f4fbf6; }
.wt-card--purple { border-color: #e3d6f5; background: #faf6ff; }
.wt-card--orange { border-color: #fde0c8; background: #fff7ed; }

.wt-card--blue.wt-card--selected   { border-color: #2c7be5; box-shadow: 0 0 0 2px rgba(44, 123, 229, 0.2); }
.wt-card--green.wt-card--selected  { border-color: #2ea44f; box-shadow: 0 0 0 2px rgba(46, 164, 79, 0.2); }
.wt-card--purple.wt-card--selected { border-color: #7948c5; box-shadow: 0 0 0 2px rgba(121, 72, 197, 0.2); }
.wt-card--orange.wt-card--selected { border-color: #f97316; box-shadow: 0 0 0 2px rgba(249, 115, 22, 0.2); }

/* Selected card — CSS-only triangle pointing right (suggests "this is
   the column you'll jump to next"). Two pseudo-elements: outline +
   fill triangles layered so the card looks like it has a pointy edge. */
.wt-card--selected::before,
.wt-card--selected::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.wt-card--selected::before {
  right: -16px;
  transform: translateY(-50%);
  border-top: 16px solid transparent;
  border-bottom: 16px solid transparent;
}

.wt-card--selected::after {
  right: -13.5px;
  transform: translateY(-50%);
  border-top: 14px solid transparent;
  border-bottom: 14px solid transparent;
}

.wt-card--blue.wt-card--selected::before    { border-left: 16px solid #2c7be5; }
.wt-card--blue.wt-card--selected::after     { border-left: 14px solid #f5faff; }
.wt-card--green.wt-card--selected::before   { border-left: 16px solid #2ea44f; }
.wt-card--green.wt-card--selected::after    { border-left: 14px solid #f4fbf6; }
.wt-card--purple.wt-card--selected::before  { border-left: 16px solid #7948c5; }
.wt-card--purple.wt-card--selected::after   { border-left: 14px solid #faf6ff; }
.wt-card--orange.wt-card--selected::before  { border-left: 16px solid #f97316; }
.wt-card--orange.wt-card--selected::after   { border-left: 14px solid #fff7ed; }

/* ----- Monitor: Activity & Performance overview ----- */
/* Mini step column — for the leftmost narrow Step 0 (view-type picker).
   Ports MetaAssetManager's WorkflowTypeStep.css `.step-column-mini`. */
.step-column-mini {
  min-width: 300px;
  max-width: 300px;
  background: none;
  border: none;
  box-shadow: none;
  opacity: 1 !important;
  /* Snap to start so the canvas's scroll-snap pulls this narrow column
     flush against the left edge instead of centering the next column. */
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  padding: 16px;
  box-sizing: border-box;
}

.monitor-overview-step {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 8px;
  flex: 1 1 0%;
  min-height: 0;
  overflow: hidden;
}

.monitor-overview-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.monitor-overview-toolbar-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: end;
}

.monitor-overview-toolbar-row-primary label {
  min-width: 180px;
}

.monitor-overview-toolbar-row-secondary label {
  min-width: 140px;
}

.monitor-overview-toolbar label {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 140px;
  text-transform: uppercase;
  font-size: 11px;
  color: #475569;
}

.monitor-overview-toolbar select {
  height: 34px;
  border: 1px solid #d8dee6;
  border-radius: 8px;
  padding: 0 10px;
  background: #fff;
}

.monitor-overview-toolbar-row > button {
  height: 34px;
  border: 1px solid #d8dee6;
  border-radius: 8px;
  padding: 0 12px;
  background: #f8f9fb;
}

.monitor-overview-layout {
  display: grid;
  grid-template-columns: 72% auto;
  gap: 12px;
  align-items: stretch;
  flex: 1 1 auto;
  max-height: 700px;
  min-height: 0;
  overflow: hidden;
}

.monitor-overview-chart-panel {
  min-width: 0;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 55%);
  height: 100%;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: none;
}

.monitor-overview-meta {
  margin-bottom: 8px;
  color: #475569;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}

.monitor-overview-refresh-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #bfdbfe;
  border-radius: 999px;
  padding: 2px 8px;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 600;
}

.monitor-overview-refresh-spinner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform: scale(0.72);
  transform-origin: center;
  width: 10px;
  height: 10px;
}

.monitor-overview-warning {
  margin-bottom: 10px;
}

.monitor-overview-chart-canvas {
  position: relative;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 8px;
}

.monitor-overview-loading-center {
  width: 100%;
  height: 100%;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.monitor-overview-chart-canvas canvas {
  display: block;
  width: 100% !important;
}

.monitor-overview-clouds {
  min-width: 0;
  display: flex;
  flex-direction: column;
  flex: 1 1 0;
  height: 100%;
  gap: 10px;
  min-height: 0;
  overflow: auto;
}

.monitor-overview-cloud {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  padding: 10px;
  min-height: 0;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.96) 0%, rgba(244, 248, 252, 0.92) 100%);
}

.monitor-overview-cloud h4 {
  border-bottom: solid 1px #dfdfdf;
  padding-bottom: 8px;
  margin: 0 0 8px 0;
  font-size: 13px;
}

.monitor-overview-cloud-body {
  display: flex;
  flex: 1 1 auto;
  align-items: stretch;
  justify-content: center;
  min-height: 140px;
  overflow: hidden;
}

.monitor-overview-tag-cloud {
  width: 100%;
  height: 100%;
  min-height: 140px;
  padding: 0;
  overflow: hidden;
}

.monitor-overview-empty {
  color: #64748b;
  font-size: 13px;
}

.monitor-overview-actions {
  display: flex;
  justify-content: flex-end;
}

/* ----- Monitor: Asset performance ----- */
.asset-performance {
  font-family: arial, sans-serif;
}

.asset-performance td {
  font-size: 0.8em;
}

.data-table.asset-performance td {
  word-break: break-all;
}

.data-table.asset-performance td.td-name-text {
  font-weight: normal;
  min-width: 200px;
}

/* ----- Monitor: shared utilities ----- */
.ad-account-label {
  color: #6c757d;
  display: block;
  margin-bottom: 4px;
}

.loading-message {
  color: #6c757d;
  margin-left: 12px;
}

.error-message {
  color: #dc3545;
  margin-left: 12px;
}

.empty-state {
  padding: 24px 16px;
  text-align: center;
  color: #6c757d;
  font-style: italic;
  background: white;
}

.loading-spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3f3f3;
  border-top: 2px solid #007bff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.spinner-small {
  width: 12px;
  height: 12px;
}

.agc-preview-card-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.agc-preview-card {
  border: 1px solid #d9dee6;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
}

.agc-preview-card-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 16px;
}

.agc-preview-card-summary::-webkit-details-marker {
  display: none;
}

.agc-preview-card-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.agc-preview-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #212529;
}

.agc-preview-card-chips {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #495057;
}

.agc-preview-card-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px;
  border-radius: 999px;
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

.agc-preview-card-body {
  display: grid;
  gap: 14px;
  padding: 0 16px 16px;
  border-top: 1px solid #edf0f2;
}

.agc-preview-card-section {
  display: grid;
  gap: 6px;
}

.agc-preview-card-section-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: #495057;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.agc-preview-card-list {
  margin: 0;
  padding-left: 18px;
  color: #212529;
  font-size: 13px;
}

.agc-preview-card-list li + li {
  margin-top: 4px;
}

.trigger-card-row {
  display: flex;
  gap: 12px;
}

.trigger-card {
  flex: 1;
  text-align: left;
  border: 1px solid #d0d7de;
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  background: #fff;
  box-shadow: none;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.trigger-card:hover {
  transform: translateY(-1px);
}

.trigger-card__title {
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 4px;
}

.trigger-card__blurb {
  font-size: 13px;
  color: #555;
  line-height: 1.45;
}

.trigger-card--purple {
  background: #faf6ff;
  border-color: #e3d6f5;
}

.trigger-card--purple.is-selected {
  border-color: #7948c5;
  box-shadow: 0 0 0 2px rgba(121, 72, 197, 0.18);
}

.trigger-card--blue {
  background: #f5faff;
  border-color: #d0e3ff;
}

.trigger-card--blue.is-selected {
  border-color: #2c7be5;
  box-shadow: none;
  transform: translateY(18px);
  border-bottom: none;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.trigger-card--green {
  background: #f4fbf6;
  border-color: #cdebd6;
}

.trigger-card--green.is-selected {
  border-color: #2ea44f;
  box-shadow: none;
  transform: translateY(18px);
  border-bottom: none;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.trigger-card--locked {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Neutralize the base .trigger-card:hover lift (translateY(-1px)) so a
   locked card doesn't feel interactive. */
.trigger-card--locked:hover {
  transform: none;
}

.trigger-card__crown {
  margin-left: 6px;
  color: gold;
  font-size: 0.85em;
}

.trigger-status-card {
  margin-bottom: 18px;
  padding: 18px 20px;
  border-radius: 16px;
  border: 1px solid #cfd6dc;
  background: linear-gradient(180deg, #f7f8fa 0%, #edf0f3 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.trigger-status-card--active {
  border-color: #b8e0c3;
  background: linear-gradient(180deg, #f5fbf7 0%, #e7f6eb 100%);
}

.trigger-status-card--paused {
  border-color: #cfd6dc;
  background: linear-gradient(180deg, #f7f8fa 0%, #edf0f3 100%);
}

.trigger-status-card__title {
  font-size: 14px;
  font-weight: 800;
  color: #44515c;
}

.trigger-status-card--active .trigger-status-card__title {
  color: #1f6b35;
}

.trigger-status-card__blurb {
  margin-top: 4px;
  font-size: 12px;
  color: #62707a;
  max-width: 680px;
}

.trigger-status-card--active .trigger-status-card__blurb {
  color: #3f6e4c;
}

.trigger-status-toggle {
  display: inline-flex;
  flex-shrink: 0;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid #cfd6dc;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
  gap: 4px;
}

.trigger-status-card--active .trigger-status-toggle {
  border-color: #c3dfca;
}

.trigger-status-toggle__option {
  border: 0;
  background: transparent;
  color: #62707a;
  padding: 9px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.trigger-status-toggle__option:hover {
  color: #2f3a43;
}

.trigger-status-card--active .trigger-status-toggle__option {
  color: #4b6a55;
}

.trigger-status-card--active .trigger-status-toggle__option:hover {
  color: #1f6b35;
}

/* Locked Active option — admin + test campaign (testing safety policy). */
.trigger-status-toggle__option:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.trigger-status-toggle__option:disabled:hover {
  color: #62707a;
}

.trigger-status-card--paused .trigger-status-toggle__option.active {
  background: linear-gradient(135deg, #7a8894 0%, #909ea8 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(91, 104, 116, 0.22);
}

.trigger-status-card--active .trigger-status-toggle__option.active {
  background: linear-gradient(135deg, #2ea44f 0%, #43bc66 100%);
  color: #fff;
  box-shadow: 0 8px 18px rgba(46, 164, 79, 0.24);
}

.trigger-status-toggle__option:focus-visible {
  outline: 2px solid #95a3ad;
  outline-offset: 2px;
}

.trigger-status-card--active .trigger-status-toggle__option:focus-visible {
  outline-color: #6dc287;
}

@media (max-width: 900px) {
  .trigger-status-card {
    flex-direction: column;
    align-items: stretch;
  }

  .trigger-status-toggle {
    width: 100%;
  }

  .trigger-status-toggle__option {
    flex: 1;
  }
}

.trigger-config-box {
  margin-top: 16px;
  padding: 18px;
  border-radius: 12px;
  border: 1px solid #d0d7de;
}

.trigger-config-box--blue {
  background: #f5faff;
  border-color: #d0e3ff;
}

.trigger-config-box--green {
  background: #f4fbf6;
  border-color: #cdebd6;
}

.trigger-config-box__title {
  font-weight: 700;
  margin-bottom: 10px;
}

.trigger-config-box__row {
  display: flex;
  gap: 12px;
  align-items: end;
}

.trigger-config-field {
  flex: 1;
}

.trigger-config-field--time {
  max-width: 170px;
}

.trigger-config-box__help {
  margin-top: 8px;
  font-size: 12px;
}

.queue-defaults-inline {
}

.queue-defaults-inline__metrics-row {
  margin-top: 14px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.queue-defaults-inline__metrics-field {
  flex: 1 1 160px;
  min-width: 160px;
}



.queue-detail td, .queue-detail button { font-size: 11px; }
.queue-detail button { padding: 0; text-align: left; }


/* Cloud files modal: floating selected-files count, perched above the
 * select-all checkbox so the running total stays visible while
 * scrolling the (sticky-headered) table. */
.source-files-selected-count {
  position: absolute;
  top: 9px;
  right: -18px;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 0 9px 9px 0;
  background: #198754;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
  pointer-events: none;
  z-index: 3;
}

/* CalendarTimestamp chip CSS ships with @bubbleye-ai/copilot-ui styles.css */

/* Premium crowns on the workflows entry points (button + mode switch)
   shown when the user lacks workflow_access. Click opens the upsell. */
.panel-button__crown,
.workflow-mode-crown {
  margin-left: 5px;
  color: #f59f00;
  font-size: 0.8em;
}
/* Setup Help — registry-driven help column, bullseyes, spotlight. */

/* ── Round Help button (next to the "Account setup" header) ── */
.setup-help-button {
  grid-area: button;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  padding: 0;
  border-radius: 50%;
  border: 1px solid #ced4da;
  background: #fff;
  color: #ff6666;
  cursor: pointer;
  font-size: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.setup-help-button:hover { background: #f1f3f5; border-color: #adb5bd; }

/* Light-black dim shown with the bullseyes (below the circles + the column). */
.setup-help-dim {
  position: fixed;
  inset: 0;
  z-index: 4040;
  background: rgba(0, 0, 0, 0.35);
  animation: setupHelpFade 0.18s ease-out;
}

/* ── Attention flash on the Help button: an expanding ripple (a ring grows
      outward + fades with an ease-out, like a radar ping) followed by a ~2s
      quiet pause before the next ripple. ── */
@keyframes setupHelpFlash {
  0%   { box-shadow: 0 0 0 0 rgba(255, 102, 102, 0.6); }
  27%  { box-shadow: 0 0 0 22px rgba(255, 102, 102, 0); }
  100% { box-shadow: 0 0 0 22px rgba(255, 102, 102, 0); }
}
/* Flashes regardless of prefers-reduced-motion — it's a deliberate attention
   cue for incomplete mandatory setup, so it is intentionally NOT silenced by
   the reduced-motion guard below. */
.setup-help-flash { animation: setupHelpFlash 3s ease-out infinite; }

/* ── Docked right column (dark theme) ── */
.setup-help-column {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 340px;
  min-width: 340px;
  max-width: 90vw;
  z-index: 4100;
  background: #1e2128;
  color: #e9ecef;
  border-left: 1px solid #11131a;
  box-shadow: -8px 0 30px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  animation: setupHelpSlideIn 0.18s ease-out;
}
@keyframes setupHelpSlideIn {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* Left-edge resize handle. */
.setup-help-resize {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  background: transparent;
  z-index: 2;
}
.setup-help-resize:hover { background: rgba(13, 110, 253, 0.55); }

.setup-help-column-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #2c313c;
}
.setup-help-column-title {
  font-weight: 600;
  font-size: 15px;
  margin-right: auto;
  color: #f1f3f5;
}
.setup-help-langs { display: flex; gap: 4px; }
.setup-help-lang {
  border: 1px solid #3a4150;
  background: #2a2f3a;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: #adb5bd;
  padding: 2px 6px;
  border-radius: 4px;
}
.setup-help-lang.active { color: #fff; background: #0d6efd; border-color: #0d6efd; }
.setup-help-close {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
  color: #adb5bd;
  padding: 4px 6px;
  border-radius: 4px;
}
.setup-help-close:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.setup-help-cards { overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.setup-help-empty { color: #adb5bd; font-size: 13px; }

/* Cards: dark surfaces; help text is gray (#bbb) on the dark panel. */
.setup-help-card {
  background: #262b34;
  border: 1px solid #333a45;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: help; /* hover to spotlight its element */
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.setup-help-child { cursor: help; }
.setup-help-card-head { display: flex; align-items: center; gap: 6px; }
.setup-help-card-title {
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: #bbb;
  text-align: left;
  padding: 0;
  margin-right: auto;
}
.setup-help-accordion-toggle {
  border: none; background: none; cursor: pointer; color: #888; padding: 2px 4px;
}
.setup-help-card-body { margin: 6px 0 0; font-size: 13px; line-height: 1.5; color: #bbb; }

.setup-help-children {
  margin-top: 10px;
  padding-left: 10px;
  border-left: 4px solid #666;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.setup-help-child-title {
  border: none; background: none; cursor: pointer; font-weight: 600; font-size: 13px;
  color: #bbb; text-align: left; padding: 0;
}
.setup-help-child-body { margin: 3px 0 0; font-size: 12px; line-height: 1.45; color: #bbb; }

/* Selected card (clicked, or via its bullseye) — text turns WHITE and the card
   lights up against the other (gray-text) cards. */
.setup-help-card.is-selected,
.setup-help-child.is-selected {
  background: rgba(13, 110, 253, 0.22);
  border-radius: 8px;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.6);
}
.setup-help-card.is-selected { border-color: #0d6efd; }
.setup-help-child.is-selected { padding: 4px 6px; }
.setup-help-card.is-selected .setup-help-card-title,
.setup-help-card.is-selected .setup-help-card-body,
.setup-help-card.is-selected .setup-help-accordion-toggle,
.setup-help-child.is-selected .setup-help-child-title,
.setup-help-child.is-selected .setup-help-child-body {
  color: #fff;
}

/* ── Bullseye markers: larger, semi-transparent red concentric circles,
      centered on the target element. ── */
.setup-help-bullseye {
  position: fixed;
  transform: translate(-50%, -50%);
  z-index: 4050;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid rgba(220, 38, 38, 0.7);
  background: rgba(220, 38, 38, 0.16);
  cursor: pointer;
  box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.1);
  animation: setupHelpBullseyePulse 1.6s ease-in-out infinite;
}
.setup-help-bullseye::before {
  content: "";
  position: absolute;
  inset: 11px;
  border-radius: 50%;
  border: 2px solid rgba(220, 38, 38, 0.85);
  background: rgba(220, 38, 38, 0.34);
}
@keyframes setupHelpBullseyePulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.1), 0 0 0 0 rgba(220, 38, 38, 0); }
  50%      { box-shadow: 0 0 0 6px rgba(220, 38, 38, 0.1), 0 0 0 12px rgba(220, 38, 38, 0.16); }
}
@media (prefers-reduced-motion: reduce) {
  .setup-help-bullseye { animation: none; }
}

/* ── Spotlight (4 dim panels + ring; the hole is left open for click-through) ── */
/* The container spans the whole screen but must NOT capture clicks — otherwise
   it swallows the click meant for the element sitting in the open cutout. Only
   the dim PANELS capture (to keep the rest of the page inert); the hole has no
   panel, so a click there lands on the real element (e.g. the nav link). */
.setup-help-spotlight { position: fixed; inset: 0; z-index: 4000; pointer-events: none; }
.setup-help-spotlight-panel {
  position: fixed;
  pointer-events: auto;
  /* Same light-black as the bullseye dim — the cutout is just carved out of
     the same overlay (no second, darker layer when a spotlight appears). */
  background: rgba(0, 0, 0, 0.35);
}
.setup-help-ring {
  position: fixed;
  border-radius: 8px;
  box-shadow: inset 0 0 0 2px #0d6efd;
  pointer-events: none;
}
@keyframes setupHelpFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.ia-step {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /*padding: 16px;*/
  /* Fill the step-body so chart/causes can flex to its height.
     The parent rule `.step-body > *` sets flex-shrink: 0; override so
     we can also shrink when the viewport is short. */
  flex: 1 1 auto !important;
  min-height: 0;
  height: 100%;
  box-sizing: border-box;
}

.ia-target-select {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 12px;
  flex: 0 0 auto;
}
.ia-target-select label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #475569;
  font-weight: 600;
}
.ia-target-select select {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
}
.ia-target-select select:disabled { background: #f1f5f9; }

.ia-spark-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  /* Share a fraction of the step-body's vertical space, bounded so the
     sparkline tabs never become too compressed nor steal too much room
     from the main chart / causes list below. */
  flex: 0 1 auto;
  min-height: 60px;
  max-height: 110px;
  overflow: hidden;
}
.ia-spark-row--ten {
  grid-template-columns: repeat(10, minmax(0, 1fr));
}
.ia-spark {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px;
  text-align: left;
  cursor: pointer;
  /* Allow the grid track to shrink below the chart's intrinsic size. */
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.ia-spark--active {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
}
.ia-spark--locked { background: #eff6ff; }
.ia-spark__label {
  font-size: 10px;
  color: #475569;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Chart.js responsive mode needs a positioned, sized parent — without
   `position: relative` + an explicit width, it falls back to a fixed
   canvas size and the row overflows. The min/max-height keeps the
   sparkline readable but doesn't let it dominate when the viewport is
   tall. */
.ia-spark__chart {
  flex: 1;
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 25px;
  max-height: 90px;
}
.ia-spark__chart > canvas {
  width: 100% !important;
  height: 100% !important;
}

.ia-chart {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  /* Flex to share remaining height with .ia-causes; honour a sensible
     minimum so the chart stays readable on short viewports. */
  flex: 2 1 220px;
  min-height: 150px;
  max-height: 300px;
  position: relative;
  overflow: hidden;
}
.ia-chart--manual { cursor: crosshair; user-select: none; }
.ia-chart__marquee {
  position: absolute;
  top: 12px;
  bottom: 12px;
  pointer-events: none;
  background: rgba(37, 99, 235, 0.12);
  border-left: 1px solid rgba(37, 99, 235, 0.6);
  border-right: 1px solid rgba(37, 99, 235, 0.6);
}
.ia-chart__manual-hint {
  position: absolute;
  top: 4px;
  right: 16px;
  font-size: 10px;
  color: #64748b;
  background: rgba(255, 255, 255, 0.85);
  padding: 2px 6px;
  border-radius: 3px;
  pointer-events: none;
}

.ia-chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.ia-mode-toggle {
  display: inline-flex;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 2px;
  gap: 2px;
}
.ia-mode-toggle__btn {
  background: transparent;
  border: 0;
  padding: 4px 10px;
  font-size: 12px;
  color: #475569;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ia-mode-toggle__btn:hover { background: #e2e8f0; }
.ia-mode-toggle__btn--active {
  background: #1d4ed8;
  color: #fff;
  font-weight: 600;
}
.ia-chart-header__clear {
  background: transparent;
  border: 1px solid #cbd5e1;
  color: #475569;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ia-chart-header__clear:hover { background: #f1f5f9; }
.ia-chart > canvas {
  width: 100% !important;
  height: 100% !important;
}

.ia-empty, .ia-loading, .ia-error {
  padding: 24px;
  text-align: center;
  color: #64748b;
}
.ia-error { color: #dc2626; }

.ia-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}
.ia-banner--yellow { background: #fef3c7; color: #92400e; }
.ia-banner--blue { background: #dbeafe; color: #1e40af; }
.ia-banner button {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid currentColor;
  color: inherit;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
}
.ia-banner button:disabled { opacity: 0.6; cursor: progress; }

.ia-causes-wrap {
  /* Automatic vertical allocation: this shares remaining space with the
     chart, then scrolls internally when the anomaly list outgrows the
     space the stack can spare. */
  display: flex;
  flex-direction: column;
  flex: 1 1 180px;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
}

.ia-causes {
  background: #fff;
/*  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;*/
  /* Fill the wrapper's height without owning the scroll container. */
  flex: 1 1 auto;
  min-height: 0;
  overflow: visible;
}
.ia-causes__head {
  font-size: 10px;
  color: #64748b;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.ia-causes--empty {
  text-align: center;
  color: #16a34a;
  padding: 24px;
}
/* The dashed bottom border is set inline (per-anomaly color matches its
   chart marker). This rule sets the baseline padding/spacing only. */
.ia-anomaly { padding: 6px 0; }
.ia-anomaly__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.ia-anomaly__date {
  font-family: monospace;
  font-size: 11px;
  color: #475569;
}
.ia-anomaly__metric {
  font-size: 11px;
  text-transform: uppercase;
  color: #64748b;
}
.ia-anomaly__pct--drop { color: #dc2626; font-weight: 600; }
.ia-anomaly__pct--spike { color: #f59e0b; font-weight: 600; }
.ia-anomaly--hovered {
  background: #fff7ed;
  outline: 2px solid #f59e0b;
  outline-offset: -2px;
  border-radius: 4px;
}
.ia-anomaly--clicked {
  background: #fffced;
  outline: 2px solid gold;
  outline-offset: -2px;
  border-radius: 4px;
}
.ia-anomaly__body {
  padding: 6px 0 6px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ia-anomaly__empty { font-size: 12px; color: #94a3b8; padding: 4px 0; }

.ia-cause-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  transition: background-color 120ms ease, opacity 120ms ease,
              color 120ms ease;
  color: #1e293b;
}
.ia-cause-chip--stacked {
  /* row background comes from inline style (matches chart band) */
  color: #fff;
}
.ia-cause-chip--stacked .ia-cause-chip__name,
.ia-cause-chip--stacked .ia-cause-chip__pct {
  color: #fff;
}
.ia-cause-chip--excluded {
  background: #f1f5f9;
  opacity: 0.55;
}

.ia-cause-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #f8fafc;
  border: 1px solid #cbd5e1;
  color: #475569;
  border-radius: 4px;
  padding: 3px 8px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.ia-cause-btn:hover { background: #e2e8f0; }
.ia-cause-btn--show.ia-cause-btn--active {
  /* Same solid dark gray as the "Hide impact" active state — the visual
     emphasis is on "this button is selected", not on the action's color. */
  background: #475569;
  border-color: #475569;
  color: #fff;
  font-weight: 600;
}
.ia-cause-btn--hide.ia-cause-btn--active {
  background: #475569;
  border-color: #475569;
  color: #fff;
  font-weight: 600;
}
.ia-cause-chip--excluded .ia-cause-btn--hide.ia-cause-btn--active {
  /* keep the active "Hide" button readable even when the row is dimmed */
  opacity: 1;
}

.ia-cause-chip__name {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.9em;
}
.ia-cause-chip__bar {
  height: 4px;
  background: rgba(37, 99, 235, 0.4);
  border-radius: 2px;
  margin-left: 8px;
  min-width: 4px;
  flex: 1 1 0;
}
.ia-cause-chip--stacked .ia-cause-chip__bar {
  background: rgba(255, 255, 255, 0.6);
}
.ia-cause-chip__pct {
  font-family: monospace;
  font-size: 11px;
  color: #475569;
  min-width: 32px;
  text-align: right;
}
.ia-cause-chip__info {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  padding: 2px;
}
.ia-cause-chip--excluded .ia-cause-chip__info,
.ia-cause-chip--excluded .ia-cause-btn { opacity: 1; }

.ia-sheet-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  z-index: 1000;
}
.ia-sheet {
  background: #fff;
  /* width is set inline from the resizable state; this is just the
     fallback when CauseDetailSheet doesn't apply its inline style. */
  width: 480px;
  height: 100%;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative; /* anchor for .ia-sheet__resize-handle */
}
/* Drag handle on the left edge of the sheet — same UX pattern as the
   Jobs side panel. The visible thumb appears on hover; the full strip
   is the active hit area. */
.ia-sheet__resize-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  cursor: col-resize;
  background: transparent;
  z-index: 10;
}
.ia-sheet__resize-handle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 3px;
  height: 40px;
  background: #cbd5e1;
  border-radius: 2px;
  transition: background-color 120ms ease;
}
.ia-sheet__resize-handle:hover::before {
  background: #94a3b8;
}
/* ON / OFF status badges next to object status-change summaries. ON = green
   (Active), OFF = neutral red-tinted gray (Inactive). */
.ia-sheet__status-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.ia-sheet__status-badge--on {
  background: #dcfce7;
  color: #166534;
}
.ia-sheet__status-badge--off {
  background: #fee2e2;
  color: #991b1b;
}
.ia-sheet__status-badge--deleted {
  background: #1f2937;
  color: #f9fafb;
}
/* Strike through summary/object name when the event is a deletion. */
.ia-sheet__event--deleted {
  opacity: 0.4;
}
.ia-sheet__event--deleted .ia-sheet__event-summary,
.ia-sheet__event--deleted .ia-sheet__event-objname {
  text-decoration: line-through;
  text-decoration-color: #9ca3af;
  color: #6b7280;
}
.ia-sheet__event--deleted .ia-sheet__status-badge--deleted {
  text-decoration: none;
}
.ia-sheet__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ia-sheet__head button {
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 18px;
}
.ia-sheet__label {
  font-size: 10px;
  color: #64748b;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}
.ia-sheet__kv { font-size: 13px; padding: 2px 0; }
.ia-sheet__empty { font-size: 12px; color: #94a3b8; }
.ia-sheet__event {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 8px;
  margin: 8px 0;
  padding-left: 0;
  border-left: 0;
}
.ia-sheet__event-rail {
  position: relative;
  width: 18px;
}
.ia-sheet__event-rail::before {
  content: '';
  position: absolute;
  left: 8px;
  top: -8px;
  bottom: -8px;
  width: 2px;
  background: #e5e7eb;
}
.ia-sheet__event-rail-dot {
  position: absolute;
  left: 4px;
  top: 6px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #94a3b8;
}
.ia-sheet__event-body { min-width: 0; }
.ia-sheet__event-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
}
.ia-sheet__event-date {
  font-family: monospace;
  color: #334155;
}
.ia-sheet__event-head {
  display: flex;
  gap: 10px;
  font-size: 11px;
  color: #475569;
}
.ia-sheet__event-cat {
  background: #eef2ff;
  color: #4338ca;
  padding: 1px 6px;
  border-radius: 3px;
  font-weight: 600;
}
.ia-sheet__event-summary { font-size: 13px; margin: 4px 0; }
.ia-sheet__event-meta { font-size: 11px; color: #64748b; }
.ia-sheet__event-objname {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  border-radius: 3px;
  background: #f1f5f9;
  color: #334155;
  font-family: monospace;
  font-size: 11px;
  font-weight: 600;
  word-break: break-all;
}

/* Sibling events tied to the same AppLovin object_id render indented and
   compact under their parent (creation event, or earliest event). */
.ia-sheet__event-group { margin: 8px 0; }
.ia-sheet__event-group--dim { opacity: 0.4; }
.ia-sheet__event-group--clickable { cursor: pointer; }
.ia-sheet__event-group-sep {
  border: 0;
  border-top: 1px solid #e5e7eb;
  margin: 12px 0;
}
.ia-sheet__event-group > .ia-sheet__event { margin: 0; }
.ia-sheet__event-children {
  margin-left: 26px;
  padding-left: 0;
  border-left: 0;
}
.ia-sheet__event-children > .ia-sheet__event {
  border-left-color: #f1f5f9;
  margin: 4px 0;
}
.ia-sheet__event-children > .ia-sheet__event .ia-sheet__event-summary {
  font-size: 12px;
}

/* ─── Impact Analysis premium teaser (shown to users without access) ─── */
.ia-teaser {
  max-width: 560px;
  margin: 8px auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.ia-teaser__chart {
  position: relative;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 10px 6px;
  background: linear-gradient(180deg, #fff, #f8fafc);
}
.ia-teaser__chart svg {
  display: block;
  width: 100%;
  height: auto;
}
.ia-teaser__chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
  font-size: 10px;
  color: #64748b;
}
.ia-teaser__chart-legend span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.ia-teaser__chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.ia-teaser__body {
  text-align: center;
  padding: 0 8px 4px;
}
.ia-teaser__crown {
  font-size: 22px;
  color: #f59f00;
  margin-bottom: 6px;
}
.ia-teaser__title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: #1e293b;
}
.ia-teaser__text {
  margin: 0 auto 8px;
  max-width: 42ch;
  font-size: 13px;
  line-height: 1.5;
  color: #475569;
}
.ia-teaser__text--muted {
  color: #64748b;
  font-weight: 600;
}
.ia-teaser__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}
.ia-teaser__cta:hover {
  background: #1d4ed8;
}