/* AY TMS Enterprise Settings
   Loaded after adaptive-workspace.css so the reference-specific page can
   preserve the existing settings/audit behavior without changing shared UI. */

.settings-page {
  --settings-ink: #0b1538;
  --settings-secondary: #475467;
  --settings-muted: #667085;
  --settings-blue: #0b6bff;
  --settings-blue-hover: #095ddf;
  --settings-pale-blue: #eaf2ff;
  --settings-border: #e2e8f0;
  --settings-divider: #e8edf4;
  --settings-hover: #f8fafd;
  /* This reserved up to 194px at the top of the page for a floating header that no
     longer exists — the better part of a screen of nothing above the first panel
     (Alan, 2026-08-09: "设置 page 太多空白了"). */
  --settings-content-offset: 10px;
  --settings-page-bottom-gap: 12px;
  position: relative;
  isolation: isolate;
  display: block;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding:
    var(--settings-content-offset)
    10px
    var(--settings-page-bottom-gap);
  overflow: hidden;
  background: transparent;
  color: var(--settings-ink);
  font-family: Inter, "SF Pro Text", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.settings-page__layout {
  position: relative;
  display: grid;
  /* Uncapped and uncentred, like every other page (Alan, 2026-08-09). 1540px on a
     2560px screen was 500px a side of nothing. */
  /* Access holds the grid of accounts, so Access gets the width. It used to be
     the narrow column, which is why a list that could sit five across sat one
     across. */
  grid-template-columns: minmax(560px, 64fr) minmax(340px, 36fr);
  align-items: stretch;
  gap: 10px;
  width: 100%;
  margin: 0;
}

.settings-surface {
  position: relative;
  min-width: 0;
  min-height: max(420px, calc(100dvh - 108px));
  overflow: hidden;
  border: 1px solid rgba(226, 232, 240, .96);
  border-radius: 12px;
  background: #fff;
  box-shadow: none;
}

.settings-surface > .settings-surface__header {
  display: flex;
  min-height: 66px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 clamp(18px, 1.5vw, 24px);
  border-bottom: 1px solid var(--settings-divider);
  background: #fff;
}

.settings-surface > .settings-surface__header h2 {
  margin: 0;
  color: var(--settings-ink);
  font-size: clamp(15px, 1.08vw, 18px);
  font-weight: 700;
  letter-spacing: -.02em;
}

.settings-access__tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.settings-surface > .settings-surface__header .settings-count-badge,
.settings-audit .audit-page-size {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  padding: 4px 11px;
  border: 0;
  border-radius: 999px;
  background: var(--settings-pale-blue);
  color: var(--settings-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}

/* Add Customer and Add Driver, beside the user count they belong with. This page
   is Admin's alone by route, and the two callables behind these links are Admin's
   alone since 2026-08-21 ("只能admin加"), so there is no role to check here.

   Shaped like the count badge next to them rather than like a primary button:
   they are doors, pressed occasionally, and the list of people is what this
   surface is for. */
.settings-add-record {
  display: inline-flex;
  min-height: 25px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--settings-pale-blue);
  border-radius: 999px;
  padding: 4px 12px;
  color: var(--settings-blue);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.settings-add-record:hover,
.settings-add-record:focus-visible {
  border-color: var(--settings-blue);
  background: var(--settings-pale-blue);
}

.settings-user-search {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  align-items: center;
  transition: width 180ms ease;
}

.settings-user-search:focus-within {
  width: min(180px, 36vw);
}

.settings-user-search > i {
  position: absolute;
  z-index: 1;
  left: 10px;
  color: #667085;
  font-size: 15px;
  pointer-events: none;
}

.settings-user-search > input {
  width: 100%;
  min-height: 34px;
  padding: 6px 9px 6px 31px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: transparent;
  font-size: 0;
  box-shadow: none;
  cursor: pointer;
}

.settings-user-search > input::placeholder {
  color: transparent;
}

.settings-user-search:focus-within > input {
  border-color: #cbd5e1;
  background: #fff;
  color: var(--settings-ink);
  font-size: 12px;
  cursor: text;
  outline: 3px solid rgba(11, 107, 255, .16);
  outline-offset: 1px;
}

.settings-user-search:focus-within > input::placeholder {
  color: #98a2b3;
}

.settings-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  border: 0 !important;
  white-space: nowrap !important;
}

/* Several accounts to a row instead of one (Alan, 2026-08-09: "设置 page 太多空白
   了，实在不行你可以把角色卡一行展示多个"). A row of four fields down a 1500px page
   left two thirds of every line empty; the list is a grid that fits as many
   360px cards as the width allows, so a twenty-person team is five rows rather
   than twenty. */
.settings-user-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  align-content: start;
  gap: 1px;
  background: var(--settings-divider);
  max-height: max(360px, calc(100dvh - 174px));
  overflow: auto;
  scrollbar-color: #cbd5e1 transparent;
  scrollbar-width: thin;
}

.settings-user-list::-webkit-scrollbar {
  width: 7px;
}

.settings-user-list::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: #cbd5e1;
  background-clip: padding-box;
}

.settings-user {
  display: grid;
  grid-template-columns: 34px minmax(90px, 1fr) auto minmax(104px, 120px);
  min-height: 46px;
  align-items: center;
  gap: 8px;
  /* The 1px grid gap plus the list's own background draws the dividers now, so
     the card carries no border of its own. */
  padding: 5px 12px;
  border-bottom: 0;
  background: #fff;
}

.settings-user:hover {
  background: var(--settings-hover);
}

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

.settings-user:last-child {
  border-bottom: 0;
}

.settings-user__avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 50%;
  background: #f3f4f6;
  color: #111827;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.settings-user__identity {
  display: grid;
  min-width: 0;
}

.settings-user__identity strong {
  overflow: hidden;
  color: #101828;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-user__identity small {
  overflow: hidden;
  margin-top: 1px;
  color: var(--settings-muted);
  font-size: 10px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-user__state {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--settings-secondary);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.settings-user__state i {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #98a2b3;
}

.settings-user__state--active i {
  background: #12b76a;
  box-shadow: none;
}

.settings-user__state--inactive i {
  background: #98a2b3;
}

.settings-user__role {
  display: block;
  min-width: 0;
}

.settings-user__role select {
  width: 100%;
  min-height: 34px;
  padding: 6px 28px 6px 11px;
  border: 1px solid #d7dee8;
  border-radius: 9px;
  background-color: #fff;
  color: #101828;
  font-size: 11px;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .03);
}

.settings-user__role select:hover {
  border-color: #b9c5d6;
}

.settings-user__role select:focus-visible {
  border-color: var(--settings-blue);
  outline: 3px solid rgba(11, 107, 255, .16);
  outline-offset: 1px;
}

.settings-empty {
  margin: 0;
  padding: 32px 20px;
  color: var(--settings-muted);
  font-size: 12px;
  text-align: center;
}

.settings-audit #adminAuditLog {
  padding: 0;
}

.settings-audit .admin-audit-timeline {
  background: transparent;
}

.settings-audit .audit-heading-row {
  min-height: 52px;
  align-items: center;
  padding: 12px 20px 10px;
  border-bottom: 0;
}

.settings-audit .audit-heading-row > div:first-child {
  min-width: 0;
}

.settings-audit .audit-heading-row h2 {
  margin: 0;
  color: #0b2c64;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.025em;
}

.settings-audit .audit-heading-row p {
  display: none;
}

.settings-audit .audit-page-size {
  position: static;
  flex: none;
  margin-left: 8px;
}

.settings-audit .audit-locale-picker {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  color: var(--settings-muted);
  font-size: 10px;
}

.settings-audit .audit-locale-picker select {
  min-height: 28px;
  padding: 3px 22px 3px 8px;
  border: 1px solid var(--settings-border);
  border-radius: 8px;
  background: #fff;
  color: var(--settings-secondary);
  font-size: 10px;
}

.settings-audit .audit-range-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(115px, 1fr)) auto;
  align-items: end;
  gap: 12px;
  padding: 0 20px 20px;
  border-bottom: 1px solid var(--settings-divider);
  background: #fff;
}

.settings-audit .audit-range-form label {
  display: grid;
  gap: 8px;
}

.settings-audit .audit-range-form label span {
  color: #263b63;
  font-size: 11px;
  font-weight: 650;
}

.settings-audit .audit-range-form input {
  min-height: 36px;
  padding: 8px 11px;
  border: 1px solid #d8e0eb;
  border-radius: 9px;
  background: #fff;
  color: var(--settings-ink);
  font-size: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
}

.settings-audit .audit-range-form input:focus-visible {
  border-color: var(--settings-blue);
  outline: 3px solid rgba(11, 107, 255, .16);
  outline-offset: 1px;
}

.settings-audit .audit-search-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.settings-audit .audit-search-actions button,
.settings-audit .audit-pagination button {
  min-height: 36px;
  padding: 8px 15px;
  border: 1px solid #d8e0eb;
  border-radius: 9px;
  background: #fff;
  color: #16345f;
  font-size: 11px;
  font-weight: 650;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
}

.settings-audit .audit-search-actions .primary {
  border-color: #9fc3ff;
  background: #fff;
  color: var(--settings-blue);
}

.settings-audit .audit-search-actions .primary:hover,
.settings-audit .audit-search-actions .primary:focus-visible {
  border-color: var(--settings-blue);
  background: var(--settings-pale-blue);
  color: var(--settings-blue-hover);
}

.settings-audit .audit-search-actions .secondary:hover,
.settings-audit .audit-search-actions .secondary:focus-visible,
.settings-audit .audit-pagination button:not(:disabled):hover,
.settings-audit .audit-pagination button:not(:disabled):focus-visible {
  border-color: #b7c3d4;
  background: var(--settings-hover);
}

.settings-audit .audit-feedback-row {
  min-height: 14px;
  padding: 0 30px;
}

.settings-audit .audit-status:empty,
.settings-audit .audit-new-events[hidden] {
  display: none;
}

.settings-audit .audit-table-wrap {
  width: auto;
  margin: 0 15px;
  overflow-x: auto;
  border: 1px solid var(--settings-divider);
  border-radius: 0;
  box-shadow: none;
}

.settings-audit .audit-business-table {
  min-width: 820px;
}

.settings-audit .audit-business-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 7px 10px;
  border-bottom: 1px solid var(--settings-divider);
  background: #f6f8fc;
  color: #40557b;
  font-size: 10px;
  font-weight: 650;
  letter-spacing: .01em;
  line-height: 1.2;
  text-align: left;
}

.settings-audit .audit-business-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--settings-divider);
  background: #fff;
  color: #233d69;
  font-size: 11px;
  line-height: 1.3;
}

.settings-audit .audit-business-table tr[data-audit-row]:hover td {
  background: var(--settings-hover);
}

.settings-audit .audit-business-table td:first-child,
.settings-audit .audit-business-table td:nth-child(3) {
  font-variant-numeric: tabular-nums;
}

.settings-audit .icon-button.audit-expand-button {
  width: 37px;
  height: 37px;
  min-height: 37px;
  border: 1px solid #d7e5fb;
  border-radius: 8px;
  background: #f8fbff;
  color: var(--settings-blue);
  box-shadow: none;
}

.settings-audit .audit-chevron {
  font-size: 21px;
}

.settings-audit .audit-detail-row td {
  padding: 0;
  background: #f4f7fc;
}

.settings-audit .audit-detail-panel {
  padding: 18px 20px 20px;
  border-left: 3px solid var(--settings-blue);
  background: #f4f7fc;
}

.settings-audit .audit-detail-meta dd,
.settings-audit .audit-change-value,
.settings-audit .audit-technical-details pre {
  font-variant-numeric: tabular-nums;
}

.settings-audit .audit-pagination {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px 20px 14px;
}

.settings-audit .audit-pagination button:disabled {
  border-color: #e3e8ef;
  color: #98a2b3;
  opacity: .72;
}

.settings-role-confirmation {
  width: min(310px, calc(100vw - 24px));
  padding: 16px;
  border: 1px solid var(--settings-border);
  border-radius: 14px;
  background: #fff;
  color: var(--settings-ink);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .14);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.settings-role-confirmation > small {
  color: var(--settings-muted);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
}

.settings-role-confirmation > h2 {
  margin: 4px 0 9px;
  color: var(--settings-ink);
  font-size: 15px;
}

.settings-role-confirmation > p {
  color: var(--settings-secondary);
  font-size: 11px;
}

.settings-role-confirmation__actions button {
  min-height: 34px;
  border-radius: 9px;
  background: #fff;
  font-size: 10px;
  box-shadow: none;
}

.settings-role-confirmation__actions [data-settings-role-confirm] {
  border-color: #aac8ff;
  color: var(--settings-blue);
}
@media (max-width: 1320px) {
  .settings-page__layout {
    grid-template-columns: minmax(520px, 58fr) minmax(320px, 42fr);
  }

  .settings-audit .audit-range-form {
    grid-template-columns: repeat(2, minmax(160px, 1fr)) auto;
  }

  .settings-audit .audit-search-actions {
    grid-column: 3;
    grid-row: 1 / span 2;
  }
}

@media (max-width: 1100px) {
  /* padding-top was 148px here, for the same header that no longer exists. */

  .settings-page__layout {
    grid-template-columns: 1fr;
  }

  .settings-surface {
    min-height: 0;
  }

  .settings-user-list {
    max-height: 430px;
  }

  .settings-audit .audit-range-form {
    grid-template-columns: repeat(4, minmax(120px, 1fr));
  }

  .settings-audit .audit-search-actions {
    grid-column: 1 / -1;
    grid-row: auto;
    justify-content: flex-end;
  }
}

@media (max-width: 760px) {
  .settings-page {
    margin: 0;
    padding: 150px 14px calc(88px + env(safe-area-inset-bottom)) 20px;
  }

  .settings-surface > .settings-surface__header {
    min-height: 60px;
    padding-inline: 16px;
  }

  .settings-user {
    grid-template-columns: 36px minmax(0, 1fr) minmax(105px, 122px);
    gap: 8px;
    padding-inline: 14px;
  }

  .settings-user__state {
    grid-column: 2;
  }

  .settings-user__role {
    grid-column: 3;
    grid-row: 1 / span 2;
  }

  .settings-audit .audit-heading-row {
    padding-inline: 16px;
  }

  .settings-audit .audit-page-size {
    display: none;
  }

  .settings-audit .audit-range-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 0 16px 20px;
  }

  .settings-audit .audit-search-actions {
    grid-column: 1 / -1;
  }

  .settings-audit .audit-table-wrap {
    margin-inline: 12px;
    overflow: visible;
    border: 0;
  }

  .settings-audit .audit-pagination {
    padding-inline: 16px;
  }
}

@media (max-width: 480px) {
  .settings-access__tools {
    gap: 4px;
  }

  .settings-user-search:focus-within {
    position: absolute;
    z-index: 3;
    right: 16px;
    width: calc(100% - 32px);
  }

  .settings-audit .audit-range-form {
    grid-template-columns: 1fr;
  }

  .settings-audit .audit-search-actions {
    grid-column: auto;
  }

  .settings-audit .audit-search-actions button {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion="on"]) .settings-user-search,
  html:not([data-motion="on"]) .settings-user {
    transition: none;
  }
}