/* Admin (managers only). Kept out of index.html's <style> so the page's own design can change freely;
   it only uses colors both versions of the page define. */

/* The top-bar link that opens Admin, set off from the email by a hairline. */
.admin-link { padding-right: 12px; border-right: 1px solid var(--rule); border-radius: 0; }
.admin-link[aria-current="page"] { color: var(--red); }
/* Phones: the top bar keeps Admin and Sign out; the email stays for screen readers only. */
@media (max-width: 560px) {
  .admin-link { padding-right: 0; border-right: 0; }
  .admin-link + .who { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #viewAdmin .admin-tabs button { padding: 0 8px; white-space: nowrap; }
}
.admin-top { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 16px; }
.admin-top h1 { margin: 0; }
.admin-top h1:focus { outline: none; }
.admin-back::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: 1px;
  border: solid currentColor; border-width: 0 0 2px 2px; transform: rotate(45deg);
}

#viewAdmin .admin-tabs { margin-bottom: 16px; }
#viewAdmin h2 { font-size: 18px; font-weight: 900; margin: 0; }
#viewAdmin .step > .hint { margin: -8px 0 12px; }
.admin-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }

.admin-form { border: 1px solid var(--rule); border-radius: 8px; padding: 16px; margin-bottom: 20px; background: #fff; }
.admin-form h3 { margin: 0 0 14px; font-size: 16px; font-weight: 900; }
.admin-form input[readonly] { background: transparent; color: var(--ink-2); }
.admin-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 16px; }

.admin-done { background: var(--good-bg); color: var(--good); border-radius: 6px; padding: 12px 14px; margin-bottom: 16px; }
.admin-done p { margin: 0 0 8px; overflow-wrap: anywhere; }
.admin-done p:last-child { margin-bottom: 0; }
.admin-done .link { font-weight: 700; }

.admin-table { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.admin-table th {
  text-align: left; font: 700 12px/1.2 var(--font-body); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-3); padding: 8px 12px 8px 0; border-bottom: 1px solid var(--rule);
}
.admin-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rule); vertical-align: top; overflow-wrap: break-word; }
.admin-table .nowrap { white-space: nowrap; }
.admin-table td small { display: block; color: var(--ink-3); font-size: 13px; }
.admin-table tr.off td { color: var(--ink-3); }
.admin-table .amount { text-align: right; white-space: nowrap; }
#viewAdmin .pill { margin-left: 0; white-space: nowrap; }
#viewAdmin .pill.warn { background: var(--warn-bg); color: var(--warn); }

.admin-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 12px; align-items: end; margin-bottom: 16px; }
.admin-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; flex-wrap: wrap; margin-top: 14px; color: var(--ink-3); }

#viewAdmin button:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

/* Phones: each table row becomes a small card, with the column name before each value. */
@media (max-width: 680px) {
  .admin-table thead { display: none; }
  .admin-table, .admin-table tbody, .admin-table tr, .admin-table td { display: block; }
  .admin-table tr { border-bottom: 1px solid var(--rule); padding: 10px 0; }
  .admin-table td { border: 0; padding: 3px 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; text-align: left; }
  .admin-table td::before { content: attr(data-label); font-size: 13px; font-weight: 700; color: var(--ink-3); }
  .admin-table td:has(> div:empty) { display: none; }
  .admin-table .amount { text-align: left; }
  #viewAdmin .pill { display: inline-block; white-space: normal; line-height: 1.4; }
}

/* Read by screen readers, not shown. */
.admin-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }