:root {
    --icon-xs: 0.75rem;
    --icon-sm: 0.8125rem;
    --icon-md: 0.875rem;
    --icon-lg: 1rem;
    --icon-xl: 1.125rem;
    --icon-2xl: 1.25rem;

    /* Wizard code-block design tokens (consumed by wizard-code-block, wizard-token-code, wizard-pre, wizard-code-header,
       and the unified console-style classes .task-output / .pipeline-step-output / .server-detail-code). */
    --wizard-code-bg: var(--rz-base-800, #232336);
    --wizard-code-header-bg: var(--rz-base-700, #2c2c40);
    --wizard-code-border: var(--rz-base-700, #3a3a4e);
    --wizard-code-text: var(--rz-text-color, #c8c8c8);
    --wizard-code-text-muted: var(--rz-text-secondary-color, #9a9aaa);
    --wizard-code-radius: 0.375rem;
    /* State variants — applied via .is-success / .is-error modifiers (e.g. agent connected). */
    --wizard-code-bg-success: color-mix(in srgb, var(--rz-success, #28a745) 12%, var(--wizard-code-bg));
    --wizard-code-border-success: color-mix(in srgb, var(--rz-success, #28a745) 60%, var(--wizard-code-border));
    --wizard-code-bg-error: color-mix(in srgb, var(--rz-danger, #dc3545) 12%, var(--wizard-code-bg));
    --wizard-code-border-error: color-mix(in srgb, var(--rz-danger, #dc3545) 60%, var(--wizard-code-border));
}

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

h1:focus {
    outline: none;
}

a, .btn-link {
    color: #0071c1;
}

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

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

.invalid {
    outline: 1px solid red;
}

.validation-message {
    color: red;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

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

.loading-progress {
    position: absolute;
    display: block;
    width: 8rem;
    height: 8rem;
    inset: 20vh 0 auto 0;
    margin: 0 auto 0 auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: var(--rz-text-color, #c8c8c8);
}

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

/* Metric card smooth transitions */
.metric-value {
    transition: opacity 0.3s ease;
}

.metric-bar .rz-progressbar-value {
    transition: width 0.6s ease-in-out;
}

/* Edit panel slide-in animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.edit-panel {
    animation: slideDown 0.25s ease-out;
    transition: box-shadow 0.2s ease;
}

.edit-panel:hover {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
}

/* Clickable tag badges */
.tag-clickable {
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.tag-clickable:hover {
    opacity: 0.8;
}

/* Dashboard clickable rows */
.dashboard-clickable-grid .rz-data-row {
    cursor: pointer;
}

.dashboard-clickable-grid .rz-data-row:hover {
    background-color: var(--rz-data-grid-row-hover-background-color, rgba(255, 255, 255, 0.05));
}

/* Docker container row backgrounds */
.docker-row-running {
    background-color: rgba(40, 167, 69, 0.08) !important;
}

.docker-row-exited {
    background-color: rgba(220, 53, 69, 0.08) !important;
}

.docker-row-paused {
    background-color: rgba(255, 193, 7, 0.08) !important;
}

.docker-row-other {
    background-color: rgba(108, 117, 125, 0.05) !important;
}

/* Service log line-count selector */
.log-lines-select {
    width: 5.5rem;
}

/* Docker log viewer */
.docker-logs {
    background: var(--rz-base-900, #1a1a2e);
    color: var(--rz-text-color, #c8c8c8);
    padding: 1rem;
    border-radius: 0.375rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    max-height: 25rem;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
    margin: 0;
}

/* Confirm dialog overlay */
.confirm-dialog-card {
    min-width: 20rem;
}

/* Docker project zoom dialog */
.docker-zoom-card {
    width: min(80rem, 95vw);
    max-height: 90vh;
    overflow: auto;
}

/* Docker relations interactive graph */
.docker-graph-svg {
    width: 100%;
    height: 36rem;
    border: 1px solid var(--rz-border-color, #e0e0e0);
    border-radius: 0.5rem;
    background: var(--rz-base-50, #fafafa);
    user-select: none;
    cursor: grab;
    display: block;
}

.docker-graph-svg:active {
    cursor: grabbing;
}

/* Docker search filter */
.docker-search {
    max-width: 14rem;
}

/* Docker memory progress bar */
.docker-mem-bar {
    height: 0.375rem;
}

.docker-mem-bar .rz-progressbar-value {
    transition: width 0.4s ease;
}

/* Docker memory progress bar colors */
.docker-mem-green .rz-progressbar-value {
    background-color: var(--rz-success, #28a745) !important;
}

.docker-mem-yellow .rz-progressbar-value {
    background-color: var(--rz-warning, #ffc107) !important;
}

.docker-mem-red .rz-progressbar-value {
    background-color: var(--rz-danger, #dc3545) !important;
}

/* Docker loading skeleton */
.docker-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem 0;
}

.skeleton-row {
    height: 2.5rem;
    border-radius: 0.375rem;
    background: linear-gradient(90deg,
        var(--rz-base-800, #2a2a3e) 25%,
        var(--rz-base-700, #3a3a4e) 50%,
        var(--rz-base-800, #2a2a3e) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Prune button spin animation */
.prune-spinning .rz-button-icon {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Compose editor textarea */
.docker-compose-editor {
    width: 100%;
    min-height: 20rem;
    background: var(--rz-base-900, #1a1a2e);
    color: var(--rz-text-color, #c8c8c8);
    border: 1px solid var(--rz-base-700, #3a3a4e);
    border-radius: 0.375rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 1rem;
    resize: vertical;
}

/* Shell terminal */
.docker-shell-output {
    min-height: 10rem;
    max-height: 20rem;
}

.docker-shell-input {
    flex: 1;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

/* Blinking cursor for shell input */
.docker-shell-input::placeholder {
    animation: blink-cursor 1s step-end infinite;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Fade-in for inspect/shell/env/browse panels */
@keyframes fadeInPanel {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.docker-panel-fadein {
    animation: fadeInPanel 0.3s ease-out;
}

/* YAML syntax highlighting (minimal CSS-based) */
.yaml-editor {
    width: 100%;
    min-height: 20rem;
    background: var(--rz-base-900, #1a1a2e);
    color: var(--rz-text-color, #c8c8c8);
    border: 1px solid var(--rz-base-700, #3a3a4e);
    border-radius: 0.375rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 1rem;
    resize: vertical;
    tab-size: 2;
}

/* Env vars table */
.docker-env-table {
    width: 100%;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8125rem;
}

.docker-env-table th {
    text-align: left;
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--rz-base-700, #3a3a4e);
    color: var(--rz-text-secondary-color, #999);
}

.docker-env-table td {
    padding: 0.375rem 0.75rem;
    border-bottom: 1px solid var(--rz-base-800, #2a2a3e);
    word-break: break-all;
}

/* File browser */
.docker-file-entry {
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--rz-base-800, #2a2a3e);
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8125rem;
}

.docker-file-entry:hover {
    background: var(--rz-base-800, #2a2a3e);
}

/* Dockerfile editor */
.docker-build-editor {
    width: 100%;
    min-height: 15rem;
    background: var(--rz-base-900, #1a1a2e);
    color: var(--rz-text-color, #c8c8c8);
    border: 1px solid var(--rz-base-700, #3a3a4e);
    border-radius: 0.375rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 1rem;
    resize: vertical;
}

/* Prune summary text */
.prune-summary {
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #999);
}

/* Server configuration YAML */
.config-yaml-block {
    background: var(--rz-base-900, #1a1a2e);
    color: var(--rz-text-color, #c8c8c8);
    border: 1px solid var(--rz-base-700, #3a3a4e);
    border-radius: 0.375rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 1rem;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 30rem;
}

.config-yaml-editor {
    width: 100%;
    min-height: 15rem;
    background: var(--rz-base-900, #1a1a2e);
    color: var(--rz-text-color, #c8c8c8);
    border: 1px solid var(--rz-base-700, #3a3a4e);
    border-radius: 0.375rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.8125rem;
    line-height: 1.5;
    padding: 1rem;
    resize: vertical;
}

/* ==========================================================================
   Blade Layout — Azure-inspired sidebar navigation
   ========================================================================== */

.blade-layout {
    display: flex;
    gap: 0;
    min-height: calc(100vh - 14rem);
}

.blade-sidebar {
    width: 13rem;
    min-width: 13rem;
    border-right: 1px solid var(--rz-base-700, #3a3a4e);
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.blade-sidebar-item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 1rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--rz-text-color, #c8c8c8);
    border-left: 3px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    user-select: none;
}

.blade-sidebar-item:hover {
    background-color: var(--rz-base-800, #2a2a3e);
}

.blade-sidebar-item.active {
    background-color: var(--rz-base-800, #2a2a3e);
    border-left-color: var(--rz-primary, #1b6ec2);
    color: var(--rz-primary, #1b6ec2);
    font-weight: 600;
}

.blade-sidebar-item .rzi {
    font-size: var(--icon-xl);
}

.blade-content {
    flex: 1;
    padding: 0.25rem 0;
    overflow-x: auto;
    min-width: 0;
}

.blade-content-spacer {
    flex: 1;
}

/* Responsive: collapse sidebar on small screens */
@media (max-width: 768px) {
    .blade-layout {
        flex-direction: column;
    }

    .blade-sidebar {
        width: 100%;
        min-width: 100%;
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--rz-base-700, #3a3a4e);
        padding: 0;
    }

    .blade-sidebar-item {
        border-left: none;
        border-bottom: 3px solid transparent;
        padding: 0.5rem 0.75rem;
        white-space: nowrap;
        font-size: 0.8125rem;
    }

    .blade-sidebar-item.active {
        border-bottom-color: var(--rz-primary, #1b6ec2);
        border-left-color: transparent;
    }

    .blade-content {
        padding: 0.25rem 0;
    }
}

/* ==========================================================================
   Server List — Toolbar and Grid
   ========================================================================== */

.server-list-toolbar {
    margin-bottom: 1rem;
}

.server-list-spacer {
    flex: 1;
}

.server-list-search {
    min-width: 15rem;
}

.server-list-grid {
    margin-top: 0.5rem;
}

.server-status-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.server-status-online {
    background-color: var(--rz-success, #28a745);
}

.server-status-offline {
    background-color: var(--rz-danger, #dc3545);
}

.server-name-link {
    color: var(--rz-primary, #1b6ec2);
    text-decoration: none;
    font-weight: 500;
}

.server-name-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Project Cards
   ========================================================================== */

.project-list-toolbar {
    margin-bottom: 1rem;
}

.project-list-spacer {
    flex: 1;
}

.project-list-search {
    min-width: 15rem;
}

.project-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem;
}

.project-card {
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    border: 1px solid var(--rz-base-700, #3a3a4e);
}

.project-card:hover {
    border-color: var(--rz-primary, #1b6ec2);
    box-shadow: 0 0.125rem 0.5rem rgba(27, 110, 194, 0.15);
}

.project-card-icon {
    font-size: var(--icon-2xl);
    color: var(--rz-primary, #1b6ec2);
}

.project-card-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.project-card-desc {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.project-card-link {
    text-decoration: none;
    color: inherit;
}

.project-card-meta-icon {
    font-size: var(--icon-md);
}

@media (max-width: 768px) {
    .project-card-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Pipeline List
   ========================================================================== */

.pipeline-list-toolbar {
    margin-bottom: 1rem;
}

.pipeline-list-spacer {
    flex: 1;
}

.pipeline-list-search {
    min-width: 15rem;
}

.pipeline-list-grid {
    margin-top: 0.5rem;
}

.pipeline-name-link {
    color: var(--rz-primary, #1b6ec2);
    text-decoration: none;
    font-weight: 500;
}

.pipeline-name-link:hover {
    text-decoration: underline;
}

/* Run history dots */
.pipeline-run-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    transition: transform 0.1s;
}

.pipeline-run-dot:hover {
    transform: scale(1.3);
}

.pipeline-run-dot-success {
    background-color: var(--rz-success, #28a745);
}

.pipeline-run-dot-failed {
    background-color: var(--rz-danger, #dc3545);
}

.pipeline-run-dot-running {
    background-color: var(--rz-info, #17a2b8);
    animation: pulse-dot 1.5s infinite;
}

.pipeline-run-dot-pending {
    background-color: var(--rz-base-500, #6c757d);
}

.pipeline-run-dot-cancelled {
    background-color: var(--rz-warning, #ffc107);
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ==========================================================================
   Pipeline Detail (tabs)
   ========================================================================== */

.pipeline-detail-toolbar {
    margin-bottom: 0.5rem;
}

.pipeline-detail-tabs {
    min-height: 20rem;
}

.pipeline-yaml-editor {
    width: 100%;
}

.pipeline-yaml-textarea {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    width: 100%;
}

.monaco-editor-container {
    width: 100%;
    height: calc(100vh - 20rem);
    min-height: 20rem;
    border: 0.0625rem solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    overflow: hidden;
}

.monaco-editor .monaco-scrollable-element > .scrollbar > .slider {
    background: rgba(121, 121, 121, 0.4);
    border-radius: 0.3125rem;
}

.monaco-editor .monaco-scrollable-element > .scrollbar > .slider:hover {
    background: rgba(121, 121, 121, 0.7);
}

.monaco-status-bar {
    display: flex;
    justify-content: flex-end;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    color: var(--rz-text-secondary-color);
    background: var(--rz-base-800);
    border: 0.0625rem solid var(--rz-border-color);
    border-top: none;
    border-radius: 0 0 var(--rz-border-radius) var(--rz-border-radius);
}

/* ==========================================================================
   Pipeline Run Detail — Stage Flow
   ========================================================================== */

.pipeline-run-toolbar {
    margin-bottom: 1rem;
}

.stage-flow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 0;
    overflow-x: auto;
}

.stage-box {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    border: 1px solid var(--rz-base-700, #3a3a4e);
    min-width: 8rem;
    background-color: var(--rz-base-900, #1e1e2e);
}

.stage-box-completed {
    border-color: var(--rz-success, #28a745);
}

.stage-box-running {
    border-color: var(--rz-info, #17a2b8);
    box-shadow: 0 0 0.5rem rgba(23, 162, 184, 0.2);
}

.stage-box-failed {
    border-color: var(--rz-danger, #dc3545);
}

.stage-box-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-weight: 600;
}

.stage-box-icon {
    font-size: var(--icon-md);
}

.stage-box-name {
    font-size: 0.875rem;
}

.stage-box-info {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #999);
}

.stage-flow-arrow {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Expandable stage/step list */
.pipeline-run-stages {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pipeline-run-stage {
    border: 1px solid var(--rz-base-700, #3a3a4e);
    border-radius: 0.375rem;
    overflow: hidden;
}

.pipeline-run-stage-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    cursor: pointer;
    background-color: var(--rz-base-800, #2a2a3e);
    transition: background-color 0.15s;
}

.pipeline-run-stage-header:hover {
    background-color: var(--rz-base-700, #3a3a4e);
}

.pipeline-run-stage-header.active {
    background-color: var(--rz-base-700, #3a3a4e);
}

.stage-status-icon {
    font-size: var(--icon-md);
}

.pipeline-run-steps {
    padding: 0.25rem 0;
}

.pipeline-run-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem 0.375rem 2.5rem;
    border-top: 1px solid var(--rz-base-800, #2a2a3e);
}

.pipeline-run-step-name {
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
    font-size: 0.8125rem;
}

.pipeline-run-matrix-header {
    cursor: pointer;
    background: var(--rz-base-900, #1e1e2e);
}

.pipeline-run-matrix-header:hover {
    background: var(--rz-base-800, #2a2a3e);
}

.matrix-toggle-icon {
    font-size: var(--icon-sm);
    flex-shrink: 0;
}

.pipeline-run-matrix-leg {
    padding-left: 4rem;
}

.step-status-icon {
    font-size: var(--icon-sm);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .stage-flow {
        flex-direction: column;
        align-items: stretch;
    }

    .stage-flow-arrow {
        justify-content: center;
        transform: rotate(90deg);
    }

    .pipeline-run-step {
        padding-left: 1.5rem;
    }

    .pipeline-run-matrix-leg {
        padding-left: 2.5rem;
    }
}

/* Layout utilities */
.flex-spacer {
    flex: 1;
}

.sidebar-width {
    width: 250px;
}

/* Auth / Login */
.login-container {
    max-width: 400px;
    margin: 5rem auto;
}

.btn-full-width {
    width: 100%;
}

/* Dashboard status colors */
.text-success {
    color: var(--rz-success);
}

.text-danger {
    color: var(--rz-danger);
}

/* ==========================================================================
   Flex Spacer
   ========================================================================== */

.flex-spacer {
    flex: 1;
}

/* ==========================================================================
   Log Viewers (Tasks + Logs pages)
   ========================================================================== */

.task-log-viewer {
    max-height: 25rem;
    overflow-y: auto;
    background: var(--rz-base-900, #1a1a2e);
    padding: 1rem;
    border-radius: 0.25rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.85rem;
}

.live-log-panel {
    height: calc(100vh - 14rem);
    overflow-y: auto;
    /* F20+: keep terminal aesthetic in dark mode; switch to light surface in light mode for parity. */
    background: var(--rz-content-background-color, #1a1a2e);
    color: var(--rz-text-color, #e0e0e0);
    padding: 1rem;
    border: 1px solid var(--rz-border-color, transparent);
    border-radius: 0.25rem;
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.85rem;
    /* Smooth auto-scroll on batched LogsReceived appends. */
    scroll-behavior: smooth;
}

.log-entry {
    color: var(--rz-text-color, #e0e0e0);
    line-height: 1.4;
}

.log-timestamp {
    color: var(--rz-text-secondary-color, #888);
}

.log-task-id {
    color: var(--rz-info, #4fc3f7);
}

.log-level-error {
    color: var(--rz-danger, #d83b3b);
}

.log-level-warning {
    color: var(--rz-warning-darker, #b6892b);
}

.log-level-debug {
    color: var(--rz-text-tertiary-color, #888);
}

.masked-value {
    background: rgba(255, 107, 107, 0.15);
    color: #ff6b6b;
    padding: 0 0.125rem;
    border-radius: 0.125rem;
    font-weight: 600;
}

/* ==========================================================================
   Token Display (#33 — neutral code color)
   ========================================================================== */

.token-code {
    color: var(--rz-text-color, #c8c8c8);
    font-family: 'Cascadia Code', 'Fira Code', monospace;
    font-size: 0.85rem;
}

/* ==========================================================================
   Visual Pipeline Editor
   ========================================================================== */

.vp-canvas-outer {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: calc(100vh - 24rem);
    min-height: 20rem;
    border: 0.0625rem solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    background-color: var(--rz-base-900, #1e1e2e);
    background-image:
        radial-gradient(circle, var(--rz-base-700, #3a3a4e) 0.0625rem, transparent 0.0625rem);
    background-size: 1.25rem 1.25rem;
}

.vp-canvas-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
}

.vp-node {
    position: absolute;
    width: 13.75rem;
    border-radius: 0.5rem;
    border: 0.125rem solid var(--rz-base-600, #4a4a5e);
    background-color: var(--rz-base-800, #2a2a3e);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.3);
    transition: border-color 0.15s, box-shadow 0.15s;
    z-index: 1;
}

.vp-node:hover {
    border-color: var(--rz-base-500, #5a5a6e);
}

.vp-node.vp-node-selected {
    border-color: var(--rz-primary, #1e88e5);
    box-shadow: 0 0 0.75rem rgba(30, 136, 229, 0.3);
}

.vp-node-header {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    border-bottom: 0.0625rem solid var(--rz-base-700, #3a3a4e);
    border-radius: 0.375rem 0.375rem 0 0;
    background-color: var(--rz-base-700, #3a3a4e);
    font-weight: 600;
    font-size: 0.8125rem;
    user-select: none;
}

.vp-node-header-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vp-node-agent {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    color: var(--rz-text-secondary-color, #a0a0b0);
    border-bottom: 0.0625rem solid var(--rz-base-700, #3a3a4e);
}

.vp-node-steps {
    padding: 0.25rem 0;
    max-height: 10rem;
    overflow-y: auto;
}

.vp-node-step {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.75rem;
    font-size: 0.75rem;
    font-family: 'Cascadia Code', 'Fira Code', 'Consolas', monospace;
}

.vp-node-step-number {
    color: var(--rz-text-secondary-color, #a0a0b0);
    min-width: 1rem;
    text-align: right;
}

.vp-node-step-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vp-node-step-edit {
    opacity: 0;
    transition: opacity 0.15s;
    cursor: pointer;
    color: var(--rz-text-secondary-color, #a0a0b0);
    font-size: var(--icon-md);
}

.vp-node-step:hover .vp-node-step-edit {
    opacity: 1;
}

.vp-node-footer {
    padding: 0.375rem 0.75rem;
    border-top: 0.0625rem solid var(--rz-base-700, #3a3a4e);
}

.vp-node-action-btn {
    cursor: pointer;
    opacity: 0.6;
    display: flex;
}

.vp-node-action-btn:hover {
    opacity: 1;
}

.inline-text {
    display: inline;
}

.vp-edge-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* ─── Tabs: remove horizontal padding on panels ─── */
.rz-tabview .rz-tabview-panel {
    padding-left: 0;
    padding-right: 0;
}

/* ─── Wizard ─── */
.wizard-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    outline: none;
}

.wizard-progress-bar {
    height: 0.25rem;
    border-radius: 0;
}

.wizard-progress-bar .rz-progressbar-value {
    transition: width 0.4s ease;
}

.wizard-dialog .rz-steps {
    flex: 1;
    overflow: visible;
}

.wizard-dialog .rz-steps > ul {
    flex-wrap: nowrap;
    max-width: calc(100% - 21rem);
}

.wizard-dialog .rz-steps-bar .rz-steps-item {
    font-size: 0.8rem;
    padding: 0 0.25rem;
}

.wizard-dialog .rz-steps-content {
    padding-top: 0.5rem;
}

.wizard-step-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.wizard-step-icon {
    font-size: 1.5rem;
    color: var(--rz-primary, #4080ff);
}

.wizard-step-content {
    opacity: 1;
}

.wizard-step-exit,
.wizard-step-enter {
    /* Transition effect removed for instantaneous step switching. */
}

@keyframes wizardFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wizard-footer {
    border-top: 1px solid var(--rz-base-700, #3a3a4e);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    position: sticky;
    bottom: 0;
    background: var(--rz-base-background-color, #1a1a2e);
    z-index: 10;
}

.wizard-actions {
    position: absolute;
    top: 2rem;
    right: 0;
    z-index: 5;
}

/* ─── Add Agent Page ─── */
.add-agent-page {
    display: flex;
    flex-direction: column;
}

.add-agent-page .wizard-dialog {
    min-height: unset;
}

/* Platform cards */
.wizard-platform-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border: 2px solid var(--rz-base-700, #3a3a4e);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.wizard-platform-card:hover {
    border-color: var(--rz-primary-lighter, #5a9aff);
    background: var(--rz-base-800, #232336);
}

.wizard-platform-selected {
    border-color: var(--rz-primary, #4080ff);
    background: var(--rz-base-800, #232336);
}

.wizard-platform-icon {
    font-size: 2rem;
    color: var(--rz-text-color, #c8c8c8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
}

.wizard-platform-icon svg {
    width: 100%;
    height: 100%;
}

.wizard-polling-countdown {
    font-size: 0.85rem;
    color: var(--rz-text-secondary-color, #9a9aaa);
}

.wizard-platform-selected .wizard-platform-icon {
    color: var(--rz-primary, #4080ff);
}

.wizard-platform-label {
    font-size: 1.1rem;
    font-weight: 500;
    flex: 1;
}

.wizard-platform-check {
    font-size: 1.25rem;
    color: var(--rz-primary, #4080ff);
}

.wizard-token-code {
    flex: 1;
    min-width: 0;
    font-family: monospace;
    font-size: 0.9rem;
    padding: 0.25rem 0.5rem;
    background: var(--wizard-code-bg);
    border-radius: calc(var(--wizard-code-radius) - 0.125rem);
    word-break: break-all;
    white-space: normal;
    user-select: all;
}

.wizard-code-block {
    margin-bottom: 0.5rem;
}

.wizard-pre-wrapper {
    position: relative;
}

.wizard-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem;
    background: var(--wizard-code-header-bg);
    border: 1px solid var(--wizard-code-border);
    border-bottom: none;
    border-radius: var(--wizard-code-radius) var(--wizard-code-radius) 0 0;
    min-height: 2rem;
}

.wizard-code-header-label {
    font-size: 0.8rem;
    color: var(--wizard-code-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wizard-pre {
    background: var(--wizard-code-bg);
    border: 1px solid var(--wizard-code-border);
    border-radius: var(--wizard-code-radius);
    padding: 0.75rem 1rem;
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.5;
    margin: 0;
}

/* When a header sits on top, drop the upper rounding/border so the two pieces meld. */
.wizard-code-header + .wizard-pre {
    border-top: none;
    border-radius: 0 0 var(--wizard-code-radius) var(--wizard-code-radius);
}

.wizard-pre code {
    color: var(--wizard-code-text);
    white-space: pre;
}

.wizard-token-pre code {
    white-space: pre-wrap;
    word-break: break-all;
}

/* ---- Console-style output blocks (unified with the wizard code tokens) ----
   .task-output           — Tasks page: stdout/stderr from agent shells
   .pipeline-step-output  — Pipelines page: per-step log streamed via SignalR
   .server-detail-code    — Servers detail: command output / inline scripts
   Use .is-success / .is-error to tint the block once a state is known. */
.task-output,
.pipeline-step-output,
.server-detail-code {
    background: var(--wizard-code-bg);
    border: 1px solid var(--wizard-code-border);
    border-radius: var(--wizard-code-radius);
    color: var(--wizard-code-text);
    font-family: 'Cascadia Code', 'Consolas', 'Menlo', monospace;
    font-size: 0.85rem;
    line-height: 1.5;
    padding: 0.75rem 1rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-word;
}

.task-output.is-success,
.pipeline-step-output.is-success,
.server-detail-code.is-success,
.wizard-pre.is-success,
.wizard-code-block.is-success > .wizard-pre {
    background: var(--wizard-code-bg-success);
    border-color: var(--wizard-code-border-success);
}

.task-output.is-error,
.pipeline-step-output.is-error,
.server-detail-code.is-error,
.wizard-pre.is-error,
.wizard-code-block.is-error > .wizard-pre {
    background: var(--wizard-code-bg-error);
    border-color: var(--wizard-code-border-error);
}

.wizard-copy-btn {
    flex-shrink: 0;
}

/* Verify polling */
.wizard-polling {
    padding: 0.75rem;
    background: var(--rz-base-800, #232336);
    border-radius: 0.375rem;
}

.wizard-verify-success-icon {
    color: var(--rz-success, #4caf50);
    vertical-align: middle;
}

.wizard-verify-list {
    margin: 0;
    padding-left: 1.25rem;
}

.wizard-verify-list li {
    margin-bottom: 0.5rem;
}

/* Apache log viewer */
.apache-log-output {
    max-height: 32rem;
    overflow-y: auto;
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: 0.75rem;
    border-radius: var(--rz-border-radius);
    background: var(--rz-base-900);
    color: var(--rz-text-color);
    white-space: pre-wrap;
    word-break: break-all;
}

.apache-log-follow {
    scroll-behavior: smooth;
    overflow-anchor: auto;
}

.vp-edge {
    fill: none;
    stroke: var(--rz-base-500, #5a5a6e);
    stroke-width: 2;
    transition: d 0.3s ease, stroke 0.2s ease, stroke-width 0.2s ease;
}

.vp-edge-selected {
    stroke: var(--rz-primary, #1e88e5);
    stroke-width: 2.5;
}

.vp-edge-arrow {
    fill: var(--rz-base-500, #5a5a6e);
}

.vp-edge-arrow-selected {
    fill: var(--rz-primary, #1e88e5);
}

.vp-toolbar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    flex-wrap: wrap;
}

.vp-settings-panel {
    border: 0.0625rem solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    padding: 0.75rem;
    margin-bottom: 0.75rem;
    background-color: var(--rz-base-800, #2a2a3e);
}

.vp-edit-panel {
    border: 0.0625rem solid var(--rz-border-color);
    border-radius: var(--rz-border-radius);
    padding: 0.75rem;
    margin-top: 0.75rem;
    background-color: var(--rz-base-800, #2a2a3e);
}

.vp-edit-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.vp-empty-canvas {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 1rem;
    color: var(--rz-text-secondary-color, #a0a0b0);
}

.vp-error-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: var(--rz-border-radius);
    background-color: var(--rz-danger-lighter, #3d1a1e);
    border: 0.0625rem solid var(--rz-danger, #dc3545);
    color: var(--rz-danger, #dc3545);
    margin-bottom: 0.75rem;
}

.vp-var-grid {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 0.25rem;
    align-items: center;
}

@media (max-width: 768px) {
    .vp-canvas-outer {
        height: calc(100vh - 28rem);
        min-height: 15rem;
    }

    .vp-node {
        width: 11rem;
    }
}

/* ---- Stat cards (Home dashboard) ---- */

.stat-card {
    border-left: 4px solid transparent;
    transition: border-color 0.15s;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* ---- Equal-height tiles — uniform height per row ----
   RadzenRow renders as flex with align-items:stretch by default, but
   RadzenColumn itself isn't flex — so a card inside it sizes to its
   content. We force the columns of these rows to be flex containers so
   their child card can stretch to the tallest sibling's height.

   Usage:
   - `equal-tile-row` on any RadzenRow → child RadzenCards auto-stretch
     (works for metric tiles on server overview, etc.)
   - `dashboard-tile-row` = `equal-tile-row` + 20rem min-height floor
     (dashboard widgets where short content should still leave breathing room)
*/
.equal-tile-row,
.dashboard-tile-row {
    align-items: stretch !important;
}

.equal-tile-row > .rz-col,
.equal-tile-row > [class*="rz-col-"],
.dashboard-tile-row > .rz-col,
.dashboard-tile-row > [class*="rz-col-"] {
    display: flex;
    flex-direction: column;
}

.equal-tile-row > .rz-col > .rz-card,
.equal-tile-row > [class*="rz-col-"] > .rz-card,
.dashboard-tile-row > .rz-col > .rz-card,
.dashboard-tile-row > [class*="rz-col-"] > .rz-card {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    height: auto;
}

.equal-tile-row .rz-card > .rz-card-body,
.dashboard-tile-row .rz-card > .rz-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.dashboard-tile {
    min-height: 20rem;
}

.dashboard-tile .dashboard-clickable-grid {
    flex: 1 1 auto;
    min-height: 0;
}

/* ---- Clickable metric tile (e.g. Services tile on server overview) ---- */
.tile-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    height: 100%;
}

.tile-link .tile-clickable {
    width: 100%;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.tile-link:hover .tile-clickable {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
    border-color: var(--rz-primary);
}

/* Project Overview — Recent Activity list flush to the content edges (no L/R padding).
   Radzen DataList applies padding via three layers: .rz-datalist-data, its >li children
   (--rz-datalist-item-padding), and the >li margin-inline. Reset all three. */
.project-activity-flush .rz-datalist-data,
.project-activity-flush .rz-datalist-content,
.project-activity-flush .rz-g {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
}

.project-activity-flush .rz-datalist-data > li {
    padding-left: 0;
    padding-right: 0;
    margin-inline: 0;
    border-left: 0;
    border-right: 0;
}

.stat-card-info {
    border-left-color: var(--rz-info);
}

.stat-card-success {
    border-left-color: var(--rz-success);
}

.stat-card-danger {
    border-left-color: var(--rz-danger);
}

.stat-card-warning {
    border-left-color: var(--rz-warning);
}

/* ---- Mobile sidebar backdrop ---- */

.sidebar-backdrop {
    display: none;
}

@media (max-width: 768px) {
    .sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
}

/* ==========================================================================
   Cron expression live validation
   ========================================================================== */

.cron-next-run {
    color: var(--rz-success, #28a745);
    font-family: 'Cascadia Code', 'Fira Code', monospace;
}

.cron-error {
    color: var(--rz-danger, #dc3545);
}

/* ==========================================================================
   Docker container row — compose project accent
   ========================================================================== */

.docker-row-project {
    border-left: 0.25rem solid transparent;
}

.docker-project-accent-0 { border-left-color: var(--rz-info, #17a2b8); }
.docker-project-accent-1 { border-left-color: var(--rz-primary, #1b6ec2); }
.docker-project-accent-2 { border-left-color: var(--rz-success, #28a745); }
.docker-project-accent-3 { border-left-color: var(--rz-warning, #ffc107); }
.docker-project-accent-4 { border-left-color: var(--rz-danger, #dc3545); }
.docker-project-accent-5 { border-left-color: #9c27b0; }
.docker-project-accent-6 { border-left-color: #ff5722; }
.docker-project-accent-7 { border-left-color: #607d8b; }

/* ==========================================================================
   Error Boundary Card
   ========================================================================== */

.error-card {
    max-width: 32rem;
    margin-top: 4rem;
}

.error-icon {
    font-size: 3rem;
    color: var(--rz-danger);
}

/* ==========================================================================
   Metric Bar / Icon Sizing
   ========================================================================== */

.metric-bar-thin {
    height: 0.375rem;
}

.icon-sm {
    font-size: var(--icon-lg);
}

/* ==========================================================================
   Skip-to-content link (F21)
   ========================================================================== */

.skip-link {
    position: absolute;
    top: -3rem;
    left: 1rem;
    z-index: 10000;
    padding: 0.5rem 1rem;
    background: var(--rz-primary, #1b6ec2);
    color: #fff;
    text-decoration: none;
    border-radius: 0 0 0.25rem 0.25rem;
    transition: top 0.2s;
}

.skip-link:focus {
    top: 0;
}

/* ==========================================================================
   Keyboard focus visibility (F-040, a11y)
   :focus-visible matches keyboard / programmatic focus only — not mouse clicks —
   so keyboard users get a clear ring without adding visual noise for pointer users.
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--rz-primary, #1b6ec2);
    outline-offset: 2px;
}

/* ==========================================================================
   Theme toggle contrast fix (F18)
   ========================================================================== */

.theme-toggle-btn {
    color: #fff !important;
}

/* ==========================================================================
   Utility classes (extracted from inline styles)
   ========================================================================== */

/* Hidden input file (replaces style="display:none") */
.input-file-hidden {
    display: none;
}

/* Pre-formatted changelog/text block */
.text-block-pre {
    white-space: pre-wrap;
    font-size: 0.8125rem;
    margin: 0;
}

/* Mail service status indicator dot */
.mail-status-dot {
    background-color: var(--rz-danger);
}

.mail-status-dot.is-running {
    background-color: var(--rz-success);
}

.lang-toggle-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.lang-badge {
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background-color: var(--rz-primary);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    position: absolute;
    right: -0.125rem;
    bottom: 0.125rem;
    pointer-events: none;
}

/* ==========================================================================
   404 Not Found page
   ========================================================================== */

.not-found-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: 2rem;
}

.not-found-illustration {
    width: 16rem;
    max-width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Mobile responsive fixes (F02)
   ========================================================================== */

@media (max-width: 576px) {
    .rz-datatable {
        overflow-x: auto;
    }

    .server-list-search,
    .pipeline-list-search {
        min-width: 0;
        width: 100%;
    }

    .stat-card .rz-text-subtitle2 {
        font-size: 0.75rem;
    }

    .stat-card .rz-text-h3 {
        font-size: 1.25rem;
    }
}

/* Help Center */
.help-search-box {
    max-width: 25rem;
    width: 100%;
}

.help-card {
    transition: box-shadow 0.2s ease, transform 0.15s ease;
    height: 100%;
}

.help-card:hover {
    box-shadow: 0 0.25rem 1rem rgba(0, 0, 0, 0.15);
    transform: translateY(-0.125rem);
}

.help-card-icon {
    font-size: 1.5rem;
    opacity: 0.7;
}

.help-article-icon {
    font-size: 1.75rem;
    opacity: 0.7;
}

/* ==========================================================================
   Header Bar & User Menu (Astraia-style)
   ========================================================================== */

.header-bar {
    width: 100%;
}

.app-home-link {
    text-decoration: none;
    color: inherit;
}

.app-title {
    cursor: pointer;
}

.header-icon {
    font-size: 1.125rem;
}

.header-action-btn {
    min-height: 2.25rem;
    min-width: 2.25rem;
    height: 2.25rem;
    box-sizing: border-box;
}

.header-user-btn {
    padding: 0 0.5rem;
}

.display-name {
    margin: 0 0.25rem;
}

.user-menu-container {
    position: relative;
}

.user-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 999;
}

.user-menu-card {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 1000;
    min-width: 15rem;
    max-width: calc(100vw - 1rem);
    padding: 0;
}

.user-menu-section {
    border-bottom: 1px solid var(--rz-base-300);
}

.user-menu-section-clickable {
    border-bottom: 1px solid var(--rz-base-300);
    cursor: pointer;
}

.user-menu-section-clickable:hover {
    background-color: var(--rz-base-200);
}

.theme-switch-readonly {
    pointer-events: none;
}

/* ==========================================================================
   Admin Tile Cards
   ========================================================================== */

.admin-tile-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.admin-tile-card {
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    border-left: 0.25rem solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 10rem;
    height: 100%;
}

.admin-tile-card:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.15);
}

/* Colored left borders for admin tiles */
.admin-tile-card.tile-primary   { border-left-color: var(--rz-primary); }
.admin-tile-card.tile-info      { border-left-color: var(--rz-info); }
.admin-tile-card.tile-success   { border-left-color: var(--rz-success); }
.admin-tile-card.tile-warning   { border-left-color: var(--rz-warning); }
.admin-tile-card.tile-secondary { border-left-color: var(--rz-secondary); }
.admin-tile-card.tile-danger    { border-left-color: var(--rz-danger); }

.admin-tile-icon {
    font-size: 2.5rem;
}

.color-primary {
    color: var(--rz-primary);
}

.color-success {
    color: var(--rz-success);
}

.color-info {
    color: var(--rz-info);
}

.color-warning {
    color: var(--rz-warning);
}

.color-danger {
    color: var(--rz-danger);
}

.color-secondary {
    color: var(--rz-secondary);
}

.log-message-cell {
    word-break: break-word;
    white-space: pre-wrap;
}

.correlation-id-text {
    font-size: 0.8rem;
    font-family: var(--rz-font-family-monospace, monospace);
    word-break: break-all;
}

.exception-pre {
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 60vh;
    overflow: auto;
    font-size: 0.85rem;
    font-family: var(--rz-font-family-monospace, monospace);
    margin: 0;
}

/* ==========================================================================
   Alert Badge
   ========================================================================== */

.alert-badge-dot {
    font-size: 0.7rem;
    min-width: 1.25rem;
    height: 1.25rem;
    line-height: 1.25rem;
    padding: 0 0.25rem;
    border-radius: 0.625rem;
    animation: pulse-dot 2s infinite;
}


/* ==========================================================================
   Button Utilities
   ========================================================================== */

.btn-fit {
    width: fit-content;
}

.settings-form {
    max-width: 30rem;
}

.about-label {
    font-weight: 600;
    min-width: 7rem;
    color: var(--rz-text-secondary-color);
}

/* ==========================================================================
   Monaco Viewer (read-only)
   ========================================================================== */

.monaco-viewer-container {
    width: 100%;
    height: 25rem;
    border: 1px solid var(--rz-grid-border);
    border-radius: var(--rz-border-radius);
}

.commit-graph {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: 1rem;
    overflow: auto;
    max-height: 30rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-grid-border);
    border-radius: var(--rz-border-radius);
    white-space: pre;
    margin: 0;
}

.blame-view {
    font-family: "Cascadia Code", "Fira Code", "Consolas", monospace;
    font-size: 0.8125rem;
    line-height: 1.4;
    padding: 1rem;
    overflow: auto;
    max-height: 35rem;
    background: var(--rz-base-background-color);
    border: 1px solid var(--rz-grid-border);
    border-radius: var(--rz-border-radius);
    white-space: pre;
    margin: 0;
}
/* F26: width utility classes (replace inline Style="width:NNNpx") */
.w-rem-6 { width: 6rem; }      /* ~96px */
.w-rem-7-5 { width: 7.5rem; }  /* 120px */
.w-rem-8-75 { width: 8.75rem; }/* 140px */
.w-rem-10 { width: 10rem; }    /* 160px */
.w-rem-11 { width: 11.25rem; } /* 180px */
.w-rem-12-5 { width: 12.5rem; }/* 200px */
.w-rem-15 { width: 15rem; }    /* 240px */
.w-rem-15-625 { width: 15.625rem; } /* 250px */
.w-rem-16 { width: 16.25rem; } /* 260px */
.w-rem-37-5 { max-width: 37.5rem; } /* 600px */
.w-rem-34-375 { max-width: 34.375rem; } /* 550px */
.minw-rem-15 { min-width: 15rem; } /* 240px */
.h-progress-thin { height: 0.375rem; } /* 6px */
.fs-13 { font-size: 0.8125rem; }

/* F26: stage node positioning via CSS custom properties */
.stage-node-positioned {
    left: var(--node-x, 0);
    top: var(--node-y, 0);
}

/* ==========================================================================
   F-25 utility classes (replace inline Style="font-size:..." etc.)
   ========================================================================== */

.icon-xxs { font-size: 0.6875rem; vertical-align: middle; }
.icon-xs-app { font-size: 0.85rem; }
.icon-sm-app { font-size: 0.875rem; }
.icon-input-sm { font-size: 0.8125rem; }
.icon-md-app { font-size: 1rem; }
.icon-3xl { font-size: 3rem; }
.icon-3xl-success { font-size: 3rem; color: var(--rz-success); }
.icon-3xl-secondary { font-size: 3rem; color: var(--rz-secondary); }
.icon-3xl-disabled { font-size: 3rem; color: var(--rz-text-disabled-color); }
.icon-warn-sm { font-size: 0.875rem; color: var(--rz-warning); }
.text-mono { font-family: 'Cascadia Code', 'Fira Code', monospace; }
.text-mono-sm { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 0.8125rem; }
.flex-1 { flex: 1; }
.text-num-cell { min-width: 1.5rem; text-align: right; }
.text-input-flex { font-size: 0.8125rem; flex: 1; }
.font-size-09 { font-size: 0.9rem; }

/* ==========================================================================
   F-25 utility classes (replace inline Style="font-size:..." etc.)
   ========================================================================== */

.icon-xxs { font-size: 0.6875rem; vertical-align: middle; }
.icon-xs-app { font-size: 0.85rem; }
.icon-sm-app { font-size: 0.875rem; }
.icon-input-sm { font-size: 0.8125rem; }
.icon-md-app { font-size: 1rem; }
.icon-3xl { font-size: 3rem; }
.icon-3xl-success { font-size: 3rem; color: var(--rz-success); }
.icon-3xl-secondary { font-size: 3rem; color: var(--rz-secondary); }
.icon-3xl-disabled { font-size: 3rem; color: var(--rz-text-disabled-color); }
.icon-warn-sm { font-size: 0.875rem; color: var(--rz-warning); }
.text-mono { font-family: 'Cascadia Code', 'Fira Code', monospace; }
.text-mono-sm { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 0.8125rem; }
.flex-1 { flex: 1; }
.text-num-cell { min-width: 1.5rem; text-align: right; }
.text-input-flex { font-size: 0.8125rem; flex: 1; }
.font-size-09 { font-size: 0.9rem; }

/* ==========================================================================
   F-25 utility classes (replace inline Style="font-size:..." etc.)
   ========================================================================== */

.icon-xxs { font-size: 0.6875rem; vertical-align: middle; }
.icon-xs-app { font-size: 0.85rem; }
.icon-sm-app { font-size: 0.875rem; }
.icon-input-sm { font-size: 0.8125rem; }
.icon-md-app { font-size: 1rem; }
.icon-3xl { font-size: 3rem; }
.icon-3xl-success { font-size: 3rem; color: var(--rz-success); }
.icon-3xl-secondary { font-size: 3rem; color: var(--rz-secondary); }
.icon-3xl-disabled { font-size: 3rem; color: var(--rz-text-disabled-color); }
.icon-warn-sm { font-size: 0.875rem; color: var(--rz-warning); }
.text-mono { font-family: 'Cascadia Code', 'Fira Code', monospace; }
.text-mono-sm { font-family: 'Cascadia Code', 'Fira Code', monospace; font-size: 0.8125rem; }
.flex-1 { flex: 1; }
.text-num-cell { min-width: 1.5rem; text-align: right; }
.text-input-flex { font-size: 0.8125rem; flex: 1; }
.font-size-09 { font-size: 0.9rem; }

/* F-48 — Remove forced uppercase styling from Radzen Material buttons and tab titles
   for a more modern look that respects user-supplied casing. */
.rz-button .rz-button-text,
.rz-tabview-nav .rz-tabview-title {
    text-transform: none;
}

/* Keep every button label on a single line. Without this, long French labels
   (e.g. "Contacter l'agent", "Mettre à jour l'agent") wrap to two lines and
   produce mismatched heights inside the same action row — sibling buttons with
   shorter labels then look visually crushed between the wrapped ones. */
.rz-button .rz-button-text {
    white-space: nowrap;
}

/* Item #11 — Pipeline runner opt-in card: a glanceable status icon on the overview.
   Green play when armed, muted pause when locked down. */
.pipeline-runner-icon-on  { font-size: 2rem; color: var(--rz-success); }
.pipeline-runner-icon-off { font-size: 2rem; color: var(--rz-text-secondary-color); opacity: 0.7; }

/* Item #3 — Agent self-update progress card: live indicator on the server detail page.
   Phase-aware coloring so a successful update lands green, a failure lands red, and the
   in-progress phases stay info-blue without visually alarming the operator. */
.agent-update-progress-card { border-left: 4px solid var(--rz-info); }
.agent-update-phase-active  { font-size: 1.25rem; color: var(--rz-info); }
.agent-update-phase-done    { font-size: 1.25rem; color: var(--rz-success); }
.agent-update-phase-failed  { font-size: 1.25rem; color: var(--rz-danger); }

/* Item #7 — top-bar task tracker widget. Sits between the help button and the user menu in the
   header, shows a numeric badge when in-flight tasks exist, opens a fixed-width popover on
   click. The backdrop covers the viewport so a click anywhere outside closes the popover. */
.task-tracker-container { position: relative; }
.task-tracker-btn { position: relative; overflow: visible; }
.task-tracker-btn.rz-button { overflow: visible; }
.task-tracker-badge {
    position: absolute; top: 0; right: 0;
    transform: translate(30%, -30%);
    min-width: 1.1rem; height: 1.1rem;
    padding: 0 0.3rem;
    border-radius: 0.6rem;
    background: var(--rz-info); color: white;
    font-size: 0.7rem; font-weight: 600; line-height: 1.1rem;
    text-align: center;
}
.task-tracker-backdrop {
    position: fixed; inset: 0; z-index: 999; background: transparent;
}
.task-tracker-popover {
    position: absolute; right: 0; top: calc(100% + 0.25rem);
    width: 22rem; max-height: 30rem;
    z-index: 1000;
    display: flex; flex-direction: column;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border: none;
    padding: 0;
}
.task-tracker-header {
    display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--rz-base-300);
}
.task-tracker-list {
    flex: 1 1 auto; overflow-y: auto; min-height: 4rem;
}
.task-tracker-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 2rem 1rem; gap: 0.5rem;
}
.task-tracker-empty-icon {
    font-size: 2rem; color: var(--rz-text-secondary-color); opacity: 0.5;
}
.task-tracker-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 1rem;
    color: inherit; text-decoration: none;
    border-bottom: 1px solid var(--rz-base-200);
}
.task-tracker-row:hover { background: var(--rz-base-100); }
.task-tracker-row-body { flex: 1 1 auto; min-width: 0; }
.task-tracker-row-name {
    font-size: 0.875rem; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-tracker-row-meta {
    font-size: 0.75rem; color: var(--rz-text-secondary-color);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.task-tracker-icon-running  { color: var(--rz-info); }
.task-tracker-icon-assigned { color: var(--rz-warning); }
.task-tracker-icon-pending  { color: var(--rz-text-secondary-color); }
.task-tracker-footer {
    border-top: 1px solid var(--rz-base-300);
    text-align: center;
}
.task-tracker-footer a {
    color: var(--rz-primary); font-size: 0.85rem; text-decoration: none;
}
.task-tracker-footer a:hover { text-decoration: underline; }

/* F-22 — Force dashboard cards to stack on narrow viewports.
   Radzen's mobile-first grid sometimes leaves Size="3" tiles squeezed on phones; explicitly force full width. */
@media (max-width: 767.98px) {
    .stat-card,
    .dashboard-tile {
        min-height: auto;
    }
    .dashboard-tile-row > .rz-col,
    .dashboard-tile-row > [class*="rz-col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* F-38 / MA-3 — Ensure all modal dialogs have a clearly visible darkened backdrop
   and that the dialog itself has proper z-index isolation. */
.rz-dialog-mask {
    background-color: rgba(0, 0, 0, 0.55) !important;
    backdrop-filter: blur(2px);
}

.rz-dialog-wrapper {
    z-index: 1050;
}

/* F-33: replaces inline indent style on Teamspeak channel rows. */
.ts-channel-root { padding-left: 0; }
.ts-channel-child { padding-left: 1.5rem; }

/* Hardening (#37): replaces ad-hoc Style="..." attributes on Radzen components. */
.empty-state-icon { font-size: 3rem; color: var(--rz-text-secondary-color); }
.error-state-icon { font-size: 3rem; color: var(--rz-danger); }
.dlg-summary-pre { max-height: 12rem; overflow: auto; }
.tpl-select { width: 20rem; }
.bulk-perm-select { width: 10rem; }
.role-edit-stack { max-width: 32rem; }
.role-perm-select { width: 100%; }
.icon-inherit { font-size: inherit; }

.scan-status-clean { color: var(--rz-success); }
.scan-status-warning { color: var(--rz-warning); }
.scan-status-unknown { color: var(--rz-secondary); }

.clone-url-input { width: 100%; min-width: 28rem; max-width: 48rem; flex: 1 1 auto; }


/* Diagnostic meta row — small, secondary-colored chips of metadata under the
   "Why offline?" summary so the eye picks the summary first. */
.contact-agent-diagnostic-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8125rem;
    color: var(--rz-text-secondary-color);
}

/* 30-minute heartbeat sparkline. One bar per minute slot, color-graded by
   how many beats hit that slot (~2 expected at 30 s cadence). Bars use flex so
   the strip stretches to fill the parent without arithmetic. */
.heartbeat-sparkline { display: flex; flex-direction: column; gap: 0.375rem; }
.heartbeat-sparkline-header { display: flex; justify-content: space-between; align-items: baseline; }
.heartbeat-sparkline-loading { height: 1.25rem; }
.heartbeat-sparkline-row {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 1.5rem;
}
.heartbeat-bucket {
    flex: 1 1 0;
    min-width: 0;
    border-radius: 2px;
}
.heartbeat-bucket-ok   { background: var(--rz-success); height: 100%; }
.heartbeat-bucket-low  { background: var(--rz-warning); height: 65%; }
.heartbeat-bucket-miss { background: var(--rz-base-300); height: 35%; }