/* admin — Settings and the notifications inbox.
 *
 * Only what those two screens need. Everything structural (cards, fields,
 * tables, sheets, the section index itself) is the shared kit in
 * public/css/components.css; these are the arrangements that are particular to
 * a long settings page.
 */

/* ── the settings page ───────────────────────────────────────────────────── */

.settings-page { display: grid; gap: 16px; align-items: start; }
/* A grid item's default min-width is its content, so one wide table (Roles)
   would stretch the whole page and the index strip would push the document
   sideways instead of scrolling inside itself. Measured at 390px: the document
   was 669px wide before these two lines. */
.settings-page > * { min-width: 0; max-width: 100%; }
.settings-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.settings-cards > .card { min-width: 0; }
/* A .visually-hidden cell (position:absolute) inside a scrolling .t-wrap has no
   positioned ancestor, so its containing block is the page, not the scroller:
   the Roles matrix's "Allowed" spans sat at x≈600 and widened the document by
   214px at 390 wide even though the table itself was clipped. Measured. One
   relative parent puts them back inside the scroller.
   (The same is true of every .t-wrap in the app — study/requests/admin.md.) */
.settings-cards .t-wrap { position: relative; }
/* An anchor must not land under the sticky top bar. */
.settings-cards > .card { scroll-margin-top: 84px; }

@media (min-width: 1181px) {
  .settings-page { grid-template-columns: 190px minmax(0, 1fr); }
}
/* Below the two-column width the index is a row of chips, and a chip is a touch
   target: 44px tall, scrolling sideways rather than wrapping into a wall. */
@media (max-width: 1180px) {
  /* The chip strip has its own sticky rule in components.css's <=920 block;
     between 921 and 1180 it is a plain row that scrolls with the page. */
  .settings-page > .sec-index-w { position: static; }
  .settings-page .sec-index {
    position: static; flex-direction: row; gap: 6px;
    overflow-x: auto; padding-bottom: 4px; scrollbar-width: none;
  }
  .settings-page .sec-index::-webkit-scrollbar { display: none; }
  .settings-page .sec-index a {
    white-space: nowrap; display: flex; align-items: center; min-height: 44px;
    border: 1px solid var(--hair); border-radius: 22px; padding: 0 14px;
  }
}

/* One sentence of purpose under a card's title. */
.card-lede {
  margin: 0; padding: 10px 16px 0; max-width: 68ch;
  font-size: 12.5px; color: var(--ink-3);
}

/* The foot of an editable card: what happened last on the left, Save on the right. */
.set-foot { justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.set-note { min-width: 0; flex: 1 1 220px; }
.set-foot .btn { flex: none; }

.sub-h {
  margin: 0 0 4px; font: 500 12.5px/1.3 var(--ui); color: var(--ink);
}
.card-body > .sub-h + .hint { display: block; margin-bottom: 10px; max-width: 68ch; }
.alerts-body { padding-top: 4px; }
.prealert { min-width: 0; }
.prealert .hint { display: block; margin-top: 4px; }

.row-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* Two identifiers the bank prints in capitals. The column keeps what was typed. */
input[name="ach_company_name"], input[name="entry_description"] { text-transform: uppercase; }

/* ── company holidays ────────────────────────────────────────────────────── */

.chips { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px;
  padding: 4px 4px 4px 12px; border: 1px solid var(--hair); border-radius: 18px;
  background: var(--surface-2); font-size: 12.5px;
}
.chip .mut { font-size: 11.5px; }
.chip-x { display: inline-flex; }
.add-holiday { display: flex; align-items: flex-end; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.add-holiday .field { flex: 1 1 220px; margin: 0; }
@media (max-width: 600px) {
  .add-holiday .btn { min-height: 44px; }
  .chip { min-height: 44px; border-radius: 24px; }
}

/* ── two-step verification ───────────────────────────────────────────────── */

.otp-key {
  display: flex; align-items: center; gap: 8px; margin: 8px 0 14px;
  padding: 10px 12px; border: 1px solid var(--hair); border-radius: var(--r-c);
  background: var(--surface-2);
}
.otp-key code { font-size: 13px; letter-spacing: .04em; word-break: break-all; min-width: 0; }
.otp-key .otp-uri { font-size: 11.5px; letter-spacing: 0; }
.otp-confirm { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.otp-confirm .field { flex: 0 1 220px; margin: 0; }
#two-step .banner { margin-top: 14px; }
#two-step .card-head .st { margin-left: auto; }

/* A secret this page will not be able to show again. */
.secret-card { border-color: var(--navy, #1C3D5A); }
.secret-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.secret-list li {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 6px 6px 12px; border: 1px solid var(--hair); border-radius: var(--r-c);
  background: var(--surface-2);
}
.secret-list code { font-size: 14px; letter-spacing: .06em; }
.secret-card .hint { display: block; margin-top: 12px; max-width: 68ch; }

/* ── roles ───────────────────────────────────────────────────────────────── */

.roles-t td { text-align: center; }
.roles-t th.sel, .roles-t td.sel { background: var(--navy-tint); }
.roles-t thead th:not(:first-child) { text-align: center; }
.role-what { margin: 12px 0 0; display: grid; gap: 8px; font-size: 12.5px; }
.role-what div { display: grid; grid-template-columns: minmax(90px, 130px) minmax(0, 1fr); gap: 10px; }
.role-what dt { color: var(--ink-2); }
.role-what dd { margin: 0; color: var(--ink-3); }

/* ── the notifications inbox ─────────────────────────────────────────────── */

.feed-body { padding-top: 6px; }
.feed-h {
  margin: 14px 0 6px; display: flex; align-items: center; gap: 8px;
  /* Sentence case at source: see the note in public/css/shell.css. */
  font: 500 12px/1.3 var(--ui); letter-spacing: 0;
  color: var(--ink-3);
}
.feed-body > .feed-h:first-child { margin-top: 0; }
.feed-h .n {
  font-size: 11px; letter-spacing: 0; text-transform: none;
  padding: 1px 7px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--hair);
}