/* 系统管理页。配色沿用账号中心：主色 #117d68，正文 #25282a，次要文字 #73797c，
   边框 #e5e7e7 / #d8dddd，卡片底 #fafbfa；图表颜色直接用 usage.css 里的槽位变量。 */

.admin-sections {
  margin-bottom: 18px;
  border-bottom: 1px solid #e5e7e7;
}
.admin-section-tabs {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.admin-section-tabs button {
  flex: none;
  padding: 9px 14px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: #73797c;
  font-size: 14px;
  cursor: pointer;
}
.admin-section-tabs button:hover {
  color: #25282a;
}
.admin-section-tabs button[aria-selected='true'] {
  border-bottom-color: #117d68;
  color: #117d68;
  font-weight: 600;
}
.admin-updated {
  color: #73797c;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.admin-card {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid #e5e7e7;
  border-radius: 8px;
  background: #fafbfa;
  min-width: 0;
}
.admin-card strong {
  font-size: 22px;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.admin-card-label {
  color: #73797c;
  font-size: 12px;
}
.admin-card-hint {
  color: #73797c;
  font-size: 12px;
  overflow-wrap: anywhere;
}

.admin-panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  gap: 12px;
}
.admin-panel {
  padding: 16px 18px;
  border: 1px solid #e5e7e7;
  border-radius: 8px;
  background: #fafbfa;
  min-width: 0;
}
.admin-panel + .admin-panel,
.admin-cards + .admin-panel,
.admin-range + .admin-cards {
  margin-top: 12px;
}
.admin-panel h3 {
  margin: 0 0 10px;
  font-size: 14px;
}
.admin-panel h4 {
  margin: 16px 0 8px;
  font-size: 13px;
  color: #25282a;
}
.admin-panel-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.admin-panel-heading h3 {
  margin: 0;
}

.admin-facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  margin: 0;
  font-size: 13px;
}
.admin-facts dt {
  color: #73797c;
}
.admin-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
.admin-hint {
  margin: 10px 0 0;
  color: #73797c;
  font-size: 12px;
  line-height: 1.6;
}
.admin-subtle {
  display: block;
  color: #73797c;
  font-size: 12px;
}

.admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}
.admin-toolbar input[type='search'] {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid #d8dddd;
  border-radius: 6px;
  font: inherit;
}
.admin-form {
  display: grid;
  gap: 12px;
}
.admin-form label {
  display: grid;
  gap: 6px;
  font-size: 13px;
}
.admin-form input {
  padding: 8px 12px;
  border: 1px solid #d8dddd;
  border-radius: 6px;
  font: inherit;
}
.admin-inline-form {
  grid-template-columns: 1fr auto;
  align-items: end;
}

.admin-table {
  table-layout: auto;
  white-space: nowrap;
  font-size: 13px;
}
.admin-table th {
  background: #f7f8f8;
  padding: 10px 12px;
  font-size: 12px;
  color: #73797c;
  font-weight: 600;
}
.admin-table td {
  padding: 10px 12px;
  border-top: 1px solid #eff1f0;
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}
.admin-table .admin-account-cell {
  white-space: normal;
  overflow-wrap: anywhere;
  min-width: 180px;
}
.admin-row {
  cursor: pointer;
}
.admin-row:hover td {
  background: #fbfcfc;
}
.admin-row:focus-visible {
  outline: 2px solid #168f78;
  outline-offset: -2px;
}
.admin-detail-row td {
  background: #fafbfa;
  white-space: normal;
}
.admin-expandable {
  cursor: pointer;
}
.admin-expandable:hover {
  background: #f2f5f4;
}

.admin-badge {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eff1f0;
  color: #495155;
  font-size: 12px;
  white-space: nowrap;
}
.admin-badge[data-tone='ok'] {
  background: #edf6f2;
  color: #0d5f4f;
}
.admin-badge[data-tone='warn'] {
  background: #fdf3e4;
  color: #8a5a11;
}
.admin-badge[data-tone='danger'] {
  background: #fff0ef;
  color: #a33a3a;
}
.admin-badge[data-tone='idle'] {
  background: #eff1f0;
  color: #73797c;
}

.admin-row-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin: 12px 0;
}
.admin-row-button {
  padding: 4px 9px;
  border: 1px solid #d8dddd;
  border-radius: 6px;
  background: #fff;
  color: #495155;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.admin-row-button:hover:not(:disabled) {
  border-color: #117d68;
  color: #117d68;
}
.admin-row-button:disabled {
  border-color: #eff1f0;
  color: #b3b8ba;
  cursor: not-allowed;
}
.admin-danger {
  color: #bc4848;
}
.admin-row-button.admin-danger:hover:not(:disabled) {
  border-color: #bc4848;
  background: #fff0ef;
  color: #bc4848;
}

.admin-range {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.admin-range button {
  padding: 6px 12px;
  border: 1px solid #d8dddd;
  border-radius: 999px;
  background: #fff;
  color: #495155;
  font-size: 13px;
  cursor: pointer;
}
.admin-range button:hover {
  border-color: #117d68;
  color: #117d68;
}
.admin-range button[aria-pressed='true'] {
  border-color: #117d68;
  background: #117d68;
  color: #fff;
}

.admin-chart {
  margin-top: 8px;
  min-width: 0;
  overflow: hidden;
}
.admin-breakdown {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #e5e7e7;
}
.admin-account-usage {
  margin-top: 8px;
}

.admin-method-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
}
.admin-method-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.admin-method-name {
  min-width: 90px;
  font-weight: 600;
}
.admin-method-amount {
  font-variant-numeric: tabular-nums;
}
.admin-rank {
  width: 44px;
  color: #73797c;
}
.admin-rank[data-medal] {
  font-weight: 700;
  color: #8a6212;
}
.admin-rank[data-medal='2'] {
  color: #6b7275;
}
.admin-rank[data-medal='3'] {
  color: #8a5a3b;
}

.admin-empty {
  padding: 24px;
  border: 1px dashed #d8dddd;
  border-radius: 8px;
  background: #fafbfa;
  color: #495155;
  text-align: center;
}
.admin-empty p {
  margin: 0 0 6px;
}

@media (max-width: 767px) {
  .admin-panels {
    grid-template-columns: 1fr;
  }
  .admin-inline-form {
    grid-template-columns: 1fr;
  }
  .admin-row-actions {
    justify-content: flex-start;
  }
}

/* Narrow screens keep account identity and actions together in a card. */
@media (max-width: 1000px) {
  .admin-users-table {
    overflow: visible;
  }
  .admin-users-table > table,
  .admin-users-table > table > tbody {
    display: block;
    width: 100%;
  }
  .admin-users-table > table > thead {
    display: none;
  }
  .admin-users-table .admin-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
    border: 1px solid #e5e7e7;
    border-radius: 8px;
    overflow: hidden;
  }
  .admin-users-table .admin-row td {
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .admin-users-table .admin-row td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 4px;
    color: #73797c;
    font-size: 12px;
  }
  .admin-users-table .admin-row .admin-account-cell,
  .admin-users-table .admin-row td:last-child {
    grid-column: 1 / -1;
  }
  .admin-users-table .admin-row td:last-child::before {
    display: none;
  }
  .admin-users-table .admin-detail-row:not([hidden]),
  .admin-users-table .admin-detail-row > td {
    display: block;
    min-width: 0;
  }
  .admin-row-button {
    min-height: 44px;
  }
  .admin-detail-row h4 {
    overflow-wrap: anywhere;
  }
}