/*
 * Checklist row and control styling.
 *
 * WHY CSS RATHER THAN antd PROPS.
 * antd's Checkbox has two visual states, checked and not, and a disabled one that greys both. The
 * checklist needs four, because a checkbox here answers two different questions: "did the operator
 * tick this" and "did a handler succeed". Overriding the inner box is the only way to say that
 * without building a second checkbox component that would then drift from the real one.
 *
 *   manual, unticked      an input, waiting for the operator      antd default
 *   manual, ticked        the operator ticked it                  antd default (blue)
 *   automatic, pending    a result that has not happened yet      DASHED border
 *   automatic, succeeded  a result that did happen                GREEN, solid
 *
 * The dashed border is the load-bearing one: without it a disabled automatic checkbox is the same
 * shape as a manual one, so a checklist reads as if the operator forgot to tick two rows.
 */

/* Both automatic states stay visibly non-interactive -- D21: the checkbox is a report, and there
   must be no path by which "Ticket Suite" is ticked without the push having happened. */
.pw-chk-auto .ant-checkbox-disabled .ant-checkbox-inner,
.pw-chk-auto .ant-checkbox .ant-checkbox-inner {
  border-style: dashed;
  border-color: #d9d9d9;
  background-color: #fff;
}

.pw-chk-auto-done .ant-checkbox-disabled .ant-checkbox-inner,
.pw-chk-auto-done .ant-checkbox .ant-checkbox-inner {
  background-color: #52c41a;
  border-color: #52c41a;
  border-style: solid;
}

/* antd greys the tick on a disabled box. These are all disabled by design, so the mark has to be
   re-asserted or a succeeded step shows a green square with nothing in it. */
.pw-chk-auto-done .ant-checkbox-disabled .ant-checkbox-inner::after,
.pw-chk-auto-done .ant-checkbox .ant-checkbox-inner::after {
  border-color: #fff;
}

.pw-chk-auto .ant-checkbox-disabled + span,
.pw-chk-auto-done .ant-checkbox-disabled + span {
  cursor: default;
}

/* The failed row. A tint rather than a badge alone: an operator scanning a long checklist finds a
   coloured row without reading, which is the point of it. */
.pw-row-failed > td {
  background: #fff1f0;
}

.pw-row-failed:hover > td {
  background: #ffe7e5 !important;
}

/* The checkbox and its N/A button share the first column, as the build plan specifies: both always
   visible, either one choosable. */
.pw-ctl {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}

.pw-failure {
  color: #cf1322;
  font-size: 12px;
  line-height: 1.5;
}

/* Timestamps, emails and actor addresses are single tokens a reader scans rather than reads. Left
   to wrap they turn every row of the Checklists table three lines tall, which is harder to scan
   than the thing this tab replaced. The table scrolls sideways instead. */
.pw-nowrap {
  white-space: nowrap;
}

/* The failure reason is a sentence, not a token, so it wraps rather than widening the table under
   the pinned Action column -- where it was being clipped mid-word ("...mapped to TicketS"), losing
   the only part an operator can act on. */
.pw-failure {
  max-width: 450px;
  white-space: normal;
  overflow-wrap: anywhere;
}
.scroll-overflow-frame {
  position: relative;
}

/*
 * A thick scrollbar that never auto-hides. The default overlay bar is a thin line that macOS only
 * shows while scrolling, which is exactly why columns offscreen to the right went unnoticed.
 */
/*
 * antd gives table bodies a `scrollbar-color`, and a browser that has any standard scrollbar
 * property set ignores the ::-webkit-scrollbar rules below. Resetting it hands control back to
 * them, which is what makes the bar a real, always-visible one instead of the system overlay.
 */
.scroll-overflow-frame .ant-table-body {
  scrollbar-color: auto;
  scrollbar-width: auto;
}

.scroll-overflow-frame .ant-table-body::-webkit-scrollbar {
  height: 14px;
  width: 14px;
}

.scroll-overflow-frame .ant-table-body::-webkit-scrollbar-track {
  background: #f0f0f0;
}

.scroll-overflow-frame .ant-table-body::-webkit-scrollbar-thumb {
  background: #8c8c8c;
  border: 3px solid #f0f0f0;
  border-radius: 7px;
}

.scroll-overflow-frame .ant-table-body:focus-visible {
  outline: 2px solid #1677ff;
  outline-offset: -2px;
}

/* Soft edge behind the arrow. It never takes a click, so it cannot cover a control under it. */
.scroll-overflow-frame__fade {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 14px;
  width: 64px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 60%, #fff);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
}

.scroll-overflow-frame__arrow {
  pointer-events: auto;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #1677ff;
  color: #fff;
  font-size: 16px;
  line-height: 30px;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.scroll-overflow-frame__arrow:hover {
  background: #4096ff;
}
.account-info-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 200px;
  margin-top: var(--ant-margin-lg);
  padding-top: var(--ant-padding-sm);
  overflow: auto;
}


.account-info-row {
  display: flex;
  gap: 12px;
  align-items: baseline;
  width: 100%;
  min-width: 0;
}

.account-info-row > *:not(:first-child):not(.account-info-row-actions) {
  flex: 1;
  min-width: 0;
}

.account-info-row > .account-info-row-value-fit {
  flex: 0 1 auto;
  width: fit-content;
}

.account-info-row > span:first-child { /* the label <Text> */
  width: 135px;
  text-align: right;
  flex-shrink: 0;
  color: var(--ant-color-text-secondary);
}

.account-info-row-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-shrink: 0;
  width: 55px;
}

.account-info-block + .account-info-block {
  margin-top: 8px;
}

/* Make disabled selects more visible */
.disabled-select-visible.ant-select-disabled .ant-select-selector {
  color: var(--ant-color-text) !important;
  background-color: var(--ant-color-fill-quaternary) !important;
  cursor: not-allowed;
}

.disabled-select-visible.ant-select-disabled .ant-select-selection-item {
  color: var(--ant-color-text) !important;
}

/* Rest reason — same tone as "Active from" line */
.rest-reason {
  margin-top: 6px;
  font-size: 13px;
  color: var(--ant-color-text-secondary);
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.ams-wrapper {
  padding: 0;
}

.ams-wrapper .status-select-inactive .ant-select-selector {
  background-color: #f5222d !important; /* Red color from the picture */
  color: white !important;
  border: none !important; /* Ensure no border */
  border-radius: 4px; /* Optional: Add some rounded corners */
  padding-left: 12px !important; /* Adjust padding as needed */
  padding-right: 12px !important; /* Adjust padding as needed */
}

.ams-wrapper .status-select-active .ant-select-selector {
  background-color: #389e0d !important; /* Green color from the picture */
  color: white !important;
  border: none !important; /* Ensure no border */
  border-radius: 4px; /* Optional: Add some rounded corners */
  padding-left: 12px !important; /* Adjust padding as needed */
  padding-right: 12px !important; /* Adjust padding as needed */
}

/* Style for the dropdown options */
.ams-wrapper .ant-select-dropdown .status-option-inactive {
  background-color: #f5222d !important; /* Red color for Inactive option */
  color: white !important;
}

.ams-wrapper .ant-select-dropdown .status-option-active {
  background-color: #389e0d !important; /* Green color for Active option */
  color: white !important;
}

.ams-wrapper .status-select-inactive .ant-select-arrow,
.ams-wrapper .status-select-active .ant-select-arrow {
  color: #fff;
  font-size: 12px;
}

.ams-wrapper .ant-select-dropdown .ant-select-item {
  padding: 4px 12px !important; /* Adjust padding for dropdown items */
}

.ams-wrapper
  .ant-select-dropdown
  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background-color: lightskyblue !important; /* Optional: Highlight color for active dropdown item */
}

.ams-wrapper .custom-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--ant-gray-9);
  width: 100%;
  color: var(--ant-gray-1);
  padding: 8px 14px;
  border-radius: 8px 8px 0 0;
  position: absolute;
  top: 0;
  left: 0;
}

.ams-wrapper .custom-modal-header button {
  color: var(--ant-gray-1);
}

.ams-wrapper .change-proxy-field {
  position: relative;
}

.ams-wrapper .change-proxy-select-with-copy .ant-select-selector {
  padding-right: 30px !important;
}

.ams-wrapper .change-proxy-select-with-copy .ant-select-selection-search {
  right: 30px !important;
}

.ams-wrapper .change-proxy-select-with-copy .ant-select-selection-item {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ams-wrapper .change-proxy-copy-button {
  position: absolute;
  right: 28px;
  top: 32px;
  z-index: 2;
}

.ams-wrapper .change-proxy-copy-button-copied {
  color: #389e0d;
}

.ams-wrapper .change-proxy-copy-button-copied:hover,
.ams-wrapper .change-proxy-copy-button-copied:focus-visible {
  color: #389e0d !important;
}


.ams-wrapper.physical-phone-details-modal .physical-phone-details-content {
  padding: 20px 0;
  width: 100%;
}

.ams-wrapper.physical-phone-details-modal .physical-phone-details-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 28px;
  row-gap: 10px;
  width: 100%;
}

.ams-wrapper.physical-phone-details-modal .physical-phone-detail-row {
  min-width: 0;
}

.ams-wrapper.physical-phone-details-modal .physical-phone-detail-row > span:first-child {
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .ams-wrapper.physical-phone-details-modal .physical-phone-details-grid {
    grid-template-columns: 1fr;
  }
}

/* .ams-wrapper .account-info-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 600px;
} */

/* .ams-wrapper .account-info-row {
  display: flex;
  width: 100%;
}
.ams-wrapper .account-info-label {
  min-width: 130px;
  text-align: right;
  padding-right: 16px;
  font-weight: 500;
}

.ams-wrapper .account-info-value {
  font-size: 15px;
} */

.ams-wrapper .account_step_circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
}
.ams-wrapper .account_step_circle.completed {
  background-color: #389e0d;
}
.ams-wrapper .account_step_circle.not-completed {
  background-color: #b7eb8f;
}

.ams-wrapper .available-circle {
  margin-left: 6px;
  width: 22px; /* Adjust size as needed */
  height: 22px;
  border-radius: 50%;
  /* Modified gradient to have the blank part at the top */
  background: linear-gradient(
    to top,
    #389e0d 0%,
    #389e0d 80%,
    transparent 80%,
    transparent 100%
  );
  border: 3px solid #389e0d; /* Added a green border */
  display: flex;
  align-items: center;
  justify-content: center;
}

.ams-wrapper .unavailable-circle {
  margin-left: 6px;
  width: 22px; /* Adjust size as needed */
  height: 22px;
  border-radius: 50%;
  /* Modified gradient to have the blank part at the top */
  background: linear-gradient(
    to top,
    #f5222d 0%,
    #f5222d 20%,
    transparent 20%,
    transparent 100%
  );
  border: 3px solid #f5222d; /* Added a green border */
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 576px) {
  .ams-wrapper .email-checkbox {
    margin-left: 170px;
  }
}

/* Completed Steps style*/

/* Stages Editor Modal Styles */
.ams-wrapper .stages-container {
  margin-top: 55px;
  padding: 0 20px;
}

.ams-wrapper .stage-item {
  padding: 12px 16px;
  transition: background-color 0.2s ease;
}

.ams-wrapper .stage-item-odd {
  background-color: #f5f5f5;
}

.ams-wrapper .stage-item-even {
  background-color: transparent;
}

/* Dark mode support */
.dark .ams-wrapper .stage-item-odd {
  background-color: #232323;
}

.ams-wrapper .stage-item:hover {
  background-color: #e8e8e8;
}

.dark .ams-wrapper .stage-item:hover {
  background-color: #2a2a2a;
}

.ams-wrapper .stage-actions {
  opacity: 0;
  transition: opacity 0.2s ease;
}

.ams-wrapper .stage-item:hover .stage-actions {
  opacity: 1;
}


.ams-wrapper .step-modal-content::-webkit-scrollbar {
  width: 12px; /* width of the scrollbar */
}

.ams-wrapper .step-modal-content::-webkit-scrollbar-track {
  background: #f1f1f1; /* color of the track */
}

.ams-wrapper .step-modal-content::-webkit-scrollbar-thumb {
  background-color: #888; /* color of the thumb */
  border-radius: 6px; /* roundness of the thumb */
  border: 3px solid #f1f1f1; /* border around the thumb */
}

.ams-wrapper .step-modal-content {
  padding: 0;
  margin: 0;
  margin-top: 55px;
  width: 100%;
  overflow-x: auto;
}

.ams-wrapper .step-form-container {
  margin-top: 180px;
}

.dark .ams-wrapper .step-form {
  background-color: #333;
}

.ams-wrapper .step-form {
  background-color: #f5f5f5;
  border-radius: 4px;
  padding: 10px 20px;
  width: 95%;
  margin: 0 auto;
}

/* .ams-wrapper .step-labels::before {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 90px;
  width: 300px;
  height: 3.5px;
  background-color: orange;
} */

.ams-wrapper .step-container {
  margin: 0;
  padding: 0;
  width: fit-content;
}

.ams-wrapper .nickname {
  font-size: 12px;
  font-weight: 700;
}

.ams-wrapper .step-labels {
  position: relative;
  display: flex;
  gap: 30px;
  padding-left: 45px;
  /* margin-bottom: 10px; */
}

.ams-wrapper .step-label-container {
  position: relative;
  width: 16px;
}

.ams-wrapper .step-label {
  position: absolute;
  top: -105px;
  left: -20px;
  font-weight: 700;
  width: 280px;
  font-size: 12px;
  rotate: -40deg;
}
/* Completed Steps style*/

.ams-wrapper .ams-copyable-column-title {
  width: 100%;
  min-width: 0;
}

.ams-wrapper .ams-copyable-column-title-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ams-wrapper .ams-copyable-column-title-button {
  flex-shrink: 0;
  padding: 0 4px;
  height: 22px;
  width: 22px;
}

/* A primary-login row that breaches the one-active rule (D8). Tinted rather than
   badged-only, so a violation in a long list is visible without reading every row. */
.ams-row-violation > td {
  background-color: #fff1f0 !important;
}
.ams-row-violation:hover > td {
  background-color: #ffccc7 !important;
}

/* Multi-row tabs. antd has no native wrap or multi-row mode — it measures the strip and
   collapses the overflow behind a "..." menu — so this has to be done in CSS: let the nav
   grow, stop the list being a transformed single-line strip, and hide the overflow menu.

   Each tab carries its own bottom border, which reads as a rule under each row once the
   strip wraps. Spacing is tightened because the default 32px gap wastes a lot of vertical
   room once there are two rows. */
.ams-tabs-wrap .ant-tabs-nav-wrap {
  overflow: visible !important;
}
.ams-tabs-wrap .ant-tabs-nav-list {
  flex-wrap: wrap !important;
  transform: none !important;
  row-gap: 0;
}
.ams-tabs-wrap .ant-tabs-nav-operations {
  display: none !important;
}
.ams-tabs-wrap .ant-tabs-tab {
  margin: 0 !important;
  padding: 6px 14px !important;
  border-bottom: 1px solid #f0f0f0;
}
/* antd's own underline sits below the whole nav; with wrapped rows it would only underline
   the last one, so the per-tab border above replaces it. */
.ams-tabs-wrap .ant-tabs-nav::before {
  border-bottom: none !important;
}
.ams-tabs-wrap .ant-tabs-nav {
  margin-bottom: 12px !important;
}
.bw-account-card {
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.bw-section-header {
    font-size: 12px;
    color: #8c8c8c;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.bw-data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
}

.bw-data-table th {
    text-align: left;
    font-size: 12px;
    padding: 8px;
    background: #fafafa;
    border-bottom: 1px solid #f0f0f0;
    color: #595959;
}

.bw-data-table td {
    padding: 8px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

.bw-data-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #f5f5f5;
    border-radius: 4px;
    border: 1px solid #d9d9d9;
    font-size: 12px;
}

.bw-link-icon {
    color: #1890ff;
    cursor: pointer;
    margin-left: 8px;
    font-size: 14px;
}

.bw-link-icon:hover {
    color: #40a9ff;
}

/* ==============================
  STAGES & STEPS CONFIG MODAL
  Simplified, grouped, consistent
  ============================== */

/*
  NOTE: Theme support
  The React ThemeContext toggles a 'dark' class on <body>. All custom light-mode
  colors below are hard‑coded for clarity. Dark-mode equivalents are appended
  at the bottom of the file using the selector `body.dark ...` so Ant Design's
  dark algorithm + our overrides stay in sync without refactoring to CSS vars.
*/

/* ---------- Base Containers ---------- */
.stages-collapse {
  border: none;
}

/* Shared panel styles */
.stage-collapse-item,
.step-collapse-item {
  background: #fff;
  border: none;
  border-radius: 8px !important;
  margin-bottom: 0;
}

/* Spacing between sibling panels */
.stage-collapse-item + .stage-collapse-item {
  margin-top: 8px;
}
.step-collapse-item + .step-collapse-item {
  margin-top: 6px;
}

.step-collapse-item .ant-collapse-header {
  display: flex;
  align-items: center !important;
}

/* Collapse headers */
.stages-collapse .ant-collapse-header {
  display: flex;
  align-items: center;
}

.stages-collapse .ant-collapse-expand-icon {
  display: flex;
  align-items: center;
  padding-inline-end: 4px;
  line-height: 1;
}

.stages-collapse .ant-collapse-header-text {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 24px;
  line-height: 1.1;
}

.stages-collapse .ant-collapse-extra {
  display: flex;
  align-items: center;
  gap: 8px !important;
  line-height: 1;
  padding-left: 12px;
}

.stages-collapse .ant-collapse-extra .ant-btn {
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stages-collapse .ant-collapse-extra .ant-btn .anticon,
.stages-collapse .ant-collapse-header .anticon {
  font-size: 14px;
  line-height: 1;
}

.stages-collapse input.ant-input {
  height: 24px;
  padding: 0 6px;
  font-size: 13px;
}

.stages-collapse .ant-collapse-content {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

/* Fixed-size container with internal scrolling for stages */
.stages-container {
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  border-radius: 8px;
  padding: 16px;
  height: 440px;
  box-sizing: border-box;
}

.stages-scroll {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 6px;
}
.stage-add {
  margin-top: 12px;
}

/* Optional custom scrollbar */
.stages-scroll::-webkit-scrollbar {
  width: 8px;
}
.stages-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.stages-scroll::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}
.stages-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

/* Drag & drop styles */
.draggable-stage {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}
.draggable-stage.dragging {
  opacity: 0.6;
}
.single-stage {
  flex: 1;
}

/* Step drag & drop */
/* Steps container */
.steps-droppable {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Draggable step wrapper mimics stage style */
/* Draggable steps */
.draggable-step {
  display: flex;
  align-items: stretch;
  gap: 8px;
}
.draggable-step.dragging {
  opacity: 0.65;
}
.single-step {
  flex: 1;
}

/* Stage steps inner wrapper (extracted from inline styles) */
.stage-steps-inner {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
}

/* Unified drag handle style */
.drag-handle-wrapper,
.step-drag-handle-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  cursor: grab;
  color: #888;
}
.drag-handle-wrapper:active,
.step-drag-handle-wrapper:active {
  cursor: grabbing;
}

/* Step body & actions */
.step-body {
  padding: 8px 12px 12px;
}
.step-body label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 4px;
}
.step-extra-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Manual steps: hide arrow but keep normal cursor handled inline (no special styling needed) */
/* Hide only the arrow icon for manual steps while preserving space for alignment */
.manual-step .ant-collapse-expand-icon { visibility: hidden; }

/* ------------------ Read-only banner ------------------ */
.link-filter-banner {
  display: flex;
  gap: 12px;
  background: linear-gradient(90deg, #f0f5ff 0%, #f7faff 100%);
  border: 1px solid #d4e3ff;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  font-size: 13px;
  line-height: 1.4;
}
.link-filter-icon-wrapper {
  color: #2f73ff;
  font-size: 18px;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.link-filter-text { flex: 1; }
.link-filter-heading { font-weight: 600; margin-bottom: 2px; }
.link-filter-sub { color: #4a5668; }
.link-filter-link { font-weight: 600; }
.link-filter-link:hover { text-decoration: underline; }

/* Configuration intro banner (editable mode) */
.config-intro-banner {
  display: flex;
  gap: 14px;
  background: linear-gradient(90deg, #f8f9fb 0%, #f2f7ff 100%);
  border: 1px solid #e0e8f5;
  padding: 12px 16px 12px 14px;
  border-radius: 8px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  font-size: 13px;
  line-height: 1.45;
}
.config-intro-icon-wrapper {
  color: #1677ff;
  font-size: 20px;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.config-intro-text { flex: 1; min-width: 0; }
.config-intro-heading { font-weight: 600; margin-bottom: 4px; font-size: 13px; }
.config-intro-points { margin: 0; padding-left: 18px; display: grid; gap: 2px; }
.config-intro-points li { padding-left: 2px; }
.config-intro-points .kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: #fff;
  border: 1px solid #d0d7e2;
  padding: 0 4px;
  border-radius: 4px;
  font-size: 11px;
  display: inline-block;
  line-height: 1.2;
  vertical-align: baseline;
}

/* Popover variant (if help content shown inside popover) */
.config-intro-banner.popover-variant {
  margin: 0;
  box-shadow: none;
  background: transparent;
  border: none;
  padding: 0;
}

/* Empty / no-data state centered */
.stages-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px 12px;
  color: #bfbfbf;
  gap: 12px;
}
.stages-empty .anticon { font-size: 48px; }
.stages-empty p { margin: 0; font-size: 16px; }

/* ==============================
   DARK THEME OVERRIDES
   Applied when <body> has class 'dark'
   ============================== */
body.dark .stage-collapse-item,
body.dark .step-collapse-item {
  background: #1f1f1f;
}
body.dark .stages-container {
  background: #141414;
}
body.dark .stages-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
}
body.dark .stages-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.4);
}
body.dark .drag-handle-wrapper,
body.dark .step-drag-handle-wrapper {
  color: #b5b5b5;
}
body.dark .step-body label {
  color: #d0d0d0;
}
body.dark .stages-empty {
  color: #5a5a5a;
}
/* Banners */
body.dark .link-filter-banner {
  background: linear-gradient(90deg, #1a2733 0%, #16232e 100%);
  border-color: #2b3d4b;
  color: #d2d9e0;
}
body.dark .link-filter-icon-wrapper { color: #5aa6ff; }
body.dark .link-filter-heading { color: #e2e8ef; }
body.dark .link-filter-sub { color: #9aa6b4; }
body.dark .link-filter-link { color: #7bbdff; }
body.dark .link-filter-link:hover { text-decoration: underline; }

body.dark .config-intro-banner {
  background: linear-gradient(90deg, #1f252d 0%, #1a2a3b 100%);
  border-color: #2c3a46;
  color: #d6dce2;
}
body.dark .config-intro-icon-wrapper { color: #4096ff; }
body.dark .config-intro-heading { color: #e4e9ef; }
body.dark .config-intro-points .kbd {
  background: #1a1a1a;
  border-color: #323232;
  color: #d0d0d0;
}

/* Collapse header adjustments for contrast */
body.dark .stages-collapse .ant-collapse-header-text { color: #d9d9d9; }
body.dark .stages-collapse input.ant-input {
  background: #141414;
  border-color: #303030;
  color: #d9d9d9;
}
body.dark .stages-collapse input.ant-input::placeholder { color: #777; }
body.dark .stages-collapse .ant-collapse-extra .ant-btn,
body.dark .stages-collapse .ant-collapse-header .anticon { color: #bfbfbf; }
body.dark .stages-collapse .ant-collapse-extra .ant-btn:hover .anticon { color: #fff; }

/* Step body surface */
body.dark .step-body { color: #d0d0d0; }

/* Ensure manual step hidden icon area doesn't appear as a bright gap */
body.dark .manual-step .ant-collapse-expand-icon { background: transparent; }

/* Dark override for extracted stage steps wrapper */
body.dark .stage-steps-inner { background: #1f1f1f; }

.account-steps-progress-modal .account-steps-progress-modal-content .stage-table {
  border-left: 4px solid #d9d9d9;
  margin-left: 12px;
  padding-left: 12px;
}

.account-steps-progress-modal .account-steps-progress-modal-content .step-table {
  border-left: 4px solid #bfbfbf;
  margin-left: 12px;
  padding-left: 12px;
}

.account-steps-progress-modal .account-steps-progress-modal-content .account-name {
  font-weight: 600;
}

body.dark .account-steps-progress-modal .account-steps-progress-modal-content .stage-table {
  border-left: 4px solid #595959;
  margin-left: 12px;
  padding-left: 12px;
}

body.dark .account-steps-progress-modal .account-steps-progress-modal-content .step-table {
  border-left: 4px solid #434343;
  margin-left: 12px;
  padding-left: 12px;
}.create-account-modal .warning-container {
  padding-top: var(--ant-padding-sm);
  margin-left: calc(var(--ant-margin-lg) * -1);
  margin-right: calc(var(--ant-margin-lg) * -1);
}

.create-account-modal .create-account-form-errors {
  margin-bottom: var(--ant-margin-sm);
}

.create-account-modal .create-account-form-errors .ant-alert-icon {
  padding-top: var(--ant-padding-xxs);
  font-size: var(--ant-font-size);
}

.create-account-modal .create-account-form-errors .ant-alert-message {
  font-size: var(--ant-font-size);
  font-weight: var(--ant-font-weight-strong);
}

.create-account-modal
  .create-account-form-errors
  .create-account-form-error-list {
  margin: 0;
  padding-left: var(--ant-padding);
  font-size: var(--ant-font-size-sm);
}

.create-account-modal .modal-step-content.step-first {
  margin-top: var(--ant-margin-lg);
  padding-top: var(--ant-padding-sm);
  min-height: 150px;
  max-height: 500px;
  width: 90%;
  overflow: auto;
  /* One vertical rhythm for rows inside a grid and between stacked grids. */
  --step-first-checkbox-vgap: var(--ant-padding-sm);
}

/* Full-width row (Form.Item wrapperCol 24); shell centered in step so left/right inset match. */
.create-account-modal .modal-step-content.step-first .step-first-options-shell {
  width: 100%;
  max-width: min(40rem, 100%);
  margin-inline: auto;
  padding-inline: var(--ant-padding-sm);
  box-sizing: border-box;
  transform: translateX(-10px);
}

.create-account-modal .modal-step-content.step-first .step-first-options-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 3rem;
  align-items: start;
}

.create-account-modal
  .modal-step-content.step-first
  .step-first-options-two-col--single {
  grid-template-columns: minmax(0, 1fr);
}

.create-account-modal .modal-step-content.step-first .step-first-options-col {
  display: flex;
  flex-direction: column;
  gap: var(--step-first-checkbox-vgap);
  min-width: 0;
}

/* Per row: label (right-aligned) + checkbox; aligned within each half-column. */
.create-account-modal .modal-step-content.step-first .step-first-checkbox-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--ant-padding-xs);
  row-gap: var(--step-first-checkbox-vgap);
  width: 100%;
}

.create-account-modal .modal-step-content.step-first .step-first-checkbox-label {
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
  line-height: var(--ant-line-height);
  justify-self: end;
  text-align: end;
}

.create-account-modal
.modal-step-content.step-second-any-metro, 
.modal-step-content.step-second-with-metro,
.modal-step-content.step-third-credit-card-ordering {
  height: 600px;
  overflow: auto;
}

.create-account-modal .account-item-required::before {
  display: inline-block;
  margin-inline-end: var(--ant-margin-xxs);
  color: var(--ant-form-label-required-mark-color);
  font-size: var(--ant-font-size);
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: "*";
}

.create-account-table-select-dropdown.ant-select-dropdown {
  min-width: max-content;
  width: max-content;
}

.create-account-table-select-dropdown .ant-select-item-option-content {
  white-space: nowrap;
  overflow: visible;
  text-overflow: unset;
}

.create-account-modal .dot-accounts-step-first-parent {
  margin-top: var(--ant-margin-md);
  padding-inline: var(--ant-padding-sm);
}

.create-account-modal .dot-accounts-step-first-parent-label {
  margin-bottom: var(--ant-margin-xs);
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
}

.create-account-modal .dot-accounts-step-first-help {
  margin-top: var(--ant-margin-xs);
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size-sm);
  line-height: 1.5;
}.step-dot-accounts {
  margin-top: var(--ant-margin-sm);
  padding-top: var(--ant-padding-md);
  max-height: min(75vh, 820px);
  overflow: auto;
  padding-right: var(--ant-padding-xs);
}

.dot-accounts-parent-select-form {
  margin-bottom: var(--ant-margin-sm);
}

.dot-accounts-help-text {
  display: block;
  font-size: var(--ant-font-size-sm);
  line-height: 1.5;
  max-width: 56rem;
}

.dot-accounts-banner {
  margin-top: var(--ant-margin-sm);
}

.dot-accounts-banner + .dot-accounts-banner {
  margin-top: var(--ant-margin-xs);
}

.dot-accounts-policy-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ant-margin-xs);
  margin-top: var(--ant-margin-md);
}

.dot-accounts-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--ant-margin-sm);
  margin-top: var(--ant-margin-sm);
}

.dot-accounts-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--ant-padding-md) var(--ant-padding-sm);
  border: 1px solid var(--ant-color-border-secondary);
  border-radius: var(--ant-border-radius-lg);
  background: var(--ant-color-bg-container);
  text-align: center;
}

.dot-accounts-stat-card strong {
  font-size: 28px;
  line-height: 1.1;
  font-weight: var(--ant-font-weight-strong);
}

.dot-accounts-stat-card span {
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text-secondary);
}

.dot-accounts-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 220px;
  margin-top: var(--ant-margin-md);
  border: 1px dashed var(--ant-color-border-secondary);
  border-radius: var(--ant-border-radius-lg);
  background: var(--ant-color-fill-quaternary);
}

.dot-accounts-loading--inline {
  min-height: 120px;
  margin-top: 0;
  border: none;
  background: transparent;
}

.dot-accounts-parent-list {
  display: flex;
  flex-direction: column;
  gap: var(--ant-margin-sm);
  margin-top: var(--ant-margin-md);
}

.dot-accounts-parent-row {
  border: 1px solid var(--ant-color-border-secondary);
  border-radius: var(--ant-border-radius-lg);
  background: var(--ant-color-bg-container);
  overflow: hidden;
}

.dot-accounts-parent-row-header {
  display: flex;
  align-items: center;
  gap: var(--ant-margin-sm);
  padding: var(--ant-padding-sm) var(--ant-padding-md);
  min-height: 64px;
}

.dot-accounts-parent-row-toggle {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ant-color-text-secondary);
  cursor: pointer;
}

.dot-accounts-parent-row-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dot-accounts-parent-row-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.dot-accounts-parent-row-nickname {
  font-size: var(--ant-font-size-lg);
  line-height: 1.2;
}

.dot-accounts-status-tag {
  margin-inline-end: 0;
}

.dot-accounts-proxy-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.4;
}

.dot-accounts-proxy-badge--ok {
  color: var(--ant-color-success);
  background: var(--ant-color-success-bg);
}

.dot-accounts-proxy-badge--bad {
  color: var(--ant-color-error);
  background: var(--ant-color-error-bg);
}

.dot-accounts-proxy-badge--unknown {
  color: var(--ant-color-text-secondary);
  background: var(--ant-color-fill-tertiary);
}

.dot-accounts-parent-row-meta {
  display: block;
  font-size: var(--ant-font-size-sm);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dot-accounts-parent-row-controls {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: var(--ant-margin-sm);
  margin-left: auto;
}

.dot-accounts-parent-row-counts {
  white-space: nowrap;
  font-size: var(--ant-font-size-sm);
}

.dot-accounts-parent-row-how-many {
  width: 64px;
}

.dot-accounts-control-label {
  font-size: var(--ant-font-size-sm);
  color: var(--ant-color-text-secondary);
  white-space: nowrap;
}

.dot-accounts-parent-row-body {
  padding: 0 var(--ant-padding-md) var(--ant-padding-md);
  border-top: 1px solid var(--ant-color-border-secondary);
}

.dot-accounts-builder {
  display: flex;
  flex-direction: column;
  gap: var(--ant-margin-sm);
  min-width: 0;
  padding-top: var(--ant-padding-sm);
}

.dot-accounts-warning-box {
  background: var(--ant-color-warning-bg);
  border: 1px solid var(--ant-color-warning-border);
  border-radius: var(--ant-border-radius);
  padding: var(--ant-padding-sm) var(--ant-padding);
  font-size: var(--ant-font-size-sm);
  line-height: 1.5;
  color: var(--ant-color-warning-text);
}

.dot-accounts-builder-card {
  border: 1px solid var(--ant-color-border-secondary);
  border-radius: var(--ant-border-radius-lg);
  padding: var(--ant-padding-md);
  background: var(--ant-color-bg-container);
}

.dot-accounts-builder-header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: var(--ant-margin-md);
  min-width: 0;
}

.dot-accounts-builder-header-title {
  flex-shrink: 0;
  white-space: nowrap;
}

.dot-accounts-route-hint {
  display: block;
  width: 100%;
  font-size: var(--ant-font-size-sm);
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.dot-accounts-builder-controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ant-margin-md);
  margin-bottom: var(--ant-margin-md);
}

.dot-accounts-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 220px;
  min-width: 0;
}

.dot-accounts-control--how-many {
  flex: 0 0 120px;
}

.dot-accounts-base-address {
  display: flex;
  align-items: center;
  min-height: 32px;
  padding: 4px 11px;
  border-radius: var(--ant-border-radius);
  background: var(--ant-color-fill-tertiary);
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
  line-height: 1.5715;
  word-break: break-all;
}

.dot-accounts-builder-table-wrap {
  overflow-x: auto;
}

.dot-accounts-builder-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.dot-accounts-builder-table th {
  text-align: left;
  font-size: var(--ant-font-size-sm);
  font-weight: var(--ant-font-weight-strong);
  color: var(--ant-color-text-secondary);
  padding: 0 var(--ant-padding-xs) var(--ant-padding-sm);
  border-bottom: 1px solid var(--ant-color-border-secondary);
}

.dot-accounts-builder-table th:nth-child(1) {
  width: 24%;
}

.dot-accounts-builder-table th:nth-child(2) {
  width: 14%;
}

.dot-accounts-builder-table th:nth-child(3) {
  width: 34%;
}

.dot-accounts-builder-table th:nth-child(4) {
  width: 20%;
}

.dot-accounts-builder-table th:nth-child(5) {
  width: 40px;
}

.dot-accounts-builder-table td {
  padding: var(--ant-padding-sm) var(--ant-padding-xs);
  vertical-align: top;
  border-bottom: 1px solid var(--ant-color-border-secondary);
}

.dot-accounts-builder-table td.dot-accounts-rowspan-cell--multi {
  vertical-align: middle;
}

.dot-accounts-nickname-cell {
  vertical-align: top;
}

.dot-accounts-builder-table .ant-input,
.dot-accounts-builder-table .ant-select-selector {
  min-height: 32px;
}

.dot-accounts-email-cell-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.dot-accounts-child-email {
  font-size: var(--ant-font-size-sm);
  word-break: break-all;
}

.dot-accounts-add-primary {
  padding-inline: 0;
  height: auto;
  font-size: var(--ant-font-size-sm);
}

.dot-accounts-row-action {
  text-align: center;
  vertical-align: middle !important;
}

.dot-accounts-footer {
  width: 100%;
  text-align: left;
}

.dot-accounts-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ant-margin-md);
  margin-bottom: var(--ant-margin-sm);
}

.dot-accounts-footer-summary {
  color: var(--ant-color-text);
  font-size: var(--ant-font-size);
}

.dot-accounts-footer-summary strong {
  font-weight: var(--ant-font-weight-strong);
}

.dot-accounts-footer-note {
  margin: 0;
  color: var(--ant-color-text-secondary);
  font-size: var(--ant-font-size-sm);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .dot-accounts-stats {
    grid-template-columns: 1fr;
  }

  .dot-accounts-parent-row-header {
    flex-wrap: wrap;
  }

  .dot-accounts-parent-row-controls {
    width: 100%;
    margin-left: 32px;
    justify-content: flex-end;
  }

  .dot-accounts-parent-row-meta {
    white-space: normal;
  }
}

/* ---------------------------------------------------------------------------
   Create By Primary — start from the primary, not the people.
   --------------------------------------------------------------------------- */

.dot-by-primary-setup {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 16px 18px;
  margin-bottom: 16px;
}

/* Platform, Primary, How many, remove. The primary column is widest because names are long and
   truncating them is how the wrong primary gets picked. */
.dot-by-primary-line {
  display: grid;
  grid-template-columns: 1.1fr 1.6fr 92px 34px;
  gap: 10px;
  align-items: center;
  margin-bottom: 9px;
}

.dot-by-primary-line .ant-select {
  width: 100%;
}

.dot-by-primary-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

/* Closed by default: needed the first few times and by anyone questioning a choice, noise after. */
.dot-by-primary-help .ant-collapse-header {
  padding-left: 0 !important;
}

.dot-by-primary-help-body {
  font-size: 13px;
}

.dot-by-primary-rank-list {
  margin: 8px 0;
  padding-left: 20px;
  font-size: 13px;
}

.dot-by-primary-rank-list li {
  margin: 2px 0;
}

/* One block per primary. The header keeps the name, tag and count visible, so a collapsed block
   still answers "did this primary get what I asked for". */
.dot-by-primary-block {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

.dot-by-primary-block-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 13px;
  background: #f0f5ff;
  border-bottom: 1px solid #adc6ff;
}

.dot-by-primary-block-tag,
.dot-by-primary-block-count {
  font-size: 12px;
  color: #5a6b8c;
}

.dot-by-primary-block .ant-alert,
.dot-by-primary-block .ant-collapse,
.dot-by-primary-block .ant-table-wrapper {
  margin: 10px 13px;
}

.dot-by-primary-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* ---------------------------------------------------------------------------
   Method picker — Create By Email or Create By Primary.
   --------------------------------------------------------------------------- */

.dot-method-picker {
  margin-top: 8px;
}

.dot-method-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.dot-method {
  text-align: left;
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  padding: 16px 18px;
  background: #fff;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dot-method:hover {
  border-color: #91caff;
}

.dot-method--selected {
  border-color: #1677ff;
  box-shadow: 0 0 0 2px #e6f4ff;
}

.dot-method-title {
  font-size: 15px;
  font-weight: 650;
}

.dot-method-description {
  font-size: 13px;
  color: #595959;
}

/* Both Create buttons are primary — neither is the lesser choice, and ordering cards is the
   common case rather than an afterthought. */
.dot-accounts-footer-actions {
  display: flex;
  gap: 10px;
}

/* The summary, at the point of decision: one strip directly above the buttons. Replaces the three
   stat cards and the paragraph of rules that used to sit under Create. */
.dot-accounts-summary-strip {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  overflow: hidden;
  background: #fafafa;
  margin-bottom: 12px;
}

.dot-accounts-summary-strip .seg {
  padding: 6px 15px;
  font-size: 13px;
  border-right: 1px solid #d9d9d9;
}

.dot-accounts-summary-strip .seg:last-child {
  border-right: 0;
  color: #737373;
}

/* ---------------------------------------------------------------------------
   Swap picker — choose a different account for one proposed row.
   --------------------------------------------------------------------------- */

.dot-swap-picker {
  border: 1px solid #d9d9d9;
  border-radius: 8px;
  box-shadow: 0 10px 32px #00000022;
  background: #fff;
  padding: 12px 14px;
  margin: 10px 0;
  max-width: 620px;
}

.dot-swap-picker-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Rows are buttons, not divs: they are the primary action of this popover and have to be
   reachable and operable from the keyboard. */
.dot-swap-candidate {
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
  text-align: left;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.dot-swap-candidate:hover,
.dot-swap-candidate:focus-visible {
  background: #e6f4ff;
}

/* Next available is the default action and reads as one, so an operator with no opinion clicks
   once and gets what the automatic selection would have chosen. */
.dot-swap-candidate--next {
  background: #e6f4ff;
  margin-bottom: 4px;
}

.dot-swap-who {
  font-weight: 600;
}

.dot-swap-why {
  margin-left: auto;
  color: #737373;
  font-size: 12px;
}

.dot-swap-list-label {
  border-top: 1px solid #f0f0f0;
  margin-top: 8px;
  padding-top: 6px;
  font-size: 12px;
  color: #8c8c8c;
}

.dot-swap-empty {
  padding: 14px 9px;
  text-align: center;
  color: #8c8c8c;
  font-size: 13px;
}

.dot-swap-picker-actions {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #f0f0f0;
  margin-top: 8px;
  padding-top: 8px;
}

.dot-swap-cancel {
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  background: #fff;
  padding: 4px 14px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

/* Name over email: the nickname alone does not distinguish two accounts of the same person, and
   the address is what the child inherits a variant of. */
.dot-swap-person {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}

.dot-swap-email {
  font-size: 11px;
  color: #8c8c8c;
}
.account-steps-modal .stages-container {
  background: transparent;
}

.account-steps-modal .account-stages {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.account-steps-modal .account-stage-item {
  background: #f5f5f5;
  padding: 12px 14px;
  border-radius: 8px;
}

.account-steps-modal .account-stage-item.stage-complete {
  outline: 2px solid #73d13d;
  outline-offset: -2px;
  background: #f6ffed;
}

.account-steps-modal .account-stage-title.stage-complete.check-icon {
  color: #73d13d;
}

.account-steps-modal .account-stage-title {
  font-weight: 600;
}

.account-steps-modal .account-stage-title.has-steps {
  margin-bottom: 8px;
}

.account-steps-modal .account-stage-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.account-steps-modal .account-stage-step {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

/* Checkbox tweaks */
.account-steps-modal .account-stage-checkbox {
  margin: 0;
  padding: 0;
  cursor: default;
}

.account-steps-modal .account-stage-no-steps {
  font-size: 12px;
  opacity: 0.55;
}

/* Dark theme overrides */
body.dark .account-steps-modal .stages-container {
  background: transparent;
}

body.dark .account-steps-modal .account-stage-item {
  background: #262626;
}

body.dark .account-steps-modal .account-stage-no-steps {
  opacity: 0.6;
}
/* Scoped to this modal so light/dark overrides do not leak to other pages */

.phone-bulk-upload-modal .notion-callout {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border-radius: 4px;
  background-color: #f7f7f7;
  border: 1px solid #e0e0e0;
  margin: -1em 0;
  gap: 12px;
  margin-top: 40px;
}

.phone-bulk-upload-modal .callout-icon {
  font-size: 24px;
}

.phone-bulk-upload-modal .callout-content p {
  margin: 0;
  color: rgba(0, 0, 0, 0.88);
  line-height: 1.5;
  font-size: small;
}

.phone-bulk-upload-modal .callout-content p strong {
  color: rgba(0, 0, 0, 0.88);
}

body.dark .phone-bulk-upload-modal .notion-callout {
  background-color: #2a2a2a;
  border-color: #434343;
}

body.dark .phone-bulk-upload-modal .callout-content p,
body.dark .phone-bulk-upload-modal .callout-content p strong {
  color: #e4e9ef;
}

.phone-bulk-upload-modal__download {
  margin-top: 21px;
  text-align: right;
}

.phone-bulk-upload-modal__download a {
  color: #1677ff;
}

body.dark .phone-bulk-upload-modal__download a {
  color: #69b1ff;
}

body.dark .phone-bulk-upload-modal__download a:hover {
  color: #91caff;
}

.phone-bulk-upload-dragger-item--error {
  color: #cf1322;
}

body.dark .phone-bulk-upload-dragger-item--error {
  color: #ff7875;
}

.phone-bulk-upload-preview {
  margin-top: 24px;
}

.phone-bulk-upload-preview__title {
  margin: 0 0 8px;
  color: rgba(0, 0, 0, 0.88);
  font-size: 16px;
  font-weight: 600;
}

body.dark .phone-bulk-upload-preview__title {
  color: #e4e9ef;
}

.phone-bulk-upload-preview__block {
  margin-bottom: 12px;
}

.phone-bulk-upload-preview__label {
  color: rgba(0, 0, 0, 0.88);
}

body.dark .phone-bulk-upload-preview__label {
  color: #e4e9ef;
}

.phone-bulk-upload-preview__label--invalid {
  color: #cf1322;
}

body.dark .phone-bulk-upload-preview__label--invalid {
  color: #ff7875;
}

.phone-bulk-upload-preview__scroll {
  max-height: 180px;
  overflow: auto;
  border-radius: 4px;
  margin-top: 6px;
}

.phone-bulk-upload-preview__scroll--valid {
  border: 1px solid #e5e5e5;
}

body.dark .phone-bulk-upload-preview__scroll--valid {
  border-color: #434343;
}

.phone-bulk-upload-preview__scroll--invalid {
  max-height: 120px;
  border: 1px solid #ffccc7;
}

body.dark .phone-bulk-upload-preview__scroll--invalid {
  border-color: #5c2727;
}

.phone-bulk-upload-preview__table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}

.phone-bulk-upload-preview__table th {
  text-align: left;
  padding: 6px 8px;
  background: #fafafa;
  border-bottom: 1px solid #e8e8e8;
  color: rgba(0, 0, 0, 0.88);
  font-weight: 600;
}

body.dark .phone-bulk-upload-preview__table th {
  background: #303030;
  border-bottom-color: #434343;
  color: #f0f0f0;
}

.phone-bulk-upload-preview__table td {
  padding: 6px 8px;
  border-bottom: 1px solid #f0f0f0;
  color: rgba(0, 0, 0, 0.88);
}

body.dark .phone-bulk-upload-preview__table td {
  border-bottom-color: #303030;
  color: #d9d9d9;
}

.phone-bulk-upload-preview__table--invalid th {
  background: #fff5f5;
  border-bottom-color: #ffd6d6;
  color: rgba(0, 0, 0, 0.88);
}

body.dark .phone-bulk-upload-preview__table--invalid th {
  background: #3d2525;
  border-bottom-color: #5c2a2a;
  color: #f5e8e8;
}

.phone-bulk-upload-preview__table--invalid tbody tr {
  background: #fff5f5;
}

body.dark .phone-bulk-upload-preview__table--invalid tbody tr {
  background: #2d1f1f;
}

.phone-bulk-upload-preview__table--invalid td {
  border-bottom-color: #ffe5e5;
  color: #cf1322;
}

body.dark .phone-bulk-upload-preview__table--invalid td {
  border-bottom-color: #442828;
  color: #ffa39e;
}

.phone-bulk-upload-preview__muted {
  font-size: 12px;
  color: #8c8c8c;
  padding: 4px 8px;
}

body.dark .phone-bulk-upload-preview__muted {
  color: #9aa6b4;
}

.phone-bulk-upload-preview__muted--error {
  color: #cf1322;
}

body.dark .phone-bulk-upload-preview__muted--error {
  color: #ff9c9c;
}

.phone-bulk-upload-preview__empty {
  color: #8c8c8c;
  font-size: 13px;
}

body.dark .phone-bulk-upload-preview__empty {
  color: #9aa6b4;
}

.download-csv-button {
  margin-bottom: 16px;
  text-align: right;
}

.loading-container {
  margin-top: 55;
}

/* Ant Upload dragger copy inside this modal */
body.dark .phone-bulk-upload-modal .ant-upload-drag .ant-upload-text {
  color: #e4e9ef;
}

body.dark .phone-bulk-upload-modal .ant-upload-drag .ant-upload-hint {
  color: #9aa6b4;
}

body.dark .phone-bulk-upload-modal .ant-upload-drag .ant-upload-hint strong {
  color: #d0d7de;
}

body.dark .phone-bulk-upload-modal .ant-upload-drag-icon .anticon {
  color: #69b1ff;
}
/* Force modal width for BulkUploadProxyModal */
.bulk-upload-wrapper .ant-modal-content {
  width: 650px !important;
  max-width: 650px !important;
  min-width: 650px !important;
}

/* Callout — theme-aware (light + dark) */
.notion-callout {
  display: flex;
  align-items: flex-start;
  padding: 16px;
  border-radius: 8px;
  margin: -1em 0;
  gap: 12px;
  margin-top: 40px;
  background-color: var(--ant-color-fill-quaternary, rgba(0, 0, 0, 0.02));
  border: 1px solid var(--ant-color-border-secondary, #f0f0f0);
}

.callout-content p,
.bulk-upload-callout-text {
  margin: 0;
  color: var(--ant-color-text, rgba(0, 0, 0, 0.88));
  line-height: 1.5;
  font-size: small;
}

.bulk-upload-callout-text code {
  font-size: 0.85em;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--ant-color-fill-tertiary, rgba(0, 0, 0, 0.04));
  color: var(--ant-color-text, inherit);
}

.loading-container {
  margin-top: 55px;
}

/* Preview tables — headers readable in dark mode */
.bulk-upload-preview-heading {
  margin: 0 0 8px;
  color: var(--ant-color-text-heading, var(--ant-color-text));
  font-weight: 600;
}

.bulk-upload-preview-count {
  color: var(--ant-color-text);
}

.bulk-upload-preview-count--invalid {
  color: var(--ant-color-error);
}

.bulk-upload-preview-scroll {
  max-height: 180px;
  overflow: auto;
  border-radius: 6px;
  margin-top: 6px;
  border: 1px solid var(--ant-color-border-secondary);
}

.bulk-upload-preview-scroll--invalid {
  max-height: 120px;
}

.bulk-upload-preview-table {
  width: 100%;
  font-size: 13px;
  border-collapse: collapse;
}

.bulk-upload-th {
  text-align: left;
  padding: 8px 10px;
  font-weight: 600;
  color: var(--ant-color-text);
  background: var(--ant-color-fill-tertiary, rgba(0, 0, 0, 0.04));
  border-bottom: 1px solid var(--ant-color-border-secondary);
}

.bulk-upload-th--valid {
  background: var(--ant-color-fill-secondary, rgba(0, 0, 0, 0.06));
}

.bulk-upload-th--invalid {
  background: var(--ant-color-error-bg, rgba(255, 77, 79, 0.08));
  border-bottom-color: var(--ant-color-error-border, #ffccc7);
}

.bulk-upload-td {
  padding: 6px 10px;
  color: var(--ant-color-text);
  border-bottom: 1px solid var(--ant-color-border-secondary);
  vertical-align: top;
}

.bulk-upload-td--valid {
  background: transparent;
}

.bulk-upload-tr-invalid {
  background: var(--ant-color-error-bg, rgba(255, 77, 79, 0.06));
}

.bulk-upload-td--invalid {
  background: transparent;
}

.bulk-upload-preview-more {
  font-size: 12px;
  padding: 6px 4px;
  color: var(--ant-color-text-secondary);
}

.bulk-upload-preview-more--invalid {
  color: var(--ant-color-error);
}

.bulk-upload-empty-hint {
  font-size: 13px;
  color: var(--ant-color-text-secondary);
}

.download-csv-button {
  margin-bottom: 16px;
  text-align: right;
}
.onsales-action-log-table .ant-table-cell,
.onsales-action-log-table .ant-table-thead > tr > th,
.onsales-action-log-table .ant-table-tbody > tr > td,
.onsales-action-log-table .ant-table-container {
  border-inline-end: none !important;
}

.onsales-action-log-table .ant-table-cell::before {
  display: none !important;
}

.onsales-action-log-table .ant-table-tbody > tr > td {
  border-bottom: none !important;
}

.onsales-action-log-table .ant-table-tbody > tr.ant-table-row {
  cursor: pointer;
}

.onsales-action-log-table .ant-table-thead > tr > th {
  border-bottom: 1px solid var(--ant-color-border-secondary);
}

.onsales-action-log-table .ant-table {
  border: none !important;
}

.onsales-action-log-table .ant-table-content > table {
  border: none !important;
}

.onsales-action-log-note {
  color: var(--ant-color-text-secondary);
  font-size: 12px;
  margin-top: 2px;
}

.onsales-action-log-container .ant-table-expanded-row > .ant-table-cell {
  padding: 12px 16px 16px 48px;
}

.onsales-action-log-history-panel .ant-typography {
  margin: 0;
}

.onsales-action-log-filters .onsales-action-log-filter-field {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.onsales-action-log-filters .onsales-action-log-filter-field label {
  flex-shrink: 0;
  white-space: nowrap;
}

.onsales-action-log-filters .onsales-action-log-filter-select {
  width: 240px;
}

.onsales-action-log-filters .onsales-action-log-filter-select--single {
  width: 180px;
}

.onsales-action-log-filters .onsales-action-log-filter-select .ant-select-selector {
  align-items: center;
}

.onsales-action-log-filters .onsales-action-log-filter-date {
  width: 280px;
}
.primaries-wrapping-tabs > .ant-tabs-nav .ant-tabs-nav-list { flex-wrap: wrap; transform: none !important; gap: 0 24px; }
.primaries-wrapping-tabs > .ant-tabs-nav .ant-tabs-tab { margin: 0 !important; }
.primaries-wrapping-tabs > .ant-tabs-nav .ant-tabs-nav-wrap { overflow: visible !important; white-space: normal; }
.primaries-wrapping-tabs > .ant-tabs-nav .ant-tabs-nav-operations { display: none !important; }
.primaries-wrapping-tabs > .ant-tabs-nav .ant-tabs-ink-bar { display: none; }
.primaries-wrapping-tabs > .ant-tabs-nav .ant-tabs-tab-active { box-shadow: inset 0 -2px #1677ff; }
.backdrop {
    width: 100%;
    height: 100%;
    background-color: #0009;
    position: fixed;
    z-index: 20;
}

/* Additional Layout styles */
.layout-fullheight {
    display: flex;
    flex-direction: column;
    height: 100vh; /* This ensures the Layout takes the full viewport height */
}

.content {
    flex-grow: 1; /* This will make the content area grow to use available space */
    margin: 8px;
    overflow: auto; /* Adds scrolling to content only when necessary */
}

.footer {
    height: 64px;
    background-color: #fff;
    box-shadow: 0px 5px 7px;
}

/* Ensure other elements are styled appropriately to not exceed their bounds */
.header {
    background-color: #fff;
    height: 64px;
    padding-inline: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px -5px 10px;
    position: sticky;
    top: 0;
    z-index: 19;
}

.content.dark,
.header.dark,
.footer.dark {
    background-color: #141414;
}

/* Icon-only controls on dark header: default token colors are too low-contrast on #141414 */
.header.dark .header-menu-btn.ant-btn,
.header.dark .header-btn.ant-btn {
    color: rgba(255, 255, 255, 0.88);
}

.header.dark .header-menu-btn.ant-btn:hover,
.header.dark .header-btn.ant-btn:hover,
.header.dark .header-menu-btn.ant-btn:focus-visible,
.header.dark .header-btn.ant-btn:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.header.dark .header-menu-btn .anticon,
.header.dark .header-btn .anticon,
.header.dark .header-menu-btn .ant-badge .anticon {
    color: inherit;
}

/* “Create Ticket” outlined control on dark header */
.header.dark .header-create-ticket-btn.ant-btn {
    color: rgba(255, 255, 255, 0.88);
    border-color: rgba(255, 255, 255, 0.35);
    background: transparent;
}

.header.dark .header-create-ticket-btn.ant-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.08);
}

.header.dark .header-create-ticket-btn .anticon {
    color: inherit;
}

.header-menu-btn.ant-btn.ant-btn-icon-only {
    font-size: 16px;
    width: 48px;
    height: 48px;
}
.header-btn.ant-btn.ant-btn-icon-only {
    font-size: 16px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dropdown-trigger {
    cursor: pointer;
}

.ant-layout .sider.ant-layout-sider {
    box-shadow: -5px 0px 10px;
    overflow: auto;
    position: fixed;
    height: 100vh;
    left: 0;
    top: 0;
    z-index: 21;
}
.sider-items-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.app-icon-link {
    display: flex;
    justify-content: center;
    align-items: center;
}
.sider-menu {
    flex: 1;
}
.sider-mobile-btn {
    width: 100%;
    position: sticky;
    bottom: 0;
    border-radius: 0;
}

.page-loader{
    text-align: center;
    padding: 50px;
}/* Ensure this class is applied to the menu items */
.sider-menu .ant-menu-item,
.sider-menu .ant-menu-submenu-title {
  white-space: normal !important;
  word-wrap: break-word !important;
  height: auto !important; /* Ensure height adjusts to content */
  line-height: normal !important; /* Adjust line-height for better readability */
  padding: 10px 12px !important; /* Add vertical padding for spacing */
  font-size: 16px !important; /* Increase font size */
  margin-block: 2px !important;
}

.sider-collapsed .ant-menu-item,
.sider-collapsed .ant-menu-submenu-title {
  height: 50px !important;
  padding: 10px 24px !important; /* Add vertical padding for spacing */
}

.sider-menu .ant-menu-sub.ant-menu-inline > .ant-menu-item,
.sider-menu
  .ant-menu-sub.ant-menu-inline
  > .ant-menu-submenu
  > .ant-menu-submenu-title {
  padding-left: 32px !important;
}

.ant-menu.ant-menu-sub.ant-menu-vertical {
  min-width: 260px !important;
}

.sider-menu .ant-menu-sub .ant-menu-sub {
  padding-left: 22px !important;
}

.sider-menu .ant-menu-item {
  position: relative;
}

.fav-page-icon {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  opacity: 0;
}
.fav-page-icon:hover {
  background-color: none !important;
  background: none !important;
}

.ant-menu.ant-menu-sub .fav-page-icon {
  right: -2px;
}

.sider-menu .ant-menu-item:hover .fav-page-icon,
.fav-page-icon.fav-page-icon-show,
.ant-menu.ant-menu-sub.ant-menu-vertical .ant-menu-item:hover .fav-page-icon {
  opacity: 1;
}

.fav-page-icon.fav-page-icon-show {
  color: #ffd700 !important;
}

.ant-menu-title-content {
}

.sider-collapsed .anticon {
  font-size: 16px !important;
}

.sider-collapsed .ant-menu-title-content {
  text-indent: -9999px !important;
}

/* Ensure the sider menu handles overflow properly */
.sider-menu {
  overflow: auto;
  padding-bottom: 30px;
}

/* Additional styles to improve appearance */
.sider-menu .ant-menu-item > a,
.sider-menu .ant-menu-submenu-title > span {
  display: block; /* Ensure the link or span takes the full width */
}

.collapsed-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  font-size: 25px;
  font-weight: bold;
  color: inherit;
}

.sider {
  height: 100%;
}

.sider-collapsed {
  position: relative !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Mobile “collapse sidebar” button at bottom of sider */
body.dark .sider-mobile-btn.ant-btn-default {
  color: rgba(255, 255, 255, 0.88);
  border-color: #434343;
  background: #1f1f1f;
}

body.dark .sider-mobile-btn.ant-btn-default:hover {
  color: #fff;
  border-color: #595959;
  background: #262626;
}

body.dark .sider-mobile-btn .anticon {
  color: inherit;
}
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
}

::-webkit-scrollbar {
    width: 8px;  /* Adjust width as needed */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;  /* Adjust track color as needed */
}

::-webkit-scrollbar-thumb {
    background: #a7a3a3;  /* Adjust thumb color as needed */
    border-radius: 4px;  /* Adjust border radius as needed */
}

body.dark .rc-virtual-list-scrollbar-thumb{
  background: rgba(178, 178, 178, 0.8) !important;
}

.tools-emails-search-drawer .ant-form-item-label {
    padding: 5px !important;
}

.tools-emails-search-drawer .ant-form-item {
    margin-bottom: 10px !important;
}