@import 'Navigator.Web.Client.tplvjxhyam.bundle.scp.css';
@import '_content/Navigator.Shared/Navigator.Shared.7pkxxhbyid.bundle.scp.css';

/* /Components/Account/Pages/Manage/ApiSettings.razor.rz.scp.css */
/* API settings. Replaces Nav9's Bootstrap table classes (ssy-table-mw, w-100) and its fixed <colgroup>
   pixel widths. Tokens only, no raw hex - see ssytokens.css.

   No colgroup: the columns hold an IP address, a short status, a free-text comment and a timestamp, and
   fixed pixel widths mean the comment column is either wasteful or truncated depending on the screen.
   The table sizes itself and the wrapper scrolls when it has to. */

.apisettings-section[b-fiaka9jkud] {
    margin-bottom: var(--ssy-sp-07);
}

.apisettings-section:last-of-type[b-fiaka9jkud] {
    margin-bottom: 0;
}

.apisettings-heading[b-fiaka9jkud] {
    margin: 0 0 var(--ssy-sp-04);
    font-family: var(--ssy-font-accent);
    font-size: var(--ssy-text-body);
    font-weight: 700;
    color: var(--ssy-on-surface);
}

/* ---------- Status banner (replaces the toasts) ---------- */

.apisettings-status[b-fiaka9jkud] {
    margin: 0 0 var(--ssy-sp-05);
    padding: var(--ssy-sp-04);
    border-radius: var(--ssy-radius-md);
    border-left: 3px solid currentColor;

    font-size: var(--ssy-text-body-sm);
    background: var(--ssy-nav-item-hover);
}

[data-theme="dark"] .apisettings-status-ok[b-fiaka9jkud] { color: var(--ssy-accent-9-500); }
[data-theme="light"] .apisettings-status-ok[b-fiaka9jkud] { color: var(--ssy-accent-9-900); }

[data-theme="dark"] .apisettings-status-error[b-fiaka9jkud] { color: var(--ssy-accent-10-400); }
[data-theme="light"] .apisettings-status-error[b-fiaka9jkud] { color: var(--ssy-accent-10-600); }

/* ---------- Tables ---------- */

.apisettings-tablewrap[b-fiaka9jkud] {
    overflow-x: auto;
    margin-bottom: var(--ssy-sp-05);
    border: 1px solid var(--ssy-border-subtle);
    border-radius: var(--ssy-radius-md);
}

.apisettings-table[b-fiaka9jkud] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--ssy-text-body-sm);
}

.apisettings-table th[b-fiaka9jkud] {
    padding: var(--ssy-sp-03) var(--ssy-sp-04);
    border-bottom: 1px solid var(--ssy-border-subtle);
    background: var(--ssy-surface-flat);

    text-align: left;
    font-size: var(--ssy-text-body-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ssy-on-surface-muted);
    white-space: nowrap;
}

.apisettings-table td[b-fiaka9jkud] {
    padding: var(--ssy-sp-03) var(--ssy-sp-04);
    border-bottom: 1px solid var(--ssy-border-subtle);
    vertical-align: middle;
    color: var(--ssy-on-surface);
}

.apisettings-table tbody tr:last-child td[b-fiaka9jkud] {
    border-bottom: 0;
}

.apisettings-actions[b-fiaka9jkud] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-03);
    white-space: nowrap;
}

.apisettings-confirm[b-fiaka9jkud] {
    font-weight: 700;
}

[data-theme="dark"] .apisettings-confirm[b-fiaka9jkud] { color: var(--ssy-accent-10-400); }
[data-theme="light"] .apisettings-confirm[b-fiaka9jkud] { color: var(--ssy-accent-10-600); }

/* ---------- Status pills ---------- */

.apisettings-pill[b-fiaka9jkud] {
    display: inline-block;

    padding: 0 var(--ssy-sp-03);
    border: 1px solid currentColor;
    border-radius: 999px;

    font-size: var(--ssy-text-body-xs);
    letter-spacing: 0.02em;
    white-space: nowrap;
}

[data-theme="dark"] .apisettings-pill-ok[b-fiaka9jkud] { color: var(--ssy-accent-9-500); }
[data-theme="light"] .apisettings-pill-ok[b-fiaka9jkud] { color: var(--ssy-accent-9-900); }

[data-theme="dark"] .apisettings-pill-pending[b-fiaka9jkud] { color: var(--ssy-accent-2-500); }
[data-theme="light"] .apisettings-pill-pending[b-fiaka9jkud] { color: var(--ssy-accent-2-900); }

.apisettings-pill-muted[b-fiaka9jkud] {
    color: var(--ssy-on-surface-muted);
}

/* ---------- Utilities ---------- */

.apisettings-mono[b-fiaka9jkud] {
    font-family: var(--ssy-font-mono);
    font-size: var(--ssy-text-body-xs);
}

/* API keys are GUIDs - they must break rather than force the table wide. */
.apisettings-break[b-fiaka9jkud] {
    overflow-wrap: anywhere;
}

.apisettings-empty[b-fiaka9jkud] {
    margin: 0 0 var(--ssy-sp-05);
    font-size: var(--ssy-text-body-sm);
    font-style: italic;
    color: var(--ssy-on-surface-muted);
}

/* For a table header that exists only for screen readers - the actions column has no visible label, but
   an empty <th> announces as nothing at all. clip rather than display:none, which would hide it from
   assistive technology too. */
.apisettings-visually-hidden[b-fiaka9jkud] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}
/* /Components/Account/Pages/Manage/Index.razor.rz.scp.css */
/* Profile - a read-only fact list. Tokens only, no raw hex.

   Nav9 renders these as `disabled` Bootstrap inputs with an inline <style> block overriding the disabled
   colours, which is a form pretending to be a form: nothing can be typed into it and a screen reader
   announces four unusable text boxes. A definition list says the same thing truthfully. */

.profile-facts[b-436ctuqbwu] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--ssy-sp-04) var(--ssy-sp-05);

    margin: 0;
    padding: var(--ssy-sp-05);
    border: 1px solid var(--ssy-border-subtle);
    border-radius: var(--ssy-radius-md);
    background: var(--ssy-surface-variant);
}

.profile-fact[b-436ctuqbwu] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    min-width: 0;
}

.profile-fact dt[b-436ctuqbwu] {
    font-size: var(--ssy-text-body-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ssy-on-surface-muted);
}

.profile-fact dd[b-436ctuqbwu] {
    margin: 0;
    font-size: var(--ssy-text-body-sm);
    line-height: 1.4;
    overflow-wrap: anywhere;
    color: var(--ssy-on-surface);
}
/* /Components/Account/Pages/Manage/Settings.razor.rz.scp.css */
/* Settings - scoped CSS. Tokens only, no raw hex (see ssytokens.css).
   Light and dark come from `data-theme` on MainLayout's root, which is an ancestor of everything here.

   DELIBERATELY SMALL. The form itself is the shared account element set from ssyaccount.css -
   `ssy-account-form` / `-field` / `-label` / `-input` / `-actions` / `-link` - and the button is the
   shared `ssy-btn`. None of that is restyled here, and none of it should be: the day the designers
   deliver the account screens, one stylesheet changes and this page follows.

   What is left is the page's own furniture: two section blocks, the section headings, the hint text
   under a field, and the read-only fact grid in Session. */

.settings-block[b-03qhhuscbr] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
}

    /* A rule above the second block and every block after it, but not above the first - the page's
       own lead paragraph already separates that one, and a rule directly under it would read as a
       double divider. `+` rather than `:not(:first-child)` because it is the ADJACENCY that matters. */
    .settings-block + .settings-block[b-03qhhuscbr] {
        margin-top: var(--ssy-sp-07);
        padding-top: var(--ssy-sp-06);
        border-top: 1px solid var(--ssy-border-subtle);
    }

/* h3, sitting under ManageLayout's h1 and the page's h2 - so the level is real document structure,
   not a type choice. Söhne Breit, the same accent cut managepage-title uses one level up, a step
   smaller so the hierarchy is visible without a size jump. */
.settings-heading[b-03qhhuscbr] {
    margin: 0;
    font-family: var(--ssy-font-accent);
    font-size: var(--ssy-text-body-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ssy-on-surface);
}

/* Help text under a field. Muted and small, and it is what the email input points at with
   aria-describedby - so it is read out as part of that field rather than as a stray paragraph. */
.settings-hint[b-03qhhuscbr] {
    margin: 0;
    font-size: var(--ssy-text-body-xs);
    line-height: 1.5;
    color: var(--ssy-on-surface-muted);
}

/* Read-only session facts.
   A definition list, NOT a row of disabled inputs. Nav9's account pages render read-only values as
   `disabled` Bootstrap inputs with an inline <style> block overriding the disabled colours, which is a
   form pretending to be a form: nothing can be typed into it and a screen reader announces unusable
   text boxes. Same reasoning, same treatment, as Index.razor's profile-facts - the classes are
   separate because scoped CSS cannot cross from that component to this one, and reaching across with
   ::deep to share four rules would couple two pages that have no other relationship. */
.settings-facts[b-03qhhuscbr] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--ssy-sp-04) var(--ssy-sp-05);

    margin: 0;
    padding: var(--ssy-sp-05);
    border: 1px solid var(--ssy-border-subtle);
    border-radius: var(--ssy-radius-md);
    background: var(--ssy-surface-variant);
}

.settings-fact[b-03qhhuscbr] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    min-width: 0;
}

.settings-fact dt[b-03qhhuscbr] {
    font-size: var(--ssy-text-body-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ssy-on-surface-muted);
}

.settings-fact dd[b-03qhhuscbr] {
    margin: 0;
    font-size: var(--ssy-text-body-sm);
    line-height: 1.4;
    overflow-wrap: anywhere;
    color: var(--ssy-on-surface);
}

/* The stack of session actions and links. align-items: flex-start so the sign-out button shrinks to
   its label instead of stretching across the column - it is a secondary action, and a full-width
   button reads as the page's primary one. */
.settings-links[b-03qhhuscbr] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ssy-sp-04);
}

/* Explains an ABSENT control rather than decorating a present one - shown to staff in place of the
   sign-out button, so the gap reads as deliberate instead of broken. */
.settings-note[b-03qhhuscbr] {
    margin: 0;
    max-width: 44rem;
    font-size: var(--ssy-text-body-xs);
    line-height: 1.5;
    color: var(--ssy-on-surface-muted);
}

/* ---------- Delete your account ----------
   ADDED 2026-09-15 with the delete block. The only colour on this page, and it is here because
   there is no destructive variant in ssynavigator.css's `ssy-btn` set - checked, not assumed. If one
   is ever added, delete .settings-danger-btn and use it instead.

   The red is picked per theme rather than from one token, following ApiSettings.razor.css directly
   above this folder's other status colours: accent-10-400 survives on the dark navy surface,
   accent-10-600 is the step far enough down the ramp to pass contrast on white. --ssy-toast-danger
   already resolves to exactly this pair, but it is the TOAST's token and borrowing it here would
   make a button change colour the day somebody retunes toasts. */

.settings-danger-btn[b-03qhhuscbr] {
    border-color: currentColor;
}

[data-theme="dark"] .settings-danger-btn[b-03qhhuscbr] { color: var(--ssy-accent-10-400); }
[data-theme="light"] .settings-danger-btn[b-03qhhuscbr] { color: var(--ssy-accent-10-600); }

    /* ssy-btn-secondary's own hover fills with the brand line colour, which would turn a destructive
       button brand-blue on the way to being pressed. Overridden to a tint of the red instead, so the
       control keeps saying the same thing throughout the interaction. */
    [data-theme="dark"] .settings-danger-btn:hover[b-03qhhuscbr],
    [data-theme="dark"] .settings-danger-btn:active[b-03qhhuscbr] {
        background: #FF33341F;
        border-color: var(--ssy-accent-10-400);
        color: var(--ssy-accent-10-300);
    }

    [data-theme="light"] .settings-danger-btn:hover[b-03qhhuscbr],
    [data-theme="light"] .settings-danger-btn:active[b-03qhhuscbr] {
        background: #CC00011F;
        border-color: var(--ssy-accent-10-600);
        color: var(--ssy-accent-10-700);
    }

    /* Disabled while the delete is in flight. Without this the button keeps the red, which reads as
       still-pressable at the one moment it is not. */
    .settings-danger-btn:disabled[b-03qhhuscbr] {
        color: var(--ssy-on-surface-muted);
        border-color: var(--ssy-border-subtle);
        background: transparent;
    }

/* The confirmation panel. Same surface and radius as the Session fact grid - it is a panel on this
   page, not a modal - distinguished only by the red edge, so the red is doing the warning rather than
   a change of shape. */
.settings-danger-panel[b-03qhhuscbr] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);
    align-items: flex-start;

    max-width: 44rem;
    padding: var(--ssy-sp-05);
    border: 1px solid;
    border-radius: var(--ssy-radius-md);
    background: var(--ssy-surface-variant);
}

[data-theme="dark"] .settings-danger-panel[b-03qhhuscbr] { border-color: var(--ssy-accent-10-400); }
[data-theme="light"] .settings-danger-panel[b-03qhhuscbr] { border-color: var(--ssy-accent-10-600); }

/* The question itself. On-surface rather than red: the panel edge and the button already carry the
   warning, and red body text on a tinted panel is harder to read than it is urgent. */
.settings-danger-title[b-03qhhuscbr] {
    margin: 0;
    font-family: var(--ssy-font-accent);
    font-size: var(--ssy-text-body-sm);
    font-weight: 700;
    line-height: 1.4;
    color: var(--ssy-on-surface);
}

/* Cancel and confirm side by side, wrapping rather than shrinking on a narrow phone - a destructive
   button squeezed to two words per line is how the wrong one gets tapped. */
.settings-danger-actions[b-03qhhuscbr] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-sp-04);
}
/* /Components/Account/Pages/Manage/Unavailable.razor.rz.scp.css */
/* A centred card inside ManageLayout's content column. The ssy-account-* classes used for the type and
   the button are global (ssyaccount.css, imported by app.css), so all this file needs to describe is the
   box they sit in.

   `margin: auto` is deliberate and harmless: it centres the card in ManageLayout's grid cell, and still
   worked when these routes were briefly rendered under EmptyLayout's flex column.

   Tokens only - no raw hex. See ssytokens.css. */

.manage-unavailable[b-ah6jc249f2] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);

    width: 100%;
    max-width: 30rem;
    margin: auto;              /* centres both ways inside EmptyLayout's flex column */
    padding: var(--ssy-sp-06);

    border: 1px solid var(--ssy-border-subtle);
    border-radius: var(--ssy-radius-md);
    background: var(--ssy-surface-variant);
    text-align: center;
}
/* /Components/Account/Pages/TsAndCs.razor.rz.scp.css */
/* ============================================================================================
   Terms & Conditions - a document page.

   Replaces Nav9's inline <style> block, which hard-coded #1a1a1a on #ffffff with a #0a1f44 accent.
   That block was written for a modal on a white background; on Navigator's dark theme it would be
   black text on a dark navy page. Everything here goes through the semantic tokens instead, so the
   document follows whichever theme the reader has chosen.

   Tokens only - no raw hex (see ssytokens.css). Type sizes come from the --ssy-text-* scale rather
   than Nav9's 13.5px/22px one-offs, with line-height loosened for long-form reading.

   Layout note: EmptyLayout is a flex column with min-height:100dvh and no vertical centring, so a
   document that is taller than the viewport simply flows and scrolls. `margin: 0 auto` centres the
   measure horizontally without fighting that.
   ============================================================================================ */

.tandc-doc[b-nxmaf3zg0t] {
    width: 100%;
    max-width: 54rem;              /* ~90 characters at this size - a comfortable reading measure */
    margin: 0 auto;
    padding: var(--ssy-sp-06) var(--ssy-sp-05) var(--ssy-sp-08);

    font-family: var(--ssy-font-body);
    font-size: var(--ssy-text-body-sm);
    line-height: 1.75;
    color: var(--ssy-on-surface);
}

/* ---------- Header ---------- */

.tandc-header[b-nxmaf3zg0t] {
    padding-bottom: var(--ssy-sp-05);
    margin-bottom: var(--ssy-sp-06);
    border-bottom: 2px solid var(--ssy-accent);
}

.tandc-brand[b-nxmaf3zg0t] {
    margin-bottom: var(--ssy-sp-02);

    font-family: var(--ssy-font-accent);
    font-size: var(--ssy-text-body-xs);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ssy-accent);
}

.tandc-title[b-nxmaf3zg0t] {
    margin: 0 0 var(--ssy-sp-02);
    font-family: var(--ssy-font-display);
    font-size: var(--ssy-text-h2);
    font-weight: 500;
    line-height: 1.2;
    color: var(--ssy-on-surface);
}

.tandc-meta[b-nxmaf3zg0t] {
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
}

.tandc-intro[b-nxmaf3zg0t] {
    margin-bottom: var(--ssy-sp-06);
    font-style: italic;
    color: var(--ssy-on-surface-muted);
}

/* ---------- Sections ---------- */

.tandc-divider[b-nxmaf3zg0t] {
    height: 0;
    margin: var(--ssy-sp-06) 0;
    border: 0;
    border-top: 1px solid var(--ssy-border-subtle);
}

.tandc-section[b-nxmaf3zg0t] {
    /* Keeps a heading from being orphaned at the foot of a printed page or a column. */
    break-inside: avoid;
}

.tandc-heading[b-nxmaf3zg0t] {
    margin-bottom: var(--ssy-sp-04);

    font-family: var(--ssy-font-accent);
    font-size: var(--ssy-text-body);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--ssy-on-surface);
}

.tandc-body[b-nxmaf3zg0t] {
    color: var(--ssy-on-surface);
}

/* ---------- Numbered clauses ----------
   The number is a leading span rather than a list marker, because the source numbers clauses
   explicitly (2.1, 2.2 …) and those numbers are cited elsewhere - they must never be renumbered by
   the browser. Hanging indent via padding + negative text-indent so wrapped lines align under the
   text, not under the number. */

.tandc-clause[b-nxmaf3zg0t],
.tandc-subclause[b-nxmaf3zg0t],
.tandc-subsubclause[b-nxmaf3zg0t] {
    padding-left: 3.25rem;
    text-indent: -3.25rem;
    margin-bottom: var(--ssy-sp-03);
}

.tandc-subclause[b-nxmaf3zg0t] {
    padding-left: 4.75rem;
    text-indent: -3.25rem;
}

.tandc-subsubclause[b-nxmaf3zg0t] {
    padding-left: 6.25rem;
    text-indent: -3.25rem;
}

.tandc-clausenum[b-nxmaf3zg0t] {
    display: inline-block;
    width: 3.25rem;

    font-family: var(--ssy-font-mono);
    font-size: 0.9em;
    color: var(--ssy-on-surface-muted);
}

/* ---------- Footer ---------- */

.tandc-footer[b-nxmaf3zg0t] {
    padding-top: var(--ssy-sp-05);
    font-size: var(--ssy-text-body-xs);
    text-align: center;
    color: var(--ssy-on-surface-muted);
}

/* ---------- Narrow screens ---------- */

@media (max-width: 640px) {
    .tandc-doc[b-nxmaf3zg0t] {
        padding: var(--ssy-sp-05) var(--ssy-sp-04) var(--ssy-sp-07);
    }

    /* The hanging indent costs too much of a narrow measure - fall back to a flat indent. */
    .tandc-clause[b-nxmaf3zg0t],
    .tandc-subclause[b-nxmaf3zg0t],
    .tandc-subsubclause[b-nxmaf3zg0t] {
        padding-left: 0;
        text-indent: 0;
    }

    .tandc-clausenum[b-nxmaf3zg0t] {
        width: auto;
        margin-right: var(--ssy-sp-03);
    }
}
/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
/* Scoped CSS for the account shell - the FRAME only (page background, logo, card, footer).
   Everything inside the form lives in wwwroot/css/ssyaccount.css, because scoped CSS cannot reach a
   class used inside a child page.

   Deliberately plain and deliberately short: one centred column, no columns to reflow, so no
   breakpoints - which keeps the account styling consistent with the `ssy-` element rules. Tokens
   only, no raw hex. Expect the designers to replace all of it. */

.account-root[b-jrdv16wcrh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ssy-sp-06);

    min-height: 100vh;
    min-height: 100dvh;   /* honest fill as mobile browser chrome shows and hides */

    padding: var(--ssy-sp-06) var(--ssy-sp-05);
    padding-top: max(var(--ssy-sp-06), env(safe-area-inset-top));
    padding-bottom: max(var(--ssy-sp-05), env(safe-area-inset-bottom));

    background: var(--ssy-surface);
    color: var(--ssy-on-surface);
    font-family: var(--ssy-font-body);
    font-size: var(--ssy-text-body);
}

/* ---------- Logo ---------- */

.account-head[b-jrdv16wcrh] {
    display: flex;
    justify-content: center;
}

.account-logo[b-jrdv16wcrh] {
    display: block;
    width: auto;
    height: 3.25rem;
}

/* data-theme sits on .account-root, an ancestor, so these resolve - scoped CSS only rewrites the
   final compound selector. */
[data-theme="dark"] .account-logo-light[b-jrdv16wcrh],
[data-theme="light"] .account-logo-dark[b-jrdv16wcrh] {
    display: none;
}

/* ---------- The card ----------
   `margin-block: auto` centres it vertically while leaving the logo pinned above and the footer
   below, and still lets a tall form (register, T&Cs) simply push the page longer. */

.account-card[b-jrdv16wcrh] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);

    width: 100%;
    max-width: 24rem;
    margin-block: auto;
    padding: var(--ssy-sp-06);

    border: 1px solid var(--ssy-border-subtle);
    border-radius: var(--ssy-radius-md);
    background: var(--ssy-surface-variant);
}

/* ---------- Footer ---------- */

.account-foot[b-jrdv16wcrh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ssy-sp-02);
}

/* One label per theme - see the note in AccountLayout.razor for why the script does not set text. */
[data-theme="dark"] .account-theme-label-light[b-jrdv16wcrh],
[data-theme="light"] .account-theme-label-dark[b-jrdv16wcrh] {
    display: none;
}

.account-copyright[b-jrdv16wcrh] {
    margin: 0;
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
}
/* /Components/Account/Shared/ApiClaimEditor.razor.rz.scp.css */
/* The inline API-claim editor. Tokens only, no raw hex.

   Styled as a panel rather than a plain form so it reads as "this is a thing that just opened" - the job
   the modal's overlay used to do in Nav9, without taking over the screen. The accent left border is the
   same device the notification cards use for "attend to this". */

.apiclaimeditor[b-j682t1r34f] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);

    max-width: 30rem;
    margin-bottom: var(--ssy-sp-05);
    padding: var(--ssy-sp-05);

    border: 1px solid var(--ssy-border-subtle);
    border-left: 3px solid var(--ssy-accent);
    border-radius: var(--ssy-radius-md);
    background: var(--ssy-surface-variant);
}

.apiclaimeditor-title[b-j682t1r34f] {
    margin: 0;
    font-family: var(--ssy-font-accent);
    font-size: var(--ssy-text-body-sm);
    font-weight: 700;
    color: var(--ssy-on-surface);
}

.apiclaimeditor-field[b-j682t1r34f] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    margin-bottom: var(--ssy-sp-04);
}

.apiclaimeditor-label[b-j682t1r34f] {
    font-size: var(--ssy-text-body-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ssy-on-surface-muted);
}

.apiclaimeditor-hint[b-j682t1r34f] {
    margin: 0;
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
}

.apiclaimeditor-actions[b-j682t1r34f] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-sp-03);
}

/* ValidationMessage is a child component, so its markup is outside this file's scope - ::deep reaches it.
   ssyaccount.css styles these, but only under .ssy-account-field, and this panel is not an account page. */
.apiclaimeditor-field[b-j682t1r34f]  .validation-message {
    margin: 0;
    font-size: var(--ssy-text-body-xs);
}

[data-theme="dark"] .apiclaimeditor-field[b-j682t1r34f]  .validation-message { color: var(--ssy-accent-10-400); }
[data-theme="light"] .apiclaimeditor-field[b-j682t1r34f]  .validation-message { color: var(--ssy-accent-10-600); }
/* /Components/Account/Shared/ManageLayout.razor.rz.scp.css */
/* Scoped CSS for the Manage account shell. Replaces Nav9's Bootstrap grid (row / col-md-3 / col).
   Tokens only, no raw hex - see ssytokens.css. Light and dark come from data-theme on MainLayout's root,
   which is an ancestor of everything here. */

.managelayout[b-emmugfd1tx] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-06);

    width: 100%;
    max-width: 72rem;
    padding: var(--ssy-sp-06);
    margin: 0 auto;

    font-family: var(--ssy-font-body);
    color: var(--ssy-on-surface);
}

.managelayout-title[b-emmugfd1tx] {
    margin: 0;
    font-family: var(--ssy-font-display);
    font-size: var(--ssy-text-h2);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.1;
}

.managelayout-lead[b-emmugfd1tx] {
    margin: var(--ssy-sp-02) 0 0;
    font-size: var(--ssy-text-body-sm);
    color: var(--ssy-on-surface-muted);
}

/* Sidebar beside content, collapsing to stacked on narrow screens. Grid rather than flex so the sidebar
   keeps its width without needing flex-basis arithmetic. */
.managelayout-body[b-emmugfd1tx] {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: var(--ssy-sp-06);
    align-items: start;
}

.managelayout-content[b-emmugfd1tx] {
    min-width: 0;   /* lets wide content (a table) scroll instead of stretching the grid */
}

@media (max-width: 800px) {
    .managelayout[b-emmugfd1tx] {
        padding: var(--ssy-sp-05) var(--ssy-sp-04);
        gap: var(--ssy-sp-05);
    }

    .managelayout-body[b-emmugfd1tx] {
        grid-template-columns: 1fr;
        gap: var(--ssy-sp-05);
    }
}

/* ============================================================================================
   Shared page furniture for everything rendered into this layout.

   These live HERE, behind ::deep, rather than being repeated in each page's own stylesheet - every
   Manage page wants the same heading, lead paragraph and note, and scoped CSS cannot otherwise reach
   the content a layout renders through @Body.

   Written as `.managelayout-content ::deep X` rather than starting the selector with ::deep, so the
   scope attribute is unambiguously attached to the content column and the rule reaches its
   descendants.
   ============================================================================================ */

.managelayout-content[b-emmugfd1tx]  .managepage-title {
    margin: 0 0 var(--ssy-sp-04);
    font-family: var(--ssy-font-accent);
    font-size: var(--ssy-text-body);
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ssy-on-surface);
}

.managelayout-content[b-emmugfd1tx]  .managepage-lead {
    margin: 0 0 var(--ssy-sp-04);
    font-size: var(--ssy-text-body-sm);
    line-height: 1.6;
    color: var(--ssy-on-surface-muted);
}

.managelayout-content[b-emmugfd1tx]  .managepage-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ssy-sp-04);
    margin-bottom: var(--ssy-sp-05);
}

.managelayout-content[b-emmugfd1tx]  .managepage-note {
    margin: var(--ssy-sp-05) 0 0;
    padding-top: var(--ssy-sp-05);
    border-top: 1px solid var(--ssy-border-subtle);

    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
}
/* /Components/Account/Shared/ManageNavMenu.razor.rz.scp.css */
/* Scoped CSS for the Manage account section list. Replaces Nav9's inline <style> block, which
   hard-coded #FFFFFF / #0087CB to override Bootstrap's .nav-pills. Tokens only - see ssytokens.css.

   The nav tokens (--ssy-nav-*) rather than the surface ones, because this IS navigation and should
   match the rail and the department panel in both themes. */

.managenav[b-qw37m49vn3] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);

    margin: 0;
    padding: 0;
    list-style: none;
}

/* ::deep, because NavLink renders the anchor - scoped CSS would otherwise not reach a child
   component's own markup. */
[b-qw37m49vn3] .managenav-link {
    display: block;

    padding: var(--ssy-sp-03) var(--ssy-sp-04);
    border-radius: var(--ssy-btn-radius);

    font-size: var(--ssy-text-body-sm);
    text-decoration: none;
    color: var(--ssy-on-nav);

    transition: background-color var(--ssy-motion-fast) var(--ssy-ease-out),
                color var(--ssy-motion-fast) var(--ssy-ease-out);
}

[b-qw37m49vn3] .managenav-link:hover,
[b-qw37m49vn3] .managenav-link:focus-visible {
    background: var(--ssy-nav-item-hover);
    text-decoration: underline;
}

[b-qw37m49vn3] .managenav-link:focus-visible {
    outline: var(--ssy-btn-focus-stroke) solid var(--ssy-btn-focus-colour);
    outline-offset: 2px;
}

/* NavLink adds `active` to the anchor for the current route. The accent pill matches how the main nav
   marks its active item - accent fill, dark label in dark mode and white in light, both from tokens. */
[b-qw37m49vn3] .managenav-link.active {
    background: var(--ssy-nav-accent);
    color: var(--ssy-nav-item-active-fg);
    font-weight: 700;
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    [b-qw37m49vn3] .managenav-link {
        transition: none;
    }
}
/* /Components/Pages/DryCargo/EuEts/EuEtsCalculator.razor.rz.scp.css */
/* EU ETS Calculator. Scoped; every selector starts with .euets-pagelayout (or is one of the two
   page-level states). Every colour is a --ssy-* token. Cards, tables, fields, toggles, radios and
   buttons are the shared objects in ssynavigator.css; what is here is the page's grid and the few
   things those objects do not cover. The number boxes style themselves (EuEtsNumber.razor.css);
   this file only sizes them, through ::deep, because they are a child component. */

.euets-pagelayout[b-uimrmr5qfm] {
    /* ONE SET OF COLUMNS FOR THE TOP CARDS (BK, 1 Oct 2026: "make them all the same width and move
       the right objects so they line up"). Prices, EU ETS data, FuelEU data and the vessel form all
       lay out as label | value | unit on these three tracks, so their labels start on one left edge
       and their figures and boxes end on one right edge. The cards' width is derived from the same
       numbers, so every card is the same width. */
    --euets-col-label: 8rem;
    --euets-col-value: 7rem;
    --euets-col-unit: 4rem;
    --euets-col-gap: var(--ssy-sp-03);
    --euets-card-w: calc(var(--euets-col-label) + var(--euets-col-value) + var(--euets-col-unit)
                         + 2 * var(--euets-col-gap) + 2 * var(--ssy-card-pad) + 2px);

    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
    width: 100%;
    min-width: 0;
}

.euets-pagelayout .ssy-card-title[b-uimrmr5qfm] {
    margin: 0 0 var(--ssy-sp-04);
}

.euets-note[b-uimrmr5qfm] {
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
}

/* ---------- EU ETS prices ---------- */

/* A vertical list (BK, 1 Oct 2026): the date on top, then one price per line, styled exactly like the
   FuelEU data rows (BK: "make the prices look like the fueleu data"): muted name, mono value, small
   muted change. Each row is still a button, because clicking a price puts it into the calculation. */
.euets-pagelayout .euets-pricebar[b-uimrmr5qfm] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--ssy-sp-02);
}

    .euets-pagelayout .euets-pricebar > :first-child[b-uimrmr5qfm] {
        margin-bottom: var(--ssy-sp-02);
    }

    .euets-pagelayout .euets-pricebar > .euets-note[b-uimrmr5qfm] {
        margin-top: var(--ssy-sp-02);
    }

/* A price is a button: clicking it puts that price into the calculation (Nav9). Laid out as
   name, price, day-on-day change, the order Nav9 printed them in. */
.euets-pagelayout .euets-price[b-uimrmr5qfm] {
    display: grid;
    grid-template-columns:
        minmax(5.5rem, var(--euets-col-label))
        minmax(4.5rem, var(--euets-col-value))
        minmax(3rem, var(--euets-col-unit));
    justify-content: start;
    align-items: baseline;
    gap: var(--euets-col-gap);
    text-align: left;
    padding: 1px 0;
    border: 0;
    border-radius: 2px;
    background: transparent;
    color: var(--ssy-on-surface);
    font: inherit;
    font-size: var(--ssy-text-body-sm);
    cursor: pointer;
    transition: background-color var(--ssy-motion-fast) linear;
}

    .euets-pagelayout .euets-price:hover[b-uimrmr5qfm] {
        background: var(--ssy-nav-item-hover);
    }

    .euets-pagelayout .euets-price:focus-visible[b-uimrmr5qfm] {
        outline: 2px solid var(--ssy-accent);
        outline-offset: 2px;
    }

.euets-pagelayout .euets-price-name[b-uimrmr5qfm] {
    color: var(--ssy-on-surface-muted);
}

.euets-pagelayout .euets-price-num[b-uimrmr5qfm],
.euets-pagelayout .euets-price-dod[b-uimrmr5qfm] {
    font-family: var(--ssy-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ssy-mono-tracking);
}

/* The price ends on the value column's right edge, where the EU ETS boxes and FuelEU figures end;
   the change sits in the unit column, left-aligned like a unit. */
.euets-pagelayout .euets-price-num[b-uimrmr5qfm] {
    text-align: right;
}

.euets-pagelayout .euets-price-dod[b-uimrmr5qfm] {
    text-align: left;
    white-space: nowrap;
}

.euets-pagelayout .euets-price-dod[b-uimrmr5qfm] {
    color: var(--ssy-on-surface-muted);
    font-size: var(--ssy-text-body-xs);
}

/* ---------- Assumptions: EU ETS data, FuelEU data, vessel details ---------- */

/* FIXED-WIDTH CARDS (BK, 1 Oct 2026: "make all the boxes fixed width", widths as his mock-up). They
   sit in a wrapping row and never stretch, so there is no dead space on their right. max-width: 100%
   is what makes them fit a phone: the narrowest common screen (360px less the page gutters) is
   narrower than the widest card, and there a card takes the screen's width instead. */
.euets-pagelayout .euets-assumptions[b-uimrmr5qfm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-sp-05);
    align-items: flex-start;
}

.euets-pagelayout .euets-prices[b-uimrmr5qfm],
.euets-pagelayout .euets-stack[b-uimrmr5qfm],
.euets-pagelayout .euets-vessel[b-uimrmr5qfm] {
    width: var(--euets-card-w);
    max-width: 100%;
    box-sizing: border-box;
}

/* The single objects run the full content width, from the labels' left edge to the units' right
   edge: the date picker (its trigger takes the room between the two arrows) and the preset picker. */
.euets-pagelayout .euets-pricebar[b-uimrmr5qfm]  .euets-date {
    display: flex;
    width: 100%;
}

    .euets-pagelayout .euets-pricebar[b-uimrmr5qfm]  .euets-date .ssydateselector-trigger {
        flex: 1 1 auto;
        min-width: 0;
    }

/* EU ETS data with FuelEU data under it, in the middle column (BK, 1 Oct 2026). */
.euets-pagelayout .euets-stack[b-uimrmr5qfm] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
    min-width: 0;
}

/* Label | value | unit. A grid, so every value in a card lines up on one right edge. */
.euets-pagelayout .euets-form[b-uimrmr5qfm] {
    display: grid;
    /* Fixed tracks, packed left: with `auto` tracks the grid stretched the label column to fill the
       card, which was the wide gap between each label and its box. */
    grid-template-columns:
        minmax(5.5rem, var(--euets-col-label))
        minmax(4.5rem, var(--euets-col-value))
        minmax(3rem, var(--euets-col-unit));
    justify-content: start;
    align-items: center;
    gap: var(--ssy-sp-02) var(--euets-col-gap);
    font-size: var(--ssy-text-body-sm);
}

.euets-pagelayout .euets-form-label[b-uimrmr5qfm] {
    color: var(--ssy-on-surface-muted);
}

.euets-pagelayout .euets-form-value[b-uimrmr5qfm] {
    text-align: right;
    font-family: var(--ssy-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ssy-mono-tracking);
}

.euets-pagelayout .euets-form-unit[b-uimrmr5qfm] {
    color: var(--ssy-on-surface-muted);
    font-size: var(--ssy-text-body-xs);
}

.euets-pagelayout .euets-form-wide[b-uimrmr5qfm] {
    grid-column: span 2;
}

.euets-pagelayout .euets-preset[b-uimrmr5qfm] {
    margin-bottom: var(--ssy-sp-04);
    width: 100%;
}

/* The consumption grid: engines across, legs down. */
/* Full content width, so its last box ends on the same right edge as the pickers above. Fixed
   layout: the label column takes what the box columns leave. */
.euets-pagelayout .euets-cons[b-uimrmr5qfm] {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    margin-top: var(--ssy-sp-04);
    font-size: var(--ssy-text-body-sm);
}

    .euets-pagelayout .euets-cons th[b-uimrmr5qfm],
    .euets-pagelayout .euets-cons td[b-uimrmr5qfm] {
        padding: 2px 0 2px var(--euets-col-gap);
    }

        .euets-pagelayout .euets-cons th:first-child[b-uimrmr5qfm] {
            padding-left: 0;
        }

    .euets-pagelayout .euets-cons thead th.euets-num[b-uimrmr5qfm] {
        /* 4.5rem boxes: an LNG vessel adds a third (boil-off) column, and the row labels still
           need room beside three of them, on a phone as well. */
        width: calc(4.5rem + var(--euets-col-gap));
    }

.euets-pagelayout .euets-cons-title[b-uimrmr5qfm] {
    caption-side: top;
    text-align: left;
    margin-bottom: var(--ssy-sp-02);
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
}

.euets-pagelayout .euets-cons th[b-uimrmr5qfm] {
    font-weight: 400;
    text-align: left;
    color: var(--ssy-on-surface-muted);
    white-space: nowrap;
}

.euets-pagelayout .euets-cons thead th[b-uimrmr5qfm] {
    font-size: var(--ssy-text-body-xs);
}

    .euets-pagelayout .euets-cons thead th.euets-num[b-uimrmr5qfm] {
        text-align: right;
    }



/* ---------- Calculations: the legs ---------- */

.euets-pagelayout .euets-calc-head[b-uimrmr5qfm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ssy-sp-03) var(--ssy-sp-05);
    margin-bottom: var(--ssy-sp-04);
}

    .euets-pagelayout .euets-calc-head .ssy-card-title[b-uimrmr5qfm] {
        margin: 0;
    }

.euets-pagelayout .euets-calc-actions[b-uimrmr5qfm] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-sp-03);
}

/* Nineteen columns do not fit a laptop screen, and wrapping them would split every figure from
   its heading. The table scrolls inside its card instead of pushing the page wide. */
.euets-pagelayout .euets-legs-scroll[b-uimrmr5qfm] {
    overflow-x: auto;
}

.euets-pagelayout .euets-legs[b-uimrmr5qfm] {
    table-layout: fixed;
    width: 100%;
    min-width: 88rem;
    font-size: var(--ssy-text-body-xs);
}

.euets-pagelayout .euets-col-n[b-uimrmr5qfm] { width: 2rem; }
.euets-pagelayout .euets-col-desc[b-uimrmr5qfm] { width: 7.5rem; }
.euets-pagelayout .euets-col-port[b-uimrmr5qfm] { width: 7.5rem; }
.euets-pagelayout .euets-col-dist[b-uimrmr5qfm] { width: 5.25rem; }
.euets-pagelayout .euets-col-dur[b-uimrmr5qfm] { width: 5.25rem; }
.euets-pagelayout .euets-col-fuel[b-uimrmr5qfm] { width: 4.5rem; }
.euets-pagelayout .euets-col-feu[b-uimrmr5qfm] { width: 5rem; }
.euets-pagelayout .euets-col-ets[b-uimrmr5qfm] { width: 5rem; }
.euets-pagelayout .euets-col-resp[b-uimrmr5qfm] { width: 7rem; }

/* Tighter cells than the report table's 12px: nineteen columns of inputs. */
.euets-pagelayout .euets-legs th[b-uimrmr5qfm],
.euets-pagelayout .euets-legs td[b-uimrmr5qfm] {
    padding: var(--ssy-sp-02) var(--ssy-sp-02);
    vertical-align: middle;
}

/* The group row: the section names over their columns, as Nav9's first header row. */
.euets-pagelayout .euets-legs-groups th[b-uimrmr5qfm] {
    text-align: left;
    font-family: var(--ssy-font-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: var(--ssy-card-title-tracking);
    color: var(--ssy-accent);
}

.euets-pagelayout .euets-legs thead th[b-uimrmr5qfm] {
    white-space: normal;
    line-height: 1.25;
}

/* A left rule where each group starts, so the eye can find Distances, Durations and so on. */
.euets-pagelayout .euets-legs .euets-group[b-uimrmr5qfm] {
    border-left: var(--ssy-card-stroke) solid var(--ssy-border-strong);
}

.euets-pagelayout .euets-center[b-uimrmr5qfm] {
    text-align: center;
}

/* One leg is two rows (at sea, then in port). The stripe is per LEG, not per row, and the rule
   comes under the leg's second row only, so each leg reads as one block. On the <tr> so the
   table's own hover still paints over it. */
.euets-pagelayout .euets-legs tbody td[b-uimrmr5qfm] {
    border-top: 0;
}

.euets-pagelayout .euets-legs tbody tr.euets-leg-end td[b-uimrmr5qfm] {
    border-bottom: var(--ssy-card-stroke) solid var(--ssy-border-strong);
}

.euets-pagelayout .euets-legs tbody tr.euets-leg-even[b-uimrmr5qfm] {
    background: color-mix(in srgb, var(--ssy-nav-item-hover) 75%, transparent);
}

.euets-pagelayout .euets-legno[b-uimrmr5qfm] {
    color: var(--ssy-on-surface-muted);
    font-family: var(--ssy-font-mono);
}

.euets-pagelayout .euets-activity[b-uimrmr5qfm] {
    white-space: nowrap;
}

.euets-pagelayout .euets-daysatsea-label[b-uimrmr5qfm] {
    margin-right: var(--ssy-sp-02);
    color: var(--ssy-on-surface-muted);
    font-family: var(--ssy-font-body);
}

.euets-pagelayout .euets-intl[b-uimrmr5qfm] {
    display: table-cell;
    line-height: 1.3;
}

    .euets-pagelayout .euets-intl span[b-uimrmr5qfm] {
        display: block;
    }

.euets-pagelayout .euets-portfield[b-uimrmr5qfm] {
    width: 100%;
}

.euets-pagelayout .euets-legs .ssy-toggle-row[b-uimrmr5qfm] {
    min-height: 0;
    white-space: nowrap;
}

.euets-pagelayout .euets-remove[b-uimrmr5qfm] {
    margin-left: calc(-1 * var(--ssy-sp-02));
}

/* The number boxes fill their cell. */
.euets-pagelayout .euets-legs[b-uimrmr5qfm]  .euetsnumber,
.euets-pagelayout .euets-cons[b-uimrmr5qfm]  .euetsnumber {
    width: 100%;
}

/* A distance the port lookup has just filled in flashes once, as Nav9's did. The .razor.cs clears
   the marker after the render that draws it, so the next render drops the class. */
.euets-pagelayout .euets-distance-flash[b-uimrmr5qfm]  .euetsnumber-input {
    animation: euets-distance-flash-b-uimrmr5qfm 2s var(--ssy-ease-out) 1;
}

@keyframes euets-distance-flash-b-uimrmr5qfm {
    from { background-color: color-mix(in srgb, var(--ssy-accent) 35%, transparent); }
    to { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
    .euets-pagelayout .euets-distance-flash[b-uimrmr5qfm]  .euetsnumber-input {
        animation: none;
    }
}

/* ---------- Results ---------- */

.euets-pagelayout .euets-results-grid[b-uimrmr5qfm] {
    display: grid;
    grid-template-columns: minmax(24rem, auto) minmax(18rem, 1fr) minmax(18rem, auto);
    gap: var(--ssy-sp-05);
    align-items: start;
}

.euets-pagelayout .euets-results-table[b-uimrmr5qfm] {
    font-size: var(--ssy-text-body-sm);
}

.euets-pagelayout .euets-results-total > *[b-uimrmr5qfm] {
    font-weight: 600;
}

/* The four sentences are the answer, so they are the largest text in the card (BK, 1 Oct 2026; Nav9
   set them at 1.2rem). */
.euets-pagelayout .euets-results-summary[b-uimrmr5qfm] {
    margin: 0;
    padding-left: var(--ssy-sp-05);
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-03);
    font-size: 1.125rem;
    line-height: 1.15;
}

.euets-pagelayout .euets-results-metrics[b-uimrmr5qfm] {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--ssy-sp-03) var(--ssy-sp-05);
    margin: 0;
    font-size: var(--ssy-text-body-sm);
}

    .euets-pagelayout .euets-results-metrics dt[b-uimrmr5qfm] {
        color: var(--ssy-on-surface-muted);
    }

    .euets-pagelayout .euets-results-metrics dd[b-uimrmr5qfm] {
        margin: 0;
        text-align: right;
        font-family: var(--ssy-font-mono);
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--ssy-mono-tracking);
    }

/* ---------- Saved results ---------- */

.euets-pagelayout .euets-saved-bar[b-uimrmr5qfm] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ssy-sp-04) var(--ssy-sp-05);
    margin-bottom: var(--ssy-sp-05);
}

.euets-pagelayout .euets-saved-name[b-uimrmr5qfm] {
    width: 22rem;
    max-width: 100%;
}

.euets-pagelayout .euets-sort[b-uimrmr5qfm] {
    margin: 0 0 0 auto;
}

.euets-pagelayout .euets-confirm[b-uimrmr5qfm] {
    display: inline-flex;
    align-items: center;
    gap: var(--ssy-sp-03);
    font-size: var(--ssy-text-body-sm);
}

.euets-pagelayout .euets-saved-list[b-uimrmr5qfm] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--ssy-sp-03);
}

.euets-pagelayout .euets-saved-item[b-uimrmr5qfm] {
    display: flex;
    align-items: center;
    gap: var(--ssy-sp-02);
    padding: var(--ssy-sp-02) var(--ssy-sp-02) var(--ssy-sp-02) 0;
    border: var(--ssy-card-stroke) solid var(--ssy-card-line);
    border-radius: 4px;
}

.euets-pagelayout .euets-saved-load[b-uimrmr5qfm] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: var(--ssy-sp-02) var(--ssy-sp-03);
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ssy-on-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .euets-pagelayout .euets-saved-load:hover[b-uimrmr5qfm] {
        background: var(--ssy-nav-item-hover);
    }

    .euets-pagelayout .euets-saved-load:focus-visible[b-uimrmr5qfm] {
        outline: 2px solid var(--ssy-accent);
        outline-offset: -2px;
    }

.euets-pagelayout .euets-saved-title[b-uimrmr5qfm] {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--ssy-text-body-sm);
}

.euets-pagelayout .euets-saved-when[b-uimrmr5qfm] {
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
}

/* Delete is destructive, so the confirm uses the down/error fill rather than the primary blue. */
.euets-pagelayout .ssy-btn.euets-danger[b-uimrmr5qfm] {
    background: var(--ssy-delta-down);
    border-color: var(--ssy-delta-down);
}

/* ---------- Rules and disclaimer ---------- */

.euets-pagelayout .euets-footnotes[b-uimrmr5qfm] {
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
    line-height: 1.5;
    max-width: 72rem;
}

.euets-pagelayout .euets-footnotes-title[b-uimrmr5qfm] {
    margin: var(--ssy-sp-04) 0 var(--ssy-sp-02);
    font-size: var(--ssy-text-body-sm);
    font-weight: 600;
    color: var(--ssy-on-surface);
}

.euets-pagelayout .euets-footnotes ul[b-uimrmr5qfm] {
    margin: 0;
    padding-left: var(--ssy-sp-05);
}

/* ---------- Loading / error ---------- */

.euets-loading[b-uimrmr5qfm] {
    min-height: 420px;
    border: var(--ssy-card-stroke) solid var(--ssy-card-line);
    border-radius: var(--ssy-card-radius);
    background: linear-gradient(100deg,
        var(--ssy-card-skeleton-base) 40%,
        var(--ssy-card-skeleton-sheen) 50%,
        var(--ssy-card-skeleton-base) 60%);
    background-size: 200% 100%;
    animation: euets-shimmer-b-uimrmr5qfm 1.4s ease infinite;
}

@keyframes euets-shimmer-b-uimrmr5qfm {
    to { background-position-x: -200%; }
}

@media (prefers-reduced-motion: reduce) {
    .euets-loading[b-uimrmr5qfm] { animation: none; }
}

.euets-empty[b-uimrmr5qfm] {
    margin: 0;
    color: var(--ssy-on-surface-muted);
    font-size: var(--ssy-text-body-sm);
}

/* ---------- Narrower windows ---------- */

@media (max-width: 1400px) {
    .euets-pagelayout .euets-results-grid[b-uimrmr5qfm] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .euets-pagelayout .euets-results-summary[b-uimrmr5qfm] { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 800px) {
    .euets-pagelayout .euets-results-grid[b-uimrmr5qfm] { grid-template-columns: minmax(0, 1fr); }
    .euets-pagelayout .euets-sort[b-uimrmr5qfm] { margin-left: 0; }
}
/* /Components/Pages/DryCargo/EuEts/EuEtsNumber.razor.rz.scp.css */
/* EuEtsNumber: a .ssy-field-s number box. Numbers right-align in mono with tabular figures, so a
   column of them lines up on the digits (numbers-right-aligned). */

.euetsnumber[b-frzzv34yof] {
    min-width: 0;
}

.euetsnumber-input[b-frzzv34yof] {
    text-align: right;
    font-family: var(--ssy-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ssy-mono-tracking);
}

/* The browser spinner eats a third of a 5rem box and the step is still there on the arrow keys.
   Hidden, as Nav9's Blazor Bootstrap input had it. */
.euetsnumber-input[b-frzzv34yof]::-webkit-outer-spin-button,
.euetsnumber-input[b-frzzv34yof]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.euetsnumber-input[type="number"][b-frzzv34yof] {
    -moz-appearance: textfield;
    appearance: textfield;
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Scoped CSS. Tokens only, no raw hex. Buttons come from the shared `ssy-btn` element library in
   ssynavigator.css - this file must not restyle them. */

.error-page[b-glw7ah5hzx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ssy-sp-04);

    width: 100%;
    max-width: 38rem;
    margin: auto;               /* vertical centring inside EmptyLayout's flex column */
    padding: var(--ssy-sp-06) 0;

    text-align: center;
}

/* ---------- Logo ----------
   Both variants render; the theme picks one. data-theme sits on EmptyLayout's root div, so these
   ancestor selectors resolve - scoped CSS only rewrites the final compound selector. */

.error-logo[b-glw7ah5hzx] {
    width: auto;
    height: 5rem;
    margin-bottom: var(--ssy-sp-04);
}

[data-theme="dark"] .error-logo-light[b-glw7ah5hzx],
[data-theme="light"] .error-logo-dark[b-glw7ah5hzx] {
    display: none;
}

/* ---------- Copy ---------- */

.error-title[b-glw7ah5hzx] {
    margin: 0;
    font-family: var(--ssy-font-display);
    font-size: clamp(1.5rem, 5vw, var(--ssy-text-h2));
    font-weight: 400;
    line-height: 1.15;
    color: var(--ssy-on-surface);
}

.error-note[b-glw7ah5hzx] {
    margin: 0;
    font-size: var(--ssy-text-body);
    line-height: 1.5;
    color: var(--ssy-on-surface-muted);
}

/* ---------- Contact ---------- */

.error-contact[b-glw7ah5hzx] {
    margin: 0;
}

.error-contact-lead[b-glw7ah5hzx] {
    margin: 0 0 var(--ssy-sp-02);
    font-size: var(--ssy-text-body-sm);
    color: var(--ssy-on-surface-muted);
}

.error-contact-list[b-glw7ah5hzx] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    font-size: var(--ssy-text-body-sm);
}

.error-contact-list a[b-glw7ah5hzx],
.error-details a[b-glw7ah5hzx] {
    color: var(--ssy-accent);
    text-decoration: none;
}

.error-contact-list a:hover[b-glw7ah5hzx],
.error-contact-list a:focus-visible[b-glw7ah5hzx] {
    text-decoration: underline;
}

/* ---------- Diagnostics ----------
   Quiet by design. Useful to whoever reports the fault, invisible to everyone else. */

.error-meta[b-glw7ah5hzx] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--ssy-sp-02) var(--ssy-sp-04);
    align-items: baseline;

    width: 100%;
    margin: var(--ssy-sp-05) 0 0;
    padding-top: var(--ssy-sp-04);
    border-top: 1px solid var(--ssy-border-subtle);

    font-size: var(--ssy-text-body-xs);
    text-align: start;
}

.error-meta dt[b-glw7ah5hzx] {
    color: var(--ssy-on-surface-muted);
    white-space: nowrap;
}

.error-meta dd[b-glw7ah5hzx] {
    margin: 0;
    min-width: 0;
    color: var(--ssy-on-surface);
    overflow-wrap: anywhere;
}

.error-meta code[b-glw7ah5hzx] {
    font-family: var(--ssy-font-mono);
    font-size: inherit;
}

.error-details[b-glw7ah5hzx] {
    width: 100%;
    margin-top: var(--ssy-sp-05);
    text-align: start;
    font-size: var(--ssy-text-body-xs);
}

.error-details summary[b-glw7ah5hzx] {
    cursor: pointer;
    color: var(--ssy-on-surface-muted);
}

.error-details pre[b-glw7ah5hzx] {
    margin: var(--ssy-sp-03) 0 0;
    padding: var(--ssy-sp-04);

    border: 1px solid var(--ssy-border-subtle);
    border-radius: var(--ssy-radius-md);
    background: var(--ssy-surface-variant);

    font-family: var(--ssy-font-mono);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.error-page kbd[b-glw7ah5hzx] {
    padding: 0 var(--ssy-sp-02);
    border: 1px solid var(--ssy-border-subtle);
    border-radius: 4px;
    background: var(--ssy-surface-variant);
    font-family: var(--ssy-font-mono);
    font-size: 0.9em;
}
/* /Components/Pages/Futures/BalticDefinitions/BalticDefinitions.razor.rz.scp.css */
/* Baltic Ship Type Definitions - every colour is a --ssy-* token. See the header of BalticDefinitions.razor.
   Cards three-across on a wide screen, two on a laptop, one on a phone - an auto-fill grid rather than
   Nav9's Bootstrap columns. Every card in a row is the row's height, with the source pinned to its foot. */

.balticdefs-pagelayout[b-2fodsv9fje] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr));
    gap: var(--ssy-sp-04);
}

.balticdefs-pagelayout .balticdefs-card[b-2fodsv9fje] {
    display: flex;
    flex-direction: column;
}

.balticdefs-pagelayout .balticdefs-list[b-2fodsv9fje] {
    margin: 0;
    padding-left: 1.1em;
    font-size: var(--ssy-text-body-sm);
    line-height: 1.5;
}

    .balticdefs-pagelayout .balticdefs-list li + li[b-2fodsv9fje] {
        margin-top: var(--ssy-sp-02);
    }

.balticdefs-pagelayout .balticdefs-text[b-2fodsv9fje] {
    margin: 0;
    font-size: var(--ssy-text-body-sm);
    line-height: 1.5;
}

.balticdefs-pagelayout .balticdefs-source[b-2fodsv9fje] {
    margin-top: auto;
    padding-top: var(--ssy-card-pad);
}

.balticdefs-empty[b-2fodsv9fje] {
    color: var(--ssy-on-surface-muted);
}
/* /Components/Pages/Futures/BunkerFwdPrices/BunkerFwdPrices.razor.rz.scp.css */
/* SSY Bunker Live Prices - every colour is a --ssy-* token. See the header of BunkerFwdPrices.razor.
   The table, toggles, buttons, checkboxes and card are the house components (ssynavigator.css); this
   file only lays them out and adds the change text and the year rule. The table and the chart panel
   are authored in this component (the Prices fragment and the popup's Body), so they carry this
   page's scope and need no ::deep, even though PageRolesGate and SsyPopup draw them. */

.bunkerfwd-pagelayout[b-d8ddwhkw59] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);
}

/* ---------- Toolbar: last update, the two toggles, the chart button ---------- */

.bunkerfwd-pagelayout .bunkerfwd-toolbar[b-d8ddwhkw59] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-03) var(--ssy-sp-05);
}

.bunkerfwd-pagelayout .bunkerfwd-lastupdate[b-d8ddwhkw59] {
    margin: 0;
    font-size: var(--ssy-text-body-sm);
    color: var(--ssy-on-surface-muted);
    white-space: nowrap;
}

    .bunkerfwd-pagelayout .bunkerfwd-lastupdate time[b-d8ddwhkw59] {
        font-family: var(--ssy-font-mono);
        letter-spacing: var(--ssy-mono-tracking);
        color: var(--ssy-on-surface);
    }

    /* Nav9's thresholds: over 18 hours old is stale, over 36 very stale. Colour carries it, never a
       heavier mono weight (START-HERE §5) - the very-stale label goes bold in the body face instead. */
    .bunkerfwd-pagelayout .bunkerfwd-lastupdate-stale[b-d8ddwhkw59],
    .bunkerfwd-pagelayout .bunkerfwd-lastupdate-stale time[b-d8ddwhkw59],
    .bunkerfwd-pagelayout .bunkerfwd-lastupdate-verystale[b-d8ddwhkw59],
    .bunkerfwd-pagelayout .bunkerfwd-lastupdate-verystale time[b-d8ddwhkw59] {
        color: var(--ssy-delta-down-text);
    }

    .bunkerfwd-pagelayout .bunkerfwd-lastupdate-verystale[b-d8ddwhkw59] {
        font-weight: 600;
    }

.bunkerfwd-pagelayout .bunkerfwd-toggles[b-d8ddwhkw59] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-03) var(--ssy-sp-05);
}

.bunkerfwd-pagelayout .bunkerfwd-chartbtn[b-d8ddwhkw59] {
    margin-left: auto;
}

.bunkerfwd-pagelayout .bunkerfwd-empty[b-d8ddwhkw59] {
    color: var(--ssy-on-surface-muted);
}

/* ---------- The price table ---------- */

/* ---------- The table is its own viewport ----------
   BK, 26 Oct 2026: the table is too wide by design, and he did not want to scroll to the foot of the page
   to reach its scroll bar. So the box scrolls BOTH ways and is never taller than the window: its own
   scroll bars are always on screen, the header row sticks to its top and the period column to its left,
   and the mouse drags it (BunkerFwdPrices.razor.js) as a finger already does on a tablet.

   THE HEIGHT. 100dvh less the shell's header and this page's toolbar and card chrome above the table
   (about 15rem together), with a floor so a short window still shows a useful block of rows. A table
   shorter than that is simply its own height - max-height, not height. */
.bunkerfwd-pagelayout .bunkerfwd-tablewrap[b-d8ddwhkw59] {
    overflow: auto;
    max-height: max(18rem, calc(100dvh - 15rem));
    overscroll-behavior: contain;
    cursor: grab;
    border-radius: var(--ssy-field-radius);
}

    .bunkerfwd-pagelayout .bunkerfwd-tablewrap[data-ssy-dragging][b-d8ddwhkw59] {
        cursor: grabbing;
        user-select: none;
    }

    .bunkerfwd-pagelayout .bunkerfwd-tablewrap:focus-visible[b-d8ddwhkw59] {
        outline: 2px solid var(--ssy-accent);
        outline-offset: 2px;
    }

/* The cells' padding is what you grab; the text is still selectable with a double-click. */
.bunkerfwd-pagelayout .bunkerfwd-table[b-d8ddwhkw59] {
    width: max-content;
    min-width: 100%;
}

    .bunkerfwd-pagelayout .bunkerfwd-table thead th[b-d8ddwhkw59] {
        position: sticky;
        top: 0;
        z-index: 2;
        white-space: normal;
        min-width: 6.5rem;
        max-width: 8rem;
        vertical-align: bottom;
        /* The header band's tint over the card's solid fill, so rows scrolling under it do not show
           through if the tint is translucent in a theme. */
        background: linear-gradient(var(--ssy-surface-subtle), var(--ssy-surface-subtle)), var(--ssy-card-fill-solid);
    }

    .bunkerfwd-pagelayout .bunkerfwd-table thead th:first-child[b-d8ddwhkw59],
    .bunkerfwd-pagelayout .bunkerfwd-table tbody th[b-d8ddwhkw59] {
        position: sticky;
        left: 0;
        min-width: 4.5rem;
    }

    /* The corner cell sticks both ways and sits over everything. */
    .bunkerfwd-pagelayout .bunkerfwd-table thead th:first-child[b-d8ddwhkw59] {
        z-index: 3;
    }

    .bunkerfwd-pagelayout .bunkerfwd-table tbody th[b-d8ddwhkw59] {
        z-index: 1;
        background: var(--ssy-card-fill-solid);
    }

    /* Rows run without rules; the one rule is where the year changes (Nav9's coloured spacer row). */
    .bunkerfwd-pagelayout .bunkerfwd-table tbody th[b-d8ddwhkw59],
    .bunkerfwd-pagelayout .bunkerfwd-table tbody td[b-d8ddwhkw59] {
        border-top-color: transparent;
    }

    .bunkerfwd-pagelayout .bunkerfwd-table tbody tr.bunkerfwd-yearstart > th[b-d8ddwhkw59],
    .bunkerfwd-pagelayout .bunkerfwd-table tbody tr.bunkerfwd-yearstart > td[b-d8ddwhkw59] {
        border-top-color: var(--ssy-border-strong);
    }

    .bunkerfwd-pagelayout .bunkerfwd-table tbody tr:hover > td[b-d8ddwhkw59] {
        background: var(--ssy-nav-item-hover);
    }

    /* The stuck period cell keeps a solid fill under the hover wash, or the prices sliding under it show. */
    .bunkerfwd-pagelayout .bunkerfwd-table tbody tr:hover > th[b-d8ddwhkw59] {
        background: linear-gradient(var(--ssy-nav-item-hover), var(--ssy-nav-item-hover)), var(--ssy-card-fill-solid);
    }

/* Price and change side by side, the change smaller. The change is FFA Live Prices' plain text
   (IntradayCurveTable.razor.css, .intraday-curve-changetext): up --ssy-delta-up, down --ssy-accent-10-300. */
.bunkerfwd-pagelayout .bunkerfwd-change[b-d8ddwhkw59] {
    display: inline-block;
    min-width: 4.5em;
    margin-left: var(--ssy-sp-02);
    font-size: 0.85em;
    text-align: right;
    color: var(--ssy-on-surface-muted);
}

    .bunkerfwd-pagelayout .bunkerfwd-change.bunkerfwd-change-up[b-d8ddwhkw59] { color: var(--ssy-delta-up); }
    .bunkerfwd-pagelayout .bunkerfwd-change.bunkerfwd-change-down[b-d8ddwhkw59] { color: var(--ssy-accent-10-300); }

/* ---------- Chart popup ---------- */

.bunkerfwd-chartpanel[b-d8ddwhkw59] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);
}

.bunkerfwd-timeline[b-d8ddwhkw59] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-03);
    padding: var(--ssy-sp-04);
    border: var(--ssy-card-stroke) solid var(--ssy-card-line);
    border-radius: var(--ssy-card-radius);
}

.bunkerfwd-timeline-head[b-d8ddwhkw59] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-03);
}

.bunkerfwd-timeline-times[b-d8ddwhkw59] {
    display: flex;
    gap: var(--ssy-sp-05);
    margin: 0;
}

    .bunkerfwd-timeline-times dt[b-d8ddwhkw59] {
        font-size: var(--ssy-text-body-xs);
        color: var(--ssy-on-surface-muted);
    }

    .bunkerfwd-timeline-times dd[b-d8ddwhkw59] {
        margin: 0;
        font-family: var(--ssy-font-mono);
        letter-spacing: var(--ssy-mono-tracking);
        font-size: var(--ssy-text-body-sm);
    }

    .bunkerfwd-timeline-now dd[b-d8ddwhkw59] {
        color: var(--ssy-accent);
    }

.bunkerfwd-timeline-buttons[b-d8ddwhkw59] {
    display: flex;
    gap: var(--ssy-sp-02);
}

.bunkerfwd-slider[b-d8ddwhkw59] {
    width: 100%;
    accent-color: var(--ssy-accent);
    cursor: pointer;
}

.bunkerfwd-chartbody[b-d8ddwhkw59] {
    display: flex;
    gap: var(--ssy-sp-04);
    min-height: 0;
}

.bunkerfwd-routepicker[b-d8ddwhkw59] {
    flex: 0 0 13rem;
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    max-height: 32rem;
    overflow-y: auto;
    margin: 0;
    padding: 0 var(--ssy-sp-03) 0 0;
    border: 0;
    border-right: var(--ssy-card-stroke) solid var(--ssy-border-strong);
}

/* The chart sits on the popup's own surface; Highcharts fills this height (navigator-highchart H6). */
.bunkerfwd-chart[b-d8ddwhkw59] {
    flex: 1 1 auto;
    min-width: 0;
    height: 32rem;
}

    .bunkerfwd-chart .bunkerfwd-empty[b-d8ddwhkw59] {
        color: var(--ssy-on-surface-muted);
    }

@media (max-width: 760px) {
    .bunkerfwd-pagelayout .bunkerfwd-chartbtn[b-d8ddwhkw59] {
        margin-left: 0;
    }

    .bunkerfwd-chartbody[b-d8ddwhkw59] {
        flex-direction: column;
    }

    .bunkerfwd-routepicker[b-d8ddwhkw59] {
        flex: 0 0 auto;
        max-height: 10rem;
        padding: 0 0 var(--ssy-sp-03);
        border-right: 0;
        border-bottom: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    }

    .bunkerfwd-chart[b-d8ddwhkw59] {
        height: 22rem;
    }
}
/* /Components/Pages/Futures/TradeTracker/LiveTrades.razor.rz.scp.css */


.date-select-simple-arrows[b-cppjcvqoa5] {
    font-size: 20px;
    width: 30px;
}

.dateChanger-date[b-cppjcvqoa5] {
    font-size: 16px;
    width: 160px;
    display: inline-block;
    text-align: center;
}

.date-select-simple-arrows.disable[b-cppjcvqoa5] {
    color: var(--ssy-tt-fg-muted);
}

    .date-select-simple-arrows.disable:hover[b-cppjcvqoa5] {
        color: var(--ssy-tt-fg-muted);
        cursor: default;
        font-weight: normal;
    }

.arrow[b-cppjcvqoa5] {
    height: 20px;
    width: 20px;
}

    .arrow.switch-arrow[b-cppjcvqoa5] {
        transform: rotate(180deg);
    }

.tooltip-box[b-cppjcvqoa5] {
    position: fixed;
    padding: 10px;
    background-color: var(--ssy-tt-bg-raised);
    border-radius: 5px;
    color: var(--ssy-tt-fg);
}


.filtertextbox[b-cppjcvqoa5] {
    width: 300px;
    padding-right: 4px;
    margin-left: 5%;
    margin-top: 0%;
}


.ssythemefilter[b-cppjcvqoa5] {
    background-color: var(--ssy-tt-bg-panel);
    border-color: var(--ssy-tt-line-strong);
    color: var(--ssy-tt-fg);
}

.pulsenewtrade[b-cppjcvqoa5] {
    animation-name: pulseNewTradeSettings-b-cppjcvqoa5;
    animation-duration: 700ms;
    animation-iteration-count: 40;
    animation-timing-function: linear;
    font-weight: bold;
    color: var(--ssy-tt-fg);
    background-color: var(--ssy-tt-bg-hover) !important;
}

.tradetable-row[b-cppjcvqoa5] {
    cursor: pointer;
    height: 1.5em;
}

.tradetable-div[b-cppjcvqoa5] {
    font-family: var(--ssy-font-body);
    font-size: calc(0.9 * var(--tt-rem, 10pt));
    flex-basis: content;
    flex-shrink: 1;
    width: 100%;
}

.tradetable[b-cppjcvqoa5] {
    width: 650px;
}

.numcol[b-cppjcvqoa5] {
    text-align: right;
}

.centercol[b-cppjcvqoa5] {
    text-align: center;
}

.lightUnderscore[b-cppjcvqoa5] {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--ssy-tt-fg-muted); /* safari still uses vendor prefix */
    text-decoration-color: var(--ssy-tt-fg-muted);
}

.stattable-routename[b-cppjcvqoa5] {
    border-top: solid 1px var(--ssy-tt-line-strong);
    border-bottom: solid 1px var(--ssy-tt-line-strong);
    background-color: none;
    font-weight: bold;
    color: var(--ssy-tt-link);
}

.stattable-detail[b-cppjcvqoa5] {
    background-color: none;
}

    .stattable-detail:hover[b-cppjcvqoa5] {
        background-color: var(--ssy-tt-bg-hover);
    }

.tradesummarylogo[b-cppjcvqoa5] {
    background-image: url("/_content/Navigator.Shared/assets/Lines/SSYShippingLines_01_stretchable.svg");
    background-size: 100% 200%;
    /*background-position-y: -10px;*/
}

@keyframes pulseNewTradeSettings-b-cppjcvqoa5 {
    0% {
        color: var(--ssy-tt-fg);
    }

    100% {
        color: var(--ssy-tt-down);
    }
}

/* Nav9's "@media (max-width: 1400px) { .tradetable { width: 450px } }" is a container query on the split
   row now (LiveTrades.razor, .lt-split): Nav15's page area is narrower than the viewport by the rail and
   departments panel when it is pushed, so a viewport breakpoint switched too late and squeezed the chart. */


@media screen and (max-width: 600px) {
    .hide-mobile[b-cppjcvqoa5] {
        display: none;
    }

    .flex-mobile-wrap[b-cppjcvqoa5] {
        flex-wrap: wrap;
    }

    .tradetable[b-cppjcvqoa5] {
        width: 100%;
    }

    .tradetable-div[b-cppjcvqoa5] {
        flex-basis: unset;
        flex-shrink: 1;
        width: 100%;
    }

    .date-select-simple .date-arrows[b-cppjcvqoa5] {
        padding: 0 8px 0 8px;
    }
}
/* /Components/Pages/Futures/TradeTracker/TradeTrackerOrderBook/TradeTrackerOrderBook.razor.rz.scp.css */
/* Order-book spin-off - page-scoped styles.
   ============================================
   Every selector descends from .tradetrackerorderbook-pagelayout so nothing
   leaks into the combined view or the trades-only spin-off. Brand colours come
   from the global ssy-* palette where possible; only the bits unique to this
   layout live here. */

.tradetrackerorderbook-pagelayout[b-cyw1kgltm5] {
    background-color: var(--ssy-tt-bg-well);
    color: var(--ssy-tt-fg);
    font-family: var(--ssy-font-body);
    padding: 8px 8px 16px;
}

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-header[b-cyw1kgltm5] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-title[b-cyw1kgltm5] {
        color: var(--ssy-tt-link);
        font-size: calc(1.4 * var(--tt-rem, 10pt));
        font-weight: bold;
        margin: 0;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-actions[b-cyw1kgltm5] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-viewbtn[b-cyw1kgltm5] {
        font-size: calc(0.8 * var(--tt-rem, 10pt));
        padding: 3px 10px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datebar[b-cyw1kgltm5] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 4px 0;
        margin-bottom: 8px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datenav[b-cyw1kgltm5] {
        color: var(--ssy-tt-link);
        font-size: calc(1.2 * var(--tt-rem, 10pt));
        cursor: pointer;
        padding: 0 4px;
        user-select: none;
    }

        .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datenav:hover[b-cyw1kgltm5] {
            color: var(--ssy-tt-fg);
        }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-datetext[b-cyw1kgltm5] {
        color: var(--ssy-tt-fg);
        font-size: calc(1 * var(--tt-rem, 10pt));
        font-weight: bold;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-orderbookpanel[b-cyw1kgltm5] {
        min-height: calc(5 * var(--tt-rem, 10pt));
        padding: 10px 8px;
        background-color: var(--ssy-tt-bg-panel);
        border: 1px solid var(--ssy-tt-line-strong);
        border-radius: 10px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-tabrow[b-cyw1kgltm5] {
        display: grid;
        gap: 0;
        row-gap: 4px;
        grid-template-columns: repeat(6, calc(10 * var(--tt-rem, 10pt)));
        margin-bottom: 6px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-bookrow[b-cyw1kgltm5] {
        display: flex;
        gap: 10px;
        overflow: visible;
        font-size: calc(0.9 * var(--tt-rem, 10pt));
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-nodata[b-cyw1kgltm5] {
        color: var(--ssy-tt-fg-muted);
        font-size: calc(0.85 * var(--tt-rem, 10pt));
        padding: 10px 4px;
    }

/* Mobile - stack the tab row into a wrapping flex strip and let the
   order-book tables wrap vertically. */
@media screen and (max-width: 700px) {
    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-tabrow[b-cyw1kgltm5] {
        display: flex;
        flex-wrap: wrap;
        grid-template-columns: none;
        gap: 4px;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-bookrow[b-cyw1kgltm5] {
        flex-direction: column;
    }

    .tradetrackerorderbook-pagelayout .tradetrackerorderbook-actions[b-cyw1kgltm5] {
        width: 100%;
    }
}
/* /Components/Pages/Futures/TradeTracker/TradeTrackerTrades/TradeTrackerTrades.razor.rz.scp.css */
/* Trade-list spin-off - page-scoped styles.
   ============================================
   Every selector descends from .tradetrackertrades-pagelayout so nothing
   leaks into the combined view or the order-book spin-off. Brand colours
   come from the global ssy-* palette where possible; only the bits unique
   to this layout live here. */

.tradetrackertrades-pagelayout[b-jpqiicf0yr] {
    background-color: var(--ssy-tt-bg-well);
    color: var(--ssy-tt-fg);
    font-family: var(--ssy-font-body);
    padding: 8px 8px 16px;
}

    .tradetrackertrades-pagelayout .tradetrackertrades-header[b-jpqiicf0yr] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-wrap: wrap;
        margin-bottom: 6px;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-title[b-jpqiicf0yr] {
        color: var(--ssy-tt-link);
        font-size: calc(1.4 * var(--tt-rem, 10pt));
        font-weight: bold;
        margin: 0;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-actions[b-jpqiicf0yr] {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-viewbtn[b-jpqiicf0yr] {
        font-size: calc(0.8 * var(--tt-rem, 10pt));
        padding: 3px 10px;
    }

    /* Totals strip - single-row coloured chips, identical look to the
       combined view but scoped under the spin-off wrapper. */
    .tradetrackertrades-pagelayout .tradetrackertrades-totalsstrip[b-jpqiicf0yr] {
        display: flex;
        margin-top: 4px;
        font-size: calc(0.8 * var(--tt-rem, 10pt));
        overflow: hidden;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalslabel[b-jpqiicf0yr] {
        background-color: var(--ssy-tt-bg-well);
        color: var(--ssy-tt-fg-muted);
        padding: 2px 8px;
        display: flex;
        align-items: center;
        min-width: calc(4 * var(--tt-rem, 10pt));
        border-right: 1px solid var(--ssy-tt-line);
        font-size: calc(0.75 * var(--tt-rem, 10pt));
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalscol[b-jpqiicf0yr] {
        display: flex;
        flex-direction: column;
        border-right: 1px solid var(--ssy-tt-line);
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalscolname[b-jpqiicf0yr] {
        background-color: var(--ssy-tt-bg-raised);
        color: var(--ssy-tt-link);
        text-align: right;
        padding: 2px 8px 0 8px;
        font-size: calc(0.75 * var(--tt-rem, 10pt));
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-totalscolval[b-jpqiicf0yr] {
        background-color: var(--ssy-tt-bg-panel);
        color: var(--ssy-tt-fg);
        text-align: right;
        padding: 0 8px 2px 8px;
        font-weight: bold;
    }

    /* Date + filter row. */
    .tradetrackertrades-pagelayout .tradetrackertrades-datebar[b-jpqiicf0yr] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 4px 0;
        margin-top: 8px;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-datenav[b-jpqiicf0yr] {
        color: var(--ssy-tt-link);
        font-size: calc(1.2 * var(--tt-rem, 10pt));
        cursor: pointer;
        padding: 0 4px;
        user-select: none;
    }

        .tradetrackertrades-pagelayout .tradetrackertrades-datenav:hover[b-jpqiicf0yr] {
            color: var(--ssy-tt-fg);
        }

    .tradetrackertrades-pagelayout .tradetrackertrades-datetext[b-jpqiicf0yr] {
        color: var(--ssy-tt-fg);
        font-size: calc(1 * var(--tt-rem, 10pt));
        font-weight: bold;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-filterinput[b-jpqiicf0yr] {
        background-color: var(--ssy-tt-bg-raised);
        border: 1px solid var(--ssy-tt-line-strong);
        border-radius: 3px;
        color: var(--ssy-tt-fg);
        font-size: calc(0.85 * var(--tt-rem, 10pt));
        padding: 3px 6px;
        flex: 1 1 auto;
        max-width: calc(30 * var(--tt-rem, 10pt));
    }

        .tradetrackertrades-pagelayout .tradetrackertrades-filterinput[b-jpqiicf0yr]::placeholder {
            color: var(--ssy-tt-fg-muted);
        }

        .tradetrackertrades-pagelayout .tradetrackertrades-filterinput:focus[b-jpqiicf0yr] {
            outline: none;
            border-color: var(--ssy-tt-link);
        }

    .tradetrackertrades-pagelayout .tradetrackertrades-hint[b-jpqiicf0yr] {
        color: var(--ssy-tt-fg-muted);
        font-size: calc(0.75 * var(--tt-rem, 10pt));
        margin: 2px 0 6px;
    }

    /* Trade table & summary use the global .tt-table / .tt-tradetable-row /
       .tt-expand-row styles from the combined page's inline <style>, so we
       only add the spin-off wrapper here. table-layout:fixed on a thin
       window keeps the columns scaling with the wrapper rather than
       expanding to their content. */
    .tradetrackertrades-pagelayout .tradetrackertrades-table[b-jpqiicf0yr] {
        width: 100%;
        max-width: calc(60 * var(--tt-rem, 10pt));
        min-width: 0;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-summarywrap[b-jpqiicf0yr] {
        margin-top: 12px;
        background-color: var(--ssy-tt-bg-panel);
        width: fit-content;
    }

/* Mobile - collapse the date bar and let the totals strip wrap so the page
   works docked in a narrow window or on a phone. */
@media screen and (max-width: 700px) {
    .tradetrackertrades-pagelayout .tradetrackertrades-totalsstrip[b-jpqiicf0yr] {
        flex-wrap: wrap;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-datebar[b-jpqiicf0yr] {
        flex-wrap: wrap;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-filterinput[b-jpqiicf0yr] {
        max-width: 100%;
    }

    .tradetrackertrades-pagelayout .tradetrackertrades-actions[b-jpqiicf0yr] {
        width: 100%;
    }
}
/* /Components/Pages/Futures/TradeTracker/TradeTracker_010_Main.razor.rz.scp.css */


/* ── In-row panel layout ───────────────────────────────────────────────
   Each row of order-book panels is a horizontal flex strip; rows stack.
   The trade-list / trade-summary panels sit inside a row but should only
   take the height of the order-book panels beside them and scroll their
   own content. align-self:stretch gives the wrapper the row's height; the
   child component is absolutely filled inside it and scrolls vertically. */
.tt-panelrow[b-464p195llk] {
    margin-bottom: 10px;
}

/* Porthole button - a round "window" that jumps between the 010 and 020 pages.
   Deliberately reads as a portal/porthole (metal rim + glowing glass), not a link. */
.tt-porthole[b-464p195llk] {
    flex-shrink: 0;
    width: calc(2.5 * var(--tt-rem, 10pt));
    height: calc(2.5 * var(--tt-rem, 10pt));
    border-radius: 50%;
    border: 3px solid var(--ssy-tt-link);
    background: radial-gradient(circle at 32% 28%, var(--ssy-tt-bom) 0%, var(--ssy-tt-bg-raised) 55%, var(--ssy-tt-bg-well) 100%);
    color: var(--ssy-tt-fg);
    font-family: var(--ssy-font-body);
    font-weight: 700;
    font-size: calc(0.85 * var(--tt-rem, 10pt));
    letter-spacing: 0.5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 7px var(--ssy-tt-glow-accent), inset 0 2px 4px color-mix(in srgb, var(--ssy-tt-fg) 25%, transparent), inset 0 -3px 6px var(--ssy-tt-shadow);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

    .tt-porthole:hover[b-464p195llk] {
        color: var(--ssy-tt-fg);
        transform: scale(1.06);
        box-shadow: 0 0 14px var(--ssy-tt-accent), inset 0 2px 4px color-mix(in srgb, var(--ssy-tt-fg) 30%, transparent), inset 0 -3px 6px var(--ssy-tt-shadow);
    }

    .tt-porthole:active[b-464p195llk] {
        transform: scale(0.97);
    }

/* Light theme (17 Oct 2026, BK: "the circle thing does not look good in light mode"). Nav9's porthole is
   dark glass and only ever sat on a dark page; mixed from light tokens it went muddy (a blue blot on grey
   with a black inner shadow). On a light page it is light glass instead: white highlight top-left, a
   blue-tinted rim, the blue ring and blue lettering, and a soft blue inner shadow and glow. */
[data-theme="light"] .tt-porthole[b-464p195llk] {
    background: radial-gradient(circle at 32% 28%, #FFFFFF 0%, color-mix(in srgb, var(--ssy-tt-link) 14%, #FFFFFF) 50%, color-mix(in srgb, var(--ssy-tt-link) 32%, #FFFFFF) 100%);
    color: var(--ssy-tt-link);
    box-shadow: 0 0 6px color-mix(in srgb, var(--ssy-tt-link) 35%, transparent), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px color-mix(in srgb, var(--ssy-tt-link) 30%, transparent);
}

    [data-theme="light"] .tt-porthole:hover[b-464p195llk] {
        color: var(--ssy-tt-link);
        box-shadow: 0 0 12px color-mix(in srgb, var(--ssy-tt-link) 60%, transparent), inset 0 2px 4px rgba(255, 255, 255, 0.9), inset 0 -3px 6px color-mix(in srgb, var(--ssy-tt-link) 30%, transparent);
    }

.tt-inline-panel[b-464p195llk] {
    position: relative;
    align-self: stretch;
    /* A definite floor so a row made up ENTIRELY of inline panels (e.g. closed/open/cancelled)
       doesn't collapse to a single line - there is no order-book sibling to stretch against.
       When there IS a taller sibling, align-self:stretch still grows the panel to match it. */
    min-height: calc(22 * var(--tt-rem, 10pt));
    width: calc(34 * var(--tt-rem, 10pt));
    border: 1px solid var(--ssy-tt-line-strong);
    border-radius: 6px;
    overflow: hidden;
    background: var(--ssy-tt-bg-panel);
}

    /* Per-type widths. Order lists are wide tables (~45.5em) so they get more room to avoid a
       horizontal scrollbar; the trade summary is widened by ~1 scrollbar width for the same reason. */
    .tt-inline-panel.tt-inline-panel--list[b-464p195llk] {
        width: calc(48.5 * var(--tt-rem, 10pt));
    }

    .tt-inline-panel.tt-inline-panel--summary[b-464p195llk] {
        width: calc(31 * var(--tt-rem, 10pt));
    }

    /* Fixed title bar so you can tell open / closed / cancelled etc. apart. */
    .tt-inline-panel .tt-inline-title[b-464p195llk] {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: calc(1.5 * var(--tt-rem, 10pt));
        line-height: calc(1.5 * var(--tt-rem, 10pt));
        padding: 0 8px;
        font-family: var(--ssy-font-body);
        font-size: calc(0.8 * var(--tt-rem, 10pt));
        font-weight: 700;
        color: var(--ssy-tt-fg);
        background: var(--ssy-tt-bg-panel);
        border-bottom: 1px solid var(--ssy-tt-line-strong);
        z-index: 1;
    }

    /* Scrolls vertically only; horizontal is hidden so the 3 order lists never show a
       horizontal scrollbar (the panel is sized wide enough to fit instead). */
    .tt-inline-panel .tt-inline-scroll[b-464p195llk] {
        position: absolute;
        top: calc(1.5 * var(--tt-rem, 10pt));
        left: 0;
        right: 0;
        bottom: 0;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 4px;
    }

.date-select-simple-arrows[b-464p195llk] {
    font-size: 20px;
    width: 30px;
}

.dateChanger-date[b-464p195llk] {
    font-size: 16px;
    width: 160px;
    display: inline-block;
    text-align: center;
}

.date-select-simple-arrows.disable[b-464p195llk] {
    color: var(--ssy-tt-fg-muted);
}

    .date-select-simple-arrows.disable:hover[b-464p195llk] {
        color: var(--ssy-tt-fg-muted);
        cursor: default;
        font-weight: normal;
    }

.arrow[b-464p195llk] {
    height: 20px;
}

    .arrow.switch-arrow[b-464p195llk] {
        transform: rotate(180deg);
    }

.tooltip-box[b-464p195llk] {
    position: fixed;
    padding: 10px;
    background-color: var(--ssy-tt-bg-hover);
    border: 1px solid var(--ssy-tt-line-strong);
    border-radius: 5px;
    color: var(--ssy-tt-fg);
}


.filtertextbox[b-464p195llk] {
    width: 300px;
    padding-right: 4px;
    margin-left: 5%;
    margin-top: 0%;
}


.ssythemefilter[b-464p195llk] {
    background-color: var(--ssy-tt-bg-raised);
    border-color: var(--ssy-tt-line-strong);
    color: var(--ssy-tt-fg);
}


.tt-tradetable-row[b-464p195llk] {
    cursor: pointer;
    height: calc(1.5 * var(--tt-rem, 10pt));
}

.tt-tradetable-div[b-464p195llk] {
    flex-basis: content;
    flex-shrink: 1;
    width: 100%;
    /* Stop the left panel from taking the whole viewport on wide screens -
       calc(50 * var(--tt-rem, 10pt)) is wide enough to fit the trade table comfortably while leaving
       room for the order-book / summary on the right. The split-divider div
       lives directly after this element so the right panel still fills the
       rest of the row. */
    max-width: calc(50 * var(--tt-rem, 10pt));
    /* Default flex items have min-width:auto which equals the intrinsic
       content width - for a wide table that means the wrapper refuses to
       shrink. min-width:0 lets the wrapper honour its max-width / parent
       constraints, and overflow-x:auto adds a scrollbar inside the wrapper
       when the table's own column min-widths still exceed the wrapper. The
       table bleeding under the right-hand panel was the symptom of both
       missing. */
    min-width: 0;
    overflow-x: auto;
}

/* ── Split divider between the trade list (left) and the order-book / summary
   (right). Width matches the previous flex gap of 10px so the layout doesn't
   shift when the user toggles the panel. */
.tt-split-divider[b-464p195llk] {
    width: 10px;
    flex-shrink: 0;
    border-left: 1px solid var(--ssy-tt-line);
    border-right: 1px solid var(--ssy-tt-line);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    cursor: pointer;
    color: var(--ssy-tt-fg);
    transition: background-color 120ms ease, width 120ms ease;
}

    .tt-split-divider:hover[b-464p195llk] {
        background-color: var(--ssy-tt-bg-raised);
    }


    /* When the left panel is hidden, give the divider a touch more presence so
   it remains easy to find. The chevron flips direction via the data-state attr. */
    .tt-split-divider[data-state="collapsed"][b-464p195llk] {
        width: 14px;
        background-color: var(--ssy-tt-bg-raised);
    }

/* Split-screen button - sits inline with the Premium / Clearer controls. */
.tt-split-screen-btn[b-464p195llk] {
    background-color: var(--ssy-tt-bg-raised);
    border: 1px solid var(--ssy-tt-line-strong);
    border-radius: 3px;
    color: var(--ssy-tt-link);
    font-family: var(--ssy-font-body);
    font-size: calc(0.8 * var(--tt-rem, 10pt));
    padding: 2px 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

    .tt-split-screen-btn:hover[b-464p195llk] {
        background-color: var(--ssy-tt-bg-hover);
        color: var(--ssy-tt-fg);
    }

/* Let the table follow its wrapper rather than sit at a fixed 650px.
   The colgroup min-widths in the markup still keep columns readable; the
   wrapper's overflow-x picks up the slack when the wrapper goes really
   narrow (e.g. the user dragging the split divider in tight). */
.tt-tradetable[b-464p195llk] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* Per-column filter row below the headers - slightly indented inputs so they
   read as a sub-row of the table header. */
.tt-filter-row[b-464p195llk] {
    background-color: var(--ssy-tt-bg-panel);
}

    .tt-filter-row th[b-464p195llk] {
        padding: 2px 4px;
    }



/* The right-hand pane (order books / summary). It carries flex:1 inline, so this width never sets its
   size. As in Nav9 it is a WIDTH, not a min-width: on a flex item a width only caps the automatic
   minimum (min(content, width)), so the pane reserves page-less-633px only when the order books are
   actually that wide, and otherwise the trade list keeps its full width (17 Oct 2026 - a min-width
   reserved it every time and squeezed the trade list on narrow desks).

   Nav9 wrote it against the viewport: calc(100vw - 685px), and 100vw - 485px under 1400px. Its page
   area was the viewport less ~52px, so those reserve the page area less 633px / 433px for the trade
   list. Nav15's page area also loses the nav rail, so the same reservation is written against the
   flex container (100%), which is exactly the page area whatever the shell is doing. */
.tt-page-right-tab[b-464p195llk] {
    overflow: visible;
    width: calc(100% - 633px);
}

.numcol[b-464p195llk] {
    text-align: right;
}

.centercol[b-464p195llk] {
    text-align: center;
}

.lightUnderscore[b-464p195llk] {
    text-decoration: underline;
    -webkit-text-decoration-color: var(--ssy-tt-fg-muted); /* safari still uses vendor prefix */
    text-decoration-color: var(--ssy-tt-fg-muted);
}

.stattable-routename[b-464p195llk] {
    border-top: solid 1px var(--ssy-tt-line);
    border-bottom: solid 1px var(--ssy-tt-line);
    background-color: var(--ssy-tt-bg-panel);
    font-weight: bold;
    color: var(--ssy-tt-link);
}

.stattable-detail[b-464p195llk] {
    background-color: transparent;
}

    .stattable-detail:hover[b-464p195llk] {
        background-color: var(--ssy-tt-bg-hover);
    }

.tradesummarylogo[b-464p195llk] {
    background-image: url("/_content/Navigator.Shared/assets/Lines/SSYShippingLines_01_stretchable.svg");
    background-size: 100% 200%;
    /*background-position-y: -10px;*/
}



.pulsenewtrade[b-464p195llk] {
    animation-name: pulseNewTradeSettings-b-464p195llk;
    animation-duration: 700ms;
    animation-iteration-count: 40;
    animation-timing-function: linear;
    color: var(--ssy-tt-highlight);
    /*color: var(--ssy-tt-highlight);*/
    text-shadow: 0 0 15px var(--ssy-tt-glow);
}

@keyframes pulseNewTradeSettings-b-464p195llk {

    0% {
        text-shadow: 0 0 15px var(--ssy-tt-glow);
    }

    50% {
        text-shadow: 0 0 2px var(--ssy-tt-glow);
    }

    100% {
        text-shadow: 0 0 15px var(--ssy-tt-glow);
    }
}

@media screen and (max-width: 1400px) {
    .tt-tradetable[b-464p195llk] {
        width: 100%;
    }

    /* The narrower reservation (Nav9: 100vw - 485px under 1400px) is a CONTAINER query on .tt-split-row
       now - see the global <style> in TradeTracker_010_Main.razor. A viewport query would fire at the
       wrong page width here, because Nav15's rail (and the departments panel, if it ever pushes) take part of the viewport. */
}


@media screen and (max-width: 600px) {
    .hide-mobile[b-464p195llk] {
        display: none;
    }

    .flex-mobile-wrap[b-464p195llk] {
        flex-wrap: wrap;
    }

    .tt-tradetable[b-464p195llk] {
        width: 100%;
    }

    .tt-tradetable-div[b-464p195llk] {
        flex-basis: unset;
        flex-shrink: 1;
        width: 100%;
        /* Reset the desktop cap on mobile - the panels stack so the trade
           table should be free to use the full viewport width. */
        max-width: none;
    }

    /* The vertical divider doesn't make sense on a stacked mobile layout,
       so hide it. The split-screen button still works (and is the better
       affordance on a phone anyway). */
    .tt-split-divider[b-464p195llk] {
        display: none;
    }

    .date-select-simple .date-arrows[b-464p195llk] {
        padding: 0 8px 0 8px;
    }

    .tt-page-right-tab[b-464p195llk] {
        width: 100%;
    }
}
/* /Components/Pages/Futures/TradeTracker/TradeTracker_200_TradeEditPopup.razor.rz.scp.css */
/* ── TradeTracker_200_TradeEditPopup scoped styles ──────── */

.tt-tradeedit-form[b-xu0mzolxll] {
    font-family: var(--ssy-font-body);
    font-size: calc(0.88 * var(--tt-rem, 10pt));
    color: var(--ssy-tt-fg);
    padding: 4px 0;
}

.tt-tradeedit-subheader[b-xu0mzolxll] {
    color: var(--ssy-tt-fg-muted);
    font-size: calc(0.78 * var(--tt-rem, 10pt));
    margin: 0 0 12px 0;
}

/* Label + input side-by-side row */
.tt-tradeedit-row[b-xu0mzolxll] {
    display: grid;
    grid-template-columns: calc(8 * var(--tt-rem, 10pt)) 1fr;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.tt-tradeedit-label[b-xu0mzolxll] {
    color: var(--ssy-tt-fg-muted);
    font-size: calc(0.82 * var(--tt-rem, 10pt));
    text-align: right;
    white-space: nowrap;
}

/* Make all controlled inputs fill their grid cell */
.tt-tradeedit-field[b-xu0mzolxll] {
    width: 100%;
    box-sizing: border-box;
}

/* Validation error */
.tt-tradeedit-error[b-xu0mzolxll] {
    color: var(--ssy-tt-down);
    font-size: calc(0.8 * var(--tt-rem, 10pt));
    margin: 4px 0 8px calc(8.5 * var(--tt-rem, 10pt)); /* align under the input column */
}

/* Delete confirmation strip */
.tt-tradeedit-deleteconfirm[b-xu0mzolxll] {
    background-color: color-mix(in srgb, var(--ssy-tt-badge-bg) 15%, transparent);
    border: 1px solid var(--ssy-tt-badge-bg);
    border-radius: 4px;
    padding: 10px 12px;
    margin: 8px 0;
    font-size: calc(0.85 * var(--tt-rem, 10pt));
    color: var(--ssy-tt-down);
}

/* Button row */
.tt-tradeedit-buttons[b-xu0mzolxll] {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* Delete trigger button - danger-coloured outline */
.tt-tradeedit-deletetrigger[b-xu0mzolxll] {
    color: var(--ssy-tt-down) !important;
    border-color: var(--ssy-tt-badge-bg) !important;
}

    .tt-tradeedit-deletetrigger:hover[b-xu0mzolxll] {
        background-color: color-mix(in srgb, var(--ssy-tt-badge-bg) 25%, transparent) !important;
    }

/* Delete confirm action button */
.tt-tradeedit-deletebtn[b-xu0mzolxll] {
    background-color: var(--ssy-tt-badge-bg) !important;
    border-color: var(--ssy-tt-badge-bg) !important;
    color: var(--ssy-tt-badge-fg) !important;
}

    .tt-tradeedit-deletebtn:hover[b-xu0mzolxll] {
        background-color: color-mix(in srgb, var(--ssy-tt-badge-bg) 80%, black) !important;   /* Nav9 #a93226, darker than rest */
    }
/* /Components/Pages/Futures/TradeTracker/TradeTracker_210_ImpliedExecutePopup.razor.rz.scp.css */
.tradetracker-impliedexec[b-5mv4pq5u2n] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: calc(0.9 * var(--tt-rem, 10pt));
}

    /* ── Derivation strip: SPREAD + OUTRIGHT ⇒ IMPLIED ───────────────────────── */
    .tradetracker-impliedexec .impliedexec-derivation[b-5mv4pq5u2n] {
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .tradetracker-impliedexec .impliedexec-card[b-5mv4pq5u2n] {
        flex: 1;
        border: 1px solid var(--ssy-tt-line-strong);
        border-radius: 6px;
        /* No top padding - the tag below acts as a _150-style header strip that bleeds to the edges. */
        padding: 0 0 8px 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: var(--ssy-tt-bg-panel);
        overflow: hidden;
    }

    /* The two source orders are interactive - make that obvious. */
    .tradetracker-impliedexec .impliedexec-card-source[b-5mv4pq5u2n] {
        cursor: pointer;
    }

        .tradetracker-impliedexec .impliedexec-card-source:hover[b-5mv4pq5u2n] {
            border-color: var(--ssy-tt-implied);
            box-shadow: 0 0 0 2px color-mix(in srgb, var(--ssy-tt-implied) 20%, transparent);
        }

    /* The derived result, accented in the implied colour. */
    .tradetracker-impliedexec .impliedexec-card-implied[b-5mv4pq5u2n] {
        border-color: var(--ssy-tt-implied);
        border-width: 2px;
        background: color-mix(in srgb, var(--ssy-tt-implied) 5%, transparent);
    }

    .tradetracker-impliedexec .impliedexec-card-client[b-5mv4pq5u2n] {
        font-weight: 700;
        font-size: calc(1 * var(--tt-rem, 10pt));
    }

    .tradetracker-impliedexec .impliedexec-card-contract[b-5mv4pq5u2n] {
        color: var(--ssy-tt-fg-muted);
    }

    .tradetracker-impliedexec .impliedexec-card-price[b-5mv4pq5u2n] {
        font-size: calc(1.15 * var(--tt-rem, 10pt));
        font-weight: 700;
        margin-top: 2px;
    }

        .tradetracker-impliedexec .impliedexec-card-price span[b-5mv4pq5u2n] {
            font-size: calc(0.72 * var(--tt-rem, 10pt));
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 3px;
            margin-right: 6px;
            vertical-align: middle;
        }

    .tradetracker-impliedexec .impliedexec-bid[b-5mv4pq5u2n] {
        background: var(--ssy-tt-ok-bg);
        color: var(--ssy-tt-ok-fg);
    }

    .tradetracker-impliedexec .impliedexec-offer[b-5mv4pq5u2n] {
        background: var(--ssy-tt-badge-bg);
        color: var(--ssy-tt-badge-fg);
    }

    .tradetracker-impliedexec .impliedexec-card-edit[b-5mv4pq5u2n] {
        margin-top: 4px;
        font-size: calc(0.72 * var(--tt-rem, 10pt));
        color: var(--ssy-tt-implied);
    }

    /* The + and ⇒ operators between cards. */
    .tradetracker-impliedexec .impliedexec-op[b-5mv4pq5u2n] {
        display: flex;
        align-items: center;
        font-size: calc(1.4 * var(--tt-rem, 10pt));
        color: var(--ssy-tt-fg-muted);
        padding: 0 2px;
    }

    /* ── Per-leg completion (each leg is an order-book entry via an embedded _150) ──
   No outer border / vertical padding: the _151 form already has its own framed look,
   so the wrapper just reserves horizontal room and a tight gap between legs. Dropping
   the grey border and the top/bottom padding reclaims the vertical space the popup
   needed (it was a touch too tall for the screen). */
    .tradetracker-impliedexec .impliedexec-completelegs[b-5mv4pq5u2n] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tradetracker-impliedexec .impliedexec-completeleg[b-5mv4pq5u2n] {
        padding: 0 10px;
        border-radius: 6px;
    }

        /* Blue glow on the leg whose derivation card was clicked - shows the cursor has jumped here. */
        .tradetracker-impliedexec .impliedexec-completeleg.impliedexec-leg-focus[b-5mv4pq5u2n] {
            box-shadow: 0 0 0 3px var(--ssy-tt-accent), 0 0 8px 2px var(--ssy-tt-glow-accent);
            background-color: var(--ssy-tt-accent);
        }

    .tradetracker-impliedexec .impliedexec-leg-title[b-5mv4pq5u2n] {
        font-weight: 700;
        margin-bottom: 6px;
    }

    .tradetracker-impliedexec .impliedexec-done[b-5mv4pq5u2n] {
        margin-left: 8px;
        color: var(--ssy-tt-up);
        font-weight: 700;
    }

    /* On the focused leg's accent fill, green-on-cyan was unreadable: the title and "✓ recorded" take the on-accent text. */
    .tradetracker-impliedexec .impliedexec-leg-focus .impliedexec-leg-title[b-5mv4pq5u2n],
    .tradetracker-impliedexec .impliedexec-leg-focus .impliedexec-done[b-5mv4pq5u2n] {
        color: var(--ssy-tt-fg-on-accent);
    }

    .tradetracker-impliedexec .impliedexec-error[b-5mv4pq5u2n] {
        color: var(--ssy-tt-down);
        font-weight: 600;
    }
/* /Components/Pages/Futures/TradeTracker/TradeTracker_220_ImpliedSpreadExecutePopup.razor.rz.scp.css */
/* Scoped styles for the implied-SPREAD execution popup. Mirrors TradeTracker_210's look - Blazor
   scoped CSS can't be shared between two components, so the visual language is duplicated here so
   both execution popups read identically. */

.tradetracker-impliedexec[b-3s2sqwo3iq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    font-size: calc(0.9 * var(--tt-rem, 10pt));
}

    /* ── Derivation strip: OUTRIGHT − OUTRIGHT ⇒ SPREAD ──────────────────────── */
    .tradetracker-impliedexec .impliedexec-derivation[b-3s2sqwo3iq] {
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .tradetracker-impliedexec .impliedexec-card[b-3s2sqwo3iq] {
        flex: 1;
        border: 1px solid var(--ssy-tt-line-strong);
        border-radius: 6px;
        /* No top padding - the tag below acts as a _150-style header strip that bleeds to the edges. */
        padding: 0 0 8px 0;
        display: flex;
        flex-direction: column;
        gap: 2px;
        background: var(--ssy-tt-bg-panel);
        overflow: hidden;
    }

    .tradetracker-impliedexec .impliedexec-card-source[b-3s2sqwo3iq] {
        cursor: default;
    }

    /* The derived result, accented in the implied colour. */
    .tradetracker-impliedexec .impliedexec-card-implied[b-3s2sqwo3iq] {
        border-color: var(--ssy-tt-implied);
        border-width: 2px;
        background: color-mix(in srgb, var(--ssy-tt-implied) 5%, transparent);
    }

    .tradetracker-impliedexec .impliedexec-card-client[b-3s2sqwo3iq] {
        font-weight: 700;
        font-size: calc(1 * var(--tt-rem, 10pt));
    }

    .tradetracker-impliedexec .impliedexec-card-contract[b-3s2sqwo3iq] {
        color: var(--ssy-tt-fg-muted);
    }

    .tradetracker-impliedexec .impliedexec-card-price[b-3s2sqwo3iq] {
        font-size: calc(1.15 * var(--tt-rem, 10pt));
        font-weight: 700;
        margin-top: 2px;
    }

        .tradetracker-impliedexec .impliedexec-card-price span[b-3s2sqwo3iq] {
            font-size: calc(0.72 * var(--tt-rem, 10pt));
            font-weight: 700;
            padding: 1px 5px;
            border-radius: 3px;
            margin-right: 6px;
            vertical-align: middle;
        }

    .tradetracker-impliedexec .impliedexec-bid[b-3s2sqwo3iq] {
        background: var(--ssy-tt-ok-bg);
        color: var(--ssy-tt-ok-fg);
    }

    .tradetracker-impliedexec .impliedexec-offer[b-3s2sqwo3iq] {
        background: var(--ssy-tt-badge-bg);
        color: var(--ssy-tt-badge-fg);
    }

    /* The − and ⇒ operators between cards. */
    .tradetracker-impliedexec .impliedexec-op[b-3s2sqwo3iq] {
        display: flex;
        align-items: center;
        font-size: calc(1.4 * var(--tt-rem, 10pt));
        color: var(--ssy-tt-fg-muted);
        padding: 0 2px;
    }

    /* ── Per-leg completion (each leg is an order-book entry via an embedded _151) ── */
    .tradetracker-impliedexec .impliedexec-completelegs[b-3s2sqwo3iq] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .tradetracker-impliedexec .impliedexec-completeleg[b-3s2sqwo3iq] {
        padding: 0 10px;
        border-radius: 6px;
    }

    .tradetracker-impliedexec .impliedexec-leg-title[b-3s2sqwo3iq] {
        font-weight: 700;
        margin-bottom: 6px;
    }

    .tradetracker-impliedexec .impliedexec-done[b-3s2sqwo3iq] {
        margin-left: 8px;
        color: var(--ssy-tt-up);
        font-weight: 700;
    }

    .tradetracker-impliedexec .impliedexec-error[b-3s2sqwo3iq] {
        color: var(--ssy-tt-down);
        font-weight: 600;
    }
/* /Components/Pages/Futures/TradeTracker/TradeTracker_800_Reports.razor.rz.scp.css */
.tradetracker-reports-pagelayout[b-kwlvu9gatv] {
    display: flex;
    align-items: stretch;
    /* Nav9: calc(100vh - 60px), the window less its 60px navbar. Nav15: the window less the Nav Title bar
       and the page's 24px top + bottom padding (.ssy-pagepad on .tt-suite; .mainlayout-page's until
       21 Oct 2026). */
    min-height: calc(100dvh - var(--ssy-nav-title-height) - 2 * var(--ssy-sp-06));
    color: var(--ssy-tt-fg);
    font-family: var(--ssy-font-body);
}

/* Thin always-visible rail down the left edge - the click target that opens the report list. */
.tradetracker-reports-pagelayout .reports-rail[b-kwlvu9gatv] {
    flex: 0 0 26px;
    background-color: var(--ssy-tt-bg-panel);
    border: none;
    border-right: 1px solid var(--ssy-tt-line);
    color: var(--ssy-tt-link);
    cursor: pointer;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

    .tradetracker-reports-pagelayout .reports-rail:hover[b-kwlvu9gatv],
    .tradetracker-reports-pagelayout .reports-rail.open[b-kwlvu9gatv] {
        background-color: var(--ssy-tt-bg-raised);
        color: var(--ssy-tt-fg);
    }

.tradetracker-reports-pagelayout .reports-rail-label[b-kwlvu9gatv] {
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    font-size: calc(0.7 * var(--tt-rem, 10pt));
}

/* Flyout list of available reports. */
.tradetracker-reports-pagelayout .reports-menu[b-kwlvu9gatv] {
    flex: 0 0 230px;
    background-color: var(--ssy-tt-bg-panel);
    border-right: 1px solid var(--ssy-tt-line);
    padding: 10px 0;
}

.tradetracker-reports-pagelayout .reports-menu-title[b-kwlvu9gatv] {
    color: var(--ssy-tt-fg-muted);
    font-size: calc(0.7 * var(--tt-rem, 10pt));
    letter-spacing: 2px;
    padding: 0 12px 8px 12px;
}

.tradetracker-reports-pagelayout .reports-menu-item[b-kwlvu9gatv] {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    border-left: 3px solid transparent;
    color: var(--ssy-tt-fg);
    cursor: pointer;
    padding: 6px 12px;
}

    .tradetracker-reports-pagelayout .reports-menu-item:hover[b-kwlvu9gatv] {
        background-color: var(--ssy-tt-bg-raised);
    }

    .tradetracker-reports-pagelayout .reports-menu-item.selected[b-kwlvu9gatv] {
        border-left-color: var(--ssy-tt-link);
        background-color: var(--ssy-tt-bg-panel);
    }

.tradetracker-reports-pagelayout .reports-menu-item-name[b-kwlvu9gatv] {
    display: block;
    color: var(--ssy-tt-link);
    font-size: calc(0.85 * var(--tt-rem, 10pt));
}

.tradetracker-reports-pagelayout .reports-menu-item-desc[b-kwlvu9gatv] {
    display: block;
    color: var(--ssy-tt-fg-muted);
    font-size: calc(0.7 * var(--tt-rem, 10pt));
}

.tradetracker-reports-pagelayout .reports-body[b-kwlvu9gatv] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 10px 14px;
    overflow-x: auto;
}

.tradetracker-reports-pagelayout .reports-empty[b-kwlvu9gatv] {
    color: var(--ssy-tt-fg-muted);
    font-size: calc(0.85 * var(--tt-rem, 10pt));
    padding: 20px;
}

/* At 900px and below the shell pads the page by 16px plus the safe area, not 24px, so the desktop
   min-height above would overshoot by a few pixels and scroll. Let the page size to its content there. */
@media (max-width: 900px) {
    .tradetracker-reports-pagelayout[b-kwlvu9gatv] {
        min-height: auto;
    }
}
/* /Components/Pages/Futures/TradeTracker/TradeTracker_805_ClientSummary.razor.rz.scp.css */
.tradetracker-clientsummary[b-bbnoi0g4g3] {
    font-family: var(--ssy-font-body);
    font-size: calc(0.8 * var(--tt-rem, 10pt));
    color: var(--ssy-tt-fg);
}

/* ── Toolbar ───────────────────────────────────────────── */
.tradetracker-clientsummary .cs-toolbar[b-bbnoi0g4g3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    padding-bottom: 10px;
}

.tradetracker-clientsummary .cs-title[b-bbnoi0g4g3] {
    color: var(--ssy-tt-link);
    font-size: calc(1.1 * var(--tt-rem, 10pt));
    font-weight: bold;
}

.tradetracker-clientsummary .cs-datepicker[b-bbnoi0g4g3] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tradetracker-clientsummary .cs-date-nav[b-bbnoi0g4g3] {
    background: none;
    border: none;
    color: var(--ssy-tt-link);
    cursor: pointer;
    font-size: calc(0.9 * var(--tt-rem, 10pt));
    padding: 0 2px;
}

    .tradetracker-clientsummary .cs-date-nav:disabled[b-bbnoi0g4g3] {
        color: var(--ssy-tt-fg-muted);
        cursor: default;
    }

.tradetracker-clientsummary .cs-date-select[b-bbnoi0g4g3] {
    background-color: var(--ssy-tt-bg-raised);
    border: 1px solid var(--ssy-tt-line-strong);
    border-radius: 3px;
    color: var(--ssy-tt-fg);
    font-family: var(--ssy-font-body);
    font-size: calc(0.8 * var(--tt-rem, 10pt));
    min-width: calc(12 * var(--tt-rem, 10pt));
    padding: 3px 6px;
}

.tradetracker-clientsummary .cs-lots-toggle[b-bbnoi0g4g3] {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: var(--ssy-tt-fg-muted);
}

.tradetracker-clientsummary .cs-totals[b-bbnoi0g4g3] {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.tradetracker-clientsummary .cs-totals-label[b-bbnoi0g4g3] {
    color: var(--ssy-tt-fg-muted);
    font-size: calc(0.7 * var(--tt-rem, 10pt));
}

.tradetracker-clientsummary .cs-totals-val[b-bbnoi0g4g3] {
    color: var(--ssy-tt-fg);
    font-weight: bold;
    padding-right: 10px;
}

.tradetracker-clientsummary .cs-copy-msg[b-bbnoi0g4g3] {
    color: var(--ssy-tt-teal);
}

.tradetracker-clientsummary .cs-empty[b-bbnoi0g4g3] {
    color: var(--ssy-tt-fg-muted);
    padding: 20px 0;
}

.tradetracker-clientsummary .cs-section-title[b-bbnoi0g4g3] {
    color: var(--ssy-tt-link);
    font-size: calc(0.9 * var(--tt-rem, 10pt));
    font-weight: bold;
    margin: 22px 0 6px 0;
    border-bottom: 1px solid var(--ssy-tt-line);
    padding-bottom: 3px;
}

/* Section title with a control parked on the right of the same rule. */
.tradetracker-clientsummary .cs-section-head[b-bbnoi0g4g3] {
    align-items: baseline;
    display: flex;
    gap: 18px;
    justify-content: space-between;
}

.tradetracker-clientsummary .cs-totals-toggle[b-bbnoi0g4g3] {
    align-items: center;
    color: var(--ssy-tt-fg-muted);
    cursor: pointer;
    display: flex;
    font-weight: normal;
    gap: 5px;
}

/* ── Shared table look, matching the Trade Tracker pages ─ */
.tradetracker-clientsummary .cs-table[b-bbnoi0g4g3] {
    background-color: var(--ssy-tt-bg-panel);
    border: 1px solid var(--ssy-tt-line);
    border-collapse: collapse;
    color: var(--ssy-tt-fg);
}

    .tradetracker-clientsummary .cs-table thead tr[b-bbnoi0g4g3] {
        background-color: var(--ssy-tt-bg-panel);
        border-bottom: 1px solid var(--ssy-tt-line);
        color: var(--ssy-tt-fg-muted);
    }

    .tradetracker-clientsummary .cs-table th[b-bbnoi0g4g3] {
        font-weight: normal;
        white-space: nowrap;
    }

.tradetracker-clientsummary .cs-left[b-bbnoi0g4g3] {
    text-align: left;
}

.tradetracker-clientsummary .cs-num[b-bbnoi0g4g3] {
    text-align: right;
}

/* ── Route columns ─────────────────────────────────────── */
.tradetracker-clientsummary .cs-flow-row[b-bbnoi0g4g3] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}

.tradetracker-clientsummary .cs-flow-col[b-bbnoi0g4g3] {
    flex: 0 0 auto;
    max-width: calc(30 * var(--tt-rem, 10pt));
}

.tradetracker-clientsummary .cs-flow-head[b-bbnoi0g4g3] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding-bottom: 4px;
}

.tradetracker-clientsummary .cs-copy-btn[b-bbnoi0g4g3] {
    background-color: var(--ssy-tt-bg-raised);
    border: 1px solid var(--ssy-tt-line-strong);
    border-radius: 3px;
    color: var(--ssy-tt-link);
    cursor: pointer;
    font-size: calc(0.7 * var(--tt-rem, 10pt));
    padding: 2px 8px;
}

    .tradetracker-clientsummary .cs-copy-btn:hover[b-bbnoi0g4g3] {
        border-color: var(--ssy-tt-link);
        color: var(--ssy-tt-fg);
    }

.tradetracker-clientsummary .cs-flow-title[b-bbnoi0g4g3] {
    color: var(--ssy-tt-link);
    font-weight: bold;
}

.tradetracker-clientsummary .cs-flow-title-plain[b-bbnoi0g4g3] {
    display: block;
    padding-bottom: 4px;
}

.tradetracker-clientsummary .cs-flow-table[b-bbnoi0g4g3] {
    width: 100%;
}

.tradetracker-clientsummary .cs-period-name[b-bbnoi0g4g3] {
    color: var(--ssy-tt-link);
    font-weight: bold;
    padding: 6px 6px 0 6px;
    width: calc(5 * var(--tt-rem, 10pt));
}

.tradetracker-clientsummary .cs-period-range[b-bbnoi0g4g3] {
    color: var(--ssy-tt-fg-muted);
    padding: 6px 6px 0 6px;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-period-lots[b-bbnoi0g4g3] {
    color: var(--ssy-tt-fg);
    font-weight: bold;
    padding: 6px 6px 0 6px;
    text-align: right;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-side-label[b-bbnoi0g4g3] {
    color: var(--ssy-tt-fg-muted);
    padding: 0 6px;
    vertical-align: top;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-side-names[b-bbnoi0g4g3] {
    padding: 0 6px;
    word-break: break-word;
}

.tradetracker-clientsummary .cs-period-last td[b-bbnoi0g4g3] {
    border-bottom: 1px solid var(--ssy-tt-line);
    padding-bottom: 6px;
}

.tradetracker-clientsummary .cs-lots[b-bbnoi0g4g3] {
    color: var(--ssy-tt-fg-muted);
    font-size: calc(0.7 * var(--tt-rem, 10pt));
}

/* ── Buy / sell table ──────────────────────────────────── */
.tradetracker-clientsummary .cs-bs-table[b-bbnoi0g4g3] {
    min-width: calc(16 * var(--tt-rem, 10pt));
}

    .tradetracker-clientsummary .cs-bs-table td[b-bbnoi0g4g3],
    .tradetracker-clientsummary .cs-bs-table th[b-bbnoi0g4g3] {
        padding: 1px 8px;
    }

/* ── Five day matrix ───────────────────────────────────── */
.tradetracker-clientsummary .cs-matrix-table td[b-bbnoi0g4g3],
.tradetracker-clientsummary .cs-matrix-table th[b-bbnoi0g4g3] {
    padding: 1px 10px;
}

.tradetracker-clientsummary .cs-matrix-name[b-bbnoi0g4g3] {
    color: var(--ssy-tt-link);
    vertical-align: middle;
    white-space: nowrap;
}

.tradetracker-clientsummary .cs-matrix-side[b-bbnoi0g4g3] {
    color: var(--ssy-tt-fg-muted);
    font-size: calc(0.7 * var(--tt-rem, 10pt));
}

.tradetracker-clientsummary .cs-matrix-total td[b-bbnoi0g4g3] {
    font-weight: bold;
}

/* Whichever row ends a client block carries the rule under it. */
.tradetracker-clientsummary .cs-matrix-lastrow td[b-bbnoi0g4g3] {
    border-bottom: 1px solid var(--ssy-tt-line);
}

/* The 5px breather the desk asked for between clients. */
.tradetracker-clientsummary .cs-matrix-gap td[b-bbnoi0g4g3] {
    border: none;
    height: 5px;
    padding: 0;
}
/* /Components/Pages/Futures/TradeTracker/TradeTracker_915_LayoutEditor.razor.rz.scp.css */
/*  Editor for the order-book tab layout. Everything is scoped under
    .tradetracker-layouteditor so it can't bleed into other pages - see
    CLAUDE.md rule 4. We don't restyle the popup chrome (that belongs to
    _190); we only style elements unique to this editor.                 */

.tradetracker-layouteditor[b-y2b0a4ufzv] {
    color: var(--ssy-tt-fg);
    font-size: calc(0.85 * var(--tt-rem, 10pt));
}

    /* One row of panels inside the edited tab. */
    .tradetracker-layouteditor .le-row-block[b-y2b0a4ufzv] {
        border: 1px solid var(--ssy-tt-line);
        border-radius: 6px;
        padding: 8px;
        margin-bottom: 10px;
        background: var(--ssy-tt-bg-well);
    }

    .tradetracker-layouteditor .le-row-header[b-y2b0a4ufzv] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 6px;
    }

    .tradetracker-layouteditor .le-row-label[b-y2b0a4ufzv] {
        color: var(--ssy-tt-fg-muted);
        font-weight: 600;
    }

    .tradetracker-layouteditor .le-addrow-btn[b-y2b0a4ufzv] {
        margin-top: 4px;
    }

    .tradetracker-layouteditor .le-intro[b-y2b0a4ufzv] {
        color: var(--ssy-tt-fg-muted);
        font-size: calc(0.75 * var(--tt-rem, 10pt));
        margin: 0 0 12px;
    }

    .tradetracker-layouteditor .le-section-label[b-y2b0a4ufzv] {
        color: var(--ssy-tt-fg-muted);
        font-size: calc(0.7 * var(--tt-rem, 10pt));
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin: 12px 0 6px;
    }

    /* ── Tab strip ──────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-tabstrip[b-y2b0a4ufzv] {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
        padding: 8px;
        background: var(--ssy-tt-bg-well);
        border: 1px solid var(--ssy-tt-line);
        border-radius: 6px;
        margin-bottom: 18px;
    }

    .tradetracker-layouteditor .le-tabchip[b-y2b0a4ufzv] {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        background: var(--ssy-tt-bg-panel);
        border: 1px solid var(--ssy-tt-line-strong);
        border-radius: 4px;
        cursor: grab;
        user-select: none;
    }

        .tradetracker-layouteditor .le-tabchip:hover[b-y2b0a4ufzv] {
            background: var(--ssy-tt-bg-hover);   /* Nav9 #20203a over the #1a1a2e chip */
        }

    .tradetracker-layouteditor .le-tabchip-selected[b-y2b0a4ufzv] {
        background: var(--ssy-tt-bg-raised);
        border-color: var(--ssy-tt-accent);
        box-shadow: 0 0 0 1px var(--ssy-tt-accent) inset;
        color: var(--ssy-tt-fg);
    }

    .tradetracker-layouteditor .le-tabchip-add[b-y2b0a4ufzv] {
        background: transparent;
        border: 1px dashed var(--ssy-tt-accent);
        color: var(--ssy-tt-accent);
        cursor: pointer;
    }

    .tradetracker-layouteditor .le-tabchip-label[b-y2b0a4ufzv] {
        font-weight: 500;
    }

    .tradetracker-layouteditor .le-grip[b-y2b0a4ufzv] {
        color: var(--ssy-tt-fg-muted);
        font-size: calc(0.85 * var(--tt-rem, 10pt));
        cursor: grab;
    }

    .tradetracker-layouteditor .le-x[b-y2b0a4ufzv] {
        color: var(--ssy-tt-down);
        cursor: pointer;
        margin-left: 4px;
        font-size: calc(0.95 * var(--tt-rem, 10pt));
        line-height: 1;
        padding: 0 2px;
    }

        .tradetracker-layouteditor .le-x:hover[b-y2b0a4ufzv] {
            color: color-mix(in srgb, var(--ssy-tt-down) 60%, var(--ssy-tt-fg));   /* Nav9 #ffaaaa over #FF7777 */
        }

    .tradetracker-layouteditor .le-plus[b-y2b0a4ufzv] {
        font-size: calc(0.95 * var(--tt-rem, 10pt));
        line-height: 1;
    }

    /* ── Edit panel ─────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-edit-panel[b-y2b0a4ufzv] {
        background: var(--ssy-tt-bg-well);
        border: 1px solid var(--ssy-tt-line);
        border-radius: 6px;
        padding: 14px;
    }

    .tradetracker-layouteditor .le-name-row[b-y2b0a4ufzv] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 4px;
    }

    .tradetracker-layouteditor .le-field-label[b-y2b0a4ufzv] {
        color: var(--ssy-tt-fg-muted);
        font-size: calc(0.75 * var(--tt-rem, 10pt));
        min-width: 72px;
    }

    .tradetracker-layouteditor .le-name-input[b-y2b0a4ufzv] {
        width: 220px;
    }

    .tradetracker-layouteditor .le-auto-pill[b-y2b0a4ufzv] {
        color: var(--ssy-tt-up);
        font-size: calc(0.7 * var(--tt-rem, 10pt));
        border: 1px solid var(--ssy-tt-up);
        border-radius: 3px;
        padding: 1px 6px;
    }

    .tradetracker-layouteditor .le-custom-pill[b-y2b0a4ufzv] {
        color: var(--ssy-tt-highlight);
        font-size: calc(0.7 * var(--tt-rem, 10pt));
        border: 1px solid var(--ssy-tt-highlight);
        border-radius: 3px;
        padding: 1px 6px;
    }

    .tradetracker-layouteditor .le-hint[b-y2b0a4ufzv] {
        color: var(--ssy-tt-fg-muted);
        font-size: calc(0.7 * var(--tt-rem, 10pt));
        font-style: italic;
        margin: 0 0 14px 82px;
    }

    /* ── Panel list ─────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-panel-list[b-y2b0a4ufzv] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-bottom: 10px;
    }

    .tradetracker-layouteditor .le-panelrow[b-y2b0a4ufzv] {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 10px;
        background: var(--ssy-tt-bg-panel);
        border: 1px solid var(--ssy-tt-line-strong);
        border-radius: 4px;
        cursor: grab;
    }

    .tradetracker-layouteditor .le-panelrow-special[b-y2b0a4ufzv] {
        background: var(--ssy-tt-bg-well);   /* Nav9 #14142d, darker than a normal row's #1a1a2e */
        border-color: var(--ssy-tt-highlight);
        cursor: default;
    }

    .tradetracker-layouteditor .le-panel-title[b-y2b0a4ufzv] {
        flex: 1;
    }

    .tradetracker-layouteditor .le-short[b-y2b0a4ufzv] {
        color: var(--ssy-tt-fg-muted);
        font-size: calc(0.7 * var(--tt-rem, 10pt));
    }

    .tradetracker-layouteditor .le-add-row[b-y2b0a4ufzv] {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .tradetracker-layouteditor .le-add-select[b-y2b0a4ufzv] {
        flex: 1;
        max-width: 280px;
    }

    .tradetracker-layouteditor .le-add-btn[b-y2b0a4ufzv] {
        padding: 3px 14px;
    }

    .tradetracker-layouteditor .le-error[b-y2b0a4ufzv] {
        color: var(--ssy-tt-down);
        font-size: calc(0.75 * var(--tt-rem, 10pt));
        margin: 10px 0 0;
    }

    /* ── Footer ─────────────────────────────────────────────────────── */
    .tradetracker-layouteditor .le-footer[b-y2b0a4ufzv] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 18px;
        padding-top: 14px;
        border-top: 1px solid var(--ssy-tt-line);
        flex-wrap: wrap;
        gap: 8px;
    }

    .tradetracker-layouteditor .le-reset-btn[b-y2b0a4ufzv] {
        background: transparent;
        color: var(--ssy-tt-down);
        border: 1px solid var(--ssy-tt-down);
        border-radius: 3px;
        padding: 4px 14px;
        font-size: calc(0.75 * var(--tt-rem, 10pt));
        cursor: pointer;
    }

        .tradetracker-layouteditor .le-reset-btn:hover[b-y2b0a4ufzv] {
            background: color-mix(in srgb, var(--ssy-tt-down) 13%, transparent);
        }

    .tradetracker-layouteditor .le-reset-confirm[b-y2b0a4ufzv] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: calc(0.75 * var(--tt-rem, 10pt));
        color: var(--ssy-tt-highlight);
    }

    .tradetracker-layouteditor .le-reset-yes[b-y2b0a4ufzv] {
        padding: 3px 10px;
    }

    .tradetracker-layouteditor .le-saved-msg[b-y2b0a4ufzv] {
        color: var(--ssy-tt-up);
        font-size: calc(0.7 * var(--tt-rem, 10pt));
    }
/* /Components/Pages/Futures/TradeTracker/TradeTracker_950_EditHistoricData.razor.rz.scp.css */
/* IntradayPriceEditor page-scoped styles. Prefix: itp- (IntradayPrice editor). */

.itp-page[b-w1ciiy16tz] {
    padding: 0.75em 1em;
}

.itp-heading[b-w1ciiy16tz] {
    margin-bottom: 0.5em;
}

/* Two-column layout: left filters, right table. */
.itp-layout[b-w1ciiy16tz] {
    display: flex;
    gap: 1.5em;
    align-items: flex-start;
    margin-top: 0.75em;
}

.itp-left[b-w1ciiy16tz] {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    width: 17em;
    flex: 0 0 17em;
}

.itp-right[b-w1ciiy16tz] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
}

.itp-label[b-w1ciiy16tz] {
    font-weight: 600;
    font-size: 0.85em;
    margin-top: 0.4em;
}

.itp-date[b-w1ciiy16tz] {
    border: 1px solid var(--ssy-tt-line-strong);
    border-radius: 4px;
    padding: 0.25em 0.4em;
    font-size: 0.9em;
}

.itp-listbox[b-w1ciiy16tz] {
    width: 100%;
    border: 1px solid var(--ssy-tt-line-strong);
    border-radius: 4px;
    padding: 0.2em;
    font-size: 0.9em;
}

.itp-legend[b-w1ciiy16tz] {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-bottom: 0.6em;
    font-size: 0.8em;
    flex-wrap: wrap;
}

.itp-swatch[b-w1ciiy16tz] {
    display: inline-block;
    padding: 0.1em 0.5em;
    border-radius: 3px;
    font-size: 0.8em;
}

.itp-msg[b-w1ciiy16tz] {
    font-style: italic;
    color: var(--ssy-tt-fg-muted);
    margin: 1em 0;
}

.itp-table[b-w1ciiy16tz] {
    border-collapse: collapse;
    width: auto;
    min-width: 32em;
    font-size: 0.9em;
}

.itp-table th[b-w1ciiy16tz],
.itp-table td[b-w1ciiy16tz] {
    border: 1px solid var(--ssy-tt-line);
    padding: 0.25em 0.6em;
    white-space: nowrap;
}

.itp-table thead th[b-w1ciiy16tz] {
    background: var(--ssy-tt-bg-raised);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.itp-table .itp-num[b-w1ciiy16tz] {
    text-align: right;
}

.itp-table .itp-centre[b-w1ciiy16tz] {
    text-align: center;
}

.itp-inp[b-w1ciiy16tz] {
    width: 6.5em;
    text-align: right;
    border: 1px solid var(--ssy-tt-line-strong);
    border-radius: 3px;
    padding: 0.1em 0.35em;
}

.itp-btn[b-w1ciiy16tz] {
    padding: 0.15em 0.7em;
    font-size: 0.85em;
}

/* Escalating red bands for moves over 10% (each 10% is more intense). */
.itp-m1[b-w1ciiy16tz] {
    background: color-mix(in srgb, var(--ssy-tt-down) 15%, transparent);
}

.itp-m2[b-w1ciiy16tz] {
    background: color-mix(in srgb, var(--ssy-tt-down) 30%, transparent);
}

.itp-m3[b-w1ciiy16tz] {
    background: color-mix(in srgb, var(--ssy-tt-down) 50%, transparent);
}

.itp-m4[b-w1ciiy16tz] {
    background: color-mix(in srgb, var(--ssy-tt-down) 70%, transparent);
    color: var(--ssy-tt-badge-fg);
}

.itp-m5[b-w1ciiy16tz] {
    background: var(--ssy-tt-badge-bg);
    color: var(--ssy-tt-badge-fg);
    font-weight: 600;
}

/* Nav15 .ssy-btn carries a 32px min-height; the row buttons stay as compact as Nav9's. */
.itp-btn[b-w1ciiy16tz] {
    min-height: 0;
}
/* /Components/Pages/Technology/ApiManagement/ApiManagement.razor.rz.scp.css */
/* Technology › API Management. Every colour is a --ssy-* token; cards, tables, fields, checkboxes,
   toggles and buttons are the shared objects in ssynavigator.css. What is here is layout: three panels
   side by side that stack on a narrow screen, the scrolling lists, and the highlight on the rows of the
   route group being picked. Everything below is authored in ApiManagement.razor (popup bodies included -
   SsyPopup renders them in place), so it carries this page's scope and needs no ::deep. */

.apimgmt-pagelayout[b-0r2tevhtx0] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);
    min-width: 0;
    font-size: var(--ssy-text-body-sm);
}

.apimgmt-pagelayout code[b-0r2tevhtx0] {
    font-family: var(--ssy-font-mono);
    letter-spacing: var(--ssy-mono-tracking);
}

.apimgmt-pagelayout .apimgmt-lead[b-0r2tevhtx0] {
    margin: 0;
    max-width: 60rem;
}

.apimgmt-pagelayout .apimgmt-muted[b-0r2tevhtx0] {
    margin: 0;
    color: var(--ssy-on-surface-muted);
}

.apimgmt-pagelayout .apimgmt-small[b-0r2tevhtx0] {
    font-size: var(--ssy-text-body-xs);
}

.apimgmt-pagelayout .apimgmt-loading[b-0r2tevhtx0] {
    min-height: 12rem;
}

/* ---------- The three panels ----------
   APIs narrow, the picker a little wider, the detail table takes the rest. Each panel is window-high and
   scrolls inside itself, so the save button and the picker stay in view while a long list is worked. */
.apimgmt-pagelayout .apimgmt-panels[b-0r2tevhtx0] {
    display: grid;
    grid-template-columns: minmax(16rem, 1fr) minmax(18rem, 1.2fr) minmax(24rem, 2fr);
    gap: var(--ssy-sp-04);
    align-items: start;
}

.apimgmt-pagelayout .apimgmt-card[b-0r2tevhtx0] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-03);
    min-width: 0;
    max-height: max(24rem, calc(100dvh - 12rem));
}

.apimgmt-pagelayout .apimgmt-cardhead[b-0r2tevhtx0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-03);
    padding-bottom: var(--ssy-sp-03);
    border-bottom: var(--ssy-card-rule) solid var(--ssy-border-strong);
}

    .apimgmt-pagelayout .apimgmt-cardhead .ssy-card-title[b-0r2tevhtx0] {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

.apimgmt-pagelayout .apimgmt-scroll[b-0r2tevhtx0] {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

/* ---------- APIs ---------- */
.apimgmt-pagelayout .apimgmt-apilist[b-0r2tevhtx0] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.apimgmt-pagelayout .apimgmt-api[b-0r2tevhtx0] {
    display: flex;
    align-items: flex-start;
    gap: var(--ssy-sp-02);
    border-radius: var(--ssy-row-selected-radius);
}

    .apimgmt-pagelayout .apimgmt-api + .apimgmt-api[b-0r2tevhtx0] {
        margin-top: var(--ssy-sp-02);
    }

    .apimgmt-pagelayout .apimgmt-api:hover[b-0r2tevhtx0] {
        background: var(--ssy-nav-item-hover);
    }

    .apimgmt-pagelayout .apimgmt-api-selected[b-0r2tevhtx0],
    .apimgmt-pagelayout .apimgmt-api-selected:hover[b-0r2tevhtx0] {
        background: var(--ssy-row-selected-fill);
        box-shadow: inset 0 0 0 var(--ssy-row-selected-line-w) var(--ssy-row-selected-line);
    }

.apimgmt-pagelayout .apimgmt-apibtn[b-0r2tevhtx0] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ssy-sp-03);
    border: 0;
    background: transparent;
    color: var(--ssy-on-surface);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

    .apimgmt-pagelayout .apimgmt-apibtn:focus-visible[b-0r2tevhtx0] {
        outline: 2px solid var(--ssy-field-line-focus);
        outline-offset: -2px;
        border-radius: var(--ssy-row-selected-radius);
    }

.apimgmt-pagelayout .apimgmt-apiname[b-0r2tevhtx0] {
    font-family: var(--ssy-font-mono);
    letter-spacing: var(--ssy-mono-tracking);
    overflow-wrap: anywhere;
}

.apimgmt-pagelayout .apimgmt-apimeta[b-0r2tevhtx0],
.apimgmt-pagelayout .apimgmt-clients[b-0r2tevhtx0] {
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
    overflow-wrap: anywhere;
}

.apimgmt-pagelayout .apimgmt-noclients[b-0r2tevhtx0] {
    margin: 0;
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-delta-down-text);
}

/* ---------- Select routes ---------- */
.apimgmt-pagelayout .apimgmt-pickeractions[b-0r2tevhtx0] {
    display: flex;
    gap: var(--ssy-sp-02);
}

.apimgmt-pagelayout .apimgmt-routelist[b-0r2tevhtx0] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    padding-right: var(--ssy-sp-02);
}

.apimgmt-pagelayout .apimgmt-pickerheading[b-0r2tevhtx0] {
    margin: var(--ssy-sp-03) 0 0;
    font-size: var(--ssy-text-body-xs);
    font-weight: 600;
    letter-spacing: var(--ssy-card-title-tracking);
    text-transform: uppercase;
    color: var(--ssy-accent);
}

    .apimgmt-pagelayout .apimgmt-pickerheading:first-child[b-0r2tevhtx0] {
        margin-top: 0;
    }

.apimgmt-pagelayout .apimgmt-pickerrow[b-0r2tevhtx0] {
    font-size: var(--ssy-text-body-xs);
}

/* ---------- API detail ---------- */
.apimgmt-pagelayout .apimgmt-detailbar[b-0r2tevhtx0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-02) var(--ssy-sp-03);
}

.apimgmt-pagelayout .apimgmt-detailactions[b-0r2tevhtx0] {
    display: flex;
    gap: var(--ssy-sp-02);
}

.apimgmt-pagelayout .apimgmt-status[b-0r2tevhtx0] {
    margin: 0;
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
}

    .apimgmt-pagelayout .apimgmt-status.apimgmt-status-error[b-0r2tevhtx0] {
        color: var(--ssy-delta-down-text);
    }

.apimgmt-pagelayout .apimgmt-table thead th[b-0r2tevhtx0] {
    position: sticky;
    top: 0;
    z-index: 1;
    background: linear-gradient(var(--ssy-surface-subtle), var(--ssy-surface-subtle)), var(--ssy-card-fill);
}

.apimgmt-pagelayout .apimgmt-table tbody td[b-0r2tevhtx0] {
    padding-top: var(--ssy-sp-02);
    padding-bottom: var(--ssy-sp-02);
    vertical-align: middle;
}

.apimgmt-pagelayout .apimgmt-row[b-0r2tevhtx0] {
    cursor: grab;
}

    .apimgmt-pagelayout .apimgmt-row:hover > td[b-0r2tevhtx0] {
        background: var(--ssy-nav-item-hover);
    }

    /* The rows of the group being picked, so "Remove all" and the ticks can be matched up at a glance. */
    .apimgmt-pagelayout .apimgmt-row.apimgmt-row-ingroup > td[b-0r2tevhtx0] {
        background: color-mix(in srgb, var(--ssy-accent) 12%, transparent);
    }

    .apimgmt-pagelayout .apimgmt-row.apimgmt-row-dragging > td[b-0r2tevhtx0] {
        opacity: 0.5;
    }

.apimgmt-pagelayout .apimgmt-formula[b-0r2tevhtx0] {
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
}

.apimgmt-pagelayout .apimgmt-namecell[b-0r2tevhtx0] {
    width: 100%;
    min-width: 14rem;
    cursor: auto;
}

.apimgmt-pagelayout .apimgmt-rowactions[b-0r2tevhtx0] {
    white-space: nowrap;
    text-align: right;
}

/* ---------- Popups: forms ---------- */
.apimgmt-pagelayout .apimgmt-form[b-0r2tevhtx0] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);
}

.apimgmt-pagelayout .apimgmt-formheading[b-0r2tevhtx0] {
    margin: 0 0 var(--ssy-sp-02);
    font-size: var(--ssy-text-body-sm);
    font-weight: 600;
}

.apimgmt-pagelayout .apimgmt-hours[b-0r2tevhtx0] {
    max-width: 8rem;
}

.apimgmt-pagelayout .apimgmt-clientlist[b-0r2tevhtx0] {
    margin: 0 0 var(--ssy-sp-03);
    padding: 0;
    list-style: none;
}

    .apimgmt-pagelayout .apimgmt-clientlist li[b-0r2tevhtx0] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--ssy-sp-02);
    }

.apimgmt-pagelayout .apimgmt-clientemail[b-0r2tevhtx0] {
    font-family: var(--ssy-font-mono);
    letter-spacing: var(--ssy-mono-tracking);
    overflow-wrap: anywhere;
}

.apimgmt-pagelayout .apimgmt-addclient[b-0r2tevhtx0] {
    display: flex;
    align-items: flex-end;
    gap: var(--ssy-sp-02);
}

    .apimgmt-pagelayout .apimgmt-addclient .ssy-field[b-0r2tevhtx0] {
        flex: 1 1 auto;
        min-width: 0;
    }

.apimgmt-pagelayout .apimgmt-danger[b-0r2tevhtx0] {
    padding-top: var(--ssy-sp-04);
    border-top: var(--ssy-card-rule) solid var(--ssy-border-strong);
}

.apimgmt-pagelayout .apimgmt-deletebtn:not(:disabled)[b-0r2tevhtx0] {
    color: var(--ssy-delta-down-text);
    border-color: currentColor;
}

/* ---------- Narrow screens: the panels stack, APIs first ---------- */
@media (max-width: 1100px) {
    .apimgmt-pagelayout .apimgmt-panels[b-0r2tevhtx0] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .apimgmt-pagelayout .apimgmt-detail[b-0r2tevhtx0] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 700px) {
    .apimgmt-pagelayout .apimgmt-panels[b-0r2tevhtx0] {
        grid-template-columns: minmax(0, 1fr);
    }

    .apimgmt-pagelayout .apimgmt-card[b-0r2tevhtx0] {
        max-height: none;
    }

    .apimgmt-pagelayout .apimgmt-apilist[b-0r2tevhtx0],
    .apimgmt-pagelayout .apimgmt-routelist[b-0r2tevhtx0] {
        max-height: 20rem;
    }

    .apimgmt-pagelayout .apimgmt-addclient[b-0r2tevhtx0] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* /Components/Pages/Technology/ComponentSettings/TechnologyComponentSettings.razor.rz.scp.css */
/* Technology › Component Settings. Scoped; every selector starts with .compset-pagelayout and every colour
   is a --ssy-* token. Cards, buttons, fields, the data table, the pager and the popup are the shared
   objects in ssynavigator.css; what is here is the layout around them, the key columns, the setting
   preview and the JSON box. The popup body renders inside the page's scope, so its rules need ::deep
   only where a child component (EditForm, InputTextArea) draws the element. */

.compset-pagelayout[b-czd226f30t] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
    width: 100%;
    min-width: 0;
    font-size: var(--ssy-text-body-sm);
}

.compset-pagelayout .compset-muted[b-czd226f30t] {
    color: var(--ssy-on-surface-muted);
}

/* ---------- Sync card ---------- */
.compset-pagelayout .compset-sync[b-czd226f30t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-04) var(--ssy-sp-06);
}

.compset-pagelayout .compset-lead[b-czd226f30t] {
    flex: 1 1 28rem;
    margin: 0;
    max-width: 60rem;
}

.compset-pagelayout .compset-actions[b-czd226f30t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-03) var(--ssy-sp-04);
}

/* ---------- List head and filters ----------
   The card title's rule moves onto the head row so it runs under the Refresh button too. */
.compset-pagelayout .compset-listhead[b-czd226f30t] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-04);
    margin: 0 0 var(--ssy-card-pad);
    padding-bottom: var(--ssy-sp-03);
    border-bottom: var(--ssy-card-rule) solid var(--ssy-border-strong);
}

    .compset-pagelayout .compset-listhead .ssy-card-title[b-czd226f30t] {
        margin: 0;
    }

.compset-pagelayout .compset-filters[b-czd226f30t] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--ssy-sp-03) var(--ssy-sp-04);
    max-width: 56rem;
    margin-bottom: var(--ssy-sp-05);
}

/* ---------- The table ----------
   Its own sideways scroll, so a long key or setting never widens the page. Key columns are capped and
   ellipsed (the full text is the cell's title); the setting is one line of monospace. */
.compset-pagelayout .compset-tablewrap[b-czd226f30t] {
    max-width: 100%;
    overflow-x: auto;
}

.compset-pagelayout .compset-table[b-czd226f30t] {
    min-width: 40rem;
}

.compset-pagelayout .compset-key[b-czd226f30t] {
    max-width: 14rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.compset-pagelayout .compset-preview[b-czd226f30t] {
    display: block;
    max-width: 32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--ssy-font-mono);
    font-size: var(--ssy-text-body-xs);
    letter-spacing: var(--ssy-mono-tracking);
    color: var(--ssy-on-surface-muted);
}

.compset-pagelayout .compset-date[b-czd226f30t] {
    white-space: nowrap;
}

.compset-pagelayout .compset-actcol[b-czd226f30t] {
    width: 1%;
    text-align: right;
    white-space: nowrap;
}

.compset-pagelayout .compset-sortbtn[b-czd226f30t] {
    display: inline-flex;
    align-items: center;
    gap: var(--ssy-sp-02);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

    .compset-pagelayout .compset-sortbtn:focus-visible[b-czd226f30t] {
        outline: 2px solid var(--ssy-field-line-focus);
        outline-offset: 2px;
    }

.compset-pagelayout .compset-pagerbar[b-czd226f30t] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-03);
    margin-top: var(--ssy-sp-04);
    font-size: var(--ssy-text-body-xs);
}

/* ---------- The form ---------- */
.compset-pagelayout[b-czd226f30t]  .compset-form {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
}

.compset-pagelayout .compset-grid[b-czd226f30t] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ssy-sp-04) var(--ssy-sp-05);
}

.compset-pagelayout .compset-note[b-czd226f30t],
.compset-pagelayout .compset-warn[b-czd226f30t] {
    display: flex;
    align-items: flex-start;
    gap: var(--ssy-sp-02);
    margin: 0;
}

.compset-pagelayout .compset-note[b-czd226f30t] {
    color: var(--ssy-on-surface-muted);
}

.compset-pagelayout .compset-warn[b-czd226f30t] {
    color: var(--ssy-delta-down-text);
}

    .compset-pagelayout .compset-note .ssy-i[b-czd226f30t],
    .compset-pagelayout .compset-warn .ssy-i[b-czd226f30t] {
        flex: 0 0 auto;
        margin-top: 2px;
    }

/* The JSON: monospace, never wrapped mid-token by the browser's soft wrap, scrolled instead. The
   text area keeps the design system's vertical resize; the read-only copy is a capped scroll box. */
.compset-pagelayout[b-czd226f30t]  .compset-json {
    font-family: var(--ssy-font-mono);
    font-size: var(--ssy-text-body-xs);
    letter-spacing: var(--ssy-mono-tracking);
    white-space: pre;
    overflow: auto;
    tab-size: 2;
}

.compset-pagelayout .compset-readonly[b-czd226f30t] {
    box-sizing: border-box;
    max-height: 24rem;
    margin: 0;
    padding: var(--ssy-sp-04);
    border: var(--ssy-card-stroke) solid var(--ssy-card-line);
    border-radius: var(--ssy-field-radius);
    background: var(--ssy-card-fill-solid);
    color: var(--ssy-on-surface);
}

.compset-pagelayout .compset-inline[b-czd226f30t] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-sp-03);
    margin-top: var(--ssy-sp-03);
}

/* ---------- Narrower screens ----------
   The setting and the two dates drop out of the table (Nav9 hid the same columns under 1300px), and on
   a phone the key fields stack and the filters take the full row. */
@media (max-width: 1100px) {
    .compset-pagelayout .compset-hide-narrow[b-czd226f30t] {
        display: none;
    }

    .compset-pagelayout .compset-table[b-czd226f30t] {
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .compset-pagelayout .compset-grid[b-czd226f30t] {
        grid-template-columns: minmax(0, 1fr);
    }

    .compset-pagelayout .compset-filters[b-czd226f30t] {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Technology/ErrorLog/TechnologyErrorLog.razor.rz.scp.css */
/* Technology › Error log. Scoped; every selector starts with .errlog-pagelayout. Every colour is a --ssy-*
   token. Cards, buttons, fields, the toggle, the checkbox, the tags and the data table are the shared
   objects in ssynavigator.css; what is here is the control bars, the table's column widths and scroll
   box, the level / age / row colours, and the popup's text blocks. */

.errlog-pagelayout[b-u2gep537yx] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
    width: 100%;
    min-width: 0;
    font-size: var(--ssy-text-body-sm);
}

.errlog-pagelayout .errlog-muted[b-u2gep537yx] {
    color: var(--ssy-on-surface-muted);
}

.errlog-pagelayout .errlog-note[b-u2gep537yx] {
    margin: 0;
}

.errlog-pagelayout .errlog-subhead[b-u2gep537yx] {
    margin: 0 0 var(--ssy-sp-03);
    font-size: var(--ssy-text-body-xs);
    font-weight: 600;
    color: var(--ssy-on-surface);
}

/* ---------- Control bars ----------
   Fields bottom-aligned in a wrapping row, so the buttons sit level with the inputs beside them. The
   widths are the inputs' natural sizes; on a phone every field takes the full row (see the foot). */
.errlog-pagelayout .errlog-bar[b-u2gep537yx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ssy-sp-04) var(--ssy-sp-06);
}

.errlog-pagelayout .errlog-group[b-u2gep537yx] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ssy-sp-03);
    min-width: 0;
}

.errlog-pagelayout .errlog-w-rows[b-u2gep537yx] { width: 6.5rem; }
.errlog-pagelayout .errlog-w-date[b-u2gep537yx] { width: 10rem; }
.errlog-pagelayout .errlog-w-creator[b-u2gep537yx] { width: 11rem; }
.errlog-pagelayout .errlog-w-interval[b-u2gep537yx] { width: 5.5rem; }
.errlog-pagelayout .errlog-w-period[b-u2gep537yx] { width: 9.5rem; }
.errlog-pagelayout .errlog-w-column[b-u2gep537yx] { width: 8.5rem; }

/* The delete form's bar holds only the two selects, top-aligned so neither moves if one ever carries a
   validation message. */
.errlog-pagelayout .errlog-bar.errlog-bar-top[b-u2gep537yx] {
    align-items: flex-start;
}

/* The text to match takes the full width under them: up to 16,000 characters, often a multi-line stack
   trace, so it is a text area that grows vertically (the design system's own resize handle). */
.errlog-pagelayout .errlog-search[b-u2gep537yx] {
    margin-top: var(--ssy-sp-04);
}

.errlog-pagelayout .errlog-count[b-u2gep537yx] {
    padding-bottom: var(--ssy-sp-03);
    font-size: var(--ssy-text-body-xs);
    white-space: nowrap;
}

.errlog-pagelayout .errlog-cache[b-u2gep537yx] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-field-gap);
    padding-bottom: var(--ssy-sp-03);
}

.errlog-pagelayout .errlog-cache-time[b-u2gep537yx] {
    font-family: var(--ssy-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ssy-mono-tracking);
    white-space: nowrap;
}

/* ---------- Clean up ----------
   Collapsible (closed when the page opens). The title is a button inside the h2, the BalticIndices
   section pattern: it keeps .ssy-card-title's type, and the head row carries the rule - but only when
   something is under it, or a closed card would show a line with nothing beneath it. */
.errlog-pagelayout .errlog-cardhead[b-u2gep537yx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-03) var(--ssy-sp-05);
}

    .errlog-pagelayout .errlog-cardhead:not(:last-child)[b-u2gep537yx] {
        margin: 0 0 var(--ssy-card-pad);
        padding-bottom: var(--ssy-sp-04);
        border-bottom: var(--ssy-card-rule) solid var(--ssy-border-strong);
    }

    .errlog-pagelayout .errlog-cardhead .ssy-card-title[b-u2gep537yx] {
        margin: 0;
    }

.errlog-pagelayout .errlog-cardtoggle[b-u2gep537yx] {
    display: flex;
    align-items: center;
    gap: var(--ssy-sp-03);
    padding: 0;
    border: 0;
    background: none;
    /* inherit: the type belongs to .ssy-card-title on the h2. */
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    text-align: left;
    color: inherit;
    cursor: pointer;
}

    .errlog-pagelayout .errlog-cardtoggle:hover[b-u2gep537yx] {
        color: var(--ssy-accent);
    }

/* The redundant-rows form takes most of the width, Delete selected the rest; stacked below 1100px. */
.errlog-pagelayout .errlog-cleanup[b-u2gep537yx] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: var(--ssy-sp-06);
}

.errlog-pagelayout .errlog-cleanup-part[b-u2gep537yx] {
    min-width: 0;
}

.errlog-pagelayout .errlog-actions[b-u2gep537yx] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-sp-03);
    margin-top: var(--ssy-sp-03);
}

/* ---------- The list ---------- */
.errlog-pagelayout .errlog-listhead[b-u2gep537yx] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-03) var(--ssy-sp-05);
    margin: 0 0 var(--ssy-card-pad);
    padding-bottom: var(--ssy-sp-03);
    border-bottom: var(--ssy-card-rule) solid var(--ssy-border-strong);
}

    .errlog-pagelayout .errlog-listhead .ssy-card-title[b-u2gep537yx] {
        margin: 0;
    }

    .errlog-pagelayout .errlog-listhead .ssy-btn[b-u2gep537yx] {
        margin-left: auto;
    }

.errlog-pagelayout .errlog-shown[b-u2gep537yx] {
    font-size: var(--ssy-text-body-xs);
}

.errlog-pagelayout .errlog-loading[b-u2gep537yx],
.errlog-pagelayout .errlog-empty[b-u2gep537yx] {
    margin: var(--ssy-sp-04) 0 0;
}

/* The scroll box. Virtualize measures against its nearest scrolling ancestor, so this has to be a real
   vertical scroller (a max-height), not only overflow-x: without one the box grows to fit every row
   and Virtualize renders all of them. */
.errlog-pagelayout .errlog-tablewrap[b-u2gep537yx] {
    max-height: 70vh;
    overflow: auto;
}

    .errlog-pagelayout .errlog-tablewrap:focus-visible[b-u2gep537yx] {
        outline: 2px solid var(--ssy-field-line-focus);
        outline-offset: 2px;
    }

.errlog-pagelayout .errlog-table[b-u2gep537yx] {
    table-layout: fixed;
    min-width: 64rem;
}

/* The header (and the filter row under it) stays put while the rows scroll. The band's tint is
   translucent in dark, so it is laid over the opaque card fill or the rows would show through. */
.errlog-pagelayout .errlog-table thead[b-u2gep537yx] {
    position: sticky;
    top: 0;
    z-index: 1;
}

    .errlog-pagelayout .errlog-table thead th[b-u2gep537yx],
    .errlog-pagelayout .errlog-table thead td[b-u2gep537yx] {
        background: linear-gradient(var(--ssy-surface-subtle), var(--ssy-surface-subtle)), var(--ssy-card-fill-solid);
    }

.errlog-pagelayout .errlog-filterrow td[b-u2gep537yx] {
    padding: var(--ssy-sp-02);
}

/* One line per row, cut with an ellipsis; the popup shows the rest. */
.errlog-pagelayout .errlog-table tbody td[b-u2gep537yx] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Column widths. With table-layout: fixed the first header row sets them; Msg, Msg2 and Stack trace
   have none and share what is left equally, as they did in Nav9. */
.errlog-pagelayout .errlog-col-lvl[b-u2gep537yx] { width: 3.25rem; }
.errlog-pagelayout .errlog-col-server[b-u2gep537yx] { width: 5.5rem; }
.errlog-pagelayout .errlog-col-date[b-u2gep537yx] { width: 4.5rem; }
.errlog-pagelayout .errlog-col-time[b-u2gep537yx] { width: 6rem; }
.errlog-pagelayout .errlog-col-process[b-u2gep537yx] { width: 9rem; }
.errlog-pagelayout .errlog-col-owner[b-u2gep537yx] { width: 6.5rem; }
.errlog-pagelayout .errlog-col-creator[b-u2gep537yx] { width: 7.5rem; }
.errlog-pagelayout .errlog-col-select[b-u2gep537yx] { width: 2.75rem; }

/* The in-cell button fills the cell so the whole cell is the target, and keeps the ellipsis. Its focus
   ring is drawn inside: the cell clips anything outside it. */
.errlog-pagelayout .errlog-cellbtn[b-u2gep537yx] {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

    .errlog-pagelayout .errlog-cellbtn:focus-visible[b-u2gep537yx] {
        outline-offset: -2px;
    }

.errlog-pagelayout .errlog-col-time .errlog-cellbtn[b-u2gep537yx] {
    font-family: var(--ssy-font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--ssy-mono-tracking);
}

.errlog-pagelayout .errlog-check[b-u2gep537yx] {
    align-items: center;
}

/* ---------- Colours ----------
   Row tone first (Nav9's ErrorRowFormat). EnvType 0 at level 0-2: --ssy-delta-down-text, the error red
   made for text (a light red on dark, a deep red on light). Every non-production row: muted body text,
   since Nav9's dark goldenrod has no token that reads on white; the Server tag carries the amber. */
.errlog-pagelayout .errlog-table tbody tr.errlog-row-alert td[b-u2gep537yx] { color: var(--ssy-delta-down-text); }
.errlog-pagelayout .errlog-table tbody tr.errlog-row-muted td[b-u2gep537yx] { color: var(--ssy-on-surface-muted); }

/* The level and age cells, from the tag colourways (--ssy-tag-<hue> fill with its --ssy-tag-<hue>-fg
   text), because each is a published fill-and-text pair that reads in both themes: an opaque pastel
   under dark text on the dark theme, the saturated hue at 30% under the same dark text on the light
   theme. Written `tr td.x`, the same weight as the row tone above and later, so a coloured cell keeps
   its own dark text on an alert or muted row instead of a light red on a pastel.

   Error level (Nav9: level 0 crimson-pink, 1-2 red, 3-5 orange, above 200 olive green):
     0        pink    --ssy-tag-pink / --ssy-tag-pink-fg
     1 to 2   red     --ssy-tag-red / --ssy-tag-red-fg
     3 to 5   orange  --ssy-tag-orange / --ssy-tag-orange-fg
     over 200 lime    --ssy-tag-lime / --ssy-tag-lime-fg   (Nav9's olive green is the lime family) */
.errlog-pagelayout .errlog-table tbody tr td.errlog-lvl-0[b-u2gep537yx] { background: var(--ssy-tag-pink); color: var(--ssy-tag-pink-fg); }
.errlog-pagelayout .errlog-table tbody tr td.errlog-lvl-1[b-u2gep537yx] { background: var(--ssy-tag-red); color: var(--ssy-tag-red-fg); }
.errlog-pagelayout .errlog-table tbody tr td.errlog-lvl-3[b-u2gep537yx] { background: var(--ssy-tag-orange); color: var(--ssy-tag-orange-fg); }
.errlog-pagelayout .errlog-table tbody tr td.errlog-lvl-info[b-u2gep537yx] { background: var(--ssy-tag-lime); color: var(--ssy-tag-lime-fg); }

.errlog-pagelayout .errlog-table tbody td.errlog-col-lvl .errlog-cellbtn[b-u2gep537yx] {
    font-weight: 600;
    text-align: center;
}

/* Age of the row, on the time cell (Nav9: greens to 8 h, yellow 9-11 h, nothing after):
     0 to 5 h   green   --ssy-tag-green / --ssy-tag-green-fg   (Nav9's two near-identical greens)
     6 to 8 h   lime    --ssy-tag-lime / --ssy-tag-lime-fg     (Nav9's lawn green)
     9 to 11 h  yellow  --ssy-tag-yellow / --ssy-tag-yellow-fg */
.errlog-pagelayout .errlog-table tbody tr td.errlog-age-new[b-u2gep537yx] { background: var(--ssy-tag-green); color: var(--ssy-tag-green-fg); }
.errlog-pagelayout .errlog-table tbody tr td.errlog-age-hours[b-u2gep537yx] { background: var(--ssy-tag-lime); color: var(--ssy-tag-lime-fg); }
.errlog-pagelayout .errlog-table tbody tr td.errlog-age-old[b-u2gep537yx] { background: var(--ssy-tag-yellow); color: var(--ssy-tag-yellow-fg); }

/* ---------- Popups ----------
   Plain monospace text on the card surface. --ssy-card-fill-solid rather than --ssy-surface-subtle:
   the popup's own light surface and surface-subtle are all but the same pale grey,
   while the card fill is white on light and Simpson 600 on the dark popup's navy, so the block shows in
   both. Line breaks are kept and long lines wrap anywhere, so a stack trace never scrolls sideways. */
.errlog-pagelayout .errlog-detail[b-u2gep537yx] {
    display: flex;
    flex-direction: column;
}

    .errlog-pagelayout .errlog-detail .errlog-subhead:not(:first-child)[b-u2gep537yx] {
        margin-top: var(--ssy-sp-05);
    }

.errlog-pagelayout .errlog-text[b-u2gep537yx] {
    margin: 0;
    padding: var(--ssy-sp-04);
    border: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    border-radius: var(--ssy-field-radius);
    background: var(--ssy-card-fill-solid);
    color: var(--ssy-on-surface);
    font-family: var(--ssy-font-mono);
    font-size: var(--ssy-text-body-xs);
    line-height: 1.5;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* A stack trace: one frame per row, a hairline between them (Nav9's table of lines). */
.errlog-pagelayout .errlog-trace[b-u2gep537yx] {
    list-style: none;
    padding-top: var(--ssy-sp-02);
    padding-bottom: var(--ssy-sp-02);
}

    .errlog-pagelayout .errlog-trace li[b-u2gep537yx] {
        padding: var(--ssy-sp-02) 0;
    }

    .errlog-pagelayout .errlog-trace li + li[b-u2gep537yx] {
        border-top: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    }

/* ---------- The detail popup as an old mono green CRT (BK, 27 Oct 2026) ----------
   Nav9's popup was a green-on-black "terminal" (#75F0BB on #040506 in a #EEF1DB frame, a glow and a
   blinking cursor). This rebuilds it as the monitor it was imitating, for THIS SCREEN ONLY:
     bezel   - .errlog-crt: the beige-grey plastic case, a darker lip and a soft shadow under it
     tube    - .errlog-crt-tube: the black screen, rounded like a curved tube, with an inner shadow
     glass   - .errlog-crt-glass: the text, scrolling inside the tube. Over it, on the tube and ignoring the
             pointer (so text can still be selected): tube::before the scanlines (1px dark every 3px) with a
             faint flicker; tube::after the vignette (dark corners) and a glare highlight top-left
   The colours are theme-INDEPENDENT on purpose - it is a picture of a monitor, not a themed surface -
   so they are the palette PRIMITIVES (no new tokens, no raw hex): phosphor = accent-9 (green), the tube
   = black-800, the case = neutral-100/200/400. Motion (power-on, flicker, cursor) stops under
   prefers-reduced-motion. The text inside is still the Razor-encoded <pre>/<ol> from TextBlock/TraceBlock,
   restyled here. */
.errlog-pagelayout .errlog-crt[b-u2gep537yx] {
    --errlog-crt-phosphor: var(--ssy-accent-9-500);
    --errlog-crt-phosphor-dim: var(--ssy-accent-9-800);
    --errlog-crt-glow: color-mix(in srgb, var(--ssy-accent-9-500) 55%, transparent);
    --errlog-crt-tube: var(--ssy-black-800);
    padding: var(--ssy-sp-05);
    border-radius: 18px;
    background: linear-gradient(160deg, var(--ssy-neutral-100), var(--ssy-neutral-200));
    border: 2px solid var(--ssy-neutral-300);
    box-shadow:
        inset 0 2px 0 var(--ssy-neutral-white),
        inset 0 -3px 0 var(--ssy-neutral-400),
        0 6px 18px color-mix(in srgb, var(--ssy-neutral-black) 35%, transparent);
}

.errlog-pagelayout .errlog-crt-tube[b-u2gep537yx] {
    position: relative;
    padding: 6px;
    border-radius: 34px / 26px;
    background: var(--ssy-neutral-600);
    box-shadow: inset 0 0 0 2px var(--ssy-neutral-700);
}

.errlog-pagelayout .errlog-crt-glass[b-u2gep537yx] {
    position: relative;
    min-height: 26rem;
    max-height: 70vh;
    overflow: auto;
    padding: var(--ssy-sp-06);
    border-radius: 30px / 22px;
    background: radial-gradient(ellipse at center, color-mix(in srgb, var(--ssy-accent-9-900) 18%, var(--errlog-crt-tube)) 0%, var(--errlog-crt-tube) 75%);
    box-shadow: inset 0 0 40px color-mix(in srgb, var(--ssy-neutral-black) 85%, transparent),
                inset 0 0 12px var(--errlog-crt-glow);
    color: var(--errlog-crt-phosphor);
    /* Nav9's font, size and glow (BK, 27 Oct 2026: Söhne Mono with the double glow was hard to read).
       The browser's own monospace - Consolas on Windows - at 1.2rem, one soft 5px glow, no extra tracking. */
    font-family: monospace;
    font-size: 1.2rem;
    letter-spacing: normal;
    text-shadow: 0 0 5px var(--errlog-crt-glow);
    scrollbar-color: var(--errlog-crt-phosphor-dim) transparent;
    animation: errlog-crt-poweron-b-u2gep537yx 380ms ease-out both;
}

.errlog-pagelayout .errlog-crt-tube[b-u2gep537yx]::before,
.errlog-pagelayout .errlog-crt-tube[b-u2gep537yx]::after {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 30px / 22px;
    pointer-events: none;
    z-index: 1;
}

    /* Scanlines over the whole tube face (the tube does not scroll, the glass inside it does). */
    .errlog-pagelayout .errlog-crt-tube[b-u2gep537yx]::before {
        background: repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 2px,
            color-mix(in srgb, var(--ssy-neutral-black) 38%, transparent) 2px,
            color-mix(in srgb, var(--ssy-neutral-black) 38%, transparent) 3px);
        animation: errlog-crt-flicker-b-u2gep537yx 4s steps(1) infinite;
    }

    /* Vignette and a glare highlight top-left. */
    .errlog-pagelayout .errlog-crt-tube[b-u2gep537yx]::after {
        background:
            radial-gradient(ellipse at 22% 12%, color-mix(in srgb, var(--ssy-neutral-white) 9%, transparent) 0%, transparent 35%),
            radial-gradient(ellipse at center, transparent 58%, color-mix(in srgb, var(--ssy-neutral-black) 60%, transparent) 100%);
    }

/* The text: phosphor on the tube, no card surface, no borders but the dim phosphor rules. */
.errlog-pagelayout .errlog-crt .errlog-subhead[b-u2gep537yx] {
    margin: 0 0 var(--ssy-sp-02);
    font-family: inherit;
    font-size: inherit;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--errlog-crt-phosphor);
}

    .errlog-pagelayout .errlog-crt .errlog-subhead[b-u2gep537yx]::before {
        content: "> ";
    }

.errlog-pagelayout .errlog-crt .errlog-text[b-u2gep537yx] {
    padding: 0 0 0 2ch;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    overflow-wrap: anywhere;   /* a long frame wraps rather than scrolling the tube sideways */
}

    .errlog-pagelayout .errlog-crt .errlog-trace li + li[b-u2gep537yx] {
        border-top: 1px solid color-mix(in srgb, var(--errlog-crt-phosphor) 30%, transparent);
    }

.errlog-pagelayout .errlog-crt .errlog-note[b-u2gep537yx],
.errlog-pagelayout .errlog-crt .errlog-muted[b-u2gep537yx] {
    padding-left: 2ch;
    color: var(--errlog-crt-phosphor-dim);
}

.errlog-pagelayout .errlog-crt [b-u2gep537yx]::selection {
    background: var(--errlog-crt-phosphor);
    color: var(--errlog-crt-tube);
    text-shadow: none;
}

.errlog-pagelayout .errlog-crt-prompt[b-u2gep537yx] {
    margin: var(--ssy-sp-05) 0 0;
}

.errlog-pagelayout .errlog-crt-cursor[b-u2gep537yx] {
    animation: errlog-crt-blink-b-u2gep537yx 1.06s steps(1) infinite;
}

@keyframes errlog-crt-blink-b-u2gep537yx {
    50% { opacity: 0; }
}

/* A dim beat every few seconds, as an old tube does. */
@keyframes errlog-crt-flicker-b-u2gep537yx {
    0%, 100% { opacity: 1; }
    97% { opacity: 0.7; }
}

/* Switching on: a bright line that opens into the picture. */
@keyframes errlog-crt-poweron-b-u2gep537yx {
    0% { transform: scaleY(0.02) scaleX(0.6); filter: brightness(3); }
    55% { transform: scaleY(0.04) scaleX(1); filter: brightness(2.5); }
    100% { transform: none; filter: none; }
}

@media (prefers-reduced-motion: reduce) {
    .errlog-pagelayout .errlog-crt-glass[b-u2gep537yx],
    .errlog-pagelayout .errlog-crt-tube[b-u2gep537yx]::before,
    .errlog-pagelayout .errlog-crt-cursor[b-u2gep537yx] {
        animation: none;
    }
}

.errlog-pagelayout .errlog-confirm[b-u2gep537yx] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);
}

    .errlog-pagelayout .errlog-confirm p[b-u2gep537yx] {
        margin: 0;
    }

.errlog-pagelayout .errlog-confirm-text[b-u2gep537yx] {
    max-height: 12rem;
    overflow: auto;
}

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
    .errlog-pagelayout .errlog-cleanup[b-u2gep537yx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Phone: Nav9's breakpoint. The clean-up card, the Populate delete button and the Process, Msg2,
   CreatedBy, Stack trace and select columns go; the rest of the table still scrolls sideways in its own
   box rather than squeezing Msg to nothing. Fields take the full row. */
@media (max-width: 775px) {
    .errlog-pagelayout .errlog-not-on-mobile[b-u2gep537yx] {
        display: none;
    }

    .errlog-pagelayout .errlog-table[b-u2gep537yx] {
        min-width: 30rem;
    }

    .errlog-pagelayout .errlog-group[b-u2gep537yx],
    .errlog-pagelayout .errlog-bar > .ssy-field[b-u2gep537yx] {
        flex: 1 1 100%;
    }

    .errlog-pagelayout .errlog-group > .ssy-field[b-u2gep537yx] {
        flex: 1 1 8rem;
        width: auto;
    }

    .errlog-pagelayout .errlog-bar > .ssy-field[b-u2gep537yx] {
        width: auto;
    }

    .errlog-pagelayout .errlog-tablewrap[b-u2gep537yx] {
        max-height: 65vh;
    }
}
/* /Components/Pages/Technology/Maintenance/TechnologyMaintenance.razor.rz.scp.css */
/* Technology › Maintenance. Scoped; every selector starts with .techmaint-pagelayout. Every colour is a
   --ssy-* token. Cards, buttons and the filter field are the shared objects in ssynavigator.css; what is
   here is the quick-refresh tiles, the card headers, the row grid (which stacks on a phone) and the
   not-loaded list. */

.techmaint-pagelayout[b-ek7dpsrqgp] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
    width: 100%;
    min-width: 0;
    font-size: var(--ssy-text-body-sm);
}

.techmaint-pagelayout .techmaint-lead[b-ek7dpsrqgp] {
    margin: 0;
    max-width: 60rem;
}

.techmaint-pagelayout .techmaint-muted[b-ek7dpsrqgp] {
    color: var(--ssy-on-surface-muted);
}

/* ---------- Quick refresh ----------
   One tile per action: the button, what it covers, then the outcome once it has run. Tiles wrap
   rather than squeeze, so five fit across a desktop card and stack two or one wide on smaller ones. */
.techmaint-pagelayout .techmaint-quick[b-ek7dpsrqgp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--ssy-sp-05);
}

.techmaint-pagelayout .techmaint-quick-item[b-ek7dpsrqgp] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ssy-sp-02);
    min-width: 0;
}

    .techmaint-pagelayout .techmaint-quick-item .ssy-btn[b-ek7dpsrqgp] {
        margin-bottom: var(--ssy-sp-02);
    }

/* ---------- Filter ---------- */
.techmaint-pagelayout .techmaint-filter[b-ek7dpsrqgp] {
    width: 100%;
    max-width: 24rem;
}

/* ---------- A card of datasets ----------
   The card title's rule moves onto this row so it runs under the Refresh all button too, rather than
   stopping where the heading text does. */
.techmaint-pagelayout .techmaint-group-head[b-ek7dpsrqgp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-04);
    margin: 0 0 var(--ssy-card-pad);
    padding-bottom: var(--ssy-sp-03);
    border-bottom: var(--ssy-card-rule) solid var(--ssy-border-strong);
}

    .techmaint-pagelayout .techmaint-group-head .ssy-card-title[b-ek7dpsrqgp] {
        margin: 0;
    }

.techmaint-pagelayout .techmaint-list[b-ek7dpsrqgp] {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* What it is | what happened | the button. The status column takes what the first leaves, so a long
   failure message wraps there rather than pushing the button off the card. */
.techmaint-pagelayout .techmaint-row[b-ek7dpsrqgp] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) auto;
    align-items: center;
    gap: var(--ssy-sp-04);
    padding: var(--ssy-sp-04) 0;
}

    .techmaint-pagelayout .techmaint-row + .techmaint-row[b-ek7dpsrqgp] {
        border-top: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    }

    .techmaint-pagelayout .techmaint-row:first-child[b-ek7dpsrqgp] {
        padding-top: 0;
    }

    .techmaint-pagelayout .techmaint-row:last-child[b-ek7dpsrqgp] {
        padding-bottom: 0;
    }

.techmaint-pagelayout .techmaint-what[b-ek7dpsrqgp],
.techmaint-pagelayout .techmaint-status[b-ek7dpsrqgp] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    min-width: 0;
}

.techmaint-pagelayout .techmaint-name[b-ek7dpsrqgp] {
    font-weight: 600;
}

.techmaint-pagelayout .techmaint-ok[b-ek7dpsrqgp] {
    color: var(--ssy-delta-up);
    vertical-align: -2px;
}

.techmaint-pagelayout .techmaint-failed[b-ek7dpsrqgp] {
    color: var(--ssy-field-msg-error);
    overflow-wrap: anywhere;
}

    .techmaint-pagelayout .techmaint-failed .ssy-i[b-ek7dpsrqgp] {
        vertical-align: -2px;
    }

/* ---------- Not loaded on this server ----------
   Names only, two or three to a line on a desktop; the service class beside each in mono, because
   that is what someone moving one up into the list will search the code for. */
.techmaint-pagelayout .techmaint-notloaded-lead[b-ek7dpsrqgp] {
    margin: 0 0 var(--ssy-sp-04);
    max-width: 60rem;
    color: var(--ssy-on-surface-muted);
}

.techmaint-pagelayout .techmaint-notloaded[b-ek7dpsrqgp] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--ssy-sp-03) var(--ssy-sp-05);
    margin: 0;
    padding: 0;
    list-style: none;
}

    .techmaint-pagelayout .techmaint-notloaded li[b-ek7dpsrqgp] {
        display: flex;
        flex-direction: column;
        gap: var(--ssy-sp-02);
        min-width: 0;
    }

.techmaint-pagelayout .techmaint-service[b-ek7dpsrqgp] {
    font-family: var(--ssy-font-mono);
    font-size: var(--ssy-text-body-xs);
    overflow-wrap: anywhere;
}

/* Phone: one column, the button last and full width so it is an easy target. */
@media (max-width: 700px) {
    .techmaint-pagelayout .techmaint-row[b-ek7dpsrqgp] {
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: var(--ssy-sp-03);
    }

        .techmaint-pagelayout .techmaint-row .ssy-btn[b-ek7dpsrqgp] {
            width: 100%;
        }
}
/* /Components/Pages/Technology/MenuManager/TechnologyMenuManager.razor.rz.scp.css */
/* Technology › Menu Manager. Scoped CSS for the page AND its five panels: the panels have no stylesheet
   of their own, so their markup is reached with ::deep from the page's wrapper.

   TWO ANCHORS, as on Baltic Forward Prices. `.menumgr-pagelayout ::deep .x` compiles to
   `.menumgr-pagelayout[b-scope] .x`, a descendant selector, so it reaches everything inside the page's
   wrapper, the panels included. The popups are declared after the wrapper closes, so their content is a
   sibling of it and is anchored on `.menumgr-modal`, a div the page writes inside each popup body.

   Every colour is a --ssy-* token. Cards, tabs, tags, buttons, fields and the checkbox are the shared
   objects in ssynavigator.css; what is here is the layout, the drag-and-drop rows and their states, the
   selected-item panel and the change log. */

.menumgr-pagelayout[b-dhzzs3lru2] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
    width: 100%;
    min-width: 0;
    font-size: var(--ssy-text-body-sm);
}

.menumgr-pagelayout .menumgr-lead[b-dhzzs3lru2] {
    margin: 0;
    max-width: 60rem;
}

/* Shown only where the main pointer is a finger: drag and drop needs a mouse or trackpad. */
.menumgr-pagelayout .menumgr-touchnote[b-dhzzs3lru2] {
    display: none;
    margin: 0;
    max-width: 60rem;
    color: var(--ssy-on-surface-muted);
}

/* ---------- Shared text bits (page, panels and popups) ---------- */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-muted,
.menumgr-modal[b-dhzzs3lru2]  .menumgr-muted {
    color: var(--ssy-on-surface-muted);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-hint,
.menumgr-modal[b-dhzzs3lru2]  .menumgr-hint {
    margin: 0 0 var(--ssy-sp-03);
    color: var(--ssy-on-surface-muted);
    font-size: var(--ssy-text-body-xs);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-mono,
.menumgr-modal[b-dhzzs3lru2]  .menumgr-mono {
    font-family: var(--ssy-font-mono);
    font-size: var(--ssy-text-body-xs);
    overflow-wrap: anywhere;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-warning,
.menumgr-modal[b-dhzzs3lru2]  .menumgr-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--ssy-sp-02);
    margin: 0;
    color: var(--ssy-field-msg-error);
    overflow-wrap: anywhere;
}

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-warning .ssy-i,
    .menumgr-modal[b-dhzzs3lru2]  .menumgr-warning .ssy-i {
        margin-top: 2px;
    }

.menumgr-pagelayout .menumgr-errorcard[b-dhzzs3lru2] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ssy-sp-04);
}

    .menumgr-pagelayout .menumgr-errorcard .ssy-card-title[b-dhzzs3lru2] {
        align-self: stretch;
        margin: 0;
    }

/* ---------- Top row: Changes | Preview as user ---------- */
.menumgr-pagelayout .menumgr-top[b-dhzzs3lru2] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--ssy-sp-05);
    align-items: start;
}

.menumgr-pagelayout .menumgr-actions[b-dhzzs3lru2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-03);
}

.menumgr-pagelayout .menumgr-toolbar > p[b-dhzzs3lru2] {
    margin: var(--ssy-sp-04) 0 0;
}

.menumgr-pagelayout .menumgr-problems[b-dhzzs3lru2] {
    margin-top: var(--ssy-sp-04);
}

    .menumgr-pagelayout .menumgr-problems ul[b-dhzzs3lru2] {
        margin: var(--ssy-sp-02) 0 0;
        padding-left: 1.25rem;
        overflow-wrap: anywhere;
    }

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-preview-field {
    max-width: 28rem;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-preview-who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-03);
    margin-top: var(--ssy-sp-04);
}

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-preview-who p {
        margin: 0;
        overflow-wrap: anywhere;
    }

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-preview .menumgr-roles {
    margin-top: var(--ssy-sp-03);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-preview > p.menumgr-muted {
    margin: var(--ssy-sp-03) 0 0;
}

/* ---------- Departments ----------
   The strip scrolls sideways on its own rather than widening the page; the tabs keep their own
   .ssy-tab look, the wrapper only lays them out and carries the drag states. */
.menumgr-pagelayout .menumgr-tabsscroll[b-dhzzs3lru2] {
    overflow-x: auto;
    overflow-y: hidden;
    border-bottom: var(--ssy-card-stroke) solid var(--ssy-border-strong);
}

.menumgr-pagelayout .menumgr-tabs[b-dhzzs3lru2] {
    width: max-content;
    min-width: 100%;
}

.menumgr-pagelayout .menumgr-tabwrap[b-dhzzs3lru2] {
    display: flex;
    border-radius: var(--ssy-radius-md) var(--ssy-radius-md) 0 0;
}

.menumgr-pagelayout .menumgr-tab .ssy-tag[b-dhzzs3lru2] {
    margin-left: var(--ssy-sp-02);
}

/* ---------- The three panels ---------- */
.menumgr-pagelayout .menumgr-columns[b-dhzzs3lru2] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 5fr);
    gap: var(--ssy-sp-05);
    align-items: start;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-col {
    min-width: 0;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-col > p.menumgr-muted {
    margin: 0 0 var(--ssy-sp-03);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-dropzone > p.menumgr-muted {
    margin: 0;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-colhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-04);
    margin: 0 0 var(--ssy-card-pad);
    padding-bottom: var(--ssy-sp-03);
    border-bottom: var(--ssy-card-rule) solid var(--ssy-border-strong);
}

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-colhead .ssy-card-title {
        margin: 0;
        overflow-wrap: anywhere;
    }

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-subtitle {
    margin-top: var(--ssy-sp-07);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-addsection {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-03);
    margin-bottom: var(--ssy-sp-05);
    padding: var(--ssy-sp-04);
    border: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    border-radius: var(--ssy-radius-md);
}

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-addsection .ssy-btn {
        align-self: flex-start;
    }

/* ---------- Lists ---------- */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-tree,
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-pages,
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-children,
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-branch + .menumgr-branch {
    margin-top: var(--ssy-sp-04);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-pages {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
    padding-left: var(--ssy-sp-05);
}

/* The open page's children: boxed, as Nav9 boxed them, each with its remove button beside it. */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-children {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: var(--ssy-sp-02) 0 var(--ssy-sp-02) var(--ssy-sp-05);
    padding: var(--ssy-sp-02);
    border: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    border-radius: var(--ssy-radius-md);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-childline {
    display: flex;
    align-items: center;
    gap: var(--ssy-sp-02);
}

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-childline .menumgr-row {
        flex: 1 1 auto;
        min-width: 0;
    }

/* ---------- A row ----------
   Grip | name over URL (one button) | chips | chevron. The name and URL truncate; the chips never
   shrink. Rows are drag sources and (in the structure) drop targets; the state classes come from
   MenuManagerEditor.StateClasses. */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-row {
    display: flex;
    align-items: center;
    gap: var(--ssy-sp-03);
    min-width: 0;
    padding: var(--ssy-sp-02) var(--ssy-sp-03);
    border-radius: var(--ssy-radius-md);
    color: var(--ssy-on-surface);
    transition: background-color var(--ssy-motion-fast) linear, opacity var(--ssy-motion-fast) linear;
}

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-row:hover {
        background: var(--ssy-surface-subtle);
    }

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-row .ssy-tag {
        flex: 0 0 auto;
    }

/* A section (Nav9's bold navy-underlined row): heavier, with a rule under it. */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-row-section {
    border-bottom: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    border-radius: var(--ssy-radius-md) var(--ssy-radius-md) 0 0;
    font-weight: 600;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-grip {
    flex: 0 0 auto;
    --ssy-i-size: 16px;
    color: var(--ssy-on-surface-muted);
    cursor: grab;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-rowbtn,
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-rowtext {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-rowbtn {
    cursor: pointer;
}

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-rowbtn:focus-visible {
        outline: var(--ssy-control-focus-stroke) solid var(--ssy-field-line-focus);
        outline-offset: 2px;
        border-radius: 2px;
    }

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-rowname,
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-rowurl {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-rowurl {
    color: var(--ssy-on-surface-muted);
    font-family: var(--ssy-font-mono);
    font-size: var(--ssy-text-body-xs);
    font-weight: 400;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-rowchev {
    flex: 0 0 auto;
    color: var(--ssy-on-surface-muted);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-row.menumgr-selected {
    background: var(--ssy-row-selected-fill);
    box-shadow: inset 0 0 0 var(--ssy-row-selected-line-w) var(--ssy-row-selected-line);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-row.menumgr-inactive .menumgr-rowname {
    color: var(--ssy-on-surface-muted);
}

/* "Add menu item section…" and the empty-section drop target: quiet, italic, Nav9's grey prompts. */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-addrow {
    display: flex;
    align-items: center;
    gap: var(--ssy-sp-02);
    width: 100%;
    padding: var(--ssy-sp-02) var(--ssy-sp-03);
    border: 0;
    border-radius: var(--ssy-radius-md);
    background: transparent;
    color: var(--ssy-on-surface-muted);
    font: inherit;
    font-style: italic;
    text-align: left;
    cursor: pointer;
}

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-addrow:hover {
        background: var(--ssy-surface-subtle);
        color: var(--ssy-on-surface);
    }

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-addrow:focus-visible {
        outline: var(--ssy-control-focus-stroke) solid var(--ssy-field-line-focus);
        outline-offset: -2px;
    }

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-placeholder {
    margin: 2px 0 0 var(--ssy-sp-05);
    padding: var(--ssy-sp-02) var(--ssy-sp-03);
    border: var(--ssy-card-stroke) dashed var(--ssy-border-strong);
    border-radius: var(--ssy-radius-md);
    color: var(--ssy-on-surface-muted);
    font-size: var(--ssy-text-body-xs);
    font-style: italic;
}

/* ---------- Drag and drop ----------
   Dimmed: a drop here would do nothing (the cursor says so too: only real targets cancel dragover).
   Highlight: the target under the pointer, outlined in the accent. While a drag is on, nothing INSIDE
   a target takes pointer events, so crossing a row's button or chip does not count as leaving the row. */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-dim {
    opacity: 0.35;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-dragsource {
    opacity: 0.5;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-droptarget {
    background: var(--ssy-row-selected-fill);
    outline: 2px solid var(--ssy-accent);
    outline-offset: -2px;
}

.menumgr-pagelayout.menumgr-dragging[b-dhzzs3lru2]  .menumgr-row *,
.menumgr-pagelayout.menumgr-dragging[b-dhzzs3lru2]  .menumgr-tabwrap *,
.menumgr-pagelayout.menumgr-dragging[b-dhzzs3lru2]  .menumgr-placeholder *,
.menumgr-pagelayout.menumgr-dragging[b-dhzzs3lru2]  .menumgr-dropzone * {
    pointer-events: none;
}

/* The unused list: the whole box is the drop zone. */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-dropzone {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--ssy-sp-03);
    border: var(--ssy-card-stroke) dashed var(--ssy-border-strong);
    border-radius: var(--ssy-radius-md);
    transition: background-color var(--ssy-motion-fast) linear, opacity var(--ssy-motion-fast) linear;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-grouphead {
    margin: var(--ssy-sp-03) 0 0;
    padding: 0 var(--ssy-sp-03) var(--ssy-sp-02);
    border-bottom: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    font-size: var(--ssy-text-body-xs);
    font-weight: 600;
    color: var(--ssy-on-surface);
}

/* ---------- Preview as user ----------
   Greyed: what Display Grey does in the menu. Hidden: gone, as Nav9's display:none. */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-preview-grey,
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-preview-grey .menumgr-rowname,
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-preview-grey .menumgr-tab {
    color: var(--ssy-on-surface-muted);
    font-style: italic;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-preview-hidden {
    display: none;
}

/* ---------- Selected item ---------- */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-detail {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);
    padding: var(--ssy-sp-04);
    border: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    border-radius: var(--ssy-radius-md);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-detail-current {
    border-color: var(--ssy-accent);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-detail-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-03);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-detail-title {
    margin: 0;
    font-size: var(--ssy-text-body);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-facts {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--ssy-sp-02) var(--ssy-sp-04);
    width: 100%;
    margin: 0;
}

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-facts dt {
        color: var(--ssy-on-surface-muted);
    }

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-facts dd {
        margin: 0;
        overflow-wrap: anywhere;
    }

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-fields {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-sortfield {
    max-width: 12rem;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-urlblock {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ssy-sp-03);
    padding-top: var(--ssy-sp-04);
    border-top: var(--ssy-card-stroke) solid var(--ssy-border-strong);
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-roleshead {
    margin: 0;
    font-weight: 600;
}

.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-urlblock > p {
    margin: 0;
}

/* Role chips: a URL with Display Full lists every role there is, so the box scrolls. */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-roles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-sp-02);
    width: 100%;
    max-height: 10rem;
    overflow-y: auto;
}

/* "Sub-item of": a rule with the words in it, between an item and its parent. */
.menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-subof {
    display: flex;
    align-items: center;
    gap: var(--ssy-sp-03);
    margin: var(--ssy-sp-04) 0;
    color: var(--ssy-on-surface-muted);
    font-size: var(--ssy-text-body-xs);
    letter-spacing: var(--ssy-card-title-tracking);
    text-transform: uppercase;
}

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-subof::before,
    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-subof::after {
        content: "";
        flex: 1 1 auto;
        border-top: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    }

/* ---------- Popups ---------- */
.menumgr-modal[b-dhzzs3lru2] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-04);
    font-size: var(--ssy-text-body-sm);
}

    .menumgr-modal p[b-dhzzs3lru2] {
        margin: 0;
        overflow-wrap: anywhere;
    }

.menumgr-modal .menumgr-busy[b-dhzzs3lru2] {
    display: flex;
    align-items: center;
    gap: var(--ssy-sp-03);
}

.menumgr-modal .menumgr-changelog[b-dhzzs3lru2] {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menumgr-modal .menumgr-change[b-dhzzs3lru2] {
    padding: var(--ssy-sp-03) 0;
}

    .menumgr-modal .menumgr-change + .menumgr-change[b-dhzzs3lru2] {
        border-top: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    }

.menumgr-modal .menumgr-change-head[b-dhzzs3lru2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-03);
}

.menumgr-modal .menumgr-change-path[b-dhzzs3lru2] {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.menumgr-modal .menumgr-change-details[b-dhzzs3lru2] {
    margin: var(--ssy-sp-02) 0 0;
    padding-left: 1.25rem;
    overflow-wrap: anywhere;
}

/* The Edit URL form (rendered by _50_UrlForm, so ::deep). Two columns, one on a phone. */
.menumgr-modal[b-dhzzs3lru2]  .menumgr-formgrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ssy-sp-04) var(--ssy-sp-05);
    margin-top: var(--ssy-sp-03);
}

.menumgr-modal[b-dhzzs3lru2]  .menumgr-wide {
    grid-column: 1 / -1;
}

/* ---------- Widths ----------
   Wide: the three panels side by side, each scrolling on its own so a long department does not push
   the others down (dragging near a panel's edge scrolls it). Middle: structure and unused side by
   side, the selected item underneath. Narrow: one column, natural height. */
@media (min-width: 1201px) {
    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-col {
        max-height: calc(100vh - 12rem);
        overflow-y: auto;
    }
}

@media (max-width: 1200px) {
    .menumgr-pagelayout .menumgr-columns[b-dhzzs3lru2] {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-selectedcol {
        grid-column: 1 / -1;
    }
}

@media (max-width: 760px) {
    .menumgr-pagelayout .menumgr-top[b-dhzzs3lru2],
    .menumgr-pagelayout .menumgr-columns[b-dhzzs3lru2] {
        grid-template-columns: minmax(0, 1fr);
    }

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-pages {
        padding-left: var(--ssy-sp-03);
    }

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-placeholder,
    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-children {
        margin-left: var(--ssy-sp-03);
    }

    .menumgr-modal[b-dhzzs3lru2]  .menumgr-formgrid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* A finger cannot drag here: say so, and drop the grips that would suggest otherwise. */
@media (pointer: coarse) {
    .menumgr-pagelayout .menumgr-touchnote[b-dhzzs3lru2] {
        display: block;
    }

    .menumgr-pagelayout[b-dhzzs3lru2]  .menumgr-grip {
        display: none;
    }
}
/* /Components/Pages/Technology/Notifications/TechnologyNotifications.razor.rz.scp.css */
/* Technology › Notifications. Scoped; every selector starts with .notifadmin-pagelayout and every colour is a --ssy-*
   token. Cards, buttons, fields, tags and the popup are the shared objects in ssynavigator.css; what is here is the
   layout around them: the source card's head, its facts list, someone's phones, and the edit form's two-column grid. */

.notifadmin-pagelayout[b-hv3lq8nwrn] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
    width: 100%;
    min-width: 0;
    font-size: var(--ssy-text-body-sm);
}

.notifadmin-pagelayout .notifadmin-lead[b-hv3lq8nwrn] {
    margin: 0 0 var(--ssy-sp-04);
    max-width: 60rem;
}

.notifadmin-pagelayout .notifadmin-muted[b-hv3lq8nwrn] {
    color: var(--ssy-on-surface-muted);
}

.notifadmin-pagelayout .notifadmin-block[b-hv3lq8nwrn] {
    display: block;
}

.notifadmin-pagelayout .notifadmin-server[b-hv3lq8nwrn] {
    display: flex;
    align-items: center;
    gap: var(--ssy-sp-03);
    margin: 0;
    color: var(--ssy-on-surface-muted);
}

/* ---------- Send a notification ----------
   Its title shares the head row with the New notification button; a sent one is drawn as a type is, below. */
.notifadmin-pagelayout .notifadmin-sendtitle[b-hv3lq8nwrn] {
    margin: 0;
}

.notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-reach {
    display: flex;
    align-items: center;
    gap: var(--ssy-sp-03);
    margin: 0;
    font-weight: 700;
}

/* ---------- A post type ----------
   Types sit inside their group's card, one after another, a rule between them. */
.notifadmin-pagelayout .notifadmin-type[b-hv3lq8nwrn] {
    padding: var(--ssy-sp-04) 0;
    border-top: 1px solid var(--ssy-border);
}

    .notifadmin-pagelayout .notifadmin-type:first-of-type[b-hv3lq8nwrn] {
        border-top: 0;
        padding-top: 0;
    }

.notifadmin-pagelayout .notifadmin-typename[b-hv3lq8nwrn] {
    margin: 0;
    font-size: var(--ssy-text-body);
    font-weight: 700;
}

.notifadmin-pagelayout .notifadmin-code[b-hv3lq8nwrn] {
    font-size: var(--ssy-text-body-xs);
    font-weight: 400;
}

.notifadmin-pagelayout .notifadmin-automation[b-hv3lq8nwrn] {
    margin-top: var(--ssy-sp-04);
    padding-top: var(--ssy-sp-04);
    border-top: 1px dashed var(--ssy-border);
}

/* ---------- The type's head ---------- */
.notifadmin-pagelayout .notifadmin-head[b-hv3lq8nwrn] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-03) var(--ssy-sp-04);
    margin: 0 0 var(--ssy-sp-04);
}

.notifadmin-pagelayout .notifadmin-actions[b-hv3lq8nwrn] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-sp-03);
    margin-left: auto;
}

/* Label / value pairs, two columns on a desk, stacked on a phone. */
.notifadmin-pagelayout .notifadmin-facts[b-hv3lq8nwrn] {
    display: grid;
    grid-template-columns: minmax(9rem, max-content) 1fr;
    gap: var(--ssy-sp-03) var(--ssy-sp-05);
    margin: 0;
}

    .notifadmin-pagelayout .notifadmin-facts dt[b-hv3lq8nwrn] {
        color: var(--ssy-on-surface-muted);
    }

    .notifadmin-pagelayout .notifadmin-facts dd[b-hv3lq8nwrn] {
        margin: 0;
        min-width: 0;
        overflow-wrap: anywhere;
    }

@media (max-width: 640px) {
    .notifadmin-pagelayout .notifadmin-facts[b-hv3lq8nwrn] {
        grid-template-columns: 1fr;
        gap: var(--ssy-sp-02);
    }

        .notifadmin-pagelayout .notifadmin-facts dd[b-hv3lq8nwrn] {
            margin-bottom: var(--ssy-sp-03);
        }
}

/* ---------- Someone's phones (21 Oct 2026) ----------
   The search, the people it found, then the person's installs one under another, a rule between them. */
.notifadmin-pagelayout .notifadmin-find[b-hv3lq8nwrn] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ssy-sp-03) var(--ssy-sp-04);
    margin: var(--ssy-sp-04) 0;
}

.notifadmin-pagelayout .notifadmin-findfield[b-hv3lq8nwrn] {
    flex: 1 1 18rem;
    max-width: 28rem;
}

.notifadmin-pagelayout .notifadmin-matches[b-hv3lq8nwrn] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--ssy-sp-02);
    margin: var(--ssy-sp-03) 0 0;
    padding: 0;
    list-style: none;
}

.notifadmin-pagelayout .notifadmin-person[b-hv3lq8nwrn] {
    margin-top: var(--ssy-sp-04);
    padding-top: var(--ssy-sp-04);
    border-top: 1px solid var(--ssy-border);
}

.notifadmin-pagelayout .notifadmin-phones[b-hv3lq8nwrn] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notifadmin-pagelayout .notifadmin-phone[b-hv3lq8nwrn] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    padding: var(--ssy-sp-04) 0;
    border-top: 1px dashed var(--ssy-border);
    min-width: 0;
}

    .notifadmin-pagelayout .notifadmin-phone:first-child[b-hv3lq8nwrn] {
        border-top: 0;
        padding-top: 0;
    }

    .notifadmin-pagelayout .notifadmin-phone p[b-hv3lq8nwrn] {
        margin: 0;
        overflow-wrap: anywhere;
    }

    .notifadmin-pagelayout .notifadmin-phone .notifadmin-head[b-hv3lq8nwrn] {
        margin: 0;
    }

.notifadmin-pagelayout .notifadmin-phonename[b-hv3lq8nwrn] {
    font-weight: 700;
}

.notifadmin-pagelayout .notifadmin-answer[b-hv3lq8nwrn] {
    padding: var(--ssy-sp-02) var(--ssy-sp-03);
    border-left: 3px solid var(--ssy-border);
    background: var(--ssy-surface-variant);
}

/* ---------- The edit form ----------
   The popup body renders inside the page's scope; EditForm draws the <form>, so ::deep reaches it. */
.notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ssy-sp-04) var(--ssy-sp-05);
}

.notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-wide {
    grid-column: 1 / -1;
}

.notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-hint {
    display: block;
    margin-top: var(--ssy-sp-02);
    font-size: var(--ssy-text-body-xs);
    color: var(--ssy-on-surface-muted);
}

@media (max-width: 640px) {
    .notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-form {
        grid-template-columns: 1fr;
    }
}

/* ---------- The automation's Preview (market movers, plan §18) ----------
   Below the automation form, inside the popup: what an hourly and the end-of-day slot would post now. The post's words
   are drawn as the feed draws them, one item a line. */
.notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-preview {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-03);
    margin-top: var(--ssy-sp-05);
    padding-top: var(--ssy-sp-04);
    border-top: 1px dashed var(--ssy-border);
}

    .notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-preview p {
        margin: 0;
    }

.notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-previewtitle {
    margin: 0;
    font-size: var(--ssy-text-body);
    font-weight: 700;
}

.notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-draft {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
}

.notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-postpreview {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    padding: var(--ssy-sp-03) var(--ssy-sp-04);
    border: 1px solid var(--ssy-border);
    border-radius: var(--ssy-radius-md);
    background: var(--ssy-surface-variant);
    min-width: 0;
}

.notifadmin-pagelayout[b-hv3lq8nwrn]  .notifadmin-postlines {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Technology/UrlCompManager/TechnologyUrlCompManager.razor.rz.scp.css */
/* Technology › URLs and components. Scoped; every selector starts with .urlcomp-pagelayout, and the
   rules for markup the four tab components render go through ::deep (navigator-new-page S5: the
   sub-components have no wrapper or stylesheet of their own - the page's wrapper owns their CSS, which
   also covers their popups, since SsyPopup renders in place inside it). Every colour is a --ssy-*
   token. Cards, tables, fields, checkboxes, tabs, tags and buttons are the shared objects in
   ssynavigator.css; what is here is layout: the head row, the scrolling tab strip, the three-panel
   grid that stacks, the filters, the scrolling tables, the two-column forms that go to one. */

.urlcomp-pagelayout[b-19k1o4elwy] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
    width: 100%;
    min-width: 0;
    font-size: var(--ssy-text-body-sm);
}

/* ---------- Head: the lead and the explanation button ---------- */
.urlcomp-pagelayout .urlcomp-head[b-19k1o4elwy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ssy-sp-04);
}

.urlcomp-pagelayout .urlcomp-lead[b-19k1o4elwy] {
    margin: 0;
    max-width: 60rem;
}

/* ---------- Tabs ----------
   Five tabs are wider than a phone. The strip scrolls sideways inside itself rather than giving the
   page a horizontal scrollbar. */
.urlcomp-pagelayout .urlcomp-tabs[b-19k1o4elwy] {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
}

.urlcomp-pagelayout .urlcomp-tabpanel[b-19k1o4elwy] {
    min-width: 0;
}

    .urlcomp-pagelayout .urlcomp-tabpanel[hidden][b-19k1o4elwy] {
        display: none;
    }

    .urlcomp-pagelayout .urlcomp-tabpanel:focus-visible[b-19k1o4elwy] {
        outline: 2px solid var(--ssy-field-line-focus);
        outline-offset: 2px;
    }

.urlcomp-pagelayout .urlcomp-explain p[b-19k1o4elwy] {
    margin: 0 0 var(--ssy-sp-04);
}

    .urlcomp-pagelayout .urlcomp-explain p:last-child[b-19k1o4elwy] {
        margin-bottom: 0;
    }

/* ---------- A tab's body ---------- */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-tabbody {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
    min-width: 0;
}

/* The view switch | busy note | add and edit. Wraps on a narrow screen. */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-03) var(--ssy-sp-05);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-toolbar-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-sp-03);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-status {
    display: inline-flex;
    align-items: center;
    gap: var(--ssy-sp-02);
    color: var(--ssy-on-surface-muted);
}

/* ---------- The three panels ----------
   Selection | access | the list to grant from - 2 : 1 : 2, as Nav9. Narrower, the first two sit side
   by side and the third runs full width beneath; on a phone, one column in the same order. */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-panels {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--ssy-sp-05);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    /* Paragraphs in a card: no top margin, a small one below. Classes that want more say
       .urlcomp-card too, so they outrank this. */
    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-card p {
        margin: 0 0 var(--ssy-sp-03);
    }

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-tabbody > p {
    margin: 0;
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-intro {
    max-width: 60rem;
}

/* A card whose title shares its rule with a button (the Default URLs card). The same idiom as the
   Maintenance page's card heads. */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-cardhead {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-04);
    margin: 0 0 var(--ssy-card-pad);
    padding-bottom: var(--ssy-sp-03);
    border-bottom: var(--ssy-card-rule) solid var(--ssy-border-strong);
}

    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-cardhead .ssy-card-title {
        margin: 0;
    }

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-defaults {
    max-width: 62.5rem;
}

/* ---------- Filters ---------- */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-filters {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--ssy-sp-03);
    margin-bottom: var(--ssy-sp-03);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-filters-narrow {
    max-width: 40rem;
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-count {
    color: var(--ssy-on-surface-muted);
    font-size: var(--ssy-text-body-xs);
}

/* ---------- Tables ----------
   The panel lists scroll inside their card, with the column heads pinned. The head band's tint is
   translucent in dark, so it is laid over the solid card fill: the same colour, but rows no longer
   show through it as they scroll under. A minimum width keeps the columns usable on a phone; the
   wrapper then scrolls sideways instead of the page. */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-scroll {
    max-height: 60vh;
    min-height: 8rem;
    overflow: auto;
    overscroll-behavior: contain;
}

    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-scroll .urlcomp-table {
        min-width: 20rem;
    }

    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-scroll .urlcomp-table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        background: linear-gradient(var(--ssy-surface-subtle), var(--ssy-surface-subtle)), var(--ssy-card-fill-solid);
    }

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-tablewrap {
    overflow-x: auto;
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-table {
    table-layout: fixed;
}

    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-table td {
        vertical-align: middle;
    }

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-tree {
    min-width: 40rem;
}

/* The +/× and edit column: one 32px icon button. */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-table th.urlcomp-col-act,
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-table td.urlcomp-col-act {
    width: 3rem;
    padding: var(--ssy-sp-02);
    text-align: center;
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-wrap {
    overflow-wrap: anywhere;
}

/* The selection button fills its cell, so the focus ring and the hit area are the whole cell. */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-cellbtn {
    width: 100%;
    overflow-wrap: anywhere;
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-muted {
    color: var(--ssy-on-surface-muted);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-card .urlcomp-empty {
    margin-top: var(--ssy-sp-04);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-ditto {
    color: var(--ssy-on-surface-muted);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-subtag {
    margin-left: var(--ssy-sp-02);
    vertical-align: middle;
}

/* ---------- The access panel ---------- */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-card .urlcomp-selected {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    margin-bottom: var(--ssy-sp-04);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-selected-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-subhead {
    margin: var(--ssy-sp-06) 0 var(--ssy-sp-02);
    font-size: var(--ssy-text-body-xs);
    font-weight: 600;
    letter-spacing: var(--ssy-card-title-tracking);
    text-transform: uppercase;
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-card p.urlcomp-subnote {
    font-size: var(--ssy-text-body-xs);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-plainlist {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--ssy-text-body-xs);
}

    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-plainlist li {
        padding: var(--ssy-sp-02) 0;
        border-top: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    }

        .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-plainlist li:first-child {
            border-top: 0;
        }

/* ---------- Forms (in the popups) ----------
   Two columns, the text area across both; one column on a phone. */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-form-note {
    margin: 0 0 var(--ssy-sp-05);
    color: var(--ssy-on-surface-muted);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--ssy-sp-05);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-form-single {
    grid-template-columns: minmax(0, 1fr);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-form-wide {
    grid-column: 1 / -1;
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-check {
    align-self: center;
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-mono {
    font-family: var(--ssy-font-mono);
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-num {
    max-width: 12rem;
}

/* Delete sits at the far left of the footer, away from Save. */
.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-foot-start {
    margin-right: auto;
}

.urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-confirm {
    margin: 0 0 var(--ssy-sp-04);
}

    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-confirm:last-child {
        margin-bottom: 0;
    }

/* ---------- Narrower screens ---------- */
@media (max-width: 1280px) {
    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-panels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-panels > .urlcomp-card:nth-child(3) {
            grid-column: 1 / -1;
        }
}

@media (max-width: 760px) {
    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-panels {
        grid-template-columns: minmax(0, 1fr);
    }

    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-scroll {
        max-height: 50vh;
    }
}

@media (max-width: 640px) {
    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 560px) {
    /* SsyPopup stacks its footer full width here; a pushed-left Delete would shrink to its label. */
    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-foot-start {
        margin-right: 0;
    }
}

@media (max-width: 480px) {
    .urlcomp-pagelayout[b-19k1o4elwy]  .urlcomp-filters {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* /Components/Pages/Technology/UserRoles/TechnologyUserRoles.razor.rz.scp.css */
/* Technology › User Roles. One stylesheet for the page and its tab, form and table components: every
   rule starts with .userroles-pagelayout, and everything a child component draws is reached with
   ::deep (the popups sit inside the wrapper too, so their content is covered the same way). Every
   colour is a --ssy-* token. Cards, tables, buttons, fields, checkboxes, tags, tabs and the pager are
   the shared objects in ssynavigator.css; what is here is layout, the sort header, the Departmental
   matrix (sticky columns, vertical role names) and a few small text styles. */

.userroles-pagelayout[b-3xdwfz1fcp] {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
    width: 100%;
    min-width: 0;
    font-size: var(--ssy-text-body-sm);
}

/* ---------- Small text styles ---------- */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-lead {
    margin: 0 0 var(--ssy-sp-04);
    max-width: 60rem;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-muted {
    color: var(--ssy-on-surface-muted);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-mono {
    font-family: var(--ssy-font-mono);
    letter-spacing: var(--ssy-mono-tracking);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-wrap {
    overflow-wrap: anywhere;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-nowrap {
    white-space: nowrap;
}

/* A warning is an icon AND words - never colour alone. */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-warn {
    display: inline-flex;
    align-items: center;
    gap: var(--ssy-sp-02);
    color: var(--ssy-on-surface);
    font-size: var(--ssy-text-body-xs);
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-warn .ssy-i {
        flex: none;
        color: var(--ssy-field-icon-warning);
    }

.userroles-pagelayout[b-3xdwfz1fcp]  p.userroles-warn {
    display: flex;
    align-items: flex-start;
    margin: 0 0 var(--ssy-sp-04);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-note {
    display: flex;
    align-items: flex-start;
    gap: var(--ssy-sp-03);
    margin: var(--ssy-sp-05) 0 0;
    color: var(--ssy-on-surface-muted);
    font-size: var(--ssy-text-body-xs);
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-note .ssy-i {
        flex: none;
        color: var(--ssy-accent);
    }

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-formerror {
    display: flex;
    align-items: flex-start;
    gap: var(--ssy-sp-03);
    margin: var(--ssy-sp-05) 0 0;
    color: var(--ssy-field-msg-error);
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-formerror .ssy-i {
        flex: none;
        color: var(--ssy-field-icon-error);
    }

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-subhead {
    margin: var(--ssy-sp-06) 0 var(--ssy-sp-03);
    font-family: var(--ssy-font-body);
    font-size: var(--ssy-text-body-xs);
    font-weight: 600;
    letter-spacing: var(--ssy-card-title-tracking);
    text-transform: uppercase;
    color: var(--ssy-on-surface);
}

/* ---------- Loading ---------- */
.userroles-pagelayout .userroles-loading[b-3xdwfz1fcp] {
    display: flex;
    align-items: center;
    gap: var(--ssy-sp-03);
    padding: var(--ssy-sp-07) 0;
    color: var(--ssy-on-surface-muted);
}

/* ---------- Tabs ----------
   The strip scrolls sideways rather than pushing the page wider on a phone. */
.userroles-pagelayout .userroles-tabs[b-3xdwfz1fcp] {
    overflow-x: auto;
    min-width: 0;
}

.userroles-pagelayout .userroles-tabpanel[b-3xdwfz1fcp] {
    min-width: 0;
}

/* ---------- Filter card ---------- */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--ssy-sp-04) var(--ssy-sp-05);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-filter-search {
    flex: 1 1 14rem;
    max-width: 22rem;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-filter-select {
    flex: 0 1 12rem;
    min-width: 0;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-filter-auth {
    flex: 1 1 20rem;
    max-width: 32rem;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-filter-who {
    gap: var(--ssy-sp-02);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-grant {
    margin-top: var(--ssy-sp-05);
    padding-top: var(--ssy-sp-05);
    border-top: var(--ssy-card-stroke) solid var(--ssy-border-strong);
}

/* ---------- Panels ----------
   Three across on a wide screen (list | selected | to add, Nav9's 2fr 2fr 3fr), the list beside the
   other two below that, and one column on a tablet or phone. */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-split {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 3fr);
    align-items: start;
    gap: var(--ssy-sp-05);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-split.userroles-split-2 {
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-panel {
    min-width: 0;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-panelhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ssy-sp-04);
    margin: 0 0 var(--ssy-card-pad);
    padding-bottom: var(--ssy-sp-03);
    border-bottom: var(--ssy-card-rule) solid var(--ssy-border-strong);
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-panelhead .ssy-card-title {
        margin: 0;
    }

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-who {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ssy-sp-02) var(--ssy-sp-04);
    margin-bottom: var(--ssy-sp-05);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-whoname {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--ssy-sp-03);
    margin-bottom: var(--ssy-sp-05);
}

/* ---------- Tables ---------- */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-tablewrap {
    max-width: 100%;
    overflow-x: auto;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-caption {
    padding-bottom: var(--ssy-sp-03);
    caption-side: top;
    text-align: left;
    color: var(--ssy-on-surface-muted);
    font-size: var(--ssy-text-body-xs);
    overflow-wrap: anywhere;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-table td {
    vertical-align: top;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-empty {
    color: var(--ssy-on-surface-muted);
    font-style: italic;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-cellbtn {
    overflow-wrap: anywhere;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-rolename {
    margin-right: var(--ssy-sp-02);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-table .ssy-tag,
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-table .userroles-warn {
    margin: var(--ssy-sp-02) var(--ssy-sp-02) 0 0;
    vertical-align: middle;
}

/* A role the reader does not manage: greyed, with no edit or remove buttons (Nav9's "light-grey"). */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-locked td {
    color: var(--ssy-on-surface-muted);
}

/* The button column: as narrow as its buttons, at the row's right-hand end. */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-actcol {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.userroles-pagelayout[b-3xdwfz1fcp]  td.userroles-actcol {
    padding-top: var(--ssy-sp-02);
    padding-bottom: var(--ssy-sp-02);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-rowactions {
    display: inline-flex;
    gap: var(--ssy-sp-02);
}

/* The sortable header: the whole label is the button. */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-sortbtn {
    display: inline-flex;
    align-items: center;
    gap: var(--ssy-sp-02);
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-sortbtn:focus-visible {
        outline: 2px solid var(--ssy-field-line-focus);
        outline-offset: 2px;
    }

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-sorticon {
    flex: none;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-pagerbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ssy-sp-03);
    margin-top: var(--ssy-sp-04);
    font-size: var(--ssy-text-body-xs);
}

/* ---------- Departmental matrix ----------
   The email and name columns are sticky on the left and the header row is sticky on top, inside a
   wrapper that scrolls both ways. Sticky cells need an opaque fill: the body cells take the solid card,
   the header cells the header tint laid over the solid card (the tint alone is translucent). Separate
   borders, because collapsed borders do not travel with a sticky cell. */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrixlead {
    margin: 0 0 var(--ssy-sp-04);
    font-size: var(--ssy-text-body-xs);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrixwrap {
    max-width: 100%;
    max-height: 75vh;
    overflow: auto;
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrixwrap:focus-visible {
        outline: 2px solid var(--ssy-field-line-focus);
        outline-offset: 2px;
    }

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix {
    --ssy-check-cur-size: var(--ssy-check-size-sm);
    --ssy-check-cur-stroke: var(--ssy-check-stroke-sm);
    width: auto;
    border-collapse: separate;
    border-spacing: 0;
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix thead th {
        position: sticky;
        top: 0;
        z-index: 2;
        background: linear-gradient(var(--ssy-surface-subtle), var(--ssy-surface-subtle)), var(--ssy-card-fill-solid);
        vertical-align: bottom;
    }

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix .userroles-stick1,
    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix .userroles-stick2 {
        position: sticky;
        z-index: 1;
        box-sizing: border-box;
        background: var(--ssy-card-fill-solid);
    }

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix .userroles-stick1 {
        left: 0;
        width: 16rem;
        min-width: 16rem;
        max-width: 16rem;
    }

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix .userroles-stick2 {
        left: 16rem;
        width: 12rem;
        min-width: 12rem;
        max-width: 12rem;
        box-shadow: inset calc(-1 * var(--ssy-card-stroke)) 0 0 var(--ssy-border-strong);
    }

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix thead .userroles-stick1,
    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix thead .userroles-stick2 {
        z-index: 3;
        background: linear-gradient(var(--ssy-surface-subtle), var(--ssy-surface-subtle)), var(--ssy-card-fill-solid);
    }

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrixname {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Role names run bottom to top so a hundred-odd columns fit; the full name is in the tooltip. */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix thead th.userroles-vert {
    padding: var(--ssy-sp-03) var(--ssy-sp-02);
    text-align: center;
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix thead th.userroles-vert .userroles-sortbtn {
        flex-direction: column;
        justify-content: flex-end;
        text-align: center;
    }

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-verttext {
    max-height: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix td.userroles-cell {
    padding: var(--ssy-sp-02);
    text-align: center;
    vertical-align: middle;
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix td.userroles-cell .ssy-check-input {
        display: inline-block;
        vertical-align: middle;
        cursor: pointer;
    }

        .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix td.userroles-cell .ssy-check-input:disabled {
            cursor: not-allowed;
        }

/* ---------- Forms (in the popups) ---------- */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-form {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-05);
}

/* The fieldset only exists to disable every field at once while a save runs. */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: var(--ssy-sp-05);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-form-wide {
    grid-column: 1 / -1;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-form-checks {
    align-self: center;
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-form-end {
    display: flex;
    align-items: flex-end;
    align-self: end;
}

/* A value shown but not editable here (an id, the user a row belongs to). */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-readonly {
    box-sizing: border-box;
    min-height: 32px;
    padding: var(--ssy-sp-03) var(--ssy-sp-04);
    border: var(--ssy-card-stroke) solid var(--ssy-border-subtle);
    border-radius: var(--ssy-field-radius);
    background: var(--ssy-surface-subtle);
    color: var(--ssy-field-value);
    font-size: var(--ssy-text-body-xs);
    line-height: 16px;
    overflow-wrap: anywhere;
}

/* Blazor's validation text (app.css colours it): the field message size, right-aligned like .ssy-field-msg. */
.userroles-pagelayout[b-3xdwfz1fcp]  .validation-message {
    margin: 0;
    text-align: right;
    font-size: var(--ssy-field-msg-font-size);
    line-height: var(--ssy-field-msg-line-height);
}

/* ---------- Clone list ---------- */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-clonelist {
    display: flex;
    flex-direction: column;
    gap: var(--ssy-sp-02);
    max-height: 16rem;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
    font-size: var(--ssy-text-body-xs);
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-clonelist li {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--ssy-sp-02) var(--ssy-sp-05);
        padding: var(--ssy-sp-02) 0;
        border-top: var(--ssy-card-stroke) solid var(--ssy-border-subtle);
    }

        .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-clonelist li:first-child {
            border-top: 0;
        }

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-clonename {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* ---------- After adding a user ---------- */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-confirm p {
    margin: 0 0 var(--ssy-sp-04);
}

.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-confirmhead {
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* The email template: selectable text to copy into Front. */
.userroles-pagelayout[b-3xdwfz1fcp]  .userroles-template {
    max-height: 24rem;
    padding: var(--ssy-sp-05);
    border: var(--ssy-card-stroke) solid var(--ssy-border-strong);
    border-radius: var(--ssy-radius-md);
    background: var(--ssy-surface-subtle);
    overflow: auto;
    resize: vertical;
    overflow-wrap: anywhere;
    user-select: text;
}

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-template p:last-child {
        margin-bottom: 0;
    }

/* ---------- Narrower screens ---------- */
@media (max-width: 1400px) {
    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-split {
        grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    }

        .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-split > .userroles-panel:first-child {
            grid-row: span 2;
        }
}

@media (max-width: 900px) {
    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-split,
    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-split.userroles-split-2 {
        grid-template-columns: minmax(0, 1fr);
    }

        .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-split > .userroles-panel:first-child {
            grid-row: auto;
        }
}

/* Phone: every filter full width, one-column forms, and only the email column stays sticky in the
   matrix (two sticky columns would fill a 375px screen). */
@media (max-width: 700px) {
    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-filter-search,
    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-filter-select,
    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-filter-auth {
        flex: 1 1 100%;
        max-width: none;
    }

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-form-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix .userroles-stick1 {
        width: 9rem;
        min-width: 9rem;
        max-width: 9rem;
    }

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix .userroles-stick2,
    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix thead .userroles-stick2 {
        position: static;
        box-shadow: none;
    }

    .userroles-pagelayout[b-3xdwfz1fcp]  .userroles-matrix thead .userroles-stick2 {
        position: sticky;
        left: auto;
    }
}