/*
 * Innolink portal. Loaded AFTER admin.css, only on the portal itself (no client selected): sign-in,
 * step-up and the Innolink pages. A client's back office (/t/{tenant}) keeps its own theme and never
 * loads this file, so nothing here can reach it. Every rule is under body.portal.
 *
 * The visual language is the Deliverect restaurant dashboard's (frontend.deliverect.com, its v2
 * design tokens): a white app shell with an icon nav in groups, white cards with a hairline border on
 * a light grey canvas, a top bar with the account switcher and the user, compact tables with status
 * pills, the page's one action top-right of its title, filters above a table, an empty state in every
 * table. In Innolink's own identity: black on white, no brand colour, the Innolink mark.
 * Type: Nunito Sans (SIL OFL, self-hosted), the free face the Deliverect dashboard also loads.
 */

@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url(/fonts/nunito-sans/nunito-sans-latin-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Nunito Sans";
    font-style: normal;
    font-display: swap;
    font-weight: 200 1000;
    src: url(/fonts/nunito-sans/nunito-sans-latin-ext-wght-normal.woff2) format("woff2-variations");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ------------------------------------------------------------------ tokens */
body.portal {
    /* neutrals (Deliverect v2 greys) */
    --p-canvas: #F6F6F6;
    --p-surface: #FFFFFF;
    --p-hover: #F6F6F6;
    --p-selected: #EDEDED;
    --p-line: #EDEDED;
    --p-line-strong: #D4D4D4;
    --p-control: #BCBCBC;
    --p-text: #1C1C1C;
    --p-text-2: #5F5F5F;      /* 6.1:1 on white, 5.6:1 on the canvas */
    --p-ink: #1C1C1C;         /* Innolink's accent is black */
    --p-ink-pressed: #000000;
    /* status: text is the dark step of each scale, so every pill is AA on its own fill */
    --p-ok-bg: #E2F1EB;   --p-ok-fg: #025734;
    --p-warn-bg: #FFF6DD; --p-warn-fg: #664404; --p-warn-mark: #FFB905;
    --p-err-bg: #FFE9E4;  --p-err-fg: #82301F;  --p-err-mark: #C5492E;
    --p-info-bg: #E6EEFF; --p-info-fg: #1D3972;
    --p-neutral-bg: #EDEDED; --p-neutral-fg: #3B3B3B;
    --p-radius-card: 8px;
    --p-radius-control: 6px;
    --p-shadow-pop: 0 1px 3px rgb(0 0 0 / .05), 0 10px 15px -5px rgb(0 0 0 / .08), 0 7px 7px -5px rgb(0 0 0 / .04);
    --p-font: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

    /* the shared tokens admin.css reads */
    --ui-primary: var(--p-ink);
    --ui-primary-text: var(--p-ink);
    --ui-cta-bg: var(--p-ink);
    --ui-cta-bg-pressed: var(--p-ink-pressed);
    --ui-cta-text: #FFFFFF;
    --ui-text-link: var(--p-ink);
    --ui-text-secondary: var(--p-text-2);
    --ui-focus: var(--p-ink);
    --ui-control-line: var(--p-control);
    --ui-font-display: var(--p-font);
    --ui-font-heading: var(--p-font);
    --ui-font-body: var(--p-font);

    background: var(--p-canvas);
    color: var(--p-text);
    font-family: var(--p-font);
    font-size: 14px;
    line-height: 20px;
    -webkit-font-smoothing: antialiased;
}
body.portal strong, body.portal b { font-weight: 700; color: var(--p-text); }
body.portal a { color: var(--p-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.portal :focus-visible { outline: 2px solid var(--p-ink); outline-offset: 2px; }
body.portal code, body.portal pre, body.portal .mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px;
}
body.portal code { padding: 1px 4px; border-radius: 4px; background: var(--p-canvas); }

/* ------------------------------------------------------------------ shell: the sidebar */
body.portal .admin-shell { background: var(--p-canvas); }
@media (min-width: 900px) { body.portal .admin-shell { background: var(--p-surface); } }
body.portal .admin-side { background: var(--p-surface); color: var(--p-text); }
@media (min-width: 900px) { body.portal .portal-body { border-left: 1px solid var(--p-line); } }
@media (max-width: 899px) {
    body.portal .admin-side { border-right: 0; border-bottom: 1px solid var(--p-line); position: sticky; top: 0; z-index: 30; }
}
body.portal .admin-side :focus-visible { outline-color: var(--p-ink); }
body.portal .admin-bar { min-height: 56px; }
@media (min-width: 900px) { body.portal .admin-bar { min-height: 64px; padding: 0 var(--ui-space-5); } }
body.portal .admin-brand, body.portal .admin .admin-brand { color: var(--p-text); display: flex; align-items: center; gap: 10px; }
body.portal .admin-brand img { height: 24px; width: auto; filter: none; }
/* The wordmark: spaced capitals, as in the Innolink Capital logo. */
body.portal .admin-brand span {
    font-family: var(--p-font); font-style: normal; font-weight: 600; text-transform: uppercase;
    letter-spacing: .22em; font-size: 13px; line-height: 16px;
}
body.portal .admin-menu-button, body.portal .admin-menu-close,
body.portal.admin .admin-menu-button, body.portal.admin .admin-menu-close { color: var(--p-text); }
body.portal .admin-nav:target, body.portal .admin-nav.is-open { background: var(--p-surface); }
body.portal .admin-nav-head { border-bottom: 1px solid var(--p-line); }
@media (min-width: 900px) { body.portal .admin-nav { padding: var(--ui-space-2) 0 var(--ui-space-4); } }

body.portal .admin-nav-group { padding: var(--ui-space-2) var(--ui-space-3); border-top: 0; }
body.portal .admin-nav-group + .admin-nav-group { padding-top: var(--ui-space-3); }
/* Group names: sentence case, small, grey. The group is information, not decoration. */
body.portal .admin-nav-group h2 {
    padding: 0 var(--ui-space-3) var(--ui-space-1); font-family: var(--p-font);
    font-size: 12px; line-height: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--p-text-2);
}
body.portal .admin-nav-group a {
    justify-content: flex-start; gap: var(--ui-space-3); min-height: 44px; padding: 0 var(--ui-space-3);
    border-left: 0; border-radius: var(--p-radius-control); font-size: 14px; font-weight: 500;
}
body.portal.admin .admin-nav-group a { color: var(--p-text); }
body.portal.admin .admin-nav-group a:hover { color: var(--p-text); background: var(--p-hover); }
body.portal.admin .admin-nav-group a[aria-current="page"] { color: var(--p-text); background: var(--p-selected); font-weight: 700; border-left: 0; }
body.portal .admin-nav-group a .icon { flex: none; color: var(--p-text-2); }
body.portal .admin-nav-group a[aria-current="page"] .icon { color: var(--p-text); }

/* Who is signed in: at the foot of the phone menu; on a desktop it is the top bar's user menu. */
body.portal .admin-who { border-top: 1px solid var(--p-line); color: var(--p-text-2); padding: var(--ui-space-4) var(--ui-space-6); }
body.portal .admin-who a { color: var(--p-text); }
body.portal.admin .admin-who .btn { color: var(--p-text); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line-strong); }
body.portal.admin .admin-who .btn:hover { background: var(--p-hover); }
@media (min-width: 900px) { body.portal .admin-who { display: none; } }

/* ------------------------------------------------------------------ shell: the top bar */
body.portal .portal-body { min-width: 0; display: flex; flex-direction: column; background: var(--p-canvas); }
body.portal .portal-top { display: none; }
@media (min-width: 900px) {
    body.portal .portal-top {
        position: sticky; top: 0; z-index: 20;
        display: flex; align-items: center; justify-content: space-between; gap: var(--ui-space-4);
        min-height: 64px; padding: 0 var(--ui-space-6); background: var(--p-surface); border-bottom: 1px solid var(--p-line);
    }
}
/* A menu that opens on click, with JavaScript off too (<details>). */
body.portal .menu { position: relative; }
body.portal .menu > summary {
    list-style: none; display: inline-flex; align-items: center; gap: var(--ui-space-2);
    min-height: 44px; padding: 0 var(--ui-space-3); border-radius: var(--p-radius-control);
    cursor: pointer; color: var(--p-text); font-weight: 600;
}
body.portal .menu > summary::-webkit-details-marker { display: none; }
body.portal .menu > summary:hover { background: var(--p-hover); }
body.portal .menu > summary .icon { color: var(--p-text-2); }
body.portal .menu[open] > summary { background: var(--p-selected); }
body.portal .menu-pop {
    position: absolute; top: calc(100% + 4px); z-index: 50; min-width: 240px; max-height: 70vh; overflow-y: auto;
    padding: var(--ui-space-2); background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius-card);
    box-shadow: var(--p-shadow-pop);
}
body.portal .menu-pop.start { left: 0; }
body.portal .menu-pop.end { right: 0; }
body.portal .menu-pop ul { list-style: none; margin: 0; padding: 0; }
body.portal .menu-pop li a, body.portal .menu-pop li button {
    display: flex; align-items: center; gap: var(--ui-space-2); width: 100%; min-height: 44px; padding: 0 var(--ui-space-3);
    border: 0; border-radius: var(--p-radius-control); background: none; color: var(--p-text); text-decoration: none;
    font: inherit; font-size: 14px; text-align: left; cursor: pointer;
}
body.portal .menu-pop li a:hover, body.portal .menu-pop li button:hover { background: var(--p-hover); }
body.portal .menu-pop .menu-who { padding: var(--ui-space-2) var(--ui-space-3) var(--ui-space-3); margin-bottom: var(--ui-space-1); border-bottom: 1px solid var(--p-line); }
body.portal .menu-pop .menu-who, body.portal .menu-pop .menu-who p { display: block; margin: 0; white-space: normal; }
body.portal .menu-pop.end { min-width: 280px; }
body.portal .menu-pop hr { border: 0; border-top: 1px solid var(--p-line); margin: var(--ui-space-1) 0; }
body.portal .switch-label { color: var(--p-text-2); font-weight: 400; }

/* ------------------------------------------------------------------ the page */
body.portal .admin-main { padding: var(--ui-space-5) var(--ui-space-4) var(--ui-space-12); }
@media (min-width: 900px) { body.portal .admin-main { padding: var(--ui-space-8) var(--ui-space-8) var(--ui-space-16); } }
body.portal .admin-main > .admin-page { max-width: 1280px; }

body.portal h1, body.portal .admin-main h1 {
    font-family: var(--p-font); font-style: normal; font-weight: 700; text-transform: none; letter-spacing: 0;
    font-size: 24px; line-height: 32px; margin: 0 0 var(--ui-space-2); color: var(--p-text);
}
body.portal h1 small { font-size: 14px; font-weight: 400; color: var(--p-text-2); margin-left: var(--ui-space-2); }
body.portal .admin-main h2 {
    font-family: var(--p-font); font-weight: 700; font-size: 16px; line-height: 24px;
    margin: var(--ui-space-8) 0 var(--ui-space-3); padding: 0; border: 0; color: var(--p-text);
}
body.portal .admin-main h3 { font-weight: 700; font-size: 14px; line-height: 20px; margin: var(--ui-space-4) 0 var(--ui-space-2); }
body.portal .muted, body.portal.admin .muted { color: var(--p-text-2); }
body.portal .col > h2, body.portal .col > h3 { font-style: normal; font-weight: 700; text-transform: none; }

/* Title left, the page's one action right; the line under it says what the page is for. */
body.portal .page-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-3) var(--ui-space-4); margin: 0 0 var(--ui-space-6); }
body.portal .page-top h1 { margin: 0; }
body.portal .page-top .page-sub { margin: var(--ui-space-1) 0 0; max-width: 72ch; color: var(--p-text-2); }
body.portal .page-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); align-items: center; }

/* ------------------------------------------------------------------ cards */
body.portal .card, body.portal.admin .box {
    background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius-card); box-shadow: none;
    padding: var(--ui-space-5) var(--ui-space-6); margin: 0 0 var(--ui-space-4);
}
@media (max-width: 599px) { body.portal .card { padding: var(--ui-space-4); } }
body.portal .admin-main .card > h2:first-child, body.portal .admin-main .card-head h2 { margin: 0 0 var(--ui-space-1); font-size: 16px; }
body.portal .card-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-4); }
body.portal .card-head > div > p { margin: 0; }
body.portal .card > :last-child { margin-bottom: 0; }
body.portal .admin-main .card > h3:first-child, body.portal .admin-main .card-section > h3:first-child { margin-top: 0; }
body.portal .card.narrow { max-width: 720px; }
body.portal .card.alert { border-left: 4px solid var(--p-err-mark); }
body.portal .card-section { border-top: 1px solid var(--p-line); margin-top: var(--ui-space-4); padding-top: var(--ui-space-4); }

/* Label / value pairs (a detail, not a stat tile). */
body.portal dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--ui-space-2) var(--ui-space-6); margin: 0; }
body.portal dl.facts dt { color: var(--p-text-2); }
body.portal dl.facts dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 599px) { body.portal dl.facts { grid-template-columns: 1fr; gap: 0; } body.portal dl.facts dd { margin-bottom: var(--ui-space-2); } }

body.portal pre {
    margin: var(--ui-space-3) 0; padding: var(--ui-space-3) var(--ui-space-4); max-height: 320px; overflow: auto;
    background: var(--p-canvas); border: 1px solid var(--p-line); border-radius: var(--p-radius-control);
    font-size: 12px; line-height: 18px; white-space: pre; color: var(--p-text);
}

/* ------------------------------------------------------------------ status pills: state only */
body.portal .pill, body.portal .badge {
    display: inline-flex; align-items: center; min-height: 22px; padding: 0 var(--ui-space-2); border-radius: 9999px;
    font-size: 12px; line-height: 16px; font-weight: 600; white-space: nowrap; vertical-align: middle;
    background: var(--p-neutral-bg); color: var(--p-neutral-fg);
}
body.portal .pill.is-ok { background: var(--p-ok-bg); color: var(--p-ok-fg); }
body.portal .pill.is-warn { background: var(--p-warn-bg); color: var(--p-warn-fg); }
body.portal .pill.is-alert { background: var(--p-err-bg); color: var(--p-err-fg); }
body.portal .pill.is-info { background: var(--p-info-bg); color: var(--p-info-fg); }
body.portal td .badge, body.portal td .pill { margin-left: 0; }
body.portal td .badge { margin-left: var(--ui-space-1); }

/* Messages: an action's result, an error. */
body.portal .flash, body.portal.admin .flash {
    display: flex; gap: var(--ui-space-2); padding: var(--ui-space-3) var(--ui-space-4); margin: 0 0 var(--ui-space-5);
    background: var(--p-ok-bg); color: var(--p-ok-fg); border: 0; border-radius: var(--p-radius-control); box-shadow: none;
}
body.portal.admin .flash.error, body.portal.admin .flash.err { display: block; background: var(--p-err-bg); color: var(--p-err-fg); }
body.portal .flash.error a { color: var(--p-err-fg); }
body.portal p.error, body.portal ul.error, body.portal p.status {
    margin: 0 0 var(--ui-space-4); padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--p-radius-control);
    background: var(--p-err-bg); color: var(--p-err-fg);
}
body.portal ul.error { padding-left: var(--ui-space-8); }
body.portal p.status { background: var(--p-ok-bg); color: var(--p-ok-fg); }
body.portal p.notice { margin: 0 0 var(--ui-space-4); padding: var(--ui-space-3) var(--ui-space-4); border-radius: var(--p-radius-control); background: var(--p-warn-bg); color: var(--p-warn-fg); }
body.portal p.notice strong { color: inherit; }
body.portal p.error:empty, body.portal p.status:empty { display: none; }
body.portal span.error, body.portal strong.error { color: var(--p-err-fg); font-weight: 600; }
body.portal .field-error { color: var(--p-err-fg); }

/* ------------------------------------------------------------------ tables
   In a white card; header row small grey sentence case; rows separated by a hairline. A cell
   holding a code, a date or a version never breaks (.nowrap), prose may (.prose). On a narrow
   screen the table scrolls sideways inside its card, never the page. */
body.portal .table-wrap {
    background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius-card);
    overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--ui-space-4);
    position: relative;   /* so a visually-hidden header or a menu inside scrolls with it, not the page */
}
body.portal .card .table-wrap { margin: 0 calc(-1 * var(--ui-space-6)) var(--ui-space-4); border: 0; border-top: 1px solid var(--p-line); border-bottom: 1px solid var(--p-line); border-radius: 0; }
@media (max-width: 599px) { body.portal .card .table-wrap { margin: 0 calc(-1 * var(--ui-space-4)) var(--ui-space-4); } }
body.portal table, body.portal.admin table {
    width: 100%; margin: 0 0 var(--ui-space-4); background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-line);
    border-radius: var(--p-radius-card); font-size: 14px; line-height: 20px;
}
body.portal .table-wrap table, body.portal.admin .table-wrap table { display: table; margin: 0; box-shadow: none; border-radius: 0; }
body.portal.admin th, body.portal.admin td { padding: var(--ui-space-3); vertical-align: middle; border-bottom: 1px solid var(--p-line); }
body.portal.admin th {
    position: static; background: var(--p-surface); color: var(--p-text-2);
    font-size: 12px; line-height: 16px; font-weight: 600; text-transform: none; letter-spacing: 0; white-space: nowrap;
    border-bottom: 1px solid var(--p-line);
}
body.portal.admin tbody tr:last-child td { border-bottom: 0; }
body.portal.admin tbody tr:hover td { background: var(--p-hover); }
body.portal.admin tbody tr.empty:hover td { background: transparent; }
body.portal td.nowrap, body.portal th.nowrap, body.portal .nowrap { white-space: nowrap; }
body.portal td.prose, body.portal.admin td.prose { min-width: 240px; }
body.portal td.actions { text-align: right; white-space: nowrap; }
body.portal td.pick { width: 44px; }
body.portal td .sub { display: block; color: var(--p-text-2); font-size: 13px; }
body.portal td p { margin: 0 0 var(--ui-space-1); }
body.portal td pre { margin: var(--ui-space-1) 0 0; max-width: 480px; white-space: pre-wrap; overflow-wrap: anywhere; }
body.portal td.strong, body.portal td .name { font-weight: 700; }
@media (max-width: 899px) {
    body.portal.admin td, body.portal.admin th { min-width: 0; }
}
/* An empty table says so, and what makes a row appear. */
body.portal tr.empty td { padding: var(--ui-space-10) var(--ui-space-4); text-align: center; color: var(--p-text-2); white-space: normal; }
body.portal tr.empty .icon { display: block; margin: 0 auto var(--ui-space-2); color: var(--p-control); }
body.portal tr.empty strong { display: block; color: var(--p-text); margin-bottom: var(--ui-space-1); }
/* On a phone a wide empty table would centre its message off screen: keep it at the left edge. */
@media (max-width: 899px) { body.portal tr.empty td { text-align: left; } body.portal .empty-msg { position: sticky; left: var(--ui-space-4); max-width: calc(100vw - 72px); } body.portal tr.empty .icon { margin: 0 0 var(--ui-space-2); } }
body.portal .table-foot { margin: calc(-1 * var(--ui-space-2)) 0 var(--ui-space-4); color: var(--p-text-2); font-size: 13px; }
body.portal nav[role="navigation"] { margin: var(--ui-space-2) 0; }

/* ------------------------------------------------------------------ buttons */
body.portal.admin .btn {
    min-height: 44px; padding: 0 var(--ui-space-4); border-radius: var(--p-radius-control);
    background: var(--p-surface); color: var(--p-text); box-shadow: inset 0 0 0 1px var(--p-line-strong);
    font-family: var(--p-font); font-weight: 600; font-size: 14px; line-height: 20px;
    transition: background-color .1s ease;
}
body.portal.admin .btn:hover { background: var(--p-hover); }
body.portal.admin .btn.primary { background: var(--p-ink); color: #FFFFFF; box-shadow: none; }
body.portal.admin .btn.primary:hover, body.portal.admin .btn.primary:active { background: var(--p-ink-pressed); }
body.portal.admin .btn.danger { color: var(--p-err-fg); box-shadow: inset 0 0 0 1px var(--p-err-mark); background: var(--p-surface); }
body.portal.admin .btn.danger:hover { background: var(--p-err-bg); }
body.portal.admin .btn.small { padding: 0 var(--ui-space-3); font-size: 14px; }
body.portal.admin .btn[disabled] { background: var(--p-selected); color: var(--p-text-2); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { body.portal.admin .btn { transition: none; } }

/* ------------------------------------------------------------------ forms */
body.portal.admin input[type=text], body.portal.admin input[type=email], body.portal.admin input[type=password],
body.portal.admin input[type=number], body.portal.admin input[type=date], body.portal.admin input[type=url],
body.portal.admin input[type=search], body.portal.admin input:not([type]), body.portal.admin select, body.portal.admin textarea {
    min-height: 44px; max-width: 100%; padding: 0 var(--ui-space-3); border: 0; border-radius: var(--p-radius-control);
    background: var(--p-surface); box-shadow: inset 0 0 0 1px var(--p-control); color: var(--p-text);
    font-family: var(--p-font); font-size: 14px; line-height: 20px;
}
body.portal.admin textarea { padding: var(--ui-space-2) var(--ui-space-3); }
body.portal.admin select {
    appearance: none; -webkit-appearance: none; padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235F5F5F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
}
body.portal.admin input:hover, body.portal.admin select:hover { box-shadow: inset 0 0 0 1px var(--p-text-2); }
body.portal.admin input:focus-visible, body.portal.admin select:focus-visible, body.portal.admin textarea:focus-visible {
    outline: 2px solid var(--p-ink); outline-offset: 0; box-shadow: inset 0 0 0 1px var(--p-ink);
}
body.portal.admin input::placeholder { color: var(--p-text-2); opacity: 1; }
body.portal.admin input[type=checkbox], body.portal.admin input[type=radio] { width: 18px; height: 18px; accent-color: var(--p-ink); margin: 0; }
body.portal.admin [aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--p-err-mark); }

body.portal .field { margin: 0 0 var(--ui-space-4); min-width: 0; }
body.portal .field > label, body.portal .field > .label, body.portal .field label[for], body.portal .field-label {
    display: block; margin: 0 0 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--p-text);
}
body.portal .field input:not([type=checkbox]):not([type=radio]), body.portal .field select { width: 100%; }
body.portal .field .hint { margin: var(--ui-space-1) 0 0; color: var(--p-text-2); font-size: 13px; }

/* A row of fields ending in its button, all on one baseline: the fields carry no bottom margin of
   their own inside a row, so the button's bottom edge meets theirs. */
body.portal .row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-4); }
body.portal .row > .field { flex: 0 1 220px; margin: 0; }
body.portal .row > .field.grow { flex: 1 1 280px; max-width: 520px; }
body.portal .row > .btn { flex: none; }
body.portal .row > .row-note { flex: 1 0 100%; margin: 0; color: var(--p-text-2); }
body.portal .row > .row-note:empty { display: none; }
body.portal td .row { flex-wrap: nowrap; margin: 0; gap: var(--ui-space-2); }
body.portal td .row select { width: auto; }
body.portal td .row input { width: 200px; }

/* Filters above a table. */
body.portal .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--ui-space-3); margin: 0 0 var(--ui-space-4); }
body.portal .filters .field { margin: 0; flex: 0 1 160px; }
body.portal .filters .field.grow { flex: 1 1 200px; max-width: 280px; }

/* A form whose labels hold their field (<label>Name <input></label>): stacked, full width. */
body.portal .form-stack > label, body.portal .form-stack .stack-label {
    display: flex; flex-direction: column; gap: 6px; margin: 0 0 var(--ui-space-4); max-width: 520px; font-weight: 600;
}
body.portal .form-stack > label input:not([type=checkbox]):not([type=radio]), body.portal .form-stack > label select { width: 100%; font-weight: 400; }
body.portal .form-stack > label:has(> input[type=checkbox]) { flex-direction: row; align-items: center; gap: var(--ui-space-2); font-weight: 400; min-height: 44px; }
body.portal fieldset { min-width: 0; margin: 0 0 var(--ui-space-4); padding: 0; border: 0; }
body.portal fieldset > legend { padding: 0; margin: 0 0 6px; font-weight: 600; font-size: 14px; }
body.portal fieldset.checks { display: flex; flex-wrap: wrap; gap: 0 var(--ui-space-5); }
body.portal fieldset.checks > legend { flex: 0 0 100%; }
body.portal fieldset > label:has(> input[type=checkbox]), body.portal fieldset > label:has(> input[type=radio]), body.portal .check {
    display: inline-flex; align-items: center; gap: var(--ui-space-2); min-height: 44px; margin-right: var(--ui-space-5); font-weight: 400;
}
body.portal .input-suffix { display: flex; align-items: center; gap: var(--ui-space-2); }
body.portal .input-suffix input { flex: 1 1 auto; min-width: 0; }
body.portal .input-suffix span { color: var(--p-text-2); white-space: nowrap; font-weight: 400; }
body.portal .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 var(--ui-space-4); }
body.portal .form-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); align-items: center; margin-top: var(--ui-space-2); }

/* ------------------------------------------------------------------ row actions menu (team) */
body.portal td .menu > summary { font-weight: 600; box-shadow: inset 0 0 0 1px var(--p-line-strong); background: var(--p-surface); }
body.portal td .menu-pop { min-width: 300px; text-align: left; white-space: normal; }
body.portal .menu-pop form { margin: 0; }
body.portal .menu-pop .menu-form { padding: var(--ui-space-2) var(--ui-space-3); }
body.portal .menu-pop .menu-form .field { margin: 0 0 var(--ui-space-2); }
body.portal .menu-pop li button.danger { color: var(--p-err-fg); }
body.portal .menu-pop li button.danger:hover { background: var(--p-err-bg); }
body.portal .table-wrap.has-menus { overflow: visible; }
@media (max-width: 899px) {
    body.portal .table-wrap.has-menus { overflow-x: auto; }
    body.portal td .menu-pop { position: static; box-shadow: none; margin-top: var(--ui-space-2); }
}

/* ------------------------------------------------------------------ fleet, approvals */
body.portal .status-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ui-space-2) var(--ui-space-3); margin: 0 0 var(--ui-space-2); }
body.portal .status-line strong { font-size: 16px; }
body.portal .countdown { font-weight: 700; }

/* ------------------------------------------------------------------ sign-in screens */
body.portal .admin-login { background: var(--p-canvas); align-content: center; }
body.portal .admin-login-card {
    max-width: 420px; padding: var(--ui-space-10) var(--ui-space-8) var(--ui-space-8);
    border: 1px solid var(--p-line); border-radius: var(--p-radius-card); background: var(--p-surface);
}
@media (max-width: 480px) { body.portal .admin-login-card { padding: var(--ui-space-8) var(--ui-space-5) var(--ui-space-6); } }
body.portal .admin-login-card .admin-login-mark { display: flex; justify-content: center; margin: 0 0 var(--ui-space-6); }
body.portal .admin-login-card .admin-login-mark img { height: 72px; width: auto; }
body.portal .admin-login-card h1, body.portal.admin .admin-login-card h1 { font-size: 22px; line-height: 28px; text-align: center; margin: 0 0 var(--ui-space-5); }
body.portal .admin-login-card h2 { font-size: 16px; font-weight: 700; margin: var(--ui-space-6) 0 var(--ui-space-2); }
body.portal .admin-login-card p { color: var(--p-text-2); }
body.portal .admin-login-card .field input { width: 100%; }
body.portal .admin-login-card .btn { width: 100%; }
body.portal .admin-login-card form + p, body.portal .admin-login-card form + form, body.portal .admin-login-card p + form { margin-top: var(--ui-space-3); }
body.portal .admin-login-card ol { padding-left: var(--ui-space-5); color: var(--p-text-2); }
body.portal .admin-login-card .admin-2fa-qr-wrap { display: flex; justify-content: center; }
body.portal .admin-login-foot { text-align: center; margin: var(--ui-space-4) 0 0; }
body.portal .login-shell { width: 100%; max-width: 420px; }
body.portal .login-legal { margin: var(--ui-space-4) 0 0; text-align: center; color: var(--p-text-2); font-size: 13px; }

/* The one-time secret: big, selectable, on its own line. */
body.portal code.secret { display: block; margin-top: var(--ui-space-1); padding: var(--ui-space-3); font-size: 14px; overflow-wrap: anywhere; user-select: all; }