/* TRELLAN: the admin screens. Report 258; the screens, report 262.

   Page-specific rules for this area only, after trellan.css and
   trellan-shell.css. Scope every rule to the page (its own class or
   `.t-<kind>` wrapper); do not restyle shared components here.
   See planning/trellan-screen-guide.md.

   The pages: `.tra-page` (the older admin pages written on `.ui-page-head`
   and `.panel`: Admin, Users, Calendar, Invite a broker, Issue a reset
   link), `.fb-admin` (Feedback), `.fb-admin-thread` (one note) and
   `.outbox-page` (Outbox). Boards: the "admin" list in
   design/trellan-canvas/qa/by-page.json. */

/* ── 1. The head: the light caps title, a Leaf back link ────────────── */
.tra-page .ui-page-head { max-width: 1120px; margin: 0 auto 24px; width: 100%; box-sizing: border-box; }
.tra-page .ui-page-head h1 { font-weight: 300; font-size: 32px; letter-spacing: 2px; }
.tra-page .ui-page-head__sub { font-size: 15px; color: var(--gray); max-width: none; margin-top: 6px; }
.tra-page .ui-back { margin-bottom: 8px; } /* the look: trellan.css 6.2 */
.tra-page > :not(.ui-page-head) { max-width: 1120px; margin-inline: auto; width: 100%; box-sizing: border-box; }

/* `.panel` is a dialog's class in trellan.css (it gets the menu shadow);
   on these pages it is a card. */
.tra-page .panel { box-shadow: none; border: 1px solid var(--hairline); background: #FFFFFF; padding: 24px; margin-bottom: 24px; }
.tra-page .panel > h3, .tra-page .panel h3 {
  margin: 0 0 18px; font-family: var(--font-display); font-weight: 300; font-size: 20px;
  letter-spacing: 1.8px; text-transform: uppercase; color: var(--ink);
}
.tra-page .panel h4 {
  margin: 22px 0 10px; font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--ink);
}
.tra-page .auth-label {
  display: block; margin: 14px 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2.4px; text-transform: uppercase; color: var(--gray);
}
.tra-page .panel input:not([type="checkbox"]):not([type="hidden"]),
.tra-page .panel select, .tra-page .panel textarea { width: 100%; }
.tra-page .field-hint, .tra-page .field-note { font-size: 13px; color: var(--gray); max-width: none; margin: 6px 0 0; }
.tra-page .panel > .ui-btn, .tra-page .panel > p > .ui-btn { margin-top: 18px; width: auto; }
.tra-page code { font-family: var(--font-sans); font-weight: 700; font-size: 12px; color: var(--ink); }

/* The tables on these pages: caps heads over an ink rule, no grey band
   (the board's table; `.rp` gave them the older look). */
.tra-page.ui-page .ui-table th {
  background: none; border-bottom: 1px solid var(--ink); padding-block: 10px;
  font-family: var(--font-display); font-weight: 500; font-size: 11px;
  letter-spacing: 2px; text-transform: uppercase; color: var(--gray);
}
.tra-page.ui-page .ui-table td { border-bottom: 1px solid var(--hairline); }
.tra-page .ui-table-wrap { border: 1px solid var(--hairline); }

/* The "new" form (a brokerage, an event): Mist, no border. */
.tra-page .panel.tra-new { background: var(--mist); border-color: var(--mist); }

/* ── 2. Admin home ──────────────────────────────────────────────────── */
.tra-home .ui-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.tra-home .ui-page-head__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tra-home.ui-page form.panel.tra-new {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; align-items: end;
}
.tra-home .tra-new > h3, .tra-home .tra-new > p, .tra-home .tra-new > input[type="hidden"] { grid-column: 1 / -1; }
.tra-home .tra-new > .ui-btn { grid-column: 1 / -1; justify-self: start; }
.tra-home .tra-new .auth-row { display: contents; }
.tra-home .tra-new .auth-row > div { min-width: 0; }

.tra-home .tra-firm__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.tra-home.ui-page p.tra-firm__slug { margin: 0 0 6px; font-family: var(--font-display); font-weight: 500; font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); }
.tra-home .tra-firm__name { margin: 0; font-size: 20px; letter-spacing: 1.8px; }
.tra-home .tra-firm__head .muted { margin: 6px 0 0; font-size: 13px; color: var(--gray); }
.tra-home .tra-firm__head + h4 { border-top: 1px solid var(--hairline); padding-top: 18px; }
.tra-home .plain-list { list-style: none; margin: 0 0 12px; padding: 0; border-top: 1px solid var(--hairline); }
.tra-home .plain-list li { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--hairline); }
.tra-home .plain-list strong { color: var(--ink); font-weight: 600; }
.tra-home .inline-row { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; }
.tra-home .inline-row input[type="text"], .tra-home .inline-row input[type="email"] { flex: 1 1 0; min-width: 0; height: 44px; }
.tra-home .inline-row .inline-check, .tra-home .ui-table .inline-check {
  display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--charcoal); white-space: nowrap;
}
.tra-home input[type="checkbox"], .tra-users input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--leaf); }
.tra-home .inline-row .ui-btn { flex: none; min-height: 44px; }
.tra-home .ui-table { margin: 0; }
.tra-home .ui-table td, .tra-home .ui-table th { padding-block: 8px; }
.tra-home .ui-table .ui-btn--danger { padding: 0; min-height: 0; height: auto; font-size: 11px; }
.tra-home .tra-members:not(:target) .tra-more { display: none; }
.tra-home .tra-showall { display: inline-block; margin-top: 10px; font-size: 13px; }
.tra-home .tra-members:target + .tra-showall { display: none; }

/* ── 3. Users ───────────────────────────────────────────────────────── */
.tra-users .ui-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.tra-users .ui-table td:first-child { color: var(--ink); }

/* ── 4. Calendar ────────────────────────────────────────────────────── */
.tra-cal.ui-page form.panel.tra-new { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.tra-cal .tra-new > * { grid-column: 1 / -1; min-width: 0; }
.tra-cal .tra-new .auth-row { display: contents; }
.tra-cal .tra-new .auth-row > div { grid-column: auto; min-width: 0; }
.tra-cal .tra-new > label[for="timezone"] { grid-column: 3; grid-row: 4; align-self: start; }
.tra-cal .tra-new > #timezone { grid-column: 3; grid-row: 4; align-self: end; }
.tra-cal .tra-new > .ui-btn { justify-self: start; }
.tra-cal.ui-page .panel.tra-sched { border: 0; padding: 0; background: none; box-shadow: none; }
.tra-cal .tra-sched__head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 8px 0 12px; }
.tra-cal.ui-page .tra-sched__head h3 { margin: 0 auto 0 0; font-size: 20px; letter-spacing: 1.8px; }
.tra-cal .tra-sched__head .tra-count { margin: 0; font-size: 13px; color: var(--gray); }
.tra-cal .tra-sched__head .field-note { margin: 0; }
.tra-cal .tra-sched .ui-table strong { color: var(--ink); font-weight: 600; }
.tra-cal .tra-sched .ui-table .muted { font-size: 13px; color: var(--gray); }
.tra-cal .tra-sched .ui-table td.mono { white-space: nowrap; font-family: var(--font-sans); }
.tra-cal .ui-table .ui-btn--danger { padding: 0; min-height: 0; height: auto; font-size: 11px; }

/* ── 5. Invite a broker, a reset link: a 760 column ─────────────────── */
.tra-form.tra-page > *, .tra-form.tra-page .ui-page-head { max-width: 760px; margin-inline: auto; width: 100%; box-sizing: border-box; }
.tra-form .panel--ok { background: var(--ok-bg); border-color: var(--ok-line); }
.tra-form .copy-field { width: 100%; height: 44px; }

/* ── 6. Feedback ────────────────────────────────────────────────────── */
.fb-admin > *, .fb-admin-thread > *, .outbox-page > * { max-width: 1120px; margin-inline: auto; width: 100%; box-sizing: border-box; }
.fb-admin .fb-waiting {
  border: 0; border-left: 3px solid var(--alert-dot); background: var(--alert-bg); padding: 18px 20px;
}
.fb-admin .fb-waiting__title {
  font-family: var(--font-display); font-weight: 500; font-size: 13px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--alert-fg); margin: 0 0 10px;
}
.fb-admin .fb-waiting__list { margin: 0; padding-left: 20px; color: var(--alert-fg); }
.fb-admin .fb-waiting__list li { margin: 4px 0; }
.fb-admin .fb-waiting__meta { font-size: 13px; color: var(--charcoal); }
.fb-admin .of-pill--new, .fb-admin-thread .of-pill--new {
  background: var(--new-bg); color: var(--new-fg); --pill-dot: var(--new-dot);
}

/* One note. Decision 3: the person's message white with a hairline, on
   the left; the Adealia team's charcoal with white words, on the right. */
.fb-admin-thread .fb-msg--admin { background: var(--charcoal); color: #FFFFFF; border: 0; }
.fb-admin-thread .fb-msg--user { background: #FFFFFF; border: 1px solid var(--hairline); }
.fb-admin-thread .fb-msg__who { font-weight: 400; font-size: 12px; opacity: 1; color: var(--gray); }
.fb-admin-thread .fb-msg--admin .fb-msg__who { color: #D9D9D7; }
.fb-admin-thread .fb-reply { border-top: 1px solid var(--hairline); padding-top: 18px; }
.fb-admin-thread .fb-reply__bar { display: flex; justify-content: flex-end; margin: 0; }
.fb-admin-thread .fb-triage .fb-reply__bar { justify-content: flex-start; }
.fb-admin-thread .of-detail__aside .of-section { padding: 20px; }
.fb-admin-thread .fb-inline { margin: 12px 0 0; }
.fb-admin-thread .fb-names { margin-top: 14px; }
.fb-admin-thread .fb-names > summary { color: var(--leaf); cursor: pointer; font-size: 14px; }
.fb-admin-thread .of-head { align-items: flex-start; }

@media (max-width: 759.98px) {
  .tra-page .panel { padding: 16px; }
  .tra-page .ui-page-head h1 { font-size: 26px; }
  .tra-home.ui-page form.panel.tra-new, .tra-cal.ui-page form.panel.tra-new { grid-template-columns: minmax(0, 1fr); }
  .tra-cal .tra-new > label[for="timezone"], .tra-cal .tra-new > #timezone { grid-column: 1; grid-row: auto; }
  .tra-page .panel > .ui-btn, .tra-home .tra-new > .ui-btn { width: 100%; justify-content: center; justify-self: stretch; }
  .tra-home .tra-firm__head { flex-direction: column; }
  .tra-home .inline-row { flex-wrap: wrap; }
  .tra-home .inline-row input[type="text"], .tra-home .inline-row input[type="email"] { flex: 1 1 100%; }
  .tra-users .ui-page-head, .tra-home .ui-page-head { flex-direction: column; align-items: stretch; }
  .fb-admin-thread .fb-reply__bar .ui-btn { width: 100%; justify-content: center; }
  .tra-home .ui-page-head__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  /* Users on a phone: a two-line row per account (the board), not a card
     of six labelled lines: the name, the email, then the firm and the
     last login. Upload and Admin keep their caption. */
  .tra-users .ui-page-head__actions { width: 100%; display: flex; }
  .tra-users .ui-page-head__actions .ui-btn { width: 100%; justify-content: center; }
  .tra-users.ui-page .ui-table-wrap, .tra-users.ui-page .ui-table { border: 0; border-top: 1px solid var(--ink); box-shadow: none; }
  .tra-users.ui-page .ui-table tbody tr {
    display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 12px 0; margin: 0;
    border: 0; border-bottom: 1px solid var(--hairline); background: none; box-shadow: none;
  }
  .tra-users.ui-page .ui-table tbody td {
    display: inline; width: auto; min-width: 0; padding: 0; border: 0; font-size: 13px; color: var(--gray); text-align: left;
  }
  .tra-users.ui-page .ui-table tbody td::before { display: none; }
  .tra-users.ui-page .ui-table tbody td:nth-child(2) { order: -2; flex: 1 1 100%; font-size: 15px; font-weight: 600; color: var(--ink); }
  .tra-users.ui-page .ui-table tbody td:nth-child(1) { order: -1; flex: 1 1 100%; font-size: 14px; color: var(--leaf); }
  .tra-users.ui-page .ui-table tbody td:nth-child(4)::before,
  .tra-users.ui-page .ui-table tbody td:nth-child(5)::before,
  .tra-users.ui-page .ui-table tbody td:nth-child(6)::before {
    display: inline; content: attr(data-label) " "; position: static; font: inherit; letter-spacing: 0;
    text-transform: none; color: var(--gray);
  }
  .tra-home .ui-page-head__actions .ui-btn { justify-content: center; }
  .tra-home.ui-page .panel { padding: 16px; }
  /* One note on a phone, in the board's order: where it came from, the
     conversation, the AI triage, then the triage form. The aside's two
     parts join the column (`display: contents`) so each can be placed. */
  .fb-admin-thread .of-detail { display: flex; flex-direction: column; gap: 16px; }
  .fb-admin-thread .of-detail__aside { display: contents; }
  .fb-admin-thread .of-detail__aside > .of-facts { order: 0; align-self: stretch; width: 100%; box-sizing: border-box; }
  .fb-admin-thread .of-detail__main { order: 1; }
  .fb-admin-thread .of-detail__aside > :not(.of-facts) { order: 2; align-self: stretch; width: 100%; box-sizing: border-box; }
}