/*
 * The platform-admin pages (AB#316): the page frame, toolbars, tables, detail lists and the two-column billing layout.
 * Loaded after maluce-inbox.css, tokens only, no color literals (a test enforces it). The guide's table and modal styles
 * are used as shipped; this file only adds the layout around them.
 */
.ml-admin {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--space-6);
  overflow-y: auto;
  background: var(--surface-page);
}

/* A settings-style page: one column that stops growing, rather than stretching a form across a wide screen. */
/* AB#246: .ml-admin is a fixed-height flex column that scrolls. Flex items shrink by default, so a tall child (the
   support-access card) was squashed to fit the viewport and its overflow clipped, hiding the password field and Start
   button with nothing to scroll to. Children keep their natural height; the page scrolls instead. */
.ml-admin > *,
.ml-card-stack > * {
  flex-shrink: 0;
}

.ml-admin--narrow > * {
  width: 100%;
  max-width: 40rem;
}

.ml-admin__header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.ml-admin__title {
  margin: 0;
  color: var(--ink);
}

.ml-admin__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ml-admin__loading {
  margin: 0;
  color: var(--ink-secondary);
}

/* A row of filters above a table. The guide caps a field at 360px; in a toolbar it should size to its content. */
.ml-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.ml-toolbar .ml-field {
  max-width: none;
}

.ml-toolbar__grow {
  flex: 1 1 16rem;
  min-width: 0;
}

/* ---- Tables: the guide's Table in a frame that scrolls sideways on a narrow screen instead of the page ---- */
.ml-table-wrap {
  /* The frame is the containing block for anything absolutely positioned inside it (a visually hidden label), so
     that content is clipped with the table instead of widening the page. Without this a hidden label sat far to the
     right of a wide table and made the page container scroll sideways. */
  position: relative;
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-100);
}

.ml-table-wrap .ml-table th {
  text-align: left;
  white-space: nowrap;
}

.ml-table th.ml-table__num {
  text-align: right;
}

/* Amounts and ids are system strings: mono, and amounts align on their right edge. */
.ml-table__num {
  font-family: var(--font-mono);
  text-align: right;
  white-space: nowrap;
}

.ml-table__nowrap {
  white-space: nowrap;
}

.ml-table__mono {
  font-family: var(--font-mono);
}

.ml-table__details {
  max-width: 48rem;
  overflow-wrap: anywhere;
}

/* A clickable row (the tenant list). The name cell is also a real link, so the keyboard reaches it too. */
.ml-row-link {
  cursor: pointer;
}

.ml-row-link a {
  color: var(--ink);
  text-decoration: none;
}

.ml-row-link a:hover {
  color: var(--brand);
  text-decoration: underline;
}

.ml-row-actions {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.ml-table__note {
  margin-left: var(--space-1);
  color: var(--ink-secondary);
}

/* A control inside a table cell (a role picker). Its label stays in the page for assistive tech ("Role for x") but is
   hidden from sight, because the column header already says what it is. */
.ml-table__control .ml-field {
  min-width: 9rem;
  max-width: none;
}

.ml-table__control .ml-field-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.ml-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* ---- Detail lists (a tenant's facts) ---- */
.ml-detail {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-3) var(--space-6);
  margin: 0;
}

.ml-detail dt {
  color: var(--ink-secondary);
}

.ml-detail dd {
  margin: 0;
  color: var(--ink);
}

.ml-card-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 40rem;
}

.ml-card-stack > .ml-card > h2,
.ml-card-stack > .ml-card > .ml-form > h2 {
  margin: 0;
}

.ml-card__title {
  margin: 0 0 var(--space-4);
  color: var(--ink);
}

.ml-card__lead {
  margin: 0 0 var(--space-4);
  color: var(--ink-secondary);
}

.ml-card__actions {
  margin-top: var(--space-4);
}

.ml-inline-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
}

.ml-inline-form .ml-field {
  max-width: none;
}

/* ---- Billing: balances above, the forms beside the ledger ---- */
.ml-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.ml-stat {
  min-width: 14rem;
}

.ml-stat__label {
  margin: 0;
  color: var(--ink-secondary);
}

.ml-stat__value {
  margin: var(--space-1) 0 0;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 22px;
  line-height: 1.2;
  font-weight: 500;
}

.ml-stat__expected {
  margin: var(--space-1) 0 0;
  color: var(--ink);
}

.ml-panels {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  align-items: start;
  gap: var(--space-6);
}

.ml-panels > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

.ml-drift-list {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-6);
}

/* The confirm dialogs' action row: Cancel beside the one primary. */
.ml-confirm__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-6);
}

.ml-confirm__text {
  margin: 0;
  color: var(--ink);
}

@media (max-width: 767px) {
  .ml-admin {
    padding: var(--space-4);
  }

  .ml-panels {
    grid-template-columns: minmax(0, 1fr);
  }

  .ml-detail {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .ml-detail dd {
    margin-bottom: var(--space-3);
  }
}

/* ---- Compliance summary (AB#301) ---- */
.ml-attention {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ml-attention__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-100);
}

.ml-compliance-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
}

/* ---- A tabbed page's panel (Team): spaced below the tab list, content stacked like the rest of an admin page ---- */
.ml-tabpanel {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

/* AB#258: the members list inside the inbox Members dialog. */
.ml-member-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ml-member-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* A table that follows a detail list, or another table, inside one card needs room above it (the billing summary ran them together). */
.ml-detail + .ml-table-wrap,
.ml-table-wrap + .ml-table-wrap {
  margin-top: var(--space-4);
}

/* AB#167: the tenants with their own price, inside the Change price dialog. */
.ml-propagation { border: 1px solid var(--border-strong); border-radius: var(--radius-sm); margin: 0; padding: var(--space-3) var(--space-4); min-width: 0; }
.ml-propagation__list { list-style: none; margin: var(--space-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); max-height: 14rem; overflow-y: auto; }

/* Getting started checklist (AB#371) */
.ml-checklist { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.ml-checklist__step { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-100); }
.ml-checklist__step[aria-current="step"] { border: 2px solid var(--brand-fill); padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }
.ml-checklist__head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.ml-checklist__reason { margin: 0; }
.ml-inbox__empty:has(.ml-checklist) { flex-direction: column; justify-content: flex-start; align-items: stretch; overflow-y: auto; padding: var(--space-4); gap: var(--space-4); }

/* AB#375: the people in a group, one row each with a Remove button. */
.ml-group-members {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}
.ml-group-members li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}