/*
 * Operational Slate — Backend Admin
 *
 * Admin-only layout and component treatment. The shared Operational Slate
 * stylesheet owns the token bridge and product shell; this file adds the
 * Figma-derived admin composition without changing shell or API behavior.
 */

.dx-admin-shell {
  min-height: 100vh;
  background: var(--dx-canvas);
}

.dx-admin-shell .qv2-shell {
  min-height: 100vh;
  background: var(--dx-canvas);
}

.dx-admin-shell .qv2-page.admin-page {
  /* The shared shell already removes the 224px navigation rail from the
   * content box. A fixed 1440px width here would add that rail back to the
   * document and make the sidebar appear offset in full-page captures. */
  width: auto;
  max-width: none;
  padding: 32px clamp(20px, 3vw, 40px) 56px;
}

/* The hash router is the source of truth for navigation. Keep the legacy
 * tablist in the DOM for existing handlers and accessibility references, but
 * do not show two competing navigation systems. */
#adminTabs,
.admin-tab-intro {
  display: none !important;
}

.admin-route-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 20px;
}

.admin-route-copy {
  min-width: 0;
  flex: 1 1 auto;
}

.admin-route-kicker,
.admin-kpi-label,
.admin-setting-label,
.admin-flag-row strong {
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.admin-route-kicker {
  margin: 0 0 8px;
  color: var(--dx-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-route-header h1 {
  margin: 0;
  color: var(--dx-text);
  font-size: 30px;
  font-weight: 680;
  line-height: 1.05;
  letter-spacing: -.045em;
  text-wrap: balance;
}

.admin-route-copy > p:last-child {
  max-width: 68ch;
  margin: 10px 0 0;
  color: var(--dx-muted);
  font-size: 14px;
  line-height: 1.55;
  text-wrap: pretty;
}

.admin-route-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 3px;
}

.admin-route-actions .admin-system-summary {
  order: -1;
}

.admin-action-note {
  max-width: 22ch;
  color: var(--dx-muted);
  font-size: 12px;
  line-height: 1.35;
}

.admin-system-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 7px 10px;
  border: 1px solid var(--dx-line);
  border-radius: 4px;
  background: var(--dx-surface);
  color: var(--dx-muted);
  font-size: 12px;
}

.admin-system-summary strong {
  color: var(--dx-success);
  font-weight: 700;
}

.admin-kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}

.admin-kpi {
  display: flex;
  min-height: 110px;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 17px 14px;
  border: 1px solid var(--dx-line);
  border-radius: 6px;
  background: var(--dx-surface);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 4%);
}

.admin-kpi-label {
  color: var(--dx-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.admin-kpi-value {
  overflow-wrap: anywhere;
  color: var(--dx-text);
  font-size: clamp(19px, 2vw, 27px);
  font-weight: 680;
  line-height: 1.05;
  letter-spacing: -.03em;
}

.admin-kpi-note {
  min-height: 1.2em;
  color: var(--dx-success);
  font-size: 11px;
  line-height: 1.25;
}

.admin-page .admin-guide {
  margin: 0 0 22px;
  border-block-color: var(--dx-line);
}

.admin-page .admin-guide summary {
  color: var(--dx-text);
  font-size: 13px;
}

.admin-page .admin-guide-body {
  max-width: 980px;
  gap: 8px 30px;
  padding-bottom: 14px;
}

.admin-page .admin-guide-body p {
  color: var(--dx-muted);
  font-size: 12px;
}

.admin-page [data-admin-view-panel][hidden],
.admin-page [data-admin-section][hidden] {
  display: none !important;
}

.admin-page > [data-admin-view-panel] {
  min-width: 0;
}

.admin-page .grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.admin-page .grid > .card {
  grid-column: span 6;
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--dx-line) !important;
  border-radius: 6px !important;
  background: var(--dx-surface) !important;
  box-shadow: none !important;
}

.admin-page .grid > .card.wide {
  grid-column: 1 / -1;
}

.admin-page .grid > .card h2 {
  margin-bottom: 8px;
  color: var(--dx-text);
  font-size: 13px;
  font-weight: 720;
}

.admin-page .admin-section-copy,
.admin-page .admin-advanced-note {
  max-width: 72ch;
  margin: -2px 0 15px;
  color: var(--dx-muted);
  font-size: 13px;
  line-height: 1.5;
}

.admin-page .admin-advanced-note {
  margin: 0 0 18px;
  font-size: 12px;
}

.admin-page .row {
  gap: 8px;
}

.admin-page .row > label,
.admin-page .stack > label {
  color: var(--dx-muted);
  font-size: 12px;
}

.admin-page button,
.admin-page .btn,
.admin-page input,
.admin-page select,
.admin-page textarea {
  border-radius: 4px !important;
}

.admin-page button:disabled {
  cursor: not-allowed;
  opacity: .55;
}

.admin-page table {
  min-width: 700px;
  font-size: 12px;
}

.admin-page th,
.admin-page td {
  padding: 10px 9px;
  vertical-align: middle;
}

.admin-page th {
  font-size: 10px;
  font-weight: 760;
  letter-spacing: .07em;
  text-transform: uppercase;
}

.admin-page tbody tr:last-child td {
  border-bottom: 0;
}

.admin-page tbody td:first-child {
  color: var(--dx-text);
  font-weight: 600;
}

.admin-page table + .muted,
.admin-page .stack > .muted {
  color: var(--dx-muted);
}

.admin-page .status {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border: 1px solid var(--dx-line);
  border-radius: 3px !important;
  background: var(--dx-surface-raised);
  color: var(--dx-muted);
  font-size: 11px;
  line-height: 1.2;
}

.admin-page .status.ok {
  border-color: color-mix(in srgb, var(--dx-success) 36%, var(--dx-line));
  background: var(--dx-success-soft);
}

.admin-page .status.bad {
  border-color: color-mix(in srgb, var(--dx-danger) 36%, var(--dx-line));
  background: var(--dx-danger-soft);
}

.admin-page .checks {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.admin-page .check,
.admin-page .question {
  border: 1px solid var(--dx-line);
  border-radius: 4px;
  background: var(--dx-surface-raised) !important;
}

.admin-page .check {
  padding: 9px;
  color: var(--dx-text);
  font-size: 12px;
}

.admin-page .check strong,
.admin-page .check span {
  overflow-wrap: anywhere;
}

/* Team & Access */
.team-directory-summary {
  margin: 2px 0 18px;
  border-block-color: var(--dx-line);
}

/* The route KPI strip is the single summary band for Team & Access. Keep the
 * API-backed legacy summary in the DOM for existing IDs and loaders without
 * presenting the same four counts twice. */
#usersRolesPanel .team-directory-summary {
  display: none;
}

.team-directory-summary > div {
  padding: 14px;
  border-right-color: var(--dx-line);
}

.team-directory-summary span {
  color: var(--dx-muted);
}

.team-directory-summary strong {
  color: var(--dx-text);
}

.team-directory-controls {
  grid-template-columns: minmax(220px, 1fr) minmax(180px, .55fr) auto auto;
  gap: 10px;
  margin-bottom: 12px;
}

.team-directory-controls label {
  color: var(--dx-muted);
}

.team-directory-meta {
  margin-bottom: 9px;
}

.team-directory-scroll {
  border-top: 1px solid var(--dx-line);
}

.team-directory-table {
  min-width: 860px;
}

.team-directory-table td {
  padding-block: 13px;
}

.team-directory-current {
  background: color-mix(in srgb, var(--dx-primary) 7%, transparent);
}

.team-directory-current .team-directory-person strong::after {
  color: var(--dx-primary);
}

/* Campaign Setup */
.client-campaign-head {
  align-items: flex-start;
  margin-bottom: 14px;
}

.client-campaign-head h2 {
  margin-bottom: 7px;
}

.client-campaign-head p,
.client-campaign-tools,
.client-campaign-live {
  color: var(--dx-muted);
}

.client-campaign-tools {
  margin: 0 0 14px;
  padding-block: 10px;
  border-block: 1px solid var(--dx-line);
}

.client-campaign-layout {
  border-top-color: var(--dx-line);
}

.client-pane {
  padding-right: 20px;
  border-right-color: var(--dx-line);
}

.campaign-pane {
  padding-left: 20px;
}

.client-pane-head,
.campaign-pane-head {
  margin-bottom: 10px;
}

.client-pane-head h3,
.campaign-pane-head h3 {
  color: var(--dx-text);
  font-size: 16px;
}

.client-record,
.campaign-record {
  padding-block: 13px;
  border-bottom-color: var(--dx-line);
}

.client-record:hover,
.client-record[aria-current="true"] {
  background: color-mix(in srgb, var(--dx-primary) 9%, transparent);
}

.client-record[aria-current="true"] {
  box-shadow: inset 3px 0 0 var(--dx-primary);
}

.client-record small,
.campaign-record small,
.client-campaign-empty {
  color: var(--dx-muted);
}

.campaign-actions {
  max-width: 300px;
}

.campaign-actions button {
  min-height: 34px;
}

.unassigned-campaigns {
  border-top-color: var(--dx-line);
}

/* Leads, numbers, QA and reports tables are intentionally scrollable at
 * narrow widths so phone numbers and audit values never wrap into ambiguity. */
.admin-page [style*="overflow:auto"] {
  scrollbar-color: var(--dx-line-strong) transparent;
}

.admin-page [style*="overflow:auto"] > table {
  margin-top: 1px;
}

#qaRows audio {
  width: 190px;
  height: 32px;
}

#qaRows button {
  min-height: 34px;
  padding: 6px 9px;
  font-size: 12px;
}

#reportButtons {
  align-items: stretch;
}

#reportButtons button {
  flex: 1 1 150px;
}

/* Diagnostics and Carrier Health */
.dots-status-head {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--dx-line);
}

.dots-status-summary {
  gap: 0;
  margin-top: 0;
  border-block: 0;
  padding: 14px 0 4px;
}

.dots-status-stat {
  padding: 0 14px;
  border-right: 1px solid var(--dx-line);
}

.dots-status-stat:first-child {
  padding-left: 0;
}

.dots-status-stat:last-child {
  border-right: 0;
}

.dots-status-stat strong {
  color: var(--dx-text);
}

.dots-list-grid {
  margin-top: 10px;
}

.dots-list-row {
  border-top-color: var(--dx-line);
}

.dots-list-row strong {
  color: var(--dx-text);
}

.dots-warning {
  border-left-color: var(--dx-danger);
  background: var(--dx-danger-soft);
  color: var(--dx-danger);
}

.admin-page .stack > .row {
  min-height: 34px;
  padding-block: 5px;
  border-bottom: 1px solid var(--dx-line);
}

.admin-page .stack > .row:last-child {
  border-bottom: 0;
}

/* Settings */
.admin-settings-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}

.admin-settings-head h2 {
  margin-bottom: 7px !important;
}

.admin-settings-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(180px, .8fr) minmax(180px, .8fr);
  gap: 12px;
  padding-block: 16px;
  border-block: 1px solid var(--dx-line);
}

.admin-setting-group {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.admin-setting-label {
  color: var(--dx-muted);
}

.admin-segmented {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  overflow: hidden;
  border: 1px solid var(--dx-line-strong);
  border-radius: 4px;
}

.admin-segmented button {
  min-width: 76px;
  min-height: 38px;
  border: 0 !important;
  border-right: 1px solid var(--dx-line-strong) !important;
  border-radius: 0 !important;
  background: var(--dx-surface-raised) !important;
  color: var(--dx-muted) !important;
  box-shadow: none !important;
}

.admin-segmented button:last-child {
  border-right: 0 !important;
}

.admin-segmented button:hover:not(:disabled),
.admin-segmented button.is-selected,
.admin-segmented button[aria-pressed="true"] {
  background: var(--dx-primary-soft) !important;
  color: var(--dx-text) !important;
}

.admin-setting-value {
  min-height: 38px;
  padding: 9px 10px;
  border: 1px solid var(--dx-line);
  border-radius: 4px;
  background: var(--dx-surface-raised);
  color: var(--dx-text);
  font-size: 13px;
}

.admin-preferences {
  margin-top: 18px;
}

.admin-preferences h3 {
  margin: 0 0 10px;
  color: var(--dx-text);
  font-size: 13px;
  font-weight: 720;
}

.admin-flag-list {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--dx-line);
}

.admin-flag-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  padding: 10px 0;
  border-bottom: 1px solid var(--dx-line);
}

.admin-flag-row > div {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-flag-row strong {
  color: var(--dx-text);
  letter-spacing: .06em;
}

.admin-flag-row small {
  color: var(--dx-muted);
  font-size: 12px;
}

.admin-flag-toggle {
  min-width: 58px;
  min-height: 34px !important;
  padding: 5px 10px !important;
  flex: 0 0 auto;
}

.admin-flag-toggle[aria-pressed="true"] {
  border-color: var(--dx-success) !important;
  background: var(--dx-success-soft) !important;
  color: var(--dx-success) !important;
}

.admin-settings-status {
  min-height: 1.4em;
  margin: 12px 0 0;
  color: var(--dx-muted);
  font-size: 12px;
}

body[data-admin-density="comfortable"] .admin-page .grid {
  gap: 20px;
}

body[data-admin-density="comfortable"] .admin-page th,
body[data-admin-density="comfortable"] .admin-page td {
  padding-block: 14px;
}

@media (max-width: 1080px) {
  .admin-route-header {
    gap: 18px;
  }

  .admin-page .grid > .card {
    grid-column: 1 / -1;
  }

  .admin-settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-settings-grid > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 760px) {
  .dx-admin-shell .qv2-page.admin-page {
    padding: 24px 16px 40px;
  }

  .admin-route-header {
    flex-direction: column;
  }

  .admin-route-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .admin-kpi-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-page .checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .team-directory-controls {
    grid-template-columns: 1fr 1fr;
  }

  .client-pane {
    padding-right: 0;
    border-right: 0;
    border-bottom: 1px solid var(--dx-line);
    padding-bottom: 18px;
  }

  .campaign-pane {
    padding-left: 0;
    padding-top: 18px;
  }

  .admin-settings-head {
    flex-direction: column;
  }

  .admin-settings-head button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .admin-kpi-strip,
  .admin-settings-grid,
  .admin-page .checks,
  .team-directory-controls {
    grid-template-columns: 1fr;
  }

  .admin-settings-grid > :last-child {
    grid-column: auto;
  }

  .admin-segmented {
    width: 100%;
  }

  .admin-segmented button {
    flex: 1 1 0;
  }

  .dots-status-summary,
  .dots-list-grid {
    grid-template-columns: 1fr;
  }

  .dots-status-stat,
  .dots-status-stat:first-child {
    padding: 9px 0;
    border-right: 0;
    border-bottom: 1px solid var(--dx-line);
  }

  .dots-status-stat:last-child {
    border-bottom: 0;
  }

  .team-directory-controls button {
    width: 100%;
  }

  .admin-page .row > label {
    width: 100%;
  }

  .admin-page #leadSearch {
    width: 100%;
  }

  .admin-flag-row {
    align-items: flex-start;
  }
}