/** {*/
/*    outline: 1px solid #f00 !important;*/
/*}*/

:root {
    /* Canonical cross-platform monospace stack — keep in sync with TcaFonts.Monospace (C#).
       Bare Consolas is Windows-only; this carries a full fallback chain for Linux/macOS. */
    --tca-font-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", "SF Mono", Menlo, Monaco, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;
}

html, body {
    /*overflow: hidden;*/
}

h1:focus {
    outline: none;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    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."
}

.mud-expand-panel.minimal-header .mud-expand-panel-header {
    padding: 0 16px;
}

.monaco-editor-container { height: 100%; }

.fill-height {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.img-bg {
    z-index: -10;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Mask: fully opaque until --fade-stop%, then fade to transparent over --fade-softness% */
    -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) calc(var(--fade-stop) * 1%),
            rgba(0, 0, 0, 0) calc((var(--fade-stop) + var(--fade-softness)) * 1%)
    );
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: top;

    mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 1) calc(var(--fade-stop) * 1%),
            rgba(0, 0, 0, 0) calc((var(--fade-stop) + var(--fade-softness)) * 1%)
    );
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    mask-position: top;
    box-shadow: 0 20px 50px rgba(2, 6, 23, 0.12);
    filter: brightness(calc(1 - var(--darken)));

    overflow: hidden;
}

/* ===================================================================
   AUTH LAYOUT - FULLSCREEN BACKGROUND
   =================================================================== */

.auth-fullscreen {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: auto;
}

.auth-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.auth-bg-overlay {
    position: absolute;
    inset: 0;
    background: var(--mud-palette-background);
    z-index: 1;
}

.auth-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 420px;
    padding: 24px 16px;
    gap: 24px;
}

.auth-footer {
    opacity: 0.5;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.auth-theme-toggle {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 3;
}

.auth-theme-toggle .mud-icon-button {
    color: var(--mud-palette-text-primary);
    background: rgba(var(--mud-palette-surface-rgb), 0.55);
    backdrop-filter: blur(12px) saturate(1.4);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* ===================================================================
   LOGIN - GLASS CARD
   =================================================================== */

.login-glass-card {
    width: 100%;
    padding: 40px 32px;
    border-radius: 16px;
    background: rgba(var(--mud-palette-surface-rgb), 0.55);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}

@media (max-width: 480px) {
    .login-glass-card {
        padding: 32px 20px;
        border-radius: 12px;
    }
}

/* -- Branding -- */

.login-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 4px;
}

.login-logo {
    border-radius: 10px;
}

.login-brand-title {
    font-weight: 700;
    letter-spacing: -0.3px;
}

.login-subtitle {
    margin-bottom: 8px;
}

/* -- Alert -- */

.login-alert {
    border-radius: 8px;
}

/* -- Form fields -- */

.login-field .mud-input-outlined-border {
    border-radius: 10px;
    border-color: rgba(255, 255, 255, 0.12);
    transition: border-color 0.2s ease;
}

.login-field .mud-input-root:hover .mud-input-outlined-border {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.5);
}

.login-field .mud-input-root-outlined {
    background: rgba(var(--mud-palette-surface-rgb), 0.3);
    border-radius: 10px;
    transition: background 0.2s ease;
}

.login-field .mud-input-root-outlined.mud-input-root-focused {
    background: rgba(var(--mud-palette-surface-rgb), 0.45);
}

/* -- Submit button -- */

.login-submit-btn {
    height: 48px;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.3px;
    border-radius: 10px !important;
    box-shadow: 0 4px 14px rgba(var(--mud-palette-primary-rgb), 0.35);
    transition: box-shadow 0.25s ease;
}

.login-submit-btn:hover {
    box-shadow: 0 6px 20px rgba(var(--mud-palette-primary-rgb), 0.5);
}

/* -- Forgot password -- */

.login-forgot-btn {
    text-transform: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.login-forgot-btn:hover {
    opacity: 1;
}

/* -- Divider -- */

.login-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0;
}

.login-divider-line {
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

.login-divider-text {
    text-transform: lowercase;
    opacity: 0.6;
}

/* -- OAuth buttons -- */

.login-oauth-btn {
    border-radius: 10px !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    text-transform: none;
    font-weight: 500;
    background: rgba(var(--mud-palette-surface-rgb), 0.2);
    transition: background 0.2s ease, border-color 0.2s ease;
}

.login-oauth-btn:hover {
    background: rgba(var(--mud-palette-surface-rgb), 0.35);
    border-color: rgba(255, 255, 255, 0.2) !important;
}

/* ===================================================================
   ANIMATIONS
   =================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.animate-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.alert-container {
    animation: fadeIn 0.35s ease-out;
}

/* ===================================================================
   TCADMIN LOADING SCREEN STYLES
   =================================================================== */

.tcadmin-loading-overlay {
    /* Primary / progress bar colors */
    --primary-color: #00aaff;
    --primary-color-alt: #0088ff;
    --secondary-color: #00ccff;

    /* Background overlay color */
    --bg-dark: #0a0a0a;

    /* Glass card background */
    --loading-card-bg: rgba(30, 30, 40, 0.55);

    /* Text color (title & status) */
    --loading-text-color: #fff;

    /* Animation timing */
    --shimmer-duration: 2s;
    --pulse-duration: 1.5s;
}

/* Light-mode loading screen — applied by the theme-bootstrap script in App.razor when
   the user's stored (or system) preference is light. Any explicit LoadingScreenConfig
   colors still win via the inline style on #tcadmin-loading (inline-style specificity). */
html.loading-light .tcadmin-loading-overlay {
    --bg-dark: #eef1f6;
    --loading-card-bg: rgba(255, 255, 255, 0.65);
    --loading-text-color: #1f2430;
}

html.loading-light .loading-glass-card {
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(0, 0, 0, 0.03) inset;
}

html.loading-light .loading-progress-track {
    background: rgba(0, 0, 0, 0.10);
}

/* The stock background art (/img/background.png) is dark navy — part of the DARK look. In
   light mode it would bleed through the translucent overlay and keep the loader dark, so it
   is hidden (the solid --bg-dark base on the overlay root paints instead). Theme-configured
   images are branding and keep showing in both schemes (they don't carry this class). */
html.loading-light .loading-bg-image.loading-bg-default {
    display: none;
}

.tcadmin-loading-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    z-index: 9999;
    transition: opacity 0.5s ease;
    /* Solid base under the bg-image/overlay layers: guarantees the loader tracks the color
       scheme (--bg-dark flips via html.loading-light) even when the image is hidden or a
       theme's gradients don't cover. In dark mode it sits invisibly under the full-cover art. */
    background: var(--bg-dark);
}

.tcadmin-loading-overlay.visible {
    opacity: 1;
    pointer-events: all;
}

.tcadmin-loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* -- Background (mirrors auth layout) -- */

.loading-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
}

.loading-bg-overlay {
    position: absolute;
    inset: 0;
    background: var(--bg-dark);
    opacity: 0.7;
    z-index: 1;
}

/* -- Glass card -- */

.loading-glass-card {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 380px;
    padding: 40px 32px 32px;
    border-radius: 16px;
    background: var(--loading-card-bg);
    backdrop-filter: blur(24px) saturate(1.4);
    -webkit-backdrop-filter: blur(24px) saturate(1.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25),
                0 0 0 1px rgba(255, 255, 255, 0.04) inset;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    animation: loadingCardFadeIn 0.5s ease-out;
}

@keyframes loadingCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 480px) {
    .loading-glass-card {
        max-width: calc(100% - 32px);
        padding: 32px 20px 24px;
        border-radius: 12px;
    }
}

/* -- Branding (logo OR title, centered) -- */

.loading-logo {
    max-height: 64px;
    max-width: 100%;
    border-radius: 10px;
    object-fit: contain;
}

.loading-brand-title {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.3px;
    text-align: center;
    color: var(--loading-text-color);
}

/* -- Progress bar -- */

.loading-progress-wrapper {
    width: 100%;
}

.loading-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    position: relative;
}

.loading-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 3px;
    background: linear-gradient(
        90deg,
        var(--primary-color) 0%,
        var(--primary-color-alt) 40%,
        var(--secondary-color) 100%
    );
    background-size: 200% 100%;
    animation: loading-gradient-shift var(--shimmer-duration) ease-in-out infinite;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(0, 170, 255, 0.4),
                0 0 4px rgba(0, 170, 255, 0.2);
}

@keyframes loading-gradient-shift {
    0% {
        background-position: 0% 0;
    }
    50% {
        background-position: 100% 0;
    }
    100% {
        background-position: 0% 0;
    }
}

/* -- Status text -- */

.loading-status {
    font-size: 0.8125rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    color: var(--loading-text-color);
    opacity: 0.5;
    text-align: center;
    min-height: 1.2em;
    animation: loading-pulse var(--pulse-duration) ease-in-out infinite;
}

@keyframes loading-pulse {
    0%, 100% {
        opacity: 0.45;
    }
    50% {
        opacity: 0.85;
    }
}

/* -- Performance -- */

.loading-progress-fill {
    will-change: width;
}

/* -- Accessibility -- */

@media (prefers-reduced-motion: reduce) {
    .loading-progress-fill,
    .loading-status {
        animation: none;
    }

    .loading-glass-card {
        animation: none;
    }
}

/* ===================================================================
   DATABASE PAGE STYLES
   =================================================================== */

.database-name-field .mud-input-adornment {
    margin-right: -8px;
}

.database-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0;
}

/* Database cards */
.database-card {
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
}

.database-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.database-card-selected {
    transition: all 0.3s ease;
    cursor: pointer;
    height: 100%;
    border: 2px solid var(--mud-palette-primary);
    box-shadow: 0 8px 24px rgba(var(--mud-palette-primary-rgb), 0.3);
}

.database-card-selected:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(var(--mud-palette-primary-rgb), 0.4);
}

/* Hover cards for action buttons */
.hover-card {
    transition: all 0.3s ease;
    cursor: pointer;
}

.hover-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}

/* Responsive adjustments for database page */
@media (max-width: 960px) {
    .database-card:hover,
    .database-card-selected:hover {
        transform: none;
    }

    .hover-card:hover {
        transform: none;
    }
}

/* ===================================================================
   SUB USER PERMISSIONS PAGE STYLES
   =================================================================== */

/* Permission card base styles */
.permission-card {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    transition: all 0.2s ease;
}

.permission-card:hover {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.04);
}

/* Granted permission card */
.permission-card-granted {
    border-color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.permission-card-granted:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.12);
}

/* Cursor pointer utility */
.cursor-pointer {
    cursor: pointer;
}

/* Single-line truncation utility. Note the min-width:0 — without it a flex/stack
   child refuses to shrink below its content width and never ellipsizes. */
.tca-text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Background gray for select all section */
.mud-background-gray {
    background: rgba(var(--mud-palette-text-primary-rgb), 0.04);
}

/* ===================================================================
   PLUGIN CARD BACKGROUND IMAGE STYLES
   =================================================================== */

/* Manifest cards sit in a MudGrid row and stretch to the tallest sibling via
   mud-height-full. That stretches the CARD, but not its contents — so a card with
   no description ends up with its footer parked mid-card while a taller neighbour's
   sits lower, and the "View Details" buttons across a row don't line up.
   This chain (card → content → body stack) makes each level fill its parent, then
   .plugin-card-footer's margin-top:auto absorbs the slack so the footer lands on the
   bottom edge no matter how much content is above it. */
.plugin-card {
    display: flex;
    flex-direction: column;
}

.plugin-card > .mud-card-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.plugin-card-body {
    flex: 1 1 auto;
}

.plugin-card-footer {
    margin-top: auto;
}

/* Plugin card with background image support */
.plugin-card-with-bg {
    position: relative;
    overflow: hidden;
}

/* Background image element - absolutely positioned behind content */
.plugin-card-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* Gradient overlay for text readability - sits on top of the image */
.plugin-card-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(var(--mud-palette-surface-rgb), 0.65) 0%,
        rgba(var(--mud-palette-surface-rgb), 0.8) 35%,
        rgba(var(--mud-palette-surface-rgb), 0.92) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Hover effect - slightly reveal more of the image */
.plugin-card-with-bg:hover .plugin-card-bg-image {
    opacity: 0.18;
}

/* "What's New" tiles are whole-card links — they need a hover affordance of their
   own, since most carry no background image to reveal. */
.whats-new-card {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.whats-new-card:hover {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.18);
}

/* Ensure card header, content, and actions stay above the background layers */
.plugin-card-with-bg > .mud-card-header,
.plugin-card-with-bg > .mud-card-content,
.plugin-card-with-bg > .mud-card-actions {
    position: relative;
    z-index: 2;
}

/* ===================================================================
   PLUGIN PAGE BACKGROUND IMAGE STYLES
   =================================================================== */

/* Page container with background image support (similar to plugin-card-with-bg) */
.plugin-page-with-bg {
    position: relative;
    overflow: hidden;
    min-height: 100%;
}

/* Background image element for pages - absolutely positioned */
.plugin-page-bg-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 400px;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    opacity: 0.12;
    z-index: 0;
    pointer-events: none;
}

/* Gradient overlay for page background - ensures text readability */
.plugin-page-bg-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 400px;
    background: linear-gradient(
        to bottom,
        rgba(var(--mud-palette-surface-rgb), 0.55) 0%,
        rgba(var(--mud-palette-surface-rgb), 0.75) 50%,
        rgba(var(--mud-palette-background-rgb), 1) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Content container - ensures all page content is above background */
.plugin-page-content {
    position: relative;
    z-index: 2;
}

/* List item styling for plugin manifest pages (replaces inline style) */
.plugin-page-content article > ul > li {
    margin-left: 35px;
}

/* Disconnect dialog - transparent paper for animated inner content */
.disconnect-dialog-transparent {
    background: transparent !important;
    box-shadow: none !important;
}

.disconnect-dialog-transparent .mud-dialog-content {
    padding: 0 !important;
}

/* ===================================================================
   API KEYS GLOBAL STYLES
   =================================================================== */

/* API Key monospace text */
.api-key-mono {
    font-family: var(--tca-font-mono);
    letter-spacing: 0.02em;
}

/* API Key status indicators */
.api-key-status-active {
    color: var(--mud-palette-success);
}

.api-key-status-expired {
    color: var(--mud-palette-warning);
}

.api-key-status-revoked {
    color: var(--mud-palette-error);
    text-decoration: line-through;
    opacity: 0.7;
}

/* API Key copy feedback animation */
@keyframes copyFlash {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: rgba(var(--mud-palette-success-rgb), 0.2);
    }
    100% {
        background-color: transparent;
    }
}

.api-key-copy-flash {
    animation: copyFlash 0.5s ease-out;
}

/* Permission chip styles for API keys */
.api-key-permission-chip {
    font-size: 0.75rem;
    height: 24px;
    margin: 2px;
}

/* API Key warning banner */
.api-key-warning-banner {
    background: linear-gradient(135deg,
        rgba(var(--mud-palette-warning-rgb), 0.1) 0%,
        rgba(var(--mud-palette-warning-rgb), 0.2) 100%);
    border-left: 4px solid var(--mud-palette-warning);
    padding: 12px 16px;
    border-radius: 0 8px 8px 0;
}

/* Secure badge for API key display */
.api-key-secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(var(--mud-palette-success-rgb), 0.1);
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.3);
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-success);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* API Key Permissions Dialog Styles */
.api-key-permissions-dialog .mud-dialog-content {
    padding: 16px 24px;
}

.api-key-permissions-dialog .category-item {
    cursor: pointer;
    transition: background-color 0.15s ease;
    border-left: 3px solid transparent;
}

.api-key-permissions-dialog .category-item:hover:not(.category-item-selected) {
    background: var(--mud-palette-action-default-hover);
}

.api-key-permissions-dialog .category-item-selected {
    border-left-color: var(--mud-palette-primary-darken);
}

.api-key-permissions-dialog .permission-item-readonly {
    border-radius: 4px;
    transition: background-color 0.15s ease;
}

.api-key-permissions-dialog .permission-item-readonly:hover {
    background: var(--mud-palette-action-default-hover);
}

@media (prefers-reduced-motion: reduce) {
    .api-key-permissions-dialog .category-item,
    .api-key-permissions-dialog .permission-item-readonly {
        transition: none;
    }
}

/* ===================================================================
   DASHBOARD PACKERY GRID STYLES
   =================================================================== */

/* Initially hide the dashboard grid to prevent layout flash/jump */
.dashboard-grid.packery-initializing {
    opacity: 0;
    visibility: hidden;
}

/* Reveal the grid after Packery has calculated positions */
.dashboard-grid.packery-ready {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease-out;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .dashboard-grid.packery-ready {
        transition: none;
    }
}

/* ===================================================================
   SYSTEM HEALTH PAGE STYLES
   =================================================================== */

.health-container {
    padding: 16px 0;
}

.health-header {
    border-radius: 16px;
    padding: 24px 32px;
    margin-bottom: 24px;
    position: relative;
    overflow: hidden;
}

.health-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.health-header-healthy {
    background: linear-gradient(135deg, var(--mud-palette-success) 0%, var(--mud-palette-success-darken) 100%);
}

.health-header-degraded {
    background: linear-gradient(135deg, var(--mud-palette-warning) 0%, var(--mud-palette-warning-darken) 100%);
}

.health-header-unhealthy {
    background: linear-gradient(135deg, var(--mud-palette-error) 0%, var(--mud-palette-error-darken) 100%);
}

.health-header-unknown {
    background: linear-gradient(135deg, var(--mud-palette-grey-default) 0%, var(--mud-palette-grey-darken-1) 100%);
}

.health-icon-container {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
}

.health-title {
    color: white;
    font-weight: 700;
    font-size: 1.75rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.health-subtitle {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

.health-card {
    border-radius: 12px;
    border: 2px solid transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--mud-palette-background-paper);
    overflow: hidden;
}

.health-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

.health-card-healthy {
    border-color: var(--mud-palette-success);
}

.health-card-degraded {
    border-color: var(--mud-palette-warning);
}

.health-card-unhealthy {
    border-color: var(--mud-palette-error);
}

.health-card-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.health-card-header-healthy {
    background: linear-gradient(to right, rgba(var(--mud-palette-success-rgb), 0.08) 0%, transparent 100%);
}

.health-card-header-degraded {
    background: linear-gradient(to right, rgba(var(--mud-palette-warning-rgb), 0.08) 0%, transparent 100%);
}

.health-card-header-unhealthy {
    background: linear-gradient(to right, rgba(var(--mud-palette-error-rgb), 0.08) 0%, transparent 100%);
}

.health-card-body {
    padding: 20px;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-badge-healthy {
    background: rgba(var(--mud-palette-success-rgb), 0.15);
    color: var(--mud-palette-success);
}

.status-badge-degraded {
    background: rgba(var(--mud-palette-warning-rgb), 0.15);
    color: var(--mud-palette-warning);
}

.status-badge-unhealthy {
    background: rgba(var(--mud-palette-error-rgb), 0.15);
    color: var(--mud-palette-error);
}

.health-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--mud-palette-divider);
}

.health-detail-row:last-child {
    border-bottom: none;
}

.health-detail-label {
    color: var(--mud-palette-text-secondary);
    font-size: 0.875rem;
}

.health-detail-value {
    font-weight: 500;
    font-size: 0.875rem;
}

.health-refresh-button {
    position: relative;
    z-index: 1;
}

.server-status-item {
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.server-status-item:last-child {
    margin-bottom: 0;
}

.server-status-item-online {
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.2);
}

.server-status-item-offline {
    background: rgba(var(--mud-palette-error-rgb), 0.08);
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.2);
}

/* License usage bar */
.license-usage-bar {
    height: 8px;
    border-radius: 4px;
    background: var(--mud-palette-grey-lighter);
    overflow: hidden;
}

.license-usage-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.license-usage-fill-healthy {
    background: var(--mud-palette-success);
}

.license-usage-fill-warning {
    background: var(--mud-palette-warning);
}

.license-usage-fill-critical {
    background: var(--mud-palette-error);
}

/* License server item (similar to server-status-item) */
.license-server-item {
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    transition: all 0.2s ease;
}

.license-server-item:last-child {
    margin-bottom: 0;
}

.license-server-item-valid {
    background: rgba(var(--mud-palette-success-rgb), 0.08);
    border: 1px solid rgba(var(--mud-palette-success-rgb), 0.2);
}

.license-server-item-invalid {
    background: rgba(var(--mud-palette-error-rgb), 0.08);
    border: 1px solid rgba(var(--mud-palette-error-rgb), 0.2);
}

.license-server-item-offline {
    background: rgba(var(--mud-palette-grey-rgb), 0.08);
    border: 1px solid rgba(var(--mud-palette-grey-rgb), 0.2);
}

/* ===================================================================
   SYSTEM PAGES — SHARED PRIMITIVES (System Update + System Health)
   A single visual language so the two "System" pages feel like a suite.
   All colour values are MudBlazor palette tokens => light/dark safe.
   =================================================================== */

.sys-page {
    padding: 16px 0;
}

/* --- Hero banner ------------------------------------------------- */
.sys-hero {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    padding: 26px 32px;
    color: #fff;
}

.sys-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.4'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.sys-hero > * { position: relative; z-index: 1; }

.sys-hero-primary { background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-primary-darken) 100%); }
.sys-hero-success { background: linear-gradient(135deg, var(--mud-palette-success) 0%, var(--mud-palette-success-darken) 100%); }
.sys-hero-warning { background: linear-gradient(135deg, var(--mud-palette-warning) 0%, var(--mud-palette-warning-darken) 100%); }
.sys-hero-error   { background: linear-gradient(135deg, var(--mud-palette-error) 0%, var(--mud-palette-error-darken) 100%); }
.sys-hero-info    { background: linear-gradient(135deg, var(--mud-palette-info) 0%, var(--mud-palette-info-darken) 100%); }
.sys-hero-neutral { background: linear-gradient(135deg, var(--mud-palette-grey-default) 0%, var(--mud-palette-grey-darken-1) 100%); }

.sys-hero-icon {
    width: 72px;
    height: 72px;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sys-hero-title {
    color: #fff;
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.2;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.sys-hero-sub {
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.95rem;
}

.sys-hero-btn {
    background: rgba(255, 255, 255, 0.18) !important;
    color: #fff !important;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
}

.sys-hero-btn:hover { background: rgba(255, 255, 255, 0.30) !important; }

.sys-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    backdrop-filter: blur(8px);
}

/* --- Surface card (replaces flat MudPaper) ----------------------- */
.sys-card {
    border-radius: 14px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-paper);
    overflow: hidden;
}

.sys-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

.sys-card-head .mud-icon-root { color: var(--mud-palette-primary); }

.sys-card-title {
    font-weight: 600;
    font-size: 1rem;
}

.sys-card-body { padding: 18px 22px; }

/* --- Stat tiles (version / channel / latest) --------------------- */
.sys-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-radius: 12px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    padding: 14px 16px;
    height: 100%;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sys-stat:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.35);
    box-shadow: 0 2px 10px rgba(var(--mud-palette-primary-rgb), 0.08);
}

/* Text column (label + value + optional link) — hugs the left of the tile. */
.sys-stat-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Tinted icon medallion anchored to the right edge so the tile's width reads
   as intentional negative space rather than dead air. Default (no accent) is
   primary-tinted; the accent modifiers below recolor it to match the tile. */
.sys-stat-icon {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: rgba(var(--mud-palette-primary-rgb), 0.10);
    color: var(--mud-palette-primary);
}

.sys-stat-accent-success { border-left: 3px solid var(--mud-palette-success); }
.sys-stat-accent-warning { border-left: 3px solid var(--mud-palette-warning); }
.sys-stat-accent-info    { border-left: 3px solid var(--mud-palette-info); }

.sys-stat-accent-success .sys-stat-icon { background: rgba(var(--mud-palette-success-rgb), 0.14); color: var(--mud-palette-success); }
.sys-stat-accent-warning .sys-stat-icon { background: rgba(var(--mud-palette-warning-rgb), 0.14); color: var(--mud-palette-warning); }
.sys-stat-accent-info    .sys-stat-icon { background: rgba(var(--mud-palette-info-rgb),    0.14); color: var(--mud-palette-info); }

.sys-stat-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.sys-stat-value {
    font-size: 1.3rem;
    font-weight: 700;
    margin-top: 4px;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
}

.sys-stat-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    width: fit-content;
    margin-top: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    text-underline-offset: 2px;
}

/* --- Monospace, tabular version text ----------------------------- */
.sys-ver {
    font-family: var(--tca-font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* --- Live / pulsing dot ------------------------------------------ */
.sys-live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
    animation: sys-pulse 1.8s infinite;
}

@keyframes sys-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

/* --- Phase stepper (master -> remotes) --------------------------- */
.sys-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.sys-step {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--mud-palette-action-default-hover);
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

.sys-step-active { background: rgba(var(--mud-palette-info-rgb), 0.16); color: var(--mud-palette-info); }
.sys-step-done   { background: rgba(var(--mud-palette-success-rgb), 0.16); color: var(--mud-palette-success); }
.sys-step-sep    { color: var(--mud-palette-text-disabled); font-weight: 700; }

/* --- Server status rows (shared with health server-status-item) -- */
.sys-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    transition: border-color 0.2s ease, background 0.2s ease;
}

.sys-row + .sys-row { margin-top: 8px; }
.sys-row-online    { border-color: rgba(var(--mud-palette-success-rgb), 0.30); }
.sys-row-offline   { background: rgba(var(--mud-palette-error-rgb), 0.05); border-color: rgba(var(--mud-palette-error-rgb), 0.25); }
.sys-row-updating  { background: rgba(var(--mud-palette-info-rgb), 0.07); border-color: rgba(var(--mud-palette-info-rgb), 0.30); }
.sys-row-done      { background: rgba(var(--mud-palette-success-rgb), 0.07); border-color: rgba(var(--mud-palette-success-rgb), 0.30); }
.sys-row-failed    { background: rgba(var(--mud-palette-error-rgb), 0.07); border-color: rgba(var(--mud-palette-error-rgb), 0.30); }

/* --- Summary count chips (health overview) ----------------------- */
.sys-count-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.85rem;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-paper);
}

.sys-count-chip .sys-count-num {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

/* --- Entrance animation ------------------------------------------ */
.sys-fade-in {
    animation: sys-fade-in 0.35s ease both;
}

@keyframes sys-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .sys-live-dot,
    .sys-fade-in { animation: none; }
    .sys-stat,
    .sys-row { transition: none; }
    .sys-hero-icon { backdrop-filter: none; }
}

/* ===================================================================
   THEME EDITOR PAGE
   =================================================================== */

/* Color swatch strip - horizontal row of color previews */
.theme-color-swatch-strip {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.theme-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid rgba(var(--mud-palette-text-primary-rgb), 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}

.theme-color-swatch:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.theme-color-swatch-lg {
    width: 36px;
    height: 36px;
    border-radius: 8px;
}

/* Color picker card with preview bar */
.theme-color-picker-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    border: 1px solid rgba(var(--mud-palette-text-primary-rgb), 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background: var(--mud-palette-surface);
}

.theme-color-picker-card:hover {
    border-color: rgba(var(--mud-palette-primary-rgb), 0.3);
    box-shadow: 0 2px 8px rgba(var(--mud-palette-primary-rgb), 0.1);
}

.theme-color-preview {
    height: 6px;
    width: 100%;
    transition: background-color 0.2s ease;
}

/* Console preview blinking cursor animation */
.theme-console-preview span[style*="border-left"] {
    animation: blink 1s step-end infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .theme-color-swatch:hover {
        transform: none;
    }

    .theme-console-preview span[style*="border-left"] {
        animation: none;
    }
}

/* =========================================================================
   Mobile usability — game service pages (phones, MudBlazor Xs ≤ 599.98px)
   ========================================================================= */

/* Stacked data tables.
   On phones MudBlazor collapses MudTable/MudDataGrid into a stacked
   label/value layout (each <td> renders its column title via ::before).
   Long unbreakable tokens — IP addresses, file paths, hostnames — set the
   table's min-content width and push it past the viewport, clipping the
   value side off the right edge. Cap the table at the container width and
   let those tokens break so every value stays on-screen. Verified on the
   Activity grid: table 464px → 410px in a 410px container, 0 overflow. */
@media (max-width: 599.98px) {
    .mud-table-container .mud-table-root {
        width: 100%;
        max-width: 100%;
        table-layout: fixed;
    }

    .mud-table-container .mud-table-root .mud-table-cell {
        overflow-wrap: anywhere;
    }
}

/* File-manager loading skeleton: its left pane is a stand-in for the desktop folder tree, which is
   hidden on phones (the real tree uses MudHidden SmAndDown). Hide the skeleton tree too so the loading
   state matches the mobile layout — the contents skeleton (Width=100%) then fills the row. */
@media (max-width: 599.98px) {
    .fm-skeleton-tree {
        display: none;
    }
}

/* =========================================================================
   TCAHtmlEditor Design tab — the Quill canvas is always an email surface
   ========================================================================= */

/* Email HTML is authored against the white canvas email clients render on.
   quill.mudblazor.css (loaded by TCAdmin.LoadQuill) themes the editing surface
   with the Mud palette, so in dark mode the canvas goes dark with light text —
   while the content's own light table cells stay light: white-on-white text,
   invisible table lines. Pin the CANVAS to email-client colors in both themes;
   the toolbar and its dropdowns stay palette-themed. Higher specificity than
   the package's .ql-container rule, so stylesheet load order doesn't matter.
   color-scheme keeps the canvas scrollbar light to match. */
.tca-html-editor .ql-container.ql-snow {
    background-color: #ffffff;
    color: #212121;
    color-scheme: light;
}

/* =========================================================================
   Service home components (the ServiceHome layout-component catalog)
   ========================================================================= */

/* Shared chrome for the docker metric tiles (service-cpu/memory/disk/uptime-tile). Lives here —
   not in each component — so the compiled page and template-placed tiles style identically without
   four inline <style> copies. */
.docker-metric-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    min-height: 120px;
}
.docker-metric-card:hover {
    transform: translateY(-2px);
}

/* Shared chrome for the docker terminals. The terminal components carry the class themselves so a
   template-placed terminal is framed standalone; when one sits inside an already-framed host (the
   compiled home's tabs paper uses the same class), the inner frame goes transparent instead of
   drawing a border inside a border. */
.docker-terminal-wrapper {
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
}
.docker-terminal-wrapper .docker-terminal-wrapper {
    background: transparent;
    border: none;
}