html, body {
    font-family: 'Helvetica Neue', 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;
}

.login-box {
    margin-top: 2rem;
}

/* The setup's heading (/setup) on one line (asked for on 2026-10-26): at the h1's 2.5rem it is wider
   than the page's 46rem column and breaks; a narrow window may still wrap it. */
.setup-title {
    font-size: 1.75rem;
}

/* The setup's usage (/setup): three push buttons with an icon, side by side - radios underneath
   (Bootstrap's btn-check), so the form posts and bopSetupToggle reads them as before. */
.setup-usage-choices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.setup-usage-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    padding: 0.9rem 0.5rem 0.75rem;
    height: 100%;
}

.setup-usage-choice svg {
    width: 2.5rem;
    height: 2.5rem;
}

.setup-usage-name {
    font-weight: 600;
    line-height: 1.2;
}

.setup-usage-note {
    font-size: 0.8rem;
    opacity: 0.8;
}

@media (max-width: 575.98px) {
    .setup-usage-choices {
        grid-template-columns: 1fr;
    }
}

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

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

/* The "Owner" tag beside the "My account" heading. Bootstrap sizes badges in em, so inside an
   h1 this came out as loud as the heading itself - pin it to a fixed, quiet size instead. */
.account-owner-tag {
    font-size: 0.8rem;
    vertical-align: middle;
    margin-left: 0.5rem;
    position: relative;
    top: -0.15rem;
}


/* Row actions live at the right edge of a table, where the eye already is after reading the row,
   and they get the width the description column used to take (see Realms). The gap is what keeps
   the buttons from reading as one block. */
.table-actions {
    width: 100%;
}

.table-actions td.row-actions,
.table-actions th:last-child {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

.table-actions td.row-actions .btn + .btn {
    margin-left: 0.4rem;
}

/* A second line under the main cell value - the RIG description under its name. Quieter than the
   value it belongs to, so the column still scans as a list of names. */
.row-subtext {
    color: #6c757d;
    font-size: 0.85rem;
}

/* The gw-realms SSH transcript, shown under the synchronization result. */
.gw-realms-transcript {
    max-height: 20rem;
    overflow: auto;
    font-size: 0.75rem;
    margin-bottom: 0;
}


/* One monitoring rule: the checkbox that switches it on, and the numbers it acts on underneath -
   indented under the label so a glance down the page reads as a list of rules rather than a wall
   of inputs. */
.monitoring-rule-values {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.4rem;
    margin-left: 1.5rem;
}

.monitoring-rule-values .form-control {
    width: 6rem;
}

.monitoring-unit {
    color: #6c757d;
    font-size: 0.9rem;
}

/* The live tail on the package deployment progress screen, and the full transcript on its own
   screen. Both are terminal output: monospace, and bounded so a long one scrolls inside its box
   instead of pushing the rest of the page away. The tail is deliberately short - it answers
   "is something still happening", not "what happened". */
.deployment-live-tail {
    max-height: 9rem;
    overflow: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: 0;
}

.deployment-full-log {
    max-height: 70vh;
    overflow: auto;
    font-size: 0.8rem;
    white-space: pre-wrap;
    word-break: break-all;
}

/* The lifecycle badge on the RIG overview - the same three colours the sidebar's Active RIG box
   wears (NavMenu.razor.css), because they say the same thing. */
.rig-lifecycle-badge.rig-lifecycle-predeployment {
    background-color: #495057;
}

.rig-lifecycle-badge.rig-lifecycle-activated {
    background-color: #b8860b;
}

.rig-lifecycle-badge.rig-lifecycle-operative {
    background-color: #198754;
}

/* The state badge of a realm the RIG hosts (the Realms page, RealmLifecycle.md): grey while nothing
   is deployed for it, blue and dark yellow for the two deployment states, green once Active - the
   RIG lifecycle's colours where the meaning is the same. */
.hosted-realm-badge.hosted-realm-initializationpending {
    background-color: #495057;
}

.hosted-realm-badge.hosted-realm-databasedeployed {
    background-color: #0d6efd;
}

.hosted-realm-badge.hosted-realm-realmservicesdeployed {
    background-color: #b8860b;
}

.hosted-realm-badge.hosted-realm-active {
    background-color: #198754;
}

/* A solid dark yellow button - the Activated colour above - for an action that must not be
   overlooked among the outline buttons around it: the Hosts page's "Add prepared host". */
.btn-dark-yellow {
    --bs-btn-color: #fff;
    --bs-btn-bg: #b8860b;
    --bs-btn-border-color: #b8860b;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #9c7209;
    --bs-btn-hover-border-color: #9c7209;
    --bs-btn-focus-shadow-rgb: 184, 134, 11;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #805e07;
    --bs-btn-active-border-color: #805e07;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #b8860b;
    --bs-btn-disabled-border-color: #b8860b;
}

/* RIG settings: the dot beside a tab's name while that tab has unsaved changes - the header's one
   Save covers every such tab, and this is how the operator sees which. */
.rig-tab-dirty {
    color: #0d6efd;
    font-size: 0.6rem;
    vertical-align: middle;
}

/* An activated RIG's tab saves on its own: its button - "Update configuration", "Save monitoring
   rules" - shines while a change waits for it. Without motion for whoever asked for none. */
.rig-apply-button:not(:disabled) {
    animation: rig-apply-glow 1.6s ease-in-out infinite;
}

@keyframes rig-apply-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, 0); }
    50% { box-shadow: 0 0 0.7rem 0.25rem rgba(255, 193, 7, 0.8); }
}

@media (prefers-reduced-motion: reduce) {
    .rig-apply-button:not(:disabled) {
        animation: none;
        box-shadow: 0 0 0.6rem 0.2rem rgba(255, 193, 7, 0.8);
    }
}

/* Activation Preparation: the four steps. A locked step is dimmed rather than hidden, so the whole
   path is visible and the tooltip on its button says which step comes first. */
.rig-step-locked {
    opacity: 0.6;
}

.rig-step-locked legend {
    opacity: 1;
}

/* Activation Preparation: the developer's mount script, with its Copy button in the top right corner
   of the block rather than under it - one glance, one click. */
.rig-mount-script-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.rig-mount-script pre {
    padding-right: 7rem;
}

/* A disabled outline button keeps its colour at Bootstrap's 65 % opacity - a disabled
   outline-primary one is as blue as an enabled one. On the Hosts page that made "Configure" read as
   offered with no host in the table, beside a grey "Deploy Packages" that was disabled for the same
   reason (2026-10-24). Disabled outline buttons are therefore grey, like outline-secondary ones.
   A busy button (BusyLabel's spinner) keeps its colour: it is working, not unavailable. */
.btn-outline-primary:not(:has(.busy-label-spinner)),
.btn-outline-success:not(:has(.busy-label-spinner)),
.btn-outline-danger:not(:has(.busy-label-spinner)),
.btn-outline-warning:not(:has(.busy-label-spinner)),
.btn-outline-info:not(:has(.busy-label-spinner)) {
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: #6c757d;
}