/* admin.css : the few rules the admin portfolio pages need on top of ds.css and pages.css.
   Tokens only (npm run lint:theme covers this file). Class prefix adm- = "admin page". */

/* A head with more than one action wraps under the title on a phone and the buttons share the row. */
@media (max-width: 767px) {
  .ds-head-row { flex-wrap: wrap; }
  .ds-head-actions { flex: 1 1 100%; }
  .ds-head-actions > .ds-btn { flex: 1 1 0; }
}

/* Identity link in a table cell or row: the whole cell is the touch target. */
.adm-id { display: block; min-width: 0; color: inherit; text-decoration: none; }
.adm-id:hover .ds-cell-title { text-decoration: underline; text-underline-offset: 2px; }
.adm-id:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-xs); }
@media (max-width: 767px) {
  .adm-id { display: flex; flex-direction: column; justify-content: center; min-height: var(--tap-min); }
}

/* Row menu cell: as narrow as its button, right-aligned, absent on a phone (the row itself opens the record). */
.adm-cell-end { width: 1%; white-space: nowrap; text-align: right; }
@media (max-width: 767px) { .adm-cell-end { width: auto; } }

/* Table region that can hold a sticky header and wide numeric columns without pushing the page sideways. */
.adm-table { min-width: 0; }

/* Needs-attention rows: a status rail, one sentence, one action. Not clickable as a whole. */
.adm-attn .ds-row { cursor: default; }
.adm-attn .ds-row:hover { background: transparent; }
.adm-attn .ds-row-title { white-space: normal; overflow: visible; font-weight: var(--weight-semi); }
.adm-attn .ds-row-end { white-space: normal; flex-wrap: wrap; justify-content: flex-end; }

/* Inline confirm / inline form: sits where the button was, never a dialog. */
.adm-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }
.adm-confirm > span { flex: 1 1 auto; min-width: 0; }
.adm-panel { padding: var(--space-4); border: 1px solid var(--hairline-strong); border-radius: var(--radius-md); background: rgba(var(--ink), 0.03); }
.adm-panel > * + * { margin-top: var(--space-3); }

/* Form grid: one column on a phone, two from 640. */
.adm-form-grid { display: grid; gap: 0 var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .adm-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.adm-form-grid .adm-wide { grid-column: 1 / -1; }
.adm-form-section { margin-top: var(--space-6); }
.adm-form-section:first-of-type { margin-top: 0; }
.adm-req { color: var(--text-subtle); font-weight: var(--weight-normal); }
.adm-input-row { display: flex; gap: var(--space-2); align-items: stretch; }
.adm-input-row > .ds-input, .adm-input-row > .ds-select { flex: 1 1 auto; min-width: 0; }
.adm-input-row > .ds-btn { flex: none; }

/* Field-level note under an input (CAM preview, total area). */
.adm-note { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* Result line for a count under a toolbar: "3 of 14 tenants". */
.adm-count { margin: 0 0 var(--space-2); font-size: var(--text-xs); color: var(--text-subtle); font-variant-numeric: tabular-nums; }

/* Select that stands on its own in a toolbar and in forms: the native select with the chevron. */
.adm-select { min-width: 0; max-width: 100%; }

/* Plain button-link in prose or a row. */
.adm-linkbtn { min-height: var(--tap-min); display: inline-flex; align-items: center; }
@media (pointer: fine) { .adm-linkbtn { min-height: var(--control-h-sm); } }

/* Document row in a list: name + meta on the left, actions on the right. */
.adm-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--hairline); }
.adm-doc:last-child { border-bottom: 0; }
.adm-doc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-2); }
.adm-doc .adm-confirm { grid-column: 1 / -1; padding-top: var(--space-1); }

/* The two columns of a form + recent list. */
.adm-split { display: grid; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1024px) { .adm-split { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); gap: var(--space-7); } }

/* Success note after a create: one line, a link to the new record. */
.adm-done { margin-bottom: var(--space-4); }

/* Skeleton shaped like a stat row of five. */
.adm-skel-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); padding: var(--space-3) 0; }
@media (min-width: 768px) { .adm-skel-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* Money and dates in a key/value row never wrap. */
.ds-kvl dd .adm-money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.adm-money { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* A status word inside a phone meta line sits a space off the separator. */
@media (max-width: 767px) { .ds-table-data td[data-phone="meta"] .ds-status { margin-left: var(--space-1); } }

/* A cell that exists only for the phone's stacked row (a state word that desktop shows as a number column). */
.adm-phone-only { display: none; }
@media (max-width: 767px) { .ds-table-data td.adm-phone-only[data-phone="meta"] { display: inline; } }

/* Forms: a readable measure, left-aligned with the page title (not a centred column). */
.adm-read { max-width: var(--frame-read); }

/* Total rows keep the body size: one more type size on the page is not worth a 1px emphasis. */
.adm-table .ds-table-data tr.ds-total .ds-num, .ds-table-data tr.ds-total .ds-num { font-size: var(--text-base); }

/* Phone rows join their meta cells with a middle dot; an empty cell (no suite, no property) must not leave a leading or doubled dot:
   a dot goes only between two non-empty meta cells. */
@media (max-width: 767px) {
  .ds-table-data td[data-phone="meta"]:empty { display: none; }
  .ds-table-data td[data-phone="meta"] + td[data-phone="meta"]::before { content: none; }
  .ds-table-data td[data-phone="meta"]:not(:empty) ~ td[data-phone="meta"]:not(:empty)::before { content: " · "; }
}