.admin-panel-filtered {
  display: none !important;
}

.feedback-admin-card,
.role-presets-card {
  grid-column: auto;
  grid-row: auto;
  width: 100%;
  height: auto !important;
  min-height: 0;
  max-height: none;
  overflow: visible;
  align-self: stretch;
}

.feedback-admin-card .feedback-list {
  flex: initial;
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}

.admin-panel-search,
.admin-panel-filter {
  display: grid;
  gap: 4px;
  min-width: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.admin-panel-search input,
.admin-panel-filter select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
}

.admin-panel-result-count {
  min-height: 18px;
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
}

/* ---- Admin > Users: compact list ---- */
/* Search and the two filters share a row when they fit and stack on tablets. */
.admin-users-card .admin-user-toolbar {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  margin: 8px 0 6px;
}

.admin-user-count {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.admin-user-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: auto;
}

.admin-user-table th,
.admin-user-table td {
  padding: 8px 10px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  white-space: normal;
  overflow: visible;
  vertical-align: middle;
}

.admin-user-table thead th {
  position: static;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.admin-user-table tbody tr:hover {
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}

.admin-user-identity-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.admin-user-identity-wrap .user-avatar {
  flex: 0 0 auto;
}

.admin-user-name {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.admin-user-name strong,
.admin-user-name small {
  overflow-wrap: anywhere;
}

.admin-user-name small {
  color: var(--muted);
  font-size: 13px;
}

.admin-user-row.inactive .admin-user-name strong {
  color: var(--muted);
}

.admin-user-initials {
  font-weight: 700;
  letter-spacing: .02em;
}

.admin-user-actions-cell {
  width: 1%;
}

.admin-user-edit {
  min-height: 32px;
  padding: 5px 14px;
}

/* ---- Admin dialogs (add user, edit user, sync error) ---- */
dialog.admin-user-dialog {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
}

dialog.admin-add-user-dialog {
  width: min(460px, calc(100vw - 24px));
}

.admin-user-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.admin-user-form > header > div {
  min-width: 0;
}

.admin-user-form > header h2 {
  font-size: 20px;
}

.admin-user-form > header h2,
.admin-user-form > header p,
.sync-error-dialog p {
  overflow-wrap: anywhere;
}

.admin-user-form > header p {
  margin: 2px 0 0;
}

.admin-user-form > p {
  margin: 0;
}

.admin-user-form > footer {
  position: sticky;
  bottom: -18px;
  margin: 0 -18px -18px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.admin-user-edit-body {
  display: grid;
  gap: 14px;
}

.admin-user-fields-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .8fr);
  gap: 10px;
}

/* Optional title (Highland 2026-10-24): its own row under Name / Work email / Role. */
.admin-user-fields-grid > .admin-user-title-field,
.admin-user-fields-grid > .admin-user-title-hint {
  grid-column: 1 / -1;
}

.admin-user-form .admin-user-title-hint {
  margin: -6px 0 0;
  font-size: 13px;
}

.admin-user-table td .admin-user-title {
  display: block;
  color: var(--muted);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.user-edit-section {
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.user-edit-section h3 {
  margin: 0;
  font-size: 15px;
}

.user-edit-section > p {
  margin: 0;
}

.user-edit-initial-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.check-chip {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 32px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-weight: 650;
  cursor: pointer;
}

.check-chip input {
  margin: 0;
}

.check-chip:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}

.user-grant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.user-grant-chip {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  max-width: 100%;
  padding: 2px 2px 2px 10px;
  border: 1px solid #b9cbe8;
  border-radius: 999px;
  background: #eef4ff;
  color: #173f82;
  font-size: 13px;
  font-weight: 650;
}

.user-grant-chip small {
  color: #4b5565;
  font-weight: 500;
}

.user-grant-remove {
  display: inline-grid;
  place-items: center;
  width: 28px;
  min-width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 18px;
  line-height: 1;
}

.user-grant-remove:hover,
.user-grant-remove:focus-visible {
  background: color-mix(in srgb, var(--brand) 16%, transparent);
}

.grant-picker {
  border: 1px solid var(--line);
  border-radius: 8px;
}

.grant-picker > summary {
  min-height: 36px;
  padding: 8px 12px;
  color: #184a9e;
  font-weight: 750;
  cursor: pointer;
}

.grant-picker[open] > summary {
  border-bottom: 1px solid var(--line);
}

.grant-picker-search {
  margin: 10px 12px 6px;
  font-size: 13px;
}

.grant-picker-results {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow: auto;
  padding: 4px 12px 12px;
}

.grant-picker-group h4,
.role-capabilities h4 {
  margin: 4px 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.grant-picker-group ul,
.role-capabilities ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grant-option {
  display: grid;
  gap: 1px;
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--surface-soft, #f4f7fb);
  color: var(--ink);
  text-align: left;
}

.grant-option:hover,
.grant-option:focus-visible {
  border-color: var(--brand);
}

.grant-option small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}

.role-capabilities > summary {
  min-height: 32px;
  padding: 6px 0;
  font-weight: 700;
  cursor: pointer;
}

.role-capabilities-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 8px 16px;
  padding: 4px 0 8px;
}

.role-capabilities li {
  font-size: 13px;
}

.user-edit-account [data-user-edit-section="account"] {
  display: grid;
  gap: 10px;
}

.user-account-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  list-style: none;
}

.user-account-buttons,
.user-account-confirm .button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.user-account-confirm {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #e3b7b7;
  border-radius: 8px;
  background: #fff6f6;
}

.user-account-confirm p {
  margin: 0;
  color: var(--ink);
}

.user-account-confirm .danger,
.role-editor-card .danger {
  border: 1px solid var(--bad);
  border-radius: 6px;
  padding: 8px 12px;
  background: var(--bad);
  color: #fff;
  font-weight: 700;
}

/* Delete user (inactive users, admins only): danger outline, then type the name to confirm. */
.user-account-buttons .user-delete-button {
  border-color: var(--bad);
  color: var(--bad);
}

.user-account-confirm .danger:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.user-delete-confirm-name {
  display: grid;
  gap: 4px;
  color: var(--ink);
  font-weight: 650;
}

.user-delete-confirm-name input {
  width: min(100%, 320px);
  min-height: 36px;
}

.admin-inline-status {
  min-height: 20px;
  margin: 0;
  color: var(--muted);
  font-weight: 650;
}

.admin-inline-status.ok {
  color: #146c3c;
}

.admin-inline-status.error {
  color: var(--bad);
}

.sync-error-message {
  max-height: 50vh;
  overflow: auto;
  margin: 10px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-soft, #f4f7fb);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.sync-error-footer {
  display: flex;
  justify-content: flex-end;
}

/* ---- Admin > Permissions: one role at a time ---- */
.role-editor-card {
  display: grid;
  gap: 10px;
}

.role-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.role-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--ink);
  font-weight: 700;
}

.role-pick small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.role-pick.active {
  border-color: #184a9e;
  background: #184a9e;
  color: #fff;
}

.role-pick.active small {
  color: #e3ecfa;
}

.role-pick-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 999px;
  background: #8a4b00;
  color: #fff;
  font-size: 12px;
}

.role-editor-note {
  margin: 0;
  color: var(--muted);
}

.role-permission-search {
  max-width: 420px;
  font-size: 13px;
}

.role-permission-matches {
  min-height: 0;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.role-permission-matches:empty {
  display: none;
}

.role-permission-groups {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}

.role-permission-group {
  border-bottom: 1px solid var(--line);
}

.role-permission-group > summary {
  display: flex;
  gap: 10px;
  align-items: baseline;
  justify-content: space-between;
  min-height: 40px;
  padding: 10px 4px;
  font-weight: 750;
  cursor: pointer;
}

.role-permission-group > summary small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.role-permission-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 2px 16px;
  margin: 0;
  padding: 0 4px 12px;
  list-style: none;
}

.role-permission-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
  padding: 7px 6px;
  border-radius: 6px;
}

.role-permission-row.changed {
  background: #fff4dc;
}

.role-permission-row input[type="checkbox"] {
  margin: 1px 0 0;
}

.role-permission-row label {
  display: grid;
  gap: 2px;
  color: var(--ink);
  font-weight: 650;
  cursor: pointer;
}

.role-permission-row label small {
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.role-permission-row input:disabled + label {
  cursor: default;
}

.role-permission-changed {
  padding: 1px 7px;
  border-radius: 999px;
  background: #8a4b00;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.role-permission-changed[hidden] {
  display: none;
}

.role-editor-footer {
  position: sticky;
  bottom: 0;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  background: var(--panel);
}

.role-permission-changes {
  color: var(--muted);
  font-weight: 650;
}

/* ---- Admin > Sales Rep Initials ---- */
.sales-rep-add-form {
  display: grid;
  grid-template-columns: minmax(110px, 160px) minmax(180px, 1fr) auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 6px;
}

.sales-rep-catalog-table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
  table-layout: auto;
}

.sales-rep-catalog-table th,
.sales-rep-catalog-table td {
  padding: 7px 10px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  white-space: normal;
  overflow: visible;
  vertical-align: middle;
}

.sales-rep-catalog-table thead th {
  position: static;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
}

.sales-rep-catalog-table tbody th {
  position: static;
  width: 1%;
  background: transparent;
  font-weight: 800;
  letter-spacing: .02em;
}

.sales-rep-label-edit button:disabled {
  opacity: .55;
  cursor: default;
}

.sales-rep-catalog-table tr.inactive th,
.sales-rep-catalog-table tr.inactive input[type="text"] {
  color: var(--muted);
}

.sales-rep-label-edit {
  display: flex;
  gap: 8px;
  align-items: center;
}

.sales-rep-active-toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  min-height: 32px;
  font-weight: 650;
  cursor: pointer;
}

.sales-rep-active-toggle input {
  margin: 0;
}

.sales-rep-catalog-table small {
  display: block;
  font-size: 12px;
}

.sales-rep-assignments {
  display: grid;
  gap: 8px;
}

.sales-rep-assignments .sales-rep-assignment {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) auto;
  gap: 8px 14px;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
}

.sales-rep-assignment-person {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.sales-rep-assignment-person strong {
  overflow-wrap: anywhere;
}

.sales-rep-assignment-person small {
  color: var(--muted);
  font-size: 13px;
}

.sales-rep-assignment-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sales-rep-assignments .sales-rep-assignment-actions {
  margin: 0;
  justify-content: flex-end;
}

body.dark-mode .user-grant-chip {
  border-color: #5d7ba6;
  background: #2b3f5a;
  color: #e3edf9;
}

body.dark-mode .user-grant-chip small {
  color: #c4d0de;
}

body.dark-mode .grant-picker > summary {
  color: #b9d3ff;
}

body.dark-mode .user-account-confirm {
  border-color: #8a4a4a;
  background: #3a2a2e;
}

body.dark-mode .user-account-buttons .user-delete-button {
  border-color: #ff9b8f;
  color: #ff9b8f;
}

body.dark-mode .role-pick.active {
  border-color: #8fb4ec;
  background: #8fb4ec;
  color: #0b1a2b;
}

body.dark-mode .role-pick.active small {
  color: #1d2f47;
}

body.dark-mode .role-permission-row.changed {
  background: #4a3d22;
}

body.dark-mode .role-permission-changed,
body.dark-mode .role-pick-count {
  background: #f2c46b;
  color: #2b1d00;
}

body.dark-mode .admin-inline-status.ok {
  color: #8fd9ab;
}

body.dark-mode .admin-user-table tbody tr:hover {
  background: #2a3a4d;
}

@media (max-width: 743px) {
  .admin-users-card .admin-user-toolbar,
  .admin-user-fields-grid,
  .sales-rep-add-form,
  .sales-rep-assignments .sales-rep-assignment {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-rep-assignments .sales-rep-assignment-actions {
    justify-content: flex-start;
  }

  .admin-user-table thead {
    display: none;
  }

  .admin-user-table,
  .admin-user-table tbody {
    display: block;
  }

  .admin-user-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }

  .admin-user-table td {
    padding: 0;
    border: 0;
  }

  .admin-user-table td[data-label] {
    grid-column: 1;
    padding-left: 46px;
    font-size: 13px;
  }

  .admin-user-table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--muted);
    font-weight: 650;
  }

  .admin-user-table td[data-label]:empty {
    display: none;
  }

  .admin-user-identity-cell {
    grid-column: 1;
  }

  .admin-user-actions-cell {
    grid-column: 2;
    grid-row: 1;
    width: auto;
  }

  dialog.admin-user-dialog {
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    margin: 0;
  }

  .admin-user-form > footer {
    bottom: -14px;
    margin: 0 -14px -14px;
    padding: 10px 14px;
  }

  .admin-user-form > footer button {
    flex: 1;
  }

  .role-permission-rows {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 720px) {
  .admin-panel-result-count {
    min-height: 0;
  }
}

/* ---- Highland follow-ups (2026-10-13) ---- */
.admin-users-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.admin-user-initials-missing {
  color: var(--muted);
  font-style: italic;
}

dialog.sales-rep-catalog-dialog {
  width: min(720px, calc(100vw - 24px));
}

.sales-rep-initials-banner {
  margin: 8px 16px 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--warn);
  border-radius: 6px;
  background: var(--panel);
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}

.health-compact-grid article small.health-wrap {
  overflow: visible;
  white-space: normal;
}

.pickup-conflicts {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--warn);
  border-radius: 7px;
}

.pickup-conflicts h3,
.pickup-conflicts p {
  margin: 0;
}

.pickup-conflicts h3 {
  font-size: 15px;
}

.pickup-conflict-list,
.pickup-conflict-orders {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pickup-conflict {
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
  gap: 6px 14px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.pickup-conflict-when {
  display: grid;
  gap: 2px;
}

.pickup-conflict-when small,
.pickup-conflict-orders .muted {
  color: var(--muted);
  font-size: 13px;
}

.pickup-conflict-orders li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.pickup-conflict-open {
  min-height: 28px;
  padding: 2px 4px;
  border: 0;
  background: none;
  color: var(--brand-dark);
  font-weight: 750;
  text-decoration: underline;
  cursor: pointer;
}

.pickup-conflict-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.pickup-conflict-orders button.secondary,
.pickup-conflict-actions button {
  min-height: 32px;
  padding: 4px 12px;
}

@media (max-width: 743px) {
  .pickup-conflict {
    grid-template-columns: minmax(0, 1fr);
  }

  .sales-rep-initials-banner {
    margin: 8px 12px 0;
  }
}

/* Management page (Highland 2026-10-24: Reporting renamed Management).
   Overview / Contacts / Email Templates / Email Routing tabs, info-button tooltips for every number, and the
   customer email template library (list | editor + live preview). */
.mgmt-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  justify-self: start;
}

.mgmt-tabs[hidden],
.mgmt-pane[hidden] {
  display: none;
}

.mgmt-tabs button {
  min-height: 34px;
  padding: 6px 16px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
}

.mgmt-tabs button:hover {
  background: var(--surface-soft);
}

.mgmt-tabs button.active {
  background: #e5edf9;
  color: #184d93;
  box-shadow: inset 0 -2px 0 var(--brand);
}

body.dark-mode .mgmt-tabs button.active {
  background: #33465e;
  color: #f3f7fc;
}

.mgmt-pane {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
}

.mgmt-heading {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.mgmt-info {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: -4px 0 -4px 2px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: help;
  vertical-align: middle;
}

.mgmt-info::before {
  content: "i";
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  font: 700 11px/1 Georgia, "Times New Roman", serif;
}

.mgmt-info:hover,
.mgmt-info[aria-expanded="true"] {
  color: var(--brand);
}

.mgmt-info:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 1px;
}

.mgmt-tip {
  position: fixed;
  z-index: 1000;
  max-width: 320px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
  color: var(--ink);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
}

.mgmt-tip[hidden] {
  display: none;
}

/* The global tbody tr:hover is near-white; keep Management rows readable in dark mode. */
body.dark-mode #reportingPanel tbody tr:hover {
  background: #2c3d51;
}

#reportingPanel .rpt-table th .mgmt-info,
#reportingPanel .rpt-stat-list dt .mgmt-info {
  margin-left: 0;
}

.mgmt-settings {
  align-content: start;
}

.mgmt-settings-card {
  min-width: 0;
  padding: 14px 16px;
}

.mgmt-settings-card[hidden] {
  display: none;
}

.mgmt-settings-header {
  display: grid;
  gap: 2px;
  margin-bottom: 12px;
}

.mgmt-settings-header h2 {
  margin: 0;
  font-size: 15px;
}

/* Customer reply routing (2026-10-26): one row per route, chips for each person or address. */
.reply-route-list {
  display: grid;
  gap: 10px;
}

.reply-route {
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.reply-route.is-dirty {
  border-color: var(--brand);
}

.reply-route h3 {
  margin: 0;
  font-size: 13px;
}

.reply-route-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reply-route-chip {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 28px;
  padding: 2px 4px 2px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft, #f1f4f8);
  font-size: 12.5px;
}

.reply-route-chip-name {
  font-weight: 700;
}

.reply-route-chip-email {
  overflow-wrap: anywhere;
}

.reply-route-chip.is-problem {
  border-color: var(--warn);
  background: #fff4e0;
}

.reply-route-chip-problem {
  color: #8a5300;
  font-weight: 700;
}

.reply-route-chip-remove {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 16px;
  line-height: 1;
}

.reply-route-chip-remove:hover,
.reply-route-chip-remove:focus-visible {
  background: var(--line);
  color: var(--ink);
}

.reply-route-summary,
.reply-route-empty {
  margin: 0;
  font-size: 12.5px;
}

.reply-route-summary.is-warning {
  padding: 6px 8px;
  border-left: 3px solid var(--warn);
  background: #fff4e0;
  color: #8a5300;
  font-weight: 700;
}

.reply-route-actions,
.reply-route-address,
.reply-route-save {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.reply-route-address label,
.reply-route-picker label {
  font-size: 12px;
  font-weight: 700;
}

.reply-route-address input,
.reply-route-picker input {
  min-height: 30px;
  max-width: 260px;
}

.reply-route-picker {
  display: grid;
  gap: 4px;
  max-width: 420px;
}

.reply-route-results {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reply-route-person {
  width: 100%;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.reply-route-person:hover,
.reply-route-person:focus-visible {
  border-color: var(--brand);
  background: var(--surface-soft, #f1f4f8);
}

.reply-route-count {
  margin: 0;
  font-size: 12px;
}

.reply-route-dirty {
  color: var(--brand-dark);
  font-size: 12px;
  font-weight: 700;
}

.reply-route-status {
  margin: 0;
  color: #065f46;
  font-size: 12px;
  font-weight: 700;
}

.reply-route-status.is-error {
  color: var(--bad);
}

body.dark-mode .reply-route-chip.is-problem,
body.dark-mode .reply-route-summary.is-warning {
  background: #3d3220;
  color: var(--warn);
}

body.dark-mode .reply-route-chip-problem {
  color: var(--warn);
}

body.dark-mode .reply-route-status {
  color: #6ee7b7;
}

body.dark-mode .reply-route-status.is-error {
  color: var(--bad);
}

body.dark-mode .reply-route-dirty {
  color: var(--brand);
}

/* Template library: one workspace node, shown in Management or the read dialog. */
.email-library-body.etl-workspace {
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 16px;
}

#managementEmailTemplatesHost .email-library-body.etl-workspace {
  overflow: visible;
  padding: 0;
}

.etl-templates > h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.etl-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.etl-items {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.etl-item {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
}

.etl-item:hover {
  background: var(--surface-soft);
}

.etl-item.selected {
  border-color: var(--brand);
  background: #eef4fd;
  box-shadow: inset 3px 0 0 var(--brand);
}

body.dark-mode .etl-item.selected {
  background: #2c3f57;
}

.etl-item strong {
  font-size: 13px;
}

.etl-item-meta,
.etl-item-edited {
  color: var(--muted);
  font-size: 12px;
}

.etl-badge {
  justify-self: start;
  margin-top: 2px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.etl-badge-unsaved {
  border-color: #b26a00;
  color: #8a5300;
}

body.dark-mode .etl-badge-unsaved {
  border-color: #e0a74a;
  color: #f2c879;
}

.etl-editor {
  min-width: 0;
}

.etl-editor-head {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.etl-editor-head h4 {
  margin: 0;
  font-size: 15px;
}

.etl-editor-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

@media (min-width: 1240px) {
  #managementEmailTemplatesHost .etl-editor-grid {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  }

  #managementEmailTemplatesHost .etl-preview {
    position: sticky;
    top: 12px;
  }
}

.etl-compose {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.etl-label {
  margin-top: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.etl-hint,
.etl-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.etl-note {
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--ink);
}

.etl-compose input,
.etl-compose textarea {
  width: 100%;
  min-width: 0;
}

.etl-compose textarea {
  min-height: 240px;
  resize: vertical;
  font-family: inherit;
  line-height: 1.45;
}

.etl-compose [aria-invalid="true"] {
  border-color: #b42323;
  box-shadow: 0 0 0 1px #b42323;
}

.etl-problem {
  margin: 2px 0 0;
  color: #b42323;
  font-size: 12.5px;
  font-weight: 600;
}

.etl-problem::before {
  content: "Fix: ";
}

body.dark-mode .etl-problem {
  color: #ff9b9b;
}

body.dark-mode .etl-compose [aria-invalid="true"] {
  border-color: #ff9b9b;
  box-shadow: 0 0 0 1px #ff9b9b;
}

.etl-problem[hidden] {
  display: none;
}

.etl-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.etl-status {
  min-height: 1.2em;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.etl-status[data-tone="ok"] {
  color: #17733f;
}

.etl-status[data-tone="error"] {
  color: #b42323;
  font-weight: 600;
}

/* Template attachments (2026-10-27) and the system-send subject note in the template editor. */
.etl-thread-note {
  margin-top: 4px;
}

.etl-attachments {
  margin: 12px 0 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.etl-attachments h5 {
  margin: 0 0 4px;
  font-size: 13px;
}

.etl-attachment-list {
  display: grid;
  gap: 6px;
  margin: 6px 0;
  padding: 0;
  list-style: none;
}

.etl-attachment {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
}

.etl-attachment-name {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.etl-attachment small {
  color: var(--muted);
}

.etl-attachment-remove {
  margin-left: auto;
  min-height: 30px;
  padding: 2px 10px;
}

.etl-attachment-add {
  display: block;
  margin-top: 6px;
}

body.dark-mode .etl-status[data-tone="ok"] {
  color: #6fd49a;
}

body.dark-mode .etl-status[data-tone="error"] {
  color: #ff9b9b;
}

.etl-fields {
  min-width: 0;
  margin: 10px 0 0;
  padding: 10px 12px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.etl-fields legend {
  padding: 0 4px;
  font-size: 13px;
  font-weight: 700;
}

.etl-chips {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.etl-chips li {
  display: grid;
  grid-template-columns: 12.5rem minmax(0, 1fr);
  align-items: center;
  gap: 2px 10px;
  min-width: 0;
}

.etl-field-help {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.etl-field-help strong {
  color: var(--ink);
}

.etl-chip {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 3px 10px 3px 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

button.etl-chip:hover {
  border-color: var(--brand);
}

button.etl-chip::after {
  content: "+";
  color: var(--brand);
  font-weight: 700;
}

.etl-chip code {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--panel);
  font-size: 11.5px;
}

.etl-preview {
  min-width: 0;
}

.etl-preview h5 {
  margin: 0;
  font-size: 13px;
}

.etl-preview-mail {
  margin-top: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  overflow: hidden;
}

.etl-preview-subject {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
}

.etl-preview-subject span {
  color: var(--muted);
  font-size: 12px;
}

.etl-preview-body {
  padding: 10px 12px 14px;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Freight carriers (James 2026-10-27): its own section, a peer of the template library. In
   Management > Email Templates it fills the Freight carriers card (whose header names it); in the
   read-only dialog it follows the templates and both scroll together. */
.etl-carriers {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.etl-carriers-header {
  display: grid;
  gap: 2px;
}

.etl-carriers-header h3 {
  margin: 0;
  font-size: 13px;
}

.etl-carriers-header .muted {
  margin: 0;
  font-size: 12px;
}

#managementFreightCarriersHost .etl-carriers-header {
  display: none;
}

.etl-carriers > #freightCarrierLibraryError:empty {
  display: none;
}

.email-library-dialog-host {
  min-height: 0;
  overflow-y: auto;
}

.email-library-dialog-host > .email-library-body.etl-workspace {
  overflow: visible;
}

.email-library-dialog-host > .etl-carriers {
  border-top: 1px solid var(--line);
  margin: 0 16px;
  padding: 12px 0 14px;
}

.carrier-template-help,
.carrier-template-example {
  margin: 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.etl-workspace > #emailTemplateLibraryError:empty {
  display: none;
}

.email-template-library-dialog:has(.etl-workspace) {
  width: min(1180px, calc(100vw - 24px));
  max-width: 1180px;
}

@media (max-width: 743px) {
  .etl-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .etl-items {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }

  .etl-chips li {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Management → Q&A usage card (James 2026-10-25): the 7/30-day switch sits at the header's end. */
.qa-usage-card > header {
  align-items: center;
}

.qa-usage-card .qa-usage-range button {
  min-height: 28px;
  padding: 2px 10px;
  font-size: 12px;
}

.qa-usage-since {
  margin: 0 0 8px;
}

.qa-usage-card .qa-usage-trend-title {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 12px 0 4px;
}

.qa-usage-charts .rpt-legend {
  margin-bottom: 2px;
}

/* Management → Contacts (James 2026-10-26): every customer's saved contacts.
   Name and email are required (red *), phone is recommended (amber marker). */
.mgmt-contacts {
  align-content: start;
}

.mgmt-contacts-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 8px 12px;
  margin-bottom: 10px;
}

.mgmt-contacts-search {
  display: grid;
  gap: 2px;
  flex: 1 1 260px;
  max-width: 420px;
  font-size: 12px;
  font-weight: 600;
}

.mgmt-contacts-toolbar #mgmtContactsAddBtn {
  margin-left: auto;
}

.mgmt-contact-form {
  display: grid;
  gap: 8px;
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.mgmt-contact-form[hidden] {
  display: none;
}

.mgmt-contact-form h3 {
  margin: 0;
  font-size: 14px;
}

.mgmt-contact-legend {
  margin: 0;
  font-size: 12px;
}

.mgmt-contact-fields {
  display: grid;
  grid-template-columns: max-content minmax(0, 360px);
  align-items: center;
  gap: 6px 12px;
}

.mgmt-contact-fields label {
  font-size: 13px;
  font-weight: 600;
}

.mgmt-contact-hint {
  grid-column: 2;
  margin-top: -4px;
  font-size: 12px;
}

.mgmt-contact-fields input[readonly] {
  background: transparent;
  color: var(--muted);
}

.mgmt-contact-fields input[aria-invalid="true"] {
  border-color: #b42318;
}

.mgmt-required {
  color: #b42318;
}

.mgmt-recommended {
  color: #8a5300;
  font-weight: 500;
}

.mgmt-contact-form .error:empty,
.mgmt-contacts #mgmtContactsError:empty,
.mgmt-contacts #mgmtContactsStatus:empty {
  display: none;
}

.mgmt-contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.mgmt-contacts-table .mgmt-contact-email {
  overflow-wrap: anywhere;
}

.mgmt-contacts-table th[scope="row"] {
  font-weight: 600;
}

.mgmt-contact-row-actions {
  white-space: nowrap;
  text-align: right;
}

.mgmt-contact-row-actions button + button {
  margin-left: 6px;
}

.mgmt-phone-missing {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid #f0c36d;
  border-radius: 999px;
  background: #fff4d6;
  color: #7a4a00;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

body.dark-mode .mgmt-phone-missing {
  border-color: #8a6420;
  background: #3d3016;
  color: #ffd98a;
}

body.dark-mode .mgmt-required {
  color: #ff8a80;
}

body.dark-mode .mgmt-recommended {
  color: #ffd98a;
}

.mgmt-contacts-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.mgmt-contacts-pager[hidden] {
  display: none;
}

@media (max-width: 743px) {
  .mgmt-contact-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .mgmt-contact-hint {
    grid-column: 1;
  }
}