/* MudBreadcrumbs links use --mud-palette-primary via .mud-primary-text !important; beat it with higher specificity */
.mud-breadcrumbs a.mud-link.mud-primary-text {
    color: var(--mud-palette-info) !important;
}

/* MudBreadcrumbs pads itself 16px 12px, which sits on top of the page stack's own gap and indents
   the trail away from the title under it. */
.mud-breadcrumbs {
    padding: 0;
}

/* Global layout — must be here (not scoped) so MudBlazor component roots receive the styles */
.portal-content {
    padding: 16px 24px 24px;
    font-size: 0.875rem;
}

/* Global section padding for MudBlazor surfaces rendered by child components. */
.players-search,
.players-panel,
.players-header-card,
.flags-panel,
.experiments-panel,
.environments-flow-panel,
.environments-panel,
.games-panel,
.members-panel,
.roles-panel,
.analytics-tabs-shell,
.store-tabs-shell {
    padding: 1rem 1.25rem;
}

.portal-content h1, .mud-typography-h1 { font-size: 2.2rem; }
.portal-content h2, .mud-typography-h2 { font-size: 1.9rem; }
.portal-content h3, .mud-typography-h3 { font-size: 1.65rem; }
.portal-content h4, .mud-typography-h4 { font-size: 1.4rem; }
.portal-content h5, .mud-typography-h5 { font-size: 1.25rem; }
.portal-content h6, .mud-typography-h6 { font-size: 1.1rem; }

/* The label over a panel — Description, Activity, Details. MudBlazor's subtitle2 is weight 500,
   which does not read as a heading over the body text under it. */
.portal-section-label { font-weight: 600; }

@media (max-width: 640.98px) {
    .portal-content {
        padding: 12px 16px 16px;
    }

    .players-search,
    .players-panel,
    .players-header-card,
    .flags-panel,
    .experiments-panel,
    .environments-flow-panel,
    .environments-panel,
    .games-panel,
    .members-panel,
    .roles-panel,
    .analytics-tabs-shell,
    .store-tabs-shell {
        padding: 0.875rem 1rem;
    }
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background: var(--mud-palette-background, #101215);
    color: var(--mud-palette-text-primary, #f3f4f6);
}

/* Set by agent-chat.js while the chat window's edge is dragged, so the drag selects no text. */
html.portal-agent-resizing,
html.portal-agent-resizing * {
    cursor: col-resize !important;
    user-select: none !important;
}

/* Dense form controls — denser than MudBlazor default (18.5px), but leave room under floating labels */
.mud-input-control {
    margin-top: 6px;
}

.mud-input-control-margin-dense.mud-input-outlined-with-label {
    margin-top: 8px;
    margin-bottom: 4px;
}

.mud-input.mud-input-outlined {
    margin-top: 0;
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs, var(--mud-palette-divider));
}

.mud-input.mud-input-text {
    margin-top: 0;
    margin-bottom: 0;
}

/* Match MudBlazor's own selectors so padding actually applies to inputs AND selects.
   ~12px vertical keeps the value clear of the floating label notch (6px was too tight). */
.mud-input > input.mud-input-root-outlined,
.mud-input > textarea.mud-input-root-outlined,
div.mud-input-slot.mud-input-root-outlined {
    padding: 12px 12px !important;
    font-size: 0.8125rem;
    line-height: 1.35;
    min-height: 0;
}

.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense,
.mud-input > textarea.mud-input-root-outlined.mud-input-root-margin-dense,
div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding: 10px 10px !important;
}

.mud-input > input.mud-input-root-outlined.mud-input-root-adorned-start,
.mud-input > textarea.mud-input-root-outlined.mud-input-root-adorned-start,
div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-start {
    padding-inline-start: 0 !important;
}

.mud-input > input.mud-input-root-outlined.mud-input-root-adorned-end,
.mud-input > textarea.mud-input-root-outlined.mud-input-root-adorned-end,
div.mud-input-slot.mud-input-root-outlined.mud-input-root-adorned-end {
    padding-inline-end: 0 !important;
}

/* Selects share the outlined slot classes above; keep font/line-height consistent */
.mud-select-input {
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
}

/* Labels + placeholders */

/* The long selector matches MudBlazor's own, on purpose. MudBlazor sizes a label with
   `.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol`, three
   classes deep, and sets 1rem there. A one-class rule here loses to it however late it loads, so
   every label printed at 1rem while its own value printed at 0.8125rem — the size mismatch between
   a field's label and its contents. Matching the specificity and loading later is what wins.
   Margin.Dense does not enter into it: MudBlazor's dense label rules change the transform only. */
.mud-input-control > .mud-input-control-input-container > .mud-input-label-inputcontrol {
    font-size: 0.8125rem;
    line-height: 1.25;
}

.mud-input-label-outlined {
    transform: translate(12px, 14px) scale(1);
}

.mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(12px, 12px) scale(1);
}

.mud-input-label-outlined.mud-input-label-shrink {
    transform: translate(12px, -6px) scale(0.75);
}

.mud-input > input.mud-input-root-outlined::placeholder,
.mud-input > textarea.mud-input-root-outlined::placeholder,
.mud-select-input::placeholder {
    font-size: 0.8125rem;
}

/* Adornments (calendar/clock/chevron) — keep clear of the outlined border */
.mud-input.mud-input-outlined .mud-input-adornment {
    margin: 0;
}

.mud-input.mud-input-outlined .mud-input-adornment-end {
    margin-inline-end: 2px;
}

.mud-input.mud-input-outlined .mud-input-adornment .mud-button-root.mud-icon-button {
    width: 28px;
    height: 28px;
    padding: 2px;
}

.mud-input.mud-input-outlined .mud-input-adornment .mud-svg-icon,
.mud-input.mud-input-outlined .mud-input-adornment .mud-icon-root {
    font-size: 1.125rem;
}

.mud-input.mud-input-outlined.mud-input-adorned-start {
    padding-inline-start: 8px;
}

.mud-input.mud-input-outlined.mud-input-adorned-end {
    padding-inline-end: 10px;
}

.mud-button-outlined:not(.mud-icon-button),
.mud-button-filled:not(.mud-icon-button),
.mud-button-text:not(.mud-icon-button) {
    text-transform: none;
    letter-spacing: normal;
}

.mud-button-root.mud-button-outlined:not(.mud-icon-button),
.mud-button-root.mud-button-filled:not(.mud-icon-button) {
    padding: 4px 12px;
    min-height: 30px;
    font-size: 0.8125rem;
}

.mud-button-root.mud-button-filled.mud-button-filled-size-small:not(.mud-icon-button),
.mud-button-root.mud-button-outlined.mud-button-outlined-size-small:not(.mud-icon-button),
.mud-button-root.mud-button-text.mud-button-text-size-small:not(.mud-icon-button) {
    padding: 2px 8px;
    min-height: 26px;
    font-size: 0.75rem;
}

.mud-table.mud-table-dense .mud-table-cell {
    padding: 4px 10px;
    font-size: 0.8125rem;
}

a, .btn-link {
    color: #2dd4bf;
}

/* The global `a` color above (brand accent) otherwise bleeds into MudBlazor's raw
   anchors. Breadcrumb links should read as blue navigation, not the brand accent. */
.mud-breadcrumb-item > a {
    color: var(--mud-palette-info);
}

.mud-breadcrumb-item > a:hover {
    color: var(--mud-palette-info-lighten, var(--mud-palette-info));
    text-decoration: underline;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

/* VQL filter editor — overlay pattern */
.vql-editor-wrap {
    position: relative;
    min-height: 64px;
    border-radius: 4px;
    overflow: hidden;
    background: var(--mud-palette-surface, #1e2127);
}

.vql-editor-wrap pre,
.vql-editor-wrap textarea {
    margin: 0;
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', 'Menlo', monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    tab-size: 4;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    border: none;
    outline: none;
    resize: none;
}

.vql-editor-wrap pre {
    position: absolute;
    inset: 0;
    color: var(--mud-palette-text-primary, #f3f4f6);
    pointer-events: none;
    overflow: hidden;
    background: transparent;
}

.vql-editor-wrap textarea {
    position: relative;
    z-index: 1;
    background: transparent;
    color: transparent;
    caret-color: var(--mud-palette-text-primary, #f3f4f6);
    spellcheck: false;
}

.vql-editor-wrap textarea:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Token colours */
.vql-editor-wrap .vql-k  { color: #56b6c2; font-weight: 600; }   /* keywords */
.vql-editor-wrap .vql-f  { color: #c678dd; }                      /* field names */
.vql-editor-wrap .vql-s  { color: #98c379; }                      /* strings */
.vql-editor-wrap .vql-n  { color: #d19a66; }                      /* numbers / durations */
.vql-editor-wrap .vql-op { color: #abb2bf; }                      /* operators */

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* Portfolio board KPI stars — MudIcon roots do not receive scoped CSS. */
.board-card-stars .mud-icon-root,
.board-card-stars svg {
    color: inherit;
    fill: currentColor;
}

/* Dark theme: board card copy was purple because Secondary is #c084fc. */
.mud-theme-dark .board-card,
.mud-theme-dark .board-card .mud-typography,
.mud-theme-dark .board-card .mud-secondary-text {
    color: #ffffff !important;
}

.mud-theme-dark .board-card .mud-chip-text.mud-chip-color-default {
    color: #ffffff !important;
}

/* The attachment area accepts a paste anywhere on the page and a file dropped on itself. The
   outline is the only signal that the drop lands here, so it is drawn outside the card rather than
   inside, where the staged file rows would hide it. */
.vlitz-drop-zone.vlitz-drop-active {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: 4px;
    border-radius: 4px;
}

/* The environment picker's list, widened past the 180px of the field that anchors it. A popover is
   rendered by MudBlazor's popover provider, outside this layout's DOM, so the layout's scoped CSS
   cannot reach it and this rule lives here. Without it the last item — "＋ Clone current
   environment…" — is cut to "Clone current environmen". */
.portal-context-popover .mud-list-item {
    white-space: nowrap;
}

.portal-context-popover {
    min-width: max-content;
}

/* A password manager fills a saved login without firing the events Blazor binds to. The value never
   reaches the model, so MudBlazor — which shrinks the label off its bound value, not off the DOM —
   leaves the label in its resting position, on top of the text the browser just painted. The
   autofill pseudo-class is the only signal the page gets, so the label is shrunk from CSS.

   The transforms are MudBlazor's own, copied from its shrink rules so an autofilled field lands
   exactly where a typed one does. The -webkit- and standard spellings are separate rules on
   purpose: a browser that does not know one selector drops the entire rule it appears in, so
   joining them with a comma would lose both.

   Presentation only. The model is still empty until the operator touches the field or submits, and
   nothing here changes that. */
.mud-input:has(input:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(0, 1.5px) scale(0.75);
}

.mud-input:has(input:autofill) ~ label.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(0, 1.5px) scale(0.75);
}

.mud-input:has(input:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.75);
    max-width: calc((100% - 14px) / 0.75);
}

.mud-input:has(input:autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.75);
    max-width: calc((100% - 14px) / 0.75);
}

.mud-input:has(input:-webkit-autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled {
    transform: translate(12px, 10px) scale(0.75);
}

.mud-input:has(input:autofill) ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-filled {
    transform: translate(12px, 10px) scale(0.75);
}

/* Machine secrets — see Components/Shared/SecretTextField.razor. The input is type=text so that
   Safari raises no iCloud Passwords prompt, so the mask has to come from CSS. */
.vlitz-secret-field input,
.vlitz-secret-field textarea {
    -webkit-text-security: disc;
    text-security: disc;
}

/* Firefox took -webkit-text-security in version 118. An older engine would paint the token in
   clear text, so hide the glyphs there instead of trusting the property. */
@supports not (-webkit-text-security: disc) {
    .vlitz-secret-field input,
    .vlitz-secret-field textarea {
        color: transparent;
        text-shadow: 0 0 7px var(--mud-palette-text-primary);
    }
}

/* The game picker in the app bar (Components/Layout/GameSwitcher.razor). Its list is a popover, which
   MudBlazor's provider renders outside the component's DOM, so these rules cannot be scoped CSS. */
.game-switcher {
    position: relative;
    display: inline-flex;
}

.game-switcher-activator {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 280px;
    height: 44px;
    padding: 4px 6px 4px 4px;
    border: 1px solid var(--mud-palette-lines-inputs);
    border-radius: 10px;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.game-switcher-activator:hover:not(:disabled),
.game-switcher-activator[aria-expanded="true"] {
    border-color: var(--mud-palette-text-secondary);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.game-switcher-activator:disabled {
    cursor: default;
    opacity: 0.6;
}

.game-switcher-activator:focus-visible,
.game-switcher-item:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.game-switcher-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.game-switcher-arrow {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}

.game-mark {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: var(--game-mark-size, 34px);
    height: var(--game-mark-size, 34px);
    border-radius: calc(var(--game-mark-size, 34px) * 0.24);
    color: #fff;
    font-size: calc(var(--game-mark-size, 34px) * 0.38);
    font-weight: 600;
    letter-spacing: 0.02em;
    object-fit: cover;
    user-select: none;
}

.game-switcher-popover {
    width: 420px;
    max-width: calc(100vw - 16px);
    margin-top: 6px;
    border-radius: 12px !important;
    overflow: hidden;
}

.game-switcher-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.game-switcher-search-icon {
    flex-shrink: 0;
    color: var(--mud-palette-text-secondary);
}

.game-switcher-search-input {
    flex: 1;
    min-width: 0;
    height: 52px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 1rem;
}

.game-switcher-search-input::placeholder {
    color: var(--mud-palette-text-secondary);
}

.game-switcher-list {
    max-height: min(420px, 60vh);
    overflow-y: auto;
    padding: 8px;
    overscroll-behavior: contain;
}

.game-switcher-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 8px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: inherit;
    font-size: 1rem;
    text-align: left;
    cursor: pointer;
}

.game-switcher-item:hover {
    background: var(--mud-palette-action-default-hover);
}

.game-switcher-item.is-selected {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
}

.game-switcher-item-name {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.game-switcher-empty {
    padding: 16px 12px;
    color: var(--mud-palette-text-secondary);
}

/* On a phone the button is the mark alone, and the list spans the screen under the app bar.
   MudBlazor positions a popover with inline top and left, so only !important moves it. */
@media (max-width: 640.98px) {
    /* The studio name, hidden here because MainLayout.razor.css cannot reach it: it is the root of a
       MudText, and scoped CSS stops at a child component's root. */
    .portal-context-stack .portal-context {
        display: none;
    }

    .game-switcher-activator {
        padding: 4px;
        gap: 0;
    }

    .game-switcher-activator .game-switcher-name,
    .game-switcher-activator .game-switcher-arrow {
        display: none;
    }

    .game-switcher-popover {
        position: fixed !important;
        top: 56px !important;
        left: 8px !important;
        right: 8px !important;
        width: auto;
        max-width: none;
        margin-top: 0;
        transform: none !important;
    }

    .game-switcher-list {
        max-height: calc(100dvh - 56px - 52px - 24px);
    }

    .game-switcher-search-input {
        /* Below 16px iOS Safari zooms the page when the field takes focus. */
        font-size: 16px;
    }
}