/* Portal styles.

   Deliberately not a copy of Redstone.Web's app.css. That file carries a global `max-width: 25ch` cap
   on every Telerik input — a rule the staff screens are built around and every new one has to work
   against. The portal has a handful of forms and no reason to inherit that fight, so its inputs size
   themselves and the widths here are stated once. */

:root {
    --portal-bg: #f4f5f7;
    --portal-surface: #ffffff;
    --portal-border: #dfe1e6;
    --portal-text: #172b4d;
    --portal-muted: #5e6c84;
    --portal-brand: #8b1a1a;
    --portal-error: #b3261e;
    --portal-warning: #a05a00;
    --portal-success: #1e6b3a;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    color: var(--portal-text);
    background: var(--portal-bg);
}

h1 {
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 16px;
}

h2 {
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0 0 12px;
}

a {
    color: var(--portal-brand);
}

/* ── shell ────────────────────────────────────────────────────────────────────────────────────── */

.portal-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.portal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 10px 20px;
    background: var(--portal-surface);
    border-bottom: 1px solid var(--portal-border);
}

.portal-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.portal-brand,
.portal-auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.portal-brand-mark {
    height: 32px;
    width: auto;
}

.portal-brand-name {
    font-size: 1.0625rem;
    font-weight: 500;
}

.portal-profile-button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.portal-main {
    flex: 1;
    display: flex;
}

.portal-content {
    flex: 1;
    min-width: 0;
}

.portal-footer {
    padding: 12px 20px;
    color: var(--portal-muted);
    font-size: 0.8125rem;
    border-top: 1px solid var(--portal-border);
    background: var(--portal-surface);
}

.portal-page {
    padding: 24px;
    max-width: 1200px;
}

.portal-page-narrow {
    max-width: 520px;
}

.portal-centered {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 0;
}

/* ── workspace switcher ───────────────────────────────────────────────────────────────────────── */

.portal-workspace-option {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.portal-workspace-name {
    font-weight: 500;
}

.portal-workspace-level {
    font-size: 0.75rem;
    color: var(--portal-muted);
}

/* ── auth pages ───────────────────────────────────────────────────────────────────────────────── */

.portal-auth-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
    gap: 16px;
}

.portal-auth-card {
    width: 100%;
    max-width: 420px;
    padding: 28px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(9, 30, 66, 0.12);
}

.portal-auth-brand {
    margin-bottom: 20px;
}

.portal-auth-title {
    font-size: 1.25rem;
}

.portal-auth-intro {
    color: var(--portal-muted);
    margin: 0 0 20px;
    line-height: 1.45;
}

.portal-auth-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Telerik's floating-label container is inline-flex by default, so it will not fill the card unless
   both it and the input inside it are told to. */
.portal-field .k-floating-label-container,
.portal-field .k-textbox,
.portal-field .k-input {
    width: 100%;
}

.portal-submit {
    width: 100%;
}

.portal-auth-links {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-top: 4px;
    font-size: 0.875rem;
}

.portal-auth-footer {
    color: var(--portal-muted);
    font-size: 0.8125rem;
}

.portal-terms {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
}

/* ── password rules ───────────────────────────────────────────────────────────────────────────── */

.portal-password-rules {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8125rem;
}

.portal-password-rules li {
    display: flex;
    align-items: center;
    gap: 8px;
}

.portal-rule-met {
    color: var(--portal-success);
}

.portal-rule-unmet {
    color: var(--portal-muted);
}

/* ── notices ──────────────────────────────────────────────────────────────────────────────────── */

.portal-notice {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 4px;
    font-size: 0.875rem;
    line-height: 1.4;
    border: 1px solid transparent;
}

.portal-notice-error {
    color: var(--portal-error);
    background: #fdeceb;
    border-color: #f5c2c0;
}

.portal-notice-warning {
    color: var(--portal-warning);
    background: #fff4e5;
    border-color: #f3d9ac;
}

.portal-notice-success {
    color: var(--portal-success);
    background: #e9f6ed;
    border-color: #b7dfc4;
}

.portal-notice-info {
    color: var(--portal-muted);
    background: #eef2f7;
    border-color: #d3dce6;
}

/* ── cards and stat tiles ─────────────────────────────────────────────────────────────────────── */

.portal-card {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 20px;
}

.portal-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.portal-detail-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 6px 20px;
    margin: 0;
}

.portal-detail-list dt {
    color: var(--portal-muted);
    font-size: 0.8125rem;
}

.portal-detail-list dd {
    margin: 0;
}

.portal-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.portal-tile {
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: 8px;
    padding: 16px 20px;
}

.portal-tile-label {
    color: var(--portal-muted);
    font-size: 0.8125rem;
    margin-bottom: 6px;
}

.portal-tile-value {
    font-size: 1.5rem;
    font-weight: 500;
}

.portal-tile-value-alert {
    color: var(--portal-error);
}

.portal-empty {
    color: var(--portal-muted);
    font-size: 0.875rem;
    padding: 8px 0;
}

/* Wide content scrolls inside its own container rather than making the page scroll sideways. */
.portal-scroll-x {
    overflow-x: auto;
}

/* ── external providers ───────────────────────────────────────────────────────────────────────── */

/* A rule with the word "or" sitting in the middle of it, separating the password form from the
   provider buttons. */
.portal-auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--portal-muted);
    font-size: 0.8125rem;
}

.portal-auth-divider::before,
.portal-auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--portal-border);
}

/* An anchor rather than a button, because starting an OIDC flow needs a real navigation — so it is
   styled to match the Telerik buttons around it. */
.portal-provider-button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--portal-border);
    border-radius: 4px;
    background: var(--portal-surface);
    color: var(--portal-text);
    text-align: center;
    text-decoration: none;
    font-size: 0.9375rem;
}

.portal-provider-button:hover {
    background: var(--portal-bg);
}

.portal-connection-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.portal-connection {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--portal-border);
}

.portal-connection:last-child {
    border-bottom: none;
}

.portal-connection-name {
    font-weight: 500;
}

/* ── two-factor authentication ─────────────────────────────────────────────────────────────────── */

.portal-qr {
    display: flex;
    justify-content: center;
    padding: 8px 0 16px;
}

/* Monospaced and letter-spaced because this is read off a screen and typed into a phone, one character
   at a time. */
.portal-secret {
    font-family: Consolas, "Courier New", monospace;
    font-size: 1.0625rem;
    letter-spacing: 0.12em;
    word-break: break-all;
    padding: 8px 0;
}

.portal-recovery-codes {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 8px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 1rem;
    letter-spacing: 0.06em;
}

.portal-recovery-codes li {
    padding: 6px 10px;
    background: var(--portal-bg);
    border: 1px solid var(--portal-border);
    border-radius: 4px;
    text-align: center;
}

/* ── Support session banner ──────────────────────────────────────────────────────────────────────

   Shown only while a staff member is viewing the portal as a contact. Loud on purpose: the risk this
   guards against is a support agent forgetting whose account is on screen and reading somebody's
   balance to the wrong person on the phone. It is not dismissible, and it is the first thing in the
   document so a screen reader reaches it before the header. */
.portal-impersonation-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 20px;
    background: #8a2b06;
    color: #fff;
    font-size: 0.9375rem;
    line-height: 1.35;
    border-bottom: 2px solid #5c1d04;
}

.portal-impersonation-banner span {
    flex: 1;
}

/* Telerik's outline button inherits the page's text colour, which is invisible on this background. */
.portal-impersonation-banner .k-button {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.7);
    flex: 0 0 auto;
}

.portal-impersonation-banner .k-button:hover {
    background: rgba(255, 255, 255, 0.15);
}