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

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

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

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

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

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

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

/* 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: 'SF Mono', 'Consolas', 'Liberation Mono', monospace;
    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 {
    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);
}

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

/* --- Monospace, tabular version text ----------------------------- */
.sys-ver {
    font-family: ui-monospace, "Cascadia Code", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    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;
    }
}