/* ============================================================
   DESIGN PREVIEW PILL
   The floating state switcher that redesigned screens ship with,
   so a screen's populated / empty / error states can be stepped
   through without a backend.

   This is a prototype affordance, not product UI, so it is kept
   out of style.css and linked only by the screens that carry it.
   Dropping the pill from a screen means dropping this one link.
   ============================================================ */

.clw-preview-toggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 5px 5px 12px;
  background: #fff;
  border: 1px solid var(--clw-border, #E5E9EF);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
  }

.clw-preview-toggle-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--clw-muted, #6B7280);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  }

.clw-preview-toggle-group {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--clw-bg, #F6F9FB);
  border-radius: 999px;
  }

.clw-preview-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 5px 12px;
  background: transparent;
  border: 0;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--clw-muted, #6B7280);
  cursor: pointer;
  transition: background .12s, color .12s;
  white-space: nowrap;
  }

.clw-preview-toggle-btn:hover {
  color: var(--clw-text, #101010);
  }

.clw-preview-toggle-btn > i {
  font-size: 13px;
  flex: 0 0 auto;
  }

.clw-preview-toggle-btn.active {
  background: #fff;
  color: var(--clw-primary, #0d6efd);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
  }

/* Import posts floats a bulk bar over the feed, so while that bar is
   up the pill steps above it rather than sitting behind it. */

.import-from-social-ctn.ifs-bulk-open .clw-preview-toggle {
  bottom: 84px;
  }

/* A modal sits above the pill, so a screen whose states live inside one
   carries a second copy of the switcher in the modal header instead of
   floating it, where the backdrop would bury it. */

.clw-preview-toggle-inline {
  position: static;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  }

/* Account settings ends each form with its primary action at the bottom right,
   which is the corner the pill floats in. The scrolling pane keeps a lane clear
   underneath so the action is never buried, and the reservation leaves with the
   pill if the pill is ever dropped from the screen. */

.accountsettings .Information-ctn {
  padding-bottom: 76px !important;
  }

/* Dev preview controls moved from workflow.css: the amber dev dock and result stepper
   (dashboard.html, workspace pages) and the workflow settings preview pill. Mockup only. */

/* DEV PREVIEW CONTROLS (amber = not part of the design). They live in the floating
   dock at the end of dashboard.html, see .rp-dev-dock. */
.wfb-dev-label {
  font-size: 10px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
  color: #92400e; display: flex; align-items: center; gap: 4px; flex-shrink: 0;
}
.wfb-dev-label i { font-size: 11px; }
.wfb-dev-divider { width: 1px; height: 14px; background: #fcd34d; flex-shrink: 0; }
.wfb-dev-toggle {
  height: 24px; padding: 0 10px; border-radius: 6px;
  border: 1px solid #fcd34d; background: #fff;
  font-size: 11px; font-weight: 600; color: #78350f;
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  transition: all .13s; flex-shrink: 0;
}
.wfb-dev-toggle:hover { background: #fef9c3; border-color: #f59e0b; }
.wfb-dev-toggle.active { background: #92400e; color: #fff; border-color: #92400e; }
.wfb-dev-toggle i { font-size: 12px; }
.wfb-dev-roles {
  display: inline-flex; gap: 2px; flex-shrink: 0;
  background: #fff; border: 1px solid #fcd34d; border-radius: 7px; padding: 2px;
}
.wfb-dev-role {
  height: 20px; padding: 0 9px; border: none; background: transparent; border-radius: 5px;
  font-size: 11px; font-weight: 600; color: #78350f; cursor: pointer; transition: all .13s;
}
.wfb-dev-role:hover { background: #fef9c3; }
.wfb-dev-role.active { background: #92400e; color: #fff; }

/* DEV PREVIEW DOCK (bottom-right, dashboard.html, mockup only): one floating home for every
   preview control - persona + state, kanban empty states + view as - so none of them takes
   space in the page. Closed by default: one small round amber eye button; open: a panel of
   labelled rows above it (remembered per browser, rpDevDock). */
.rp-dev-dock { position: fixed; right: 16px; bottom: 16px; z-index: 1030; }
.rp-dev-panel {
  max-width: calc(100vw - 32px); padding: 8px 10px;
  background: #fefce8; border: 1px solid #fde68a; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(16, 24, 40, .12);
}
.rp-dev-rowlabel { min-width: 68px; }
/* Result-state stepper in the dock's Publish result row: while the result dialog is open the
   dock rises above it and its tint so states can be stepped through */
.rp-dev-pill-name { min-width: 150px; }
body:has(#PublishResultModal.show) .rp-dev-dock { z-index: 1061; }
.rp-dev-fab {
  width: 32px; height: 32px; padding: 0; border-radius: 50%; justify-content: center;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .14);
}
.rp-dev-fab i { font-size: 15px; }
.rp-dev-select {
  height: 24px; padding: 0 26px 0 8px; font-size: 11px; font-weight: 600;
  color: #78350f; border-color: #fcd34d; background-color: #fff; border-radius: 6px;
}
/* The dock, minimal: a white card in the design preview pill's look (grey labels, plain text options, the picked one in
   soft blue) instead of the amber dev chrome. Scoped to the dock, so the amber controls elsewhere keep their look */
.rp-dev-dock .rp-dev-panel {
  padding: 10px 12px; gap: 6px !important;
  background: #fff; border: 1px solid #E5E9EF; border-radius: 12px;
}
.rp-dev-dock .wfb-dev-label { font-weight: 700; letter-spacing: .08em; color: #6B7280; }
.rp-dev-dock .wfb-dev-label i { display: none; }
.rp-dev-dock .rp-dev-rowlabel { min-width: 64px; }
.rp-dev-dock .wfb-dev-divider { background: #E5E9EF; }
.rp-dev-dock .wfb-dev-toggle,
.rp-dev-dock .wfb-dev-role {
  height: 24px; padding: 0 10px; border: 0; border-radius: 999px;
  background: transparent; color: #6B7280; font-weight: 500;
}
.rp-dev-dock .wfb-dev-toggle:hover,
.rp-dev-dock .wfb-dev-role:hover { background: #F6F9FB; color: #101010; }
.rp-dev-dock .wfb-dev-toggle.active,
.rp-dev-dock .wfb-dev-role.active { background: #EAF3FF; color: #0d6efd; font-weight: 600; }
.rp-dev-dock .wfb-dev-roles { background: transparent; border: 0; padding: 0; }
.rp-dev-dock .rp-dev-select,
.rp-dev-dock .rp-dev-pill-name {
  height: 24px; max-width: 170px; border: 1px solid #E5E9EF; border-radius: 999px;
  background-color: #fff; color: #101010; font-weight: 500;
}
.rp-dev-dock .rp-dev-pill-name:hover { background: #F6F9FB; }
/* The eye: white and round, blue while the panel is open */
.rp-dev-dock .rp-dev-fab { border: 1px solid #E5E9EF; background: #fff; color: #6B7280; }
.rp-dev-dock .rp-dev-fab:hover { background: #F6F9FB; color: #101010; }
.rp-dev-dock .rp-dev-fab.active { background: #EAF3FF; color: #0d6efd; border-color: #C7DBFE; }

/* The new-user hub replaces the calendar and the board: only the persona row applies there */
body:has(#wfdGetStarted.d-flex) .rp-dev-row-kanban,
body:has(#wfdGetStarted.d-flex) .rp-dev-row-queue { display: none !important; }

/* dev toggle pill */
body.rp-settings .dev-toggle {
  position: fixed; bottom: 20px; right: 20px; z-index: 999;
  display: flex; align-items: center; gap: 8px;
  background: #1e1b4b; color: #a5b4fc; border-radius: 20px;
  padding: 8px 14px 8px 10px; font-size: 11.5px; font-weight: 700;
  box-shadow: 0 4px 16px rgba(0,0,0,.25); cursor: pointer;
  border: none;
  transition: background .12s;
}
body.rp-settings .dev-toggle:hover { background: #312e81; }
body.rp-settings .dev-toggle i { font-size: 14px; }
body.rp-settings .dev-toggle-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #818cf8;
  box-shadow: 0 0 0 2px rgba(129,140,248,.3);
}
/* dev-toggle pink variant (set via JS innerHTML) */
body.rp-settings .wfs-dot-pink { background: #f472b6; box-shadow: 0 0 0 2px rgba(244,114,182,.3); }

/* On a phone the pill keeps only its buttons, since the label costs
   more width than the screen has to give. */

@media (max-width: 576px) {
  .clw-preview-toggle {
    bottom: 12px;
    right: 12px;
    padding: 4px 4px 4px 10px;
      }

  .clw-preview-toggle-label {
    display: none;
      }

  .clw-preview-toggle-btn {
    padding: 5px 10px;
    font-size: 11px;
      }

    }