/* 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;
}

/* 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);
}

/* 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);
}