/* ============================================================
   @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;
}

.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 {
  /*margin: 0 0 12px 0;*/
  color: #6c757d;
  font-size: 14px;
}

.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. Mintegral'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;
  margin-top: 16px;
}

/* ─── 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 */
.jp-detail-body {
  padding: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.job-detail-section {
  margin-bottom: 15px;
  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-extraction-loading,
.concept-extraction-error,
.concept-extraction-empty {
  padding: 20px 0;
  text-align: center;
  color: #6c757d;
}

.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;
  }
}

.concept-column {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.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-progress {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 12px 16px;
  background: #fdfdfd;
}

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

/* 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 {
  color: goldenrod !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);
}

/* -- Teach by examples: CONCEPT / CATEGORY sub-steps ------------------
   Ported verbatim from metaCreativeCopilot's App.css. Exactly one property
   is tagged at a time, so a row paints ONE live span; the other property's
   saved span stays visible but struck through (.selected-other) so you can
   see what the filename already gives up before choosing this one's
   tokens. The tab tints match the property accents: gold for concept,
   fuchsia for category. */
.extraction-stepper {
  display: flex;
  gap: 4px;
}

.extraction-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border: none;
  border-radius: 6px 6px 0 0;
  background: #fdf6dd;
  color: #495057;
  cursor: pointer;
  font-size: 14px;
  opacity: 0.5;
}

.extraction-step.category {
  background: #fbeafd;
}

.extraction-step.current {
  opacity: 1;
  font-weight: 700;
  color: #333;
}

.extraction-step .extraction-step-num {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e9ecef;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.extraction-step.done .extraction-step-num {
  background: #28a745;
  color: #fff;
}

.extraction-step-panel {
  background: #fdf6dd;
  padding: 12px;
  border-radius: 0 8px 8px 8px;
}

.extraction-step-panel.category {
  background: #fbeafd;
}

.concept-token.selected-other {
  background: #f1f3f5;
  border-color: #dee2e6;
  color: #adb5bd;
  text-decoration: line-through;
}

/* Extraction steps: CONCEPT first, then CATEGORY. Ported verbatim from
   metaCreativeCopilot App.css — same folder-tab idiom as the mode tabs one
   level up, with the selected tab attached to a panel in its property's
   colour. */
.extraction-status-chip {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 1px 8px;
  border: 1px solid;
  white-space: nowrap;
}

.extraction-status-chip.ready {
  color: #198754;
  border-color: #198754;
}

.extraction-status-chip.partial {
  color: #b26a00;
  border-color: #e0a800;
}

.extraction-status-chip.empty {
  color: #adb5bd;
  border-color: #dee2e6;
}

/* 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 + Mintegral'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: Mintegral-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 Mintegral-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-mintegral-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;
}

/* 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 ── */
.jp-td-caret {
  width: 22px;
  cursor: pointer;
  color: #888;
  text-align: center;
}
.jp-td-username {
  font-size: 12px;
  color: #555;
  max-width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  /*white-space: nowrap;*/
}

.jp-username-with-avatar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.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;
}
.jp-td-jobtype i {
  color: #6c757d;
  margin-right: 5px;
}
.jp-td-created {
  font-size: 12px;
  color: #666;
  /*white-space: nowrap;*/
}
.jp-td-status {
  /*white-space: nowrap;*/
  text-align: center;
  vertical-align: middle;
}
.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;
}

/* 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 {
  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; }

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

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

.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 {
  vertical-align: top;
}

.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;
}

/* ─── 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;
}

/* ─── 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;
  /*width: stretch;*/
  flex: 1;
  display: inline-flex;
  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: 8px;
  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 Mintegral 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;
}

/* ─── <offer> badge — prepended to every Mintegral offer name display ──
   Task 8 fix round 1 (I-1/Minor): modeled directly on <set>'s chip rules
   above — same block, name + content swapped only. */
offer {
  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;
}
offer::after {
  content: 'offer';
}

/* ─────────────────────────────────────────────────────────────────
 * 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: -14px;
  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: 100px;
  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;
}


/* ─── Compose step (Step3Compose.tsx) ─────────────────────────────────
   The fork's Step3Text.tsx drew its four sections with inline
   `style={{…}}` rules and fork_baseline.json records 13 of them for that
   file. Step3Compose.tsx is a NEW file (tree_maps.json "additions") and
   therefore has NO inline-style budget at all, so the fork's inline
   rules are reproduced here as APPENDED, step-scoped rules hung off fork
   classnames that already play the same role. Nothing above is edited
   and no new class is introduced. */

/* Fork: each section is a block with `marginBottom:20; paddingBottom:16;
   borderBottom:1px solid #dee2e6`, headed by a
   `fontSize:14; fontWeight:600; margin:"4px 0 10px"` title. */
[data-step="text"] .step-body-inner > .form-group {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #dee2e6;
}

[data-step="text"] .step-body-inner > .form-group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

[data-step="text"] .step-body-inner > .form-group > label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #212529;
  margin: 4px 0 10px;
}

/* The role mapper nests one .form-group per required role; those keep
   the plain field look, not the section chrome. */
[data-step="text"] .form-group .form-group {
  margin-bottom: 10px;
  padding-bottom: 0;
  border-bottom: 0;
}

[data-step="text"] .form-group .form-group > label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #495057;
  margin-bottom: 4px;
}

/* .form-control is `flex: 1` with no width, so in a block container a
   <select multiple> shrink-wraps its longest option and the label + helper
   text wrap around it inline. Give the role mapper's rows a plain stacked
   field layout instead. */
[data-step="text"] .form-group .form-group > .form-control[multiple] {
  display: block;
  width: 100%;
  min-height: 78px;
}

[data-step="text"] .form-group .form-group > .setup-muted {
  display: block;
  margin-top: 4px;
  font-size: 12px;
}

/* Fork's preview container: `background:#fffbea; border:1px solid #ffec99;
   borderRadius:6; padding:10px 12px`. .workflow-preview-card already is
   the soft-yellow, column-flex card; only the exact hues and the gap
   between its children are restated. */
[data-step="text"] .workflow-preview-card {
  background: #fffbea;
  border-color: #ffec99;
  border-radius: 6px;
  gap: 8px;
  /* .workflow-preview-card's first rule block is `align-items: flex-start`,
     which shrink-wraps each offer group; the fork's preview container was a
     plain block, so its rows ran the full width. */
  align-items: stretch;
}

[data-step="text"] .workflow-preview-card > label {
  margin: 0;
}

/* Fork's duplicate-name notice: `#fff4e6 / #ffe8cc / #7c4a00`, 6px 10px,
   12px type. */
[data-step="text"] .workflow-preview-card .alert {
  margin: 0;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.45;
  background-color: #fff4e6;
  border-color: #ffe8cc;
  color: #7c4a00;
}

/* Fork's per-destination header row: same palette as the notice, with the
   set count pushed to the right edge. Matched via the `>` chain
   (.workflow-preview-card > per-offer div > title) so the identically
   classed "Intended assets" / "Validation" titles nested deeper inside
   PreviewAccordion's card bodies keep their own plain look. */
[data-step="text"] .workflow-preview-card > div > .agc-preview-card-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  margin-bottom: 4px;
  background: #fff4e6;
  border: 1px solid #ffe8cc;
  border-radius: 4px;
  color: #7c4a00;
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
}

[data-step="text"] .workflow-preview-card > div > .agc-preview-card-section-title .setup-muted {
  margin-left: auto;
  color: inherit;
  font-weight: 400;
  opacity: 0.8;
}

/* Ad-output chips reuse .csu-grouping-chip, whose font-weight is 500
   (600 when selected). The trailing "requires: …" is supporting detail,
   not part of the chip's name, so it keeps a normal weight. */
[data-step="text"] .csu-grouping-chip .setup-muted {
  font-weight: 400;
}

[data-step="text"] .compose-output-tooltip {
  display: inline-flex;
}

/* Filename-processing fidelity: named equivalents for styles introduced by
   the sequential Concept/Category setup port. */
.help-tip > .fa-circle-question {
  color: #6c757d;
  cursor: help;
  font-weight: 400;
}

.filename-rule-types {
  cursor: help;
  white-space: nowrap;
}

.filename-rule-types > span > span {
  color: #adb5bd;
}

.filename-rule-types i {
  color: #6c757d;
}

.setup-badge[data-status="partial"] {
  background: #fff3cd;
  color: #856404;
}

.extraction-under-labeled-hint {
  color: #6c757d;
  font-size: 11px;
  margin-top: 6px;
}

.setup-muted.extraction-samples-loading {
  align-items: center;
  display: flex;
  gap: 6px;
}

.extraction-label-heading {
  margin: 0;
}

[data-testid="setup-step3-toggle-label"] {
  align-items: center;
  display: inline-flex;
  gap: 6px;
}

[data-testid="setup-step3-toggle-label"] > i {
  font-size: 11px;
}

.extraction-rules-saved {
  color: #198754;
  font-size: 13px;
  margin-left: auto;
}

.extraction-samples-notice {
  color: #856404;
  font-size: 10px;
  margin-top: 8px;
}

/* Step 2 Geo column: count + info icon; the icon opens a popover with
   the offer's full geo list (an offer can target 150+ countries — the
   inline list was a wall of text). New control with no fork equivalent;
   classnames allowlisted, panel styling mirrors target-multi-select__menu. */
.geo-count {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.geo-count__info {
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: #2f80ed;
  font-size: 13px;
  line-height: 1;
}

.geo-count__popover {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  min-width: 180px;
  max-width: 340px;
  max-height: 220px;
  overflow-y: auto;
  padding: 8px 10px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  font-size: 12px;
  color: #212529;
  white-space: normal;
}

/* Target filter column in the side-panel bars: pinned like the jobs
   panel's (verbatim from upstream applovinCreativeCopilot). */
.side-panel-filters-col--target {
  flex: 0 0 140px;
  min-width: 140px;
  max-width: 140px;
}

/* User filter column: pinned to 150px (min = max), scoped under
   .side-panel-filters so it outranks the base flex:1 column rule.
   Verbatim from upstream applovinCreativeCopilot. */
.side-panel-filters .side-panel-filters-col--user {
  flex: 0 0 150px;
  min-width: 150px;
  max-width: 150px;
}

/* Mapping-coverage chip (design §7.5 rule 4 / §15.1): the share of
   spend attributable to a mapped creative, shown in the Monitor
   overview toolbar. Pushed to the row's right edge. */
.monitor-coverage-chip {
  margin-left: auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid #d5dbe1;
  border-radius: 999px;
  background: #f6f8fa;
  font-size: 12px;
  color: #333;
  white-space: nowrap;
  cursor: help;
}

/* Monitor inspector R2 additions: the Actions column (status toggles)
   and the offer row's set-count Content cell. */
.monitor-actions-cell {
  padding: 8px;
  text-align: center;
}
.monitor-content-count {
  white-space: nowrap;
  font-size: 12px;
  color: #495057;
}

/* Cross-copilot insight chips ("Other networks" column in the cloud-files
   performance overlay). */
.insight-chip {
  display: inline-block;
  margin: 1px 2px;
  padding: 1px 6px;
  border-radius: 8px;
  background: #eef1f4;
  font-size: 11px;
  white-space: nowrap;
  cursor: default;
}


/* -- Setup Filename Processing -> Custom rules ------------------------
   Ported verbatim from metaCreativeCopilot's App.css. A colour layer is
   painted above a transparent-background textarea (the same wysiwyg trick
   NameTemplateEditor uses), so only the property macros get an accent
   while the caret and selection stay native. The two layers must keep
   identical font, size, line-height and padding or the overlay drifts
   away from the text underneath it. */
.manual-rule-wysiwyg {
  position: relative;
  display: flex;
  flex: 1;
}

.manual-rule-wysiwyg textarea {
  position: relative;
  z-index: 2;
  flex: 1;
  background: transparent;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 6px 8px;
  border-radius: 4px;
  resize: vertical;
  min-height: 30px;
}

.manual-rule-highlight {
  position: absolute;
  inset: 0;
  z-index: 3;
  color: transparent;
  pointer-events: none;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  overflow: hidden;
  font-family: monospace;
  font-size: 13px;
  line-height: 1.5;
  padding: 7px 9px; /* textarea padding + 1px border */
}

/* Text colors only, and only for the property macros — a background box (or
   coloring every macro) visually bleeds and hides which span is which
   (2026-07-28). Non-property macros keep the textarea's own text color. */
.manual-rule-highlight .rule-macro-concept {
  color: goldenrod;
}

.manual-rule-highlight .rule-macro-category {
  color: #c026d3;
}

.manual-file-type-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.manual-file-type-tab {
  display: flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid #dee2e6;
  border-radius: 999px;
  background: #fff;
  color: #6c757d;
  cursor: pointer;
  font-size: 13px;
}

.manual-file-type-tab.current {
  border-color: #495057;
  color: #212529;
  font-weight: 600;
}

.manual-file-type-count {
  margin-left: 8px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 1px 8px;
  border: 1px solid #dee2e6;
  color: #6c757d;
}

/* Manual-rules port: declarations moved out of JSX so new components retain
   the R0 no-new-inline-style contract without changing the sibling layout. */
[data-testid="manual-filename-rules"] {
  margin-bottom: 16px;
}

[data-testid="manual-filename-rules"] > h4 {
  margin: 0 0 4px;
}

.manual-rule-description {
  color: #495057;
  font-size: 13px;
  margin: 0 0 8px;
}

.manual-rule-empty {
  color: #6c757d;
  font-size: 13px;
  margin: 4px 0;
}

.manual-rule-row {
  margin-bottom: 6px;
}

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

.manual-rule-index {
  color: #6c757d;
  font-size: 13px;
  text-align: right;
  width: 20px;
}

.manual-rule-wysiwyg textarea {
  border: 1px solid #ced4da;
}

.manual-rule-wysiwyg textarea[aria-invalid="true"] {
  border-color: #dc3545;
}

.manual-rule-error {
  color: #dc3545;
  font-size: 12px;
  margin-left: 26px;
  margin-top: 2px;
}

.manual-rules-intro {
  color: #495057;
  font-size: 13px;
}

.manual-file-type-tab > i {
  margin-right: 6px;
}

.manual-rules-section {
  margin-bottom: 14px;
}

.manual-rules-section > summary {
  cursor: pointer;
  font-weight: 600;
}

.manual-rules-cheatsheet-table {
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 8px;
}

.manual-rules-cheatsheet-table td:last-child {
  padding: 2px 0;
}

.manual-rules-macro {
  font-family: monospace;
  padding: 2px 12px 2px 0;
  vertical-align: top;
  white-space: nowrap;
}

.manual-rules-example,
.manual-rules-save-note {
  color: #6c757d;
  font-size: 12px;
  margin-top: 6px;
}

[data-testid="manual-rules-preview-filenames"] {
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-family: monospace;
  font-size: 12px;
  margin-top: 8px;
  padding: 6px 8px;
  width: 100%;
}

[data-testid="manual-rules-preview-button"] {
  margin-top: 6px;
}

.manual-rules-preview-wrap {
  margin: 10px 0 4px;
  overflow-x: auto;
}

[data-testid="manual-rules-preview-table"] {
  font-size: 12px;
  width: 100%;
}

[data-testid="manual-rules-preview-table"] th {
  text-align: left;
}

.manual-rules-preview-filename {
  font-family: monospace;
  word-break: break-all;
}

.manual-rules-muted {
  color: #6c757d;
}

[data-testid="manual-rules-error"] {
  color: #dc3545;
  margin-bottom: 8px;
}

[data-testid="manual-rules-notice"] {
  color: #198754;
  margin-bottom: 8px;
}

[data-testid="extraction-mode-tabs"] {
  display: flex;
  gap: 4px;
}

.extraction-mode-active-badge {
  border: 1px solid #198754;
  border-radius: 10px;
  color: #198754;
  font-size: 11px;
  font-weight: 600;
  margin-left: 6px;
  padding: 1px 7px;
}
/* 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 Mintegral 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;
}