:root {

    /* button */
    --yellax-button-color: white;
    --yellax-button-background: #007bff; /* blue */
    /* Flow step */
    --yellax-flowstep-active-color: black;
    --yellax-flowstep-active-background: #FFD100; /* yellax yellow */
    --yellax-flowstep-lowprio-color: white;
    --yellax-flowstep-lowprio-background: #666666; /* dark gray */
    --yellax-flowstep-disabled-color: gray;
    --yellax-flowstep-disabled-background: #d5d5d5; /* light gray */

    /* Layout chrome — the top bar and sidebar sizes. Global because both the layout itself
       and the components living inside the bar (triggers, logo plate) are sized from them. */
    --topbar-height: 3.125rem;
    --topbar-logo-height: 2.125rem;

    /* Overridable menu-strip width: the collapsed root marking below overrides this one
       variable, which is why the sidebar, the brand plate on a page with a menu, and the
       content margin all narrow together from a single toggle. */
    --sidebar-width: 12.375rem;

    /* Fixed at the expanded size, never overridden by the collapsed marking. The brand
       plate on a page without a sidebar reads this one instead, so it keeps its normal
       width regardless of the stored collapse preference — that page has no menu to line
       up with. */
    --sidebar-width-expanded: 12.375rem;
    --sidebar-width-collapsed: 3.5rem;

    /* One text size and one icon size for everything in the top bar. */
    --topbar-font-size: 0.875rem;
    --topbar-icon-size: 1.125rem;

    /* Shared height for the pill-shaped items in the bar (environment chip, job status),
       so they line up with each other instead of each floating at its own size. */
    --topbar-chip-height: 2rem;

    --topbar-divider-width: 3px;

    /* Overlays for the bar: they are translucent, so one set works on every
       environment colour instead of a variant per colour. */
    --topbar-highlight: rgb(255 255 255 / 18%);
    --topbar-divider: rgb(255 255 255 / 30%);
    --topbar-chip-bg: rgb(255 255 255 / 14%);
    --topbar-chip-border: rgb(255 255 255 / 22%);
    --topbar-trigger-active-bg: rgb(0 0 0 / 18%);
    --topbar-focus-ring: rgb(255 255 255 / 70%);

    /* Top-bar trigger hover — grey-900 at 30% opacity */
    --topbar-trigger-hover-bg: color-mix(in srgb, var(--grey-900) 30%, transparent);

    /* Grid — height budget for the .grid-viewport-height fallback */
    --grid-viewport-height-offset: 20rem;
}

/* The collapsed state is server-rendered onto the root element from a cookie (see
   App.razor), so this rule is already in effect on the very first response — nothing here
   waits for script to run after the page loads. */
:root[data-sidebar-collapsed="true"] {
    --sidebar-width: var(--sidebar-width-collapsed);
}

.icon-waiting {
    color: var(--blue-700);
}

.icon-processing {
    color: var(--blue-700);
}

.icon-completed {
    color: var(--green-500);
}

.icon-unknown {
    color: var(--blue-700);
}

.icon-crashed {
    color: var(--red-500);
}

.field-type-icon-frame {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    padding: 0.1rem 0 0 0;
    line-height: 1;
    border: 0.0625rem solid black;
    background-color: transparent;
    font-size: 0.7rem;
    vertical-align: middle;
}

html, body {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.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."
}

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

.inactive-row {
    color: var(--grey-500) !important;
}

.error-cell {
    background-color: var(--status-invalid-bg) !important;
    color: var(--status-invalid-fg) !important;
}

.selected-cell {
    background-color: var(--blue-100) !important;
}

.user-cell:hover {
    cursor: pointer;
}

.required-caption:after {
    content: ' *';
    color: red;
}

.system-column-header {
    background-color: var(--grey-500) !important;
}

.inactive-data {
    color: var(--grey-500) !important;
}

.unchanged-value {
    background-color: var(--white) !important;
}

.changed-value {
    background-color: var(--blue-100) !important;
}

.upper-layer {
    background-color: var(--green-300) !important;
}

.lower-layer {
    background-color: var(--orange-300) !important;
}

.warning-indication-cell {
    background-color: var(--yellow-200) !important;
}

.success-indication-cell {
    background-color: var(--green-300) !important;
}

.data-column-header-inactive {
    color: var(--grey-200) !important;
}

.column-bold-text {
    font-weight: bold;
}

/* Fonts */
.base-font {
    font-size: 1rem;
    color: black;
    margin-left: 0.3125rem;
    text-decoration: none;
}

.title-font {
    font-size: 1.6rem;
    font-weight: 600;
    color: black;
    margin: 0.9375rem 0 0.625rem 1.5625rem;
    text-decoration: none;
    min-width: 12.5rem;
}

.title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.platform-font {
    font-size: 1.5rem;
    color: rgb(255, 219, 41); /* Yelax Yellow */
    margin-left: 0.3125rem;
    font-style: italic;
    font-weight: bold;
    text-decoration: none;
}

.placeholder-font {
    font-size: 1rem;
    color: dimgrey;
    margin-left: 0.3125rem;
    text-decoration: none;
}

/* Pages */
.page-content {
    margin-left: 1.25rem;
    margin-right: 1.25rem;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.body-content {
    margin-top: 0.625rem;
}

/* The optional row between the page header and the grid: search box, bulk action, row count.
   Defined once so the distance between header and grid is the same on every overview page - a
   page may change how its own items are spread (gap, justify-content), never the margins. */
.grid-toolbar {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin: 0 0 0.5rem;
}

/* Bounded-height grid layout. A virtual-scrolling grid needs an upper bound: without one
   it grows to fit every row and the page scrolls instead of the grid. Opt-in, so pages
   without a grid keep their document-flow layout: put .page-fill on the page root and
   .fill-region on every wrapper between that root and the grid. Skip one and the chain
   breaks, leaving the grid unbounded again.
   https://docs.devexpress.com/Blazor/404753/components/grid/paging-and-scrolling/scrolling */
.page-fill {
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}

.fill-region {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Sizes to its rows and stops at the height the page has left, so a grid with few rows
   does not leave an empty stretch below them. */
.scrollable-grid {
    flex: 0 1 auto;
    min-height: 0;
    max-height: 100%;
    margin-bottom: 0.5rem;
}

/* Fallback for a grid nested inside third-party markup that cannot carry .fill-region
   (a DevExpress tab panel or loading panel), which breaks the flex chain. */
.grid-viewport-height {
    max-height: calc(100vh - var(--grid-viewport-height-offset));
}

.btn-header-group {
    top: 0.625rem;
}

.clickable-cell-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* The clickable name cell of an overview grid. Row height in a DevExpress grid follows the tallest
   cell, and this cell is the only one holding more than plain text, so both the text and the row
   action button are kept to one text line - otherwise every row is taller than the rows of the data
   grids, which show plain text only.

   The hover highlight still covers the full row: pad by the cell's own --dxbl-grid-text-cell-padding-y
   and cancel it again with a negative margin, so the highlight paints over the cell padding without
   adding to the row height. The DevExpress theme uses the same trick for .dxbl-grid-header-content.

   The text takes the room left next to the button, so the highlight follows a column resize, and a
   value that does not fit ends in an ellipsis instead of wrapping onto a second line - which would
   grow the row again. Give the span a title attribute so the full value stays readable. */
.clickable-text {
    flex: 1;
    min-width: 0;
    margin-block: calc(var(--dxbl-grid-text-cell-padding-y, 0.25rem) * -1);
    padding: var(--dxbl-grid-text-cell-padding-y, 0.25rem) 0.3125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.clickable-cell-button .dxbl-btn {
    --dxbl-btn-padding-y: 0;
}

    .clickable-text:hover {
        cursor: pointer;
        background: rgba(148, 148, 148, 0.3);
        border-radius: 2px;
    }