/* The Administration page, as the reference build's Workspace page: a row of tabs under the heading, the open one with a green
   underline, and its panel below. Tokens only. The tab buttons are prefixed with .mb3, because ".mb3 button" in shell.css would
   otherwise strip them. The toolbar, table, chips and empty states come from the shared stylesheets. */

.adm-tabs { display: flex; flex-wrap: wrap; gap: 3px; margin-bottom: 16px; border-bottom: 1px solid var(--rule); }
.mb3 .adm-tabs button {
  margin-bottom: -1px;
  padding: 9px 13px;
  border-radius: 5px 5px 0 0;
  border-bottom: 2px solid transparent;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.mb3 .adm-tabs button[aria-selected="true"] { background: var(--card); color: var(--text); border-bottom-color: var(--green); }
.adm-panel:focus-visible { outline-offset: 4px; }

.adm-info { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 13px; padding: 12px 15px; font-size: 12.5px; line-height: 1.55; color: var(--body); }
.adm-info .icon { flex-shrink: 0; margin-top: 2px; color: var(--muted); }

.adm-day { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.adm-loading { margin: 0; padding: 40px 20px; text-align: center; font-size: 13px; color: var(--muted); }

.adm-log td { font-size: 12.5px; }
.adm-when { white-space: nowrap; font-size: 11.5px; color: var(--muted); }
.adm-system { font-style: italic; color: var(--muted); }
.adm-detail { color: var(--body); overflow-wrap: anywhere; }

.adm-more { display: flex; justify-content: center; margin-top: 12px; }
.adm-end { font-size: 12px; color: var(--muted); }

/* The Export button sits at the end of the filters, with its list of formats under it (the account menu's look, overlay.css). */
.adm-export { margin-left: auto; }

/* Needs attention: a summary line, then a card for each problem with its fix beside it. */
.adm-summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 18px; margin-bottom: 13px; font-size: 13px; color: var(--muted); }
.adm-summary strong { color: var(--text); }
.adm-summary__warn { color: var(--risk-h); font-weight: 600; }

.adm-issue { margin-bottom: 12px; padding: 14px 16px; border-left: 3px solid var(--rule-strong); }
.adm-issue--alert { border-left-color: var(--risk-h); }
.adm-issue--warn { border-left-color: var(--risk-m); }
.adm-issue__head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.adm-issue__head h2 { margin: 0; font-size: 14px; color: var(--navy); }
.adm-issue__intro { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

.adm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 13px; }
.adm-issue__head + .adm-row, .adm-issue__intro + .adm-row { border-top: 0; }
.adm-row__what { flex: 1 1 260px; min-width: 0; overflow-wrap: anywhere; }
.adm-row__sub { margin-top: 2px; font-size: 12px; color: var(--muted); }
.adm-row__do { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.adm-more-btn { margin-top: 8px; }

/* People & access: the table of people, with what can be done to each one's access at the end of its row. */
.adm-access td { vertical-align: top; font-size: 12.5px; }
.adm-inactive td, .adm-inactive strong { color: var(--muted); }
.adm-you { margin-left: 6px; }
.adm-signin { white-space: nowrap; }
.adm-actions .adm-row__do { justify-content: flex-end; }
.adm-access th:last-child { text-align: right; }
.adm-hint { margin: 10px 2px 0; font-size: 12px; color: var(--muted); }
/* People & access: invitations pending above the people who have joined, each under its own heading. */
.adm-access__section + .adm-access__section { margin-top: 18px; }
.adm-access__h { margin: 0 0 8px; font-size: 14px; color: var(--navy); }
.adm-access__n { font-weight: 500; color: var(--muted); }
.adm-access__hint { margin: -4px 2px 8px; }

/* Email: the verdict is a card like the Needs attention ones, with four figures under it and the test email's result below. */
.adm-issue--ok { border-left-color: var(--success); }
.adm-issue--note { border-left-color: var(--rule-strong); }
.adm-issue__head .icon { flex-shrink: 0; color: var(--muted); }
.adm-mail__error { margin: 0 0 10px; font-size: 12.5px; color: var(--risk-h); overflow-wrap: anywhere; }
.adm-mail__error span { font-family: var(--data); }
.adm-figures { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--rule); }
.adm-figure__v { font-size: 18px; font-weight: 700; color: var(--text); }
.adm-figure__v--bad { color: var(--risk-h); }
.adm-figure__l { margin-top: 2px; font-size: 11.5px; color: var(--muted); }
.adm-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.adm-test p { display: flex; align-items: flex-start; gap: 7px; margin: 12px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--body); }
.adm-test .icon { flex-shrink: 0; margin-top: 2px; }
.adm-test__sent .icon { color: var(--success); }
.adm-test__failed, .adm-test__stalled { color: var(--risk-h); }
@media (max-width: 700px) { .adm-figures { grid-template-columns: repeat(2, 1fr); } }

/* Privacy: find a person, then export or erase them; the retention periods under it. */
.adm-priv__results { margin-bottom: 12px; }
.adm-priv__list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
/* Prefixed with .mb3, as the tabs are, because ".mb3 button" in shell.css would otherwise win. */
.mb3 .adm-priv__pick { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 9px 12px; border: 1px solid var(--rule); border-radius: 5px; background: var(--card); color: var(--text); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
.mb3 .adm-priv__pick:hover { border-color: var(--rule-strong); }
.mb3 .adm-priv__pick[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--navy); }
.adm-priv__do { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.adm-priv__found { margin-top: 12px; font-size: 13px; line-height: 1.5; }
.adm-priv__found p { margin: 0 0 6px; }
.adm-priv__found ul { margin: 0 0 8px; padding-left: 18px; }
.adm-priv__periods td { vertical-align: top; font-size: 12.5px; }

/* Pipeline rules: the preview with Save on top, then a card for each part, with inputs in the tables' cells. */
.adm-rules__bar { position: sticky; top: 0; z-index: 2; }
.adm-rules__preview, .adm-rules__problems { font-size: 13px; line-height: 1.5; }
.adm-rules__preview ul, .adm-rules__problems ul { margin: 4px 0 6px; padding-left: 18px; }
.adm-rules__problems { color: var(--risk-h); }
.adm-rules__do { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.adm-rules__card { margin-top: 12px; padding: 16px; }
.adm-rules__h { margin: 0 0 12px; font-size: 14px; color: var(--navy); }
.adm-rules__table td { vertical-align: middle; padding-top: 6px; padding-bottom: 6px; }
.adm-rules__order { white-space: nowrap; }
.adm-rules__num { width: 90px; }
.adm-rules__colour { width: 40px; height: 32px; padding: 2px; border: 1px solid var(--rule); border-radius: 5px; background: var(--card); cursor: pointer; }
.adm-rules__days { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 700px) { .adm-rules__days { grid-template-columns: 1fr; } }

/* Firm: the name and the top bar's words beside the logo, then a preview of the top bar as it will look. */
.adm-firm { display: grid; grid-template-columns: 3fr 2fr; gap: 12px; align-items: start; }
.adm-firm__form { padding: 16px; }
.adm-firm__h { margin: 0 0 12px; font-size: 14px; color: var(--navy); }
.adm-firm__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.adm-firm__logo { display: flex; align-items: center; justify-content: center; width: 150px; height: 64px; padding: 8px; border: 1px solid var(--rule); border-radius: 5px; background: var(--navy); }
.adm-firm__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.adm-firm__preview { margin-top: 12px; padding: 16px; }
.adm-firm__bar { display: flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 5px; background: var(--navy); color: var(--on-navy); }
.adm-firm__bar b { display: block; font-family: var(--display); font-size: 14px; line-height: 1.15; }
.adm-firm__bar small { display: block; font-size: 10px; letter-spacing: .05em; color: var(--on-navy-3); }
@media (max-width: 1000px) { .adm-firm { grid-template-columns: 1fr; } }
/* Firm colours: the question after a logo is uploaded, the two colours side by side, and a button and a heading in the preview. */
.adm-firm__colours { margin-top: 12px; }
.adm-firm__ask { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--rule); border-left: 3px solid var(--green); border-radius: 5px; background: var(--tint); font-size: 13px; line-height: 1.5; }
.adm-firm__ask p { margin: 4px 0 8px; color: var(--body); }
.adm-firm__pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.adm-firm__swatch { display: flex; align-items: center; gap: 8px; }
.adm-firm__colour { flex-shrink: 0; width: 44px; height: 36px; padding: 2px; border: 1px solid var(--rule); border-radius: 5px; background: var(--card); cursor: pointer; }
.adm-firm__hex { width: 120px; font-family: var(--data); text-transform: uppercase; }
.adm-firm__notes { margin: 2px 0 10px; }
.adm-firm__notes:empty { display: none; }
.adm-firm__sample { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 12px; }
.adm-firm__sample .btn { pointer-events: none; }
.adm-firm__heading { font: 700 16px var(--display); color: var(--navy); }
@media (max-width: 700px) { .adm-firm__pair { grid-template-columns: 1fr; } }